ng2-events
Version:
Supercharge your Angular2+ event handling
120 lines (119 loc) • 5.48 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.ScrollEventPlugin = exports.SCROLL_EVENT_TIME = void 0;
var core_1 = require("@angular/core");
var common_1 = require("@angular/common");
var event_manager_plugin_1 = require("../__util/event-manager-plugin");
var rxjs_1 = require("rxjs");
var operators_1 = require("rxjs/operators");
var i0 = require("@angular/core");
exports.SCROLL_EVENT_TIME = new core_1.InjectionToken('ScrollEventTime');
/**
* Detects when an element is scrolled into or out of the viewport
*
* Usage:
* <div (scroll-in)="activate()" (scroll-out)="deactivate()">...</div>
*
* The matching handler of the initial status is called upon attaching
* to notify the element of its current status. $event is true for the
* initial call, false otherwise
*
*/
var ScrollEventPlugin = /** @class */ (function (_super) {
__extends(ScrollEventPlugin, _super);
function ScrollEventPlugin(doc, time) {
var _this = _super.call(this, doc) || this;
_this.listeners = [];
_this.globalListener = undefined;
_this.subject = new rxjs_1.Subject();
_this.subject
.pipe(operators_1.auditTime(time))
.subscribe(function () {
_this.listeners.forEach(function (x) { return x(); });
});
return _this;
}
ScrollEventPlugin.prototype.supports = function (eventName) {
return eventName === 'scroll-in' || eventName === 'scroll-out';
};
ScrollEventPlugin.prototype.addEventListener = function (element, eventName, handler) {
var _this = this;
var isScrollIn = (eventName === 'scroll-in');
var status = undefined;
setTimeout(function () {
status = _this.getStatus(element);
if ((isScrollIn && status) || (!isScrollIn && !status)) {
handler(true);
}
}, 0);
var listener = function () {
var newStatus = _this.getStatus(element);
if (status === newStatus)
return;
if ((isScrollIn && newStatus) || (!isScrollIn && !newStatus)) {
_this.manager.getZone().run(function () { return handler(false); });
}
status = newStatus;
};
this.listeners.push(listener);
this.updateGlobalListener();
return function () {
var index = _this.listeners.indexOf(listener);
if (index === -1)
return;
_this.listeners.splice(index, 1);
_this.updateGlobalListener();
};
};
ScrollEventPlugin.prototype.updateGlobalListener = function () {
var _this = this;
if (this.listeners.length && this.globalListener === undefined) {
this.manager.getZone().runOutsideAngular(function () {
var handler = function () {
_this.subject.next();
};
var listeners = ['scroll', 'resize', 'orientationchange']
.map(function (x) { return _this.manager.addEventListener(_this._doc.defaultView || window, x, handler); });
_this.globalListener = function () {
listeners.forEach(function (x) { return x(); });
};
});
}
else if (!this.listeners.length && this.globalListener !== undefined) {
this.globalListener();
this.globalListener = undefined;
}
};
ScrollEventPlugin.prototype.getStatus = function (element) {
var rect = element.getBoundingClientRect();
return (rect.bottom >= 0 && rect.top <= window.innerHeight);
};
ScrollEventPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.2", ngImport: i0, type: ScrollEventPlugin, deps: [{ token: common_1.DOCUMENT }, { token: exports.SCROLL_EVENT_TIME }], target: i0.ɵɵFactoryTarget.Injectable });
ScrollEventPlugin.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.2", ngImport: i0, type: ScrollEventPlugin });
return ScrollEventPlugin;
}(event_manager_plugin_1.MyEventManagerPlugin));
exports.ScrollEventPlugin = ScrollEventPlugin;
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.2", ngImport: i0, type: ScrollEventPlugin, decorators: [{
type: core_1.Injectable
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
type: core_1.Inject,
args: [common_1.DOCUMENT]
}] }, { type: undefined, decorators: [{
type: core_1.Inject,
args: [exports.SCROLL_EVENT_TIME]
}] }]; } });