/* ------------------------------------------------------------------------------
*
* # BlockUI extension
*
* Specific JS code additions for extension_blockui.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
// Page elements
// ------------------------------
// Block panel
$('#block-panel').on('click', function() {
var block = $(this).parent();
$(block).block({
message: '',
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');
$(block).block({
message: '',
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: '',
timeout: 2000, //unblock after 2 seconds
overlayCSS: {
backgroundColor: '#1b2024',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
color: '#fff',
padding: 0,
backgroundColor: 'transparent'
}
});
});
// Overlays
// ------------------------------
// Basic overlay
$('#basic-overlay').on('click', function() {
var block = $(this).parent();
$(block).block({
message: '',
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).parent();
$(block).block({
message: '',
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).parent();
$(block).block({
message: '',
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).parent();
$(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).parent();
$(block).block({
message: '',
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).parent();
$(block).block({
message: 'Please wait...',
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).parent();
$(block).block({
message: '',
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).parent();
$(block).block({
message: ' Updating data',
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': 2,
'-moz-border-radius': 2,
backgroundColor: '#333'
}
});
});
// DOM message
$('#dom-message').on('click', function() {
var block = $(this).parent();
$(block).block({
message: $(this).next('.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).next('.blockui-message');
var block = $(this).parent();
$(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(' Loading')
}, 0);
window.setTimeout(function () {
message.html(' Please wait')
}, 2000);
window.setTimeout(function () {
message.addClass('bg-danger').html(' Load error')
}, 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).parent();
$(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).parent();
$(block).block({
message: '',
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).parent();
$(block).block({
message: '',
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).parent();
$(block).block({
message: '',
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: '',
fadeIn: 800,
timeout: 2000, //unblock after 2 seconds
overlayCSS: {
backgroundColor: '#1b2024',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
color: '#fff',
padding: 0,
backgroundColor: 'transparent'
},
onBlock: function() {
alert('Page is now blocked. FadeIn completed.');
}
});
});
// Unblock callback
$('#unblock-callback').on('click', function() {
$.blockUI({
message: '',
timeout: 2000, //unblock after 2 seconds
overlayCSS: {
backgroundColor: '#1b2024',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
color: '#fff',
padding: 0,
backgroundColor: 'transparent'
},
onUnblock: function() {
alert('Page is now unblocked. FadeOut completed.');
}
});
});
// Overlay callback
$('#overlay-callback').on('click', function() {
$.blockUI({
message: '',
overlayCSS: {
backgroundColor: '#1b2024',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
color: '#fff',
padding: 0,
backgroundColor: 'transparent'
},
onOverlayClick: $.unblockUI
});
});
// Other options
// ------------------------------
// Growl notification
$('#growl').on('click', function() {
$.blockUI({
message: $('.blockui-growl'),
fadeIn: 700,
fadeOut: 700,
timeout: 3000, //unblock after 3 seconds
showOverlay: false,
centerY: false,
css: {
width: '250px',
top: '25px',
left: 'auto',
right: '25px',
border: 0,
opacity: .95
}
});
});
});