Orbit: skip expensive progress computation (if disabled)

This adds the timer_show_progress_bar data option/setting, which skips
creation of the progress element.
Additionally the $orbit-timer-show-progress-bar SASS setting will
generate `display:none` for .orbit-progress.

If the progress element is not visisble (`display:none`) or does not
exist, the progress handling gets skipped.

This avoids the quite expensive animations, which are not visible
anyway, and saves us a lot of CPU cycles.

Fixes https://github.com/zurb/foundation/issues/4283

diff --git a/doc/pages/components/orbit.html b/doc/pages/components/orbit.html
index 8086c2f90312bcb046059845d4f7612bfab6b7ef..1ff02ec12657d2dd15b1fa27e80fa90bf70d7f39 100644 (file)
--- a/doc/pages/components/orbit.html
+++ b/doc/pages/components/orbit.html
@@ -182,6 +182,7 @@ $(document).foundation({
       timer_container_class: 'orbit-timer', // Class name given to the timer
       timer_paused_class: 'paused', // Class name given to the paused button
       timer_progress_class: 'orbit-progress', // Class name given to the progress bar
+      timer_show_progress_bar: true, // If the progress bar should get shown (false skips computation)
       slides_container_class: 'orbit-slides-container', // Class name given to the 
       bullets_container_class: 'orbit-bullets',
       slide_selector: 'li', // Default is '*' which selects all children under the container

diff --git a/js/foundation/foundation.orbit.js b/js/foundation/foundation.orbit.js
index 07dbc921d34a133fd6a276be36a9db925eb01399..26bfe811ab3f4f10ac184833c180d7520eadbe8b 100644 (file)
--- a/js/foundation/foundation.orbit.js
+++ b/js/foundation/foundation.orbit.js
@@ -63,7 +63,9 @@
       if (settings.timer) {
         timer_container = $('<div>').addClass(settings.timer_container_class);
         timer_container.append('<span>');
-        timer_container.append($('<div>').addClass(settings.timer_progress_class));
+        if (settings.timer_show_progress_bar) {
+            timer_container.append($('<div>').addClass(settings.timer_progress_class));
+        }
         timer_container.addClass(settings.timer_paused_class);
         container.append(timer_container);
       }
@@ -380,6 +382,7 @@
     var self = this,
         duration = settings.timer_speed,
         progress = el.find('.'+settings.timer_progress_class),
+        do_progress = progress && progress.css('display') != 'none',
         start, 
         timeout,
         left = -1;
@@ -396,7 +399,7 @@
       clearTimeout(timeout);
       el.addClass(settings.timer_paused_class);
       left = -1;
-      self.update_progress(0);
+      if (do_progress) {self.update_progress(0);}
       self.start();
     };
 
@@ -404,8 +407,10 @@
       if (!el.hasClass(settings.timer_paused_class)) {return true;}
       left = (left === -1) ? duration : left;
       el.removeClass(settings.timer_paused_class);
-      start = new Date().getTime();
-      progress.animate({'width': '100%'}, left, 'linear');
+      if (do_progress) {
+          start = new Date().getTime();
+          progress.animate({'width': '100%'}, left, 'linear');
+      }
       timeout = setTimeout(function() {
         self.restart();
         callback();
@@ -417,10 +422,12 @@
       if (el.hasClass(settings.timer_paused_class)) {return true;}
       clearTimeout(timeout);
       el.addClass(settings.timer_paused_class);
-      var end = new Date().getTime();
-      left = left - (end - start);
-      var w = 100 - ((left / duration) * 100);
-      self.update_progress(w);
+      if (do_progress) {
+          var end = new Date().getTime();
+          left = left - (end - start);
+          var w = 100 - ((left / duration) * 100);
+          self.update_progress(w);
+      }
       el.trigger('timer-stopped.fndtn.orbit');
     };
   };

diff --git a/scss/foundation/components/_orbit.scss b/scss/foundation/components/_orbit.scss
index f01831c13b04fa94e65e720bac9073400c168dae..6b2c2eb3787f3d8023bb4f7d7d3c827564e37f38 100644 (file)
--- a/scss/foundation/components/_orbit.scss
+++ b/scss/foundation/components/_orbit.scss
@@ -230,6 +230,8 @@ $orbit-timer-hide-for-small: true !default;
             position: relative;
             right: 20px;
             top: 5px;
+          } @else {
+              display:none; // This is used by the Javascript to not create a handler.
           }
         }