mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
Rewrite Collapse without jQuery
This commit is contained in:
Johann-S
XhmikosR
parent
53ca76ebc0
commit
69e4d4f3ac
@ -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)
|
||||
$(this._element).trigger(startEvent)
|
||||
if (startEvent.isDefaultPrevented()) {
|
||||
const startEvent = EventHandler.trigger(this._element, Event.SHOW)
|
||||
if (startEvent.defaultPrevented) {
|
||||
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)
|
||||
.removeClass(ClassName.COLLAPSE)
|
||||
.addClass(ClassName.COLLAPSING)
|
||||
this._element.classList.remove(ClassName.COLLAPSE)
|
||||
this._element.classList.add(ClassName.COLLAPSING)
|
||||
|
||||
this._element.style[dimension] = 0
|
||||
|
||||
if (this._triggerArray.length) {
|
||||
$(this._triggerArray)
|
||||
.removeClass(ClassName.COLLAPSED)
|
||||
.attr('aria-expanded', true)
|
||||
this._triggerArray.forEach((element) => {
|
||||
element.classList.remove(ClassName.COLLAPSED)
|
||||
element.setAttribute('aria-expanded', true)
|
||||
})
|
||||
}
|
||||
|
||||
this.setTransitioning(true)
|
||||
|
||||
const complete = () => {
|
||||
$(this._element)
|
||||
.removeClass(ClassName.COLLAPSING)
|
||||
.addClass(ClassName.COLLAPSE)
|
||||
.addClass(ClassName.SHOW)
|
||||
this._element.classList.remove(ClassName.COLLAPSING)
|
||||
this._element.classList.add(ClassName.COLLAPSE)
|
||||
this._element.classList.add(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)
|
||||
.one(Util.TRANSITION_END, complete)
|
||||
EventHandler.one(this._element, 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)
|
||||
$(this._element).trigger(startEvent)
|
||||
if (startEvent.isDefaultPrevented()) {
|
||||
const startEvent = EventHandler.trigger(this._element, Event.HIDE)
|
||||
if (startEvent.defaultPrevented) {
|
||||
return
|
||||
}
|
||||
|
||||
@ -218,10 +215,9 @@ class Collapse {
|
||||
|
||||
Util.reflow(this._element)
|
||||
|
||||
$(this._element)
|
||||
.addClass(ClassName.COLLAPSING)
|
||||
.removeClass(ClassName.COLLAPSE)
|
||||
.removeClass(ClassName.SHOW)
|
||||
this._element.classList.add(ClassName.COLLAPSING)
|
||||
this._element.classList.remove(ClassName.COLLAPSE)
|
||||
this._element.classList.remove(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)))
|
||||
if (!$elem.hasClass(ClassName.SHOW)) {
|
||||
$(trigger).addClass(ClassName.COLLAPSED)
|
||||
.attr('aria-expanded', false)
|
||||
const elem = SelectorEngine.findOne(selector)
|
||||
|
||||
if (!elem.classList.contains(ClassName.SHOW)) {
|
||||
trigger.classList.add(ClassName.COLLAPSED)
|
||||
trigger.setAttribute('aria-expanded', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -243,19 +240,16 @@ class Collapse {
|
||||
|
||||
const complete = () => {
|
||||
this.setTransitioning(false)
|
||||
$(this._element)
|
||||
.removeClass(ClassName.COLLAPSING)
|
||||
.addClass(ClassName.COLLAPSE)
|
||||
.trigger(Event.HIDDEN)
|
||||
this._element.classList.remove(ClassName.COLLAPSING)
|
||||
this._element.classList.add(ClassName.COLLAPSE)
|
||||
EventHandler.trigger(this._element, Event.HIDDEN)
|
||||
}
|
||||
|
||||
this._element.style[dimension] = ''
|
||||
const transitionDuration = Util.getTransitionDurationFromElement(this._element)
|
||||
|
||||
$(this._element)
|
||||
.one(Util.TRANSITION_END, complete)
|
||||
|
||||
Util.emulateTransitionEnd(transitionDuration)
|
||||
EventHandler.one(this._element, Util.TRANSITION_END, complete)
|
||||
Util.emulateTransitionEnd(this._element, 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))
|
||||
$(children).each((i, element) => {
|
||||
const elements = Util.makeArray(SelectorEngine.find(selector, parent))
|
||||
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)
|
||||
.toggleClass(ClassName.COLLAPSED, !isOpen)
|
||||
.attr('aria-expanded', isOpen)
|
||||
if (triggerArray.length) {
|
||||
triggerArray.forEach((elem) => {
|
||||
if (!isOpen) {
|
||||
elem.classList.add(ClassName.COLLAPSED)
|
||||
} else {
|
||||
elem.classList.remove(ClassName.COLLAPSED)
|
||||
}
|
||||
elem.setAttribute('aria-expanded', isOpen)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -334,31 +335,34 @@ class Collapse {
|
||||
return selector ? document.querySelector(selector) : null
|
||||
}
|
||||
|
||||
static _collapseInterface(element, config) {
|
||||
let data = Data.getData(element, DATA_KEY)
|
||||
const _config = {
|
||||
...Default,
|
||||
...Util.getDataAttributes(element),
|
||||
...typeof config === 'object' && config ? config : {}
|
||||
}
|
||||
|
||||
if (!data && _config.toggle && /show|hide/.test(config)) {
|
||||
_config.toggle = false
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
data = new Collapse(element, _config)
|
||||
Data.setData(element, DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new Error(`No method named "${config}"`)
|
||||
}
|
||||
data[config]()
|
||||
}
|
||||
}
|
||||
|
||||
static _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const $this = $(this)
|
||||
let data = $this.data(DATA_KEY)
|
||||
const _config = {
|
||||
...Default,
|
||||
...$this.data(),
|
||||
...typeof config === 'object' && config ? config : {}
|
||||
}
|
||||
|
||||
if (!data && _config.toggle && /show|hide/.test(config)) {
|
||||
_config.toggle = false
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
data = new Collapse(this, _config)
|
||||
$this.data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new TypeError(`No method named "${config}"`)
|
||||
}
|
||||
data[config]()
|
||||
}
|
||||
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 selector = Util.getSelectorFromElement(this)
|
||||
const selectors = [].slice.call(document.querySelectorAll(selector))
|
||||
const triggerData = Util.getDataAttributes(this)
|
||||
const selector = Util.getSelectorFromElement(this)
|
||||
const selectorElements = Util.makeArray(SelectorEngine.find(selector))
|
||||
|
||||
$(selectors).each(function () {
|
||||
const $target = $(this)
|
||||
const data = $target.data(DATA_KEY)
|
||||
const config = data ? 'toggle' : $trigger.data()
|
||||
Collapse._jQueryInterface.call($target, config)
|
||||
selectorElements.forEach((element) => {
|
||||
const data = Data.getData(element, DATA_KEY)
|
||||
let config
|
||||
if (data) {
|
||||
// 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
|
||||
$.fn[NAME].Constructor = Collapse
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Collapse._jQueryInterface
|
||||
const $ = Util.jQuery
|
||||
if (typeof $ !== 'undefined') {
|
||||
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
|
||||
|
||||
@ -154,7 +154,14 @@ const Util = {
|
||||
if (typeof nodeList === 'undefined' || nodeList === null) {
|
||||
return []
|
||||
}
|
||||
return Array.prototype.slice.call(nodeList)
|
||||
|
||||
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) {
|
||||
|
||||
@ -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
|
||||
.toggleClass('show collapsing')
|
||||
.data('bs.collapse')._isTransitioning = 1
|
||||
$body2.toggleClass('show collapsing')
|
||||
Data.getData($body2[0], 'bs.collapse')._isTransitioning = true
|
||||
|
||||
$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,40 +686,40 @@ $(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"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('shown.bs.collapse', function () {
|
||||
assert.ok($(this).hasClass('show'))
|
||||
assert.ok($target.attr('aria-expanded') === 'true')
|
||||
assert.ok($target.prop('checked'))
|
||||
done()
|
||||
})
|
||||
EventHandler.one($collapse[0], 'shown.bs.collapse', function () {
|
||||
assert.ok($collapse.hasClass('show'))
|
||||
assert.ok($target.attr('aria-expanded') === 'true')
|
||||
assert.ok($target.prop('checked'))
|
||||
done()
|
||||
})
|
||||
|
||||
$target.trigger($.Event('click'))
|
||||
})
|
||||
@ -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,19 +797,17 @@ $(function () {
|
||||
'<div id="collapsediv1" class="collapse">' +
|
||||
' <input type="checkbox" id="testCheckbox" />' +
|
||||
'</div>'
|
||||
var $collapse = $(htmlCollapse).appendTo('#qunit-fixture')
|
||||
|
||||
$(htmlCollapse)
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('shown.bs.collapse', function () {
|
||||
assert.ok($target.prop('checked'), '$trigger is checked')
|
||||
var $testCheckbox = $('#testCheckbox')
|
||||
$testCheckbox.trigger($.Event('click'))
|
||||
setTimeout(function () {
|
||||
assert.ok($testCheckbox.prop('checked'), '$testCheckbox is checked too')
|
||||
done()
|
||||
}, 5)
|
||||
})
|
||||
|
||||
EventHandler.one($collapse[0], 'shown.bs.collapse', function () {
|
||||
assert.ok($target.prop('checked'), '$trigger is checked')
|
||||
var $testCheckbox = $('#testCheckbox')
|
||||
$testCheckbox.trigger($.Event('click'))
|
||||
setTimeout(function () {
|
||||
assert.ok($testCheckbox.prop('checked'), '$testCheckbox is checked too')
|
||||
done()
|
||||
}, 5)
|
||||
})
|
||||
$target.trigger($.Event('click'))
|
||||
})
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user