Browse Source

Proper rewrite of progress to support rapid updates

api-progress
Jack Lukic 8 years ago
parent
commit
95e2172a5f
2 changed files with 98 additions and 36 deletions
  1. 30
      RELEASE-NOTES.md
  2. 104
      src/definitions/modules/progress.js

30
RELEASE-NOTES.md

@ -3,6 +3,7 @@
### Version 2.1.9 - Feb 15, 2016
**Major Enhancements**
- **Progress** - Progress now uses a polling interval for updates. Rapidly updating the progress bar over a period quicker than the animation duration (for example with xhr `onprogress` events say every 50ms) will now appear smooth as butter.
- **Modules** - Added new setting `silent` to all modules which allows you to disable **all** console output including errors. This can be useful for preventing known errors, like a popup which cannot place itself on screen, or `sticky` content which initializes before it is visible #3713
- **Dropdown** - All dropdowns, not just `selection dropdown`, will now select the first `menu item` that starts with a pressed keyboard key, for example "N" will select "New"
- **Build Tools** - Added new `autoInstall` option to allow for Semantic to be installed without user interaction. See [docs explanation](http://www.semantic-ui.com/introduction/advanced-usage.html#Auto-Install) for how to use. #3616 **Thanks @algorithme**
@ -26,27 +27,28 @@
- **List** - Fixed issue where divided lists had unnecessary padding on first and last items, in both horizontal and vertical layouts #3710
- **List** - Fixed issue where bullets would be affected by font weight #3715
- **Rating** - Fixed issue where rating would not fire `onRate` when rating is initialized #3712
-**Table** - Fixed issue where `striped selectable` table would not correctly show hover color on striped rows
-**Segment/Message** - Fixed issue where `top attached message` would have no border when attached to `segment` #3619
-**Popup** - Fixed issue where checking `instanceof SVGGraphicsElement` caused error in IE11 #3043
-**Button** - Fixes issue where `right icon` like `right arrow icon` would have additional margin inside an `icon button` #3525
- **Table** - Fixed issue where `striped selectable` table would not correctly show hover color on striped rows
- **Segment/Message** - Fixed issue where `top attached message` would have no border when attached to `segment` #3619
- **Popup** - Fixed issue where checking `instanceof SVGGraphicsElement` caused error in IE11 #3043
- **Button** - Fixes issue where `right icon` like `right arrow icon` would have additional margin inside an `icon button` #3525
**Grid** - Fixed issue where `centered` content would cause `justified` content to appear aligned left. #3496
**Enhancements**
-**Dropdown** - Using API with dropdown will now
-**Rating** - Added new setting `fireOnInit` for rating, which defaults to `false`. When set to true `onRate` will fire when rating is initialized #3712
-**Site** `@px` and `@relativepx` i.e. `@relative12px` which can be used to return EM value of pixels are now extended to `@relative40px`
-**Tabs** - Added option `deactivate`, defaults to `siblings` which will only deactivate tab activators that are DOM siblings elements to the activating element. Setting it to <code>'all'</code> will deactivate any other tab element initialized at the same time.
-**Table** - `definition table` now supports `ignored` variation to force a `first-child` to ignore its default definition stylings
-**Table-- `definition table` now supports `definition` variation to specify definition styles on an element that is not `:first-child`
- **Dropdown** - Using API with dropdown will now
- **Rating** - Added new setting `fireOnInit` for rating, which defaults to `false`. When set to true `onRate` will fire when rating is initialized #3712
- **Site** `@px` and `@relativepx` i.e. `@relative12px` which can be used to return EM value of pixels are now extended to `@relative40px`
- **Tabs** - Added option `deactivate`, defaults to `siblings` which will only deactivate tab activators that are DOM siblings elements to the activating element. Setting it to <code>'all'</code> will deactivate any other tab element initialized at the same time.
- **Progress* - Added `onLabelUpdate` callback, this can be used to specify the exact text that should appear on the actual progress update, perhaps based on some external conditions
- **Table** - `definition table` now supports `ignored` variation to force a `first-child` to ignore its default definition stylings
- **Table-- `definition table` now supports `definition` variation to specify definition styles on an element that is not `:first-child`
-**Table** - Added more granular variables for controlling style on first column in a `definition table`
**Docs**
-**Form** - Added example of using custom rules with form
-**Build Tools** - Added explanation of using SUI with CI, and auto-install in "recipes" section.
-**Build Tools** - Added explanation of how to build RTL in "recipes" section
-**Layouts** - Added "attached" example showing content attached to other content
- **Form** - Added example of using custom rules with form
- **Build Tools** - Added explanation of using SUI with CI, and auto-install in "recipes" section.
- **Build Tools** - Added explanation of how to build RTL in "recipes" section
- **Layouts** - Added "attached" example showing content attached to other content
### Version 2.1.8 - Jan 7, 2016

104
src/definitions/modules/progress.js

@ -93,6 +93,7 @@ $.fn.progress = function(parameters) {
},
complete: function() {
module.remove.progressPoll();
if(module.percent === undefined || module.percent < 100) {
module.set.percent(100);
}
@ -199,6 +200,9 @@ $.fn.progress = function(parameters) {
},
has: {
progressPoll: function() {
return module.progressPoll;
},
total: function() {
return (module.get.total() !== false);
}
@ -223,10 +227,16 @@ $.fn.progress = function(parameters) {
.replace('{left}', left)
.replace('{percent}', percent)
;
module.debug('Adding variables to progress bar text', templateText);
module.verbose('Adding variables to progress bar text', templateText);
return templateText;
},
updateInterval: function() {
if(settings.updateInterval == 'auto') {
return settings.duration;
}
return settings.updateInterval;
},
randomValue: function() {
module.debug('Generating random increment percentage');
@ -287,6 +297,15 @@ $.fn.progress = function(parameters) {
}
},
create: {
progressPoll: function() {
module.progressPoll = setTimeout(function() {
module.update.toNextValue();
module.remove.progressPoll();
}, module.get.updateInterval());
},
},
is: {
success: function() {
return $module.hasClass(className.success);
@ -306,6 +325,14 @@ $.fn.progress = function(parameters) {
},
remove: {
progressPoll: function() {
module.verbose('Removing progress poll timer');
delete module.progressPoll;
},
nextValue: function() {
module.verbose('Removing progress value stored for next update');
delete module.nextValue;
},
state: function() {
module.verbose('Removing stored state');
delete module.total;
@ -414,7 +441,8 @@ $.fn.progress = function(parameters) {
text = text || '';
if(text) {
text = module.get.text(text);
module.debug('Setting label to text', text);
module.verbose('Setting label to text', text);
text = settings.onLabelUpdate(text, module.value, module.total);
$label.text(text);
}
},
@ -447,11 +475,11 @@ $.fn.progress = function(parameters) {
$progress.text( module.get.text(text) );
}
else if(settings.label == 'ratio' && module.total) {
module.debug('Adding ratio to bar label');
module.verbose('Adding ratio to bar label');
$progress.text( module.get.text(settings.text.ratio) );
}
else if(settings.label == 'percent') {
module.debug('Adding percentage to bar label');
module.verbose('Adding percentage to bar label');
$progress.text( module.get.text(settings.text.percent) );
}
},
@ -517,14 +545,42 @@ $.fn.progress = function(parameters) {
value: function(value) {
module.value = value;
},
progress: function(value) {
if(!module.has.progressPoll()) {
module.debug('First update in progress update interval, immediately updating', value);
module.update.progress(value);
module.create.progressPoll();
}
else {
module.debug('Updated within interval, setting next update to use new value', value);
module.set.nextValue(value);
}
},
nextValue: function(value) {
module.nextValue = value;
}
},
update: {
toNextValue: function() {
let
nextValue = module.nextValue
;
if(nextValue) {
module.debug('Update interval complete using last updated value', nextValue);
module.update.progress(nextValue);
module.remove.nextValue();
}
},
progress: function(value) {
var
numericValue = module.get.numericValue(value),
numericValue = module.get.numericValue(value),
percentComplete
;
if(numericValue === false) {
module.error(error.nonNumeric, value);
}
console.log(value, module.get.total());
if( module.has.total() ) {
module.set.value(numericValue);
percentComplete = (numericValue / module.total) * 100;
@ -723,7 +779,6 @@ $.fn.progress.settings = {
name : 'Progress',
namespace : 'progress',
silent : false,
debug : false,
verbose : false,
performance : true,
@ -733,25 +788,30 @@ $.fn.progress.settings = {
max : 5
},
duration : 300,
duration : 300,
autoSuccess : true,
showActivity : true,
limitValues : true,
updateInterval : 'auto',
label : 'percent',
precision : 0,
framerate : (1000 / 30), /// 30 fps
autoSuccess : true,
showActivity : true,
limitValues : true,
percent : false,
total : false,
value : false,
label : 'percent',
precision : 0,
framerate : (1000 / 30), /// 30 fps
onChange : function(percent, value, total){},
onSuccess : function(total){},
onActive : function(value, total){},
onError : function(value, total){},
onWarning : function(value, total){},
percent : false,
total : false,
value : false,
onLabelUpdate : function(text, value, total){
return text;
},
onChange : function(percent, value, total){},
onSuccess : function(total){},
onActive : function(value, total){},
onError : function(value, total){},
onWarning : function(value, total){},
error : {
method : 'The method you called is not defined.',
@ -795,4 +855,4 @@ $.fn.progress.settings = {
};
})( jQuery, window, document );
})( jQuery, window, document );
Loading…
Cancel
Save