ion-header-scroll-opacity
Version:
Change header background opacity on content scroll
115 lines • 11.4 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>
* ```
*/
var IonHeaderScrollOpacityDirective = /** @class */ (function () {
function IonHeaderScrollOpacityDirective(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;
}
IonHeaderScrollOpacityDirective.prototype.ngOnInit = function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var _a;
var _this = this;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
if (!this.toolbar) {
throw new Error('IonToolbar component not found for scrollOpacity directive');
}
// get the real scroll element
_a = this;
return [4 /*yield*/, this.ionContentRef.getScrollElement()];
case 1:
// get the real scroll element
_a.scrollArea = _b.sent();
// listen for ion-content scroll event
this.scrollSbuscription = this.ionContentRef.ionScroll.subscribe(function () {
_this.changeOpacity();
});
this.toolbarEl = this.toolbar.el;
// @ts-ignore
// toolbarEl is a stenciljs web component
this.toolbarEl.componentOnReady().then(function () {
_this.renderer.setStyle(_this.toolbarBackgroundEl, 'opacity', _this.isTransparent ? 0 : 1);
});
return [2 /*return*/];
}
});
});
};
IonHeaderScrollOpacityDirective.prototype.ngOnDestroy = function () {
this.scrollSbuscription.unsubscribe();
};
Object.defineProperty(IonHeaderScrollOpacityDirective.prototype, "toolbarBackgroundEl", {
/**
* Extract the toolbar-background element from the toolbar shadow dom
*/
get: function () {
return this.toolbarEl.shadowRoot.children[0];
},
enumerable: true,
configurable: true
});
IonHeaderScrollOpacityDirective.prototype.changeOpacity = function () {
var 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);
return IonHeaderScrollOpacityDirective;
}());
export { IonHeaderScrollOpacityDirective };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLXNjcm9sbC1vcGFjaXR5LmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2lvbi1oZWFkZXItc2Nyb2xsLW9wYWNpdHkvIiwic291cmNlcyI6WyJoZWFkZXItc2Nyb2xsLW9wYWNpdHkuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUdiLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxVQUFVLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFHeEQ7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBaUJHO0FBSUg7SUFxQ0UseUNBQW9CLFFBQW1CO1FBQW5CLGFBQVEsR0FBUixRQUFRLENBQVc7UUEvQnZDOztXQUVHO1FBQ00saUJBQVksR0FBRyxFQUFFLENBQUM7UUFFM0I7O1dBRUc7UUFDTSxrQkFBYSxHQUFHLElBQUksQ0FBQztJQXVCWSxDQUFDO0lBRXJDLGtEQUFRLEdBQWQ7Ozs7Ozs7d0JBQ0UsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUU7NEJBQ2pCLE1BQU0sSUFBSSxLQUFLLENBQ2IsNERBQTRELENBQzdELENBQUM7eUJBQ0g7d0JBRUQsOEJBQThCO3dCQUM5QixLQUFBLElBQUksQ0FBQTt3QkFBYyxxQkFBTSxJQUFJLENBQUMsYUFBYSxDQUFDLGdCQUFnQixFQUFFLEVBQUE7O3dCQUQ3RCw4QkFBOEI7d0JBQzlCLEdBQUssVUFBVSxHQUFHLFNBQTJDLENBQUM7d0JBRTlELHNDQUFzQzt3QkFDdEMsSUFBSSxDQUFDLGtCQUFrQixHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsU0FBUyxDQUFDLFNBQVMsQ0FBQzs0QkFDL0QsS0FBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO3dCQUN2QixDQUFDLENBQUMsQ0FBQzt3QkFFSCxJQUFJLENBQUMsU0FBUyxHQUFJLElBQUksQ0FBQyxPQUFlLENBQUMsRUFBaUIsQ0FBQzt3QkFFekQsYUFBYTt3QkFDYix5Q0FBeUM7d0JBQ3pDLElBQUksQ0FBQyxTQUFTLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxJQUFJLENBQUM7NEJBQ3JDLEtBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUNwQixLQUFJLENBQUMsbUJBQW1CLEVBQ3hCLFNBQVMsRUFDVCxLQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FDM0IsQ0FBQzt3QkFDSixDQUFDLENBQUMsQ0FBQzs7Ozs7S0FDSjtJQUVELHFEQUFXLEdBQVg7UUFDRSxJQUFJLENBQUMsa0JBQWtCLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDeEMsQ0FBQztJQUtELHNCQUFJLGdFQUFtQjtRQUh2Qjs7V0FFRzthQUNIO1lBQ0UsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDL0MsQ0FBQzs7O09BQUE7SUFFRCx1REFBYSxHQUFiO1FBQ0UsSUFBSSxNQUFNLEdBQ1IsQ0FBQyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQzNCLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUM7WUFDdEUsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFFaEMsSUFBSSxNQUFNLEdBQUcsQ0FBQyxFQUFFO1lBQ2QsTUFBTSxHQUFHLENBQUMsQ0FBQztTQUNaO1FBRUQsSUFBSSxNQUFNLEdBQUcsQ0FBQyxFQUFFO1lBQ2QsTUFBTSxHQUFHLENBQUMsQ0FBQztTQUNaO1FBRUQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLG1CQUFtQixFQUFFLFNBQVMsRUFBRSxNQUFNLENBQUMsQ0FBQztJQUN0RSxDQUFDO0lBekZRO1FBQVIsS0FBSyxFQUFFOzBDQUFnQixVQUFVOzBFQUFDO0lBSzFCO1FBQVIsS0FBSyxFQUFFOzt5RUFBbUI7SUFLbEI7UUFBUixLQUFLLEVBQUU7OzBFQUFzQjtJQU1jO1FBQTNDLFlBQVksQ0FBQyxVQUFVLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFLENBQUM7MENBQVUsVUFBVTtvRUFBQztJQXBCckQsK0JBQStCO1FBSDNDLFNBQVMsQ0FBQztZQUNULFFBQVEsRUFBRSwyQkFBMkI7U0FDdEMsQ0FBQztpREFzQzhCLFNBQVM7T0FyQzVCLCtCQUErQixDQThGM0M7SUFBRCxzQ0FBQztDQUFBLEFBOUZELElBOEZDO1NBOUZZLCtCQUErQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIERpcmVjdGl2ZSxcbiAgSW5wdXQsXG4gIFJlbmRlcmVyMixcbiAgQ29udGVudENoaWxkLFxuICBPbkluaXQsXG4gIE9uRGVzdHJveVxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElvbkNvbnRlbnQsIElvblRvb2xiYXIgfSBmcm9tICdAaW9uaWMvYW5ndWxhcic7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcblxuLyoqXG4gKiBAZGVzY3JpcHRpb25cbiAqXG4gKiBDaGFuZ2UgdGhlIGhlYWRlci90b29sYmFyIG9wYWNpdHkgd2hlbiB0aGUgaW9uLWNvbnRlbnQgaXMgc2Nyb2xsaW5nXG4gKlxuICogIyMgVXNhZ2VcbiAqXG4gKiBgYGBodG1sXG4gKiA8aW9uLWhlYWRlciBzY3JvbGxPcGFjaXR5IFtpb25Db250ZW50UmVmXT1cIm15Y29udGVudFwiPlxuICogICA8aW9uLXRvb2xiYXIgY29sb3I9XCJwcmltYXJ5XCI+XG4gKiAgICAgPGlvbi10aXRsZT5TY3JvbGw8L2lvbi10aXRsZT5cbiAqICAgPC9pb24tdG9vbGJhcj5cbiAqIDwvaW9uLWhlYWRlcj5cbiAqXG4gKiA8aW9uLWNvbnRlbnQgI215Y29udGVudCBbc2Nyb2xsRXZlbnRzXT1cInRydWVcIj5cbiAqIDwvaW9uLWNvbnRlbnQ+XG4gKiBgYGBcbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnaW9uLWhlYWRlcltzY3JvbGxPcGFjaXR5XSdcbn0pXG5leHBvcnQgY2xhc3MgSW9uSGVhZGVyU2Nyb2xsT3BhY2l0eURpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgLyoqXG4gICAqIFJlZmVyZW5jZSB0byBpb24tY29udGVudCBjb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIGlvbkNvbnRlbnRSZWY6IElvbkNvbnRlbnQ7XG5cbiAgLyoqXG4gICAqIEFtb3VudCBvZiBwaXhlbCB0byBiZSBzY3JvbGxlZCBpbiBvcmRlciBlbmQgdGhlIG9wYWNpdHkgdHJhbnNpdGlvblxuICAgKi9cbiAgQElucHV0KCkgc2Nyb2xsQW1vdW50ID0gODg7XG5cbiAgLyoqXG4gICAqIElmIHRydWUgdGhlIGhlYWRlciBiYWNrZ3JvdW5kIHN0YXJ0cyB3aXRoIG9wYWNpdHk9MFxuICAgKi9cbiAgQElucHV0KCkgaXNUcmFuc3BhcmVudCA9IHRydWU7XG5cbiAgLyoqXG4gICAqIGlvbi10b29sYmFyIHJlZmVyZW5jZVxuICAgKi9cbiAgLy8gQHRzLWlnbm9yZVxuICBAQ29udGVudENoaWxkKElvblRvb2xiYXIsIHsgc3RhdGljOiB0cnVlIH0pIHRvb2xiYXI6IElvblRvb2xiYXI7XG5cbiAgLyoqXG4gICAqIFRvb2xiYXIgYmFja2dyb3VuZCBodG1sIGVsZW1lbnRcbiAgICovXG4gIHRvb2xiYXJFbDogSFRNTEVsZW1lbnQ7XG5cbiAgLyoqXG4gICAqIEVsZW1lbnQgd2hlcmUgdGhlIHNjcm9sbGluZyB0YWtlcyBwbGFjZVxuICAgKi9cbiAgc2Nyb2xsQXJlYTogSFRNTEVsZW1lbnQ7XG5cbiAgLyoqXG4gICAqIFNjcm9sbCBzdWJzY3JpcHRpb24gcmVmLiBXaGVuIHRoZSB0YXJnZXQgY29tcG9uZW50IGlzIGRlc3Ryb3llZCB3ZSBzaG91bGQgdW5zdWJzY3JpYmUgdG8gYXZvaWQgbWVtb3J5IGxlYWtcbiAgICovXG4gIHByaXZhdGUgc2Nyb2xsU2J1c2NyaXB0aW9uOiBTdWJzY3JpcHRpb247XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyKSB7fVxuXG4gIGFzeW5jIG5nT25Jbml0KCkge1xuICAgIGlmICghdGhpcy50b29sYmFyKSB7XG4gICAgICB0aHJvdyBuZXcgRXJyb3IoXG4gICAgICAgICdJb25Ub29sYmFyIGNvbXBvbmVudCBub3QgZm91bmQgZm9yIHNjcm9sbE9wYWNpdHkgZGlyZWN0aXZlJ1xuICAgICAgKTtcbiAgICB9XG5cbiAgICAvLyBnZXQgdGhlIHJlYWwgc2Nyb2xsIGVsZW1lbnRcbiAgICB0aGlzLnNjcm9sbEFyZWEgPSBhd2FpdCB0aGlzLmlvbkNvbnRlbnRSZWYuZ2V0U2Nyb2xsRWxlbWVudCgpO1xuXG4gICAgLy8gbGlzdGVuIGZvciBpb24tY29udGVudCBzY3JvbGwgZXZlbnRcbiAgICB0aGlzLnNjcm9sbFNidXNjcmlwdGlvbiA9IHRoaXMuaW9uQ29udGVudFJlZi5pb25TY3JvbGwuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgIHRoaXMuY2hhbmdlT3BhY2l0eSgpO1xuICAgIH0pO1xuXG4gICAgdGhpcy50b29sYmFyRWwgPSAodGhpcy50b29sYmFyIGFzIGFueSkuZWwgYXMgSFRNTEVsZW1lbnQ7XG5cbiAgICAvLyBAdHMtaWdub3JlXG4gICAgLy8gdG9vbGJhckVsIGlzIGEgc3RlbmNpbGpzIHdlYiBjb21wb25lbnRcbiAgICB0aGlzLnRvb2xiYXJFbC5jb21wb25lbnRPblJlYWR5KCkudGhlbigoKSA9PiB7XG4gICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKFxuICAgICAgICB0aGlzLnRvb2xiYXJCYWNrZ3JvdW5kRWwsXG4gICAgICAgICdvcGFjaXR5JyxcbiAgICAgICAgdGhpcy5pc1RyYW5zcGFyZW50ID8gMCA6IDFcbiAgICAgICk7XG4gICAgfSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLnNjcm9sbFNidXNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICB9XG5cbiAgLyoqXG4gICAqIEV4dHJhY3QgdGhlIHRvb2xiYXItYmFja2dyb3VuZCBlbGVtZW50IGZyb20gdGhlIHRvb2xiYXIgc2hhZG93IGRvbVxuICAgKi9cbiAgZ2V0IHRvb2xiYXJCYWNrZ3JvdW5kRWwoKSB7XG4gICAgcmV0dXJuIHRoaXMudG9vbGJhckVsLnNoYWRvd1Jvb3QuY2hpbGRyZW5bMF07XG4gIH1cblxuICBjaGFuZ2VPcGFjaXR5KCkge1xuICAgIGxldCBhbW91bnQgPVxuICAgICAgKCh0aGlzLmlzVHJhbnNwYXJlbnQgPyAxIDogMikgLVxuICAgICAgICAodGhpcy5zY3JvbGxBcmVhLnNjcm9sbFRvcCArIHRoaXMuc2Nyb2xsQW1vdW50KSAvIHRoaXMuc2Nyb2xsQW1vdW50KSAqXG4gICAgICAodGhpcy5pc1RyYW5zcGFyZW50ID8gLTEgOiAxKTtcblxuICAgIGlmIChhbW91bnQgPiAxKSB7XG4gICAgICBhbW91bnQgPSAxO1xuICAgIH1cblxuICAgIGlmIChhbW91bnQgPCAwKSB7XG4gICAgICBhbW91bnQgPSAwO1xuICAgIH1cblxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy50b29sYmFyQmFja2dyb3VuZEVsLCAnb3BhY2l0eScsIGFtb3VudCk7XG4gIH1cbn1cbiJdfQ==