|
1 /*! |
|
2 * bootstrap-progressbar v0.6.0 by @minddust |
|
3 * Copyright (c) 2012-2013 Stephan Gross |
|
4 * |
|
5 * https://www.minddust.com/bootstrap-progressbar |
|
6 * |
|
7 * Licensed under the MIT license: |
|
8 * http://www.opensource.org/licenses/MIT |
|
9 */ |
|
10 (function ($) { |
|
11 |
|
12 'use strict'; |
|
13 |
|
14 // PROGRESSBAR CLASS DEFINITION |
|
15 // ============================ |
|
16 |
|
17 var Progressbar = function (element, options) { |
|
18 this.$element = $(element); |
|
19 this.options = $.extend({}, Progressbar.defaults, options); |
|
20 }; |
|
21 |
|
22 Progressbar.defaults = { |
|
23 transition_delay: 300, |
|
24 refresh_speed: 50, |
|
25 display_text: 'none', |
|
26 use_percentage: true, |
|
27 percent_format: function (percent) { |
|
28 return percent + '%'; |
|
29 }, |
|
30 amount_format: function (amount_part, amount_total) { |
|
31 return amount_part + ' / ' + amount_total; |
|
32 }, |
|
33 update: $.noop, |
|
34 done: $.noop, |
|
35 fail: $.noop |
|
36 }; |
|
37 |
|
38 Progressbar.prototype.transition = function () { |
|
39 var $this = this.$element; |
|
40 var $parent = $this.parent(); |
|
41 var $back_text = this.$back_text; |
|
42 var $front_text = this.$front_text; |
|
43 var options = this.options; |
|
44 var aria_valuetransitiongoal = $this.attr('aria-valuetransitiongoal'); |
|
45 var aria_valuemin = $this.attr('aria-valuemin') || 0; |
|
46 var aria_valuemax = $this.attr('aria-valuemax') || 100; |
|
47 var is_vertical = $parent.hasClass('vertical'); |
|
48 var update = options.update && typeof options.update === 'function' ? options.update : Progressbar.defaults.update; |
|
49 var done = options.done && typeof options.done === 'function' ? options.done : Progressbar.defaults.done; |
|
50 var fail = options.fail && typeof options.fail === 'function' ? options.fail : Progressbar.defaults.fail; |
|
51 |
|
52 if (!aria_valuetransitiongoal) { |
|
53 fail('aria-valuetransitiongoal not set'); |
|
54 return; |
|
55 } |
|
56 var percentage = Math.round(100 * (aria_valuetransitiongoal - aria_valuemin) / (aria_valuemax - aria_valuemin)); |
|
57 |
|
58 if (options.display_text === 'center' && !$back_text && !$front_text) { |
|
59 this.$back_text = $back_text = $('<span>').addClass('progressbar-back-text').prependTo($parent); |
|
60 this.$front_text = $front_text = $('<span>').addClass('progressbar-front-text').prependTo($this); |
|
61 |
|
62 var parent_size; |
|
63 |
|
64 if (is_vertical) { |
|
65 parent_size = $parent.css('height'); |
|
66 $back_text.css({height: parent_size, 'line-height': parent_size}); |
|
67 $front_text.css({height: parent_size, 'line-height': parent_size}); |
|
68 |
|
69 $(window).resize(function () { |
|
70 parent_size = $parent.css('height'); |
|
71 $back_text.css({height: parent_size, 'line-height': parent_size}); |
|
72 $front_text.css({height: parent_size, 'line-height': parent_size}); |
|
73 }); // normal resizing would brick the structure because width is in px |
|
74 } |
|
75 else { |
|
76 parent_size = $parent.css('width'); |
|
77 $front_text.css({width: parent_size}); |
|
78 |
|
79 $(window).resize(function () { |
|
80 parent_size = $parent.css('width'); |
|
81 $front_text.css({width: parent_size}); |
|
82 }); // normal resizing would brick the structure because width is in px |
|
83 } |
|
84 } |
|
85 |
|
86 setTimeout(function () { |
|
87 var current_percentage; |
|
88 var current_value; |
|
89 var this_size; |
|
90 var parent_size; |
|
91 var text; |
|
92 |
|
93 if (is_vertical) { |
|
94 $this.css('height', percentage + '%'); |
|
95 } |
|
96 else { |
|
97 $this.css('width', percentage + '%'); |
|
98 } |
|
99 |
|
100 var progress = setInterval(function () { |
|
101 if (is_vertical) { |
|
102 this_size = $this.height(); |
|
103 parent_size = $parent.height(); |
|
104 } |
|
105 else { |
|
106 this_size = $this.width(); |
|
107 parent_size = $parent.width(); |
|
108 } |
|
109 |
|
110 current_percentage = Math.round(100 * this_size / parent_size); |
|
111 current_value = Math.round(this_size / parent_size * (aria_valuemax - aria_valuemin)); |
|
112 |
|
113 if (current_percentage >= percentage) { |
|
114 current_percentage = percentage; |
|
115 current_value = aria_valuetransitiongoal; |
|
116 done(); |
|
117 clearInterval(progress); |
|
118 } |
|
119 |
|
120 if (options.display_text !== 'none') { |
|
121 text = options.use_percentage ? options.percent_format(current_percentage) : options.amount_format(current_value, aria_valuemax); |
|
122 |
|
123 if (options.display_text === 'fill') { |
|
124 $this.text(text); |
|
125 } |
|
126 else if (options.display_text === 'center') { |
|
127 $back_text.text(text); |
|
128 $front_text.text(text); |
|
129 } |
|
130 } |
|
131 $this.attr('aria-valuenow', current_value); |
|
132 |
|
133 update(current_percentage); |
|
134 }, options.refresh_speed); |
|
135 }, options.transition_delay); |
|
136 }; |
|
137 |
|
138 |
|
139 // PROGRESSBAR PLUGIN DEFINITION |
|
140 // ============================= |
|
141 |
|
142 var old = $.fn.progressbar; |
|
143 |
|
144 $.fn.progressbar = function (option) { |
|
145 return this.each(function () { |
|
146 var $this = $(this); |
|
147 var data = $this.data('bs.progressbar'); |
|
148 var options = typeof option === 'object' && option; |
|
149 |
|
150 if (!data) { |
|
151 $this.data('bs.progressbar', (data = new Progressbar(this, options))); |
|
152 } |
|
153 data.transition(); |
|
154 }); |
|
155 }; |
|
156 |
|
157 $.fn.progressbar.Constructor = Progressbar; |
|
158 |
|
159 |
|
160 // PROGRESSBAR NO CONFLICT |
|
161 // ======================= |
|
162 |
|
163 $.fn.progressbar.noConflict = function () { |
|
164 $.fn.progressbar = old; |
|
165 return this; |
|
166 }; |
|
167 |
|
168 })(window.jQuery); |