foundation-rails 6.1.2.0 → 6.2.0.0

data/vendor/assets/js/{foundation.interchange.js → foundation.interchange.js.es6}

@@ -1,12 +1,15 @@
+'use strict';
+
+!function($) {
+
 /**
  * Interchange module.
  * @module foundation.interchange
  * @requires foundation.util.mediaQuery
  * @requires foundation.util.timerAndImageLoader
  */
-!function(Foundation, $) {
-  'use strict';
 
+class Interchange {
   /**
    * Creates a new instance of Interchange.
    * @class
@@ -14,7 +17,7 @@
    * @param {Object} element - jQuery object to add the trigger to.
    * @param {Object} options - Overrides to the default plugin settings.
    */
-  function Interchange(element, options) {
+  constructor(element, options) {
     this.$element = element;
     this.options = $.extend({}, Interchange.defaults, options);
     this.rules = [];
@@ -26,49 +29,32 @@
     Foundation.registerPlugin(this, 'Interchange');
   }
 
-  /**
-   * Default settings for plugin
-   */
-  Interchange.defaults = {
-    /**
-     * Rules to be applied to Interchange elements. Set with the `data-interchange` array notation.
-     * @option
-     */
-    rules: null
-  };
-
-  Interchange.SPECIAL_QUERIES = {
-    'landscape': 'screen and (orientation: landscape)',
-    'portrait': 'screen and (orientation: portrait)',
-    'retina': 'only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)'
-  };
-
   /**
    * Initializes the Interchange plugin and calls functions to get interchange functioning on load.
    * @function
    * @private
    */
-  Interchange.prototype._init = function() {
+  _init() {
     this._addBreakpoints();
     this._generateRules();
     this._reflow();
-  };
+  }
 
   /**
    * Initializes events for Interchange.
    * @function
    * @private
    */
-  Interchange.prototype._events = function() {
+  _events() {
     $(window).on('resize.zf.interchange', Foundation.util.throttle(this._reflow.bind(this), 50));
-  };
+  }
 
   /**
    * Calls necessary functions to update Interchange upon DOM change
    * @function
    * @private
    */
-  Interchange.prototype._reflow = function() {
+  _reflow() {
     var match;
 
     // Iterate through each rule, but only save the last match
@@ -83,19 +69,19 @@
     if (match) {
       this.replace(match.path);
     }
-  };
+  }
 
   /**
    * Gets the Foundation breakpoints and adds them to the Interchange.SPECIAL_QUERIES object.
    * @function
    * @private
    */
-  Interchange.prototype._addBreakpoints = function() {
+  _addBreakpoints() {
     for (var i in Foundation.MediaQuery.queries) {
       var query = Foundation.MediaQuery.queries[i];
       Interchange.SPECIAL_QUERIES[query.name] = query.value;
     }
-  };
+  }
 
   /**
    * Checks the Interchange element for the provided media query + content pairings
@@ -104,7 +90,7 @@
    * @param {Object} element - jQuery object that is an Interchange instance
    * @returns {Array} scenarios - Array of objects that have 'mq' and 'path' keys with corresponding keys
    */
-  Interchange.prototype._generateRules = function() {
+  _generateRules(element) {
     var rulesList = [];
     var rules;
 
@@ -131,7 +117,7 @@
     }
 
     this.rules = rulesList;
-  };
+  }
 
   /**
    * Update the `src` property of an image, or change the HTML of a container, to the specified path.
@@ -139,7 +125,7 @@
    * @param {String} path - Path to the image or HTML partial.
    * @fires Interchange#replaced
    */
-  Interchange.prototype.replace = function(path) {
+  replace(path) {
     if (this.currentPath === path) return;
 
     var _this = this,
@@ -172,22 +158,35 @@
      * @event Interchange#replaced
      */
     // this.$element.trigger('replaced.zf.interchange');
-  };
+  }
+
   /**
    * Destroys an instance of interchange.
    * @function
    */
-  Interchange.prototype.destroy = function(){
+  destroy() {
     //TODO this.
-  };
-  Foundation.plugin(Interchange, 'Interchange');
-
-  // Exports for AMD/Browserify
-  if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
-    module.exports = Interchange;
-  if (typeof define === 'function')
-    define(['foundation'], function() {
-      return Interchange;
-    });
-
-}(Foundation, jQuery);
+  }
+}
+
+/**
+ * Default settings for plugin
+ */
+Interchange.defaults = {
+  /**
+   * Rules to be applied to Interchange elements. Set with the `data-interchange` array notation.
+   * @option
+   */
+  rules: null
+};
+
+Interchange.SPECIAL_QUERIES = {
+  'landscape': 'screen and (orientation: landscape)',
+  'portrait': 'screen and (orientation: portrait)',
+  'retina': 'only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)'
+};
+
+// Window exports
+Foundation.plugin(Interchange, 'Interchange');
+
+}(jQuery);

data/vendor/assets/js/{foundation.magellan.js → foundation.magellan.js.es6}

@@ -1,10 +1,13 @@
+'use strict';
+
+!function($) {
+
 /**
  * Magellan module.
  * @module foundation.magellan
  */
-!function(Foundation, $) {
-  'use strict';
 
+class Magellan {
   /**
    * Creates a new instance of Magellan.
    * @class
@@ -12,7 +15,7 @@
    * @param {Object} element - jQuery object to add the trigger to.
    * @param {Object} options - Overrides to the default plugin settings.
    */
-  function Magellan(element, options) {
+  constructor(element, options) {
     this.$element = element;
     this.options  = $.extend({}, Magellan.defaults, this.$element.data(), options);
 
@@ -21,55 +24,13 @@
     Foundation.registerPlugin(this, 'Magellan');
   }
 
-  /**
-   * Default settings for plugin
-   */
-  Magellan.defaults = {
-    /**
-     * Amount of time, in ms, the animated scrolling should take between locations.
-     * @option
-     * @example 500
-     */
-    animationDuration: 500,
-    /**
-     * Animation style to use when scrolling between locations.
-     * @option
-     * @example 'ease-in-out'
-     */
-    animationEasing: 'linear',
-    /**
-     * Number of pixels to use as a marker for location changes.
-     * @option
-     * @example 50
-     */
-    threshold: 50,
-    /**
-     * Class applied to the active locations link on the magellan container.
-     * @option
-     * @example 'active'
-     */
-    activeClass: 'active',
-    /**
-     * Allows the script to manipulate the url of the current page, and if supported, alter the history.
-     * @option
-     * @example true
-     */
-    deepLinking: false,
-    /**
-     * Number of pixels to offset the scroll of the page on item click if using a sticky nav bar.
-     * @option
-     * @example 25
-     */
-    barOffset: 0
-  };
-
   /**
    * Initializes the Magellan plugin and calls functions to get equalizer functioning on load.
    * @private
    */
-  Magellan.prototype._init = function() {
-    var id = this.$element[0].id || Foundation.GetYoDigits(6, 'magellan'),
-        _this = this;
+  _init() {
+    var id = this.$element[0].id || Foundation.GetYoDigits(6, 'magellan');
+    var _this = this;
     this.$targets = $('[data-magellan-target]');
     this.$links = this.$element.find('a');
     this.$element.attr({
@@ -81,13 +42,14 @@
     this.scrollPos = parseInt(window.pageYOffset, 10);
 
     this._events();
-  };
+  }
+
   /**
    * Calculates an array of pixel values that are the demarcation lines between locations on the page.
    * Can be invoked if new elements are added or the size of a location changes.
    * @function
    */
-  Magellan.prototype.calcPoints = function(){
+  calcPoints() {
     var _this = this,
         body = document.body,
         html = document.documentElement;
@@ -102,12 +64,13 @@
       $tar.targetPoint = pt;
       _this.points.push(pt);
     });
-  };
+  }
+
   /**
    * Initializes events for Magellan.
    * @private
    */
-  Magellan.prototype._events = function() {
+  _events() {
     var _this = this,
         $body = $('html, body'),
         opts = {
@@ -132,39 +95,35 @@
         var arrival   = this.getAttribute('href');
         _this.scrollToLoc(arrival);
     });
-  };
+  }
+
   /**
    * Function to scroll to a given location on the page.
-   * @param {String} loc - a properly formatted jQuery id selector.
-   * @example '#foo'
+   * @param {String} loc - a properly formatted jQuery id selector. Example: '#foo'
    * @function
    */
-  Magellan.prototype.scrollToLoc = function(loc){
-    var scrollPos = $(loc).offset().top - this.options.threshold / 2 - this.options.barOffset;
-
-    $(document.body).stop(true).animate({
-        scrollTop: scrollPos
-      },
-      {
-        duration: this.options.animationDuration,
-        easiing: this.options.animationEasing
-     });
-  };
+  scrollToLoc(loc) {
+    var scrollPos = Math.round($(loc).offset().top - this.options.threshold / 2 - this.options.barOffset);
+
+    $('html, body').stop(true).animate({ scrollTop: scrollPos }, this.options.animationDuration, this.options.animationEasing);
+  }
+
   /**
    * Calls necessary functions to update Magellan upon DOM change
    * @function
    */
-  Magellan.prototype.reflow = function(){
+  reflow() {
     this.calcPoints();
     this._updateActive();
-  };
+  }
+
   /**
    * Updates the visibility of an active location link, and updates the url hash for the page, if deepLinking enabled.
    * @private
    * @function
    * @fires Magellan#update
    */
-  Magellan.prototype._updateActive = function(/*evt, elem, scrollPos*/){
+  _updateActive(/*evt, elem, scrollPos*/) {
     var winPos = /*scrollPos ||*/ parseInt(window.pageYOffset, 10),
         curIdx;
 
@@ -197,14 +156,15 @@
      * @event Magellan#update
      */
     this.$element.trigger('update.zf.magellan', [this.$active]);
-  };
+  }
+
   /**
    * Destroys an instance of Magellan and resets the url of the window.
    * @function
    */
-  Magellan.prototype.destroy = function(){
+  destroy() {
     this.$element.off('.zf.trigger .zf.magellan')
-        .find('.' + this.options.activeClass).removeClass(this.options.activeClass);
+        .find(`.${this.options.activeClass}`).removeClass(this.options.activeClass);
 
     if(this.options.deepLinking){
       var hash = this.$active[0].getAttribute('href');
@@ -212,15 +172,52 @@
     }
 
     Foundation.unregisterPlugin(this);
-  };
-  Foundation.plugin(Magellan, 'Magellan');
-
-  // Exports for AMD/Browserify
-  if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
-    module.exports = Magellan;
-  if (typeof define === 'function')
-    define(['foundation'], function() {
-      return Magellan;
-    });
+  }
+}
+
+/**
+ * Default settings for plugin
+ */
+Magellan.defaults = {
+  /**
+   * Amount of time, in ms, the animated scrolling should take between locations.
+   * @option
+   * @example 500
+   */
+  animationDuration: 500,
+  /**
+   * Animation style to use when scrolling between locations.
+   * @option
+   * @example 'ease-in-out'
+   */
+  animationEasing: 'linear',
+  /**
+   * Number of pixels to use as a marker for location changes.
+   * @option
+   * @example 50
+   */
+  threshold: 50,
+  /**
+   * Class applied to the active locations link on the magellan container.
+   * @option
+   * @example 'active'
+   */
+  activeClass: 'active',
+  /**
+   * Allows the script to manipulate the url of the current page, and if supported, alter the history.
+   * @option
+   * @example true
+   */
+  deepLinking: false,
+  /**
+   * Number of pixels to offset the scroll of the page on item click if using a sticky nav bar.
+   * @option
+   * @example 25
+   */
+  barOffset: 0
+}
+
+// Window exports
+Foundation.plugin(Magellan, 'Magellan');
 
-}(Foundation, jQuery);
+}(jQuery);

data/vendor/assets/js/foundation.offcanvas.js.es6

@@ -0,0 +1,395 @@
+'use strict';
+
+!function($) {
+
+/**
+ * OffCanvas module.
+ * @module foundation.offcanvas
+ * @requires foundation.util.mediaQuery
+ * @requires foundation.util.triggers
+ * @requires foundation.util.motion
+ */
+
+class OffCanvas {
+  /**
+   * Creates a new instance of an off-canvas wrapper.
+   * @class
+   * @fires OffCanvas#init
+   * @param {Object} element - jQuery object to initialize.
+   * @param {Object} options - Overrides to the default plugin settings.
+   */
+  constructor(element, options) {
+    this.$element = element;
+    this.options = $.extend({}, OffCanvas.defaults, this.$element.data(), options);
+    this.$lastTrigger = $();
+
+    this._init();
+    this._events();
+
+    Foundation.registerPlugin(this, 'OffCanvas');
+  }
+
+  /**
+   * Initializes the off-canvas wrapper by adding the exit overlay (if needed).
+   * @function
+   * @private
+   */
+  _init() {
+    var id = this.$element.attr('id');
+
+    this.$element.attr('aria-hidden', 'true');
+
+    // Find triggers that affect this element and add aria-expanded to them
+    $(document)
+      .find('[data-open="'+id+'"], [data-close="'+id+'"], [data-toggle="'+id+'"]')
+      .attr('aria-expanded', 'false')
+      .attr('aria-controls', id);
+
+    // Add a close trigger over the body if necessary
+    if (this.options.closeOnClick) {
+      if ($('.js-off-canvas-exit').length) {
+        this.$exiter = $('.js-off-canvas-exit');
+      } else {
+        var exiter = document.createElement('div');
+        exiter.setAttribute('class', 'js-off-canvas-exit');
+        $('[data-off-canvas-content]').append(exiter);
+
+        this.$exiter = $(exiter);
+      }
+    }
+
+    this.options.isRevealed = this.options.isRevealed || new RegExp(this.options.revealClass, 'g').test(this.$element[0].className);
+
+    if (this.options.isRevealed) {
+      this.options.revealOn = this.options.revealOn || this.$element[0].className.match(/(reveal-for-medium|reveal-for-large)/g)[0].split('-')[2];
+      this._setMQChecker();
+    }
+    if (!this.options.transitionTime) {
+      this.options.transitionTime = parseFloat(window.getComputedStyle($('[data-off-canvas-wrapper]')[0]).transitionDuration) * 1000;
+    }
+  }
+
+  /**
+   * Adds event handlers to the off-canvas wrapper and the exit overlay.
+   * @function
+   * @private
+   */
+  _events() {
+    this.$element.off('.zf.trigger .zf.offcanvas').on({
+      'open.zf.trigger': this.open.bind(this),
+      'close.zf.trigger': this.close.bind(this),
+      'toggle.zf.trigger': this.toggle.bind(this),
+      'keydown.zf.offcanvas': this._handleKeyboard.bind(this)
+    });
+
+    if (this.options.closeOnClick && this.$exiter.length) {
+      this.$exiter.on({'click.zf.offcanvas': this.close.bind(this)});
+    }
+  }
+
+  /**
+   * Applies event listener for elements that will reveal at certain breakpoints.
+   * @private
+   */
+  _setMQChecker() {
+    var _this = this;
+
+    $(window).on('changed.zf.mediaquery', function() {
+      if (Foundation.MediaQuery.atLeast(_this.options.revealOn)) {
+        _this.reveal(true);
+      } else {
+        _this.reveal(false);
+      }
+    }).one('load.zf.offcanvas', function() {
+      if (Foundation.MediaQuery.atLeast(_this.options.revealOn)) {
+        _this.reveal(true);
+      }
+    });
+  }
+
+  /**
+   * Handles the revealing/hiding the off-canvas at breakpoints, not the same as open.
+   * @param {Boolean} isRevealed - true if element should be revealed.
+   * @function
+   */
+  reveal(isRevealed) {
+    var $closer = this.$element.find('[data-close]');
+    if (isRevealed) {
+      this.close();
+      this.isRevealed = true;
+      // if (!this.options.forceTop) {
+      //   var scrollPos = parseInt(window.pageYOffset);
+      //   this.$element[0].style.transform = 'translate(0,' + scrollPos + 'px)';
+      // }
+      // if (this.options.isSticky) { this._stick(); }
+      this.$element.off('open.zf.trigger toggle.zf.trigger');
+      if ($closer.length) { $closer.hide(); }
+    } else {
+      this.isRevealed = false;
+      // if (this.options.isSticky || !this.options.forceTop) {
+      //   this.$element[0].style.transform = '';
+      //   $(window).off('scroll.zf.offcanvas');
+      // }
+      this.$element.on({
+        'open.zf.trigger': this.open.bind(this),
+        'toggle.zf.trigger': this.toggle.bind(this)
+      });
+      if ($closer.length) {
+        $closer.show();
+      }
+    }
+  }
+
+  /**
+   * Opens the off-canvas menu.
+   * @function
+   * @param {Object} event - Event object passed from listener.
+   * @param {jQuery} trigger - element that triggered the off-canvas to open.
+   * @fires OffCanvas#opened
+   */
+  open(event, trigger) {
+    if (this.$element.hasClass('is-open') || this.isRevealed) { return; }
+    var _this = this,
+        $body = $(document.body);
+
+    if (this.options.forceTop) {
+      $('body').scrollTop(0);
+    }
+    // window.pageYOffset = 0;
+
+    // if (!this.options.forceTop) {
+    //   var scrollPos = parseInt(window.pageYOffset);
+    //   this.$element[0].style.transform = 'translate(0,' + scrollPos + 'px)';
+    //   if (this.$exiter.length) {
+    //     this.$exiter[0].style.transform = 'translate(0,' + scrollPos + 'px)';
+    //   }
+    // }
+    /**
+     * Fires when the off-canvas menu opens.
+     * @event OffCanvas#opened
+     */
+    Foundation.Move(this.options.transitionTime, this.$element, function() {
+      $('[data-off-canvas-wrapper]').addClass('is-off-canvas-open is-open-'+ _this.options.position);
+
+      _this.$element
+        .addClass('is-open')
+
+      // if (_this.options.isSticky) {
+      //   _this._stick();
+      // }
+    });
+    this.$element.attr('aria-hidden', 'false')
+        .trigger('opened.zf.offcanvas');
+
+    if (this.options.closeOnClick) {
+      this.$exiter.addClass('is-visible');
+    }
+
+    if (trigger) {
+      this.$lastTrigger = trigger.attr('aria-expanded', 'true');
+    }
+
+    if (this.options.autoFocus) {
+      this.$element.one(Foundation.transitionend(this.$element), function() {
+        _this.$element.find('a, button').eq(0).focus();
+      });
+    }
+
+    if (this.options.trapFocus) {
+      $('[data-off-canvas-content]').attr('tabindex', '-1');
+      this._trapFocus();
+    }
+  }
+
+  /**
+   * Traps focus within the offcanvas on open.
+   * @private
+   */
+  _trapFocus() {
+    var focusable = Foundation.Keyboard.findFocusable(this.$element),
+        first = focusable.eq(0),
+        last = focusable.eq(-1);
+
+    focusable.off('.zf.offcanvas').on('keydown.zf.offcanvas', function(e) {
+      if (e.which === 9 || e.keycode === 9) {
+        if (e.target === last[0] && !e.shiftKey) {
+          e.preventDefault();
+          first.focus();
+        }
+        if (e.target === first[0] && e.shiftKey) {
+          e.preventDefault();
+          last.focus();
+        }
+      }
+    });
+  }
+
+  /**
+   * Allows the offcanvas to appear sticky utilizing translate properties.
+   * @private
+   */
+  // OffCanvas.prototype._stick = function() {
+  //   var elStyle = this.$element[0].style;
+  //
+  //   if (this.options.closeOnClick) {
+  //     var exitStyle = this.$exiter[0].style;
+  //   }
+  //
+  //   $(window).on('scroll.zf.offcanvas', function(e) {
+  //     console.log(e);
+  //     var pageY = window.pageYOffset;
+  //     elStyle.transform = 'translate(0,' + pageY + 'px)';
+  //     if (exitStyle !== undefined) { exitStyle.transform = 'translate(0,' + pageY + 'px)'; }
+  //   });
+  //   // this.$element.trigger('stuck.zf.offcanvas');
+  // };
+  /**
+   * Closes the off-canvas menu.
+   * @function
+   * @param {Function} cb - optional cb to fire after closure.
+   * @fires OffCanvas#closed
+   */
+  close(cb) {
+    if (!this.$element.hasClass('is-open') || this.isRevealed) { return; }
+
+    var _this = this;
+
+    //  Foundation.Move(this.options.transitionTime, this.$element, function() {
+    $('[data-off-canvas-wrapper]').removeClass(`is-off-canvas-open is-open-${_this.options.position}`);
+    _this.$element.removeClass('is-open');
+      // Foundation._reflow();
+    // });
+    this.$element.attr('aria-hidden', 'true')
+      /**
+       * Fires when the off-canvas menu opens.
+       * @event OffCanvas#closed
+       */
+        .trigger('closed.zf.offcanvas');
+    // if (_this.options.isSticky || !_this.options.forceTop) {
+    //   setTimeout(function() {
+    //     _this.$element[0].style.transform = '';
+    //     $(window).off('scroll.zf.offcanvas');
+    //   }, this.options.transitionTime);
+    // }
+    if (this.options.closeOnClick) {
+      this.$exiter.removeClass('is-visible');
+    }
+
+    this.$lastTrigger.attr('aria-expanded', 'false');
+    if (this.options.trapFocus) {
+      $('[data-off-canvas-content]').removeAttr('tabindex');
+    }
+  }
+
+  /**
+   * Toggles the off-canvas menu open or closed.
+   * @function
+   * @param {Object} event - Event object passed from listener.
+   * @param {jQuery} trigger - element that triggered the off-canvas to open.
+   */
+  toggle(event, trigger) {
+    if (this.$element.hasClass('is-open')) {
+      this.close(event, trigger);
+    }
+    else {
+      this.open(event, trigger);
+    }
+  }
+
+  /**
+   * Handles keyboard input when detected. When the escape key is pressed, the off-canvas menu closes, and focus is restored to the element that opened the menu.
+   * @function
+   * @private
+   */
+  _handleKeyboard(event) {
+    if (event.which !== 27) return;
+
+    event.stopPropagation();
+    event.preventDefault();
+    this.close();
+    this.$lastTrigger.focus();
+  }
+
+  /**
+   * Destroys the offcanvas plugin.
+   * @function
+   */
+  destroy() {
+    this.close();
+    this.$element.off('.zf.trigger .zf.offcanvas');
+    this.$exiter.off('.zf.offcanvas');
+
+    Foundation.unregisterPlugin(this);
+  }
+}
+
+OffCanvas.defaults = {
+  /**
+   * Allow the user to click outside of the menu to close it.
+   * @option
+   * @example true
+   */
+  closeOnClick: true,
+
+  /**
+   * Amount of time in ms the open and close transition requires. If none selected, pulls from body style.
+   * @option
+   * @example 500
+   */
+  transitionTime: 0,
+
+  /**
+   * Direction the offcanvas opens from. Determines class applied to body.
+   * @option
+   * @example left
+   */
+  position: 'left',
+
+  /**
+   * Force the page to scroll to top on open.
+   * @option
+   * @example true
+   */
+  forceTop: true,
+
+  /**
+   * Allow the offcanvas to remain open for certain breakpoints.
+   * @option
+   * @example false
+   */
+  isRevealed: false,
+
+  /**
+   * Breakpoint at which to reveal. JS will use a RegExp to target standard classes, if changing classnames, pass your class with the `revealClass` option.
+   * @option
+   * @example reveal-for-large
+   */
+  revealOn: null,
+
+  /**
+   * Force focus to the offcanvas on open. If true, will focus the opening trigger on close.
+   * @option
+   * @example true
+   */
+  autoFocus: true,
+
+  /**
+   * Class used to force an offcanvas to remain open. Foundation defaults for this are `reveal-for-large` & `reveal-for-medium`.
+   * @option
+   * TODO improve the regex testing for this.
+   * @example reveal-for-large
+   */
+  revealClass: 'reveal-for-',
+
+  /**
+   * Triggers optional focus trapping when opening an offcanvas. Sets tabindex of [data-off-canvas-content] to -1 for accessibility purposes.
+   * @option
+   * @example true
+   */
+  trapFocus: false
+}
+
+// Window exports
+Foundation.plugin(OffCanvas, 'OffCanvas');
+
+}(jQuery);