ionic2-elastic-header/dist/index.js

Directive for Ionic 2 and Ionic 3 to cause headers to shrink and reveal.

import { Directive, ElementRef, Input, NgModule, Renderer2 } from '@angular/core';
import { CommonModule } from '@angular/common';

var ElasticHeaderDirective = (function () {
    /**
     * @param {?} element
     * @param {?} renderer
     */
    function ElasticHeaderDirective(element, renderer) {
        this.element = element;
        this.renderer = renderer;
        this.translateAmt = 0;
        this.opacity = 1;
    }
    /**
     * @return {?}
     */
    ElasticHeaderDirective.prototype.ngOnInit = function () {
        var _this = this;
        this.scrollHandle = this.content;
        this.header = this.element.nativeElement;
        this.headerHeight = this.header.clientHeight;
        this.renderer.setStyle(this.header, 'webkitTransformOrigin', 'center bottom');
        this.content.ionScroll.subscribe(function ($event) {
            window.requestAnimationFrame(function () {
                _this.updateElasticHeader();
            });
        });
        window.addEventListener('resize', function () {
            _this.headerHeight = _this.header.clientHeight;
        }, false);
    };
    /**
     * @return {?}
     */
    ElasticHeaderDirective.prototype.updateElasticHeader = function () {
        var /** @type {?} */ result;
        this.scrollTop = this.scrollHandle.scrollTop;
        if (this.lastScrollTop <= this.scrollTop) {
            if (this.translateAmt >= (-this.headerHeight)) {
                this.translateAmt -= (this.scrollTop - this.lastScrollTop) / 4;
            }
            else {
                this.translateAmt = -this.headerHeight - 12;
                this.opacity = 0;
            }
        }
        else {
            if (this.translateAmt < 0) {
                result = this.translateAmt + (this.lastScrollTop - this.scrollTop) / 4;
                if (result > 0) {
                    result = 0;
                }
                this.translateAmt = result;
            }
            else {
                this.translateAmt = 0;
            }
        }
        this.renderer.setStyle(this.header, 'webkitTransform', 'translate3d(0,' + this.translateAmt + 'px,0)');
        this.lastScrollTop = this.scrollTop;
    };
    return ElasticHeaderDirective;
}());
ElasticHeaderDirective.decorators = [
    { type: Directive, args: [{
                selector: '[elasticHeader]'
            },] },
];
/**
 * @nocollapse
 */
ElasticHeaderDirective.ctorParameters = function () { return [
    { type: ElementRef, },
    { type: Renderer2, },
]; };
ElasticHeaderDirective.propDecorators = {
    'content': [{ type: Input, args: ['elasticHeader',] },],
};

var ElasticHeaderModule = (function () {
    function ElasticHeaderModule() {
    }
    return ElasticHeaderModule;
}());
ElasticHeaderModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule
                ],
                declarations: [
                    ElasticHeaderDirective
                ],
                exports: [
                    ElasticHeaderDirective
                ]
            },] },
];
/**
 * @nocollapse
 */
ElasticHeaderModule.ctorParameters = function () { return []; };

export { ElasticHeaderModule, ElasticHeaderDirective };