1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
/**
* --------------------------------------------------------------------------
* Bootstrap (v5.2.2): dom/selector-engine.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
import { isDisabled, isVisible, parseSelector } from '../util/index.js'
/**
* Constants
*/
const SelectorEngine = {
find(selector, element = document.documentElement) {
return [].concat(...Element.prototype.querySelectorAll.call(element, selector))
},
findOne(selector, element = document.documentElement) {
return Element.prototype.querySelector.call(element, selector)
},
children(element, selector) {
return [].concat(...element.children).filter(child => child.matches(selector))
},
parents(element, selector) {
const parents = []
let ancestor = element.parentNode.closest(selector)
while (ancestor) {
parents.push(ancestor)
ancestor = ancestor.parentNode.closest(selector)
}
return parents
},
prev(element, selector) {
let previous = element.previousElementSibling
while (previous) {
if (previous.matches(selector)) {
return [previous]
}
previous = previous.previousElementSibling
}
return []
},
// TODO: this is now unused; remove later along with prev()
next(element, selector) {
let next = element.nextElementSibling
while (next) {
if (next.matches(selector)) {
return [next]
}
next = next.nextElementSibling
}
return []
},
focusableChildren(element) {
const focusables = [
'a',
'button',
'input',
'textarea',
'select',
'details',
'[tabindex]',
'[contenteditable="true"]'
].map(selector => `${selector}:not([tabindex^="-"])`).join(',')
return this.find(focusables, element).filter(el => !isDisabled(el) && isVisible(el))
},
getSelector(element) {
let selector = element.getAttribute('data-bs-target')
if (!selector || selector === '#') {
let hrefAttribute = element.getAttribute('href')
// The only valid content that could double as a selector are IDs or classes,
// so everything starting with `#` or `.`. If a "real" URL is used as the selector,
// `document.querySelector` will rightfully complain it is invalid.
// See https://github.com/twbs/bootstrap/issues/32273
if (!hrefAttribute || (!hrefAttribute.includes('#') && !hrefAttribute.startsWith('.'))) {
return null
}
// Just in case some CMS puts out a full URL with the anchor appended
if (hrefAttribute.includes('#') && !hrefAttribute.startsWith('#')) {
hrefAttribute = `#${hrefAttribute.split('#')[1]}`
}
selector = hrefAttribute && hrefAttribute !== '#' ? hrefAttribute.trim() : null
selector = parseSelector(selector)
}
return selector
},
getSelectorFromElement(element) {
const selector = SelectorEngine.getSelector(element)
if (selector) {
return SelectorEngine.findOne(selector) ? selector : null
}
return null
},
getElementFromSelector(element) {
const selector = SelectorEngine.getSelector(element)
return selector ? SelectorEngine.findOne(selector) : null
},
getMultipleElementsFromSelector(element) {
const selector = SelectorEngine.getSelector(element)
return selector ? SelectorEngine.find(selector) : []
}
}
export default SelectorEngine
|
