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

- old
+ new

@@ -1,32 +1,35 @@
 'use strict';
 
-!function($) {
+import $ from 'jquery';
+import { Keyboard } from './foundation.util.keyboard';
+import { GetYoDigits } from './foundation.util.core';
+import { Plugin } from './foundation.plugin';
 
 /**
  * Accordion module.
  * @module foundation.accordion
  * @requires foundation.util.keyboard
- * @requires foundation.util.motion
  */
 
-class Accordion {
+class Accordion extends Plugin {
   /**
    * Creates a new instance of an accordion.
    * @class
+   * @name Accordion
    * @fires Accordion#init
    * @param {jQuery} element - jQuery object to make into an accordion.
    * @param {Object} options - a plain object with settings to override the default options.
    */
-  constructor(element, options) {
+  _setup(element, options) {
     this.$element = element;
     this.options = $.extend({}, Accordion.defaults, this.$element.data(), options);
 
+    this.className = 'Accordion'; // ie9 back compat
     this._init();
 
-    Foundation.registerPlugin(this, 'Accordion');
-    Foundation.Keyboard.register('Accordion', {
+    Keyboard.register('Accordion', {
       'ENTER': 'toggle',
       'SPACE': 'toggle',
       'ARROW_DOWN': 'next',
       'ARROW_UP': 'previous'
     });
@@ -41,11 +44,11 @@
     this.$tabs = this.$element.children('[data-accordion-item]');
 
     this.$tabs.each(function(idx, el) {
       var $el = $(el),
           $content = $el.children('[data-tab-content]'),
-          id = $content[0].id || Foundation.GetYoDigits(6, 'accordion'),
+          id = $content[0].id || GetYoDigits(6, 'accordion'),
           linkId = el.id || `${id}-label`;
 
       $el.find('a:first').attr({
         'aria-controls': id,
         'role': 'tab',
@@ -116,11 +119,11 @@
         $elem.children('a').off('click.zf.accordion keydown.zf.accordion')
                .on('click.zf.accordion', function(e) {
           e.preventDefault();
           _this.toggle($tabContent);
         }).on('keydown.zf.accordion', function(e){
-          Foundation.Keyboard.handleKey(e, 'Accordion', {
+          Keyboard.handleKey(e, 'Accordion', {
             toggle: function() {
               _this.toggle($tabContent);
             },
             next: function() {
               var $a = $elem.next().find('a').focus();
@@ -151,10 +154,14 @@
    * Toggles the selected content pane's open/close state.
    * @param {jQuery} $target - jQuery object of the pane to toggle (`.accordion-content`).
    * @function
    */
   toggle($target) {
+    if ($target.closest('[data-accordion]').is('[disabled]')) {
+      console.info('Cannot toggle an accordion that is disabled.');
+      return;
+    }
     if($target.parent().hasClass('is-active')) {
       this.up($target);
     } else {
       this.down($target);
     }
@@ -176,10 +183,18 @@
    * @param {Boolean} firstTime - flag to determine if reflow should happen.
    * @fires Accordion#down
    * @function
    */
   down($target, firstTime) {
+    /**
+     * checking firstTime allows for initial render of the accordion
+     * to render preset is-active panes.
+     */
+    if ($target.closest('[data-accordion]').is('[disabled]') && !firstTime)  {
+      console.info('Cannot call down on an accordion that is disabled.');
+      return;
+    }
     $target
       .attr('aria-hidden', false)
       .parent('[data-tab-content]')
       .addBack()
       .parent().addClass('is-active');
@@ -210,26 +225,29 @@
    * @param {jQuery} $target - Accordion tab to close (`.accordion-content`).
    * @fires Accordion#up
    * @function
    */
   up($target) {
+    if ($target.closest('[data-accordion]').is('[disabled]')) {
+      console.info('Cannot call up on an accordion that is disabled.');
+      return;
+    }
+
     var $aunts = $target.parent().siblings(),
         _this = this;
 
     if((!this.options.allowAllClosed && !$aunts.hasClass('is-active')) || !$target.parent().hasClass('is-active')) {
       return;
     }
 
-    // Foundation.Move(this.options.slideSpeed, $target, function(){
-      $target.slideUp(_this.options.slideSpeed, function () {
-        /**
-         * Fires when the tab is done collapsing up.
-         * @event Accordion#up
-         */
-        _this.$element.trigger('up.zf.accordion', [$target]);
-      });
-    // });
+    $target.slideUp(_this.options.slideSpeed, function () {
+      /**
+       * Fires when the tab is done collapsing up.
+       * @event Accordion#up
+       */
+      _this.$element.trigger('up.zf.accordion', [$target]);
+    });
 
     $target.attr('aria-hidden', true)
            .parent().removeClass('is-active');
 
     $(`#${$target.attr('aria-labelledby')}`).attr({
@@ -241,18 +259,17 @@
   /**
    * Destroys an instance of an accordion.
    * @fires Accordion#destroyed
    * @function
    */
-  destroy() {
+  _destroy() {
     this.$element.find('[data-tab-content]').stop(true).slideUp(0).css('display', '');
     this.$element.find('a').off('.zf.accordion');
     if(this.options.deepLink) {
       $(window).off('popstate', this._checkDeepLink);
     }
 
-    Foundation.unregisterPlugin(this);
   }
 }
 
 Accordion.defaults = {
   /**
@@ -307,9 +324,6 @@
    * @default false
    */
   updateHistory: false
 };
 
-// Window exports
-Foundation.plugin(Accordion, 'Accordion');
-
-}(jQuery);
+export {Accordion};