ngx-headroom
Version:
Headroom.js implementation in Angular
208 lines • 12.7 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Directive, ElementRef, EventEmitter, Input, Output } from '@angular/core';
import Headroom from 'headroom.js';
var NgxHeadroomDirective = /** @class */ (function () {
function NgxHeadroomDirective(el) {
this.el = el;
this.options = {
offset: 300,
tolerance: 1,
classes: {
initial: 'animated',
pinned: 'flipInX',
unpinned: 'flipOutX'
}
};
// callback when pinned
this.pinned = new EventEmitter();
// callback when unpinned
this.unpinned = new EventEmitter();
// callback when above offset
this.toped = new EventEmitter();
// callback when below offset
this.notToped = new EventEmitter();
// callback when at bottom of page
this.bottomed = new EventEmitter();
// callback moving away from bottom of page
this.notBottomed = new EventEmitter();
this.element = this.el.nativeElement;
}
/**
* @return {?}
*/
NgxHeadroomDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.initalizeEvents();
this.headroom = new Headroom(this.element, this.options);
this.headroom.init();
};
/**
* @return {?}
*/
NgxHeadroomDirective.prototype.initalizeEvents = /**
* @return {?}
*/
function () {
var _this = this;
this.options.onPin = (/**
* @return {?}
*/
function () {
_this.pinned.emit();
});
this.options.onUnpin = (/**
* @return {?}
*/
function () {
_this.unpinned.emit();
});
this.options.onTop = (/**
* @return {?}
*/
function () {
_this.toped.emit();
});
this.options.onNotTop = (/**
* @return {?}
*/
function () {
_this.notToped.emit();
});
this.options.onBottom = (/**
* @return {?}
*/
function () {
_this.bottomed.emit();
});
this.options.onNotBottom = (/**
* @return {?}
*/
function () {
_this.notBottomed.emit();
});
};
/**
* @description destroy the headroom instance, removing event listeners and any classes added
*/
/**
* \@description destroy the headroom instance, removing event listeners and any classes added
* @return {?}
*/
NgxHeadroomDirective.prototype.destroy = /**
* \@description destroy the headroom instance, removing event listeners and any classes added
* @return {?}
*/
function () {
this.headroom.destory();
};
/**
* @description forcibly set the headroom instance's state to pinned
*/
/**
* \@description forcibly set the headroom instance's state to pinned
* @return {?}
*/
NgxHeadroomDirective.prototype.pin = /**
* \@description forcibly set the headroom instance's state to pinned
* @return {?}
*/
function () {
this.headroom.destory();
};
/**
* @description forcibly set the headroom instance's state to unpinned
*/
/**
* \@description forcibly set the headroom instance's state to unpinned
* @return {?}
*/
NgxHeadroomDirective.prototype.unpin = /**
* \@description forcibly set the headroom instance's state to unpinned
* @return {?}
*/
function () {
this.headroom.unpin();
};
/**
* @description freeze the headroom instance's state (pinned or unpinned), and no longer respond to scroll events
*/
/**
* \@description freeze the headroom instance's state (pinned or unpinned), and no longer respond to scroll events
* @return {?}
*/
NgxHeadroomDirective.prototype.freeze = /**
* \@description freeze the headroom instance's state (pinned or unpinned), and no longer respond to scroll events
* @return {?}
*/
function () {
this.headroom.freeze();
};
/**
* @description resume responding to scroll events
*/
/**
* \@description resume responding to scroll events
* @return {?}
*/
NgxHeadroomDirective.prototype.unfreeze = /**
* \@description resume responding to scroll events
* @return {?}
*/
function () {
this.headroom.unfreeze();
};
NgxHeadroomDirective.decorators = [
{ type: Directive, args: [{
selector: '[Ngxheadroom]'
},] }
];
/** @nocollapse */
NgxHeadroomDirective.ctorParameters = function () { return [
{ type: ElementRef }
]; };
NgxHeadroomDirective.propDecorators = {
options: [{ type: Input }],
pinned: [{ type: Output }],
unpinned: [{ type: Output }],
toped: [{ type: Output }],
notToped: [{ type: Output }],
bottomed: [{ type: Output }],
notBottomed: [{ type: Output }]
};
return NgxHeadroomDirective;
}());
export { NgxHeadroomDirective };
if (false) {
/**
* @type {?}
* @private
*/
NgxHeadroomDirective.prototype.element;
/** @type {?} */
NgxHeadroomDirective.prototype.headroom;
/** @type {?} */
NgxHeadroomDirective.prototype.options;
/** @type {?} */
NgxHeadroomDirective.prototype.pinned;
/** @type {?} */
NgxHeadroomDirective.prototype.unpinned;
/** @type {?} */
NgxHeadroomDirective.prototype.toped;
/** @type {?} */
NgxHeadroomDirective.prototype.notToped;
/** @type {?} */
NgxHeadroomDirective.prototype.bottomed;
/** @type {?} */
NgxHeadroomDirective.prototype.notBottomed;
/**
* @type {?}
* @private
*/
NgxHeadroomDirective.prototype.el;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWhlYWRyb29tLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1oZWFkcm9vbS8iLCJzb3VyY2VzIjpbImxpYi9uZ3gtaGVhZHJvb20uZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzRixPQUFPLFFBQVEsTUFBTSxhQUFhLENBQUM7QUFJbkM7SUFJRSw4QkFBb0IsRUFBYztRQUFkLE9BQUUsR0FBRixFQUFFLENBQVk7UUFLekIsWUFBTyxHQUFzQjtZQUNwQyxNQUFNLEVBQUUsR0FBRztZQUNYLFNBQVMsRUFBRSxDQUFDO1lBQ1osT0FBTyxFQUFFO2dCQUNQLE9BQU8sRUFBRSxVQUFVO2dCQUNuQixNQUFNLEVBQUUsU0FBUztnQkFDakIsUUFBUSxFQUFFLFVBQVU7YUFDckI7U0FDRixDQUFDOztRQUdRLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDOztRQUU1QixhQUFRLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQzs7UUFFOUIsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7O1FBRTNCLGFBQVEsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDOztRQUU5QixhQUFRLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQzs7UUFFOUIsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBekJ6QyxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDO0lBQ3ZDLENBQUM7Ozs7SUEwQkQsdUNBQVE7OztJQUFSO1FBQ0UsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxRQUFRLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDekQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN2QixDQUFDOzs7O0lBRUQsOENBQWU7OztJQUFmO1FBQUEsaUJBbUJDO1FBbEJDLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSzs7O1FBQUc7WUFDbkIsS0FBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNyQixDQUFDLENBQUEsQ0FBQztRQUNGLElBQUksQ0FBQyxPQUFPLENBQUMsT0FBTzs7O1FBQUc7WUFDckIsS0FBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN2QixDQUFDLENBQUEsQ0FBQztRQUNGLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSzs7O1FBQUc7WUFDbkIsS0FBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNwQixDQUFDLENBQUEsQ0FBQztRQUNGLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUTs7O1FBQUc7WUFDdEIsS0FBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN2QixDQUFDLENBQUEsQ0FBQztRQUNGLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUTs7O1FBQUc7WUFDdEIsS0FBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN2QixDQUFDLENBQUEsQ0FBQztRQUNGLElBQUksQ0FBQyxPQUFPLENBQUMsV0FBVzs7O1FBQUc7WUFDekIsS0FBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUMxQixDQUFDLENBQUEsQ0FBQztJQUNKLENBQUM7SUFFRDs7T0FFRzs7Ozs7SUFDSCxzQ0FBTzs7OztJQUFQO1FBQ0UsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUMxQixDQUFDO0lBRUQ7O09BRUc7Ozs7O0lBQ0gsa0NBQUc7Ozs7SUFBSDtRQUNFLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVEOztPQUVHOzs7OztJQUNILG9DQUFLOzs7O0lBQUw7UUFDRSxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ3hCLENBQUM7SUFFRDs7T0FFRzs7Ozs7SUFDSCxxQ0FBTTs7OztJQUFOO1FBQ0UsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBRUQ7O09BRUc7Ozs7O0lBQ0gsdUNBQVE7Ozs7SUFBUjtRQUNFLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDM0IsQ0FBQzs7Z0JBNUZGLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsZUFBZTtpQkFDMUI7Ozs7Z0JBUG1CLFVBQVU7OzswQkFjM0IsS0FBSzt5QkFXTCxNQUFNOzJCQUVOLE1BQU07d0JBRU4sTUFBTTsyQkFFTixNQUFNOzJCQUVOLE1BQU07OEJBRU4sTUFBTTs7SUErRFQsMkJBQUM7Q0FBQSxBQTdGRCxJQTZGQztTQTFGWSxvQkFBb0I7Ozs7OztJQUkvQix1Q0FBNkI7O0lBQzdCLHdDQUFjOztJQUNkLHVDQVFFOztJQUdGLHNDQUFzQzs7SUFFdEMsd0NBQXdDOztJQUV4QyxxQ0FBcUM7O0lBRXJDLHdDQUF3Qzs7SUFFeEMsd0NBQXdDOztJQUV4QywyQ0FBMkM7Ozs7O0lBMUIvQixrQ0FBc0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgSGVhZHJvb20gZnJvbSAnaGVhZHJvb20uanMnO1xuXG5pbXBvcnQgeyBOZ3hIZWFkcm9vbU9wdGlvbiB9IGZyb20gJy4vbmd4LWhlYWRyb29tLm9wdGlvbic7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tOZ3hoZWFkcm9vbV0nXG59KVxuZXhwb3J0IGNsYXNzIE5neEhlYWRyb29tRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0IHtcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbDogRWxlbWVudFJlZikge1xuICAgIHRoaXMuZWxlbWVudCA9IHRoaXMuZWwubmF0aXZlRWxlbWVudDtcbiAgfVxuICBwcml2YXRlIGVsZW1lbnQ6IEhUTUxFbGVtZW50O1xuICBoZWFkcm9vbTogYW55O1xuICBASW5wdXQoKSBvcHRpb25zOiBOZ3hIZWFkcm9vbU9wdGlvbiA9IHtcbiAgICBvZmZzZXQ6IDMwMCxcbiAgICB0b2xlcmFuY2U6IDEsXG4gICAgY2xhc3Nlczoge1xuICAgICAgaW5pdGlhbDogJ2FuaW1hdGVkJyxcbiAgICAgIHBpbm5lZDogJ2ZsaXBJblgnLFxuICAgICAgdW5waW5uZWQ6ICdmbGlwT3V0WCdcbiAgICB9XG4gIH07XG5cbiAgLy8gY2FsbGJhY2sgd2hlbiBwaW5uZWRcbiAgQE91dHB1dCgpIHBpbm5lZCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgLy8gY2FsbGJhY2sgd2hlbiB1bnBpbm5lZFxuICBAT3V0cHV0KCkgdW5waW5uZWQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIC8vIGNhbGxiYWNrIHdoZW4gYWJvdmUgb2Zmc2V0XG4gIEBPdXRwdXQoKSB0b3BlZCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgLy8gY2FsbGJhY2sgd2hlbiAgYmVsb3cgb2Zmc2V0XG4gIEBPdXRwdXQoKSBub3RUb3BlZCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgLy8gY2FsbGJhY2sgd2hlbiBhdCBib3R0b20gb2YgcGFnZVxuICBAT3V0cHV0KCkgYm90dG9tZWQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIC8vIGNhbGxiYWNrIG1vdmluZyBhd2F5IGZyb20gYm90dG9tIG9mIHBhZ2VcbiAgQE91dHB1dCgpIG5vdEJvdHRvbWVkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuaW5pdGFsaXplRXZlbnRzKCk7XG4gICAgdGhpcy5oZWFkcm9vbSA9IG5ldyBIZWFkcm9vbSh0aGlzLmVsZW1lbnQsIHRoaXMub3B0aW9ucyk7XG4gICAgdGhpcy5oZWFkcm9vbS5pbml0KCk7XG4gIH1cblxuICBpbml0YWxpemVFdmVudHMoKSB7XG4gICAgdGhpcy5vcHRpb25zLm9uUGluID0gKCkgPT4ge1xuICAgICAgdGhpcy5waW5uZWQuZW1pdCgpO1xuICAgIH07XG4gICAgdGhpcy5vcHRpb25zLm9uVW5waW4gPSAoKSA9PiB7XG4gICAgICB0aGlzLnVucGlubmVkLmVtaXQoKTtcbiAgICB9O1xuICAgIHRoaXMub3B0aW9ucy5vblRvcCA9ICgpID0+IHtcbiAgICAgIHRoaXMudG9wZWQuZW1pdCgpO1xuICAgIH07XG4gICAgdGhpcy5vcHRpb25zLm9uTm90VG9wID0gKCkgPT4ge1xuICAgICAgdGhpcy5ub3RUb3BlZC5lbWl0KCk7XG4gICAgfTtcbiAgICB0aGlzLm9wdGlvbnMub25Cb3R0b20gPSAoKSA9PiB7XG4gICAgICB0aGlzLmJvdHRvbWVkLmVtaXQoKTtcbiAgICB9O1xuICAgIHRoaXMub3B0aW9ucy5vbk5vdEJvdHRvbSA9ICgpID0+IHtcbiAgICAgIHRoaXMubm90Qm90dG9tZWQuZW1pdCgpO1xuICAgIH07XG4gIH1cblxuICAvKipcbiAgICogQGRlc2NyaXB0aW9uIGRlc3Ryb3kgdGhlIGhlYWRyb29tIGluc3RhbmNlLCByZW1vdmluZyBldmVudCBsaXN0ZW5lcnMgYW5kIGFueSBjbGFzc2VzIGFkZGVkXG4gICAqL1xuICBkZXN0cm95KCkge1xuICAgIHRoaXMuaGVhZHJvb20uZGVzdG9yeSgpO1xuICB9XG5cbiAgLyoqXG4gICAqIEBkZXNjcmlwdGlvbiBmb3JjaWJseSBzZXQgdGhlIGhlYWRyb29tIGluc3RhbmNlJ3Mgc3RhdGUgdG8gcGlubmVkXG4gICAqL1xuICBwaW4oKSB7XG4gICAgdGhpcy5oZWFkcm9vbS5kZXN0b3J5KCk7XG4gIH1cblxuICAvKipcbiAgICogQGRlc2NyaXB0aW9uIGZvcmNpYmx5IHNldCB0aGUgaGVhZHJvb20gaW5zdGFuY2UncyBzdGF0ZSB0byB1bnBpbm5lZFxuICAgKi9cbiAgdW5waW4oKSB7XG4gICAgdGhpcy5oZWFkcm9vbS51bnBpbigpO1xuICB9XG5cbiAgLyoqXG4gICAqIEBkZXNjcmlwdGlvbiAgZnJlZXplIHRoZSBoZWFkcm9vbSBpbnN0YW5jZSdzIHN0YXRlIChwaW5uZWQgb3IgdW5waW5uZWQpLCBhbmQgbm8gbG9uZ2VyIHJlc3BvbmQgdG8gc2Nyb2xsIGV2ZW50c1xuICAgKi9cbiAgZnJlZXplKCkge1xuICAgIHRoaXMuaGVhZHJvb20uZnJlZXplKCk7XG4gIH1cblxuICAvKipcbiAgICogQGRlc2NyaXB0aW9uIHJlc3VtZSByZXNwb25kaW5nIHRvIHNjcm9sbCBldmVudHNcbiAgICovXG4gIHVuZnJlZXplKCkge1xuICAgIHRoaXMuaGVhZHJvb20udW5mcmVlemUoKTtcbiAgfVxufVxuIl19