app/jquery/jquery-progressbar.js

   1 /*
   2  * jQuery Progress Bar plugin
   3  * Version 1.1.0 (06/20/2008)
   4  * @requires jQuery v1.2.1 or later
   5  *
   6  * Copyright (c) 2008 Gary Teo
   7  * http://t.wits.sg
   8
   9 USAGE:
  10         $(".someclass").progressBar();
  11         $("#progressbar").progressBar();
  12         $("#progressbar").progressBar(45);                                                      // percentage
  13         $("#progressbar").progressBar({showText: false });                      // percentage with config
  14         $("#progressbar").progressBar(45, {showText: false });          // percentage with config
  15 */
  16 (function($) {
  17         $.extend({
  18                 progressBar: new function() {
  19                         this.defaults = {
  20                                 increment       : 2,
  21                                 speed           : 15,
  22                                 showText        : true,                                                                                 // show text with percentage in next to the progressbar? - default : true
  23                                 width           : 120,                                                                                  // Width of the progressbar - don't forget to adjust your image too!!!
  24                                 boxImage        : '/soc/content/images/progressbar.gif',                // boxImage : image around the progress bar
  25                                 barImage        : '/soc/content/images/progressbg_green.gif',   // Image to use in the progressbar. Can be an array of images too.
  26                                 height          : 12                                                                                    // Height of the progressbar - don't forget to adjust your image too!!!
  27                         };
  28
  29                         /* public methods */
  30                         this.construct = function(arg1, arg2) {
  31                                 var argpercentage       = null;
  32                                 var argconfig           = null;
  33
  34                                 if (arg1 != null) {
  35                                         if (!isNaN(arg1)) {
  36                                                 argpercentage   = arg1;
  37                                                 if (arg2 != null) {
  38                                                         argconfig       = arg2; }
  39                                         } else {
  40                                                 argconfig               = arg1;
  41                                         }
  42                                 }
  43
  44                                 return this.each(function(child) {
  45                                         var pb          = this;
  46                                         if (argpercentage != null && this.bar != null && this.config != null) {
  47                                                 this.config.tpercentage = argpercentage;
  48                                                 if (argconfig != null)
  49                                                         pb.config                       = $.extend(this.config, argconfig);
  50                                         } else {
  51                                                 var $this                               = $(this);
  52                                                 var config                              = $.extend({}, $.progressBar.defaults, argconfig);
  53                                                 var percentage                  = argpercentage;
  54                                                 if (argpercentage == null)
  55                                                         var percentage          = $this.html().replace("%",""); // parsed percentage
  56
  57
  58                                                 $this.html("");
  59                                                 var bar                                 = document.createElement('img');
  60                                                 var text                                = document.createElement('span');
  61                                                 bar.id                                  = this.id + "_percentImage";
  62                                                 text.id                                 = this.id + "_percentText";
  63                                                 bar.src                                 = config.boxImage;
  64                                                 bar.width                               = config.width;
  65                                                 var $bar                                = $(bar);
  66                                                 var $text                               = $(text);
  67
  68                                                 this.bar                                = $bar;
  69                                                 this.ntext                              = $text;
  70                                                 this.config                             = config;
  71                                                 this.config.cpercentage = 0;
  72                                                 this.config.tpercentage = percentage;
  73
  74                                                 $bar.css("width", config.width + "px");
  75                                                 $bar.css("height", config.height + "px");
  76                                                 $bar.css("background-image", "url(" + config.barImage + ")");
  77                                                 $bar.css("padding", "0");
  78                                                 $bar.css("margin", "0");
  79
  80                                                 $this.append($bar);
  81                                                 $this.append($text);
  82
  83                                                 bar.alt                         = this.tpercentage;
  84                                                 bar.title                       = this.tpercentage;
  85                                         }
  86
  87
  88
  89                                         var t = setInterval(function() {
  90                                                 var config              = pb.config;
  91                                                 var cpercentage = parseInt(config.cpercentage);
  92                                                 var tpercentage = parseInt(config.tpercentage);
  93                                                 var increment   = parseInt(config.increment);
  94                                                 var bar                 = pb.bar;
  95                                                 var text                = pb.ntext;
  96                                                 var pixels              = config.width / 100;                   // Define how many pixels go into 1%
  97
  98                                                 bar.css("background-position", (((config.width * -1)) + (cpercentage * pixels)) + 'px 50%');
  99
 100                                                 if (config.showText)
 101                                                         text.html(" " + Math.round(cpercentage) + "%");
 102
 103                                                 if (cpercentage > tpercentage) {
 104                                                         if (cpercentage - increment  < tpercentage) {
 105                                                                 pb.config.cpercentage = 0 + tpercentage
 106                                                         } else {
 107                                                                 pb.config.cpercentage -= increment;
 108                                                         }
 109                                                 }
 110                                                 else if (pb.config.cpercentage < pb.config.tpercentage) {
 111                                                         if (cpercentage + increment  > tpercentage) {
 112                                                                 pb.config.cpercentage = tpercentage
 113                                                         } else {
 114                                                                 pb.config.cpercentage += increment;
 115                                                         }
 116                                                 }
 117                                                 else {
 118                                                         clearInterval(t);
 119                                                 }
 120                                         }, pb.config.speed);
 121                                 });
 122                         };
 123                 }
 124         });
 125
 126         $.fn.extend({
 127         progressBar: $.progressBar.construct
 128         });
 129
 130 })(jQuery);