@ngu/parallax/src/ngu-parallax.component.js

Angular universal parallax

import { Component, Renderer, Input, ViewChild, ElementRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
var NguParallaxComponent = /** @class */ (function () {
    function NguParallaxComponent(renderer, el, sanitizer) {
        this.renderer = renderer;
        this.el = el;
        this.sanitizer = sanitizer;
    }
    NguParallaxComponent.prototype.ngOnInit = function () {
        var _this = this;
        this.img = this.img1.nativeElement;
        this.parallaxHeight = this.el.nativeElement.offsetHeight;
        this.renderer.listenGlobal('window', 'scroll', function () {
            return _this.onWindowScrolling();
        });
        this.windowHeight = window.innerHeight;
        this._imgSafe = this.sanitizer.bypassSecurityTrustUrl(this.imagedata || '');
        // console.log(this.parallaxOffestTop, this.windowHeight, this.parallaxHeight);
    };
    Object.defineProperty(NguParallaxComponent.prototype, "image", {
        get: function () {
            return this._imgSafe;
        },
        enumerable: true,
        configurable: true
    });
    NguParallaxComponent.prototype.isLoaded = function (event) {
        this.imageHeight = this.img.offsetHeight;
        this.parallaxOffestTop = this.el.nativeElement.offsetTop;
        this.imgheit = Math.round((this.imageHeight - this.parallaxHeight) / this.imageHeight * 100);
        this.imgToBeScroll = Math.round(this.parallaxHeight / this.imageHeight * 100);
        // console.log(this.parallaxOffestTop, this.windowHeight, this.parallaxHeight)
        // console.log(this.imageHeight);
    };
    // @HostListener('window:scroll', ['$event'])
    NguParallaxComponent.prototype.onWindowScrolling = function () {
        var scrollY = window.scrollY;
        var cond = this.parallaxOffestTop <= scrollY + this.windowHeight &&
            this.parallaxOffestTop + this.parallaxHeight >= scrollY;
        // console.log(this.el.nativeElement.offsetTop, this.parallaxOffestTop);
        if (cond) {
            var minss = this.parallaxOffestTop > this.windowHeight
                ? this.parallaxOffestTop - this.windowHeight
                : 0;
            var tot = scrollY - minss;
            // const cond = tot <= this.imageHeight;
            var result = Math.round(tot / (this.windowHeight + this.parallaxHeight) * 100);
            var finalPer = Math.round(result / 100 * this.imgToBeScroll);
            // console.log(cond, tot, this.imgToBeScroll, result, finalPer);
            // console.log(this.windowHeight)
            // tslint:disable-next-line:no-unused-expression
            // cond &&
            this.renderer.setElementStyle(this.img, 'transform', "translate3d(0, -" + finalPer + "%, 0)");
        }
    };
    NguParallaxComponent.decorators = [
        { type: Component, args: [{
                    selector: 'ngu-parallax',
                    template: "<img #img [src]=\"image\" (load)=\"isLoaded($event)\"><div><ng-content></ng-content></div>",
                    styles: [
                        "\n    :host {\n        display: block;\n        overflow: hidden;\n        position: relative;\n    }\n\n    img {\n        width: 100%;\n        position: absolute;\n        top: 0px;\n        left: 0px;\n    }\n\n    div {\n        z-index: 1;\n        position: absolute;\n        top: 0px;\n        left: 0px;\n    }\n  "
                    ]
                },] },
    ];
    /** @nocollapse */
    NguParallaxComponent.ctorParameters = function () { return [
        { type: Renderer, },
        { type: ElementRef, },
        { type: DomSanitizer, },
    ]; };
    NguParallaxComponent.propDecorators = {
        'imagedata': [{ type: Input, args: ['image',] },],
        'img1': [{ type: ViewChild, args: ['img', { read: ElementRef },] },],
    };
    return NguParallaxComponent;
}());
export { NguParallaxComponent };
//# sourceMappingURL=ngu-parallax.component.js.map