Convert Interchange to ES6 class

diff --git a/docs/layout/default.html b/docs/layout/default.html
index 9d4bf826f65efa68a7933cd5b9f88900e7c9a996..50a70ee2a9da9f9eb9aa460500b47bab44f5daab 100644 (file)
--- a/docs/layout/default.html
+++ b/docs/layout/default.html
@@ -25,7 +25,7 @@
           <h5>Foundation 6 is here!</h5>
         </div>
       </a> -->
-        
+
       {{> navigation}}
       {{> mobile-navigation}}
 

diff --git a/js/foundation.interchange.js b/js/foundation.interchange.js
index e37af8bfc2b37d96a369eb6d4b16d3648e64bc2e..7e6c9b670cf92bbe7bbe100c1f98b82a7b682b92 100644 (file)
--- a/js/foundation.interchange.js
+++ b/js/foundation.interchange.js
@@ -1,12 +1,13 @@
+'use strict';
+
 /**
  * Interchange module.
  * @module foundation.interchange
  * @requires foundation.util.mediaQuery
  * @requires foundation.util.timerAndImageLoader
  */
-!function(Foundation, $) {
-  'use strict';
 
+export default class Interchange {
   /**
    * Creates a new instance of Interchange.
    * @class
@@ -14,7 +15,7 @@
    * @param {Object} element - jQuery object to add the trigger to.
    * @param {Object} options - Overrides to the default plugin settings.
    */
-  function Interchange(element, options) {
+  constructor(element, options) {
     this.$element = element;
     this.options = $.extend({}, Interchange.defaults, options);
     this.rules = [];
@@ -26,49 +27,32 @@
     Foundation.registerPlugin(this, 'Interchange');
   }
 
-  /**
-   * Default settings for plugin
-   */
-  Interchange.defaults = {
-    /**
-     * Rules to be applied to Interchange elements. Set with the `data-interchange` array notation.
-     * @option
-     */
-    rules: null
-  };
-
-  Interchange.SPECIAL_QUERIES = {
-    'landscape': 'screen and (orientation: landscape)',
-    'portrait': 'screen and (orientation: portrait)',
-    'retina': 'only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)'
-  };
-
   /**
    * Initializes the Interchange plugin and calls functions to get interchange functioning on load.
    * @function
    * @private
    */
-  Interchange.prototype._init = function() {
+  _init() {
     this._addBreakpoints();
     this._generateRules();
     this._reflow();
-  };
+  }
 
   /**
    * Initializes events for Interchange.
    * @function
    * @private
    */
-  Interchange.prototype._events = function() {
+  _events() {
     $(window).on('resize.zf.interchange', Foundation.util.throttle(this._reflow.bind(this), 50));
-  };
+  }
 
   /**
    * Calls necessary functions to update Interchange upon DOM change
    * @function
    * @private
    */
-  Interchange.prototype._reflow = function() {
+  _reflow() {
     var match;
 
     // Iterate through each rule, but only save the last match
@@ -83,19 +67,19 @@
     if (match) {
       this.replace(match.path);
     }
-  };
+  }
 
   /**
    * Gets the Foundation breakpoints and adds them to the Interchange.SPECIAL_QUERIES object.
    * @function
    * @private
    */
-  Interchange.prototype._addBreakpoints = function() {
+  _addBreakpoints() {
     for (var i in Foundation.MediaQuery.queries) {
       var query = Foundation.MediaQuery.queries[i];
       Interchange.SPECIAL_QUERIES[query.name] = query.value;
     }
-  };
+  }
 
   /**
    * Checks the Interchange element for the provided media query + content pairings
@@ -104,7 +88,7 @@
    * @param {Object} element - jQuery object that is an Interchange instance
    * @returns {Array} scenarios - Array of objects that have 'mq' and 'path' keys with corresponding keys
    */
-  Interchange.prototype._generateRules = function() {
+  _generateRules(element) {
     var rulesList = [];
     var rules;
 
@@ -131,7 +115,7 @@
     }
 
     this.rules = rulesList;
-  };
+  }
 
   /**
    * Update the `src` property of an image, or change the HTML of a container, to the specified path.
@@ -139,7 +123,7 @@
    * @param {String} path - Path to the image or HTML partial.
    * @fires Interchange#replaced
    */
-  Interchange.prototype.replace = function(path) {
+  replace(path) {
     if (this.currentPath === path) return;
 
     var _this = this,
@@ -172,22 +156,35 @@
      * @event Interchange#replaced
      */
     // this.$element.trigger('replaced.zf.interchange');
-  };
+  }
+
   /**
    * Destroys an instance of interchange.
    * @function
    */
-  Interchange.prototype.destroy = function(){
+  destroy() {
     //TODO this.
-  };
-  Foundation.plugin(Interchange, 'Interchange');
-
-  // Exports for AMD/Browserify
-  if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
-    module.exports = Interchange;
-  if (typeof define === 'function')
-    define(['foundation'], function() {
-      return Interchange;
-    });
-
-}(Foundation, jQuery);
+  }
+}
+
+/**
+ * Default settings for plugin
+ */
+Interchange.defaults = {
+  /**
+   * Rules to be applied to Interchange elements. Set with the `data-interchange` array notation.
+   * @option
+   */
+  rules: null
+};
+
+Interchange.SPECIAL_QUERIES = {
+  'landscape': 'screen and (orientation: landscape)',
+  'portrait': 'screen and (orientation: portrait)',
+  'retina': 'only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)'
+};
+
+// Window exports
+if (window.Foundation) {
+  window.Foundation.plugin(Interchange, 'Interchange');
+}