Get the 'all' version of foundation working using webpack

diff --git a/gulp/tasks/javascript.js b/gulp/tasks/javascript.js
index f13c6134a7cd4c4cf568a83dc5f10c31f700c57f..36887f6e8647c30c2be60e50f15791afaf96b129 100644 (file)
--- a/gulp/tasks/javascript.js
+++ b/gulp/tasks/javascript.js
@@ -13,7 +13,7 @@ gulp.task('javascript', ['javascript:foundation', 'javascript:deps', 'javascript
 
 gulp.task('javascript:foundation', function() {
   return gulp.src('js/entries/all.js')
-    .pipe(webpackStream({/* options */}, webpack2))
+    .pipe(webpackStream({externals: {jquery: 'jQuery'}}, webpack2))
     .pipe(rename('foundation.js'))
     .pipe(gulp.dest('_build/assets/js'));
 });

diff --git a/js/entries/all.js b/js/entries/all.js
index cc9875176478ad6faf1db483a2affdcfd36ca2f5..873caa439d61a1cc86df599d18d4b9ceb3fc6454 100644 (file)
--- a/js/entries/all.js
+++ b/js/entries/all.js
@@ -1,6 +1,7 @@
 import $ from 'jquery';
 
 import Foundation from '../foundation.core';
+Foundation.addToJquery($);
 
 // Add Foundation Utils to Foundation global namespace for backwards
 // compatibility.
@@ -31,7 +32,7 @@ Foundation.Timer = Timer;
 // so no // need to add it to Foundation, just init them.
 
 import Touch from '../foundation.util.touch';
-Touch.init();
+Touch.init($);
 
 import Triggers from '../foundation.util.triggers';
 Triggers.init(Foundation, $);
@@ -60,9 +61,15 @@ Foundation.plugin(Equalizer, 'Equalizer');
 import Interchange from '../foundation.interchange';
 Foundation.plugin(Interchange, 'Interchange');
 
+import Magellan from '../foundation.magellan';
+Foundation.plugin(Magellan, 'Magellan');
+
 import OffCanvas from '../foundation.offcanvas';
 Foundation.plugin(OffCanvas, 'OffCanvas');
 
+import Orbit from '../foundation.orbit';
+Foundation.plugin(Orbit, 'Orbit');
+
 import ResponsiveMenu from '../foundation.responsiveMenu';
 Foundation.plugin(ResponsiveMenu, 'ResponsiveMenu');
 

diff --git a/js/foundation.core.js b/js/foundation.core.js
index 6b497667318cf6ee57b785ca40670021c0fc34cc..92866e9409536953c88f9815b61ef60c7ab02663 100644 (file)
--- a/js/foundation.core.js
+++ b/js/foundation.core.js
@@ -176,6 +176,52 @@ var Foundation = {
     });
   },
   getFnName: functionName,
+
+  addToJquery: function($) {
+    // TODO: consider not making this a jQuery function
+    // TODO: need way to reflow vs. re-initialize
+    /**
+     * The Foundation jQuery method.
+     * @param {String|Array} method - An action to perform on the current jQuery object.
+     */
+    var foundation = function(method) {
+      var type = typeof method,
+          $meta = $('meta.foundation-mq'),
+          $noJS = $('.no-js');
+
+      if(!$meta.length){
+        $('<meta class="foundation-mq">').appendTo(document.head);
+      }
+      if($noJS.length){
+        $noJS.removeClass('no-js');
+      }
+
+      if(type === 'undefined'){//needs to initialize the Foundation object, or an individual plugin.
+        Foundation.MediaQuery._init();
+        Foundation.reflow(this);
+      }else if(type === 'string'){//an individual method to invoke on a plugin or group of plugins
+        var args = Array.prototype.slice.call(arguments, 1);//collect all the arguments, if necessary
+        var plugClass = this.data('zfPlugin');//determine the class of plugin
+
+        if(plugClass !== undefined && plugClass[method] !== undefined){//make sure both the class and method exist
+          if(this.length === 1){//if there's only one, call it directly.
+              plugClass[method].apply(plugClass, args);
+          }else{
+            this.each(function(i, el){//otherwise loop through the jQuery collection and invoke the method on each
+              plugClass[method].apply($(el).data('zfPlugin'), args);
+            });
+          }
+        }else{//error for no class or no method
+          throw new ReferenceError("We're sorry, '" + method + "' is not an available method for " + (plugClass ? functionName(plugClass) : 'this element') + '.');
+        }
+      }else{//error for invalid argument type
+        throw new TypeError(`We're sorry, ${type} is not a valid parameter. You must use a string representing the method you wish to invoke.`);
+      }
+      return this;
+    };
+    $.fn.foundation = foundation;
+    return $;
+  }
 };
 
 Foundation.util = {
@@ -202,50 +248,7 @@ Foundation.util = {
   }
 };
 
-// TODO: consider not making this a jQuery function
-// TODO: need way to reflow vs. re-initialize
-/**
- * The Foundation jQuery method.
- * @param {String|Array} method - An action to perform on the current jQuery object.
- */
-var foundation = function(method) {
-  var type = typeof method,
-      $meta = $('meta.foundation-mq'),
-      $noJS = $('.no-js');
-
-  if(!$meta.length){
-    $('<meta class="foundation-mq">').appendTo(document.head);
-  }
-  if($noJS.length){
-    $noJS.removeClass('no-js');
-  }
-
-  if(type === 'undefined'){//needs to initialize the Foundation object, or an individual plugin.
-    Foundation.MediaQuery._init();
-    Foundation.reflow(this);
-  }else if(type === 'string'){//an individual method to invoke on a plugin or group of plugins
-    var args = Array.prototype.slice.call(arguments, 1);//collect all the arguments, if necessary
-    var plugClass = this.data('zfPlugin');//determine the class of plugin
-
-    if(plugClass !== undefined && plugClass[method] !== undefined){//make sure both the class and method exist
-      if(this.length === 1){//if there's only one, call it directly.
-          plugClass[method].apply(plugClass, args);
-      }else{
-        this.each(function(i, el){//otherwise loop through the jQuery collection and invoke the method on each
-          plugClass[method].apply($(el).data('zfPlugin'), args);
-        });
-      }
-    }else{//error for no class or no method
-      throw new ReferenceError("We're sorry, '" + method + "' is not an available method for " + (plugClass ? functionName(plugClass) : 'this element') + '.');
-    }
-  }else{//error for invalid argument type
-    throw new TypeError(`We're sorry, ${type} is not a valid parameter. You must use a string representing the method you wish to invoke.`);
-  }
-  return this;
-};
-
 window.Foundation = Foundation;
-$.fn.foundation = foundation;
 
 // Polyfill for requestAnimationFrame
 (function() {

diff --git a/js/foundation.dropdownMenu.js b/js/foundation.dropdownMenu.js
index ac98e72cfc378660a2330f8a40e48790bf2b941b..f05158f4b2e01bc91e4cf42f668bfe80ab25b57d 100644 (file)
--- a/js/foundation.dropdownMenu.js
+++ b/js/foundation.dropdownMenu.js
@@ -7,6 +7,8 @@ import Box from './foundation.util.box';
 import { rtl } from './foundation.util.core';
 import Plugin from './foundation.plugin';
 
+const Rtl = rtl;
+
 /**
  * DropdownMenu module.
  * @module foundation.dropdown-menu

diff --git a/js/foundation.magellan.js b/js/foundation.magellan.js
index 271cf5dd78841cd40d4420fa04a5285ec1b4ff55..03f9202db491b74cf27e285529a04e236a221ea5 100644 (file)
--- a/js/foundation.magellan.js
+++ b/js/foundation.magellan.js
@@ -247,5 +247,4 @@ Magellan.defaults = {
   offset: 0
 }
 
-// Window exports
-Foundation.plugin(Magellan, 'Magellan');
+export default Magellan;

diff --git a/js/foundation.orbit.js b/js/foundation.orbit.js
index 877e5b656f714cea07ff6dcfda1913095cb7044b..07b60bc410fdf6490dfa3fdb1b74977a1901ebb8 100644 (file)
--- a/js/foundation.orbit.js
+++ b/js/foundation.orbit.js
@@ -2,7 +2,7 @@
 
 import $ from 'jquery';
 import Keyboard from './foundation.util.keyboard';
-import { Motion } from './foundation.util.move';
+import { Motion } from './foundation.util.motion';
 import Timer from './foundation.util.timer';
 import onImagesLoaded from './foundation.util.imageLoader';
 import { GetYoDigits } from './foundation.util.core';

diff --git a/js/foundation.plugin.js b/js/foundation.plugin.js
index aae94b18e89312bb55892053c0192aa24f534500..dc6fc96beb630771ecc19df4ebfda18bf0cd4d75 100644 (file)
--- a/js/foundation.plugin.js
+++ b/js/foundation.plugin.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import $ from 'jquery';
+import { GetYoDigits } from './foundation.util.core';
 
 // Abstract class for providing lifecycle hooks. Expect plugins to define AT LEAST
 // {function} _setup (replaces previous constructor),
@@ -12,7 +13,7 @@ class Plugin {
     var pluginName = hyphenate(this.constructor.name);
     this.uuid = GetYoDigits(6, pluginName);
 
-    if(!this.$element.attr(`data-${pluginName}`)){ this.$element.attr(`data-${pluginName}`, plugin.uuid); }
+    if(!this.$element.attr(`data-${pluginName}`)){ this.$element.attr(`data-${pluginName}`, this.uuid); }
     if(!this.$element.data('zfPlugin')){ this.$element.data('zfPlugin', this); }
           /**
            * Fires when the plugin has initialized.
@@ -36,4 +37,10 @@ class Plugin {
   }
 }
 
+// Convert PascalCase to kebab-case
+// Thank you: http://stackoverflow.com/a/8955580
+function hyphenate(str) {
+  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
 export default Plugin;

diff --git a/js/foundation.util.triggers.js b/js/foundation.util.triggers.js
index 8706b88ac77cc2fd6edc178e65c595ef637078f9..02493d1f82a5616e80ac00234daeeebf44c4a382 100644 (file)
--- a/js/foundation.util.triggers.js
+++ b/js/foundation.util.triggers.js
@@ -150,7 +150,7 @@ Triggers.Initializers.addClosemeListener = function(pluginName) {
       return `closeme.zf.${name}`;
     }).join(' ');
 
-    $(window).off(listeners).on(listeners, Triggers.Global.closeMeListener);
+    $(window).off(listeners).on(listeners, Triggers.Listeners.Global.closeMeListener);
   }
 }