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

Change header background opacity on content scroll

import { __awaiter, __generator, __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>
 * ```
 */
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 __awaiter(this, void 0, void 0, function () {
            var _a;
            var _this = this;
            return __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);
    };
    __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);
    return IonHeaderScrollOpacityDirective;
}());

var IonHeaderScrollOpacityModule = /** @class */ (function () {
    function IonHeaderScrollOpacityModule() {
    }
    IonHeaderScrollOpacityModule = __decorate([
        NgModule({
            declarations: [IonHeaderScrollOpacityDirective],
            exports: [IonHeaderScrollOpacityDirective]
        })
    ], IonHeaderScrollOpacityModule);
    return IonHeaderScrollOpacityModule;
}());

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

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