diff options
Diffstat (limited to '')
| -rw-r--r-- | themes/default/js/plugins/jquery.progressbar.js | 186 |
1 files changed, 186 insertions, 0 deletions
diff --git a/themes/default/js/plugins/jquery.progressbar.js b/themes/default/js/plugins/jquery.progressbar.js new file mode 100644 index 000000000..7239954f5 --- /dev/null +++ b/themes/default/js/plugins/jquery.progressbar.js @@ -0,0 +1,186 @@ +/*
+ * jQuery Progress Bar plugin
+ * Version 2.0 (06/22/2009)
+ * @requires jQuery v1.2.1 or later
+ *
+ * Copyright (c) 2008 Gary Teo
+ * http://t.wits.sg
+
+USAGE:
+ $(".someclass").progressBar();
+ $("#progressbar").progressBar();
+ $("#progressbar").progressBar(45); // percentage
+ $("#progressbar").progressBar({showText: false }); // percentage with config
+ $("#progressbar").progressBar(45, {showText: false }); // percentage with config
+*/
+(function($) {
+ $.extend({
+ progressBar: new function() {
+
+ this.defaults = {
+ steps : 20, // steps taken to reach target
+ stepDuration : 20,
+ max : 100, // Upon 100% i'd assume, but configurable
+ showText : true, // show text with percentage in next to the progressbar? - default : true
+ textFormat : 'percentage', // Or otherwise, set to 'fraction'
+ width : 120, // Width of the progressbar - don't forget to adjust your image too!!! // Image to use in the progressbar. Can be a single image too: 'images/progressbg_green.gif'
+ height : 12, // Height of the progressbar - don't forget to adjust your image too!!!
+ callback : null, // Calls back with the config object that has the current percentage, target percentage, current image, etc
+ boxImage : 'images/progressbar.gif', // boxImage : image around the progress bar
+ barImage : {
+ 0: 'images/progressbg_red.gif',
+ 30: 'images/progressbg_orange.gif',
+ 70: 'images/progressbg_green.gif'
+ },
+
+
+ // Internal use
+ running_value : 0,
+ value : 0,
+ image : null
+ };
+
+ /* public methods */
+ this.construct = function(arg1, arg2) {
+ var argvalue = null;
+ var argconfig = null;
+
+ if (arg1 != null) {
+ if (!isNaN(arg1)) {
+ argvalue = arg1;
+ if (arg2 != null) {
+ argconfig = arg2;
+ }
+ } else {
+ argconfig = arg1;
+ }
+ }
+
+ return this.each(function(child) {
+ var pb = this;
+ var config = this.config;
+
+ if (argvalue != null && this.bar != null && this.config != null) {
+ this.config.value = parseInt(argvalue)
+ if (argconfig != null)
+ pb.config = $.extend(this.config, argconfig);
+ config = pb.config;
+ } else {
+ var $this = $(this);
+ var config = $.extend({}, $.progressBar.defaults, argconfig);
+ config.id = $this.attr('id') ? $this.attr('id') : Math.ceil(Math.random() * 100000); // random id, if none provided
+
+ if (argvalue == null)
+ argvalue = $this.html().replace("%","") // parse percentage
+
+ config.value = parseInt(argvalue);
+ config.running_value = 0;
+ config.image = getBarImage(config);
+
+ var numeric = ['steps', 'stepDuration', 'max', 'width', 'height', 'running_value', 'value'];
+ for (var i=0; i<numeric.length; i++)
+ config[numeric[i]] = parseInt(config[numeric[i]]);
+
+ $this.html("");
+ var bar = document.createElement('img');
+ var text = document.createElement('span');
+ var $bar = $(bar);
+ var $text = $(text);
+ pb.bar = $bar;
+
+ $bar.attr('id', config.id + "_pbImage");
+ $text.attr('id', config.id + "_pbText");
+ $text.html(getText(config));
+ $bar.attr('title', getText(config));
+ $bar.attr('alt', getText(config));
+ $bar.attr('src', config.boxImage);
+ $bar.attr('width', config.width);
+ $bar.css("width", config.width + "px");
+ $bar.css("height", config.height + "px");
+ $bar.css("background-image", "url(" + config.image + ")");
+ $bar.css("background-position", ((config.width * -1)) + 'px 50%');
+ $bar.css("padding", "0");
+ $bar.css("margin", "0");
+ $this.append($bar);
+ $this.append($text);
+ }
+
+ function getPercentage(config) {
+ return config.running_value * 100 / config.max;
+ }
+
+ function getBarImage(config) {
+ var image = config.barImage;
+ if (typeof(config.barImage) == 'object') {
+ for (var i in config.barImage) {
+ if (config.running_value >= parseInt(i)) {
+ image = config.barImage[i];
+ } else { break; }
+ }
+ }
+ return image;
+ }
+
+ function getText(config) {
+ if (config.showText) {
+ if (config.textFormat == 'percentage') {
+ return " " + Math.round(config.running_value) + "%";
+ } else if (config.textFormat == 'fraction') {
+ return " " + config.running_value + '/' + config.max;
+ }
+ }
+ }
+
+ config.increment = Math.round((config.value - config.running_value)/config.steps);
+ if (config.increment < 0)
+ config.increment *= -1;
+ if (config.increment < 1)
+ config.increment = 1;
+
+ var t = setInterval(function() {
+ var pixels = config.width / 100; // Define how many pixels go into 1%
+
+ if (config.running_value > config.value) {
+ if (config.running_value - config.increment < config.value) {
+ config.running_value = config.value;
+ } else {
+ config.running_value -= config.increment;
+ }
+ }
+ else if (config.running_value < config.value) {
+ if (config.running_value + config.increment > config.value) {
+ config.running_value = config.value;
+ } else {
+ config.running_value += config.increment;
+ }
+ }
+
+ if (config.running_value == config.value)
+ clearInterval(t);
+
+ var $bar = $("#" + config.id + "_pbImage");
+ var $text = $("#" + config.id + "_pbText");
+ var image = getBarImage(config);
+ if (image != config.image) {
+ $bar.css("background-image", "url(" + image + ")");
+ config.image = image;
+ }
+ $bar.css("background-position", (((config.width * -1)) + (getPercentage(config) * pixels)) + 'px 50%');
+ $bar.attr('title', getText(config));
+ $text.html(getText(config));
+
+ if (config.callback != null && typeof(config.callback) == 'function')
+ config.callback(config);
+
+ pb.config = config;
+ }, config.stepDuration);
+ });
+ };
+ }
+ });
+
+ $.fn.extend({
+ progressBar: $.progressBar.construct
+ });
+
+})(jQuery);
\ No newline at end of file |