kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Refactor util plugin and some tests

This commit is contained in:
Johann-S 2018-09-14 14:27:30 +02:00 committed by XhmikosR
parent 19b836c907
commit a2f1d79045
12 changed files with 458 additions and 448 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/rollup.config.js
View File

@ -8,7 +8,7 @@ const banner = require('./banner.js')
const BUNDLE = process.env.BUNDLE === 'true'
let fileDest = 'bootstrap.js'
const external = ['jquery', 'popper.js']
const external = ['popper.js']
const plugins = [
babel({
exclude: 'node_modules/**', // Only transpile our source code

4
js/src/collapse.js
View File

@ -311,8 +311,8 @@ class Collapse {
const selector =
`[data-toggle="collapse"][data-parent="${this._config.parent}"]`
const elements = Util.makeArray(SelectorEngine.find(selector, parent))
elements.forEach((element) => {
Util.makeArray(SelectorEngine.find(selector, parent))
.forEach((element) => {
this._addAriaAndCollapsedClass(
Collapse._getTargetFromElement(element),
[element]

4
js/src/dom/data.js
View File

@ -5,7 +5,6 @@
* --------------------------------------------------------------------------
*/
const Data = (() => {
/**
* ------------------------------------------------------------------------
* Constants
@ -52,7 +51,7 @@ const Data = (() => {
}
})()
return {
const Data = {
setData(instance, key, data) {
mapData.set(instance, key, data)
},
@ -63,6 +62,5 @@ const Data = (() => {
mapData.delete(instance, key)
}
}
})()
export default Data

4
js/src/dom/eventHandler.js
View File

@ -8,7 +8,6 @@ import Util from '../util'
* --------------------------------------------------------------------------
*/
const EventHandler = (() => {
/**
* ------------------------------------------------------------------------
* Constants
@ -189,7 +188,7 @@ const EventHandler = (() => {
}
}
return {
const EventHandler = {
on(element, event, handler, delegationFn) {
addHandler(element, event, handler, delegationFn, false)
},
@ -313,7 +312,6 @@ const EventHandler = (() => {
return evt
}
}
})()
/* istanbul ignore next */
// focusin and focusout polyfill

11
js/src/dom/polyfill.js
View File

@ -77,8 +77,9 @@ const Polyfill = (() => {
}
// matches polyfill (see: https://mzl.la/2ikXneG)
if (!Element.prototype.matches) {
Element.prototype.matches =
let matches = Element.prototype.matches
if (!matches) {
matches =
Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector
}
@ -86,15 +87,16 @@ const Polyfill = (() => {
// closest polyfill (see: https://mzl.la/2vXggaI)
let closest
if (!Element.prototype.closest) {
const nodeText = 3
closest = (element, selector) => {
let ancestor = element
do {
if (ancestor.matches(selector)) {
if (matches.call(ancestor, selector)) {
return ancestor
}
ancestor = ancestor.parentElement
} while (ancestor !== null && ancestor.nodeType === Node.ELEMENT_NODE)
} while (ancestor !== null && ancestor.nodeType === Node.ELEMENT_NODE && ancestor.nodeType !== nodeText)
return null
}
@ -186,6 +188,7 @@ const Polyfill = (() => {
defaultPreventedPreservedOnDispatch,
focusIn: typeof window.onfocusin === 'undefined',
closest,
matches,
find,
findOne
}

16
js/src/dom/selectorEngine.js
View File

@ -8,7 +8,6 @@ import Util from '../util'
* --------------------------------------------------------------------------
*/
const SelectorEngine = (() => {
/**
* ------------------------------------------------------------------------
* Constants
@ -16,12 +15,14 @@ const SelectorEngine = (() => {
*/
const closest = Polyfill.closest
const matchesFn = Polyfill.matches
const find = Polyfill.find
const findOne = Polyfill.findOne
const nodeText = 3
return {
const SelectorEngine = {
matches(element, selector) {
return element.matches(selector)
return matchesFn.call(element, selector)
},
find(selector, element = document.documentElement) {
@ -57,8 +58,8 @@ const SelectorEngine = (() => {
const parents = []
let ancestor = element.parentNode
while (ancestor && ancestor.nodeType === Node.ELEMENT_NODE) {
if (ancestor.matches(selector)) {
while (ancestor && ancestor.nodeType === Node.ELEMENT_NODE && ancestor.nodeType !== nodeText) {
if (this.matches(ancestor, selector)) {
parents.push(ancestor)
}
@ -84,8 +85,8 @@ const SelectorEngine = (() => {
const siblings = []
let previous = element.previousSibling
while (previous) {
if (previous.matches(selector)) {
while (previous && previous.nodeType === Node.ELEMENT_NODE && previous.nodeType !== nodeText) {
if (this.matches(previous, selector)) {
siblings.push(previous)
}
@ -95,6 +96,5 @@ const SelectorEngine = (() => {
return siblings
}
}
})()
export default SelectorEngine

3
js/src/dropdown.js
View File

@ -313,7 +313,7 @@ class Dropdown {
}
_detectNavbar() {
return Util.makeArray(SelectorEngine.closest(this._element, '.navbar')).length > 0
return Boolean(SelectorEngine.closest(this._element, '.navbar'))
}
_getOffset() {
@ -367,7 +367,6 @@ class Dropdown {
if (!data) {
data = new Dropdown(element, _config)
Data.setData(element, DATA_KEY, data)
}
if (typeof config === 'string') {

3
js/src/modal.js
View File

@ -394,9 +394,8 @@ class Modal {
if (this._element.classList.contains(ClassName.FADE)) {
const backdropTransitionDuration = Util.getTransitionDurationFromElement(this._backdrop)
EventHandler.one(this._backdrop, Util.TRANSITION_END, callbackRemove)
Util.emulateTransitionEnd(backdropTransitionDuration)
Util.emulateTransitionEnd(this._backdrop, backdropTransitionDuration)
} else {
callbackRemove()
}

10
js/src/tooltip.js
View File

@ -127,7 +127,7 @@ class Tooltip {
* Popper - https://popper.js.org
*/
if (typeof Popper === 'undefined') {
throw new TypeError('Bootstrap\'s tooltips require Popper.js (https://popper.js.org/)')
throw new TypeError('Bootstrap\'s tooltips require Popper.js (https://popper.js.org)')
}
// private
@ -201,7 +201,7 @@ class Tooltip {
if (!context) {
context = new this.constructor(
event.currentTarget,
event.delegateTarget,
this._getDelegateConfig()
)
Data.setData(event.delegateTarget, dataKey, context)
@ -344,7 +344,6 @@ class Tooltip {
if (this.tip.classList.contains(ClassName.FADE)) {
const transitionDuration = Util.getTransitionDurationFromElement(this.tip)
EventHandler.one(this.tip, Util.TRANSITION_END, complete)
Util.emulateTransitionEnd(this.tip, transitionDuration)
} else {
@ -383,7 +382,7 @@ class Tooltip {
// empty mouseover listeners we added for iOS support
if ('ontouchstart' in document.documentElement) {
Util.makeArray(document.body.children)
.forEach((element) => EventHandler.off(element, 'mouseover', Util.noop()))
.forEach((element) => EventHandler.off(element, 'mouseover', Util.noop))
}
this._activeTrigger[Trigger.CLICK] = false
@ -392,7 +391,6 @@ class Tooltip {
if (this.tip.classList.contains(ClassName.FADE)) {
const transitionDuration = Util.getTransitionDurationFromElement(tip)
EventHandler.one(tip, Util.TRANSITION_END, complete)
Util.emulateTransitionEnd(tip, transitionDuration)
} else {
@ -754,11 +752,9 @@ class Tooltip {
_fixTransition() {
const tip = this.getTipElement()
const initConfigAnimation = this.config.animation
if (tip.getAttribute('x-placement') !== null) {
return
}
tip.classList.remove(ClassName.FADE)
this.config.animation = false
this.hide()

36
js/src/util.js
View File

@ -11,7 +11,6 @@
* ------------------------------------------------------------------------
*/
const TRANSITION_END = 'transitionend'
const MAX_UID = 1000000
const MILLISECONDS_MULTIPLIER = 1000
@ -20,9 +19,14 @@ function toType(obj) {
return {}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase()
}
const Util = {
/**
* --------------------------------------------------------------------------
* Public Util Api
* --------------------------------------------------------------------------
*/
TRANSITION_END: 'bsTransitionEnd',
const Util = {
TRANSITION_END: 'transitionend',
getUID(prefix) {
do {
@ -79,19 +83,25 @@ const Util = {
element.dispatchEvent(new Event(Util.TRANSITION_END))
},
// TODO: Remove in v5
supportsTransitionEnd() {
return Boolean(TRANSITION_END)
},
isElement(obj) {
return (obj[0] || obj).nodeType
},
emulateTransitionEnd(element, duration) {
let called = false
const durationPadding = 5
const emulatedDuration = duration + durationPadding
function listener() {
called = true
element.removeEventListener(Util.TRANSITION_END, listener)
}
element.addEventListener(Util.TRANSITION_END, listener)
setTimeout(() => {
if (!called) {
Util.triggerTransitionEnd(element)
}, duration)
}
}, emulatedDuration)
},
typeCheckConfig(componentName, config, configTypes) {
@ -117,13 +127,7 @@ const Util = {
return []
}
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]
return [].slice.call(nodeList)
},
isVisible(element) {

22
js/tests/unit/util.js
View File

@ -119,11 +119,6 @@ $(function () {
assert.ok(id !== id2, id + ' !== ' + id2)
})
QUnit.test('Util.supportsTransitionEnd should return true', function (assert) {
assert.expect(1)
assert.ok(Util.supportsTransitionEnd())
})
QUnit.test('Util.findShadowRoot should find the shadow DOM root', function (assert) {
// Only for newer browsers
if (!document.documentElement.attachShadow) {
@ -178,4 +173,21 @@ $(function () {
window.$ = jQuery
})
QUnit.test('Util.emulateTransitionEnd should emulate transition end', function (assert) {
assert.expect(1)
var $div = $('<div></div>').appendTo($('#qunit-fixture'))
var spy = sinon.spy($div[0], 'removeEventListener')
Util.emulateTransitionEnd($div[0], 7)
assert.ok(spy.notCalled)
})
QUnit.test('Util.makeArray should return empty array on null', function (assert) {
assert.expect(1)
assert.ok(Util.makeArray(null).length === 0)
})
})

19
site/docs/4.3/assets/js/src/application.js
View File

@ -17,13 +17,14 @@
document.addEventListener('DOMContentLoaded', function () {
// Tooltip and popover demos
var tooltipDemoList = document.querySelectorAll('.tooltip-demo')
var tooltipDemoList = [].slice.call(document.querySelectorAll('.tooltip-demo'))
tooltipDemoList.forEach(function (tooltip) {
new bootstrap.Tooltip(tooltip, {
selector: '[data-toggle="tooltip"]'
})
})
var popoverList = document.querySelectorAll('[data-toggle="popover"]')
var popoverList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]'))
popoverList.forEach(function (popover) {
new bootstrap.Popover(popover)
})
@ -35,24 +36,24 @@
.toast('show')
// Demos within modals
var tooltipTestList = document.querySelectorAll('.tooltip-test')
var tooltipTestList = [].slice.call(document.querySelectorAll('.tooltip-test'))
tooltipTestList.forEach(function (tooltip) {
new bootstrap.Tooltip(tooltip)
})
var popoverTestList = document.querySelectorAll('.popover-test')
var popoverTestList = [].slice.call(document.querySelectorAll('.popover-test'))
popoverTestList.forEach(function (popover) {
new bootstrap.Popover(popover)
})
// Indeterminate checkbox example
var indeterminateCheckboxList = document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')
var indeterminateCheckboxList = [].slice.call(document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]'))
indeterminateCheckboxList.forEach(function (checkbox) {
checkbox.indeterminate = true
})
// Disable empty links in docs examples
var emptyLinkList = document.querySelectorAll('.bd-content [href="#"]')
var emptyLinkList = [].slice.call(document.querySelectorAll('.bd-content [href="#"]'))
emptyLinkList.forEach(function (link) {
link.addEventListener('click', function (e) {
e.preventDefault()
@ -77,7 +78,7 @@
}
// Activate animated progress bar
var animatedProgressBarList = document.querySelectorAll('.bd-toggle-animated-progress > .progress-bar-striped')
var animatedProgressBarList = [].slice.call(document.querySelectorAll('.bd-toggle-animated-progress > .progress-bar-striped'))
animatedProgressBarList.forEach(function (progressBar) {
progressBar.addEventListener('click', function () {
if (progressBar.classList.contains('progress-bar-animated')) {
@ -89,9 +90,9 @@
})
// Insert copy to clipboard button before .highlight
var hightList = [].slice.call(document.querySelectorAll('figure.highlight, div.highlight'))
var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard">Copy</button></div>'
hightList.forEach(function (element) {
var highList = [].slice.call(document.querySelectorAll('figure.highlight, div.highlight'))
highList.forEach(function (element) {
element.insertAdjacentHTML('beforebegin', btnHtml)
})