Proper rewrite of progress to support rapid updates

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
 

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 );