2017-09-26 10:04:31 +02:00
|
|
|
import Util from '../util'
|
|
|
|
|
2017-08-21 09:11:37 +02:00
|
|
|
/**
|
|
|
|
* --------------------------------------------------------------------------
|
|
|
|
* Bootstrap (v4.0.0-beta): dom/selectorEngine.js
|
|
|
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
|
|
|
* --------------------------------------------------------------------------
|
|
|
|
*/
|
|
|
|
|
2017-09-20 14:19:10 +02:00
|
|
|
const SelectorEngine = (() => {
|
|
|
|
/**
|
|
|
|
* ------------------------------------------------------------------------
|
|
|
|
* Polyfills
|
|
|
|
* ------------------------------------------------------------------------
|
|
|
|
*/
|
2017-08-21 16:45:29 +02:00
|
|
|
|
2017-09-20 14:19:10 +02:00
|
|
|
// matches polyfill (see: https://mzl.la/2ikXneG)
|
|
|
|
let fnMatches = null
|
|
|
|
if (!Element.prototype.matches) {
|
|
|
|
fnMatches =
|
|
|
|
Element.prototype.msMatchesSelector ||
|
|
|
|
Element.prototype.webkitMatchesSelector
|
|
|
|
} else {
|
|
|
|
fnMatches = Element.prototype.matches
|
2017-08-21 16:45:29 +02:00
|
|
|
}
|
|
|
|
|
2017-09-20 14:19:10 +02:00
|
|
|
// closest polyfill (see: https://mzl.la/2vXggaI)
|
|
|
|
let fnClosest = null
|
|
|
|
if (!Element.prototype.closest) {
|
|
|
|
fnClosest = (element, selector) => {
|
|
|
|
let ancestor = element
|
|
|
|
do {
|
|
|
|
if (fnMatches.call(ancestor, selector)) {
|
|
|
|
return ancestor
|
|
|
|
}
|
|
|
|
|
|
|
|
ancestor = ancestor.parentElement
|
2017-09-26 10:04:31 +02:00
|
|
|
} while (ancestor !== null && ancestor.nodeType === Node.ELEMENT_NODE)
|
2017-08-21 09:11:37 +02:00
|
|
|
|
|
|
|
return null
|
|
|
|
}
|
2017-09-20 14:19:10 +02:00
|
|
|
} else {
|
|
|
|
// eslint-disable-next-line arrow-body-style
|
|
|
|
fnClosest = (element, selector) => {
|
|
|
|
return element.closest(selector)
|
2017-08-26 12:44:26 +02:00
|
|
|
}
|
2017-09-20 14:19:10 +02:00
|
|
|
}
|
2017-08-26 12:44:26 +02:00
|
|
|
|
2017-09-26 10:04:31 +02:00
|
|
|
const scopeSelectorRegex = /:scope\b/
|
|
|
|
const supportScopeQuery = (() => {
|
|
|
|
const element = document.createElement('div')
|
|
|
|
try {
|
|
|
|
element.querySelectorAll(':scope *')
|
|
|
|
} catch (e) {
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
|
|
|
|
return true
|
|
|
|
})()
|
|
|
|
|
|
|
|
let findFn = null
|
|
|
|
let findOneFn = null
|
|
|
|
if (supportScopeQuery) {
|
|
|
|
findFn = Element.prototype.querySelectorAll
|
|
|
|
findOneFn = Element.prototype.querySelector
|
|
|
|
} else {
|
|
|
|
findFn = function (selector) {
|
|
|
|
if (!scopeSelectorRegex.test(selector)) {
|
|
|
|
return this.querySelectorAll(selector)
|
|
|
|
}
|
|
|
|
|
|
|
|
const hasId = Boolean(this.id)
|
|
|
|
if (!hasId) {
|
|
|
|
this.id = Util.getUID('scope')
|
|
|
|
}
|
|
|
|
|
|
|
|
let nodeList = null
|
|
|
|
try {
|
|
|
|
selector = selector.replace(scopeSelectorRegex, `#${this.id}`)
|
|
|
|
nodeList = this.querySelectorAll(selector)
|
|
|
|
} finally {
|
|
|
|
if (!hasId) {
|
|
|
|
this.removeAttribute('id')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return nodeList
|
|
|
|
}
|
|
|
|
|
|
|
|
findOneFn = function (selector) {
|
|
|
|
if (!scopeSelectorRegex.test(selector)) {
|
|
|
|
return this.querySelector(selector)
|
|
|
|
}
|
|
|
|
|
|
|
|
const matches = findFn.call(this, selector)
|
|
|
|
if (typeof matches[0] !== 'undefined') {
|
|
|
|
return matches[0]
|
|
|
|
}
|
|
|
|
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-09-20 14:19:10 +02:00
|
|
|
return {
|
|
|
|
matches(element, selector) {
|
|
|
|
return fnMatches.call(element, selector)
|
|
|
|
},
|
2017-08-26 12:44:26 +02:00
|
|
|
|
2017-09-26 10:04:31 +02:00
|
|
|
find(selector, element = document.documentElement) {
|
2017-09-20 14:19:10 +02:00
|
|
|
if (typeof selector !== 'string') {
|
|
|
|
return null
|
|
|
|
}
|
2017-08-26 12:44:26 +02:00
|
|
|
|
2017-09-26 10:04:31 +02:00
|
|
|
return findFn.call(element, selector)
|
2017-09-20 14:19:10 +02:00
|
|
|
},
|
2017-08-26 12:44:26 +02:00
|
|
|
|
2017-09-26 10:04:31 +02:00
|
|
|
findOne(selector, element = document.documentElement) {
|
2017-09-20 14:19:10 +02:00
|
|
|
if (typeof selector !== 'string') {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
|
2017-09-26 10:04:31 +02:00
|
|
|
return findOneFn.call(element, selector)
|
|
|
|
},
|
|
|
|
|
|
|
|
children(element, selector) {
|
|
|
|
if (typeof selector !== 'string') {
|
|
|
|
return null
|
2017-09-20 14:19:10 +02:00
|
|
|
}
|
2017-08-21 09:11:37 +02:00
|
|
|
|
2017-09-26 10:04:31 +02:00
|
|
|
const children = Util.makeArray(element.children)
|
|
|
|
return children.filter((child) => this.matches(child, selector))
|
2017-09-20 14:19:10 +02:00
|
|
|
},
|
|
|
|
|
2017-09-25 09:09:01 +02:00
|
|
|
parents(element, selector) {
|
|
|
|
if (typeof selector !== 'string') {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
|
|
|
|
const parents = []
|
|
|
|
|
|
|
|
let ancestor = element.parentNode
|
|
|
|
while (ancestor && ancestor.nodeType === Node.ELEMENT_NODE) {
|
|
|
|
if (fnMatches.call(ancestor, selector)) {
|
|
|
|
parents.push(ancestor)
|
|
|
|
}
|
|
|
|
|
|
|
|
ancestor = ancestor.parentNode
|
|
|
|
}
|
|
|
|
|
|
|
|
return parents
|
|
|
|
},
|
|
|
|
|
2017-09-20 14:19:10 +02:00
|
|
|
closest(element, selector) {
|
|
|
|
return fnClosest(element, selector)
|
2017-09-25 09:09:01 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
prev(element, selector) {
|
|
|
|
if (typeof selector !== 'string') {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
|
|
|
|
const siblings = []
|
|
|
|
|
|
|
|
let previous = element.previousSibling
|
|
|
|
while (previous) {
|
|
|
|
if (fnMatches.call(previous, selector)) {
|
|
|
|
siblings.push(previous)
|
|
|
|
}
|
|
|
|
|
|
|
|
previous = previous.previousSibling
|
|
|
|
}
|
|
|
|
|
|
|
|
return siblings
|
2017-09-20 14:19:10 +02:00
|
|
|
}
|
2017-08-21 09:11:37 +02:00
|
|
|
}
|
2017-09-20 14:19:10 +02:00
|
|
|
})()
|
2017-08-21 09:11:37 +02:00
|
|
|
|
|
|
|
export default SelectorEngine
|