foundation-rails 6.3.1.0 → 6.4.1.0

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

@@ -1,7 +1,15 @@
 'use strict';
 
-!function($) {
+import $ from 'jquery';
+import { Keyboard } from './foundation.util.keyboard';
+import { Move } from './foundation.util.motion';
+import { GetYoDigits, rtl as Rtl } from './foundation.util.core';
 
+import { Plugin } from './foundation.plugin';
+
+import { Touch } from './foundation.util.touch';
+
+import { Triggers } from './foundation.util.triggers';
 /**
  * Slider module.
  * @module foundation.slider
@@ -11,21 +19,26 @@
  * @requires foundation.util.touch
  */
 
-class Slider {
+class Slider extends Plugin {
   /**
    * Creates a new instance of a slider control.
    * @class
+   * @name Slider
    * @param {jQuery} element - jQuery object to make into a slider control.
    * @param {Object} options - Overrides to the default plugin settings.
    */
-  constructor(element, options) {
+  _setup(element, options) {
     this.$element = element;
     this.options = $.extend({}, Slider.defaults, this.$element.data(), options);
+    this.className = 'Slider'; // ie9 back compat
+
+  // Touch and Triggers inits are idempotent, we just need to make sure it's initialied.
+    Touch.init($);
+    Triggers.init($);
 
     this._init();
 
-    Foundation.registerPlugin(this, 'Slider');
-    Foundation.Keyboard.register('Slider', {
+    Keyboard.register('Slider', {
       'ltr': {
         'ARROW_RIGHT': 'increase',
         'ARROW_UP': 'increase',
@@ -34,7 +47,9 @@ class Slider {
         'SHIFT_ARROW_RIGHT': 'increase_fast',
         'SHIFT_ARROW_UP': 'increase_fast',
         'SHIFT_ARROW_DOWN': 'decrease_fast',
-        'SHIFT_ARROW_LEFT': 'decrease_fast'
+        'SHIFT_ARROW_LEFT': 'decrease_fast',
+        'HOME': 'min',
+        'END': 'max'
       },
       'rtl': {
         'ARROW_LEFT': 'increase',
@@ -258,7 +273,7 @@ class Slider {
     //because we don't know exactly how the handle will be moved, check the amount of time it should take to move.
     var moveTime = this.$element.data('dragging') ? 1000/60 : this.options.moveTime;
 
-    Foundation.Move(moveTime, $hndl, function() {
+    Move(moveTime, $hndl, function() {
       // adjusting the left/top property of the handle, based on the percentage calculated above
       // if movement isNaN, that is because the slider is hidden and we cannot determine handle width,
       // fall back to next best guess.
@@ -297,7 +312,7 @@ class Slider {
    */
   _setInitAttr(idx) {
     var initVal = (idx === 0 ? this.options.initialStart : this.options.initialEnd)
-    var id = this.inputs.eq(idx).attr('id') || Foundation.GetYoDigits(6, 'slider');
+    var id = this.inputs.eq(idx).attr('id') || GetYoDigits(6, 'slider');
     this.inputs.eq(idx).attr({
       'id': id,
       'max': this.options.end,
@@ -373,7 +388,7 @@ class Slider {
       value = this._value(offsetPct);
 
       // turn everything around for RTL, yay math!
-      if (Foundation.rtl() && !this.options.vertical) {value = this.options.end - value;}
+      if (Rtl() && !this.options.vertical) {value = this.options.end - value;}
 
       value = _this._adjustValue(null, value);
       //boolean flag for the setHandlePos fn, specifically for vertical sliders
@@ -504,7 +519,7 @@ class Slider {
           newValue;
 
       // handle keyboard event with keyboard util
-      Foundation.Keyboard.handleKey(e, 'Slider', {
+      Keyboard.handleKey(e, 'Slider', {
         decrease: function() {
           newValue = oldValue - _this.options.step;
         },
@@ -517,6 +532,12 @@ class Slider {
         increase_fast: function() {
           newValue = oldValue + _this.options.step * 10;
         },
+        min: function() {
+          newValue = _this.options.start;
+        },
+        max: function() {
+          newValue = _this.options.end;
+        },
         handled: function() { // only set handle pos when event was handled specially
           e.preventDefault();
           _this._setHandlePos(_$handle, newValue, true);
@@ -532,14 +553,12 @@ class Slider {
   /**
    * Destroys the slider plugin.
    */
-  destroy() {
+  _destroy() {
     this.handles.off('.zf.slider');
     this.inputs.off('.zf.slider');
     this.$element.off('.zf.slider');
 
     clearTimeout(this.timeout);
-
-    Foundation.unregisterPlugin(this);
   }
 }
 
@@ -690,8 +709,4 @@ function baseLog(base, value) {
   return Math.log(value)/Math.log(base)
 }
 
-// Window exports
-Foundation.plugin(Slider, 'Slider');
-
-}(jQuery);
-
+export {Slider};

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

@@ -0,0 +1,135 @@
+'use strict';
+
+import $ from 'jquery';
+import { GetYoDigits } from './foundation.util.core';
+import { Plugin } from './foundation.plugin';
+
+/**
+ * SmoothScroll module.
+ * @module foundation.smooth-scroll
+ */
+class SmoothScroll extends Plugin {
+  /**
+   * Creates a new instance of SmoothScroll.
+   * @class
+   * @name SmoothScroll
+   * @fires SmoothScroll#init
+   * @param {Object} element - jQuery object to add the trigger to.
+   * @param {Object} options - Overrides to the default plugin settings.
+   */
+    _setup(element, options) {
+        this.$element = element;
+        this.options = $.extend({}, SmoothScroll.defaults, this.$element.data(), options);
+        this.className = 'SmoothScroll'; // ie9 back compat
+
+        this._init();
+    }
+
+    /**
+     * Initialize the SmoothScroll plugin
+     * @private
+     */
+    _init() {
+        var id = this.$element[0].id || GetYoDigits(6, 'smooth-scroll');
+        var _this = this;
+        this.$element.attr({
+            'id': id
+        });
+
+        this._events();
+    }
+
+    /**
+     * Initializes events for SmoothScroll.
+     * @private
+     */
+    _events() {
+        var _this = this;
+
+        // click handler function.
+        var handleLinkClick = function(e) {
+            // exit function if the event source isn't coming from an anchor with href attribute starts with '#'
+            if(!$(this).is('a[href^="#"]'))  {
+                return false;
+            }
+
+            var arrival = this.getAttribute('href');
+
+            _this._inTransition = true;
+
+            SmoothScroll.scrollToLoc(arrival, _this.options, function() {
+                _this._inTransition = false;
+            });
+
+            e.preventDefault();
+        };
+
+        this.$element.on('click.zf.smoothScroll', handleLinkClick)
+        this.$element.on('click.zf.smoothScroll', 'a[href^="#"]', handleLinkClick);
+    }
+
+    /**
+     * Function to scroll to a given location on the page.
+     * @param {String} loc - A properly formatted jQuery id selector. Example: '#foo'
+     * @param {Object} options - The options to use.
+     * @param {Function} callback - The callback function.
+     * @static
+     * @function
+     */
+    static scrollToLoc(loc, options = SmoothScroll.defaults, callback) {
+        // Do nothing if target does not exist to prevent errors
+        if (!$(loc).length) {
+            return false;
+        }
+
+        var scrollPos = Math.round($(loc).offset().top - options.threshold / 2 - options.offset);
+
+        $('html, body').stop(true).animate(
+            { scrollTop: scrollPos },
+            options.animationDuration,
+            options.animationEasing,
+            function() {
+                if(callback && typeof callback == "function"){
+                    callback();
+                }
+            }
+        );
+    }
+}
+
+/**
+ * Default settings for plugin.
+ */
+SmoothScroll.defaults = {
+  /**
+   * Amount of time, in ms, the animated scrolling should take between locations.
+   * @option
+   * @type {number}
+   * @default 500
+   */
+  animationDuration: 500,
+  /**
+   * Animation style to use when scrolling between locations. Can be `'swing'` or `'linear'`.
+   * @option
+   * @type {string}
+   * @default 'linear'
+   * @see {@link https://api.jquery.com/animate|Jquery animate}
+   */
+  animationEasing: 'linear',
+  /**
+   * Number of pixels to use as a marker for location changes.
+   * @option
+   * @type {number}
+   * @default 50
+   */
+  threshold: 50,
+  /**
+   * Number of pixels to offset the scroll of the page on item click if using a sticky nav bar.
+   * @option
+   * @type {number}
+   * @default 0
+   */
+  offset: 0
+}
+
+export {SmoothScroll}

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

@@ -1,6 +1,10 @@
 'use strict';
 
-!function($) {
+import $ from 'jquery';
+import { GetYoDigits } from './foundation.util.core';
+import { MediaQuery } from './foundation.util.mediaQuery';
+import { Plugin } from './foundation.plugin';
+import { Triggers } from './foundation.util.triggers';
 
 /**
  * Sticky module.
@@ -9,20 +13,23 @@
  * @requires foundation.util.mediaQuery
  */
 
-class Sticky {
+class Sticky extends Plugin {
   /**
    * Creates a new instance of a sticky thing.
    * @class
+   * @name Sticky
    * @param {jQuery} element - jQuery object to make sticky.
    * @param {Object} options - options object passed when creating the element programmatically.
    */
-  constructor(element, options) {
+  _setup(element, options) {
     this.$element = element;
     this.options = $.extend({}, Sticky.defaults, this.$element.data(), options);
+    this.className = 'Sticky'; // ie9 back compat
 
-    this._init();
+    // Triggers init is idempotent, just need to make sure it is initialized
+    Triggers.init($);
 
-    Foundation.registerPlugin(this, 'Sticky');
+    this._init();
   }
 
   /**
@@ -31,14 +38,19 @@ class Sticky {
    * @private
    */
   _init() {
+    MediaQuery._init();
+
     var $parent = this.$element.parent('[data-sticky-container]'),
-        id = this.$element[0].id || Foundation.GetYoDigits(6, 'sticky'),
+        id = this.$element[0].id || GetYoDigits(6, 'sticky'),
         _this = this;
 
-    if (!$parent.length) {
+    if($parent.length){
+      this.$container = $parent;
+    } else {
       this.wasWrapped = true;
+      this.$element.wrap(this.options.container);
+      this.$container = this.$element.parent();
     }
-    this.$container = $parent.length ? $parent : $(this.options.container).wrapInner(this.$element);
     this.$container.addClass(this.options.containerClass);
 
     this.$element.addClass(this.options.stickyClass).attr({ 'data-resize': id, 'data-mutate': id });
@@ -105,7 +117,7 @@ class Sticky {
   /**
    * Adds event handlers for the scrolling element.
    * @private
-   * @param {String} id - psuedo-random id for unique scroll event listener.
+   * @param {String} id - pseudo-random id for unique scroll event listener.
    */
   _events(id) {
     var _this = this,
@@ -146,7 +158,7 @@ class Sticky {
   /**
    * Handler for events.
    * @private
-   * @param {String} id - psuedo-random id for unique scroll event listener.
+   * @param {String} id - pseudo-random id for unique scroll event listener.
    */
   _eventsHandler(id) {
        var _this = this,
@@ -293,7 +305,7 @@ class Sticky {
    * @private
    */
   _setSizes(cb) {
-    this.canStick = Foundation.MediaQuery.is(this.options.stickyOn);
+    this.canStick = MediaQuery.is(this.options.stickyOn);
     if (!this.canStick) {
       if (cb && typeof cb === 'function') { cb(); }
     }
@@ -376,7 +388,7 @@ class Sticky {
    * Removes event listeners, JS-added css properties and classes, and unwraps the $element if the JS added the $container.
    * @function
    */
-  destroy() {
+  _destroy() {
     this._removeSticky(true);
 
     this.$element.removeClass(`${this.options.stickyClass} is-anchored is-at-top`)
@@ -401,7 +413,6 @@ class Sticky {
                        height: ''
                      });
     }
-    Foundation.unregisterPlugin(this);
   }
 }
 
@@ -493,7 +504,4 @@ function emCalc(em) {
   return parseInt(window.getComputedStyle(document.body, null).fontSize, 10) * em;
 }
 
-// Window exports
-Foundation.plugin(Sticky, 'Sticky');
-
-}(jQuery);
+export {Sticky};

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

@@ -1,29 +1,32 @@
 'use strict';
 
-!function($) {
-
+import $ from 'jquery';
+import { Keyboard } from './foundation.util.keyboard';
+import { onImagesLoaded } from './foundation.util.imageLoader';
+import { Plugin } from './foundation.plugin';
 /**
  * Tabs module.
  * @module foundation.tabs
  * @requires foundation.util.keyboard
- * @requires foundation.util.timerAndImageLoader if tabs contain images
+ * @requires foundation.util.imageLoader if tabs contain images
  */
 
-class Tabs {
+class Tabs extends Plugin {
   /**
    * Creates a new instance of tabs.
    * @class
+   * @name Tabs
    * @fires Tabs#init
    * @param {jQuery} element - jQuery object to make into tabs.
    * @param {Object} options - Overrides to the default plugin settings.
    */
-  constructor(element, options) {
+  _setup(element, options) {
     this.$element = element;
     this.options = $.extend({}, Tabs.defaults, this.$element.data(), options);
+    this.className = 'Tabs'; // ie9 back compat
 
     this._init();
-    Foundation.registerPlugin(this, 'Tabs');
-    Foundation.Keyboard.register('Tabs', {
+    Keyboard.register('Tabs', {
       'ENTER': 'open',
       'SPACE': 'open',
       'ARROW_RIGHT': 'next',
@@ -50,7 +53,7 @@ class Tabs {
       var $elem = $(this),
           $link = $elem.find('a'),
           isActive = $elem.hasClass(`${_this.options.linkActiveClass}`),
-          hash = $link[0].hash.slice(1),
+          hash = $link.attr('data-tabs-target') || $link[0].hash.slice(1),
           linkId = $link[0].id ? $link[0].id : `${hash}-label`,
           $tabContent = $(`#${hash}`);
 
@@ -60,15 +63,19 @@ class Tabs {
         'role': 'tab',
         'aria-controls': hash,
         'aria-selected': isActive,
-        'id': linkId
+        'id': linkId,
+        'tabindex': isActive ? '0' : '-1'
       });
 
       $tabContent.attr({
         'role': 'tabpanel',
-        'aria-hidden': !isActive,
         'aria-labelledby': linkId
       });
 
+      if(!isActive) {
+        $tabContent.attr('aria-hidden', 'true');
+      }
+
       if(isActive && _this.options.autoFocus){
         $(window).load(function() {
           $('html, body').animate({ scrollTop: $elem.offset().top }, _this.options.deepLinkSmudgeDelay, () => {
@@ -81,7 +88,7 @@ class Tabs {
       var $images = this.$tabContent.find('img');
 
       if ($images.length) {
-        Foundation.onImagesLoaded($images, this._setHeight.bind(this));
+        onImagesLoaded($images, this._setHeight.bind(this));
       } else {
         this._setHeight();
       }
@@ -185,7 +192,7 @@ class Tabs {
       });
 
       // handle keyboard event with keyboard util
-      Foundation.Keyboard.handleKey(e, 'Tabs', {
+      Keyboard.handleKey(e, 'Tabs', {
         open: function() {
           $element.find('[role="tab"]').focus();
           _this._handleTabChange($element);
@@ -234,8 +241,8 @@ class Tabs {
     var $oldTab = this.$element.
           find(`.${this.options.linkClass}.${this.options.linkActiveClass}`),
           $tabLink = $target.find('[role="tab"]'),
-          hash = $tabLink[0].hash,
-          $targetContent = this.$tabContent.find(hash);
+          hash = $tabLink.attr('data-tabs-target') || $tabLink[0].hash.slice(1),
+          $targetContent = this.$tabContent.find(`#${hash}`);
 
     //close old tab
     this._collapseTab($oldTab);
@@ -271,16 +278,18 @@ class Tabs {
    */
   _openTab($target) {
       var $tabLink = $target.find('[role="tab"]'),
-          hash = $tabLink[0].hash,
-          $targetContent = this.$tabContent.find(hash);
+          hash = $tabLink.attr('data-tabs-target') || $tabLink[0].hash.slice(1),
+          $targetContent = this.$tabContent.find(`#${hash}`);
 
       $target.addClass(`${this.options.linkActiveClass}`);
 
-      $tabLink.attr({'aria-selected': 'true'});
+      $tabLink.attr({
+        'aria-selected': 'true',
+        'tabindex': '0'
+      });
 
       $targetContent
-        .addClass(`${this.options.panelActiveClass}`)
-        .attr({'aria-hidden': 'false'});
+        .addClass(`${this.options.panelActiveClass}`).removeAttr('aria-hidden');
   }
 
   /**
@@ -292,11 +301,14 @@ class Tabs {
     var $target_anchor = $target
       .removeClass(`${this.options.linkActiveClass}`)
       .find('[role="tab"]')
-      .attr({ 'aria-selected': 'false' });
+      .attr({
+        'aria-selected': 'false',
+        'tabindex': -1
+      });
 
     $(`#${$target_anchor.attr('aria-controls')}`)
       .removeClass(`${this.options.panelActiveClass}`)
-      .attr({ 'aria-hidden': 'true' });
+      .attr({ 'aria-hidden': 'true' })
   }
 
   /**
@@ -364,7 +376,7 @@ class Tabs {
    * Destroys an instance of an tabs.
    * @fires Tabs#destroyed
    */
-  destroy() {
+  _destroy() {
     this.$element
       .find(`.${this.options.linkClass}`)
       .off('.zf.tabs').hide().end()
@@ -381,7 +393,6 @@ class Tabs {
       $(window).off('popstate', this._checkDeepLink);
     }
 
-    Foundation.unregisterPlugin(this);
   }
 }
 
@@ -484,7 +495,4 @@ Tabs.defaults = {
   panelActiveClass: 'is-active'
 };
 
-// Window exports
-Foundation.plugin(Tabs, 'Tabs');
-
-}(jQuery);
+export {Tabs};