ion-header-scroll-opacity
Version:
Change header background opacity on content scroll
98 lines • 10.2 kB
JavaScript
import * as tslib_1 from "tslib";
import { Directive, Input, Renderer2, ContentChild } from '@angular/core';
import { IonContent, IonToolbar } from '@ionic/angular';
/**
* @description
*
* Change the header/toolbar opacity when the ion-content is scrolling
*
* ## Usage
*
* ```html
* <ion-header scrollOpacity [ionContentRef]="mycontent">
* <ion-toolbar color="primary">
* <ion-title>Scroll</ion-title>
* </ion-toolbar>
* </ion-header>
*
* <ion-content #mycontent [scrollEvents]="true">
* </ion-content>
* ```
*/
let IonHeaderScrollOpacityDirective = class IonHeaderScrollOpacityDirective {
constructor(renderer) {
this.renderer = renderer;
/**
* Amount of pixel to be scrolled in order end the opacity transition
*/
this.scrollAmount = 88;
/**
* If true the header background starts with opacity=0
*/
this.isTransparent = true;
}
ngOnInit() {
return tslib_1.__awaiter(this, void 0, void 0, function* () {
if (!this.toolbar) {
throw new Error('IonToolbar component not found for scrollOpacity directive');
}
// get the real scroll element
this.scrollArea = yield this.ionContentRef.getScrollElement();
// listen for ion-content scroll event
this.scrollSbuscription = this.ionContentRef.ionScroll.subscribe(() => {
this.changeOpacity();
});
this.toolbarEl = this.toolbar.el;
// @ts-ignore
// toolbarEl is a stenciljs web component
this.toolbarEl.componentOnReady().then(() => {
this.renderer.setStyle(this.toolbarBackgroundEl, 'opacity', this.isTransparent ? 0 : 1);
});
});
}
ngOnDestroy() {
this.scrollSbuscription.unsubscribe();
}
/**
* Extract the toolbar-background element from the toolbar shadow dom
*/
get toolbarBackgroundEl() {
return this.toolbarEl.shadowRoot.children[0];
}
changeOpacity() {
let amount = ((this.isTransparent ? 1 : 2) -
(this.scrollArea.scrollTop + this.scrollAmount) / this.scrollAmount) *
(this.isTransparent ? -1 : 1);
if (amount > 1) {
amount = 1;
}
if (amount < 0) {
amount = 0;
}
this.renderer.setStyle(this.toolbarBackgroundEl, 'opacity', amount);
}
};
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", IonContent)
], IonHeaderScrollOpacityDirective.prototype, "ionContentRef", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Object)
], IonHeaderScrollOpacityDirective.prototype, "scrollAmount", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Object)
], IonHeaderScrollOpacityDirective.prototype, "isTransparent", void 0);
tslib_1.__decorate([
ContentChild(IonToolbar, { static: true }),
tslib_1.__metadata("design:type", IonToolbar)
], IonHeaderScrollOpacityDirective.prototype, "toolbar", void 0);
IonHeaderScrollOpacityDirective = tslib_1.__decorate([
Directive({
selector: 'ion-header[scrollOpacity]'
}),
tslib_1.__metadata("design:paramtypes", [Renderer2])
], IonHeaderScrollOpacityDirective);
export { IonHeaderScrollOpacityDirective };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLXNjcm9sbC1vcGFjaXR5LmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2lvbi1oZWFkZXItc2Nyb2xsLW9wYWNpdHkvIiwic291cmNlcyI6WyJoZWFkZXItc2Nyb2xsLW9wYWNpdHkuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUdiLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxVQUFVLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFHeEQ7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBaUJHO0FBSUgsSUFBYSwrQkFBK0IsR0FBNUMsTUFBYSwrQkFBK0I7SUFxQzFDLFlBQW9CLFFBQW1CO1FBQW5CLGFBQVEsR0FBUixRQUFRLENBQVc7UUEvQnZDOztXQUVHO1FBQ00saUJBQVksR0FBRyxFQUFFLENBQUM7UUFFM0I7O1dBRUc7UUFDTSxrQkFBYSxHQUFHLElBQUksQ0FBQztJQXVCWSxDQUFDO0lBRXJDLFFBQVE7O1lBQ1osSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUU7Z0JBQ2pCLE1BQU0sSUFBSSxLQUFLLENBQ2IsNERBQTRELENBQzdELENBQUM7YUFDSDtZQUVELDhCQUE4QjtZQUM5QixJQUFJLENBQUMsVUFBVSxHQUFHLE1BQU0sSUFBSSxDQUFDLGFBQWEsQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO1lBRTlELHNDQUFzQztZQUN0QyxJQUFJLENBQUMsa0JBQWtCLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtnQkFDcEUsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1lBQ3ZCLENBQUMsQ0FBQyxDQUFDO1lBRUgsSUFBSSxDQUFDLFNBQVMsR0FBSSxJQUFJLENBQUMsT0FBZSxDQUFDLEVBQWlCLENBQUM7WUFFekQsYUFBYTtZQUNiLHlDQUF5QztZQUN6QyxJQUFJLENBQUMsU0FBUyxDQUFDLGdCQUFnQixFQUFFLENBQUMsSUFBSSxDQUFDLEdBQUcsRUFBRTtnQkFDMUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQ3BCLElBQUksQ0FBQyxtQkFBbUIsRUFDeEIsU0FBUyxFQUNULElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUMzQixDQUFDO1lBQ0osQ0FBQyxDQUFDLENBQUM7UUFDTCxDQUFDO0tBQUE7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3hDLENBQUM7SUFFRDs7T0FFRztJQUNILElBQUksbUJBQW1CO1FBQ3JCLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQy9DLENBQUM7SUFFRCxhQUFhO1FBQ1gsSUFBSSxNQUFNLEdBQ1IsQ0FBQyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQzNCLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUM7WUFDdEUsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFFaEMsSUFBSSxNQUFNLEdBQUcsQ0FBQyxFQUFFO1lBQ2QsTUFBTSxHQUFHLENBQUMsQ0FBQztTQUNaO1FBRUQsSUFBSSxNQUFNLEdBQUcsQ0FBQyxFQUFFO1lBQ2QsTUFBTSxHQUFHLENBQUMsQ0FBQztTQUNaO1FBRUQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLG1CQUFtQixFQUFFLFNBQVMsRUFBRSxNQUFNLENBQUMsQ0FBQztJQUN0RSxDQUFDO0NBQ0YsQ0FBQTtBQTFGVTtJQUFSLEtBQUssRUFBRTtzQ0FBZ0IsVUFBVTtzRUFBQztBQUsxQjtJQUFSLEtBQUssRUFBRTs7cUVBQW1CO0FBS2xCO0lBQVIsS0FBSyxFQUFFOztzRUFBc0I7QUFNYztJQUEzQyxZQUFZLENBQUMsVUFBVSxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxDQUFDO3NDQUFVLFVBQVU7Z0VBQUM7QUFwQnJELCtCQUErQjtJQUgzQyxTQUFTLENBQUM7UUFDVCxRQUFRLEVBQUUsMkJBQTJCO0tBQ3RDLENBQUM7NkNBc0M4QixTQUFTO0dBckM1QiwrQkFBK0IsQ0E4RjNDO1NBOUZZLCtCQUErQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIERpcmVjdGl2ZSxcbiAgSW5wdXQsXG4gIFJlbmRlcmVyMixcbiAgQ29udGVudENoaWxkLFxuICBPbkluaXQsXG4gIE9uRGVzdHJveVxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElvbkNvbnRlbnQsIElvblRvb2xiYXIgfSBmcm9tICdAaW9uaWMvYW5ndWxhcic7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcblxuLyoqXG4gKiBAZGVzY3JpcHRpb25cbiAqXG4gKiBDaGFuZ2UgdGhlIGhlYWRlci90b29sYmFyIG9wYWNpdHkgd2hlbiB0aGUgaW9uLWNvbnRlbnQgaXMgc2Nyb2xsaW5nXG4gKlxuICogIyMgVXNhZ2VcbiAqXG4gKiBgYGBodG1sXG4gKiA8aW9uLWhlYWRlciBzY3JvbGxPcGFjaXR5IFtpb25Db250ZW50UmVmXT1cIm15Y29udGVudFwiPlxuICogICA8aW9uLXRvb2xiYXIgY29sb3I9XCJwcmltYXJ5XCI+XG4gKiAgICAgPGlvbi10aXRsZT5TY3JvbGw8L2lvbi10aXRsZT5cbiAqICAgPC9pb24tdG9vbGJhcj5cbiAqIDwvaW9uLWhlYWRlcj5cbiAqXG4gKiA8aW9uLWNvbnRlbnQgI215Y29udGVudCBbc2Nyb2xsRXZlbnRzXT1cInRydWVcIj5cbiAqIDwvaW9uLWNvbnRlbnQ+XG4gKiBgYGBcbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnaW9uLWhlYWRlcltzY3JvbGxPcGFjaXR5XSdcbn0pXG5leHBvcnQgY2xhc3MgSW9uSGVhZGVyU2Nyb2xsT3BhY2l0eURpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgLyoqXG4gICAqIFJlZmVyZW5jZSB0byBpb24tY29udGVudCBjb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIGlvbkNvbnRlbnRSZWY6IElvbkNvbnRlbnQ7XG5cbiAgLyoqXG4gICAqIEFtb3VudCBvZiBwaXhlbCB0byBiZSBzY3JvbGxlZCBpbiBvcmRlciBlbmQgdGhlIG9wYWNpdHkgdHJhbnNpdGlvblxuICAgKi9cbiAgQElucHV0KCkgc2Nyb2xsQW1vdW50ID0gODg7XG5cbiAgLyoqXG4gICAqIElmIHRydWUgdGhlIGhlYWRlciBiYWNrZ3JvdW5kIHN0YXJ0cyB3aXRoIG9wYWNpdHk9MFxuICAgKi9cbiAgQElucHV0KCkgaXNUcmFuc3BhcmVudCA9IHRydWU7XG5cbiAgLyoqXG4gICAqIGlvbi10b29sYmFyIHJlZmVyZW5jZVxuICAgKi9cbiAgLy8gQHRzLWlnbm9yZVxuICBAQ29udGVudENoaWxkKElvblRvb2xiYXIsIHsgc3RhdGljOiB0cnVlIH0pIHRvb2xiYXI6IElvblRvb2xiYXI7XG5cbiAgLyoqXG4gICAqIFRvb2xiYXIgYmFja2dyb3VuZCBodG1sIGVsZW1lbnRcbiAgICovXG4gIHRvb2xiYXJFbDogSFRNTEVsZW1lbnQ7XG5cbiAgLyoqXG4gICAqIEVsZW1lbnQgd2hlcmUgdGhlIHNjcm9sbGluZyB0YWtlcyBwbGFjZVxuICAgKi9cbiAgc2Nyb2xsQXJlYTogSFRNTEVsZW1lbnQ7XG5cbiAgLyoqXG4gICAqIFNjcm9sbCBzdWJzY3JpcHRpb24gcmVmLiBXaGVuIHRoZSB0YXJnZXQgY29tcG9uZW50IGlzIGRlc3Ryb3llZCB3ZSBzaG91bGQgdW5zdWJzY3JpYmUgdG8gYXZvaWQgbWVtb3J5IGxlYWtcbiAgICovXG4gIHByaXZhdGUgc2Nyb2xsU2J1c2NyaXB0aW9uOiBTdWJzY3JpcHRpb247XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyKSB7fVxuXG4gIGFzeW5jIG5nT25Jbml0KCkge1xuICAgIGlmICghdGhpcy50b29sYmFyKSB7XG4gICAgICB0aHJvdyBuZXcgRXJyb3IoXG4gICAgICAgICdJb25Ub29sYmFyIGNvbXBvbmVudCBub3QgZm91bmQgZm9yIHNjcm9sbE9wYWNpdHkgZGlyZWN0aXZlJ1xuICAgICAgKTtcbiAgICB9XG5cbiAgICAvLyBnZXQgdGhlIHJlYWwgc2Nyb2xsIGVsZW1lbnRcbiAgICB0aGlzLnNjcm9sbEFyZWEgPSBhd2FpdCB0aGlzLmlvbkNvbnRlbnRSZWYuZ2V0U2Nyb2xsRWxlbWVudCgpO1xuXG4gICAgLy8gbGlzdGVuIGZvciBpb24tY29udGVudCBzY3JvbGwgZXZlbnRcbiAgICB0aGlzLnNjcm9sbFNidXNjcmlwdGlvbiA9IHRoaXMuaW9uQ29udGVudFJlZi5pb25TY3JvbGwuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgIHRoaXMuY2hhbmdlT3BhY2l0eSgpO1xuICAgIH0pO1xuXG4gICAgdGhpcy50b29sYmFyRWwgPSAodGhpcy50b29sYmFyIGFzIGFueSkuZWwgYXMgSFRNTEVsZW1lbnQ7XG5cbiAgICAvLyBAdHMtaWdub3JlXG4gICAgLy8gdG9vbGJhckVsIGlzIGEgc3RlbmNpbGpzIHdlYiBjb21wb25lbnRcbiAgICB0aGlzLnRvb2xiYXJFbC5jb21wb25lbnRPblJlYWR5KCkudGhlbigoKSA9PiB7XG4gICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKFxuICAgICAgICB0aGlzLnRvb2xiYXJCYWNrZ3JvdW5kRWwsXG4gICAgICAgICdvcGFjaXR5JyxcbiAgICAgICAgdGhpcy5pc1RyYW5zcGFyZW50ID8gMCA6IDFcbiAgICAgICk7XG4gICAgfSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLnNjcm9sbFNidXNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICB9XG5cbiAgLyoqXG4gICAqIEV4dHJhY3QgdGhlIHRvb2xiYXItYmFja2dyb3VuZCBlbGVtZW50IGZyb20gdGhlIHRvb2xiYXIgc2hhZG93IGRvbVxuICAgKi9cbiAgZ2V0IHRvb2xiYXJCYWNrZ3JvdW5kRWwoKSB7XG4gICAgcmV0dXJuIHRoaXMudG9vbGJhckVsLnNoYWRvd1Jvb3QuY2hpbGRyZW5bMF07XG4gIH1cblxuICBjaGFuZ2VPcGFjaXR5KCkge1xuICAgIGxldCBhbW91bnQgPVxuICAgICAgKCh0aGlzLmlzVHJhbnNwYXJlbnQgPyAxIDogMikgLVxuICAgICAgICAodGhpcy5zY3JvbGxBcmVhLnNjcm9sbFRvcCArIHRoaXMuc2Nyb2xsQW1vdW50KSAvIHRoaXMuc2Nyb2xsQW1vdW50KSAqXG4gICAgICAodGhpcy5pc1RyYW5zcGFyZW50ID8gLTEgOiAxKTtcblxuICAgIGlmIChhbW91bnQgPiAxKSB7XG4gICAgICBhbW91bnQgPSAxO1xuICAgIH1cblxuICAgIGlmIChhbW91bnQgPCAwKSB7XG4gICAgICBhbW91bnQgPSAwO1xuICAgIH1cblxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy50b29sYmFyQmFja2dyb3VuZEVsLCAnb3BhY2l0eScsIGFtb3VudCk7XG4gIH1cbn1cbiJdfQ==