[6a3a178] | 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
|
---|