angular2-data-table
Version:
angular2-data-table is a Angular2 component for presenting large and complex data.
68 lines • 2.27 kB
JavaScript
;
var core_1 = require('@angular/core');
/**
* Visibility Observer Directive
*
* Usage:
*
* <div
* visibility-observer
* (visible)="onVisible($event)">
* </div>
*
*/
var VisibilityDirective = (function () {
function VisibilityDirective(element, zone) {
this.element = element;
this.zone = zone;
this.isVisible = false;
this.visible = new core_1.EventEmitter();
}
VisibilityDirective.prototype.ngOnInit = function () {
this.runCheck();
};
VisibilityDirective.prototype.ngOnDestroy = function () {
clearTimeout(this.timeout);
};
VisibilityDirective.prototype.onVisibilityChange = function () {
var _this = this;
// trigger zone recalc for columns
this.zone.run(function () {
_this.isVisible = true;
_this.visible.emit(true);
});
};
VisibilityDirective.prototype.runCheck = function () {
var _this = this;
var check = function () {
// https://davidwalsh.name/offsetheight-visibility
var _a = _this.element.nativeElement, offsetHeight = _a.offsetHeight, offsetWidth = _a.offsetWidth;
if (offsetHeight && offsetWidth) {
clearTimeout(_this.timeout);
_this.onVisibilityChange();
}
else {
clearTimeout(_this.timeout);
_this.zone.runOutsideAngular(function () {
_this.timeout = setTimeout(function () { return check(); }, 50);
});
}
};
setTimeout(function () { return check(); });
};
VisibilityDirective.decorators = [
{ type: core_1.Directive, args: [{ selector: '[visibility-observer]' },] },
];
/** @nocollapse */
VisibilityDirective.ctorParameters = function () { return [
{ type: core_1.ElementRef, },
{ type: core_1.NgZone, },
]; };
VisibilityDirective.propDecorators = {
'isVisible': [{ type: core_1.HostBinding, args: ['class.visible',] },],
'visible': [{ type: core_1.Output },],
};
return VisibilityDirective;
}());
exports.VisibilityDirective = VisibilityDirective;
//# sourceMappingURL=visibility.directive.js.map