ion-header-scroll-opacity/fesm2015/ion-header-scroll-opacity.js

Change header background opacity on content scroll

import { __awaiter, __decorate, __metadata } from 'tslib';
import { Input, ContentChild, Directive, Renderer2, NgModule } 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 __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);
    }
};
__decorate([
    Input(),
    __metadata("design:type", IonContent)
], IonHeaderScrollOpacityDirective.prototype, "ionContentRef", void 0);
__decorate([
    Input(),
    __metadata("design:type", Object)
], IonHeaderScrollOpacityDirective.prototype, "scrollAmount", void 0);
__decorate([
    Input(),
    __metadata("design:type", Object)
], IonHeaderScrollOpacityDirective.prototype, "isTransparent", void 0);
__decorate([
    ContentChild(IonToolbar, { static: true }),
    __metadata("design:type", IonToolbar)
], IonHeaderScrollOpacityDirective.prototype, "toolbar", void 0);
IonHeaderScrollOpacityDirective = __decorate([
    Directive({
        selector: 'ion-header[scrollOpacity]'
    }),
    __metadata("design:paramtypes", [Renderer2])
], IonHeaderScrollOpacityDirective);

let IonHeaderScrollOpacityModule = class IonHeaderScrollOpacityModule {
};
IonHeaderScrollOpacityModule = __decorate([
    NgModule({
        declarations: [IonHeaderScrollOpacityDirective],
        exports: [IonHeaderScrollOpacityDirective]
    })
], IonHeaderScrollOpacityModule);

/**
 * Generated bundle index. Do not edit.
 */

export { IonHeaderScrollOpacityModule, IonHeaderScrollOpacityDirective as ɵa };
//# sourceMappingURL=ion-header-scroll-opacity.js.map