search-course/public/assets/global/js/demo_pages/extension_blockui.js

/* ------------------------------------------------------------------------------
 *
 *  # BlockUI extension
 *
 *  Demo JS code for extension_blockui.html page
 *
 * ---------------------------------------------------------------------------- */


// Setup module
// ------------------------------

var BlockUi = function() {


    //
    // Setup module components
    //

    // BlockUI
    var _componentBlockUi = function() {
        if (!$().block) {
            console.warn('Warning - blockui.min.js is not loaded.');
            return;
        }


        // Page elements
        // ------------------------------

        // Block card
        $('#block-card').on('click', function() {
            var block = $(this).closest('.card');
            $(block).block({ 
                message: '<i class="icon-spinner4 spinner"></i>',
                timeout: 2000, //unblock after 2 seconds
                overlayCSS: {
                    backgroundColor: '#fff',
                    opacity: 0.8,
                    cursor: 'wait'
                },
                css: {
                    border: 0,
                    padding: 0,
                    backgroundColor: 'transparent'
                }
            });
        });

        // Block sidebar
        $('#block-sidebar').on('click', function() {
            var block = $('.sidebar-main');
            $(block).block({ 
                message: '<i class="icon-spinner4 spinner"></i>',
                timeout: 2000, //unblock after 2 seconds
                overlayCSS: {
                    backgroundColor: '#1b2024',
                    opacity: 0.6,
                    cursor: 'wait'
                },
                centerY: 0, 
                css: {
                    top: '180px',
                    border: 0,
                    color: '#fff',
                    padding: 0,
                    backgroundColor: 'transparent'
                }
            });
        });

        // Block page
        $('#block-page').on('click', function() {
            $.blockUI({ 
                message: '<i class="icon-spinner4 spinner"></i>',
                timeout: 2000, //unblock after 2 seconds
                overlayCSS: {
                    backgroundColor: '#1b2024',
                    opacity: 0.8,
                    zIndex: 1200,
                    cursor: 'wait'
                },
                css: {
                    border: 0,
                    color: '#fff',
                    padding: 0,
                    zIndex: 1201,
                    backgroundColor: 'transparent'
                }
            });
        });


        // Overlays
        // ------------------------------

        // Basic overlay
        $('#basic-overlay').on('click', function() {
            var block = $(this).closest('.card');
            $(block).block({ 
                message: '<i class="icon-spinner4 spinner"></i>',
                timeout: 2000, //unblock after 2 seconds
                overlayCSS: {
                    backgroundColor: '#fff',
                    opacity: 0.8,
                    cursor: 'wait'
                },
                css: {
                    border: 0,
                    padding: 0,
                    backgroundColor: 'transparent'
                }
            });
        });

        // Custom overlay
        $('#overlay-custom').on('click', function() {
            var block = $(this).closest('.card');
            $(block).block({ 
                message: '<i class="icon-spinner4 spinner"></i>',
                timeout: 2000, //unblock after 2 seconds
                overlayCSS: {
                    backgroundColor: '#0E8F92',
                    opacity: 0.9,
                    cursor: 'wait'
                },
                css: {
                    border: 0,
                    padding: 0,
                    color: '#fff',
                    backgroundColor: 'transparent'
                }
            });
        });

        // Overlay with custom color
        $('#overlay-cover').on('click', function() {
            var block = $(this).closest('.card');
            $(block).block({ 
                message: '<i class="icon-spinner4 spinner"></i>',
                timeout: 2000, //unblock after 2 seconds
                overlayCSS: {
                    backgroundColor: '#3F9EC3',
                    opacity: 1,
                    cursor: 'wait'
                },
                css: {
                    border: 0,
                    padding: 0,
                    color: '#fff',
                    backgroundColor: 'transparent'
                }
            });
        });

        // Overlay without text
        $('#no-message').on('click', function() {
            var block = $(this).closest('.card');
            $(block).block({
                message: null,
                timeout: 2000, //unblock after 2 seconds
                overlayCSS: {
                    backgroundColor: '#fff',
                    opacity: 0.8,
                    cursor: 'wait'
                },
                css: {
                    border: 0,
                    padding: 0,
                    backgroundColor: 'transparent'
                }
            });
        });

        // No overlay
        $('#no-overlay').on('click', function() {
            var block = $(this).closest('.card');
            $(block).block({
                message: '<i class="icon-spinner4 spinner"></i>',
                showOverlay: false,
                timeout: 2000, //unblock after 2 seconds
                css: {
                    border: 0,
                    padding: 15,
                    backgroundColor: '#283133',
                    color: '#fff',
                    width: 46,
                    height: 46,
                    lineHeight: 1,
                    '-webkit-border-radius': '2px', 
                    '-moz-border-radius': '2px', 
                    opacity: 0.95
                }
            });
        });


        // Messages
        // ------------------------------

        // Default message
        $('#default-message').on('click', function() {
            var block = $(this).closest('.card');
            $(block).block({
                message: '<span class="font-weight-semibold">Please wait...</span>',
                timeout: 2000, //unblock after 2 seconds
                overlayCSS: {
                    backgroundColor: '#fff',
                    opacity: 0.8,
                    cursor: 'wait'
                },
                css: {
                    border: 0,
                    padding: 0,
                    backgroundColor: 'transparent'
                }
            });
        });

        // Spinner only
        $('#spinner-only').on('click', function() {
            var block = $(this).closest('.card');
            $(block).block({
                message: '<i class="icon-spinner4 spinner"></i>',
                timeout: 2000, //unblock after 2 seconds
                overlayCSS: {
                    backgroundColor: '#fff',
                    opacity: 0.8,
                    cursor: 'wait'
                },
                css: {
                    border: 0,
                    padding: 0,
                    backgroundColor: 'transparent'
                }
            });
        });

        // Custom message
        $('#custom-message').on('click', function() {
            var block = $(this).closest('.card');
            $(block).block({
                message: '<span class="font-weight-semibold"><i class="icon-spinner4 spinner mr-2"></i>&nbsp; Updating data</span>',
                timeout: 2000, //unblock after 2 seconds
                overlayCSS: {
                    backgroundColor: '#fff',
                    opacity: 0.8,
                    cursor: 'wait'
                },
                css: {
                    border: 0,
                    padding: '10px 15px',
                    color: '#fff',
                    width: 'auto',
                    '-webkit-border-radius': 3,
                    '-moz-border-radius': 3,
                    backgroundColor: '#333'
                }
            });
        });

        // DOM message
        $('#dom-message').on('click', function() {
            var block = $(this).closest('.card');
            $(block).block({
                message: $(this).parent().parent().find('.blockui-message'),
                timeout: 2000, //unblock after 2 seconds
                overlayCSS: {
                    backgroundColor: '#fff',
                    opacity: 0.8,
                    cursor: 'wait'
                },
                css: {
                    width: 'auto',
                    '-webkit-border-radius': 2,
                    '-moz-border-radius': 2,
                    padding: 0,
                    border: 0,
                    backgroundColor: 'transparent'
                }
            });
        });

        // Multiple messages
        $('#multiple-messages').on('click', function() {
            var message = $(this).parent().parent().find('.blockui-message');
            var block = $(this).closest('.card');
            $(block).block({ 
                message: message,
                overlayCSS: {
                    backgroundColor: '#fff',
                    opacity: 0.8,
                    cursor: 'wait'
                },
                css: {
                    width: 100,
                    '-webkit-border-radius': 2,
                    '-moz-border-radius': 2,
                    border: 0,
                    padding: 0,
                    backgroundColor: 'transparent'
                },
                onBlock: function() {
                    clearTimeout();
                }
            });

            window.setTimeout(function () {
               message.html('<i class="icon-spinner4 spinner mt-1"></i> <span class="font-weight-semibold d-block mt-2">Loading</span>')
            }, 0); 

            window.setTimeout(function () {
               message.html('<i class="icon-spinner4 spinner mt-1"></i> <span class="font-weight-semibold d-block mt-2">Please wait</span>')
            }, 2000); 

            window.setTimeout(function () {
               message.addClass('bg-danger').html('<i class="icon-warning mt-1"></i> <span class="font-weight-semibold d-block mt-2">Load error</span>')
            }, 4000);

            window.setTimeout(function () {
               $(block).unblock({
                onUnblock: function(){
                    message.removeClass('bg-danger');
                }
               });
            }, 6000);
        });

        // Custom message animation
        $('#custom-message-animation').on('click', function() {
            var block = $(this).closest('.card');
            $(block).block({
                message: $('.blockui-animation-container'),
                timeout: 3000, //unblock after 3 seconds
                overlayCSS: {
                    backgroundColor: '#fff',
                    opacity: 0.8,
                    cursor: 'wait'
                },
                css: {
                    width: 36,
                    height: 36,
                    color: '#fff',
                    border: 0,
                    padding: 0,
                    backgroundColor: 'transparent'
                }
            });

            var animation = $(this).data("animation");
            $('.blockui-animation-container').addClass("animated " + animation).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function () {
                $(this).removeClass("animated " + animation);
            });
        });

        // Custom message position
        $('#custom-position').on('click', function() {
            var block = $(this).closest('.card');
            $(block).block({ 
                message: '<i class="icon-spinner4 spinner"></i>',
                timeout: 2000, //unblock after 2 seconds
                centerX: 0,
                centerY: 0,
                overlayCSS: {
                    backgroundColor: '#fff',
                    opacity: 0.8,
                    cursor: 'wait'
                },
                css: {
                    width: 16,
                    top: '15px',
                    left: '',
                    right: '15px',
                    border: 0,
                    padding: 0,
                    backgroundColor: 'transparent'
                }
            });
        });


        // Unblock options
        // ------------------------------

        // Auto unblock
        $('#auto-unblock').on('click', function() {
            var block = $(this).closest('.card');
            $(block).block({ 
                message: '<i class="icon-spinner4 spinner"></i>',
                timeout: 2000, //unblock after 2 seconds
                overlayCSS: {
                    backgroundColor: '#fff',
                    opacity: 0.8,
                    cursor: 'wait'
                },
                css: {
                    border: 0,
                    padding: 0,
                    backgroundColor: 'transparent'
                }
            });
        });

        // Unblock on click
        $('#click-unblock').on('click', function() {
            var block = $(this).closest('.card');
            $(block).block({ 
                message: '<i class="icon-spinner4 spinner"></i>',
                overlayCSS: {
                    backgroundColor: '#fff',
                    opacity: 0.8,
                    cursor: 'wait'
                },
                css: {
                    width: 16,
                    border: 0,
                    padding: 0,
                    backgroundColor: 'transparent'
                }
            });

            $('.blockOverlay').on('click', function() {
                $(block).unblock();
            });
        });


        // Callbacks
        // ------------------------------

        // Block callback
        $('#block-callback').on('click', function() {
            $.blockUI({ 
                message: '<i class="icon-spinner4 spinner"></i>',
                fadeIn: 800, 
                timeout: 2000, //unblock after 2 seconds
                overlayCSS: {
                    backgroundColor: '#1b2024',
                    opacity: 0.8,
                    zIndex: 1200,
                    cursor: 'wait'
                },
                css: {
                    border: 0,
                    color: '#fff',
                    zIndex: 1201,
                    padding: 0,
                    backgroundColor: 'transparent'
                },
                onBlock: function() { 
                    alert('Page is now blocked. FadeIn completed.'); 
                } 
            });
        });

        // Unblock callback
        $('#unblock-callback').on('click', function() {
            $.blockUI({ 
                message: '<i class="icon-spinner4 spinner"></i>',
                timeout: 2000, //unblock after 2 seconds
                overlayCSS: {
                    backgroundColor: '#1b2024',
                    opacity: 0.8,
                    zIndex: 1200,
                    cursor: 'wait'
                },
                css: {
                    border: 0,
                    color: '#fff',
                    padding: 0,
                    zIndex: 1201,
                    backgroundColor: 'transparent'
                },
                onUnblock: function() { 
                    alert('Page is now unblocked. FadeOut completed.'); 
                } 
            });
        });

        // Overlay callback
        $('#overlay-callback').on('click', function() {
            $.blockUI({ 
                message: '<i class="icon-spinner4 spinner"></i>',
                overlayCSS: {
                    backgroundColor: '#1b2024',
                    opacity: 0.8,
                    zIndex: 1200,
                    cursor: 'wait'
                },
                css: {
                    border: 0,
                    color: '#fff',
                    padding: 0,
                    zIndex: 1201,
                    backgroundColor: 'transparent'
                },
                onOverlayClick: $.unblockUI
            });
        });


        // Other options
        // ------------------------------

        // Growl notification
        $('#growl').on('click', function() {
            $.blockUI({ 
                message: $('.blockui-growl'), 
                fadeIn: 700, 
                fadeOut: 700, 
                timeout: 3000000, //unblock after 3 seconds
                showOverlay: false, 
                centerY: false, 
                css: { 
                    width: '250px',
                    backgroundColor: 'transparent',
                    top: '20px',
                    left: 'auto',
                    right: '20px',
                    border: 0,
                    opacity: .95,
                    zIndex: 1200,
                } 
            }); 
        });
    };


    //
    // Return objects assigned to module
    //

    return {
        init: function() {
            _componentBlockUi();
        }
    }
}();


// Initialize module
// ------------------------------

document.addEventListener('DOMContentLoaded', function() {
    BlockUi.init();
});