$(document).ready(function() { $('head').append(''); });
(function($){
// Creating a number of jQuery plugins that you can use to
// initialize and control the progress meters.
$.fn.progressInitialize = function(){
// This function creates the necessary markup for the progress meter
// and sets up a few event listeners.
// Loop through all the buttons:
return this.each(function(){
var button = $(this),
progress = 0;
// Extract the data attributes into the options object.
// If they are missing, they will receive default values.
var options = $.extend({
type:'background-horizontal',
loading: 'Loading..',
finished: 'Done!'
}, button.data());
// Add the data attributes if they are missing from the element.
// They are used by our CSS code to show the messages
button.attr({'data-loading': options.loading, 'data-finished': options.finished});
// Add the needed markup for the progress bar to the button
var bar = $('').appendTo(button);
// The progress event tells the button to update the progress bar
button.on('progress', function(e, val, absolute, finish){
if(!button.hasClass('in-progress')){
// This is the first progress event for the button (or the
// first after it has finished in a previous run). Re-initialize
// the progress and remove some classes that may be left.
bar.show();
progress = 0;
button.removeClass('finished').addClass('in-progress')
}
// val, absolute and finish are event data passed by the progressIncrement
// and progressSet methods that you can see near the end of this file.
if(absolute){
progress = val;
}
else{
progress += val;
}
if(progress >= 100){
progress = 100;
}
if(finish){
button.removeClass('in-progress').addClass('finished');
bar.fadeOut(function(){
// Trigger the custom progress-finish event
button.trigger('progress-finish');
setProgress(0);
button.removeClass('finished');
});
}
setProgress(progress);
});
function setProgress(percentage){
bar.filter('.background-horizontal,.background-bar').width(percentage+'%');
bar.filter('.background-vertical').height(percentage+'%');
}
});
};
$.fn.progressFinish = function(){
return this.first().progressSet(100);
};
$.fn.progressIncrement = function(val){
val = val || 10;
var button = this.first();
button.trigger('progress',[val]);
return this;
};
$.fn.progressSet = function(val){
val = val || 10;
var finish = false;
if(val >= 100){
finish = true;
}
return this.first().trigger('progress',[val, true, finish]);
};
})(jQuery);