/* ------------------------------------------------------------------------------
*
* # Page and progress loaders
*
* Specific JS code additions for components_loaders.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
// ========================================
//
// Progress bars
//
// ========================================
// Basic progress bar
// ------------------------------
// Start
$('#h-default-basic-start').click(function() {
var $pb = $('#h-default-basic .progress-bar');
$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
$pb.progressbar();
});
// Reset
$('#h-default-basic-reset').click(function() {
$('#h-default-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
});
// Progress bar in right direction
// ------------------------------
// Start
$('#h-right-basic-start').click(function() {
var $pb = $('#h-right-basic .progress-bar');
$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
$pb.progressbar();
});
// Reset
$('#h-right-basic-reset').click(function() {
$('#h-right-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
});
// Progress bar with text fill
// ------------------------------
// Start
$('#h-fill-basic-start').click(function() {
var $pb = $('#h-fill-basic .progress-bar');
$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
$pb.progressbar({display_text: 'fill'});
});
// Reset
$('#h-fill-basic-reset').click(function() {
$('#h-fill-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({display_text: 'fill'});
});
// Progress bar with non-percentage text
// ------------------------------
// Start
$('#h-fill-nonpercentage-basic-start').click(function() {
var $pb = $('#h-fill-nonpercentage-basic .progress-bar');
$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
$pb.progressbar({display_text: 'fill', use_percentage: false});
});
// Reset
$('#h-fill-nonpercentage-basic-reset').click(function() {
$('#h-fill-nonpercentage-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({display_text: 'fill', use_percentage: false});
});
// Progress bar with centered text
// ------------------------------
// Start
$('#h-center-basic-start').click(function() {
var $pb = $('#h-center-basic .progress-bar');
$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
$pb.progressbar({display_text: 'center'});
});
// Reset
$('#h-center-basic-reset').click(function() {
$('#h-center-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({display_text: 'center'});
});
// Progress bar with centered non-percentage text
// ------------------------------
// Start
$('#h-center-nonpercentage-basic-start').click(function() {
var $pb = $('#h-center-nonpercentage-basic .progress-bar');
$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
$pb.progressbar({display_text: 'center', use_percentage: false});
});
// Reset
$('#h-center-nonpercentage-basic-reset').click(function() {
$('#h-center-nonpercentage-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({display_text: 'center', use_percentage: false});
});
// Vertical progress bar
// ------------------------------
// Start
$('#v-default-basic-start').click(function() {
$('#v-default-basic .progress-bar').each(function () {
var $pb = $(this);
$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
$pb.progressbar();
});
});
// Reset
$('#v-default-basic-reset').click(function() {
$('#v-default-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
});
// Bottom direction
// ------------------------------
// Start
$('#v-bottom-basic-start').click(function() {
$('#v-bottom-basic .progress-bar').each(function () {
var $pb = $(this);
$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
$pb.progressbar();
});
});
// Reset
$('#v-bottom-basic-reset').click(function() {
$('#v-bottom-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
});
// Vertical progress bar with text fill
// ------------------------------
// Start
$('#v-fill-basic-start').click(function() {
$('#v-fill-basic .progress-bar').each(function () {
var $pb = $(this);
$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
$pb.progressbar({display_text: 'fill'});
});
});
// Reset
$('#v-fill-basic-reset').click(function() {
$('#v-fill-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
});
// Vertical progress bar with non-percentage text
// ------------------------------
// Start
$('#v-fill-nonpercentage-basic-start').click(function() {
$('#v-fill-nonpercentage-basic .progress-bar').each(function () {
var $pb = $(this);
$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
$pb.progressbar({display_text: 'fill', use_percentage: false});
});
});
// Reset
$('#v-fill-nonpercentage-basic-reset').click(function() {
$('#v-fill-nonpercentage-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
});
// Vertical progress bar with centered text
// ------------------------------
// Start
$('#v-center-basic-start').click(function() {
$('#v-center-basic .progress-bar').each(function () {
var $pb = $(this);
$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
$pb.progressbar({display_text: 'center'});
});
});
// Reset
$('#v-center-basic-reset').click(function() {
$('#v-center-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
});
// Vertical progress bar with centered non-percentage text
// ------------------------------
// Start
$('#v-center-nonpercentage-basic-start').click(function() {
$('#v-center-nonpercentage-basic .progress-bar').each(function () {
var $pb = $(this);
$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
$pb.progressbar({display_text: 'center', use_percentage: false});
});
});
// Reset
$('#v-center-nonpercentage-basic-reset').click(function() {
$('#v-center-nonpercentage-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
});
// ========================================
//
// Loading spinners
//
// ========================================
// Spinner #1
// ------------------------------
// Light
$('#spinner-light').on('click', function() {
var light = $(this).parent();
$(light).block({
message: '',
overlayCSS: {
backgroundColor: '#fff',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'none'
}
});
window.setTimeout(function () {
$(light).unblock();
}, 2000);
});
// Dark
$('#spinner-dark').on('click', function() {
var dark = $(this).parent();
$(dark).block({
message: '',
overlayCSS: {
backgroundColor: '#1B2024',
opacity: 0.85,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'none',
color: '#fff'
}
});
window.setTimeout(function () {
$(dark).unblock();
}, 2000);
});
// Spinner #2
// ------------------------------
// Light
$('#spinner-light-2').on('click', function() {
var light_2 = $(this).parent();
$(light_2).block({
message: '',
overlayCSS: {
backgroundColor: '#fff',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'none'
}
});
window.setTimeout(function () {
$(light_2).unblock();
}, 2000);
});
// Dark
$('#spinner-dark-2').on('click', function() {
var dark_2 = $(this).parent();
$(dark_2).block({
message: '',
overlayCSS: {
backgroundColor: '#1B2024',
opacity: 0.85,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'none',
color: '#fff'
}
});
window.setTimeout(function () {
$(dark_2).unblock();
}, 2000);
});
// Spinner #3
// ------------------------------
// Light
$('#spinner-light-3').on('click', function() {
var light_3 = $(this).parent();
$(light_3).block({
message: '',
overlayCSS: {
backgroundColor: '#fff',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'none'
}
});
window.setTimeout(function () {
$(light_3).unblock();
}, 2000);
});
// Dark
$('#spinner-dark-3').on('click', function() {
var dark_3 = $(this).parent();
$(dark_3).block({
message: '',
overlayCSS: {
backgroundColor: '#1B2024',
opacity: 0.85,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'none',
color: '#fff'
}
});
window.setTimeout(function () {
$(dark_3).unblock();
}, 2000);
});
// Spinner #4
// ------------------------------
// Light
$('#spinner-light-4').on('click', function() {
var light_4 = $(this).parent();
$(light_4).block({
message: '',
overlayCSS: {
backgroundColor: '#fff',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'none'
}
});
window.setTimeout(function () {
$(light_4).unblock();
}, 2000);
});
// Dark
$('#spinner-dark-4').on('click', function() {
var dark_4 = $(this).parent();
$(dark_4).block({
message: '',
overlayCSS: {
backgroundColor: '#1B2024',
opacity: 0.85,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'none',
color: '#fff'
}
});
window.setTimeout(function () {
$(dark_4).unblock();
}, 2000);
});
// Spinner #5
// ------------------------------
// Light
$('#spinner-light-5').on('click', function() {
var light_5 = $(this).parent();
$(light_5).block({
message: '',
overlayCSS: {
backgroundColor: '#fff',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'none'
}
});
window.setTimeout(function () {
$(light_5).unblock();
}, 2000);
});
// Dark
$('#spinner-dark-5').on('click', function() {
var dark_5 = $(this).parent();
$(dark_5).block({
message: '',
overlayCSS: {
backgroundColor: '#1B2024',
opacity: 0.85,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'none',
color: '#fff'
}
});
window.setTimeout(function () {
$(dark_5).unblock();
}, 2000);
});
// Spinner #6
// ------------------------------
// Light
$('#spinner-light-6').on('click', function() {
var light_6 = $(this).parent();
$(light_6).block({
message: '',
overlayCSS: {
backgroundColor: '#fff',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'none'
}
});
window.setTimeout(function () {
$(light_6).unblock();
}, 2000);
});
// Dark
$('#spinner-dark-6').on('click', function() {
var dark_6 = $(this).parent();
$(dark_6).block({
message: '',
overlayCSS: {
backgroundColor: '#1B2024',
opacity: 0.85,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'none',
color: '#fff'
}
});
window.setTimeout(function () {
$(dark_6).unblock();
}, 2000);
});
// Spinner #7
// ------------------------------
// Light
$('#spinner-light-7').on('click', function() {
var light_7 = $(this).parent();
$(light_7).block({
message: '',
overlayCSS: {
backgroundColor: '#fff',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'none'
}
});
window.setTimeout(function () {
$(light_7).unblock();
}, 2000);
});
// Dark
$('#spinner-dark-7').on('click', function() {
var dark_7 = $(this).parent();
$(dark_7).block({
message: '',
overlayCSS: {
backgroundColor: '#1B2024',
opacity: 0.85,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'none',
color: '#fff'
}
});
window.setTimeout(function () {
$(dark_7).unblock();
}, 2000);
});
// Spinner #8
// ------------------------------
// Light
$('#spinner-light-8').on('click', function() {
var light_8 = $(this).parent();
$(light_8).block({
message: '',
overlayCSS: {
backgroundColor: '#fff',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'none'
}
});
window.setTimeout(function () {
$(light_8).unblock();
}, 2000);
});
// Dark
$('#spinner-dark-8').on('click', function() {
var dark_8 = $(this).parent();
$(dark_8).block({
message: '',
overlayCSS: {
backgroundColor: '#1B2024',
opacity: 0.85,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'none',
color: '#fff'
}
});
window.setTimeout(function () {
$(dark_8).unblock();
}, 2000);
});
// Spinner #9
// ------------------------------
// Light
$('#spinner-light-9').on('click', function() {
var light_9 = $(this).parent();
$(light_9).block({
message: '',
overlayCSS: {
backgroundColor: '#fff',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'none'
}
});
window.setTimeout(function () {
$(light_9).unblock();
}, 2000);
});
// Dark
$('#spinner-dark-9').on('click', function() {
var dark_9 = $(this).parent();
$(dark_9).block({
message: '',
overlayCSS: {
backgroundColor: '#1B2024',
opacity: 0.85,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'none',
color: '#fff'
}
});
window.setTimeout(function () {
$(dark_9).unblock();
}, 2000);
});
});