459 lines
13 KiB
JavaScript
Executable File
459 lines
13 KiB
JavaScript
Executable File
/*=========================================================================================
|
|
File Name: block-ui.js
|
|
Description: Block UI jQuery Plugin Intialization
|
|
--------------------------------------------------------------------------------------
|
|
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
|
|
Version: 1.0
|
|
Author: PIXINVENT
|
|
Author URL: http://www.themeforest.net/user/pixinvent
|
|
==========================================================================================*/
|
|
|
|
|
|
$(document).ready(function(){
|
|
|
|
/************************************
|
|
* Block Examples *
|
|
************************************/
|
|
$('.block-element').on('click', function() {
|
|
var block_ele = $(this).closest('.card');
|
|
$(block_ele).block({
|
|
message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
|
|
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_ele = $('.main-menu');
|
|
$(block_ele).block({
|
|
message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
|
|
timeout: 2000, //unblock after 2 seconds
|
|
overlayCSS: {
|
|
backgroundColor: '#FFF',
|
|
opacity: 0.8,
|
|
cursor: 'wait'
|
|
},
|
|
css: {
|
|
border: 0,
|
|
padding: 0,
|
|
backgroundColor: 'transparent'
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
// Block page
|
|
$('.block-page').on('click', function() {
|
|
$.blockUI({
|
|
message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
|
|
timeout: 2000, //unblock after 2 seconds
|
|
overlayCSS: {
|
|
backgroundColor: '#FFF',
|
|
opacity: 0.8,
|
|
cursor: 'wait'
|
|
},
|
|
css: {
|
|
border: 0,
|
|
padding: 0,
|
|
backgroundColor: 'transparent'
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
/************************************
|
|
* Message Options *
|
|
************************************/
|
|
|
|
// Spinner only
|
|
$('.block-spinner-only').on('click', function() {
|
|
var block_ele = $(this).closest('.card');
|
|
$(block_ele).block({
|
|
message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
|
|
timeout: 2000, //unblock after 2 seconds
|
|
overlayCSS: {
|
|
backgroundColor: '#fff',
|
|
opacity: 0.8,
|
|
cursor: 'wait'
|
|
},
|
|
css: {
|
|
border: 0,
|
|
padding: 0,
|
|
backgroundColor: 'transparent'
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
// Defult Message
|
|
$('.block-default-message').on('click', function() {
|
|
var block_ele = $(this).closest('.card');
|
|
$(block_ele).block({
|
|
message: '<span class="semibold"> Loading...</span>',
|
|
timeout: 2000, //unblock after 2 seconds
|
|
overlayCSS: {
|
|
backgroundColor: '#fff',
|
|
opacity: 0.8,
|
|
cursor: 'wait'
|
|
},
|
|
css: {
|
|
border: 0,
|
|
padding: 0,
|
|
backgroundColor: 'transparent'
|
|
}
|
|
});
|
|
});
|
|
|
|
// Custom Message
|
|
$('.block-custom-message').on('click', function() {
|
|
var block_ele = $(this).closest('.card');
|
|
$(block_ele).block({
|
|
message: '<span class="semibold"> Custom Message...</span>',
|
|
timeout: 2000, //unblock after 2 seconds
|
|
overlayCSS: {
|
|
backgroundColor: '#fff',
|
|
opacity: 0.8,
|
|
cursor: 'wait'
|
|
},
|
|
css: {
|
|
border: 0,
|
|
padding: 0,
|
|
backgroundColor: 'transparent'
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
// Message Animation
|
|
$('.block-msg-animation').on('click', function() {
|
|
var block_ele = $(this).closest('.card');
|
|
$(block_ele).block({
|
|
message: '<div class="semibold"><span class="ft-refresh-cw icon-spin text-left"></span> Loading ...</div>',
|
|
fadeIn: 1000,
|
|
fadeOut: 1000,
|
|
timeout: 2000, //unblock after 2 seconds
|
|
overlayCSS: {
|
|
backgroundColor: '#fff',
|
|
opacity: 0.8,
|
|
cursor: 'wait'
|
|
},
|
|
css: {
|
|
border: 0,
|
|
padding: '10px 15px',
|
|
color: '#fff',
|
|
width: 'auto',
|
|
backgroundColor: '#333'
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
// Multiple messages
|
|
$('.block-multiple-msgs').on('click', function() {
|
|
var message = $('.multiple-msgs');
|
|
var block_ele = $(this).closest('.card');
|
|
$(block_ele).block({
|
|
message: message,
|
|
overlayCSS: {
|
|
backgroundColor: '#fff',
|
|
opacity: 0.8,
|
|
cursor: 'wait'
|
|
},
|
|
css: {
|
|
// width: 200,
|
|
border: 0,
|
|
padding: 0,
|
|
backgroundColor: 'transparent'
|
|
},
|
|
onBlock: function(){
|
|
clearTimeout();
|
|
}
|
|
});
|
|
|
|
window.setTimeout(function () {
|
|
message.html('<div class="semibold"><span class="ft-refresh-cw icon-spin text-left"></span> Loading ...</div>');
|
|
}, 0);
|
|
|
|
window.setTimeout(function () {
|
|
message.html('<div class="semibold">Just a minute...</div>');
|
|
}, 2000);
|
|
|
|
window.setTimeout(function () {
|
|
message.addClass('bg-success').html('<div class="semibold"><span class="icon-thumbs-o-up text-left"></span> Success</div>');
|
|
}, 4000);
|
|
|
|
window.setTimeout(function () {
|
|
$(block_ele).unblock({
|
|
onUnblock: function(){
|
|
message.removeClass('bg-success');
|
|
}
|
|
});
|
|
}, 6000);
|
|
});
|
|
|
|
// Non centered message
|
|
$('.block-non-centered-msg').on('click', function() {
|
|
var block_ele = $(this).closest('.card');
|
|
$(block_ele).block({
|
|
message: '<div class="semibold"><span class="ft-refresh-cw icon-spin text-left"></span> Loading ...</div>',
|
|
timeout: 2000, //unblock after 2 seconds
|
|
centerX: 0,
|
|
centerY: 0,
|
|
overlayCSS: {
|
|
backgroundColor: '#fff',
|
|
opacity: 0.8,
|
|
cursor: 'wait'
|
|
},
|
|
css: {
|
|
top: '10px',
|
|
left: '',
|
|
right: '10px',
|
|
border: 0,
|
|
padding: '10px 15px',
|
|
backgroundColor: 'transparent'
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
/****************************************
|
|
* Overlay Examples *
|
|
****************************************/
|
|
|
|
// Light overlay
|
|
$('.block-light-overlay').on('click', function() {
|
|
var block_ele = $(this).closest('.card');
|
|
$(block_ele).block({
|
|
message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
|
|
timeout: 2000, //unblock after 2 seconds
|
|
overlayCSS: {
|
|
backgroundColor: '#fff',
|
|
opacity: 0.8,
|
|
cursor: 'wait'
|
|
},
|
|
css: {
|
|
border: 0,
|
|
padding: 0,
|
|
backgroundColor: 'transparent'
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
// Custom overlay
|
|
$('.block-opaque-overlay').on('click', function() {
|
|
var block_ele = $(this).closest('.card');
|
|
$(block_ele).block({
|
|
message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
|
|
timeout: 2000, //unblock after 2 seconds
|
|
overlayCSS: {
|
|
backgroundColor: '#2962FF',
|
|
opacity: 1,
|
|
cursor: 'wait'
|
|
},
|
|
css: {
|
|
border: 0,
|
|
padding: 0,
|
|
color: '#fff',
|
|
backgroundColor: 'transparent'
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
// Overlay with custom color
|
|
$('.block-custom-overlay').on('click', function() {
|
|
var block_ele = $(this).closest('.card');
|
|
$(block_ele).block({
|
|
message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
|
|
timeout: 2000, //unblock after 2 seconds
|
|
overlayCSS: {
|
|
backgroundColor: '#E91E63',
|
|
opacity: 0.8,
|
|
cursor: 'wait'
|
|
},
|
|
css: {
|
|
border: 0,
|
|
padding: 0,
|
|
color: '#fff',
|
|
backgroundColor: 'transparent'
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
|
|
/****************************************
|
|
* Callback Options *
|
|
****************************************/
|
|
|
|
// onBlock callback
|
|
$('.onblock-callback').on('click', function() {
|
|
$.blockUI({
|
|
message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
|
|
fadeIn: 1000,
|
|
timeout: 2000, //unblock after 2 seconds
|
|
overlayCSS: {
|
|
backgroundColor: '#FFF',
|
|
opacity: 0.8,
|
|
cursor: 'wait'
|
|
},
|
|
css: {
|
|
border: 0,
|
|
padding: 0,
|
|
color: '#333',
|
|
backgroundColor: 'transparent'
|
|
},
|
|
onBlock: function() {
|
|
alert('Page is now blocked, FadeIn complete.');
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
// onUnblock callback
|
|
$('.onunblock-callback').on('click', function() {
|
|
$.blockUI({
|
|
message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
|
|
timeout: 2000, //unblock after 2 seconds
|
|
overlayCSS: {
|
|
backgroundColor: '#FFF',
|
|
opacity: 0.8,
|
|
cursor: 'wait'
|
|
},
|
|
css: {
|
|
border: 0,
|
|
padding: 0,
|
|
color: '#333',
|
|
backgroundColor: 'transparent'
|
|
},
|
|
onUnblock: function() {
|
|
alert('Page is now unblocked. FadeOut complete.');
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
// Overlay callback
|
|
$('.onoverlay-click-callback').on('click', function() {
|
|
$.blockUI({
|
|
message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
|
|
overlayCSS: {
|
|
backgroundColor: '#FFF',
|
|
opacity: 0.8,
|
|
cursor: 'wait'
|
|
},
|
|
css: {
|
|
color: '#333',
|
|
border: 0,
|
|
padding: 0,
|
|
backgroundColor: 'transparent'
|
|
},
|
|
onOverlayClick: $.unblockUI
|
|
});
|
|
});
|
|
|
|
|
|
|
|
/************************************
|
|
* Other Options *
|
|
************************************/
|
|
|
|
// Block Without Message
|
|
$('.block-without-msg').on('click', function() {
|
|
var block_ele = $(this).closest('.card');
|
|
$(block_ele).block({
|
|
message: null,
|
|
timeout: 2000, //unblock after 2 seconds
|
|
overlayCSS: {
|
|
backgroundColor: '#fff',
|
|
opacity: 0.8,
|
|
cursor: 'wait'
|
|
},
|
|
css: {
|
|
border: 0,
|
|
padding: 0,
|
|
backgroundColor: 'transparent'
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
// Block without overlay
|
|
$('.block-without-overlay').on('click', function() {
|
|
var block_ele = $(this).closest('.card');
|
|
$(block_ele).block({
|
|
message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
|
|
showOverlay: false,
|
|
timeout: 2000, //unblock after 2 seconds
|
|
css: {
|
|
width: 50,
|
|
height: 50,
|
|
lineHeight: 1,
|
|
color: '#FFF',
|
|
border: 0,
|
|
padding: 15,
|
|
backgroundColor: '#333'
|
|
}
|
|
});
|
|
});
|
|
|
|
// Unblock on overlay click
|
|
$('.overlay-unblock').on('click', function() {
|
|
var block_ele = $(this).closest('.card');
|
|
$(block_ele).block({
|
|
message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
|
|
overlayCSS: {
|
|
backgroundColor: '#fff',
|
|
opacity: 0.8,
|
|
cursor: 'wait'
|
|
},
|
|
css: {
|
|
border: 0,
|
|
padding: 0,
|
|
backgroundColor: 'transparent'
|
|
}
|
|
});
|
|
|
|
$('.blockOverlay').on('click', function() {
|
|
$(block_ele).unblock();
|
|
});
|
|
});
|
|
|
|
// Growl notification
|
|
$('.growl-notification').on('click', function() {
|
|
$.blockUI({
|
|
message: $('.growl-notification-example'),
|
|
fadeIn: 700,
|
|
fadeOut: 700,
|
|
timeout: 50000,
|
|
showOverlay: false,
|
|
centerY: false,
|
|
css: {
|
|
width: '250px',
|
|
top: '20px',
|
|
left: '',
|
|
right: '20px',
|
|
border: 'none',
|
|
padding: '15px 5px',
|
|
backgroundColor: '#333',
|
|
'-webkit-border-radius': '10px',
|
|
'-moz-border-radius': '10px',
|
|
opacity: 0.9,
|
|
color: '#fff'
|
|
}
|
|
});
|
|
});
|
|
|
|
}); |