foundation-rails 6.1.2.0 → 6.2.0.0

data/vendor/assets/js/foundation.util.box.js.es6

@@ -0,0 +1,183 @@
+'use strict';
+
+!function($) {
+
+Foundation.Box = {
+  ImNotTouchingYou: ImNotTouchingYou,
+  GetDimensions: GetDimensions,
+  GetOffsets: GetOffsets
+}
+
+/**
+ * Compares the dimensions of an element to a container and determines collision events with container.
+ * @function
+ * @param {jQuery} element - jQuery object to test for collisions.
+ * @param {jQuery} parent - jQuery object to use as bounding container.
+ * @param {Boolean} lrOnly - set to true to check left and right values only.
+ * @param {Boolean} tbOnly - set to true to check top and bottom values only.
+ * @default if no parent object passed, detects collisions with `window`.
+ * @returns {Boolean} - true if collision free, false if a collision in any direction.
+ */
+function ImNotTouchingYou(element, parent, lrOnly, tbOnly) {
+  var eleDims = GetDimensions(element),
+      top, bottom, left, right;
+
+  if (parent) {
+    var parDims = GetDimensions(parent);
+
+    bottom = (eleDims.offset.top + eleDims.height <= parDims.height + parDims.offset.top);
+    top    = (eleDims.offset.top >= parDims.offset.top);
+    left   = (eleDims.offset.left >= parDims.offset.left);
+    right  = (eleDims.offset.left + eleDims.width <= parDims.width);
+  }
+  else {
+    bottom = (eleDims.offset.top + eleDims.height <= eleDims.windowDims.height + eleDims.windowDims.offset.top);
+    top    = (eleDims.offset.top >= eleDims.windowDims.offset.top);
+    left   = (eleDims.offset.left >= eleDims.windowDims.offset.left);
+    right  = (eleDims.offset.left + eleDims.width <= eleDims.windowDims.width);
+  }
+
+  var allDirs = [bottom, top, left, right];
+
+  if (lrOnly) {
+    return left === right === true;
+  }
+
+  if (tbOnly) {
+    return top === bottom === true;
+  }
+
+  return allDirs.indexOf(false) === -1;
+};
+
+/**
+ * Uses native methods to return an object of dimension values.
+ * @function
+ * @param {jQuery || HTML} element - jQuery object or DOM element for which to get the dimensions. Can be any element other that document or window.
+ * @returns {Object} - nested object of integer pixel values
+ * TODO - if element is window, return only those values.
+ */
+function GetDimensions(elem, test){
+  elem = elem.length ? elem[0] : elem;
+
+  if (elem === window || elem === document) {
+    throw new Error("I'm sorry, Dave. I'm afraid I can't do that.");
+  }
+
+  var rect = elem.getBoundingClientRect(),
+      parRect = elem.parentNode.getBoundingClientRect(),
+      winRect = document.body.getBoundingClientRect(),
+      winY = window.pageYOffset,
+      winX = window.pageXOffset;
+
+  return {
+    width: rect.width,
+    height: rect.height,
+    offset: {
+      top: rect.top + winY,
+      left: rect.left + winX
+    },
+    parentDims: {
+      width: parRect.width,
+      height: parRect.height,
+      offset: {
+        top: parRect.top + winY,
+        left: parRect.left + winX
+      }
+    },
+    windowDims: {
+      width: winRect.width,
+      height: winRect.height,
+      offset: {
+        top: winY,
+        left: winX
+      }
+    }
+  }
+}
+
+/**
+ * Returns an object of top and left integer pixel values for dynamically rendered elements,
+ * such as: Tooltip, Reveal, and Dropdown
+ * @function
+ * @param {jQuery} element - jQuery object for the element being positioned.
+ * @param {jQuery} anchor - jQuery object for the element's anchor point.
+ * @param {String} position - a string relating to the desired position of the element, relative to it's anchor
+ * @param {Number} vOffset - integer pixel value of desired vertical separation between anchor and element.
+ * @param {Number} hOffset - integer pixel value of desired horizontal separation between anchor and element.
+ * @param {Boolean} isOverflow - if a collision event is detected, sets to true to default the element to full width - any desired offset.
+ * TODO alter/rewrite to work with `em` values as well/instead of pixels
+ */
+function GetOffsets(element, anchor, position, vOffset, hOffset, isOverflow) {
+  var $eleDims = GetDimensions(element),
+      $anchorDims = anchor ? GetDimensions(anchor) : null;
+
+  switch (position) {
+    case 'top':
+      return {
+        left: (Foundation.rtl() ? $anchorDims.offset.left - $eleDims.width + $anchorDims.width : $anchorDims.offset.left),
+        top: $anchorDims.offset.top - ($eleDims.height + vOffset)
+      }
+      break;
+    case 'left':
+      return {
+        left: $anchorDims.offset.left - ($eleDims.width + hOffset),
+        top: $anchorDims.offset.top
+      }
+      break;
+    case 'right':
+      return {
+        left: $anchorDims.offset.left + $anchorDims.width + hOffset,
+        top: $anchorDims.offset.top
+      }
+      break;
+    case 'center top':
+      return {
+        left: ($anchorDims.offset.left + ($anchorDims.width / 2)) - ($eleDims.width / 2),
+        top: $anchorDims.offset.top - ($eleDims.height + vOffset)
+      }
+      break;
+    case 'center bottom':
+      return {
+        left: isOverflow ? hOffset : (($anchorDims.offset.left + ($anchorDims.width / 2)) - ($eleDims.width / 2)),
+        top: $anchorDims.offset.top + $anchorDims.height + vOffset
+      }
+      break;
+    case 'center left':
+      return {
+        left: $anchorDims.offset.left - ($eleDims.width + hOffset),
+        top: ($anchorDims.offset.top + ($anchorDims.height / 2)) - ($eleDims.height / 2)
+      }
+      break;
+    case 'center right':
+      return {
+        left: $anchorDims.offset.left + $anchorDims.width + hOffset + 1,
+        top: ($anchorDims.offset.top + ($anchorDims.height / 2)) - ($eleDims.height / 2)
+      }
+      break;
+    case 'center':
+      return {
+        left: ($eleDims.windowDims.offset.left + ($eleDims.windowDims.width / 2)) - ($eleDims.width / 2),
+        top: ($eleDims.windowDims.offset.top + ($eleDims.windowDims.height / 2)) - ($eleDims.height / 2)
+      }
+      break;
+    case 'reveal':
+      return {
+        left: ($eleDims.windowDims.width - $eleDims.width) / 2,
+        top: $eleDims.windowDims.offset.top + vOffset
+      }
+    case 'reveal full':
+      return {
+        left: $eleDims.windowDims.offset.left,
+        top: $eleDims.windowDims.offset.top
+      }
+      break;
+    default:
+      return {
+        left: (Foundation.rtl() ? $anchorDims.offset.left - $eleDims.width + $anchorDims.width : $anchorDims.offset.left),
+        top: $anchorDims.offset.top + $anchorDims.height + vOffset
+      }
+  }
+}
+
+}(jQuery);

data/vendor/assets/js/{foundation.util.keyboard.js → foundation.util.keyboard.js.es6}

@@ -5,32 +5,26 @@
  * 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'
-  };
-
-  /*
-   * 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);
 
-  Foundation.Keyboard.keys = keys;
+'use strict';
+
+!function($) {
+
+const keyCodes = {
+  9: 'TAB',
+  13: 'ENTER',
+  27: 'ESCAPE',
+  32: 'SPACE',
+  37: 'ARROW_LEFT',
+  38: 'ARROW_UP',
+  39: 'ARROW_RIGHT',
+  40: 'ARROW_DOWN'
+}
+
+var commands = {}
+
+var Keyboard = {
+  keys: getKeyCodes(keyCodes),
 
   /**
    * Parses the (keyboard) event and returns a String that represents its key
@@ -38,18 +32,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;
+    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 +46,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 +64,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 +95,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;
+}
+
+Foundation.Keyboard = Keyboard;
+
+}(jQuery);

data/vendor/assets/js/{foundation.util.mediaQuery.js → foundation.util.mediaQuery.js.es6}

@@ -1,7 +1,9 @@
-!function($, Foundation) {
+'use strict';
+
+!function($) {
 
 // Default set of media queries
-var defaultQueries = {
+const defaultQueries = {
   'default' : 'only screen',
   landscape : 'only screen and (orientation: landscape)',
   portrait : 'only screen and (orientation: portrait)',
@@ -15,15 +17,40 @@ var defaultQueries = {
 
 var MediaQuery = {
   queries: [],
+
   current: '',
 
+  /**
+   * Initializes the media query helper, by extracting the breakpoint list from the CSS and activating the breakpoint watcher.
+   * @function
+   * @private
+   */
+  _init() {
+    var self = this;
+    var extractedStyles = $('.foundation-mq').css('font-family');
+    var namedQueries;
+
+    namedQueries = parseStyleToObject(extractedStyles);
+
+    for (var key in namedQueries) {
+      self.queries.push({
+        name: key,
+        value: `only screen and (min-width: ${namedQueries[key]})`
+      });
+    }
+
+    this.current = this._getCurrentSize();
+
+    this._watcher();
+  },
+
   /**
    * Checks if the screen is at least as wide as a breakpoint.
    * @function
    * @param {String} size - Name of the breakpoint to check.
    * @returns {Boolean} `true` if the breakpoint matches, `false` if it's smaller.
    */
-  atLeast: function(size) {
+  atLeast(size) {
     var query = this.get(size);
 
     if (query) {
@@ -39,7 +66,7 @@ var MediaQuery = {
    * @param {String} size - Name of the breakpoint to get.
    * @returns {String|null} - The media query of the breakpoint, or `null` if the breakpoint doesn't exist.
    */
-  get: function(size) {
+  get(size) {
     for (var i in this.queries) {
       var query = this.queries[i];
       if (size === query.name) return query.value;
@@ -48,40 +75,13 @@ var MediaQuery = {
     return null;
   },
 
-  /**
-   * Initializes the media query helper, by extracting the breakpoint list from the CSS and activating the breakpoint watcher.
-   * @function
-   * @private
-   */
-  _init: function() {
-    var self = this;
-    var extractedStyles = $('.foundation-mq').css('font-family');
-    var namedQueries;
-
-    namedQueries = parseStyleToObject(extractedStyles);
-
-    for (var key in namedQueries) {
-      self.queries.push({
-        name: key,
-        value: 'only screen and (min-width: ' + namedQueries[key] + ')'
-      });
-    }
-
-    this.current = this._getCurrentSize();
-
-    this._watcher();
-
-    // Extend default queries
-    // namedQueries = $.extend(defaultQueries, namedQueries);
-  },
-
   /**
    * Gets the current breakpoint name by testing every breakpoint and returning the last one to match (the biggest one).
    * @function
    * @private
    * @returns {String} Name of the current breakpoint.
    */
-  _getCurrentSize: function() {
+  _getCurrentSize() {
     var matched;
 
     for (var i in this.queries) {
@@ -92,7 +92,7 @@ var MediaQuery = {
       }
     }
 
-    if(typeof matched === 'object') {
+    if (typeof matched === 'object') {
       return matched.name;
     } else {
       return matched;
@@ -104,18 +104,16 @@ var MediaQuery = {
    * @function
    * @private
    */
-  _watcher: function() {
-    var _this = this;
+  _watcher() {
+    $(window).on('resize.zf.mediaquery', () => {
+      var newSize = this._getCurrentSize();
 
-    $(window).on('resize.zf.mediaquery', function() {
-      var newSize = _this._getCurrentSize();
-
-      if (newSize !== _this.current) {
+      if (newSize !== this.current) {
         // Broadcast the media query change on the window
-        $(window).trigger('changed.zf.mediaquery', [newSize, _this.current]);
+        $(window).trigger('changed.zf.mediaquery', [newSize, this.current]);
 
         // Change the current media query
-        _this.current = newSize;
+        this.current = newSize;
       }
     });
   }
@@ -146,8 +144,8 @@ window.matchMedia || (window.matchMedia = function() {
     info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;
 
     styleMedia = {
-      matchMedium: function(media) {
-        var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
+      matchMedium(media) {
+        var text = `@media ${media}{ #matchmediajs-test { width: 1px; } }`;
 
         // 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
         if (style.styleSheet) {
@@ -159,7 +157,7 @@ window.matchMedia || (window.matchMedia = function() {
         // Test if media query is true or false
         return info.width === '1px';
       }
-    };
+    }
   }
 
   return function(media) {
@@ -167,7 +165,7 @@ window.matchMedia || (window.matchMedia = function() {
       matches: styleMedia.matchMedium(media || 'all'),
       media: media || 'all'
     };
-  };
+  }
 }());
 
 // Thank you: https://github.com/sindresorhus/query-string
@@ -207,4 +205,6 @@ function parseStyleToObject(str) {
   return styleObject;
 }
 
-}(jQuery, Foundation);
+Foundation.MediaQuery = MediaQuery;
+
+}(jQuery);