From c654cd6ac56586daf7871104b42fad5e181cb125 Mon Sep 17 00:00:00 2001 From: Eduardo Lundgren Date: Sat, 9 Aug 2008 23:06:18 +0000 Subject: Progressbar updates - using .animate() --- tests/visual/progressbar.html | 102 +++++++++++++++-------- ui/ui.progressbar.js | 183 ++++++++++++++++++------------------------ 2 files changed, 145 insertions(+), 140 deletions(-) diff --git a/tests/visual/progressbar.html b/tests/visual/progressbar.html index 14769f830..59ddbd403 100644 --- a/tests/visual/progressbar.html +++ b/tests/visual/progressbar.html @@ -89,7 +89,9 @@ body border-top:1px solid #BEBEBE; height:15px; } - +.bold { + color: red !important; +} .ui-hidden { left:-10000px; position:absolute; @@ -167,24 +169,27 @@ $(function() { //align: 'right', - wait: 'loop', + width: 500, - duration: 1000, + duration: 5000, - stepping: 10, + interval: 500, - progress: function(range, ui) { + increment: 300, + + progress: function(ui) { //console.log(ui.pixelRange); - //console.log(range); + //console.log(ui); //ui.instance.text('Waiting...'); }, - stop: function(s, ui) { - //console.log('stop:' + ui.instance.inprogress); + stop: function(ui) { + //console.log('user stop', ui); }, - start: function() { - console.log('user start'); + start: function(ui) { + //console.log('user start', ui); + console.log('p1', ui.identifier); } }); @@ -196,25 +201,35 @@ $(function() { $('#p2').progressbar({ - range: true, + text: 'Testing...', + + //addClass: 'ui-progressbar-inner-custom teste', + + //textClass: 'right-align', - wait: 2000, + //align: 'right', - duration:2000, + width: 500, - stepping: 5, + duration: 5000, - progress: function(range, ui) { + interval: 2000, + + increment: 50, + + progress: function(ui) { //console.log(ui.pixelRange); - //console.log(range); + //console.log(ui); + //ui.instance.text('Waiting...'); }, - stop: function(s, ui) { - //console.log('stop:' + ui.instance.inprogress); + stop: function(ui) { + //console.log('user stop', ui); }, - start: function() { - //console.log('user start'); + start: function(ui) { + //console.log('user start', ui); + console.log('p2', ui.identifier); } }); @@ -222,24 +237,43 @@ $(function() { }).trigger("click"); - $('#p3-create').click(function() { $('#p3').progressbar({ + $('#p3-create').click(function() { - duration: 2000, + $('#p3').progressbar({ - stepping: 30, + //text: 'Testing again...', - stop: function(s, ui) { - console.log('stop:' + ui.instance.inProgress); - }, - progress: function(range, ui) { - //console.log(ui.pixelRange); - //console.log(range); - }, - start: function() { - console.log('user start'); - } - }); }).trigger('click'); + //addClass: 'ui-progressbar-inner-custom teste', + //textClass: 'right-align', + + //align: 'right', + + width: 700, + + duration: 5000, + + interval: 3000, + + increment: 10, + + progress: function(ui) { + //console.log(ui.pixelRange); + //console.log(ui); + //ui.instance.text('Waiting...'); + }, + + stop: function(ui) { + //console.log('user stop', ui); + }, + + start: function(ui) { + //console.log('user start', ui); + console.log('p3', ui.identifier); + } + + }); + }).trigger('click'); }); if(!window.console) { diff --git a/ui/ui.progressbar.js b/ui/ui.progressbar.js index b9cd4458e..c594ded12 100644 --- a/ui/ui.progressbar.js +++ b/ui/ui.progressbar.js @@ -1,7 +1,7 @@ /* * jQuery UI ProgressBar * - * Copyright (c) 2008 Eduardo Lundgren (braeker) + * Copyright (c) 2008 Eduardo Lundgren * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. * @@ -15,19 +15,22 @@ $.widget("ui.progressbar", { init: function() { - var self = this, o = this.options, text = o.text ? o.text : (o.range ? '0%' : '');; - this.element.addClass("ui-progressbar"); - - $.extend(o, { - stepping: o.stepping > 100 ? 100 : o.stepping + $.extend(this.options, { + _interval: this.options.interval }); - $.extend(this, { - _step: 0, - rangeValue: 0, - threads: {}, + var self = this, + options = this.options, + id = (new Date()).getTime()+Math.random(), + text = options.text || '0%'; - wrapper: $('
'), + this.element.addClass("ui-progressbar").width(options.width); + + $.extend(this, { + active: false, + pixelState: 0, + percentState: 0, + identifier: id, bar: $('
').css({ width: '0px', overflow: 'hidden', zIndex: 100 }), @@ -35,13 +38,13 @@ $.widget("ui.progressbar", { width: '0px', overflow: 'hidden' }), textBg: $('
').html(text).css({ - width: this.element.css('width') - }) - + width: this.element.width() + }), + wrapper: $('
') }); this.wrapper - .append(this.bar.append(this.textElement), this.textBg) + .append(this.bar.append(this.textElement.addClass(options.textClass)), this.textBg) .appendTo(this.element); }, @@ -50,10 +53,12 @@ $.widget("ui.progressbar", { ui: function(e) { return { instance: this, + identifier: this.identifier, options: this.options, - step: this._step, - rangeValue: this.rangeValue, - pixelRange: this.pixelRange + element: this.bar, + textElement: this.textElement, + pixelState: this.pixelState, + percentState: this.percentState }; }, propagate: function(n,e) { @@ -67,127 +72,93 @@ $.widget("ui.progressbar", { .removeClass("ui-progressbar ui-progressbar-disabled") .removeData("progressbar").unbind(".progressbar") .find('.ui-progressbar-wrap').remove(); + + delete jQuery.easing[this.identifier]; }, enable: function() { this.element.removeClass("ui-progressbar-disabled"); this.disabled = false; - if(this.inProgress) this.start(); }, disable: function() { this.element.addClass("ui-progressbar-disabled"); this.disabled = true; - this.clearThreads(); }, start: function() { + if (this.disabled) return; - if (this.disabled) return false; - this.inProgress = true; - - var self = this, o = this.options, el = this.element; - this.clearThreads(); + var self = this, options = this.options; - if (typeof o.wait == 'number' && !self.waitThread) - self.waitThread = setTimeout(function() { - clearInterval(self.waitThread); - self.waitThread = null; - }, o.wait); - - var frames = Math.ceil(100/o.stepping) || 0, ms = o.duration/frames || 0, - - render = function(step, t) { - //clearInterval(t); - - self.progress(o.stepping * step); - // on end - if (step >= frames) { - self.stop(); + jQuery.easing[this.identifier] = function (x, t, b, c, d) { + var inc = options.increment, + width = options.width, + step = ((inc > width ? width : inc)/width), + state = Math.round(x/step)*step; + return state > 1 ? 1 : state; + }; - if (self.waitThread || o.wait == 'loop') { - self._step = 0; - self.start(); + this.bar.animate( + { + width: options.width + }, + { + duration: options.interval, + easing: this.identifier, + step: function(step, b) { + var elapsedTime = ((new Date().getTime()) - b.startTime); + options.interval = options._interval - elapsedTime; + self.progress((step/options.width)*100); + }, + complete: function() { + delete jQuery.easing[self.identifier]; + self.stop(); } } - }; - var from = this._step, _step = (this._step - (from - 1)); - - /*for(var step = from; step <= frames; step++) { - var interval = (step - (from - 1)) * ms; - this.threads[step] = setTimeout(render(step, this.threads[step]), interval); - }*/ + ); - this.threads[0] = setInterval(function() { - render(_step++); - }, ms); - - this.propagate('start'); + this.propagate('start', this.ui()); return false; }, - clearThreads: function() { - $.each(this.threads, function(s, t) { clearInterval(t); }); - this.threads = {}; - }, stop: function() { - - if (this.disabled) return false; - var o = this.options, self = this; - - this.clearThreads(); - this.propagate('stop'); - - this.inProgress = false; + if (this.disabled) return; + this.bar.stop(); + this.propagate('stop', this.ui()); return false; }, reset: function() { - - if (this.disabled) return false; - this._step = 0; - this.rangeValue = 0; - this.inProgress = false; - this.clearThreads(); - this.progress(0); + this.bar.stop(); + this.bar.width(0); + this.textElement.width(0); this.bar.addClass('ui-hidden'); + this.options.interval = this.options._interval; return false; - }, - progress: function(range) { - - var o = this.options, el = this.element, bar = this.bar; - if (this.disabled) return false; - - range = parseInt(range, 10); - this.rangeValue = this._fixRange(range); - this.pixelRange = Math.round( ((this.rangeValue/100)||0) * (el.innerWidth() - (el.outerWidth() - el.innerWidth()) - (bar.outerWidth() - bar.innerWidth())) ); - - this.bar.removeClass('ui-hidden'); - - var css = { width: this.pixelRange + 'px' }; - this.bar.css(css); - this.textElement.css(css); - - if (!o.text && o.range) this.text(this.rangeValue + '%'); - this.propagate('progress', this.rangeValue); - return false; - }, - text: function(text) { - this.textElement.html(text); - }, - _fixRange: function(range) { - var o = this.options; - this._step = Math.ceil(range/o.stepping); - this.rangeValue = Math.round(o.stepping * this._step); - this.rangeValue = (this.rangeValue) >= 100 ? 100 : this.rangeValue; - return this.rangeValue; + progress: function(percentState) { + if (this.bar.is('.ui-hidden')) { + this.bar.removeClass('ui-hidden'); + } + + this.percentState = percentState > 100 ? 100 : percentState; + this.pixelState = (this.percentState/100)*this.options.width; + this.bar.width(this.pixelState); + this.textElement.width(this.pixelState); + + if (this.options.range && !this.options.text) { + this.textElement.html(Math.round(this.percentState) + '%'); + } + this.propagate('progress', this.ui()); } }); $.ui.progressbar.defaults = { - addClass: '', + width: 300, duration: 3000, + interval: 200, + increment: 1, range: true, - stepping: 1, text: '', + addClass: '', textClass: '' }; -})(jQuery); +})(jQuery); \ No newline at end of file -- cgit v1.2.3