Skip to content

Commit

Permalink
revamp scrollspy to use IntersectionObserver
Browse files Browse the repository at this point in the history
  • Loading branch information
@GeoSot
GeoSot committed Jun 25, 2021
1 parent 088ef62 commit d0947a8
Show file tree
Hide file tree
Showing 2 changed files with 278 additions and 342 deletions.
231 changes: 100 additions & 131 deletions js/src/scrollspy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,7 @@
* --------------------------------------------------------------------------
*/

import {
defineJQueryPlugin,
getElement,
getSelectorFromElement,
typeCheckConfig
} from './util/index'
import { defineJQueryPlugin, getElement, reflow, typeCheckConfig } from './util/index'
import EventHandler from './dom/event-handler'
import Manipulator from './dom/manipulator'
import SelectorEngine from './dom/selector-engine'
Expand All @@ -28,19 +23,18 @@ const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'

const Default = {
offset: 10,
method: 'auto',
target: ''
target: null,
offset: null, // @deprecated, only for backwards Compatibility reasons
rootMargin: '0px 0px -40%'
}

const DefaultType = {
offset: 'number',
method: 'string',
target: '(string|element)'
target: 'element',
offset: '(number|null)', // @deprecated, only for backwards Compatibility reasons
rootMargin: 'string'
}

const EVENT_ACTIVATE = `activate${EVENT_KEY}`
const EVENT_SCROLL = `scroll${EVENT_KEY}`
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`

const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item'
Expand All @@ -51,13 +45,9 @@ const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'
const SELECTOR_NAV_LINKS = '.nav-link'
const SELECTOR_NAV_ITEMS = '.nav-item'
const SELECTOR_LIST_ITEMS = '.list-group-item'
const SELECTOR_LINK_ITEMS = `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}, .${CLASS_NAME_DROPDOWN_ITEM}`
const SELECTOR_DROPDOWN = '.dropdown'
const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'

const METHOD_OFFSET = 'offset'
const METHOD_POSITION = 'position'

/**
* ------------------------------------------------------------------------
* Class Definition
Expand All @@ -67,17 +57,15 @@ const METHOD_POSITION = 'position'
class ScrollSpy extends BaseComponent {
constructor(element, config) {
super(element)
this._scrollElement = this._element.tagName === 'BODY' ? window : this._element
this._config = this._getConfig(config)
this._offsets = []
this._targets = []
this._activeTarget = null
this._scrollHeight = 0

EventHandler.on(this._scrollElement, EVENT_SCROLL, () => this._process())
// this._element is the observablesContainer
this._config = this._getConfig(config)

this.refresh()
this._process()
this._targetLinks = []
this._activeTarget = null
this._observableSections = []
this._observer = null
this.refresh() // initialize
}

// Getters
Expand All @@ -93,49 +81,27 @@ class ScrollSpy extends BaseComponent {
// Public

refresh() {
const autoMethod = this._scrollElement === this._scrollElement.window ?
METHOD_OFFSET :
METHOD_POSITION

const offsetMethod = this._config.method === 'auto' ?
autoMethod :
this._config.method

const offsetBase = offsetMethod === METHOD_POSITION ?
this._getScrollTop() :
0

this._offsets = []
this._targets = []
this._scrollHeight = this._getScrollHeight()

const targets = SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target)

targets.map(element => {
const targetSelector = getSelectorFromElement(element)
const target = targetSelector ? SelectorEngine.findOne(targetSelector) : null

if (target) {
const targetBCR = target.getBoundingClientRect()
if (targetBCR.width || targetBCR.height) {
return [
Manipulator[offsetMethod](target).top + offsetBase,
targetSelector
]
}
}
// `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}, .${CLASS_NAME_DROPDOWN_ITEM}`
this._targetLinks = SelectorEngine
.find('[href]', this._config.target)
.filter(el => el.hash.length > 0)// ensure that all have id

this._observableSections = this._targetLinks
.map(el => SelectorEngine.findOne(el.hash, this._element))
.filter(el => el)// filter nulls

reflow(this._element)
if (this._observer) {
this._observer.disconnect()
} else {
this._observer = this._getNewObserver()
}

return null
})
.filter(item => item)
.sort((a, b) => a[0] - b[0])
.forEach(item => {
this._offsets.push(item[0])
this._targets.push(item[1])
})
this._observableSections.forEach(section => this._observer.observe(section))
}

dispose() {
this._observer.disconnect()
EventHandler.off(this._scrollElement, EVENT_KEY)
super.dispose()
}
Expand All @@ -149,84 +115,33 @@ class ScrollSpy extends BaseComponent {
...(typeof config === 'object' && config ? config : {})
}

config.target = getElement(config.target) || document.documentElement
config.target = getElement(config.target)

typeCheckConfig(NAME, config, DefaultType)

return config
}

_getScrollTop() {
return this._scrollElement === window ?
this._scrollElement.pageYOffset :
this._scrollElement.scrollTop
}

_getScrollHeight() {
return this._scrollElement.scrollHeight || Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight
)
}

_getOffsetHeight() {
return this._scrollElement === window ?
window.innerHeight :
this._scrollElement.getBoundingClientRect().height
}

_process() {
const scrollTop = this._getScrollTop() + this._config.offset
const scrollHeight = this._getScrollHeight()
const maxScroll = this._config.offset + scrollHeight - this._getOffsetHeight()

if (this._scrollHeight !== scrollHeight) {
this.refresh()
}

if (scrollTop >= maxScroll) {
const target = this._targets[this._targets.length - 1]

if (this._activeTarget !== target) {
this._activate(target)
}

_process(target) {
if (this._activeTarget === target) {
return
}

if (this._activeTarget && scrollTop < this._offsets[0] && this._offsets[0] > 0) {
this._activeTarget = null
this._clear()
this._clearActiveClass(this._config.target)
if (!target) {
return
}

for (let i = this._offsets.length; i--;) {
const isActiveTarget = this._activeTarget !== this._targets[i] &&
scrollTop >= this._offsets[i] &&
(typeof this._offsets[i + 1] === 'undefined' || scrollTop < this._offsets[i + 1])

if (isActiveTarget) {
this._activate(this._targets[i])
}
}
}

_activate(target) {
this._activeTarget = target

this._clear()

const queries = SELECTOR_LINK_ITEMS.split(',')
.map(selector => `${selector}[data-bs-target="${target}"],${selector}[href="${target}"]`)

const link = SelectorEngine.findOne(queries.join(','), this._config.target)
target.classList.add(CLASS_NAME_ACTIVE)

link.classList.add(CLASS_NAME_ACTIVE)
if (link.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) {
SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, link.closest(SELECTOR_DROPDOWN))
if (target.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) { // Activate dropdown parents
SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, target.closest(SELECTOR_DROPDOWN))
.classList.add(CLASS_NAME_ACTIVE)
} else {
SelectorEngine.parents(link, SELECTOR_NAV_LIST_GROUP)
SelectorEngine.parents(target, SELECTOR_NAV_LIST_GROUP)
SelectorEngine.parents(target, SELECTOR_NAV_LIST_GROUP)
.forEach(listGroup => {
// Set triggered links parents as active
// With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
Expand All @@ -242,17 +157,71 @@ class ScrollSpy extends BaseComponent {
})
}

EventHandler.trigger(this._scrollElement, EVENT_ACTIVATE, {
EventHandler.trigger(this._element, EVENT_ACTIVATE, {
relatedTarget: target
})
}

_clear() {
SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target)
.filter(node => node.classList.contains(CLASS_NAME_ACTIVE))
_clearActiveClass(parent) {
if (parent !== this._config.target) {
parent.classList.remove(CLASS_NAME_ACTIVE)
}

SelectorEngine.find(`.${CLASS_NAME_ACTIVE}`, parent)
.forEach(node => node.classList.remove(CLASS_NAME_ACTIVE))
}

_getNewObserver() {
let previousVisibleEntryTop = 0
let previousParentScrollTop = 0

const activate = entry => {
previousVisibleEntryTop = entry.target.offsetTop
const targetToActivate = this._targetLinks.find(el => el.hash === `#${entry.target.id}`)
this._process(targetToActivate)
}

const callback = entries => {
const parentScrollTop = this._element.scrollTop
entries.forEach(entry => {
if (entry.isIntersecting) {
const { offsetTop } = entry.target
const userScrollsDown = parentScrollTop >= previousParentScrollTop

if (userScrollsDown && offsetTop >= previousVisibleEntryTop) { // if we are scrolling down, pick the bigger offsetTop
activate(entry)
return
}

if (!userScrollsDown && offsetTop < previousVisibleEntryTop) {// if we are scrolling up, pick the smallest offsetTop
activate(entry)
}

return
}

const notVisibleElement = this._targetLinks.find(el => el.hash === `#${entry.target.id}`)
this._clearActiveClass(notVisibleElement)
})

previousParentScrollTop = this._element.scrollTop
}

const options = {
root: this._element,
threshold: 0,
rootMargin: this._getRootMargin()
}

return new IntersectionObserver(callback.bind(this), options)
}

_getRootMargin() { // Only for backwards compatibility reasons. Use rootMargin only
const { offset, rootMargin } = this._config

return offset ? `${offset}px 0px 0px` : rootMargin
}

// Static

static jQueryInterface(config) {
Expand All @@ -263,7 +232,7 @@ class ScrollSpy extends BaseComponent {
return
}

if (typeof data[config] === 'undefined') {
if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
throw new TypeError(`No method named "${config}"`)
}

Expand Down
Loading

0 comments on commit d0947a8

Please sign in to comment.