mirror of https://github.com/twbs/bootstrap.git
Remove IE support and button bsChecked hack
This commit is contained in:
parent
e866b1ae43
commit
6cfc78f2d9
|
@ -7,7 +7,6 @@
|
||||||
|
|
||||||
import Data from './dom/data'
|
import Data from './dom/data'
|
||||||
import EventHandler from './dom/eventHandler'
|
import EventHandler from './dom/eventHandler'
|
||||||
import Manipulator from './dom/manipulator'
|
|
||||||
import SelectorEngine from './dom/selectorEngine'
|
import SelectorEngine from './dom/selectorEngine'
|
||||||
import Util from './util'
|
import Util from './util'
|
||||||
|
|
||||||
|
@ -96,7 +95,8 @@ class Button {
|
||||||
rootElement.classList.contains('disabled')) {
|
rootElement.classList.contains('disabled')) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
Manipulator.setChecked(input, !this._element.classList.contains(ClassName.ACTIVE))
|
|
||||||
|
input.checked = !this._element.classList.contains(ClassName.ACTIVE)
|
||||||
EventHandler.trigger(input, 'change')
|
EventHandler.trigger(input, 'change')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -28,20 +28,6 @@ function normalizeDataKey(key) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const Manipulator = {
|
const Manipulator = {
|
||||||
setChecked(input, val) {
|
|
||||||
if (input instanceof HTMLInputElement) {
|
|
||||||
input.checked = val
|
|
||||||
input.bsChecked = val
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
isChecked(input) {
|
|
||||||
if (input instanceof HTMLInputElement) {
|
|
||||||
return input.bsChecked || input.checked
|
|
||||||
}
|
|
||||||
throw new Error('INPUT parameter is not an HTMLInputElement')
|
|
||||||
},
|
|
||||||
|
|
||||||
setDataAttribute(element, key, value) {
|
setDataAttribute(element, key, value) {
|
||||||
element.setAttribute(`data-${normalizeDataKey(key)}`, value)
|
element.setAttribute(`data-${normalizeDataKey(key)}`, value)
|
||||||
},
|
},
|
||||||
|
|
|
@ -9,47 +9,6 @@ import Util from '../util'
|
||||||
|
|
||||||
/* istanbul ignore next */
|
/* istanbul ignore next */
|
||||||
const Polyfill = (() => {
|
const Polyfill = (() => {
|
||||||
// defaultPrevented is broken in IE
|
|
||||||
const workingDefaultPrevented = (() => {
|
|
||||||
const e = document.createEvent('CustomEvent')
|
|
||||||
e.initEvent('Bootstrap', true, true)
|
|
||||||
e.preventDefault()
|
|
||||||
return e.defaultPrevented
|
|
||||||
})()
|
|
||||||
|
|
||||||
if (!workingDefaultPrevented) {
|
|
||||||
const origPreventDefault = Event.prototype.preventDefault
|
|
||||||
Event.prototype.preventDefault = function () {
|
|
||||||
if (!this.cancelable) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
origPreventDefault.call(this)
|
|
||||||
Object.defineProperty(this, 'defaultPrevented', {
|
|
||||||
get() {
|
|
||||||
return true
|
|
||||||
},
|
|
||||||
configurable: true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// CustomEvent polyfill for IE (see: https://mzl.la/2v76Zvn)
|
|
||||||
if (typeof window.CustomEvent !== 'function') {
|
|
||||||
window.CustomEvent = (event, params) => {
|
|
||||||
params = params || {
|
|
||||||
bubbles: false,
|
|
||||||
cancelable: false,
|
|
||||||
detail: null
|
|
||||||
}
|
|
||||||
const evt = document.createEvent('CustomEvent')
|
|
||||||
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail)
|
|
||||||
return evt
|
|
||||||
}
|
|
||||||
|
|
||||||
window.CustomEvent.prototype = window.Event.prototype
|
|
||||||
}
|
|
||||||
|
|
||||||
// MSEdge resets defaultPrevented flag upon dispatchEvent call if at least one listener is attached
|
// MSEdge resets defaultPrevented flag upon dispatchEvent call if at least one listener is attached
|
||||||
const defaultPreventedPreservedOnDispatch = (() => {
|
const defaultPreventedPreservedOnDispatch = (() => {
|
||||||
const e = new CustomEvent('Bootstrap', {
|
const e = new CustomEvent('Bootstrap', {
|
||||||
|
@ -76,14 +35,6 @@ const Polyfill = (() => {
|
||||||
window.Event.prototype = origEvent.prototype
|
window.Event.prototype = origEvent.prototype
|
||||||
}
|
}
|
||||||
|
|
||||||
// matches polyfill (see: https://mzl.la/2ikXneG)
|
|
||||||
let matches = Element.prototype.matches
|
|
||||||
if (!matches) {
|
|
||||||
matches =
|
|
||||||
Element.prototype.msMatchesSelector ||
|
|
||||||
Element.prototype.webkitMatchesSelector
|
|
||||||
}
|
|
||||||
|
|
||||||
// closest polyfill (see: https://mzl.la/2vXggaI)
|
// closest polyfill (see: https://mzl.la/2vXggaI)
|
||||||
let closest
|
let closest
|
||||||
if (!Element.prototype.closest) {
|
if (!Element.prototype.closest) {
|
||||||
|
@ -91,7 +42,7 @@ const Polyfill = (() => {
|
||||||
closest = (element, selector) => {
|
closest = (element, selector) => {
|
||||||
let ancestor = element
|
let ancestor = element
|
||||||
do {
|
do {
|
||||||
if (matches.call(ancestor, selector)) {
|
if (ancestor.matches(selector)) {
|
||||||
return ancestor
|
return ancestor
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -188,7 +139,6 @@ const Polyfill = (() => {
|
||||||
defaultPreventedPreservedOnDispatch,
|
defaultPreventedPreservedOnDispatch,
|
||||||
focusIn: typeof window.onfocusin === 'undefined',
|
focusIn: typeof window.onfocusin === 'undefined',
|
||||||
closest,
|
closest,
|
||||||
matches,
|
|
||||||
find,
|
find,
|
||||||
findOne
|
findOne
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,7 +15,7 @@ import Util from '../util'
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const closest = Polyfill.closest
|
const closest = Polyfill.closest
|
||||||
const matchesFn = Polyfill.matches
|
const matchesFn = Element.prototype.matches
|
||||||
const find = Polyfill.find
|
const find = Polyfill.find
|
||||||
const findOne = Polyfill.findOne
|
const findOne = Polyfill.findOne
|
||||||
const nodeText = 3
|
const nodeText = 3
|
||||||
|
|
|
@ -30,13 +30,6 @@ const browsers = {
|
||||||
browser: 'Edge',
|
browser: 'Edge',
|
||||||
browser_version: 'latest'
|
browser_version: 'latest'
|
||||||
},
|
},
|
||||||
ie11Win10: {
|
|
||||||
base: 'BrowserStack',
|
|
||||||
os: 'Windows',
|
|
||||||
os_version: '10',
|
|
||||||
browser: 'IE',
|
|
||||||
browser_version: '11.0'
|
|
||||||
},
|
|
||||||
chromeWin10: {
|
chromeWin10: {
|
||||||
base: 'BrowserStack',
|
base: 'BrowserStack',
|
||||||
os: 'Windows',
|
os: 'Windows',
|
||||||
|
@ -51,13 +44,6 @@ const browsers = {
|
||||||
browser: 'Firefox',
|
browser: 'Firefox',
|
||||||
browser_version: 'latest'
|
browser_version: 'latest'
|
||||||
},
|
},
|
||||||
ie10Win8: {
|
|
||||||
base: 'BrowserStack',
|
|
||||||
os: 'Windows',
|
|
||||||
os_version: '8',
|
|
||||||
browser: 'IE',
|
|
||||||
browser_version: '10.0'
|
|
||||||
},
|
|
||||||
iphoneX: {
|
iphoneX: {
|
||||||
base: 'BrowserStack',
|
base: 'BrowserStack',
|
||||||
os: 'ios',
|
os: 'ios',
|
||||||
|
|
|
@ -130,21 +130,21 @@ $(function () {
|
||||||
assert.ok($btn1.hasClass('active'), 'btn1 has active class')
|
assert.ok($btn1.hasClass('active'), 'btn1 has active class')
|
||||||
assert.ok($btn1.find('input').prop('checked'), 'btn1 is checked')
|
assert.ok($btn1.find('input').prop('checked'), 'btn1 is checked')
|
||||||
assert.ok(!$btn2.hasClass('active'), 'btn2 does not have active class')
|
assert.ok(!$btn2.hasClass('active'), 'btn2 does not have active class')
|
||||||
assert.ok(!(inputBtn2.bsChecked || inputBtn2.checked), 'btn2 is not checked')
|
assert.ok(!inputBtn2.checked, 'btn2 is not checked')
|
||||||
|
|
||||||
inputBtn2.dispatchEvent(new Event('click'))
|
inputBtn2.dispatchEvent(new Event('click'))
|
||||||
|
|
||||||
assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
|
assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
|
||||||
assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
|
assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
|
||||||
assert.ok($btn2.hasClass('active'), 'btn2 has active class')
|
assert.ok($btn2.hasClass('active'), 'btn2 has active class')
|
||||||
assert.ok(inputBtn2.bsChecked || inputBtn2.checked, 'btn2 is checked')
|
assert.ok(inputBtn2.checked, 'btn2 is checked')
|
||||||
|
|
||||||
inputBtn2.dispatchEvent(new Event('click')) // clicking an already checked radio should not un-check it
|
inputBtn2.dispatchEvent(new Event('click')) // clicking an already checked radio should not un-check it
|
||||||
|
|
||||||
assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
|
assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
|
||||||
assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
|
assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
|
||||||
assert.ok($btn2.hasClass('active'), 'btn2 has active class')
|
assert.ok($btn2.hasClass('active'), 'btn2 has active class')
|
||||||
assert.ok(inputBtn2.bsChecked || inputBtn2.checked, 'btn2 is checked')
|
assert.ok(inputBtn2.checked, 'btn2 is checked')
|
||||||
})
|
})
|
||||||
|
|
||||||
QUnit.test('should only toggle selectable inputs', function (assert) {
|
QUnit.test('should only toggle selectable inputs', function (assert) {
|
||||||
|
|
|
@ -8,52 +8,6 @@ $(function () {
|
||||||
assert.ok(Manipulator, 'Manipulator is defined')
|
assert.ok(Manipulator, 'Manipulator is defined')
|
||||||
})
|
})
|
||||||
|
|
||||||
QUnit.test('should set checked for input', function (assert) {
|
|
||||||
assert.expect(2)
|
|
||||||
|
|
||||||
var $input = $('<input type="checkbox" />').appendTo('#qunit-fixture')
|
|
||||||
Manipulator.setChecked($input[0], true)
|
|
||||||
|
|
||||||
assert.ok($input[0].checked)
|
|
||||||
|
|
||||||
Manipulator.setChecked($input[0], false)
|
|
||||||
|
|
||||||
assert.ok(!$input[0].checked)
|
|
||||||
})
|
|
||||||
|
|
||||||
QUnit.test('should not set checked for non input element', function (assert) {
|
|
||||||
assert.expect(1)
|
|
||||||
|
|
||||||
var $div = $('<div />').appendTo('#qunit-fixture')
|
|
||||||
Manipulator.setChecked($div[0], true)
|
|
||||||
|
|
||||||
assert.ok(typeof $div[0].checked === 'undefined')
|
|
||||||
})
|
|
||||||
|
|
||||||
QUnit.test('should verify if an element is checked', function (assert) {
|
|
||||||
assert.expect(2)
|
|
||||||
|
|
||||||
var $input = $('<input type="checkbox" />').appendTo('#qunit-fixture')
|
|
||||||
Manipulator.setChecked($input[0], true)
|
|
||||||
|
|
||||||
assert.ok(Manipulator.isChecked($input[0]))
|
|
||||||
|
|
||||||
Manipulator.setChecked($input[0], false)
|
|
||||||
|
|
||||||
assert.ok(!Manipulator.isChecked($input[0]))
|
|
||||||
})
|
|
||||||
|
|
||||||
QUnit.test('should throw an error when the element is not an input', function (assert) {
|
|
||||||
assert.expect(1)
|
|
||||||
|
|
||||||
var $div = $('<div />').appendTo('#qunit-fixture')
|
|
||||||
try {
|
|
||||||
Manipulator.isChecked($div[0])
|
|
||||||
} catch (e) {
|
|
||||||
assert.strictEqual(e.message, 'INPUT parameter is not an HTMLInputElement')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
QUnit.test('should set data attribute', function (assert) {
|
QUnit.test('should set data attribute', function (assert) {
|
||||||
assert.expect(1)
|
assert.expect(1)
|
||||||
|
|
||||||
|
|
|
@ -44,12 +44,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script src="../../dist/util.js"></script>
|
||||||
<script src="../../dist/dom/polyfill.js"></script>
|
<script src="../../dist/dom/polyfill.js"></script>
|
||||||
<script src="../../dist/dom/eventHandler.js"></script>
|
<script src="../../dist/dom/eventHandler.js"></script>
|
||||||
<script src="../../dist/dom/manipulator.js"></script>
|
|
||||||
<script src="../../dist/dom/selectorEngine.js"></script>
|
<script src="../../dist/dom/selectorEngine.js"></script>
|
||||||
<script src="../../dist/dom/data.js"></script>
|
<script src="../../dist/dom/data.js"></script>
|
||||||
<script src="../../dist/util.js"></script>
|
|
||||||
<script src="../../dist/button.js"></script>
|
<script src="../../dist/button.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue