Add update method for Collapse plugin

twbs · Aug 19, 2017 · 7ad5ea1 · 7ad5ea1
1 parent c413342
commit 7ad5ea1
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 15 deletions.
diff --git a/docs/4.0/components/collapse.md b/docs/4.0/components/collapse.md
@@ -226,6 +226,10 @@ Shows a collapsible element. **Returns to the caller before the collapsible elem
 
 Hides a collapsible element. **Returns to the caller before the collapsible element has actually been hidden** (i.e. before the `hidden.bs.collapse` event occurs).
 
+#### `.collapse('update')`
+
+Update a collapsible element if it changed during its lifetime.
+
 ### Events
 
 Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

diff --git a/js/src/collapse.js b/js/src/collapse.js
@@ -87,7 +87,8 @@ const Collapse = (($) => {
         }
       }
 
-      this._parent = this._config.parent ? this._getParent() : null
+      this._parent    = this._config.parent ? this._getParent() : null
+      this._showClass = this._getShowClass()
 
       if (!this._config.parent) {
         this._addAriaAndCollapsedClass(this._element, this._triggerArray)
@@ -113,17 +114,16 @@ const Collapse = (($) => {
     // public
 
     toggle() {
-      if ($(this._element).hasClass(ClassName.SHOW) || $(this._element).hasClass(ClassName.FLEXSHOW)) {
+      if ($(this._element).hasClass(this._showClass)) {
         this.hide()
       } else {
         this.show()
       }
     }
 
     show() {
-      const showClass = this._getShowClass()
       if (this._isTransitioning ||
-        $(this._element).hasClass(showClass)) {
+        $(this._element).hasClass(this._showClass)) {
         return
       }
 
@@ -177,7 +177,7 @@ const Collapse = (($) => {
         $(this._element)
           .removeClass(ClassName.COLLAPSING)
           .addClass(ClassName.COLLAPSE)
-          .addClass(showClass)
+          .addClass(this._showClass)
 
         this._element.style[dimension] = ''
 
@@ -202,9 +202,8 @@ const Collapse = (($) => {
     }
 
     hide() {
-      const showClass = this._getShowClass()
       if (this._isTransitioning ||
-        !$(this._element).hasClass(showClass)) {
+        !$(this._element).hasClass(this._showClass)) {
         return
       }
 
@@ -214,16 +213,15 @@ const Collapse = (($) => {
         return
       }
 
-      const dimension       = this._getDimension()
-
+      const dimension                = this._getDimension()
       this._element.style[dimension] = `${this._element.getBoundingClientRect()[dimension]}px`
 
       Util.reflow(this._element)
 
       $(this._element)
         .addClass(ClassName.COLLAPSING)
         .removeClass(ClassName.COLLAPSE)
-        .removeClass(showClass)
+        .removeClass(this._showClass)
 
       if (this._triggerArray.length) {
         for (let i = 0; i < this._triggerArray.length; i++) {
@@ -265,6 +263,16 @@ const Collapse = (($) => {
       this._isTransitioning = isTransitioning
     }
 
+    update() {
+      if ($(this._element).hasClass(this._showClass)) {
+        $(this._element).removeClass(this._showClass)
+        this._showClass = this._getShowClass()
+        $(this._element).addClass(this._showClass)
+      } else {
+        this._showClass = this._getShowClass()
+      }
+    }
+
     dispose() {
       $.removeData(this._element, DATA_KEY)
 
@@ -319,15 +327,28 @@ const Collapse = (($) => {
 
     _getShowClass() {
       const tabClass = this._element.classList
-      let useFlex = $(this._element).css('display') === 'flex'
+
+      // Detect flex for inline style
+      let useFlex = $(this._element).css('display').indexOf('flex') !== -1
+
+      // Create a wrapper to hide our flex detection
+      const $tmpWrapper = $('<div class="d-none"></div>')
+      $tmpWrapper.insertAfter($(this._element))
+
+      const $tmpElem = $('<div></div>')
+      $tmpWrapper.append($tmpElem)
+
       // Detect flex in used classes
       for (let i = 0; i < tabClass.length; i++) {
-        const tmpDisplay = $('<div></div>').addClass(tabClass[i]).css('display')
-        if (tmpDisplay === 'flex') {
+        $tmpElem.addClass(tabClass[i])
+        const tmpDisplay = $tmpElem.css('display')
+        $tmpElem.removeClass(tabClass[i])
+        if (tmpDisplay.indexOf('flex') !== -1) {
           useFlex = true
           break
         }
       }
+      $tmpWrapper.remove()
       return !useFlex ? ClassName.SHOW : ClassName.FLEXSHOW
     }
 

diff --git a/scss/_transitions.scss b/scss/_transitions.scss
@@ -18,13 +18,15 @@
 }
 
 tr {
-  &.collapse.show {
+  &.collapse.show,
+  &.collapse.flexshow {
     display: table-row;
   }
 }
 
 tbody {
-  &.collapse.show {
+  &.collapse.show,
+  &.collapse.flexshow {
     display: table-row-group;
   }
 }