Convert util.keyboard to ES6

diff --git a/gulp/javascript.js b/gulp/javascript.js
index 1d330278fda3d1d33d95106ae0742ddfccb44706..caa15b383fb9d1549a087300fb6c3eaa7b40d72d 100644 (file)
--- a/gulp/javascript.js
+++ b/gulp/javascript.js
@@ -26,7 +26,10 @@ gulp.task('javascript', ['javascript:foundation', 'javascript:deps', 'javascript
 
 gulp.task('javascript:foundation', function() {
   return gulp.src(FOUNDATION)
-    .pipe(babel())
+    .pipe(babel()
+      .on('error', function(err) {
+        console.log(err);
+      }))
     .pipe(concat('foundation.js'))
     .pipe(gulp.dest('_build/assets/js'));
 });

diff --git a/js/foundation.util.keyboard.js b/js/foundation.util.keyboard.js
index 63507ee8b7460e67b2f31c0665086fed9f3a32f6..82e1e8db0139c6546385a4e1ea30ae8073dbbf2b 100644 (file)
--- a/js/foundation.util.keyboard.js
+++ b/js/foundation.util.keyboard.js
@@ -5,32 +5,24 @@
  * or the web http://www.mariusolbertz.de/ *
  *                                         *
  ******************************************/
-!function($, Foundation){
-  'use strict';
-  Foundation.Keyboard = {};
 
-  var keyCodes = {
-    9: 'TAB',
-    13: 'ENTER',
-    27: 'ESCAPE',
-    32: 'SPACE',
-    37: 'ARROW_LEFT',
-    38: 'ARROW_UP',
-    39: 'ARROW_RIGHT',
-    40: 'ARROW_DOWN'
-  };
+'use strict';
 
-  /*
-   * Constants for easier comparing.
-   * Can be used like Foundation.parseKey(event) === Foundation.keys.SPACE
-   */
-  var keys = (function(kcs) {
-    var k = {};
-    for (var kc in kcs) k[kcs[kc]] = kcs[kc];
-    return k;
-  })(keyCodes);
+const keyCodes = {
+  9: 'TAB',
+  13: 'ENTER',
+  27: 'ESCAPE',
+  32: 'SPACE',
+  37: 'ARROW_LEFT',
+  38: 'ARROW_UP',
+  39: 'ARROW_RIGHT',
+  40: 'ARROW_DOWN'
+}
+
+var commands = {}
 
-  Foundation.Keyboard.keys = keys;
+var Keyboard = {
+  keys: getKeyCodes(keyCodes),
 
   /**
    * Parses the (keyboard) event and returns a String that represents its key
@@ -38,18 +30,13 @@
    * @param {Event} event - the event generated by the event handler
    * @return String key - String that represents the key pressed
    */
-  var parseKey = function(event) {
+  parseKey(event) {
     var key = keyCodes[event.which || event.keyCode] || String.fromCharCode(event.which).toUpperCase();
     if (event.shiftKey) key = `SHIFT_${key}`;
     if (event.ctrlKey) key = `CTRL_${key}`;
     if (event.altKey) key = `ALT_${key}`;
     return key;
-  };
-  Foundation.Keyboard.parseKey = parseKey;
-
-
-  // plain commands per component go here, ltr and rtl are merged based on orientation
-  var commands = {};
+  },
 
   /**
    * Handles the given (keyboard) event
@@ -57,12 +44,13 @@
    * @param {String} component - Foundation component's name, e.g. Slider or Reveal
    * @param {Objects} functions - collection of functions that are to be executed
    */
-  var handleKey = function(event, component, functions) {
+  handleKey(event, component, functions) {
     var commandList = commands[component],
-      keyCode = parseKey(event),
+      keyCode = this.parseKey(event),
       cmds,
       command,
       fn;
+
     if (!commandList) return console.warn('Component not defined!');
 
     if (typeof commandList.ltr === 'undefined') { // this component does not differentiate between ltr and rtl
@@ -74,33 +62,30 @@
     }
     command = cmds[keyCode];
 
-
     fn = functions[command];
     if (fn && typeof fn === 'function') { // execute function  if exists
-        fn.apply();
-        if (functions.handled || typeof functions.handled === 'function') { // execute function when event was handled
-            functions.handled.apply();
-        }
+      fn.apply();
+      if (functions.handled || typeof functions.handled === 'function') { // execute function when event was handled
+          functions.handled.apply();
+      }
     } else {
-        if (functions.unhandled || typeof functions.unhandled === 'function') { // execute function when event was not handled
-            functions.unhandled.apply();
-        }
+      if (functions.unhandled || typeof functions.unhandled === 'function') { // execute function when event was not handled
+          functions.unhandled.apply();
+      }
     }
-  };
-  Foundation.Keyboard.handleKey = handleKey;
+  },
 
   /**
    * Finds all focusable elements within the given `$element`
    * @param {jQuery} $element - jQuery object to search within
    * @return {jQuery} $focusable - all focusable elements within `$element`
    */
-  var findFocusable = function($element) {
+  findFocusable($element) {
     return $element.find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]').filter(function() {
       if (!$(this).is(':visible') || $(this).attr('tabindex') < 0) { return false; } //only have visible elements and those that have a tabindex greater or equal 0
       return true;
     });
-  };
-  Foundation.Keyboard.findFocusable = findFocusable;
+  },
 
   /**
    * Returns the component name name
@@ -108,8 +93,21 @@
    * @return String componentName
    */
 
-  var register = function(componentName, cmds) {
+  register(componentName, cmds) {
     commands[componentName] = cmds;
-  };
-  Foundation.Keyboard.register = register;
-}(jQuery, window.Foundation);
+  }
+}
+
+/*
+ * Constants for easier comparing.
+ * Can be used like Foundation.parseKey(event) === Foundation.keys.SPACE
+ */
+function getKeyCodes(kcs) {
+  var k = {};
+  for (var kc in kcs) k[kcs[kc]] = kcs[kc];
+  return k;
+}
+
+if (window.Foundation) {
+  window.Foundation.Keyboard = Keyboard;
+}