Skip to content

Commit

Permalink
Progressbar:
Browse files Browse the repository at this point in the history
Refactored creation of elements on init.
Removed propagate method; using trigger instead.
Fixed appending background text element.
Added $.ui.progressbar.uuid; used for identifier instead of timestamp + random number.
Fixed updating of text to also update the background text.
Removed default for unused addClass option.
  • Loading branch information
scottgonzalez committed Nov 17, 2008
1 parent c4d2a1b commit 11a81ac
Showing 1 changed file with 49 additions and 43 deletions.
92 changes: 49 additions & 43 deletions ui/ui.progressbar.js
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ $.widget("ui.progressbar", {


var self = this, var self = this,
options = this.options, options = this.options,
id = ((new Date()).getTime() + Math.random()), identifier = 'progressbar' + (++$.ui.progressbar.uuid),
text = options.text || '0%'; text = options.text || '0%';


this.element this.element
Expand All @@ -31,27 +31,40 @@ $.widget("ui.progressbar", {
"aria-valuemax": 100, "aria-valuemax": 100,
"aria-valuenow": 0 "aria-valuenow": 0
}); });

$.extend(this, { $.extend(this, {
active: false, active: false,
pixelState: 0, pixelState: 0,
percentState: 0, percentState: 0,
identifier: id, identifier: identifier
bar: $('<div class="ui-progressbar-bar ui-hidden"></div>').css({
width: '0px', overflow: 'hidden', zIndex: 100
}),
textElement: $('<div class="ui-progressbar-text"></div>').html(text).css({
width: '0px', overflow: 'hidden'
}),
textBg: $('<div class="ui-progressbar-text ui-progressbar-text-back"></div>').html(text).css({
width: this.element.width()
}),
wrapper: $('<div class="ui-progressbar-wrap"></div>')
}); });


this.wrapper this.wrapper = $('<div class="ui-progressbar-wrap"></div>')
.append(this.bar.append(this.textElement.addClass(options.textClass)), this.textBg)
.appendTo(this.element); .appendTo(this.element);

this.bar = $('<div class="ui-progressbar-bar ui-hidden"></div>')
.css({
width: 0,
overflow: 'hidden',
zIndex: 100
})
.appendTo(this.wrapper);

this.textElement = $('<div class="ui-progressbar-text"></div>')
.html(text)
.css({
width: 0,
overflow: 'hidden'
})
.addClass(options.textClass)
.appendTo(this.bar);

this.textBg = $('<div class="ui-progressbar-text ui-progressbar-text-back"></div>')
.html(text)
.css({
width: this.element.width()
})
.appendTo(this.bar);
}, },


_animate: function() { _animate: function() {
Expand Down Expand Up @@ -86,11 +99,6 @@ $.widget("ui.progressbar", {
); );
}, },


_propagate: function(n, event) {
$.ui.plugin.call(this, n, [event, this.ui()]);
this.element.triggerHandler(n == "progressbar" ? n : ["progressbar", n].join(""), [event, this.ui()], this.options[n]);
},

destroy: function() { destroy: function() {
this.stop(); this.stop();


Expand All @@ -117,13 +125,11 @@ $.widget("ui.progressbar", {
pause: function() { pause: function() {
if (this.disabled) return; if (this.disabled) return;
this.bar.stop(); this.bar.stop();
this._propagate('pause', this.ui()); this._trigger('pause', null, this.ui());
}, },


progress: function(percentState) { progress: function(percentState) {
if (this.bar.is('.ui-hidden')) { this.bar.removeClass('ui-hidden');
this.bar.removeClass('ui-hidden');
}


this.percentState = percentState > 100 ? 100 : percentState; this.percentState = percentState > 100 ? 100 : percentState;
this.pixelState = (this.percentState/100) * this.options.width; this.pixelState = (this.percentState/100) * this.options.width;
Expand All @@ -132,10 +138,10 @@ $.widget("ui.progressbar", {


var percent = Math.round(this.percentState); var percent = Math.round(this.percentState);
if (this.options.range && !this.options.text) { if (this.options.range && !this.options.text) {
this.textElement.html(percent + '%'); this.text(percent + '%');
} }
this.element.attr("aria-valuenow", percent); this.element.attr("aria-valuenow", percent);
this._propagate('progress', this.ui()); this._trigger('progress', null, this.ui());
}, },


start: function() { start: function() {
Expand Down Expand Up @@ -168,7 +174,7 @@ $.widget("ui.progressbar", {


this._animate(); this._animate();


this._propagate('start', this.ui()); this._trigger('start', null, this.ui());
return false; return false;
}, },


Expand All @@ -178,12 +184,11 @@ $.widget("ui.progressbar", {
this.textElement.width(0); this.textElement.width(0);
this.bar.addClass('ui-hidden'); this.bar.addClass('ui-hidden');
this.options.interval = this._interval; this.options.interval = this._interval;
this._propagate('stop', this.ui()); this._trigger('stop', null, this.ui());
}, },


text: function(text){ text: function(text){
this.textElement.html(text); this.textElement.add(this.textBg).html(text);
this.textBg.html(text);
}, },


ui: function(event) { ui: function(event) {
Expand All @@ -195,21 +200,22 @@ $.widget("ui.progressbar", {
pixelState: this.pixelState, pixelState: this.pixelState,
percentState: this.percentState percentState: this.percentState
}; };
}
});

$.extend($.ui.progressbar, {
version: "@VERSION",
defaults: {
width: 300,
duration: 1000,
interval: 1000,
increment: 1,
range: true,
text: '',
textClass: ''
}, },


plugins: {} uuid: 0
}); });


$.ui.progressbar.version = "@VERSION";
$.ui.progressbar.defaults = {
width: 300,
duration: 1000,
interval: 1000,
increment: 1,
range: true,
text: '',
addClass: '',
textClass: ''
};

})(jQuery); })(jQuery);

0 comments on commit 11a81ac

Please sign in to comment.