foundation-rails 6.3.1.0 → 6.4.1.0

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

@@ -1,6 +1,7 @@
 'use strict';
 
-!function($) {
+import $ from 'jquery';
+import { Motion } from './foundation.util.motion';
 
 const MutationObserver = (function () {
   var prefixes = ['WebKit', 'Moz', 'O', 'Ms', ''];
@@ -17,70 +18,120 @@ const triggers = (el, type) => {
     $(`#${id}`)[ type === 'close' ? 'trigger' : 'triggerHandler'](`${type}.zf.trigger`, [el]);
   });
 };
+
+var Triggers = {
+  Listeners: {
+    Basic: {},
+    Global: {}
+  },
+  Initializers: {}
+}
+
+Triggers.Listeners.Basic  = {
+  openListener: function() {
+    triggers($(this), 'open');
+  },
+  closeListener: function() {
+    let id = $(this).data('close');
+    if (id) {
+      triggers($(this), 'close');
+    }
+    else {
+      $(this).trigger('close.zf.trigger');
+    }
+  },
+  toggleListener: function() {
+    let id = $(this).data('toggle');
+    if (id) {
+      triggers($(this), 'toggle');
+    } else {
+      $(this).trigger('toggle.zf.trigger');
+    }
+  },
+  closeableListener: function(e) {
+    e.stopPropagation();
+    let animation = $(this).data('closable');
+
+    if(animation !== ''){
+      Motion.animateOut($(this), animation, function() {
+        $(this).trigger('closed.zf');
+      });
+    }else{
+      $(this).fadeOut().trigger('closed.zf');
+    }
+  },
+  toggleFocusListener: function() {
+    let id = $(this).data('toggle-focus');
+    $(`#${id}`).triggerHandler('toggle.zf.trigger', [$(this)]);
+  }
+};
+
 // Elements with [data-open] will reveal a plugin that supports it when clicked.
-$(document).on('click.zf.trigger', '[data-open]', function() {
-  triggers($(this), 'open');
-});
+Triggers.Initializers.addOpenListener = ($elem) => {
+  $elem.off('click.zf.trigger', Triggers.Listeners.Basic.openListener);
+  $elem.on('click.zf.trigger', '[data-open]', Triggers.Listeners.Basic.openListener);
+}
 
 // Elements with [data-close] will close a plugin that supports it when clicked.
 // If used without a value on [data-close], the event will bubble, allowing it to close a parent component.
-$(document).on('click.zf.trigger', '[data-close]', function() {
-  let id = $(this).data('close');
-  if (id) {
-    triggers($(this), 'close');
-  }
-  else {
-    $(this).trigger('close.zf.trigger');
-  }
-});
+Triggers.Initializers.addCloseListener = ($elem) => {
+  $elem.off('click.zf.trigger', Triggers.Listeners.Basic.closeListener);
+  $elem.on('click.zf.trigger', '[data-close]', Triggers.Listeners.Basic.closeListener);
+}
 
 // Elements with [data-toggle] will toggle a plugin that supports it when clicked.
-$(document).on('click.zf.trigger', '[data-toggle]', function() {
-  let id = $(this).data('toggle');
-  if (id) {
-    triggers($(this), 'toggle');
-  } else {
-    $(this).trigger('toggle.zf.trigger');
-  }
-});
+Triggers.Initializers.addToggleListener = ($elem) => {
+  $elem.off('click.zf.trigger', Triggers.Listeners.Basic.toggleListener);
+  $elem.on('click.zf.trigger', '[data-toggle]', Triggers.Listeners.Basic.toggleListener);
+}
 
 // Elements with [data-closable] will respond to close.zf.trigger events.
-$(document).on('close.zf.trigger', '[data-closable]', function(e){
-  e.stopPropagation();
-  let animation = $(this).data('closable');
+Triggers.Initializers.addCloseableListener = ($elem) => {
+  $elem.off('close.zf.trigger', Triggers.Listeners.Basic.closeableListener);
+  $elem.on('close.zf.trigger', '[data-closeable], [data-closable]', Triggers.Listeners.Basic.closeableListener);
+}
+
+// Elements with [data-toggle-focus] will respond to coming in and out of focus
+Triggers.Initializers.addToggleFocusListener = ($elem) => {
+  $elem.off('focus.zf.trigger blur.zf.trigger', Triggers.Listeners.Basic.toggleFocusListener);
+  $elem.on('focus.zf.trigger blur.zf.trigger', '[data-toggle-focus]', Triggers.Listeners.Basic.toggleFocusListener);
+}
+
+
+
+// More Global/complex listeners and triggers
+Triggers.Listeners.Global  = {
+  resizeListener: function($nodes) {
+    if(!MutationObserver){//fallback for IE 9
+      $nodes.each(function(){
+        $(this).triggerHandler('resizeme.zf.trigger');
+      });
+    }
+    //trigger all listening elements and signal a resize event
+    $nodes.attr('data-events', "resize");
+  },
+  scrollListener: function($nodes) {
+    if(!MutationObserver){//fallback for IE 9
+      $nodes.each(function(){
+        $(this).triggerHandler('scrollme.zf.trigger');
+      });
+    }
+    //trigger all listening elements and signal a scroll event
+    $nodes.attr('data-events', "scroll");
+  },
+  closeMeListener: function(e, pluginId){
+    let plugin = e.namespace.split('.')[0];
+    let plugins = $(`[data-${plugin}]`).not(`[data-yeti-box="${pluginId}"]`);
 
-  if(animation !== ''){
-    Foundation.Motion.animateOut($(this), animation, function() {
-      $(this).trigger('closed.zf');
+    plugins.each(function(){
+      let _this = $(this);
+      _this.triggerHandler('close.zf.trigger', [_this]);
     });
-  }else{
-    $(this).fadeOut().trigger('closed.zf');
   }
-});
-
-$(document).on('focus.zf.trigger blur.zf.trigger', '[data-toggle-focus]', function() {
-  let id = $(this).data('toggle-focus');
-  $(`#${id}`).triggerHandler('toggle.zf.trigger', [$(this)]);
-});
-
-/**
-* Fires once after all other scripts have loaded
-* @function
-* @private
-*/
-$(window).on('load', () => {
-  checkListeners();
-});
-
-function checkListeners() {
-  eventsListener();
-  resizeListener();
-  scrollListener();
-  closemeListener();
 }
 
-//******** only fires this function once on load, if there's something to watch ********
-function closemeListener(pluginName) {
+// Global, parses whole document.
+Triggers.Initializers.addClosemeListener = function(pluginName) {
   var yetiBoxes = $('[data-yeti-box]'),
       plugNames = ['dropdown', 'tooltip', 'reveal'];
 
@@ -98,113 +149,120 @@ function closemeListener(pluginName) {
       return `closeme.zf.${name}`;
     }).join(' ');
 
-    $(window).off(listeners).on(listeners, function(e, pluginId){
-      let plugin = e.namespace.split('.')[0];
-      let plugins = $(`[data-${plugin}]`).not(`[data-yeti-box="${pluginId}"]`);
+    $(window).off(listeners).on(listeners, Triggers.Listeners.Global.closeMeListener);
+  }
+}
 
-      plugins.each(function(){
-        let _this = $(this);
+function debounceGlobalListener(debounce, trigger, listener) {
+  let timer, args = Array.prototype.slice.call(arguments, 3);
+  $(window).off(trigger).on(trigger, function(e) {
+    if (timer) { clearTimeout(timer); }
+    timer = setTimeout(function(){
+      listener.apply(null, args);
+    }, debounce || 10);//default time to emit scroll event
+  });
+}
 
-        _this.triggerHandler('close.zf.trigger', [_this]);
-      });
-    });
+Triggers.Initializers.addResizeListener = function(debounce){
+  let $nodes = $('[data-resize]');
+  if($nodes.length){
+    debounceGlobalListener(debounce, 'resize.zf.trigger', Triggers.Listeners.Global.resizeListener, $nodes);
   }
 }
 
-function resizeListener(debounce){
-  let timer,
-      $nodes = $('[data-resize]');
+Triggers.Initializers.addScrollListener = function(debounce){
+  let $nodes = $('[data-scroll]');
   if($nodes.length){
-    $(window).off('resize.zf.trigger')
-    .on('resize.zf.trigger', function(e) {
-      if (timer) { clearTimeout(timer); }
+    debounceGlobalListener(debounce, 'scroll.zf.trigger', Triggers.Listeners.Global.scrollListener, $nodes);
+  }
+}
+
+Triggers.Initializers.addMutationEventsListener = function($elem) {
+  if(!MutationObserver){ return false; }
+  let $nodes = $elem.find('[data-resize], [data-scroll], [data-mutate]');
 
-      timer = setTimeout(function(){
+  //element callback
+  var listeningElementsMutation = function (mutationRecordsList) {
+    var $target = $(mutationRecordsList[0].target);
 
-        if(!MutationObserver){//fallback for IE 9
-          $nodes.each(function(){
-            $(this).triggerHandler('resizeme.zf.trigger');
-          });
+    //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]);
         }
-        //trigger all listening elements and signal a resize event
-        $nodes.attr('data-events', "resize");
-      }, debounce || 10);//default time to emit resize event
-    });
+        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"] });
+    }
   }
 }
 
-function scrollListener(debounce){
-  let timer,
-      $nodes = $('[data-scroll]');
-  if($nodes.length){
-    $(window).off('scroll.zf.trigger')
-    .on('scroll.zf.trigger', function(e){
-      if(timer){ clearTimeout(timer); }
+Triggers.Initializers.addSimpleListeners = function() {
+  let $document = $(document);
 
-      timer = setTimeout(function(){
+  Triggers.Initializers.addOpenListener($document);
+  Triggers.Initializers.addCloseListener($document);
+  Triggers.Initializers.addToggleListener($document);
+  Triggers.Initializers.addCloseableListener($document);
+  Triggers.Initializers.addToggleFocusListener($document);
 
-        if(!MutationObserver){//fallback for IE 9
-          $nodes.each(function(){
-            $(this).triggerHandler('scrollme.zf.trigger');
-          });
-        }
-        //trigger all listening elements and signal a scroll event
-        $nodes.attr('data-events', "scroll");
-      }, debounce || 10);//default time to emit scroll event
-    });
-  }
 }
 
-function eventsListener() {
-  if(!MutationObserver){ return false; }
-  let nodes = document.querySelectorAll('[data-resize], [data-scroll], [data-mutate]');
+Triggers.Initializers.addGlobalListeners = function() {
+  let $document = $(document);
+  Triggers.Initializers.addMutationEventsListener($document);
+  Triggers.Initializers.addResizeListener();
+  Triggers.Initializers.addScrollListener();
+  Triggers.Initializers.addClosemeListener();
+}
 
-  //element callback
-  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"] });
-      }
+
+Triggers.init = function($, Foundation) {
+  if (typeof($.triggersInitialized) === 'undefined') {
+    let $document = $(document);
+
+    if(document.readyState === "complete") {
+      Triggers.Initializers.addSimpleListeners();
+      Triggers.Initializers.addGlobalListeners();
+    } else {
+      $(window).on('load', () => {
+        Triggers.Initializers.addSimpleListeners();
+        Triggers.Initializers.addGlobalListeners();
+      });
     }
-  }
 
-// ------------------------------------
 
-// [PH]
-// Foundation.CheckWatchers = checkWatchers;
-Foundation.IHearYou = checkListeners;
-// Foundation.ISeeYou = scrollListener;
-// Foundation.IFeelYou = closemeListener;
+    $.triggersInitialized = true;
+  }
+
+  if(Foundation) {
+    Foundation.Triggers = Triggers;
+    // Legacy included to be backwards compatible for now.
+    Foundation.IHearYou = Triggers.Initializers.addGlobalListeners
+  }
+}
 
-}(jQuery);
+export {Triggers};

data/vendor/assets/scss/_global.scss

@@ -74,6 +74,10 @@ $global-margin: 1rem !default;
 /// @type Number
 $global-padding: 1rem !default;
 
+/// Global value used for positioning on components.
+/// @type Number
+$global-position: 1rem !default;
+
 /// Global font weight used for normal type.
 /// @type Keyword | Number
 $global-weight-normal: normal !default;
@@ -86,13 +90,24 @@ $global-weight-bold: bold !default;
 /// @type Number
 $global-radius: 0 !default;
 
+/// Global value used for all menu styles. Can be overwritten at individual menu component level.
+/// @type Number
+$global-menu-padding: 0.7rem 1rem !default;
+
+/// Global value used for all menu styles. Nested margin for submenu.
+$global-menu-nested-margin: 1rem !default;
+
 /// Sets the text direction of the CSS. Can be either `ltr` or `rtl`.
 /// @type Keyword
 $global-text-direction: ltr !default;
 
 /// Enables flexbox for components that support it.
 /// @type Boolean
-$global-flexbox: false !default;
+$global-flexbox: true !default;
+
+/// Enabled responsive breakpoints for prototypes if applicable
+/// @type Boolean
+$global-prototype-breakpoints: false !default;
 
 @if not map-has-key($foundation-palette, primary) {
   @error 'In $foundation-palette, you must have a color named "primary".';
@@ -102,6 +117,10 @@ $global-flexbox: false !default;
 $global-left: if($global-text-direction == rtl, right, left);
 $global-right: if($global-text-direction == rtl, left, right);
 
+/// Global tolerance for color pick contrast.
+/// @type Number
+$global-color-pick-contrast-tolerance: 0 !default;
+
 // Internal variables used for colors
 $primary-color: get-color(primary);
 $secondary-color: get-color(secondary);
@@ -202,6 +221,15 @@ $alert-color: get-color(alert);
     overflow: auto;
   }
 
+  // Make reset inherit font-family instead of settings sans-serif
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit;
+  }
+
   // Internal classes to show/hide elements in JavaScript
   .is-visible {
     display: block !important;