foundation-rails 6.2.4.0 → 6.3.0.0

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

@@ -34,9 +34,17 @@ var Keyboard = {
    */
   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;
   },
 
@@ -83,6 +91,7 @@ var Keyboard = {
    * @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;
@@ -97,6 +106,34 @@ var Keyboard = {
 
   register(componentName, cmds) {
     commands[componentName] = cmds;
+  },  
+
+  /**
+   * 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),
+        $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') {
+        event.preventDefault();
+        $firstFocusable.focus();
+      }
+      else if (event.target === $firstFocusable[0] && Foundation.Keyboard.parseKey(event) === 'SHIFT_TAB') {
+        event.preventDefault();
+        $lastFocusable.focus();
+      }
+    });
+  },
+  /**
+   * Releases the trapped focus from the given element.
+   * @param  {jQuery} $element  jQuery object to release the focus for.
+   */
+  releaseFocus($element) {
+    $element.off('keydown.zf.trapfocus');
   }
 }
 

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

@@ -62,6 +62,22 @@ var MediaQuery = {
     return false;
   },
 
+  /**
+   * Checks if the screen matches to a breakpoint.
+   * @function
+   * @param {String} size - Name of the breakpoint to check, either 'small only' or 'small'. Omitting 'only' falls back to using atLeast() method.
+   * @returns {Boolean} `true` if the breakpoint matches, `false` if it does not.
+   */
+  is(size) {
+    size = size.trim().split(' ');
+    if(size.length > 1 && size[1] === 'only') {
+      if(size[0] === this._getCurrentSize()) return true;
+    } else {
+      return this.atLeast(size[0]);
+    }
+    return false;
+  },
+
   /**
    * Gets the media query of a breakpoint.
    * @function

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

@@ -24,8 +24,14 @@ function Move(duration, elem, fn){
   var anim, prog, start = null;
   // console.log('called');
 
+  if (duration === 0) {
+    fn.apply(elem);
+    elem.trigger('finished.zf.animate', [elem]).triggerHandler('finished.zf.animate', [elem]);
+    return;
+  }
+
   function move(ts){
-    if(!start) start = window.performance.now();
+    if(!start) start = ts;
     // console.log(start, ts);
     prog = ts - start;
     fn.apply(elem);

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

@@ -11,8 +11,6 @@ const Nest = {
         subItemClass = `${subMenuClass}-item`,
         hasSubClass = `is-${type}-submenu-parent`;
 
-    menu.find('a:first').attr('tabindex', 0);
-
     items.each(function() {
       var $item = $(this),
           $sub = $item.children('ul');
@@ -22,17 +20,24 @@ const Nest = {
           .addClass(hasSubClass)
           .attr({
             'aria-haspopup': true,
-            'aria-expanded': false,
             'aria-label': $item.children('a:first').text()
           });
+          // Note:  Drilldowns behave differently in how they hide, and so need
+          // additional attributes.  We should look if this possibly over-generalized
+          // utility (Nest) is appropriate when we rework menus in 6.4
+          if(type === 'drilldown') {
+            $item.attr({'aria-expanded': false});
+          }
 
         $sub
           .addClass(`submenu ${subMenuClass}`)
           .attr({
             'data-submenu': '',
-            'aria-hidden': true,
             'role': 'menu'
           });
+        if(type === 'drilldown') {
+          $sub.attr({'aria-hidden': true});
+        }
       }
 
       if ($item.parent('[data-submenu]').length) {
@@ -44,7 +49,7 @@ const Nest = {
   },
 
   Burn(menu, type) {
-    var items = menu.find('li').removeAttr('tabindex'),
+    var //items = menu.find('li'),
         subMenuClass = `is-${type}-submenu`,
         subItemClass = `${subMenuClass}-item`,
         hasSubClass = `is-${type}-submenu-parent`;

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

@@ -59,13 +59,15 @@ function onImagesLoaded(images, callback){
   }
 
   images.each(function() {
-    if (this.complete) {
-      singleImageLoaded();
-    }
-    else if (typeof this.naturalWidth !== 'undefined' && this.naturalWidth > 0) {
+    // Check if image is loaded
+    if (this.complete || (this.readyState === 4) || (this.readyState === 'complete')) {
       singleImageLoaded();
     }
+    // Force load the image
     else {
+      // fix for IE. See https://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/
+      var src = $(this).attr('src');
+      $(this).attr('src', src + '?' + (new Date().getTime()));
       $(this).one('load', function() {
         singleImageLoaded();
       });

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

@@ -36,7 +36,12 @@ $(document).on('click.zf.trigger', '[data-close]', function() {
 
 // Elements with [data-toggle] will toggle a plugin that supports it when clicked.
 $(document).on('click.zf.trigger', '[data-toggle]', function() {
-  triggers($(this), 'toggle');
+  let id = $(this).data('toggle');
+  if (id) {
+    triggers($(this), 'toggle');
+  } else {
+    $(this).trigger('toggle.zf.trigger');
+  }
 });
 
 // Elements with [data-closable] will respond to close.zf.trigger events.
@@ -71,6 +76,7 @@ function checkListeners() {
   eventsListener();
   resizeListener();
   scrollListener();
+  mutateListener();
   closemeListener();
 }
 
@@ -150,49 +156,61 @@ function scrollListener(debounce){
   }
 }
 
+function mutateListener(debounce) {
+    let $nodes = $('[data-mutate]');
+    if ($nodes.length && MutationObserver){
+			//trigger all listening elements and signal a mutate event
+      //no IE 9 or 10
+			$nodes.each(function () {
+			  $(this).triggerHandler('mutateme.zf.trigger');
+			});
+    }
+ }
+
 function eventsListener() {
   if(!MutationObserver){ return false; }
   let nodes = document.querySelectorAll('[data-resize], [data-scroll], [data-mutate]');
 
   //element callback
-  var listeningElementsMutation = function(mutationRecordsList) {
-    var $target = $(mutationRecordsList[0].target);
-    //trigger the event handler for the element depending on type
-    switch ($target.attr("data-events")) {
-
-      case "resize" :
-      $target.triggerHandler('resizeme.zf.trigger', [$target]);
-      break;
-
-      case "scroll" :
-      $target.triggerHandler('scrollme.zf.trigger', [$target, window.pageYOffset]);
-      break;
-
-      // case "mutate" :
-      // console.log('mutate', $target);
-      // $target.triggerHandler('mutate.zf.trigger');
-      //
-      // //make sure we don't get stuck in an infinite loop from sloppy codeing
-      // if ($target.index('[data-mutate]') == $("[data-mutate]").length-1) {
-      //   domMutationObserver();
-      // }
-      // break;
-
-      default :
-      return false;
-      //nothing
+  var listeningElementsMutation = function (mutationRecordsList) {
+      var $target = $(mutationRecordsList[0].target);
+
+	  //trigger the event handler for the element depending on type
+      switch (mutationRecordsList[0].type) {
+
+        case "attributes":
+          if ($target.attr("data-events") === "scroll" && mutationRecordsList[0].attributeName === "data-events") {
+		  	$target.triggerHandler('scrollme.zf.trigger', [$target, window.pageYOffset]);
+		  }
+		  if ($target.attr("data-events") === "resize" && mutationRecordsList[0].attributeName === "data-events") {
+		  	$target.triggerHandler('resizeme.zf.trigger', [$target]);
+		   }
+		  if (mutationRecordsList[0].attributeName === "style") {
+			  $target.closest("[data-mutate]").attr("data-events","mutate");
+			  $target.closest("[data-mutate]").triggerHandler('mutateme.zf.trigger', [$target.closest("[data-mutate]")]);
+		  }
+		  break;
+
+        case "childList":
+		  $target.closest("[data-mutate]").attr("data-events","mutate");
+		  $target.closest("[data-mutate]").triggerHandler('mutateme.zf.trigger', [$target.closest("[data-mutate]")]);
+          break;
+
+        default:
+          return false;
+        //nothing
+      }
+    };
+
+    if (nodes.length) {
+      //for each element that needs to listen for resizing, scrolling, or mutation add a single observer
+      for (var i = 0; i <= nodes.length - 1; i++) {
+        var elementObserver = new MutationObserver(listeningElementsMutation);
+        elementObserver.observe(nodes[i], { attributes: true, childList: true, characterData: false, subtree: true, attributeFilter: ["data-events", "style"] });
+      }
     }
   }
 
-  if(nodes.length){
-    //for each element that needs to listen for resizing, scrolling, (or coming soon mutation) add a single observer
-    for (var i = 0; i <= nodes.length-1; i++) {
-      let elementObserver = new MutationObserver(listeningElementsMutation);
-      elementObserver.observe(nodes[i], { attributes: true, childList: false, characterData: false, subtree:false, attributeFilter:["data-events"]});
-    }
-  }
-}
-
 // ------------------------------------
 
 // [PH]

data/vendor/assets/js/foundation.zf.responsiveAccordionTabs.js.es6

@@ -0,0 +1,240 @@
+'use strict';
+
+!function($) {
+
+/**
+ * ResponsiveAccordionTabs module.
+ * @module foundation.responsiveAccordionTabs
+ * @requires foundation.util.keyboard
+ * @requires foundation.util.timerAndImageLoader
+ * @requires foundation.util.motion
+ * @requires foundation.accordion
+ * @requires foundation.tabs
+ */
+
+class ResponsiveAccordionTabs {
+  /**
+   * Creates a new instance of a responsive accordion tabs.
+   * @class
+   * @fires ResponsiveAccordionTabs#init
+   * @param {jQuery} element - jQuery object to make into a dropdown menu.
+   * @param {Object} options - Overrides to the default plugin settings.
+   */
+  constructor(element, options) {
+    this.$element = $(element);
+    this.options  = $.extend({}, this.$element.data(), options);
+    this.rules = this.$element.data('responsive-accordion-tabs');
+    this.currentMq = null;
+    this.currentPlugin = null;
+    if (!this.$element.attr('id')) {
+      this.$element.attr('id',Foundation.GetYoDigits(6, 'responsiveaccordiontabs'));
+    };
+
+    this._init();
+    this._events();
+
+    Foundation.registerPlugin(this, 'ResponsiveAccordionTabs');
+  }
+
+  /**
+   * Initializes the Menu by parsing the classes from the 'data-responsive-accordion-tabs' attribute on the element.
+   * @function
+   * @private
+   */
+  _init() {
+    // The first time an Interchange plugin is initialized, this.rules is converted from a string of "classes" to an object of rules
+    if (typeof this.rules === 'string') {
+      let rulesTree = {};
+
+      // Parse rules from "classes" pulled from data attribute
+      let rules = this.rules.split(' ');
+
+      // Iterate through every rule found
+      for (let i = 0; i < rules.length; i++) {
+        let rule = rules[i].split('-');
+        let ruleSize = rule.length > 1 ? rule[0] : 'small';
+        let rulePlugin = rule.length > 1 ? rule[1] : rule[0];
+
+        if (MenuPlugins[rulePlugin] !== null) {
+          rulesTree[ruleSize] = MenuPlugins[rulePlugin];
+        }
+      }
+
+      this.rules = rulesTree;
+    }
+
+    this._getAllOptions();
+
+    if (!$.isEmptyObject(this.rules)) {
+      this._checkMediaQueries();
+    }
+  }
+
+  _getAllOptions() {
+    //get all defaults and options
+    var _this = this;
+    _this.allOptions = {};
+    for (var key in MenuPlugins) {
+      if (MenuPlugins.hasOwnProperty(key)) {
+        var obj = MenuPlugins[key];
+        try {
+          var dummyPlugin = $('<ul></ul>');
+          var tmpPlugin = new obj.plugin(dummyPlugin,_this.options);
+          for (var keyKey in tmpPlugin.options) {
+            if (tmpPlugin.options.hasOwnProperty(keyKey) && keyKey !== 'zfPlugin') {
+              var objObj = tmpPlugin.options[keyKey];
+              _this.allOptions[keyKey] = objObj;
+            }
+          }
+          tmpPlugin.destroy();
+        }
+        catch(e) {
+        }
+      }
+    }
+  }
+
+  /**
+   * Initializes events for the Menu.
+   * @function
+   * @private
+   */
+  _events() {
+    var _this = this;
+
+    $(window).on('changed.zf.mediaquery', function() {
+      _this._checkMediaQueries();
+    });
+  }
+
+  /**
+   * Checks the current screen width against available media queries. If the media query has changed, and the plugin needed has changed, the plugins will swap out.
+   * @function
+   * @private
+   */
+  _checkMediaQueries() {
+    var matchedMq, _this = this;
+    // Iterate through each rule and find the last matching rule
+    $.each(this.rules, function(key) {
+      if (Foundation.MediaQuery.atLeast(key)) {
+        matchedMq = key;
+      }
+    });
+
+    // No match? No dice
+    if (!matchedMq) return;
+
+    // Plugin already initialized? We good
+    if (this.currentPlugin instanceof this.rules[matchedMq].plugin) return;
+
+    // Remove existing plugin-specific CSS classes
+    $.each(MenuPlugins, function(key, value) {
+      _this.$element.removeClass(value.cssClass);
+    });
+
+    // Add the CSS class for the new plugin
+    this.$element.addClass(this.rules[matchedMq].cssClass);
+
+    // Create an instance of the new plugin
+    if (this.currentPlugin) {
+      //don't know why but on nested elements data zfPlugin get's lost
+      if (!this.currentPlugin.$element.data('zfPlugin') && this.storezfData) this.currentPlugin.$element.data('zfPlugin',this.storezfData);
+      this.currentPlugin.destroy();
+    }
+    this._handleMarkup(this.rules[matchedMq].cssClass);
+    this.currentPlugin = new this.rules[matchedMq].plugin(this.$element, {});
+    this.storezfData = this.currentPlugin.$element.data('zfPlugin');
+
+  }
+
+  _handleMarkup(toSet){
+    var _this = this, fromString = 'accordion';
+    var $panels = $('[data-tabs-content='+this.$element.attr('id')+']');
+    if ($panels.length) fromString = 'tabs';
+    if (fromString === toSet) {
+      return;
+    };
+
+    var tabsTitle = _this.allOptions.linkClass?_this.allOptions.linkClass:'tabs-title';
+    var tabsPanel = _this.allOptions.panelClass?_this.allOptions.panelClass:'tabs-panel';
+
+    this.$element.removeAttr('role');
+    var $liHeads = this.$element.children('.'+tabsTitle+',[data-accordion-item]').removeClass(tabsTitle).removeClass('accordion-item').removeAttr('data-accordion-item');
+    var $liHeadsA = $liHeads.children('a').removeClass('accordion-title');
+
+    if (fromString === 'tabs') {
+      $panels = $panels.children('.'+tabsPanel).removeClass(tabsPanel).removeAttr('role').removeAttr('aria-hidden').removeAttr('aria-labelledby');
+      $panels.children('a').removeAttr('role').removeAttr('aria-controls').removeAttr('aria-selected');
+    }else{
+      $panels = $liHeads.children('[data-tab-content]').removeClass('accordion-content');
+    };
+
+    $panels.css({display:'',visibility:''});
+    $liHeads.css({display:'',visibility:''});
+    if (toSet === 'accordion') {
+      $panels.each(function(key,value){
+        $(value).appendTo($liHeads.get(key)).addClass('accordion-content').attr('data-tab-content','').removeClass('is-active').css({height:''});
+        $('[data-tabs-content='+_this.$element.attr('id')+']').after('<div id="tabs-placeholder-'+_this.$element.attr('id')+'"></div>').remove();
+        $liHeads.addClass('accordion-item').attr('data-accordion-item','');
+        $liHeadsA.addClass('accordion-title');
+      });
+    }else if (toSet === 'tabs'){
+      var $tabsContent = $('[data-tabs-content='+_this.$element.attr('id')+']');
+      var $placeholder = $('#tabs-placeholder-'+_this.$element.attr('id'));
+      if ($placeholder.length) {
+        $tabsContent = $('<div class="tabs-content"></div>').insertAfter($placeholder).attr('data-tabs-content',_this.$element.attr('id'));
+        $placeholder.remove();
+      }else{
+        $tabsContent = $('<div class="tabs-content"></div>').insertAfter(_this.$element).attr('data-tabs-content',_this.$element.attr('id'));
+      };
+      $panels.each(function(key,value){
+        var tempValue = $(value).appendTo($tabsContent).addClass(tabsPanel);
+        var hash = $liHeadsA.get(key).hash.slice(1);
+        var id = $(value).attr('id') || Foundation.GetYoDigits(6, 'accordion');
+        if (hash !== id) {
+          if (hash !== '') {
+            $(value).attr('id',hash);
+          }else{
+            hash = id;
+            $(value).attr('id',hash);
+            $($liHeadsA.get(key)).attr('href',$($liHeadsA.get(key)).attr('href').replace('#','')+'#'+hash);
+          };
+        };
+        var isActive = $($liHeads.get(key)).hasClass('is-active');
+        if (isActive) {
+          tempValue.addClass('is-active');
+        };
+      });
+      $liHeads.addClass(tabsTitle);
+    };
+  }
+
+  /**
+   * Destroys the instance of the current plugin on this element, as well as the window resize handler that switches the plugins out.
+   * @function
+   */
+  destroy() {
+    if (this.currentPlugin) this.currentPlugin.destroy();
+    $(window).off('.zf.ResponsiveAccordionTabs');
+    Foundation.unregisterPlugin(this);
+  }
+}
+
+ResponsiveAccordionTabs.defaults = {};
+
+// The plugin matches the plugin classes with these plugin instances.
+var MenuPlugins = {
+  tabs: {
+    cssClass: 'tabs',
+    plugin: Foundation._plugins.tabs || null
+  },
+  accordion: {
+    cssClass: 'accordion',
+    plugin: Foundation._plugins.accordion || null
+  }
+};
+
+// Window exports
+Foundation.plugin(ResponsiveAccordionTabs, 'ResponsiveAccordionTabs');
+
+}(jQuery);