Parallax JS

/*!
 * parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
 * @copyright 2016 PixelCog, Inc.
 * @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
 * @bug-fix Michael <[email protected]> 16/08/2019 - Fixed bug when no HEIGHT is found, and parallax renders blank
 */
(function($, window, document, undefined) {

    // Polyfill for requestAnimationFrame
    // via: https://gist.github.com/paulirish/1579671

    (function() {

        var lastTime = 0;
        var vendors = ['ms', 'moz', 'webkit', 'o'];

        for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
            window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
            window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
        };

        if (!window.requestAnimationFrame) {
            window.requestAnimationFrame = function(callback) {

                var currTime = new Date().getTime();
                var timeToCall = Math.max(0, 16 - (currTime - lastTime));

                var timeToFn = function() {
                    callback(currTime + timeToCall);
                };

                var id = window.setTimeout(timeToFn, timeToCall);
                lastTime = currTime + timeToCall;
                return id;

            };
        };

        if (!window.cancelAnimationFrame) {
            window.cancelAnimationFrame = function(id) {
                clearTimeout(id);
            };
        };

    }());


    // Parallax Constructor

    function Parallax(element, options) {

        var self = this;

        if (typeof options == 'object') {
            delete options.refresh;
            delete options.render;
            $.extend(this, options);
        };

        this.$parallaxArgs = new URLSearchParams(window.location.search);

        this.$element = $(element);
        this.isParallaxElement = (String(this.$element.data('parallax')) == 'scroll');
        this.elementMirror = Boolean(this.$element.data('mirrorContainer'));
        this.isUnderReview = Boolean(this.$parallaxArgs.get('parallax_review')) && !this.isParallaxElement;

        if (!Boolean(this.elementMirror) && this.isParallaxElement) {
            this.$mirrorContainer = this.$element;
        } else {
            this.$mirrorContainer = $(this.mirrorContainer);
        };

        if (typeof(this.parallaxIsFullWidth) !== 'undefined') {
            this.$parallaxIsFullWidth = this.parallaxIsFullWidth;
        } else {
            this.$parallaxIsFullWidth = true;
        };

        if (Boolean(this.boxElement)) {
            this.$boxElement = $(this.boxElement);
        } else {
            this.$boxElement = this.$element;
        };

        if (Boolean(this.boxWidthElement)) {
            this.$boxWidthElement = $(this.boxWidthElement);
        } else {
            this.$boxWidthElement = this.$boxElement;
        };

        if (Boolean(this.boxHeightElement)) {
            this.$boxHeightElement = $(this.boxHeightElement);
        } else {
            this.$boxHeightElement = this.$boxElement;
        };;

        if (!this.imageSrc && this.$element.is('img')) {
            this.imageSrc = this.$element.attr('src');
        };

        var positions = (this.position + '').toLowerCase().match(/\S+/g) || [];

        if (positions.length < 1) {
            positions.push('center');
        };

        if (positions.length == 1) {
            positions.push(positions[0]);
        };

        if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
            positions = [positions[1], positions[0]];
        };

        if (this.positionX !== undefined) {
            positions[0] = this.positionX.toLowerCase();
        };

        if (this.positionY !== undefined) {
            positions[1] = this.positionY.toLowerCase();
        };

        self.positionX = positions[0];
        self.positionY = positions[1];

        if (this.positionX != 'left' && this.positionX != 'right') {
            if (isNaN(parseInt(this.positionX))) {
                this.positionX = 'center';
            } else {
                this.positionX = parseInt(this.positionX);
            };
        };

        if (this.positionY != 'top' && this.positionY != 'bottom') {
            if (isNaN(parseInt(this.positionY))) {
                this.positionY = 'center';
            } else {
                this.positionY = parseInt(this.positionY);
            };
        };

        var position_s = [];
        position_s.push(this.positionX + (isNaN(this.positionX) ? '' : 'px'));
        position_s.push(this.positionY + (isNaN(this.positionY) ? '' : 'px'));

        this.position = position_s.join(' ');
        this.imgIsBackground = Boolean(this.imageSrc) && (Boolean(this.$element.is('img')) == false);

        var mobileBackground = function(mobileFix) {

            var backgroundCss = {
                backgroundImage: 'url(' + self.imageSrc + ')',
                backgroundSize: 'cover',
                backgroundPosition: self.position
            };

            if (self.imgIsBackground && Boolean(mobileFix)) {
                self.$element.css(backgroundCss);
                return true;
            };
            return false;
        };

        var isApple = Boolean(navigator.userAgent.match(/(iPod|iPhone|iPad)/));

        if (isApple) {
            mobileBackground(self.iosFix)
            return this;
        };

        var isAndroid = Boolean(navigator.userAgent.match(/(Android)/));

        if (isAndroid) {
            mobileBackground(self.androidFix);
            return this;
        };

        var runPxScripts = self.$parallaxArgs.has('parallax_scripts') ? self.$parallaxArgs.get('parallax_scripts') : 1;
        runPxScripts = Boolean(Number(runPxScripts) > 0);

        if (!runPxScripts) {
            mobileBackground(true);
            return this;
        };

        var sliderImg = this.$mirrorContainer.find('.parallax-slider-image').first();
        var sliderExisted = false;

        if (!sliderImg.length) {
            sliderImg = $('<img />');
        } else {
            sliderExisted = true;
        };

        this.$mirror = $('<div />').prependTo(this.$mirrorContainer);
        var slider = this.$element.find('>.parallax-slider');

        if (slider.length == 0) {

            var sliderResult = false;

            if (!sliderExisted) {
                sliderResult = sliderImg.prependTo(this.$mirror);
            } else {
                this.$mirror.append(sliderImg);
                sliderResult = sliderImg;
            };

            this.$slider = sliderResult;

        } else {
            this.$slider = slider.prependTo(this.$mirror)
            sliderExisted = true;
        };

        this.$mirror.addClass('parallax-mirror').css({
            visibility: 'hidden',
            zIndex: this.zIndex,
            position: 'fixed',
            top: 0,
            left: 0,
            overflow: 'hidden'
        });

        this.$slider = $(this.$slider);
        this.$slider.addClass(this.sliderParallaxClasses);
        this.$slider.addClass('parallax-slider');

        var sliderImageLoader = function(this_image) {

            if (!Boolean(self.naturalHeight) || !Boolean(self.naturalWidth)) {
                self.naturalHeight = this_image.naturalHeight || this_image.height || 1;
                self.naturalWidth = this_image.naturalWidth || this_image.width || 1;
                self.aspectRatio = self.naturalWidth / self.naturalHeight;
            };

            Parallax.isSetup || Parallax.setup();
            Parallax.sliders.push(self);
            Parallax.isFresh = false;
            Parallax.requestRender();

            if (typeof(self.loadFinished) === 'function') {
                self.loadFinished(self);
            };

        };

        var imageIsLoaded = false;

        if (typeof(this.$slider.get(0).complete) !== 'undefined') {
            imageIsLoaded = Boolean(true);
            imageIsLoaded = (imageIsLoaded && Boolean(this.$slider));
            imageIsLoaded = (imageIsLoaded && Boolean(this.$slider.get(0).complete));
            imageIsLoaded = (imageIsLoaded && Boolean(this.$slider.attr('src')));
        };

        if (imageIsLoaded) {

            sliderImageLoader(this.$slider.get(0));

        } else {

            this.$slider.on('load', function() {
                var this_image = this;
                sliderImageLoader(this_image);
            });

            var currentImageSrc = this.$slider.attr('src');

            if (typeof(currentImageSrc) === 'undefined') {
                currentImageSrc = false;
            } else {
                currentImageSrc = String(currentImageSrc).trim();
            };

            if (!sliderExisted || !Boolean(currentImageSrc)) {
                this.$slider.attr('src', this.imageSrc);
            };

            var forceImageLoad = true;

            if (!imageIsLoaded) {
                forceImageLoad = Boolean(Boolean(this.naturalHeight && this.naturalWidth) || this.$slider[0].complete || slider.length > 0);
            };

            if (forceImageLoad) {
                this.$slider.trigger('load');
            };

        };

    };

    var parallaxRefresh = function() {

        this.boxWidthValue = this.$boxWidthElement.outerWidth();
        this.boxHeightValue = this.$boxHeightElement.outerHeight();

        this.boxLeftOffset = jQuery(this.$boxWidthElement).position().left;

        if (this.$parallaxIsFullWidth) {
            this.boxIsFullWidth = this.$parallaxIsFullWidth;
        } else {
            this.boxIsFullWidth = Boolean(this.boxWidthValue == Parallax.winWidth);
        };

        this.boxWidth = this.boxWidthValue;
        this.boxHeight = this.boxHeightValue + this.bleed * 2;
        this.boxOffsetTop = this.$boxElement.offset().top - this.bleed;
        this.boxOffsetLeft = this.$boxElement.offset().left;
        this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;

        var winHeight = Parallax.winHeight;
        var docHeight = Parallax.docHeight;
        var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight);
        var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
        var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
        var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;
        var margin;

        if (imageHeightMin * this.aspectRatio >= this.boxWidth) {

            this.imageWidth = imageHeightMin * this.aspectRatio | 0;
            this.imageHeight = imageHeightMin;
            this.offsetBaseTop = imageOffsetMin;

            margin = this.imageWidth - this.boxWidth;

            if (this.positionX == 'left') {
                this.offsetLeft = 0;
            } else if (this.positionX == 'right') {
                this.offsetLeft = -margin;
            } else if (!isNaN(this.positionX)) {
                this.offsetLeft = Math.max(this.positionX, -margin);
            } else {
                this.offsetLeft = -margin / 2 | 0;
            };

        } else {

            this.imageWidth = this.boxWidth;
            this.imageHeight = this.boxWidth / this.aspectRatio | 0;
            this.offsetLeft = 0;

            margin = this.imageHeight - imageHeightMin;

            if (this.positionY == 'top') {
                this.offsetBaseTop = imageOffsetMin;
            } else if (this.positionY == 'bottom') {
                this.offsetBaseTop = imageOffsetMin - margin;
            } else if (!isNaN(this.positionY)) {
                this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, -margin);
            } else {
                this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
            };

        };

    };

    var parallaxRender = function() {

        var self = this;
        var scrollTop = Parallax.scrollTop;
        var scrollLeft = Parallax.scrollLeft;
        var overScroll = this.overScrollFix ? Parallax.overScroll : 0;
        var scrollBottom = scrollTop + Parallax.winHeight;
        var mirrorTranslate = [];
        var sliderTranslate = [];

        var boxIsVisible = (this.boxOffsetBottom > scrollTop && this.boxOffsetTop <= scrollBottom);
        boxIsVisible = Boolean(boxIsVisible);

        var reloadBoxAttrs = false;

        if (typeof(self.mirrorTop) === 'undefined') {
            reloadBoxAttrs = true;
        };

        if (typeof(self.mirrorLeft) === 'undefined') {
            reloadBoxAttrs = true;
        };

        if (typeof(self.offsetLeft) === 'undefined') {
            reloadBoxAttrs = true;
        };

        if (typeof(self.offsetTop) === 'undefined') {
            reloadBoxAttrs = true;
        };

        if (reloadBoxAttrs) {
            this.refresh();
        };

        if (boxIsVisible || reloadBoxAttrs) {
            this.visibility = 'visible';
            this.mirrorTop = this.boxOffsetTop - scrollTop;
            this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
            this.offsetTop = 0;
            this.offsetTop = (this.offsetBaseTop - this.mirrorTop);
            this.offsetTop = this.offsetTop * (1 - this.speed);
        } else {
            this.visibility = 'hidden';
        };

        if (typeof(this.mirrorLeft) !== 'undefined' && !isNaN(this.mirrorLeft)) {
            mirrorTranslate.push(this.mirrorLeft + 'px');
        };

        if (typeof(this.mirrorTop) !== 'undefined' && !isNaN(this.mirrorTop)) {
            var mirrorTop = this.mirrorTop - overScroll;
            if (!isNaN(mirrorTop)) {
                mirrorTranslate.push(mirrorTop + 'px');
            };
        };

        var mirrorTranslateStr = '';

        if (mirrorTranslate.length > 1) {
            mirrorTranslateStr = mirrorTranslate.join(', ');
        };

        if (typeof(this.offsetLeft) !== 'undefined' && !isNaN(this.offsetLeft)) {
            sliderTranslate.push(this.offsetLeft + 'px');
        };

        if (typeof(this.offsetTop) !== 'undefined' && !isNaN(this.offsetTop)) {
            sliderTranslate.push(this.offsetTop + 'px');
        };

        var sliderTranslateStr = '';

        if (sliderTranslate.length > 1) {
            sliderTranslateStr = sliderTranslate.join(', ');
        };

        var renderMirror = true;

        // Render the MIRROR for the Parallax
        renderMirror = (Boolean(renderMirror) && Boolean(this.boxHeight > 0));
        renderMirror = (Boolean(renderMirror) && Boolean(this.boxWidth > 0));
        renderMirror = (Boolean(renderMirror) && Boolean(this.imageHeight > 0));
        renderMirror = (Boolean(renderMirror) && Boolean(this.imageWidth > 0));
        renderMirror = (Boolean(renderMirror) && mirrorTranslateStr.length);
        renderMirror = (Boolean(renderMirror) && sliderTranslateStr.length);
        renderMirror = Boolean(renderMirror);

        var mirrorCss = {
            transform: mirrorTranslateStr.length && renderMirror ? 'translate3d(' + mirrorTranslateStr + ', 0px)' : '',
            visibility: renderMirror ? this.visibility : 'hidden',
            height: this.boxHeight + 'px',
            width: this.boxWidth + 'px',
            display: 'block',
        };

        if (!this.boxIsFullWidth && !this.mirrorIsLeft) {
            mirrorCss['left'] = this.boxLeftOffset + 'px';
        };

        var sliderCss = {
            transform: sliderTranslateStr.length && renderMirror ? 'translate3d(' + sliderTranslateStr + ', 0px)' : '',
            visibility: renderMirror ? this.visibility : 'hidden',
            position: 'absolute',
            // display: 'block',
            height: this.imageHeight + 'px',
            width: this.imageWidth + 'px',
            maxWidth: 'none'
        };

        if (!sliderTranslateStr.length) {
            console.error("Mirror Translate: mirrorLeft (" + this.mirrorLeft + ") mirrorTop (" + this.mirrorTop + ") overScroll (" + overScroll + ")");
        };

        this.$mirror.css(mirrorCss);

        if (!sliderTranslateStr.length) {
            console.error("Slider Translate: offsetTop (" + this.offsetTop + ") offsetLeft (" + this.offsetLeft + ")");
        };

        this.$slider.css(sliderCss);

        // Check if the Image is Transformed, before we strip the background
        var imageIsTransformed = Boolean(true);
        imageIsTransformed = (imageIsTransformed && Boolean(renderMirror));
        imageIsTransformed = (imageIsTransformed && Boolean(this.$mirror.css('transform')));
        imageIsTransformed = (imageIsTransformed && Boolean(this.$slider.css('transform')));

        var requestBackgroundRemove = function() {

            // Remove the Image Background
            var removeImageBackground = Boolean(true);
            removeImageBackground = (removeImageBackground && Boolean(self.imgIsBackground))
            removeImageBackground = (removeImageBackground && Boolean(self.$element.css('background-image')));
            removeImageBackground = (removeImageBackground && Boolean(imageIsTransformed));
            removeImageBackground = (removeImageBackground && !self.isUnderReview);

            // The Image was TransFormed, Clear the CSS Background
            if (removeImageBackground) {
                self.$element.data('parallax_bg_image', self.$element.css('background-image'));
                self.$element.css('background-image', '');
            } else if (self.isUnderReview) {
                self.$element.css('opacity', 0.5);
                self.$mirror.css('filter', 'grayscale(100%)');
                self.$mirror.css('-webkit-filter', 'grayscale(100%)');
            };

        };

        // Is TransFormed
        if (imageIsTransformed) {
            this.$slider.fadeIn('slow', requestBackgroundRemove);
        };

    };

    // Parallax Instance Methods

    $.extend(Parallax.prototype, {

        speed: 0.2,
        bleed: 0,
        zIndex: -100,
        iosFix: true,
        androidFix: true,
        position: 'center',
        overScrollFix: false,
        sliderParallaxClasses: '',
        boxElement: false,
        boxWidthElement: false,
        boxHeightElement: false,
        parallaxIsFullWidth: false,
        loadFinished: false,
        mirrorContainer: 'body',

        refresh: parallaxRefresh,
        render: parallaxRender,

    });


    // Parallax Static Methods

    $.extend(Parallax, {
        scrollTop: 0,
        scrollLeft: 0,
        winHeight: 0,
        winWidth: 0,
        docHeight: 1 << 30,
        docWidth: 1 << 30,
        sliders: [],
        isReady: false,
        isFresh: false,
        isBusy: false,

        setup: function() {

            if (this.isReady) {
                return;
            };

            var self = this;

            var $doc = $(document),
                $win = $(window);

            var loadDimensions = function() {
                Parallax.winHeight = $win.height();
                Parallax.winWidth = $win.width();
                Parallax.docHeight = $doc.height();
                Parallax.docWidth = $doc.width();
            };

            var loadScrollPosition = function() {
                var winScrollTop = $win.scrollTop();
                var scrollTopMax = Parallax.docHeight - Parallax.winHeight;
                var scrollLeftMax = Parallax.docWidth - Parallax.winWidth;
                Parallax.scrollTop = Math.max(0, Math.min(scrollTopMax, winScrollTop));
                Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
                Parallax.overScroll = Math.max(winScrollTop - scrollTopMax, Math.min(winScrollTop, 0));
            };

            $win.on('resize.px.parallax load.px.parallax', function() {
                loadDimensions();
                self.refresh();
                Parallax.isFresh = false;
                Parallax.requestRender();
            });

            $win.on('scroll.px.parallax load.px.parallax', function() {
                loadScrollPosition();
                Parallax.requestRender();
            });

            loadDimensions();
            loadScrollPosition();

            this.isReady = true;

            var lastPosition = -1;

            function frameLoop() {

                if (lastPosition == window.pageYOffset) { // Avoid overcalculations
                    window.requestAnimationFrame(frameLoop);
                    return false;
                } else {
                    lastPosition = window.pageYOffset;
                };

                self.render();
                window.requestAnimationFrame(frameLoop);
            }

            frameLoop();
        },

        configure: function(options) {
            if (typeof options == 'object') {
                delete options.refresh;
                delete options.render;
                $.extend(this.prototype, options);
            }
        },

        refresh: function() {
            $.each(this.sliders, function() {
                this.refresh();
            });
            this.isFresh = true;
        },

        render: function() {
            this.isFresh || this.refresh();
            $.each(this.sliders, function() {
                this.render();
            });
        },

        requestRender: function() {
            var self = this;
            self.isBusy = true;
            self.render();
            self.isBusy = false;
        },

        destroy: function(el) {

            var i = false;
            var parallaxElement = $(el).data('px.parallax');
            parallaxElement.$mirror.remove();

            for (i = 0; i < this.sliders.length; i += 1) {
                if (this.sliders[i] == parallaxElement) {
                    this.sliders.splice(i, 1);
                };
            };

            $(el).data('px.parallax', false);

            if (this.sliders.length === 0) {
                $(window).off('scroll.px.parallax resize.px.parallax load.px.parallax');
                this.isReady = false;
                Parallax.isSetup = false;
            };

        }
    });


    // Parallax Plugin Definition

    function Plugin(option) {

        return this.each(function() {
            var $this = $(this);
            var options = typeof option == 'object' && option;

            if (this == window || this == document || $this.is('body')) {
                Parallax.configure(options);
            } else if (!$this.data('px.parallax')) {
                options = $.extend({}, $this.data(), options);
                $this.data('px.parallax', new Parallax(this, options));
            } else if (typeof option == 'object') {
                $.extend($this.data('px.parallax'), options);
            };

            if (typeof option == 'string') {
                if (option == 'destroy') {
                    Parallax.destroy(this);
                } else {
                    Parallax[option]();
                };
            };

        });
    };

    var old = $.fn.parallax;

    $.fn.parallax = Plugin;
    $.fn.parallax.Constructor = Parallax;

    // Parallax No Conflict

    $.fn.parallax.noConflict = function() {
        $.fn.parallax = old;
        return this;
    };

    // Parallax Data-API

    $(function() {
        var parallaxScroll = $('[data-parallax="scroll"]');
        parallaxScroll.parallax();
    });

}(jQuery, window, document));