Refactor timer and image loader into separate files

foundation · Apr 18, 2017 · 0730b7b · 0730b7b
1 parent e9704eb
commit 0730b7b
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 54 deletions.
diff --git a/customizer/config.yml b/customizer/config.yml
@@ -90,13 +90,12 @@ equalizer:
   js: equalizer
   js_utils:
     - mediaQuery
-    - timerAndImageLoader
+    - imageLoader
 
 interchange:
   js: interchange
   js_utils:
     - triggers
-    - timerAndImageLoader
 
 label:
   sass: label
@@ -124,7 +123,8 @@ orbit:
   js: orbit
   js_utils:
     - motion
-    - timerAndImageLoader
+    - timer
+    - imageLoader
     - keyboard
     - touch
 
@@ -196,7 +196,7 @@ tabs:
   js: tabs
   js_utils:
     - keyboard
-    - timerAndImageLoader
+    - imageLoader
 
 thumbnail:
   sass: thumbnail

diff --git a/docs/pages/javascript-utilities.md b/docs/pages/javascript-utilities.md
@@ -120,17 +120,19 @@ Foundation.Move(durationInMS, $element, function(){
 ```
 When the animation is complete, your jQuery element will fire `finished.zf.animate`.
 
-## Timer & Images Loaded
-`js/foundation.util.timerAndImageLoader.js`
+## Timer
+`js/foundation.util.timer.js`
 
-Both functions are used by [Orbit](orbit.html), and can be useful elsewhere as well.
 ```js
 
 var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);
 // includes: timer.start(), timer.pause(), timer.restart()
 ```
 Similar to `setInterval`, except you can pause and resume where you left off.
 
+## ImageLoader
+`js/foundation.util.imageLoader.js`
+
 ```js
 Foundation.onImagesLoaded($images, callback);
 ```

diff --git a/js/foundation.equalizer.js b/js/foundation.equalizer.js
@@ -2,15 +2,15 @@
 
 !function($) {
 
-  let MediaQuery     = Foundation.MediaQuery; // import MediaQuery from "foundation.util.mediaQuery.js";
-  let onImagesLoaded = Foundation.onImagesLoaded; // TODO9438: Separate out foundation.util.timerAndImageLoader
+  let MediaQuery     = Foundation.MediaQuery; // import MediaQuery from "foundation.util.mediaQuery";
+  let onImagesLoaded = Foundation.onImagesLoaded; // import onImagesLoaded from "foundation.util.imageLoader";
   let GetYoDigits    = Foundation.GetYoDigits; // figure out import after refactor;
 
 /**
  * Equalizer module.
  * @module foundation.equalizer
  * @requires foundation.util.mediaQuery
- * @requires foundation.util.timerAndImageLoader if equalizer contains images
+ * @requires foundation.util.imageLoader if equalizer contains images
  */
 
 class Equalizer {

diff --git a/js/foundation.orbit.js b/js/foundation.orbit.js
@@ -5,8 +5,8 @@
 
   let Keyboard       = Foundation.Keyboard; // import Keyboard from "foundation.util.keyboard";
   let Motion         = Foundation.Motion; // import { Motion } from "foundation.util.move"
-  let Timer          = Foundation.Timer; // Add import after refactoring to separate timer & image loader
-  let onImagesLoaded = Foundation.onImagesLoaded; // Add import after refactoring to separate timer & image loader
+  let Timer          = Foundation.Timer; // import Timer from "foundation.util.timer"
+  let onImagesLoaded = Foundation.onImagesLoaded; // import onImagesLoaded from "foundation.util.imageLoader"
   let GetYoDigits    = Foundation.GetYoDigits; // Add import after refactor
 
   // import "foundation.util.touch.js"
@@ -17,7 +17,8 @@
  * @module foundation.orbit
  * @requires foundation.util.keyboard
  * @requires foundation.util.motion
- * @requires foundation.util.timerAndImageLoader
+ * @requires foundation.util.timer
+ * @requires foundation.util.imageLoader
  * @requires foundation.util.touch
  */
 

diff --git a/js/foundation.tabs.js b/js/foundation.tabs.js
@@ -3,12 +3,12 @@
 !function($) {
 
   let Keyboard       = Foundation.Keyboard; // import Keyboard from "foundation.util.keyboard";
-  let onImagesLoaded = Foundation.onImagesLoaded; // add import after refactor TODO9438;
+  let onImagesLoaded = Foundation.onImagesLoaded; // import onImagesLoaded from "foundation.util.imageLoader";
 /**
  * Tabs module.
  * @module foundation.tabs
  * @requires foundation.util.keyboard
- * @requires foundation.util.timerAndImageLoader if tabs contain images
+ * @requires foundation.util.imageLoader if tabs contain images
  */
 
 class Tabs {

diff --git a/js/foundation.util.imageLoader.js b/js/foundation.util.imageLoader.js
@@ -0,0 +1,44 @@
+'use strict';
+
+!function($) {
+
+/**
+ * Runs a callback function when images are fully loaded.
+ * @param {Object} images - Image(s) to check if loaded.
+ * @param {Func} callback - Function to execute when image is fully loaded.
+ */
+function onImagesLoaded(images, callback){
+  var self = this,
+      unloaded = images.length;
+
+  if (unloaded === 0) {
+    callback();
+  }
+
+  images.each(function() {
+    // Check if image is loaded
+    if (this.complete || (this.readyState === 4) || (this.readyState === 'complete')) {
+      singleImageLoaded();
+    }
+    // Force load the image
+    else {
+      // fix for IE. See https://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/
+      var src = $(this).attr('src');
+      $(this).attr('src', src + (src.indexOf('?') >= 0 ? '&' : '?') + (new Date().getTime()));
+      $(this).one('load', function() {
+        singleImageLoaded();
+      });
+    }
+  });
+
+  function singleImageLoaded() {
+    unloaded--;
+    if (unloaded === 0) {
+      callback();
+    }
+  }
+}
+
+Foundation.onImagesLoaded = onImagesLoaded;
+
+}(jQuery);
diff --git a/js/foundation.util.timerAndImageLoader.js → js/foundation.util.timer.js b/js/foundation.util.timerAndImageLoader.js → js/foundation.util.timer.js
@@ -45,44 +45,6 @@ function Timer(elem, options, cb) {
   }
 }
 
-/**
- * Runs a callback function when images are fully loaded.
- * @param {Object} images - Image(s) to check if loaded.
- * @param {Func} callback - Function to execute when image is fully loaded.
- */
-function onImagesLoaded(images, callback){
-  var self = this,
-      unloaded = images.length;
-
-  if (unloaded === 0) {
-    callback();
-  }
-
-  images.each(function() {
-    // Check if image is loaded
-    if (this.complete || (this.readyState === 4) || (this.readyState === 'complete')) {
-      singleImageLoaded();
-    }
-    // Force load the image
-    else {
-      // fix for IE. See https://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/
-      var src = $(this).attr('src');
-      $(this).attr('src', src + (src.indexOf('?') >= 0 ? '&' : '?') + (new Date().getTime()));
-      $(this).one('load', function() {
-        singleImageLoaded();
-      });
-    }
-  });
-
-  function singleImageLoaded() {
-    unloaded--;
-    if (unloaded === 0) {
-      callback();
-    }
-  }
-}
-
 Foundation.Timer = Timer;
-Foundation.onImagesLoaded = onImagesLoaded;
 
 }(jQuery);
diff --git a/js/foundation.zf.responsiveAccordionTabs.js b/js/foundation.zf.responsiveAccordionTabs.js
@@ -8,7 +8,6 @@
 /**
  * ResponsiveAccordionTabs module.
  * @module foundation.responsiveAccordionTabs
- * @requires foundation.util.timerAndImageLoader
  * @requires foundation.util.motion
  * @requires foundation.accordion
  * @requires foundation.tabs