js/src/scrollspy.js

   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       .map(element => {
 114         const targetSelector = getSelectorFromElement(element)
 115         const target = targetSelector ? SelectorEngine.findOne(targetSelector) : null
 116
 117         if (target) {
 118           const targetBCR = target.getBoundingClientRect()
 119           if (targetBCR.width || targetBCR.height) {
 120             return [
 121               Manipulator[offsetMethod](target).top + offsetBase,
 122               targetSelector
 123             ]
 124           }
 125         }
 126
 127         return null
 128       })
 129         .filter(item => item)
 130         .sort((a, b) => a[0] - b[0])
 131
 132     for (const item of targets) {
 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       for (const listGroup of SelectorEngine.parents(link, SELECTOR_NAV_LIST_GROUP)) {
 230         // Set triggered links parents as active
 231         // With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
 232         for (const item of SelectorEngine.prev(listGroup, `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}`)) {
 233           item.classList.add(CLASS_NAME_ACTIVE)
 234         }
 235
 236         // Handle special case when .nav-link is inside .nav-item
 237         for (const navItem of SelectorEngine.prev(listGroup, SELECTOR_NAV_ITEMS)) {
 238           for (const item of SelectorEngine.children(navItem, SELECTOR_NAV_LINKS)) {
 239             item.classList.add(CLASS_NAME_ACTIVE)
 240           }
 241         }
 242       }
 243     }
 244
 245     EventHandler.trigger(this._scrollElement, EVENT_ACTIVATE, {
 246       relatedTarget: target
 247     })
 248   }
 249
 250   _clear() {
 251     const activeNodes = SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target)
 252       .filter(node => node.classList.contains(CLASS_NAME_ACTIVE))
 253
 254     for (const node of activeNodes) {
 255       node.classList.remove(CLASS_NAME_ACTIVE)
 256     }
 257   }
 258
 259   // Static
 260
 261   static jQueryInterface(config) {
 262     return this.each(function () {
 263       const data = ScrollSpy.getOrCreateInstance(this, config)
 264
 265       if (typeof config !== 'string') {
 266         return
 267       }
 268
 269       if (typeof data[config] === 'undefined') {
 270         throw new TypeError(`No method named "${config}"`)
 271       }
 272
 273       data[config]()
 274     })
 275   }
 276 }
 277
 278 /**
 279  * ------------------------------------------------------------------------
 280  * Data Api implementation
 281  * ------------------------------------------------------------------------
 282  */
 283
 284 EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
 285   for (const spy of SelectorEngine.find(SELECTOR_DATA_SPY)) {
 286     new ScrollSpy(spy) // eslint-disable-line no-new
 287   }
 288 })
 289
 290 /**
 291  * ------------------------------------------------------------------------
 292  * jQuery
 293  * ------------------------------------------------------------------------
 294  * add .ScrollSpy to jQuery only if jQuery is present
 295  */
 296
 297 defineJQueryPlugin(ScrollSpy)
 298
 299 export default ScrollSpy