foundation.tabs.js.es6 in foundation-rails-6.4.1.0

- old
+ new

@@ -1,31 +1,34 @@
 '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',
       'ARROW_UP': 'previous',
       'ARROW_DOWN': 'next',
@@ -48,29 +51,33 @@
 
     this.$tabTitles.each(function(){
       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}`);
 
       $elem.attr({'role': 'presentation'});
 
       $link.attr({
         '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, () => {
             $link.focus();
           });
@@ -79,11 +86,11 @@
     });
     if(this.options.matchHeight) {
       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();
       }
     }
 
@@ -183,11 +190,11 @@
           return;
         }
       });
 
       // 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);
         },
         previous: function() {
@@ -232,12 +239,12 @@
     }
 
     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);
 
     //open new tab
@@ -269,20 +276,22 @@
    * @param {jQuery} $target - Tab to Open.
    * @function
    */
   _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');
   }
 
   /**
    * Collapses `$targetContent` defined by `$target`.
    * @param {jQuery} $target - Tab to Open.
@@ -290,15 +299,18 @@
    */
   _collapseTab($target) {
     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' })
   }
 
   /**
    * 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.
@@ -362,11 +374,11 @@
 
   /**
    * Destroys an instance of an tabs.
    * @fires Tabs#destroyed
    */
-  destroy() {
+  _destroy() {
     this.$element
       .find(`.${this.options.linkClass}`)
       .off('.zf.tabs').hide().end()
       .find(`.${this.options.panelClass}`)
       .hide();
@@ -379,11 +391,10 @@
 
     if (this.options.deepLink) {
       $(window).off('popstate', this._checkDeepLink);
     }
 
-    Foundation.unregisterPlugin(this);
   }
 }
 
 Tabs.defaults = {
   /**
@@ -482,9 +493,6 @@
    * @default 'is-active'
    */
   panelActiveClass: 'is-active'
 };
 
-// Window exports
-Foundation.plugin(Tabs, 'Tabs');
-
-}(jQuery);
+export {Tabs};