Rewrite Collapse without jQuery

js/src/collapse.js

@@ -5,7 +5,9 @@
  * --------------------------------------------------------------------------
  */
 
-import $ from 'jquery'
+import Data from './dom/data'
+import EventHandler from './dom/eventHandler'
+import SelectorEngine from './dom/selectorEngine'
 import Util from './util'
 
 /**
@@ -19,7 +21,6 @@ const VERSION             = '4.3.1'
 const DATA_KEY            = 'bs.collapse'
 const EVENT_KEY           = `.${DATA_KEY}`
 const DATA_API_KEY        = '.data-api'
-const JQUERY_NO_CONFLICT  = $.fn[NAME]
 
 const Default = {
   toggle : true,
@@ -67,19 +68,19 @@ class Collapse {
     this._isTransitioning = false
     this._element         = element
     this._config          = this._getConfig(config)
-    this._triggerArray    = [].slice.call(document.querySelectorAll(
+    this._triggerArray    = Util.makeArray(SelectorEngine.find(
       `[data-toggle="collapse"][href="#${element.id}"],` +
       `[data-toggle="collapse"][data-target="#${element.id}"]`
     ))
 
-    const toggleList = [].slice.call(document.querySelectorAll(Selector.DATA_TOGGLE))
+    const toggleList = Util.makeArray(document.querySelectorAll(Selector.DATA_TOGGLE))
     for (let i = 0, len = toggleList.length; i < len; i++) {
       const elem = toggleList[i]
       const selector = Util.getSelectorFromElement(elem)
-      const filterElement = [].slice.call(document.querySelectorAll(selector))
+      const filterElement = Util.makeArray(document.querySelectorAll(selector))
         .filter((foundElem) => foundElem === element)
 
-      if (selector !== null && filterElement.length > 0) {
+      if (selector !== null && filterElement.length) {
         this._selector = selector
         this._triggerArray.push(elem)
       }
@@ -109,7 +110,7 @@ class Collapse {
   // Public
 
   toggle() {
-    if ($(this._element).hasClass(ClassName.SHOW)) {
+    if (this._element.classList.contains(ClassName.SHOW)) {
       this.hide()
     } else {
       this.show()
@@ -118,7 +119,7 @@ class Collapse {
 
   show() {
     if (this._isTransitioning ||
-      $(this._element).hasClass(ClassName.SHOW)) {
+      this._element.classList.contains(ClassName.SHOW)) {
       return
     }
 
@@ -126,7 +127,7 @@ class Collapse {
     let activesData
 
     if (this._parent) {
-      actives = [].slice.call(this._parent.querySelectorAll(Selector.ACTIVES))
+      actives = Util.makeArray(this._parent.querySelectorAll(Selector.ACTIVES))
         .filter((elem) => {
           if (typeof this._config.parent === 'string') {
             return elem.getAttribute('data-parent') === this._config.parent
@@ -141,74 +142,70 @@ class Collapse {
     }
 
     if (actives) {
-      activesData = $(actives).not(this._selector).data(DATA_KEY)
+      activesData = Data.getData(actives[0], DATA_KEY)
       if (activesData && activesData._isTransitioning) {
         return
       }
     }
 
-    const startEvent = $.Event(Event.SHOW)
+    const startEvent = EventHandler.trigger(this._element, Event.SHOW)
-    $(this._element).trigger(startEvent)
+    if (startEvent.defaultPrevented) {
-    if (startEvent.isDefaultPrevented()) {
       return
     }
 
     if (actives) {
-      Collapse._jQueryInterface.call($(actives).not(this._selector), 'hide')
+      actives.forEach((elemActive) => Collapse._collapseInterface(elemActive, 'hide'))
       if (!activesData) {
-        $(actives).data(DATA_KEY, null)
+        Data.setData(actives[0], DATA_KEY, null)
       }
     }
 
     const dimension = this._getDimension()
 
-    $(this._element)
+    this._element.classList.remove(ClassName.COLLAPSE)
-      .removeClass(ClassName.COLLAPSE)
+    this._element.classList.add(ClassName.COLLAPSING)
-      .addClass(ClassName.COLLAPSING)
 
     this._element.style[dimension] = 0
 
     if (this._triggerArray.length) {
-      $(this._triggerArray)
+      this._triggerArray.forEach((element) => {
-        .removeClass(ClassName.COLLAPSED)
+        element.classList.remove(ClassName.COLLAPSED)
-        .attr('aria-expanded', true)
+        element.setAttribute('aria-expanded', true)
+      })
     }
 
     this.setTransitioning(true)
 
     const complete = () => {
-      $(this._element)
+      this._element.classList.remove(ClassName.COLLAPSING)
-        .removeClass(ClassName.COLLAPSING)
+      this._element.classList.add(ClassName.COLLAPSE)
-        .addClass(ClassName.COLLAPSE)
+      this._element.classList.add(ClassName.SHOW)
-        .addClass(ClassName.SHOW)
 
       this._element.style[dimension] = ''
 
       this.setTransitioning(false)
 
-      $(this._element).trigger(Event.SHOWN)
+      EventHandler.trigger(this._element, Event.SHOWN)
     }
 
     const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1)
     const scrollSize = `scroll${capitalizedDimension}`
     const transitionDuration = Util.getTransitionDurationFromElement(this._element)
 
-    $(this._element)
+    EventHandler.one(this._element, Util.TRANSITION_END, complete)
-      .one(Util.TRANSITION_END, complete)
 
-    Util.emulateTransitionEnd(transitionDuration)
+    Util.emulateTransitionEnd(this._element, transitionDuration)
     this._element.style[dimension] = `${this._element[scrollSize]}px`
   }
 
   hide() {
     if (this._isTransitioning ||
-      !$(this._element).hasClass(ClassName.SHOW)) {
+      !this._element.classList.contains(ClassName.SHOW)) {
       return
     }
 
-    const startEvent = $.Event(Event.HIDE)
+    const startEvent = EventHandler.trigger(this._element, Event.HIDE)
-    $(this._element).trigger(startEvent)
+    if (startEvent.defaultPrevented) {
-    if (startEvent.isDefaultPrevented()) {
       return
     }
 
@@ -218,10 +215,9 @@ class Collapse {
 
     Util.reflow(this._element)
 
-    $(this._element)
+    this._element.classList.add(ClassName.COLLAPSING)
-      .addClass(ClassName.COLLAPSING)
+    this._element.classList.remove(ClassName.COLLAPSE)
-      .removeClass(ClassName.COLLAPSE)
+    this._element.classList.remove(ClassName.SHOW)
-      .removeClass(ClassName.SHOW)
 
     const triggerArrayLength = this._triggerArray.length
     if (triggerArrayLength > 0) {
@@ -230,10 +226,11 @@ class Collapse {
         const selector = Util.getSelectorFromElement(trigger)
 
         if (selector !== null) {
-          const $elem = $([].slice.call(document.querySelectorAll(selector)))
+          const elem = SelectorEngine.findOne(selector)
-          if (!$elem.hasClass(ClassName.SHOW)) {
+
-            $(trigger).addClass(ClassName.COLLAPSED)
+          if (!elem.classList.contains(ClassName.SHOW)) {
-              .attr('aria-expanded', false)
+            trigger.classList.add(ClassName.COLLAPSED)
+            trigger.setAttribute('aria-expanded', false)
           }
         }
       }
@@ -243,19 +240,16 @@ class Collapse {
 
     const complete = () => {
       this.setTransitioning(false)
-      $(this._element)
+      this._element.classList.remove(ClassName.COLLAPSING)
-        .removeClass(ClassName.COLLAPSING)
+      this._element.classList.add(ClassName.COLLAPSE)
-        .addClass(ClassName.COLLAPSE)
+      EventHandler.trigger(this._element, Event.HIDDEN)
-        .trigger(Event.HIDDEN)
     }
 
     this._element.style[dimension] = ''
     const transitionDuration = Util.getTransitionDurationFromElement(this._element)
 
-    $(this._element)
+    EventHandler.one(this._element, Util.TRANSITION_END, complete)
-      .one(Util.TRANSITION_END, complete)
+    Util.emulateTransitionEnd(this._element, transitionDuration)
-
-    Util.emulateTransitionEnd(transitionDuration)
   }
 
   setTransitioning(isTransitioning) {
@@ -263,7 +257,7 @@ class Collapse {
   }
 
   dispose() {
-    $.removeData(this._element, DATA_KEY)
+    Data.removeData(this._element, DATA_KEY)
 
     this._config          = null
     this._parent          = null
@@ -285,7 +279,7 @@ class Collapse {
   }
 
   _getDimension() {
-    const hasWidth = $(this._element).hasClass(Dimension.WIDTH)
+    const hasWidth = this._element.classList.contains(Dimension.WIDTH)
     return hasWidth ? Dimension.WIDTH : Dimension.HEIGHT
   }
 
@@ -300,14 +294,14 @@ class Collapse {
         parent = this._config.parent[0]
       }
     } else {
-      parent = document.querySelector(this._config.parent)
+      parent = SelectorEngine.findOne(this._config.parent)
     }
 
     const selector =
       `[data-toggle="collapse"][data-parent="${this._config.parent}"]`
 
-    const children = [].slice.call(parent.querySelectorAll(selector))
+    const elements = Util.makeArray(SelectorEngine.find(selector, parent))
-    $(children).each((i, element) => {
+    elements.forEach((element) => {
       this._addAriaAndCollapsedClass(
         Collapse._getTargetFromElement(element),
         [element]
@@ -318,12 +312,19 @@ class Collapse {
   }
 
   _addAriaAndCollapsedClass(element, triggerArray) {
-    const isOpen = $(element).hasClass(ClassName.SHOW)
+    if (element) {
+      const isOpen = element.classList.contains(ClassName.SHOW)
 
       if (triggerArray.length) {
-      $(triggerArray)
+        triggerArray.forEach((elem) => {
-        .toggleClass(ClassName.COLLAPSED, !isOpen)
+          if (!isOpen) {
-        .attr('aria-expanded', isOpen)
+            elem.classList.add(ClassName.COLLAPSED)
+          } else {
+            elem.classList.remove(ClassName.COLLAPSED)
+          }
+          elem.setAttribute('aria-expanded', isOpen)
+        })
+      }
     }
   }
 
@@ -334,13 +335,11 @@ class Collapse {
     return selector ? document.querySelector(selector) : null
   }
 
-  static _jQueryInterface(config) {
+  static _collapseInterface(element, config) {
-    return this.each(function () {
+    let data      = Data.getData(element, DATA_KEY)
-      const $this   = $(this)
-      let data      = $this.data(DATA_KEY)
     const _config = {
       ...Default,
-        ...$this.data(),
+      ...Util.getDataAttributes(element),
       ...typeof config === 'object' && config ? config : {}
     }
 
@@ -349,16 +348,21 @@ class Collapse {
     }
 
     if (!data) {
-        data = new Collapse(this, _config)
+      data = new Collapse(element, _config)
-        $this.data(DATA_KEY, data)
+      Data.setData(element, DATA_KEY, data)
     }
 
     if (typeof config === 'string') {
       if (typeof data[config] === 'undefined') {
-          throw new TypeError(`No method named "${config}"`)
+        throw new Error(`No method named "${config}"`)
       }
       data[config]()
     }
+  }
+
+  static _jQueryInterface(config) {
+    return this.each(function () {
+      Collapse._collapseInterface(this, config)
     })
   }
 }
@@ -369,21 +373,31 @@ class Collapse {
  * ------------------------------------------------------------------------
  */
 
-$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
+EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
   // preventDefault only for <a> elements (which change the URL) not inside the collapsible element
-  if (event.currentTarget.tagName === 'A') {
+  if (event.target.tagName === 'A') {
     event.preventDefault()
   }
 
-  const $trigger = $(this)
+  const triggerData      = Util.getDataAttributes(this)
   const selector         = Util.getSelectorFromElement(this)
-  const selectors = [].slice.call(document.querySelectorAll(selector))
+  const selectorElements = Util.makeArray(SelectorEngine.find(selector))
 
-  $(selectors).each(function () {
+  selectorElements.forEach((element) => {
-    const $target = $(this)
+    const data = Data.getData(element, DATA_KEY)
-    const data    = $target.data(DATA_KEY)
+    let config
-    const config  = data ? 'toggle' : $trigger.data()
+    if (data) {
-    Collapse._jQueryInterface.call($target, config)
+      // update parent attribute
+      if (data._parent === null && typeof triggerData.parent === 'string') {
+        data._config.parent = triggerData.parent
+        data._parent = data._getParent()
+      }
+      config = 'toggle'
+    } else {
+      config = triggerData
+    }
+
+    Collapse._collapseInterface(element, config)
   })
 })
 
@@ -391,13 +405,18 @@ $(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
  * ------------------------------------------------------------------------
  * jQuery
  * ------------------------------------------------------------------------
+ * add .collapse to jQuery only if jQuery is present
  */
 
-$.fn[NAME] = Collapse._jQueryInterface
+const $ = Util.jQuery
-$.fn[NAME].Constructor = Collapse
+if (typeof $ !== 'undefined') {
-$.fn[NAME].noConflict = () => {
+  const JQUERY_NO_CONFLICT  = $.fn[NAME]
+  $.fn[NAME]                = Collapse._jQueryInterface
+  $.fn[NAME].Constructor    = Collapse
+  $.fn[NAME].noConflict     = () => {
     $.fn[NAME] = JQUERY_NO_CONFLICT
     return Collapse._jQueryInterface
+  }
 }
 
 export default Collapse

js/src/util.js

@@ -154,7 +154,14 @@ const Util = {
     if (typeof nodeList === 'undefined' || nodeList === null) {
       return []
     }
+
+    const strRepresentation = Object.prototype.toString.call(nodeList)
+    if (strRepresentation === '[object NodeList]' ||
+      strRepresentation === '[object HTMLCollection]' || strRepresentation === '[object Array]') {
       return Array.prototype.slice.call(nodeList)
+    }
+
+    return [nodeList]
   },
 
   getDataAttributes(element) {

js/tests/unit/collapse.js

@@ -71,7 +71,7 @@ $(function () {
       assert.ok(!/height/i.test($el2.attr('style')), 'has height reset')
       done()
     })
-    $target.trigger('click')
+    EventHandler.trigger($target[0], 'click')
   })
 
   QUnit.test('should collapse only the first collapse', function (assert) {
@@ -165,7 +165,7 @@ $(function () {
         done()
       })
 
-    $target.trigger('click')
+    EventHandler.trigger($target[0], 'click')
   })
 
   QUnit.test('should add "collapsed" class to target when collapse is hidden', function (assert) {
@@ -181,7 +181,7 @@ $(function () {
         done()
       })
 
-    $target.trigger('click')
+    EventHandler.trigger($target[0], 'click')
   })
 
   QUnit.test('should remove "collapsed" class from all triggers targeting the collapse when the collapse is shown', function (assert) {
@@ -199,7 +199,7 @@ $(function () {
         done()
       })
 
-    $target.trigger('click')
+    EventHandler.trigger($target[0], 'click')
   })
 
   QUnit.test('should add "collapsed" class to all triggers targeting the collapse when the collapse is hidden', function (assert) {
@@ -217,7 +217,7 @@ $(function () {
         done()
       })
 
-    $target.trigger('click')
+    EventHandler.trigger($target[0], 'click')
   })
 
   QUnit.test('should not close a collapse when initialized with "show" option if already shown', function (assert) {
@@ -309,7 +309,7 @@ $(function () {
         done()
       })
 
-    $target3.trigger('click')
+    EventHandler.trigger($target3[0], 'click')
   })
 
   QUnit.test('should allow dots in data-parent', function (assert) {
@@ -343,7 +343,7 @@ $(function () {
         done()
       })
 
-    $target3.trigger('click')
+    EventHandler.trigger($target3[0], 'click')
   })
 
   QUnit.test('should set aria-expanded="true" on trigger/control when collapse is shown', function (assert) {
@@ -359,7 +359,7 @@ $(function () {
         done()
       })
 
-    $target.trigger('click')
+    EventHandler.trigger($target[0], 'click')
   })
 
   QUnit.test('should set aria-expanded="false" on trigger/control when collapse is hidden', function (assert) {
@@ -375,7 +375,7 @@ $(function () {
         done()
       })
 
-    $target.trigger('click')
+    EventHandler.trigger($target[0], 'click')
   })
 
   QUnit.test('should set aria-expanded="true" on all triggers targeting the collapse when the collapse is shown', function (assert) {
@@ -393,7 +393,7 @@ $(function () {
         done()
       })
 
-    $target.trigger('click')
+    EventHandler.trigger($target[0], 'click')
   })
 
   QUnit.test('should set aria-expanded="false" on all triggers targeting the collapse when the collapse is hidden', function (assert) {
@@ -411,7 +411,7 @@ $(function () {
         done()
       })
 
-    $target.trigger('click')
+    EventHandler.trigger($target[0], 'click')
   })
 
   QUnit.test('should change aria-expanded from active accordion trigger/control to "false" and set the trigger/control for the newly active one to "true"', function (assert) {
@@ -445,7 +445,7 @@ $(function () {
         done()
       })
 
-    $target3.trigger('click')
+    EventHandler.trigger($target3[0], 'click')
   })
 
   QUnit.test('should not fire show event if show is prevented because other element is still transitioning', function (assert) {
@@ -470,13 +470,12 @@ $(function () {
     var $target2 = $('<a role="button" data-toggle="collapse" href="#body2"/>').appendTo($groups.eq(1))
     var $body2   = $('<div id="body2" class="collapse" data-parent="#accordion"/>').appendTo($groups.eq(1))
 
-    $target2.trigger('click')
+    EventHandler.trigger($target2[0], 'click')
 
-    $body2
+    $body2.toggleClass('show collapsing')
-      .toggleClass('show collapsing')
+    Data.getData($body2[0], 'bs.collapse')._isTransitioning = true
-      .data('bs.collapse')._isTransitioning = 1
 
-    $target1.trigger('click')
+    EventHandler.trigger($target1[0], 'click')
 
     setTimeout(function () {
       assert.ok(!showFired, 'show event did not fire')
@@ -541,9 +540,9 @@ $(function () {
         assert.ok($collapseTwo.hasClass('show'), '#collapseTwo is shown')
         done()
       })
-      $triggerTwo.trigger($.Event('click'))
+      EventHandler.trigger($triggerTwo[0], 'click')
     })
-    $trigger.trigger($.Event('click'))
+    EventHandler.trigger($trigger[0], 'click')
   })
 
   QUnit.test('should allow accordion to contain nested elements', function (assert) {
@@ -687,36 +686,36 @@ $(function () {
     var $collapseTwo = $('#collapseTwo')
     var $nestedCollapseOne = $('#nestedCollapseOne')
 
-    $collapseOne.one('shown.bs.collapse', function () {
+    EventHandler.one($collapseOne[0], 'shown.bs.collapse', function () {
       assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown')
       assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown')
       assert.ok(!$('#nestedCollapseOne').hasClass('show'), '#nestedCollapseOne is not shown')
-      $nestedCollapseOne.one('shown.bs.collapse', function () {
+
+      EventHandler.one($nestedCollapseOne[0], 'shown.bs.collapse', function () {
         assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown')
         assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown')
         assert.ok($nestedCollapseOne.hasClass('show'), '#nestedCollapseOne is shown')
-        $collapseTwo.one('shown.bs.collapse', function () {
+        EventHandler.one($collapseTwo[0], 'shown.bs.collapse', function () {
           assert.ok(!$collapseOne.hasClass('show'), '#collapseOne is not shown')
           assert.ok($collapseTwo.hasClass('show'), '#collapseTwo is shown')
           assert.ok($nestedCollapseOne.hasClass('show'), '#nestedCollapseOne is shown')
           done()
         })
-        $triggerTwo.trigger($.Event('click'))
+        EventHandler.trigger($triggerTwo[0], 'click')
       })
-      $nestedTrigger.trigger($.Event('click'))
+      EventHandler.trigger($nestedTrigger[0], 'click')
     })
-    $trigger.trigger($.Event('click'))
+    EventHandler.trigger($trigger[0], 'click')
   })
 
   QUnit.test('should not prevent event for input', function (assert) {
     assert.expect(3)
     var done = assert.async()
     var $target = $('<input type="checkbox" data-toggle="collapse" data-target="#collapsediv1" />').appendTo('#qunit-fixture')
+    var $collapse = $('<div id="collapsediv1"/>').appendTo('#qunit-fixture')
 
-    $('<div id="collapsediv1"/>')
+    EventHandler.one($collapse[0], 'shown.bs.collapse', function () {
-      .appendTo('#qunit-fixture')
+      assert.ok($collapse.hasClass('show'))
-      .on('shown.bs.collapse', function () {
-        assert.ok($(this).hasClass('show'))
       assert.ok($target.attr('aria-expanded') === 'true')
       assert.ok($target.prop('checked'))
       done()
@@ -750,11 +749,11 @@ $(function () {
           assert.ok($trigger3.hasClass('collapsed'), 'trigger3 has collapsed class')
           done()
         })
-        $trigger1.trigger('click')
+        EventHandler.trigger($trigger1[0], 'click')
       })
-      $trigger2.trigger('click')
+      EventHandler.trigger($trigger2[0], 'click')
     })
-    $trigger3.trigger('click')
+    EventHandler.trigger($trigger3[0], 'click')
   })
 
   QUnit.test('should set aria-expanded="true" to triggers targeting shown collaspe and aria-expanded="false" only when all the targeted collapses are shown', function (assert) {
@@ -782,11 +781,11 @@ $(function () {
           assert.strictEqual($trigger3.attr('aria-expanded'), 'false', 'aria-expanded on trigger3 is "false"')
           done()
         })
-        $trigger1.trigger('click')
+        EventHandler.trigger($trigger1[0], 'click')
       })
-      $trigger2.trigger('click')
+      EventHandler.trigger($trigger2[0], 'click')
     })
-    $trigger3.trigger('click')
+    EventHandler.trigger($trigger3[0], 'click')
   })
 
   QUnit.test('should not prevent interactions inside the collapse element', function (assert) {
@@ -798,10 +797,9 @@ $(function () {
       '<div id="collapsediv1" class="collapse">' +
       ' <input type="checkbox" id="testCheckbox" />' +
       '</div>'
+    var $collapse = $(htmlCollapse).appendTo('#qunit-fixture')
 
-    $(htmlCollapse)
+    EventHandler.one($collapse[0], 'shown.bs.collapse', function () {
-      .appendTo('#qunit-fixture')
-      .on('shown.bs.collapse', function () {
       assert.ok($target.prop('checked'), '$trigger is checked')
       var $testCheckbox = $('#testCheckbox')
       $testCheckbox.trigger($.Event('click'))
@@ -810,7 +808,6 @@ $(function () {
         done()
       }, 5)
     })
-
     $target.trigger($.Event('click'))
   })
 

js/tests/visual/collapse.html

@@ -73,6 +73,8 @@
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../dist/dom/eventHandler.js"></script>
+    <script src="../../dist/dom/selectorEngine.js"></script>
+    <script src="../../dist/dom/data.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/collapse.js"></script>
   </body>