1 | /**
|
---|
2 | * --------------------------------------------------------------------------
|
---|
3 | * Bootstrap (v5.1.3): scrollspy.js
|
---|
4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
---|
5 | * --------------------------------------------------------------------------
|
---|
6 | */
|
---|
7 |
|
---|
8 | import {
|
---|
9 | defineJQueryPlugin,
|
---|
10 | getElement,
|
---|
11 | getSelectorFromElement,
|
---|
12 | typeCheckConfig
|
---|
13 | } from './util/index'
|
---|
14 | import EventHandler from './dom/event-handler'
|
---|
15 | import Manipulator from './dom/manipulator'
|
---|
16 | import SelectorEngine from './dom/selector-engine'
|
---|
17 | import BaseComponent from './base-component'
|
---|
18 |
|
---|
19 | /**
|
---|
20 | * ------------------------------------------------------------------------
|
---|
21 | * Constants
|
---|
22 | * ------------------------------------------------------------------------
|
---|
23 | */
|
---|
24 |
|
---|
25 | const NAME = 'scrollspy'
|
---|
26 | const DATA_KEY = 'bs.scrollspy'
|
---|
27 | const EVENT_KEY = `.${DATA_KEY}`
|
---|
28 | const DATA_API_KEY = '.data-api'
|
---|
29 |
|
---|
30 | const Default = {
|
---|
31 | offset: 10,
|
---|
32 | method: 'auto',
|
---|
33 | target: ''
|
---|
34 | }
|
---|
35 |
|
---|
36 | const DefaultType = {
|
---|
37 | offset: 'number',
|
---|
38 | method: 'string',
|
---|
39 | target: '(string|element)'
|
---|
40 | }
|
---|
41 |
|
---|
42 | const EVENT_ACTIVATE = `activate${EVENT_KEY}`
|
---|
43 | const EVENT_SCROLL = `scroll${EVENT_KEY}`
|
---|
44 | const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
|
---|
45 |
|
---|
46 | const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item'
|
---|
47 | const CLASS_NAME_ACTIVE = 'active'
|
---|
48 |
|
---|
49 | const SELECTOR_DATA_SPY = '[data-bs-spy="scroll"]'
|
---|
50 | const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'
|
---|
51 | const SELECTOR_NAV_LINKS = '.nav-link'
|
---|
52 | const SELECTOR_NAV_ITEMS = '.nav-item'
|
---|
53 | const SELECTOR_LIST_ITEMS = '.list-group-item'
|
---|
54 | const SELECTOR_LINK_ITEMS = `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}, .${CLASS_NAME_DROPDOWN_ITEM}`
|
---|
55 | const SELECTOR_DROPDOWN = '.dropdown'
|
---|
56 | const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'
|
---|
57 |
|
---|
58 | const METHOD_OFFSET = 'offset'
|
---|
59 | const METHOD_POSITION = 'position'
|
---|
60 |
|
---|
61 | /**
|
---|
62 | * ------------------------------------------------------------------------
|
---|
63 | * Class Definition
|
---|
64 | * ------------------------------------------------------------------------
|
---|
65 | */
|
---|
66 |
|
---|
67 | class ScrollSpy extends BaseComponent {
|
---|
68 | constructor(element, config) {
|
---|
69 | super(element)
|
---|
70 | this._scrollElement = this._element.tagName === 'BODY' ? window : this._element
|
---|
71 | this._config = this._getConfig(config)
|
---|
72 | this._offsets = []
|
---|
73 | this._targets = []
|
---|
74 | this._activeTarget = null
|
---|
75 | this._scrollHeight = 0
|
---|
76 |
|
---|
77 | EventHandler.on(this._scrollElement, EVENT_SCROLL, () => this._process())
|
---|
78 |
|
---|
79 | this.refresh()
|
---|
80 | this._process()
|
---|
81 | }
|
---|
82 |
|
---|
83 | // Getters
|
---|
84 |
|
---|
85 | static get Default() {
|
---|
86 | return Default
|
---|
87 | }
|
---|
88 |
|
---|
89 | static get NAME() {
|
---|
90 | return NAME
|
---|
91 | }
|
---|
92 |
|
---|
93 | // Public
|
---|
94 |
|
---|
95 | refresh() {
|
---|
96 | const autoMethod = this._scrollElement === this._scrollElement.window ?
|
---|
97 | METHOD_OFFSET :
|
---|
98 | METHOD_POSITION
|
---|
99 |
|
---|
100 | const offsetMethod = this._config.method === 'auto' ?
|
---|
101 | autoMethod :
|
---|
102 | this._config.method
|
---|
103 |
|
---|
104 | const offsetBase = offsetMethod === METHOD_POSITION ?
|
---|
105 | this._getScrollTop() :
|
---|
106 | 0
|
---|
107 |
|
---|
108 | this._offsets = []
|
---|
109 | this._targets = []
|
---|
110 | this._scrollHeight = this._getScrollHeight()
|
---|
111 |
|
---|
112 | const targets = SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target)
|
---|
113 |
|
---|
114 | targets.map(element => {
|
---|
115 | const targetSelector = getSelectorFromElement(element)
|
---|
116 | const target = targetSelector ? SelectorEngine.findOne(targetSelector) : null
|
---|
117 |
|
---|
118 | if (target) {
|
---|
119 | const targetBCR = target.getBoundingClientRect()
|
---|
120 | if (targetBCR.width || targetBCR.height) {
|
---|
121 | return [
|
---|
122 | Manipulator[offsetMethod](target).top + offsetBase,
|
---|
123 | targetSelector
|
---|
124 | ]
|
---|
125 | }
|
---|
126 | }
|
---|
127 |
|
---|
128 | return null
|
---|
129 | })
|
---|
130 | .filter(item => item)
|
---|
131 | .sort((a, b) => a[0] - b[0])
|
---|
132 | .forEach(item => {
|
---|
133 | this._offsets.push(item[0])
|
---|
134 | this._targets.push(item[1])
|
---|
135 | })
|
---|
136 | }
|
---|
137 |
|
---|
138 | dispose() {
|
---|
139 | EventHandler.off(this._scrollElement, EVENT_KEY)
|
---|
140 | super.dispose()
|
---|
141 | }
|
---|
142 |
|
---|
143 | // Private
|
---|
144 |
|
---|
145 | _getConfig(config) {
|
---|
146 | config = {
|
---|
147 | ...Default,
|
---|
148 | ...Manipulator.getDataAttributes(this._element),
|
---|
149 | ...(typeof config === 'object' && config ? config : {})
|
---|
150 | }
|
---|
151 |
|
---|
152 | config.target = getElement(config.target) || document.documentElement
|
---|
153 |
|
---|
154 | typeCheckConfig(NAME, config, DefaultType)
|
---|
155 |
|
---|
156 | return config
|
---|
157 | }
|
---|
158 |
|
---|
159 | _getScrollTop() {
|
---|
160 | return this._scrollElement === window ?
|
---|
161 | this._scrollElement.pageYOffset :
|
---|
162 | this._scrollElement.scrollTop
|
---|
163 | }
|
---|
164 |
|
---|
165 | _getScrollHeight() {
|
---|
166 | return this._scrollElement.scrollHeight || Math.max(
|
---|
167 | document.body.scrollHeight,
|
---|
168 | document.documentElement.scrollHeight
|
---|
169 | )
|
---|
170 | }
|
---|
171 |
|
---|
172 | _getOffsetHeight() {
|
---|
173 | return this._scrollElement === window ?
|
---|
174 | window.innerHeight :
|
---|
175 | this._scrollElement.getBoundingClientRect().height
|
---|
176 | }
|
---|
177 |
|
---|
178 | _process() {
|
---|
179 | const scrollTop = this._getScrollTop() + this._config.offset
|
---|
180 | const scrollHeight = this._getScrollHeight()
|
---|
181 | const maxScroll = this._config.offset + scrollHeight - this._getOffsetHeight()
|
---|
182 |
|
---|
183 | if (this._scrollHeight !== scrollHeight) {
|
---|
184 | this.refresh()
|
---|
185 | }
|
---|
186 |
|
---|
187 | if (scrollTop >= maxScroll) {
|
---|
188 | const target = this._targets[this._targets.length - 1]
|
---|
189 |
|
---|
190 | if (this._activeTarget !== target) {
|
---|
191 | this._activate(target)
|
---|
192 | }
|
---|
193 |
|
---|
194 | return
|
---|
195 | }
|
---|
196 |
|
---|
197 | if (this._activeTarget && scrollTop < this._offsets[0] && this._offsets[0] > 0) {
|
---|
198 | this._activeTarget = null
|
---|
199 | this._clear()
|
---|
200 | return
|
---|
201 | }
|
---|
202 |
|
---|
203 | for (let i = this._offsets.length; i--;) {
|
---|
204 | const isActiveTarget = this._activeTarget !== this._targets[i] &&
|
---|
205 | scrollTop >= this._offsets[i] &&
|
---|
206 | (typeof this._offsets[i + 1] === 'undefined' || scrollTop < this._offsets[i + 1])
|
---|
207 |
|
---|
208 | if (isActiveTarget) {
|
---|
209 | this._activate(this._targets[i])
|
---|
210 | }
|
---|
211 | }
|
---|
212 | }
|
---|
213 |
|
---|
214 | _activate(target) {
|
---|
215 | this._activeTarget = target
|
---|
216 |
|
---|
217 | this._clear()
|
---|
218 |
|
---|
219 | const queries = SELECTOR_LINK_ITEMS.split(',')
|
---|
220 | .map(selector => `${selector}[data-bs-target="${target}"],${selector}[href="${target}"]`)
|
---|
221 |
|
---|
222 | const link = SelectorEngine.findOne(queries.join(','), this._config.target)
|
---|
223 |
|
---|
224 | link.classList.add(CLASS_NAME_ACTIVE)
|
---|
225 | if (link.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) {
|
---|
226 | SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, link.closest(SELECTOR_DROPDOWN))
|
---|
227 | .classList.add(CLASS_NAME_ACTIVE)
|
---|
228 | } else {
|
---|
229 | SelectorEngine.parents(link, SELECTOR_NAV_LIST_GROUP)
|
---|
230 | .forEach(listGroup => {
|
---|
231 | // Set triggered links parents as active
|
---|
232 | // With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
|
---|
233 | SelectorEngine.prev(listGroup, `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}`)
|
---|
234 | .forEach(item => item.classList.add(CLASS_NAME_ACTIVE))
|
---|
235 |
|
---|
236 | // Handle special case when .nav-link is inside .nav-item
|
---|
237 | SelectorEngine.prev(listGroup, SELECTOR_NAV_ITEMS)
|
---|
238 | .forEach(navItem => {
|
---|
239 | SelectorEngine.children(navItem, SELECTOR_NAV_LINKS)
|
---|
240 | .forEach(item => item.classList.add(CLASS_NAME_ACTIVE))
|
---|
241 | })
|
---|
242 | })
|
---|
243 | }
|
---|
244 |
|
---|
245 | EventHandler.trigger(this._scrollElement, EVENT_ACTIVATE, {
|
---|
246 | relatedTarget: target
|
---|
247 | })
|
---|
248 | }
|
---|
249 |
|
---|
250 | _clear() {
|
---|
251 | SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target)
|
---|
252 | .filter(node => node.classList.contains(CLASS_NAME_ACTIVE))
|
---|
253 | .forEach(node => node.classList.remove(CLASS_NAME_ACTIVE))
|
---|
254 | }
|
---|
255 |
|
---|
256 | // Static
|
---|
257 |
|
---|
258 | static jQueryInterface(config) {
|
---|
259 | return this.each(function () {
|
---|
260 | const data = ScrollSpy.getOrCreateInstance(this, config)
|
---|
261 |
|
---|
262 | if (typeof config !== 'string') {
|
---|
263 | return
|
---|
264 | }
|
---|
265 |
|
---|
266 | if (typeof data[config] === 'undefined') {
|
---|
267 | throw new TypeError(`No method named "${config}"`)
|
---|
268 | }
|
---|
269 |
|
---|
270 | data[config]()
|
---|
271 | })
|
---|
272 | }
|
---|
273 | }
|
---|
274 |
|
---|
275 | /**
|
---|
276 | * ------------------------------------------------------------------------
|
---|
277 | * Data Api implementation
|
---|
278 | * ------------------------------------------------------------------------
|
---|
279 | */
|
---|
280 |
|
---|
281 | EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
|
---|
282 | SelectorEngine.find(SELECTOR_DATA_SPY)
|
---|
283 | .forEach(spy => new ScrollSpy(spy))
|
---|
284 | })
|
---|
285 |
|
---|
286 | /**
|
---|
287 | * ------------------------------------------------------------------------
|
---|
288 | * jQuery
|
---|
289 | * ------------------------------------------------------------------------
|
---|
290 | * add .ScrollSpy to jQuery only if jQuery is present
|
---|
291 | */
|
---|
292 |
|
---|
293 | defineJQueryPlugin(ScrollSpy)
|
---|
294 |
|
---|
295 | export default ScrollSpy
|
---|