From 4bd15b837a6b29927990fe44a30bf1a3c71bcbfc Mon Sep 17 00:00:00 2001 From: Daniel Hahler Date: Sun, 30 Mar 2014 21:36:49 +0200 Subject: [PATCH] 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 --- doc/pages/components/orbit.html | 1 + js/foundation/foundation.orbit.js | 23 +++++++++++++++-------- scss/foundation/components/_orbit.scss | 2 ++ 3 files changed, 18 insertions(+), 8 deletions(-) diff --git a/doc/pages/components/orbit.html b/doc/pages/components/orbit.html index 8086c2f90..1ff02ec12 100644 --- 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 07dbc921d..26bfe811a 100644 --- a/js/foundation/foundation.orbit.js +++ b/js/foundation/foundation.orbit.js @@ -63,7 +63,9 @@ if (settings.timer) { timer_container = $('
').addClass(settings.timer_container_class); timer_container.append(''); - timer_container.append($('
').addClass(settings.timer_progress_class)); + if (settings.timer_show_progress_bar) { + timer_container.append($('
').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 f01831c13..6b2c2eb37 100644 --- 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. } } -- 2.47.2