@ngu/parallax/bundles/nguparallax.umd.js

Angular universal parallax

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/platform-browser')) :
	typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/platform-browser'], factory) :
	(factory((global.ng = global.ng || {}, global.ng.nguparallax = global.ng.nguparallax || {}),global.ng.core,global.ng['platform-browser']));
}(this, (function (exports,_angular_core,_angular_platformBrowser) { 'use strict';

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: _angular_core.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: _angular_core.Renderer, },
        { type: _angular_core.ElementRef, },
        { type: _angular_platformBrowser.DomSanitizer, },
    ]; };
    NguParallaxComponent.propDecorators = {
        'imagedata': [{ type: _angular_core.Input, args: ['image',] },],
        'img1': [{ type: _angular_core.ViewChild, args: ['img', { read: _angular_core.ElementRef },] },],
    };
    return NguParallaxComponent;
}());

// import { CommonModule } from '@angular/common';
var NguParallaxModule = /** @class */ (function () {
    function NguParallaxModule() {
    }
    NguParallaxModule.decorators = [
        { type: _angular_core.NgModule, args: [{
                    imports: [],
                    exports: [NguParallaxComponent],
                    declarations: [NguParallaxComponent]
                },] },
    ];
    /** @nocollapse */
    NguParallaxModule.ctorParameters = function () { return []; };
    return NguParallaxModule;
}());

exports.NguParallaxModule = NguParallaxModule;

Object.defineProperty(exports, '__esModule', { value: true });

})));