foundation-rails 6.1.2.0 → 6.2.0.0

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

@@ -1,12 +1,15 @@
+'use strict';
+
+!function($) {
+
 /**
  * Tabs module.
  * @module foundation.tabs
  * @requires foundation.util.keyboard
  * @requires foundation.util.timerAndImageLoader if tabs contain images
  */
-!function($, Foundation) {
-  'use strict';
 
+class Tabs {
   /**
    * Creates a new instance of tabs.
    * @class
@@ -14,7 +17,7 @@
    * @param {jQuery} element - jQuery object to make into tabs.
    * @param {Object} options - Overrides to the default plugin settings.
    */
-  function Tabs(element, options){
+  constructor(element, options) {
     this.$element = element;
     this.options = $.extend({}, Tabs.defaults, this.$element.data(), options);
 
@@ -32,65 +35,23 @@
     });
   }
 
-  Tabs.defaults = {
-    // /**
-    //  * Allows the JS to alter the url of the window. Not yet implemented.
-    //  */
-    // deepLinking: false,
-    // /**
-    //  * If deepLinking is enabled, allows the window to scroll to content if window is loaded with a hash including a tab-pane id
-    //  */
-    // scrollToContent: false,
-    /**
-     * Allows the window to scroll to content of active pane on load if set to true.
-     * @option
-     * @example false
-     */
-    autoFocus: false,
-    /**
-     * Allows keyboard input to 'wrap' around the tab links.
-     * @option
-     * @example true
-     */
-    wrapOnKeys: true,
-    /**
-     * Allows the tab content panes to match heights if set to true.
-     * @option
-     * @example false
-     */
-    matchHeight: false,
-    /**
-     * Class applied to `li`'s in tab link list.
-     * @option
-     * @example 'tabs-title'
-     */
-    linkClass: 'tabs-title',
-    // contentClass: 'tabs-content',
-    /**
-     * Class applied to the content containers.
-     * @option
-     * @example 'tabs-panel'
-     */
-    panelClass: 'tabs-panel'
-  };
-
   /**
    * Initializes the tabs by showing and focusing (if autoFocus=true) the preset active tab.
    * @private
    */
-  Tabs.prototype._init = function(){
+  _init() {
     var _this = this;
 
-    this.$tabTitles = this.$element.find('.' + this.options.linkClass);
-    this.$tabContent = $('[data-tabs-content="' + this.$element[0].id + '"]');
+    this.$tabTitles = this.$element.find(`.${this.options.linkClass}`);
+    this.$tabContent = $(`[data-tabs-content="${this.$element[0].id}"]`);
 
     this.$tabTitles.each(function(){
       var $elem = $(this),
           $link = $elem.find('a'),
           isActive = $elem.hasClass('is-active'),
           hash = $link[0].hash.slice(1),
-          linkId = $link[0].id ? $link[0].id : hash + '-label',
-          $tabContent = $('#' + hash);
+          linkId = $link[0].id ? $link[0].id : `${hash}-label`,
+          $tabContent = $(`#${hash}`);
 
       $elem.attr({'role': 'presentation'});
 
@@ -111,56 +72,63 @@
         $link.focus();
       }
     });
-    if(this.options.matchHeight){
+
+    if(this.options.matchHeight) {
       var $images = this.$tabContent.find('img');
-      if($images.length){
+
+      if ($images.length) {
         Foundation.onImagesLoaded($images, this._setHeight.bind(this));
-      }else{
+      } else {
         this._setHeight();
       }
     }
+
     this._events();
-  };
+  }
+
   /**
    * Adds event handlers for items within the tabs.
    * @private
    */
-   Tabs.prototype._events = function(){
+  _events() {
     this._addKeyHandler();
     this._addClickHandler();
-    if(this.options.matchHeight){
+
+    if (this.options.matchHeight) {
       $(window).on('changed.zf.mediaquery', this._setHeight.bind(this));
     }
-  };
+  }
 
   /**
    * Adds click handlers for items within the tabs.
    * @private
    */
-  Tabs.prototype._addClickHandler = function(){
+  _addClickHandler() {
     var _this = this;
-    this.$element.off('click.zf.tabs')
-                   .on('click.zf.tabs', '.' + this.options.linkClass, function(e){
-                     e.preventDefault();
-                     e.stopPropagation();
-                     if($(this).hasClass('is-active')){
-                       return;
-                     }
-                     _this._handleTabChange($(this));
-                   });
-  };
+
+    this.$element
+      .off('click.zf.tabs')
+      .on('click.zf.tabs', `.${this.options.linkClass}`, function(e){
+        e.preventDefault();
+        e.stopPropagation();
+        if ($(this).hasClass('is-active')) {
+          return;
+        }
+        _this._handleTabChange($(this));
+      });
+  }
 
   /**
    * Adds keyboard event handlers for items within the tabs.
    * @private
    */
-  Tabs.prototype._addKeyHandler = function(){
+  _addKeyHandler() {
     var _this = this;
     var $firstTab = _this.$element.find('li:first-of-type');
     var $lastTab = _this.$element.find('li:last-of-type');
 
     this.$tabTitles.off('keydown.zf.tabs').on('keydown.zf.tabs', function(e){
-      if(e.which === 9) return;
+      if (e.which === 9) return;
       e.stopPropagation();
       e.preventDefault();
 
@@ -198,8 +166,7 @@
         }
       });
     });
-  };
-
+  }
 
   /**
    * Opens the tab `$targetContent` defined by `$target`.
@@ -207,15 +174,19 @@
    * @fires Tabs#change
    * @function
    */
-  Tabs.prototype._handleTabChange = function($target){
+  _handleTabChange($target) {
     var $tabLink = $target.find('[role="tab"]'),
         hash = $tabLink[0].hash,
-        $targetContent = $(hash),
-        $oldTab = this.$element.find('.' + this.options.linkClass + '.is-active')
-                  .removeClass('is-active').find('[role="tab"]')
-                  .attr({'aria-selected': 'false'}).attr('aria-controls');
+        $targetContent = this.$tabContent.find(hash),
+        $oldTab = this.$element.
+          find(`.${this.options.linkClass}.is-active`)
+          .removeClass('is-active')
+          .find('[role="tab"]')
+          .attr({ 'aria-selected': 'false' });
 
-    $('#'+$oldTab).removeClass('is-active').attr({'aria-hidden': 'true'});
+    $(`#${$oldTab.attr('aria-controls')}`)
+      .removeClass('is-active')
+      .attr({ 'aria-hidden': 'true' });
 
     $target.addClass('is-active');
 
@@ -230,26 +201,27 @@
      * @event Tabs#change
      */
     this.$element.trigger('change.zf.tabs', [$target]);
-    // Foundation.reflow(this.$element, 'tabs');
-  };
+  }
 
   /**
    * Public method for selecting a content pane to display.
    * @param {jQuery | String} elem - jQuery object or string of the id of the pane to display.
    * @function
    */
-  Tabs.prototype.selectTab = function(elem){
+  selectTab(elem) {
     var idStr;
-    if(typeof elem === 'object'){
+
+    if (typeof elem === 'object') {
       idStr = elem[0].id;
-    }else{
+    } else {
       idStr = elem;
     }
 
-    if(idStr.indexOf('#') < 0){
-      idStr = '#' + idStr;
+    if (idStr.indexOf('#') < 0) {
+      idStr = `#${idStr}`;
     }
-    var $target = this.$tabTitles.find('[href="' + idStr + '"]').parent('.' + this.options.linkClass);
+
+    var $target = this.$tabTitles.find(`[href="${idStr}"]`).parent(`.${this.options.linkClass}`);
 
     this._handleTabChange($target);
   };
@@ -260,46 +232,94 @@
    * @function
    * @private
    */
-  Tabs.prototype._setHeight = function(){
+  _setHeight() {
     var max = 0;
-    this.$tabContent.find('.' + this.options.panelClass)
-                    .css('height', '')
-                    .each(function(){
-                      var panel = $(this),
-                          isActive = panel.hasClass('is-active');
-
-                      if(!isActive){
-                        panel.css({'visibility': 'hidden', 'display': 'block'});
-                      }
-                      var temp = this.getBoundingClientRect().height;
-
-                      if(!isActive){
-                        panel.css({'visibility': '', 'display': ''});
-                      }
-
-                      max = temp > max ? temp : max;
-                    })
-                    .css('height', max + 'px');
-  };
+    this.$tabContent
+      .find(`.${this.options.panelClass}`)
+      .css('height', '')
+      .each(function() {
+        var panel = $(this),
+            isActive = panel.hasClass('is-active');
+
+        if (!isActive) {
+          panel.css({'visibility': 'hidden', 'display': 'block'});
+        }
+
+        var temp = this.getBoundingClientRect().height;
+
+        if (!isActive) {
+          panel.css({
+            'visibility': '',
+            'display': ''
+          });
+        }
+
+        max = temp > max ? temp : max;
+      })
+      .css('height', `${max}px`);
+  }
 
   /**
    * Destroys an instance of an tabs.
    * @fires Tabs#destroyed
    */
-  Tabs.prototype.destroy = function() {
-    this.$element.find('.' + this.options.linkClass)
-                 .off('.zf.tabs').hide().end()
-                 .find('.' + this.options.panelClass)
-                 .hide();
-    if(this.options.matchHeight){
+  destroy() {
+    this.$element
+      .find(`.${this.options.linkClass}`)
+      .off('.zf.tabs').hide().end()
+      .find(`.${this.options.panelClass}`)
+      .hide();
+
+    if (this.options.matchHeight) {
       $(window).off('changed.zf.mediaquery');
     }
+
     Foundation.unregisterPlugin(this);
-  };
+  }
+}
 
-  Foundation.plugin(Tabs, 'Tabs');
+Tabs.defaults = {
+  /**
+   * Allows the window to scroll to content of active pane on load if set to true.
+   * @option
+   * @example false
+   */
+  autoFocus: false,
 
-  function checkClass($elem){
-    return $elem.hasClass('is-active');
-  }
-}(jQuery, window.Foundation);
+  /**
+   * Allows keyboard input to 'wrap' around the tab links.
+   * @option
+   * @example true
+   */
+  wrapOnKeys: true,
+
+  /**
+   * Allows the tab content panes to match heights if set to true.
+   * @option
+   * @example false
+   */
+  matchHeight: false,
+
+  /**
+   * Class applied to `li`'s in tab link list.
+   * @option
+   * @example 'tabs-title'
+   */
+  linkClass: 'tabs-title',
+
+  /**
+   * Class applied to the content containers.
+   * @option
+   * @example 'tabs-panel'
+   */
+  panelClass: 'tabs-panel'
+};
+
+function checkClass($elem){
+  return $elem.hasClass('is-active');
+}
+
+// Window exports
+Foundation.plugin(Tabs, 'Tabs');
+
+}(jQuery);

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

@@ -1,12 +1,15 @@
+'use strict';
+
+!function($) {
+
 /**
  * Toggler module.
  * @module foundation.toggler
  * @requires foundation.util.motion
+ * @requires foundation.util.triggers
  */
 
-!function(Foundation, $) {
-  'use strict';
-
+class Toggler {
   /**
    * Creates a new instance of Toggler.
    * @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 Toggler(element, options) {
+  constructor(element, options) {
     this.$element = element;
     this.options = $.extend({}, Toggler.defaults, element.data(), options);
     this.className = '';
@@ -25,21 +28,12 @@
     Foundation.registerPlugin(this, 'Toggler');
   }
 
-  Toggler.defaults = {
-    /**
-     * Tells the plugin if the element should animated when toggled.
-     * @option
-     * @example false
-     */
-    animate: false
-  };
-
   /**
    * Initializes the Toggler plugin by parsing the toggle class from data-toggler, or animation classes from data-animate.
    * @function
    * @private
    */
-  Toggler.prototype._init = function() {
+  _init() {
     var input;
     // Parse animation classes if they were set
     if (this.options.animate) {
@@ -57,20 +51,20 @@
 
     // Add ARIA attributes to triggers
     var id = this.$element[0].id;
-    $('[data-open="'+id+'"], [data-close="'+id+'"], [data-toggle="'+id+'"]')
+    $(`[data-open="${id}"], [data-close="${id}"], [data-toggle="${id}"]`)
       .attr('aria-controls', id);
     // If the target is hidden, add aria-hidden
     this.$element.attr('aria-expanded', this.$element.is(':hidden') ? false : true);
-  };
+  }
 
   /**
    * Initializes events for the toggle trigger.
    * @function
    * @private
    */
-  Toggler.prototype._events = function() {
+  _events() {
     this.$element.off('toggle.zf.trigger').on('toggle.zf.trigger', this.toggle.bind(this));
-  };
+  }
 
   /**
    * Toggles the target class on the target element. An event is fired from the original trigger depending on if the resultant state was "on" or "off".
@@ -78,11 +72,11 @@
    * @fires Toggler#on
    * @fires Toggler#off
    */
-  Toggler.prototype.toggle = function() {
+  toggle() {
     this[ this.options.animate ? '_toggleAnimate' : '_toggleClass']();
-  };
+  }
 
-  Toggler.prototype._toggleClass = function() {
+  _toggleClass() {
     this.$element.toggleClass(this.className);
 
     var isOn = this.$element.hasClass(this.className);
@@ -102,9 +96,9 @@
     }
 
     this._updateARIA(isOn);
-  };
+  }
 
-  Toggler.prototype._toggleAnimate = function() {
+  _toggleAnimate() {
     var _this = this;
 
     if (this.$element.is(':hidden')) {
@@ -119,29 +113,32 @@
         _this._updateARIA(false);
       });
     }
-  };
+  }
 
-  Toggler.prototype._updateARIA = function(isOn) {
+  _updateARIA(isOn) {
     this.$element.attr('aria-expanded', isOn ? true : false);
-  };
+  }
 
   /**
    * Destroys the instance of Toggler on the element.
    * @function
    */
-  Toggler.prototype.destroy= function() {
+  destroy() {
     this.$element.off('.zf.toggler');
     Foundation.unregisterPlugin(this);
-  };
+  }
+}
 
-  Foundation.plugin(Toggler, 'Toggler');
+Toggler.defaults = {
+  /**
+   * Tells the plugin if the element should animated when toggled.
+   * @option
+   * @example false
+   */
+  animate: false
+};
 
-  // Exports for AMD/Browserify
-  if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
-    module.exports = Toggler;
-  if (typeof define === 'function')
-    define(['foundation'], function() {
-      return Toggler;
-    });
+// Window exports
+Foundation.plugin(Toggler, 'Toggler');
 
-}(Foundation, jQuery);
+}(jQuery);