richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

#1309 Progress now continuously updates progress bar labels during animations at 30fps

pull/1550/head
jlukic 10 years ago
parent
400949ce41
commit
5099530e92
3 changed files with 129 additions and 28 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 133
      src/definitions/modules/progress.js
  2. 20
      src/definitions/modules/progress.less
  3. 4
      src/themes/default/modules/progress.variables

133
src/definitions/modules/progress.js
View File

@ -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,

20
src/definitions/modules/progress.less
View File

@ -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;
}

4
src/themes/default/modules/progress.variables
View File

@ -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

Write Preview
Loading…
Cancel
Save