foundation.util.keyboard.js.es6 in foundation-rails-6.4.1.0

- old
+ new

@@ -6,50 +6,64 @@
  *                                         *
  ******************************************/
 
 'use strict';
 
-!function($) {
+import $ from 'jquery';
+import { rtl as Rtl } from './foundation.util.core';
 
 const keyCodes = {
   9: 'TAB',
   13: 'ENTER',
   27: 'ESCAPE',
   32: 'SPACE',
+  35: 'END',
+  36: 'HOME',
   37: 'ARROW_LEFT',
   38: 'ARROW_UP',
   39: 'ARROW_RIGHT',
   40: 'ARROW_DOWN'
 }
 
 var commands = {}
 
+// Functions pulled out to be referenceable from internals
+function findFocusable($element) {
+  if(!$element) {return false; }
+  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;
+  });
+}
+
+function parseKey(event) {
+  var key = keyCodes[event.which || event.keyCode] || String.fromCharCode(event.which).toUpperCase();
+
+  // Remove un-printable characters, e.g. for `fromCharCode` calls for CTRL only events
+  key = key.replace(/\W+/, '');
+
+  if (event.shiftKey) key = `SHIFT_${key}`;
+  if (event.ctrlKey) key = `CTRL_${key}`;
+  if (event.altKey) key = `ALT_${key}`;
+
+  // Remove trailing underscore, in case only modifiers were used (e.g. only `CTRL_ALT`)
+  key = key.replace(/_$/, '');
+
+  return key;
+}
+
 var Keyboard = {
   keys: getKeyCodes(keyCodes),
 
   /**
    * Parses the (keyboard) event and returns a String that represents its key
    * Can be used like Foundation.parseKey(event) === Foundation.keys.SPACE
    * @param {Event} event - the event generated by the event handler
    * @return String key - String that represents the key pressed
    */
-  parseKey(event) {
-    var key = keyCodes[event.which || event.keyCode] || String.fromCharCode(event.which).toUpperCase();
+  parseKey: parseKey,
 
-    // Remove un-printable characters, e.g. for `fromCharCode` calls for CTRL only events
-    key = key.replace(/\W+/, '');
-
-    if (event.shiftKey) key = `SHIFT_${key}`;
-    if (event.ctrlKey) key = `CTRL_${key}`;
-    if (event.altKey) key = `ALT_${key}`;
-
-    // Remove trailing underscore, in case only modifiers were used (e.g. only `CTRL_ALT`)
-    key = key.replace(/_$/, '');
-
-    return key;
-  },
-
   /**
    * Handles the given (keyboard) event
    * @param {Event} event - the event generated by the event handler
    * @param {String} component - Foundation component's name, e.g. Slider or Reveal
    * @param {Objects} functions - collection of functions that are to be executed
@@ -64,11 +78,11 @@
     if (!commandList) return console.warn('Component not defined!');
 
     if (typeof commandList.ltr === 'undefined') { // this component does not differentiate between ltr and rtl
         cmds = commandList; // use plain list
     } else { // merge ltr and rtl: if document is rtl, rtl overwrites ltr and vice versa
-        if (Foundation.rtl()) cmds = $.extend({}, commandList.ltr, commandList.rtl);
+        if (Rtl()) cmds = $.extend({}, commandList.ltr, commandList.rtl);
 
         else cmds = $.extend({}, commandList.rtl, commandList.ltr);
     }
     command = cmds[keyCode];
 
@@ -88,43 +102,41 @@
   /**
    * Finds all focusable elements within the given `$element`
    * @param {jQuery} $element - jQuery object to search within
    * @return {jQuery} $focusable - all focusable elements within `$element`
    */
-  findFocusable($element) {
-    if(!$element) {return false; }
-    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;
-    });
-  },
 
+  findFocusable: findFocusable,
+
   /**
    * Returns the component name name
    * @param {Object} component - Foundation component, e.g. Slider or Reveal
    * @return String componentName
    */
 
   register(componentName, cmds) {
     commands[componentName] = cmds;
-  },  
+  },
 
+
+  // TODO9438: These references to Keyboard need to not require global. Will 'this' work in this context?
+  //
   /**
    * Traps the focus in the given element.
    * @param  {jQuery} $element  jQuery object to trap the foucs into.
    */
   trapFocus($element) {
-    var $focusable = Foundation.Keyboard.findFocusable($element),
+    var $focusable = findFocusable($element),
         $firstFocusable = $focusable.eq(0),
         $lastFocusable = $focusable.eq(-1);
 
     $element.on('keydown.zf.trapfocus', function(event) {
-      if (event.target === $lastFocusable[0] && Foundation.Keyboard.parseKey(event) === 'TAB') {
+      if (event.target === $lastFocusable[0] && parseKey(event) === 'TAB') {
         event.preventDefault();
         $firstFocusable.focus();
       }
-      else if (event.target === $firstFocusable[0] && Foundation.Keyboard.parseKey(event) === 'SHIFT_TAB') {
+      else if (event.target === $firstFocusable[0] && parseKey(event) === 'SHIFT_TAB') {
         event.preventDefault();
         $lastFocusable.focus();
       }
     });
   },
@@ -145,8 +157,6 @@
   var k = {};
   for (var kc in kcs) k[kcs[kc]] = kcs[kc];
   return k;
 }
 
-Foundation.Keyboard = Keyboard;
-
-}(jQuery);
+export {Keyboard};