✏️ Editing: window.modal.js

(function($){
    'use strict';

$.BCoreModal = {

/**
         *
         *
         * @var Object _baseConfig
         */
        _baseConfig : {
            bounds: 100,
            debounce: 50,
            overlayOpacity: .48,
            overlayColor: '#000000',
            speed: 400,
            type: 'onscroll', // onscroll, beforeunload, hashlink, ontarget, aftersometime
            effect: 'fadein',
            onOpen: function() {},
            onClose: function() {},
            onComplete: function() {},
        },

/**
         *
         *
         * @var jQuery _pageCollection
         */
        _pageCollection : $(),

/**
         * Initialization of ModalWindow wrapper.
         *
         * @param String selector (optional)
         * @param Object config (optional)
         *
         * @return jQuery - collection of initialized items.
         */
        init: function(selector, config) {
            var collection = $(selector);
            if(!collection.length) return;

config = config && $.isPlainObject(config) ? $.extend({}, this._baseConfig, config) : this._baseConfig;
            config.selector = selector;

this._pageCollection = this._pageCollection.add( collection.not(this._pageCollection) );
            if(config.autonomous) {

return this.initAutonomousModalWindows(collection, config);

}

return this.initBaseModalWindows(collection, config);

/**
         * Initialization of each Autonomous Modal Window of the page.
         *
         * @param jQuery collection
         * @param Object config
         *
         * @return jQuery collection
         */
        initBaseModalWindows: function(collection, config){

return collection.on('click', function(e){

if(!('Custombox' in window)) return;

var $this = $(this),
                    target = $this.data('modal-target'),
                    effect = $this.data('modal-effect') || config['effect'];

if(!target || !$(target).length) return;

new Custombox.modal(
                    {
                        content: {
                            target: target,
                            effect: effect,
                            onOpen: function() {
                                config['onOpen'].call($(target));
                            },
                            onClose: function() {
                                config['onClose'].call($(target));
                            },
                            onComplete: function() {
                                config['onComplete'].call($(target));
                            }
                        },
                        overlay: {
                            color: $this.data('overlay-color') || config['overlayColor'],
                            opacity: $this.data('overlay-opacity') || config['overlayOpacity'],
                            speedIn: $this.data('speed') || config['speed'],
                            speedOut: $this.data('speed') || config['speed']
                        }
                    }
                ).open();

e.preventDefault();

});

/**
         * Initialization of each Autonomous Modal Window of the page.
         *
         * @param jQuery collection
         * @param Object config
         *
         * @return jQuery collection
         */
        initAutonomousModalWindows: function(collection, config) {
            var self = this;
            return collection.each(function(i, el) {
                var $this = $(el),
                    type = $this.data('modal-type');
                switch(type) {

case 'hashlink' :

self.initHashLinkPopup($this, config);

break;

case 'onscroll' :

self.initOnScrollPopup($this, config);

break;

case 'beforeunload' :

self.initBeforeUnloadPopup($this, config);

break;

case 'ontarget' :

self.initOnTargetPopup($this, config);

break;

case 'aftersometime' :

self.initAfterSomeTimePopup($this, config);

break;

}

});

/**
         *
         *
         * @param jQuery popup
         *
         * @return undefined
         */
        initHashLinkPopup: function(popup, config) {

var self = this,
                hashItem = $(window.location.hash),
                target = $('#' + popup.attr('id'));

if(hashItem.length && hashItem.attr('id') ==  popup.attr('id')){

new Custombox.modal(
                    {
                        content: {
                            target: '#' + popup.attr('id'),
                            effect: popup.data('effect') || config['effect'],
                            onOpen: function() {
                                config['onOpen'].call($(target));
                            },
                            onClose: function() {
                                config['onClose'].call($(target));
                            },
                            onComplete: function() {
                                config['onComplete'].call($(target));
                            }
                        },
                        overlay: {
                            color: popup.data('overlay-color') || config['overlayColor'],
                            opacity: popup.data('overlay-opacity') || config['overlayOpacity'],
                            speedIn: popup.data('speed') || config['speed'],
                            speedOut: popup.data('speed') || config['speed']
                        }
                    }
                ).open();

}

/**
         *
         *
         * @param jQuery popup
         *
         * @return undefined
         */
        initOnScrollPopup: function(popup, config) {

var self = this,
                $window = $(window),
                breakpoint = popup.data('breakpoint') ? popup.data('breakpoint') : 0,
                target = $('#' + popup.attr('id'));

$window.on('scroll.popup', function() {

var scrolled = $window.scrollTop() + $window.height();

if(scrolled >= breakpoint) {

new Custombox.modal(
                        {
                            content: {
                                target: '#' + popup.attr('id'),
                                effect: popup.data('effect') || config['effect'],
                                onOpen: function() {
                                    config['onOpen'].call($(target));
                                },
                                onClose: function() {
                                    config['onClose'].call($(target));
                                },
                                onComplete: function() {
                                    config['onComplete'].call($(target));
                                }
                            },
                            overlay: {
                                color: popup.data('overlay-color') || config['overlayColor'],
                                opacity: popup.data('overlay-opacity') || config['overlayOpacity'],
                                speedIn: popup.data('speed') || config['speed'],
                                speedOut: popup.data('speed') || config['speed']
                            }
                        }
                    ).open();

$window.off('scroll.popup');

}

});

$window.trigger('scroll.popup');

/**
         *
         *
         * @param jQuery popup
         *
         * @return undefined
         */
        initBeforeUnloadPopup: function(popup, config) {

var self = this,
                count = 0,
                target = $('#' + popup.attr('id')),
                timeoutId;

window.addEventListener('mousemove', function(e) {

if(timeoutId) clearTimeout(timeoutId);

timeoutId = setTimeout(function() {

if (e.clientY < 10 && !count) {

count++;

new Custombox.modal(
                            {
                                content: {
                                    target: '#' + popup.attr('id'),
                                    effect: popup.data('effect') || config['effect'],
                                    onOpen: function() {
                                        config['onOpen'].call($(target));
                                    },
                                    onClose: function() {
                                        config['onClose'].call($(target));
                                    },
                                    onComplete: function() {
                                        config['onComplete'].call($(target));
                                    }
                                },
                                overlay: {
                                    color: popup.data('overlay-color') || config['overlayColor'],
                                    opacity: popup.data('overlay-opacity') || config['overlayOpacity'],
                                    speedIn: popup.data('speed') || config['speed'],
                                    speedOut: popup.data('speed') || config['speed']
                                }
                            }
                        ).open();

}

}, 10);

});

/**
         *
         *
         * @param jQuery popup
         *
         * @return undefined
         */
        initOnTargetPopup: function(popup, config) {
            var self = this,
                target = popup.data('target');

if(!target || !$(target).length) return;

appear({
                bounds: config['bounds'],
                debounce: config['debounce'],
                elements: function() {
                    return document.querySelectorAll(target);
                },
                appear: function(element) {

new Custombox.modal(
                        {
                            content: {
                                target: '#' + popup.attr('id'),
                                effect: popup.data('effect') || config['effect'],
                                onOpen: function() {
                                    config['onOpen'].call($(target));
                                },
                                onClose: function() {
                                    config['onClose'].call($(target));
                                },
                                onComplete: function() {
                                    config['onComplete'].call($(target));
                                }
                            },
                            overlay: {
                                color: popup.data('overlay-color') || config['overlayColor'],
                                opacity: popup.data('overlay-opacity') || config['overlayOpacity'],
                                speedIn: popup.data('speed') || config['speed'],
                                speedOut: popup.data('speed') || config['speed']
                            }
                        }
                    ).open();

}
            });

/**
         *
         *
         * @param jQuery popup
         *
         * @return undefined
         */
        initAfterSomeTimePopup: function(popup, config) {

var self = this,
                target = $('#' + popup.attr('id'));

setTimeout(function() {

}, popup.data('delay') ? popup.data('delay') : 10)

}

};

})(jQuery);

Advanced Web Server Manager