From df1f914d6a11bac9ae75cc4b1974ed6a8932458e Mon Sep 17 00:00:00 2001 From: Johann-S Date: Tue, 6 Jun 2017 16:51:14 +0200 Subject: [PATCH 1/3] Collapse with flex elements --- js/src/collapse.js | 28 ++++++++++++++++++++++------ scss/_transitions.scss | 3 +++ 2 files changed, 25 insertions(+), 6 deletions(-) diff --git a/js/src/collapse.js b/js/src/collapse.js index 8e84d7b59e7a..ae516b040a78 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -46,6 +46,7 @@ const Collapse = (() => { const ClassName = { SHOW : 'show', + FLEXSHOW : 'flexshow', COLLAPSE : 'collapse', COLLAPSING : 'collapsing', COLLAPSED : 'collapsed' @@ -113,7 +114,7 @@ const Collapse = (() => { // public toggle() { - if ($(this._element).hasClass(ClassName.SHOW)) { + if ($(this._element).hasClass(ClassName.SHOW) || $(this._element).hasClass(ClassName.FLEXSHOW)) { this.hide() } else { this.show() @@ -121,8 +122,9 @@ const Collapse = (() => { } show() { + const showClass = this._getShowClass() if (this._isTransitioning || - $(this._element).hasClass(ClassName.SHOW)) { + $(this._element).hasClass(showClass)) { return } @@ -176,7 +178,7 @@ const Collapse = (() => { $(this._element) .removeClass(ClassName.COLLAPSING) .addClass(ClassName.COLLAPSE) - .addClass(ClassName.SHOW) + .addClass(showClass) this._element.style[dimension] = '' @@ -201,8 +203,9 @@ const Collapse = (() => { } hide() { + const showClass = this._getShowClass() if (this._isTransitioning || - !$(this._element).hasClass(ClassName.SHOW)) { + !$(this._element).hasClass(showClass)) { return } @@ -221,7 +224,7 @@ const Collapse = (() => { $(this._element) .addClass(ClassName.COLLAPSING) .removeClass(ClassName.COLLAPSE) - .removeClass(ClassName.SHOW) + .removeClass(showClass) if (this._triggerArray.length) { for (let i = 0; i < this._triggerArray.length; i++) { @@ -316,7 +319,7 @@ const Collapse = (() => { _addAriaAndCollapsedClass(element, triggerArray) { if (element) { - const isOpen = $(element).hasClass(ClassName.SHOW) + const isOpen = $(element).hasClass(ClassName.SHOW) || $(element).hasClass(ClassName.FLEXSHOW) if (triggerArray.length) { $(triggerArray) @@ -326,6 +329,19 @@ const Collapse = (() => { } } + _getShowClass() { + const tabClass = this._element.classList + let useFlex = $(this._element).css('display') === 'flex' + // Detect flex in used classes + for (let i = 0; i < tabClass.length; i++) { + const tmpDisplay = $('
').addClass(tabClass[i]).css('display') + if (tmpDisplay === 'flex') { + useFlex = true + break + } + } + return !useFlex ? ClassName.SHOW : ClassName.FLEXSHOW + } // static diff --git a/scss/_transitions.scss b/scss/_transitions.scss index df5744b25f5a..d88c91642fe7 100644 --- a/scss/_transitions.scss +++ b/scss/_transitions.scss @@ -14,6 +14,9 @@ &.show { display: block; } + &.flexshow { + display: flex; + } } tr { From d15f2cf2845ca86b0d50058e40cee7a66837fa6e Mon Sep 17 00:00:00 2001 From: Johann-S Date: Tue, 6 Jun 2017 17:03:06 +0200 Subject: [PATCH 2/3] Add visual test --- js/tests/visual/collapse.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html index 0c19def73ffd..20241beb48a0 100644 --- a/js/tests/visual/collapse.html +++ b/js/tests/visual/collapse.html @@ -55,6 +55,22 @@
+
+
+

+ +

+
+
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. +
+
+
+
+
From 05c311c053e674c82262192f75ff8ae76d0eb57f Mon Sep 17 00:00:00 2001 From: Johann-S Date: Tue, 6 Jun 2017 22:19:23 +0200 Subject: [PATCH 3/3] Add update method for Collapse plugin --- docs/4.0/components/collapse.md | 4 +++ js/src/collapse.js | 47 ++++++++++++++++++++++++--------- scss/_transitions.scss | 6 +++-- 3 files changed, 42 insertions(+), 15 deletions(-) diff --git a/docs/4.0/components/collapse.md b/docs/4.0/components/collapse.md index cd0a7d4e5f56..d45649df9bc4 100644 --- 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. + ### `.collapse('dispose')` Destroys an element's collapse. diff --git a/js/src/collapse.js b/js/src/collapse.js index ae516b040a78..d5dd5e1110ed 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -88,7 +88,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) @@ -114,7 +115,7 @@ 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() @@ -122,9 +123,8 @@ const Collapse = (() => { } show() { - const showClass = this._getShowClass() if (this._isTransitioning || - $(this._element).hasClass(showClass)) { + $(this._element).hasClass(this._showClass)) { return } @@ -178,7 +178,7 @@ const Collapse = (() => { $(this._element) .removeClass(ClassName.COLLAPSING) .addClass(ClassName.COLLAPSE) - .addClass(showClass) + .addClass(this._showClass) this._element.style[dimension] = '' @@ -203,9 +203,8 @@ const Collapse = (() => { } hide() { - const showClass = this._getShowClass() if (this._isTransitioning || - !$(this._element).hasClass(showClass)) { + !$(this._element).hasClass(this._showClass)) { return } @@ -215,8 +214,7 @@ const Collapse = (() => { return } - const dimension = this._getDimension() - + const dimension = this._getDimension() this._element.style[dimension] = `${this._element.getBoundingClientRect()[dimension]}px` Util.reflow(this._element) @@ -224,7 +222,7 @@ const Collapse = (() => { $(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++) { @@ -266,6 +264,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) @@ -331,15 +339,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 = $('
') + $tmpWrapper.insertAfter($(this._element)) + + const $tmpElem = $('
') + $tmpWrapper.append($tmpElem) + // Detect flex in used classes for (let i = 0; i < tabClass.length; i++) { - const tmpDisplay = $('
').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 index d88c91642fe7..126d61a5cb9c 100644 --- a/scss/_transitions.scss +++ b/scss/_transitions.scss @@ -20,13 +20,15 @@ } tr { - &.collapse.show { + &.collapse.show, + &.collapse.flexshow { display: table-row; } } tbody { - &.collapse.show { + &.collapse.show, + &.collapse.flexshow { display: table-row-group; } }