source: extensions/regenerateWebsize/js/jquery.progressbar.js @ 31810

Last change on this file since 31810 was 10358, checked in by patdenice, 13 years ago

Add Websize Renegeration plugin.

File size: 6.3 KB
Line 
1/*
2 * jQuery Progress Bar plugin
3 * Version 2.0 (06/22/2009)
4 * @requires jQuery v1.2.1 or later
5 *
6 * Copyright (c) 2008 Gary Teo
7 * http://t.wits.sg
8
9USAGE:
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
20                        this.defaults = {
21                                steps                   : 20,                                                                                   // steps taken to reach target
22                                stepDuration    : 20,                                                                                   
23                                max                             : 100,                                                                                  // Upon 100% i'd assume, but configurable
24                                showText                : true,                                                                                 // show text with percentage in next to the progressbar? - default : true
25                                textFormat              : 'percentage',                                                                 // Or otherwise, set to 'fraction'
26                                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'
27                                height                  : 12,                                                                                   // Height of the progressbar - don't forget to adjust your image too!!!
28                                callback                : null,                                                                                 // Calls back with the config object that has the current percentage, target percentage, current image, etc
29                                boxImage                : 'images/progressbar.gif',                                             // boxImage : image around the progress bar
30                                barImage                : {
31                                                                        0:      'images/progressbg_red.gif',
32                                                                        30: 'images/progressbg_orange.gif',
33                                                                        70: 'images/progressbg_green.gif'
34                                                                },
35                               
36                               
37                                // Internal use
38                                running_value   : 0,
39                                value                   : 0,
40                                image                   : null
41                        };
42                       
43                        /* public methods */
44                        this.construct = function(arg1, arg2) {
45                                var argvalue    = null;
46                                var argconfig   = null;
47                               
48                                if (arg1 != null) {
49                                        if (!isNaN(arg1)) {
50                                                argvalue = arg1;
51                                                if (arg2 != null) {
52                                                        argconfig = arg2;
53                                                }
54                                        } else {
55                                                argconfig = arg1; 
56                                        }
57                                }
58                               
59                                return this.each(function(child) {
60                                        var pb          = this;
61                                        var config      = this.config;
62                                       
63                                        if (argvalue != null && this.bar != null && this.config != null) {
64                                                this.config.value               = parseInt(argvalue)
65                                                if (argconfig != null)
66                                                        pb.config                       = $.extend(this.config, argconfig);
67                                                config  = pb.config;
68                                        } else {
69                                                var $this                               = $(this);
70                                                var config                              = $.extend({}, $.progressBar.defaults, argconfig);
71                                                config.id                               = $this.attr('id') ? $this.attr('id') : Math.ceil(Math.random() * 100000);      // random id, if none provided
72                                               
73                                                if (argvalue == null)
74                                                        argvalue        = $this.html().replace("%","")  // parse percentage
75                                               
76                                                config.value                    = parseInt(argvalue);
77                                                config.running_value    = 0;
78                                                config.image                    = getBarImage(config);
79                                               
80                                                var numeric = ['steps', 'stepDuration', 'max', 'width', 'height', 'running_value', 'value'];
81                                                for (var i=0; i<numeric.length; i++) 
82                                                        config[numeric[i]] = parseInt(config[numeric[i]]);
83                                               
84                                                $this.html("");
85                                                var bar                                 = document.createElement('img');
86                                                var text                                = document.createElement('span');
87                                                var $bar                                = $(bar);
88                                                var $text                               = $(text);
89                                                pb.bar                                  = $bar;
90                                               
91                                                $bar.attr('id', config.id + "_pbImage");
92                                                $text.attr('id', config.id + "_pbText");
93                                                $text.html(getText(config));
94                                                $bar.attr('title', getText(config));
95                                                $bar.attr('alt', getText(config));
96                                                $bar.attr('src', config.boxImage);
97                                                $bar.attr('width', config.width);
98                                                $bar.css("width", config.width + "px");
99                                                $bar.css("height", config.height + "px");
100                                                $bar.css("background-image", "url(" + config.image + ")");
101                                                $bar.css("background-position", ((config.width * -1)) + 'px 50%');
102                                                $bar.css("padding", "0");
103                                                $bar.css("margin", "0");
104                                                $this.append($bar);
105                                                $this.append($text);
106                                        }
107
108                                        function getPercentage(config) {
109                                                return config.running_value * 100 / config.max;
110                                        }
111
112                                        function getBarImage(config) {
113                                                var image = config.barImage;
114                                                if (typeof(config.barImage) == 'object') {
115                                                        for (var i in config.barImage) {
116                                                                if (config.running_value >= parseInt(i)) {
117                                                                        image = config.barImage[i];
118                                                                } else { break; }
119                                                        }
120                                                }
121                                                return image;
122                                        }
123                                       
124                                        function getText(config) {
125                                                if (config.showText) {
126                                                        if (config.textFormat == 'percentage') {
127                                                                return " " + Math.round(config.running_value) + "%";
128                                                        } else if (config.textFormat == 'fraction') {
129                                                                return " " + config.running_value + '/' + config.max;
130                                                        }
131                                                }
132                                        }
133                                       
134                                        config.increment = Math.round((config.value - config.running_value)/config.steps);
135                                        if (config.increment < 0)
136                                                config.increment *= -1;
137                                        if (config.increment < 1)
138                                                config.increment = 1;
139                                       
140                                        var t = setInterval(function() {
141                                                var pixels      = config.width / 100;                   // Define how many pixels go into 1%
142                                               
143                                                if (config.running_value > config.value) {
144                                                        if (config.running_value - config.increment  < config.value) {
145                                                                config.running_value = config.value;
146                                                        } else {
147                                                                config.running_value -= config.increment;
148                                                        }
149                                                }
150                                                else if (config.running_value < config.value) {
151                                                        if (config.running_value + config.increment  > config.value) {
152                                                                config.running_value = config.value;
153                                                        } else {
154                                                                config.running_value += config.increment;
155                                                        }
156                                                }
157                                               
158                                                if (config.running_value == config.value)
159                                                        clearInterval(t);
160                                               
161                                                var $bar        = $("#" + config.id + "_pbImage");
162                                                var $text       = $("#" + config.id + "_pbText");
163                                                var image       = getBarImage(config);
164                                                if (image != config.image) {
165                                                        $bar.css("background-image", "url(" + image + ")");
166                                                        config.image = image;
167                                                }
168                                                $bar.css("background-position", (((config.width * -1)) + (getPercentage(config) * pixels)) + 'px 50%');
169                                                $bar.attr('title', getText(config));
170                                                $text.html(getText(config));
171                                               
172                                                if (config.callback != null && typeof(config.callback) == 'function')
173                                                        config.callback(config);
174                                               
175                                                pb.config = config;
176                                        }, config.stepDuration); 
177                                });
178                        };
179                }
180        });
181               
182        $.fn.extend({
183        progressBar: $.progressBar.construct
184        });
185       
186})(jQuery);
Note: See TracBrowser for help on using the repository browser.