Collapse - Allow to pass jQuery object or DOM element to the parent o…

…ption
twbs · Sep 25, 2017 · 7dfafff · 7dfafff
1 parent 3abf8a0
commit 7dfafff
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 9 deletions.
diff --git a/docs/4.0/components/collapse.md b/docs/4.0/components/collapse.md
@@ -186,9 +186,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
   <tbody>
     <tr>
       <td>parent</td>
-      <td>selector</td>
+      <td>selector | jQuery object | DOM element </td>
       <td>false</td>
-      <td>If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>card</code> class). The attribute has to be set on the target collapsible area.</td>
+      <td>If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>card</code> class). The attribute has to be set on the target collapsible area.</td>
     </tr>
     <tr>
       <td>toggle</td>

diff --git a/js/src/collapse.js b/js/src/collapse.js
@@ -33,7 +33,7 @@ const Collapse = (() => {
 
   const DefaultType = {
     toggle : 'boolean',
-    parent : 'string'
+    parent : '(string|element)'
   }
 
   const Event = {
@@ -289,7 +289,18 @@ const Collapse = (() => {
     }
 
     _getParent() {
-      const parent   = $(this._config.parent)[0]
+      let parent = null
+      if (Util.isElement(this._config.parent)) {
+        parent = this._config.parent
+
+        // it's a jQuery object
+        if (typeof this._config.parent.jquery !== 'undefined') {
+          parent = this._config.parent[0]
+        }
+      } else {
+        parent = $(this._config.parent)[0]
+      }
+
       const selector =
         `[data-toggle="collapse"][data-parent="${this._config.parent}"]`
 

diff --git a/js/src/util.js b/js/src/util.js
@@ -32,10 +32,6 @@ const Util = (() => {
     return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
   }
 
-  function isElement(obj) {
-    return (obj[0] || obj).nodeType
-  }
-
   function getSpecialTransitionEndEvent() {
     return {
       bindType: transition.end,
@@ -138,12 +134,16 @@ const Util = (() => {
       return Boolean(transition)
     },
 
+    isElement(obj) {
+      return (obj[0] || obj).nodeType
+    },
+
     typeCheckConfig(componentName, config, configTypes) {
       for (const property in configTypes) {
         if (Object.prototype.hasOwnProperty.call(configTypes, property)) {
           const expectedTypes = configTypes[property]
           const value         = config[property]
-          const valueType     = value && isElement(value) ?
+          const valueType     = value && Util.isElement(value) ?
                                 'element' : toType(value)
 
           if (!new RegExp(expectedTypes).test(valueType)) {

diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js
@@ -698,4 +698,48 @@ $(function () {
 
     $target.trigger($.Event('click'))
   })
+
+  QUnit.test('should allow jquery object in parent config', function (assert) {
+    assert.expect(1)
+    var html =
+    '<div class="my-collapse">' +
+    '  <div class="item">' +
+    '    <a data-toggle="collapse" href="#">Toggle item</a>' +
+    '    <div class="collapse">Lorem ipsum</div>' +
+    '  </div>' +
+    '</div>'
+
+    $(html).appendTo('#qunit-fixture')
+    try {
+      $('[data-toggle="collapse"]').bootstrapCollapse({
+        parent: $('.my-collapse')
+      })
+      assert.ok(true, 'collapse correctly created')
+    }
+    catch (e) {
+      assert.ok(false, 'collapse not created')
+    }
+  })
+
+  QUnit.test('should allow DOM object in parent config', function (assert) {
+    assert.expect(1)
+    var html =
+    '<div class="my-collapse">' +
+    '  <div class="item">' +
+    '    <a data-toggle="collapse" href="#">Toggle item</a>' +
+    '    <div class="collapse">Lorem ipsum</div>' +
+    '  </div>' +
+    '</div>'
+
+    $(html).appendTo('#qunit-fixture')
+    try {
+      $('[data-toggle="collapse"]').bootstrapCollapse({
+        parent: $('.my-collapse')[0]
+      })
+      assert.ok(true, 'collapse correctly created')
+    }
+    catch (e) {
+      assert.ok(false, 'collapse not created')
+    }
+  })
 })