diff --git a/src/definitions/modules/progress.js b/src/definitions/modules/progress.js index 72f0a7684..52ee563f8 100644 --- a/src/definitions/modules/progress.js +++ b/src/definitions/modules/progress.js @@ -52,14 +52,21 @@ $.fn.progress = function(parameters) { element = this, instance = $module.data(moduleNamespace), + + animating = false, + transitionEnd, module ; module = { initialize: function() { - module.debug('Initializing progress', settings); + module.debug('Initializing progress bar', settings); + + transitionEnd = module.get.transitionEnd(); + module.read.metadata(); + module.set.duration(); module.set.initials(); module.instantiate(); }, @@ -71,9 +78,9 @@ $.fn.progress = function(parameters) { .data(moduleNamespace, module) ; }, - destroy: function() { module.verbose('Destroying previous progress for', $module); + clearInterval(instance.interval); module.remove.state(); $module.removeData(moduleNamespace); instance = undefined; @@ -174,9 +181,11 @@ $.fn.progress = function(parameters) { get: { text: function(templateText) { var - value = module.value || 0, - total = module.total || 0, - percent = module.percent || 0 + value = module.value || 0, + total = module.total || 0, + percent = (module.is.visible() && animating) + ? module.get.displayPercent() + : module.percent || 0 ; templateText = templateText || ''; templateText = templateText @@ -191,6 +200,41 @@ $.fn.progress = function(parameters) { module.debug('Generating random increment percentage'); return Math.floor((Math.random() * settings.random.max) + settings.random.min); }, + + transitionEnd: function() { + var + element = document.createElement('element'), + transitions = { + 'transition' :'transitionend', + 'OTransition' :'oTransitionEnd', + 'MozTransition' :'transitionend', + 'WebkitTransition' :'webkitTransitionEnd' + }, + transition + ; + for(transition in transitions){ + if( element.style[transition] !== undefined ){ + return transitions[transition]; + } + } + }, + + // gets current displayed percentage (if animating values this is the intermediary value) + displayPercent: function() { + var + barWidth = $bar.width(), + totalWidth = $module.width(), + minDisplay = parseInt($bar.css('min-width'), 10), + displayPercent = (barWidth > minDisplay) + ? (barWidth / totalWidth * 100) + : module.percent + ; + if(settings.precision === 0) { + return Math.round(displayPercent); + } + return Math.round(displayPercent * (10 * settings.precision) / (10 * settings.precision) ); + }, + percent: function() { return module.percent || 0; }, @@ -211,6 +255,12 @@ $.fn.progress = function(parameters) { }, error: function() { return $module.hasClass(className.error); + }, + active: function() { + return $module.hasClass(className.active); + }, + visible: function() { + return $module.is(':visible'); } }, @@ -256,8 +306,24 @@ $.fn.progress = function(parameters) { ; } }, + duration: function(duration) { + duration = duration || settings.duration; + duration = (typeof duration == 'number') + ? duration + 'ms' + : duration + ; + module.verbose('Setting progress bar transition duration', duration); + $bar + .css({ + '-webkit-transition-duration': duration, + '-moz-transition-duration': duration, + '-ms-transition-duration': duration, + '-o-transition-duration': duration, + 'transition-duration': duration + }) + ; + }, initials: function() { - if(settings.total !== false) { module.verbose('Current total set in settings', settings.total); module.total = settings.total; @@ -270,7 +336,6 @@ $.fn.progress = function(parameters) { module.verbose('Current percent set in settings', settings.percent); module.percent = settings.percent; } - if(module.percent !== undefined) { module.set.percent(module.percent); } @@ -307,27 +372,60 @@ $.fn.progress = function(parameters) { ; } module.set.barWidth(percent); + if( module.is.visible() ) { + module.set.labelInterval(); + } + module.set.labels(); + $.proxy(settings.onChange, element)(percent, module.value, module.total); + }, + labelInterval: function() { + clearInterval(module.interval); + $bar + .one(transitionEnd + eventNamespace, function() { + module.verbose('Bar finished animating, removing continuous label updates'); + clearInterval(module.interval); + animating = false; + module.set.labels(); + }) + ; + animating = true; + module.interval = setInterval(module.set.labels, settings.framerate); + }, + labels: function() { + module.verbose('Setting both bar progress and outer label text'); module.set.barLabel(); + module.set.state(); + }, + label: function(text) { + text = text || ''; + if(text) { + text = module.get.text(text); + module.debug('Setting label to text', text); + $label.text(text); + } + }, + state: function(percent) { + percent = (percent !== undefined) + ? percent + : module.percent + ; if(percent === 100) { if(settings.autoSuccess && !(module.is.warning() || module.is.error())) { module.set.success(); module.debug('Automatically triggering success at 100%'); } else { + module.verbose('Reached 100% removing active state'); module.remove.active(); } } else if(percent > 0) { + module.verbose('Adjusting active progress bar label', percent); module.set.active(); } - $.proxy(settings.onChange, element)(percent, module.value, module.total); - }, - label: function(text) { - text = text || ''; - if(text) { - text = module.get.text(text); - module.debug('Setting label to text', text); - $label.text(text); + else { + module.remove.active(); + module.set.label(settings.text.active); } }, barLabel: function(text) { @@ -346,7 +444,7 @@ $.fn.progress = function(parameters) { active: function(text) { text = text || settings.text.active; module.debug('Setting active state'); - if(settings.showActivity) { + if(settings.showActivity && !module.is.active() ) { $module.addClass(className.active); } module.remove.warning(); @@ -616,12 +714,15 @@ $.fn.progress.settings = { max : 5 }, + duration : 300, + autoSuccess : true, showActivity : true, limitValues : true, label : 'percent', precision : 1, + framerate : (1000 / 30), /// 30 fps percent : false, total : false, diff --git a/src/definitions/modules/progress.less b/src/definitions/modules/progress.less index 53ccc5d0e..b66142454 100755 --- a/src/definitions/modules/progress.less +++ b/src/definitions/modules/progress.less @@ -43,26 +43,26 @@ } /* Indicating */ -.ui.indicating.progress .bar[style^="width: 1"], -.ui.indicating.progress .bar[style^="width: 2"] { +.ui.indicating.progress .bar[style*="width: 1"], +.ui.indicating.progress .bar[style*="width: 2"] { background-color: @indicatingFirstColor; } -.ui.indicating.progress .bar[style^="width: 3"] { +.ui.indicating.progress .bar[style*="width: 3"] { background-color: @indicatingSecondColor; } -.ui.indicating.progress .bar[style^="width: 4"], -.ui.indicating.progress .bar[style^="width: 5"] { +.ui.indicating.progress .bar[style*="width: 4"], +.ui.indicating.progress .bar[style*="width: 5"] { background-color: @indicatingThirdColor; } -.ui.indicating.progress .bar[style^="width: 6"] { +.ui.indicating.progress .bar[style*="width: 6"] { background-color: @indicatingFourthColor; } -.ui.indicating.progress .bar[style^="width: 7"], -.ui.indicating.progress .bar[style^="width: 8"] { +.ui.indicating.progress .bar[style*="width: 7"], +.ui.indicating.progress .bar[style*="width: 8"] { background-color: @indicatingFifthColor; } -.ui.indicating.progress .bar[style^="width: 9"], -.ui.indicating.progress .bar[style^="width: 100"] { +.ui.indicating.progress .bar[style*="width: 9"], +.ui.indicating.progress .bar[style*="width: 100"] { background-color: @indicatingSixthColor; } diff --git a/src/themes/default/modules/progress.variables b/src/themes/default/modules/progress.variables index ddb39d205..53043873d 100644 --- a/src/themes/default/modules/progress.variables +++ b/src/themes/default/modules/progress.variables @@ -22,8 +22,8 @@ @barHeight: 1.75em; @barBackground: #888888; @barBorderRadius: @borderRadius; -@barTransitionEasing: linear; -@barTransitionDuration: 0.2s; +@barTransitionEasing: ease; +@barTransitionDuration: 0.3s; @barTransition: width @barTransitionDuration @barTransitionEasing, background-color @barTransitionDuration @barTransitionEasing