mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-10 15:44:51 +02:00
Revamp Scrollspy using Intersection observer (#33421)
* Revamp scrollspy to use IntersectionObserver * Add smooth scroll support * Update scrollspy.js/md * move functionality to method * Update scrollspy.js * Add SmoothScroll to docs example * Refactor Using `Maps` and smaller methods * Update scrollspy.md/js * Update scrollspy.spec.js * Support backwards compatibility * minor optimizations * Merge activation functionality * Update scrollspy.md * Update scrollspy.js * Rewording some of the documentation changes * Update scrollspy.js * Update scrollspy.md * tweaking calculation functionality & drop text that suggests, to deactivate target when wrapper is not visible * tweak calculation * Fix lint * Support scrollspy in body & tests * change doc example to a more valid solution Co-authored-by: XhmikosR <xhmikosr@gmail.com> Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
This commit is contained in:
GeoSot
GitHub
@@ -57,22 +57,6 @@ const Manipulator = {
|
||||
|
||||
getDataAttribute(element, key) {
|
||||
return normalizeData(element.getAttribute(`data-bs-${normalizeDataKey(key)}`))
|
||||
},
|
||||
|
||||
offset(element) {
|
||||
const rect = element.getBoundingClientRect()
|
||||
|
||||
return {
|
||||
top: rect.top + window.pageYOffset,
|
||||
left: rect.left + window.pageXOffset
|
||||
}
|
||||
},
|
||||
|
||||
position(element) {
|
||||
return {
|
||||
top: element.offsetTop,
|
||||
left: element.offsetLeft
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -5,9 +5,8 @@
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
import { defineJQueryPlugin, getElement, getSelectorFromElement } from './util/index'
|
||||
import { defineJQueryPlugin, getElement, isDisabled, isVisible } from './util/index'
|
||||
import EventHandler from './dom/event-handler'
|
||||
import Manipulator from './dom/manipulator'
|
||||
import SelectorEngine from './dom/selector-engine'
|
||||
import BaseComponent from './base-component'
|
||||
|
||||
@@ -21,34 +20,34 @@ const EVENT_KEY = `.${DATA_KEY}`
|
||||
const DATA_API_KEY = '.data-api'
|
||||
|
||||
const EVENT_ACTIVATE = `activate${EVENT_KEY}`
|
||||
const EVENT_SCROLL = `scroll${EVENT_KEY}`
|
||||
const EVENT_CLICK = `click${EVENT_KEY}`
|
||||
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
|
||||
|
||||
const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item'
|
||||
const CLASS_NAME_ACTIVE = 'active'
|
||||
|
||||
const SELECTOR_DATA_SPY = '[data-bs-spy="scroll"]'
|
||||
const SELECTOR_TARGET_LINKS = '[href]'
|
||||
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_LINK_ITEMS = `${SELECTOR_NAV_LINKS}, ${SELECTOR_NAV_ITEMS} > ${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}`
|
||||
const SELECTOR_DROPDOWN = '.dropdown'
|
||||
const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'
|
||||
|
||||
const METHOD_OFFSET = 'offset'
|
||||
const METHOD_POSITION = 'position'
|
||||
|
||||
const Default = {
|
||||
offset: 10,
|
||||
method: 'auto',
|
||||
target: ''
|
||||
offset: null, // TODO: v6 @deprecated, keep it for backwards compatibility reasons
|
||||
rootMargin: '0px 0px -25%',
|
||||
smoothScroll: false,
|
||||
target: null
|
||||
}
|
||||
|
||||
const DefaultType = {
|
||||
offset: 'number',
|
||||
method: 'string',
|
||||
target: '(string|element)'
|
||||
offset: '(number|null)', // TODO v6 @deprecated, keep it for backwards compatibility reasons
|
||||
rootMargin: 'string',
|
||||
smoothScroll: 'boolean',
|
||||
target: 'element'
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -58,16 +57,18 @@ const DefaultType = {
|
||||
class ScrollSpy extends BaseComponent {
|
||||
constructor(element, config) {
|
||||
super(element, config)
|
||||
this._scrollElement = this._element.tagName === 'BODY' ? window : this._element
|
||||
this._offsets = []
|
||||
this._targets = []
|
||||
|
||||
// this._element is the observablesContainer and config.target the menu links wrapper
|
||||
this._targetLinks = new Map()
|
||||
this._observableSections = new Map()
|
||||
this._rootElement = getComputedStyle(this._element).overflowY === 'visible' ? null : this._element
|
||||
this._activeTarget = null
|
||||
this._scrollHeight = 0
|
||||
|
||||
EventHandler.on(this._scrollElement, EVENT_SCROLL, () => this._process())
|
||||
|
||||
this.refresh()
|
||||
this._process()
|
||||
this._observer = null
|
||||
this._previousScrollData = {
|
||||
visibleEntryTop: 0,
|
||||
parentScrollTop: 0
|
||||
}
|
||||
this.refresh() // initialize
|
||||
}
|
||||
|
||||
// Getters
|
||||
@@ -85,145 +86,168 @@ class ScrollSpy extends BaseComponent {
|
||||
|
||||
// Public
|
||||
refresh() {
|
||||
this._offsets = []
|
||||
this._targets = []
|
||||
this._scrollHeight = this._getScrollHeight()
|
||||
this._initializeTargetsAndObservables()
|
||||
this._maybeEnableSmoothScroll()
|
||||
|
||||
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
|
||||
const targets = SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target)
|
||||
.map(element => {
|
||||
const targetSelector = getSelectorFromElement(element)
|
||||
const target = targetSelector ? SelectorEngine.findOne(targetSelector) : null
|
||||
if (this._observer) {
|
||||
this._observer.disconnect()
|
||||
} else {
|
||||
this._observer = this._getNewObserver()
|
||||
}
|
||||
|
||||
if (!target) {
|
||||
return null
|
||||
}
|
||||
|
||||
const targetBCR = target.getBoundingClientRect()
|
||||
|
||||
return targetBCR.width || targetBCR.height ?
|
||||
[Manipulator[offsetMethod](target).top + offsetBase, targetSelector] :
|
||||
null
|
||||
})
|
||||
.filter(Boolean)
|
||||
.sort((a, b) => a[0] - b[0])
|
||||
|
||||
for (const target of targets) {
|
||||
this._offsets.push(target[0])
|
||||
this._targets.push(target[1])
|
||||
for (const section of this._observableSections.values()) {
|
||||
this._observer.observe(section)
|
||||
}
|
||||
}
|
||||
|
||||
dispose() {
|
||||
EventHandler.off(this._scrollElement, EVENT_KEY)
|
||||
this._observer.disconnect()
|
||||
super.dispose()
|
||||
}
|
||||
|
||||
// Private
|
||||
|
||||
_configAfterMerge(config) {
|
||||
config.target = getElement(config.target) || document.documentElement
|
||||
// TODO: on v6 target should be given explicitly & remove the {target: 'ss-target'} case
|
||||
config.target = getElement(config.target) || document.body
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
_maybeEnableSmoothScroll() {
|
||||
if (!this._config.smoothScroll) {
|
||||
return
|
||||
}
|
||||
|
||||
if (this._activeTarget && scrollTop < this._offsets[0] && this._offsets[0] > 0) {
|
||||
this._activeTarget = null
|
||||
this._clear()
|
||||
return
|
||||
}
|
||||
// unregister any previous listeners
|
||||
EventHandler.off(this._config.target, EVENT_CLICK)
|
||||
|
||||
for (const i of this._offsets.keys()) {
|
||||
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)
|
||||
|
||||
link.classList.add(CLASS_NAME_ACTIVE)
|
||||
if (link.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) {
|
||||
SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, link.closest(SELECTOR_DROPDOWN))
|
||||
.classList.add(CLASS_NAME_ACTIVE)
|
||||
} else {
|
||||
for (const listGroup of SelectorEngine.parents(link, SELECTOR_NAV_LIST_GROUP)) {
|
||||
// Set triggered links parents as active
|
||||
// With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
|
||||
for (const item of SelectorEngine.prev(listGroup, `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}`)) {
|
||||
item.classList.add(CLASS_NAME_ACTIVE)
|
||||
EventHandler.on(this._config.target, EVENT_CLICK, SELECTOR_TARGET_LINKS, event => {
|
||||
const observableSection = this._observableSections.get(event.target.hash)
|
||||
if (observableSection) {
|
||||
event.preventDefault()
|
||||
const root = this._rootElement || window
|
||||
const height = observableSection.offsetTop - this._element.offsetTop
|
||||
if (root.scrollTo) {
|
||||
root.scrollTo({ top: height })
|
||||
return
|
||||
}
|
||||
|
||||
// Handle special case when .nav-link is inside .nav-item
|
||||
for (const navItem of SelectorEngine.prev(listGroup, SELECTOR_NAV_ITEMS)) {
|
||||
for (const item of SelectorEngine.children(navItem, SELECTOR_NAV_LINKS)) {
|
||||
item.classList.add(CLASS_NAME_ACTIVE)
|
||||
}
|
||||
}
|
||||
// Chrome 60 doesn't support `scrollTo`
|
||||
root.scrollTop = height
|
||||
}
|
||||
}
|
||||
|
||||
EventHandler.trigger(this._scrollElement, EVENT_ACTIVATE, {
|
||||
relatedTarget: target
|
||||
})
|
||||
}
|
||||
|
||||
_clear() {
|
||||
const activeNodes = SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target)
|
||||
.filter(node => node.classList.contains(CLASS_NAME_ACTIVE))
|
||||
_getNewObserver() {
|
||||
const options = {
|
||||
root: this._rootElement,
|
||||
threshold: [0.1, 0.5, 1],
|
||||
rootMargin: this._getRootMargin()
|
||||
}
|
||||
|
||||
return new IntersectionObserver(entries => this._observerCallback(entries), options)
|
||||
}
|
||||
|
||||
// The logic of selection
|
||||
_observerCallback(entries) {
|
||||
const targetElement = entry => this._targetLinks.get(`#${entry.target.id}`)
|
||||
const activate = entry => {
|
||||
this._previousScrollData.visibleEntryTop = entry.target.offsetTop
|
||||
this._process(targetElement(entry))
|
||||
}
|
||||
|
||||
const parentScrollTop = (this._rootElement || document.documentElement).scrollTop
|
||||
const userScrollsDown = parentScrollTop >= this._previousScrollData.parentScrollTop
|
||||
this._previousScrollData.parentScrollTop = parentScrollTop
|
||||
|
||||
for (const entry of entries) {
|
||||
if (!entry.isIntersecting) {
|
||||
this._activeTarget = null
|
||||
this._clearActiveClass(targetElement(entry))
|
||||
|
||||
continue
|
||||
}
|
||||
|
||||
const entryIsLowerThanPrevious = entry.target.offsetTop >= this._previousScrollData.visibleEntryTop
|
||||
// if we are scrolling down, pick the bigger offsetTop
|
||||
if (userScrollsDown && entryIsLowerThanPrevious) {
|
||||
activate(entry)
|
||||
// if parent isn't scrolled, let's keep the first visible item, breaking the iteration
|
||||
if (!parentScrollTop) {
|
||||
return
|
||||
}
|
||||
|
||||
continue
|
||||
}
|
||||
|
||||
// if we are scrolling up, pick the smallest offsetTop
|
||||
if (!userScrollsDown && !entryIsLowerThanPrevious) {
|
||||
activate(entry)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: v6 Only for backwards compatibility reasons. Use rootMargin only
|
||||
_getRootMargin() {
|
||||
return this._config.offset ? `${this._config.offset}px 0px -30%` : this._config.rootMargin
|
||||
}
|
||||
|
||||
_initializeTargetsAndObservables() {
|
||||
this._targetLinks = new Map()
|
||||
this._observableSections = new Map()
|
||||
|
||||
const targetLinks = SelectorEngine.find(SELECTOR_TARGET_LINKS, this._config.target)
|
||||
|
||||
for (const anchor of targetLinks) {
|
||||
// ensure that the anchor has an id and is not disabled
|
||||
if (!anchor.hash || isDisabled(anchor)) {
|
||||
continue
|
||||
}
|
||||
|
||||
const observableSection = SelectorEngine.findOne(anchor.hash, this._element)
|
||||
|
||||
// ensure that the observableSection exists & is visible
|
||||
if (isVisible(observableSection)) {
|
||||
this._targetLinks.set(anchor.hash, anchor)
|
||||
this._observableSections.set(anchor.hash, observableSection)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_process(target) {
|
||||
if (this._activeTarget === target) {
|
||||
return
|
||||
}
|
||||
|
||||
this._clearActiveClass(this._config.target)
|
||||
this._activeTarget = target
|
||||
target.classList.add(CLASS_NAME_ACTIVE)
|
||||
this._activateParents(target)
|
||||
|
||||
EventHandler.trigger(this._element, EVENT_ACTIVATE, { relatedTarget: target })
|
||||
}
|
||||
|
||||
_activateParents(target) {
|
||||
// Activate dropdown parents
|
||||
if (target.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) {
|
||||
SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, target.closest(SELECTOR_DROPDOWN))
|
||||
.classList.add(CLASS_NAME_ACTIVE)
|
||||
return
|
||||
}
|
||||
|
||||
for (const listGroup of SelectorEngine.parents(target, SELECTOR_NAV_LIST_GROUP)) {
|
||||
// Set triggered links parents as active
|
||||
// With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
|
||||
for (const item of SelectorEngine.prev(listGroup, SELECTOR_LINK_ITEMS)) {
|
||||
item.classList.add(CLASS_NAME_ACTIVE)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_clearActiveClass(parent) {
|
||||
parent.classList.remove(CLASS_NAME_ACTIVE)
|
||||
|
||||
const activeNodes = SelectorEngine.find(`${SELECTOR_TARGET_LINKS}.${CLASS_NAME_ACTIVE}`, parent)
|
||||
for (const node of activeNodes) {
|
||||
node.classList.remove(CLASS_NAME_ACTIVE)
|
||||
}
|
||||
@@ -238,7 +262,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}"`)
|
||||
}
|
||||
|
||||
@@ -253,7 +277,7 @@ class ScrollSpy extends BaseComponent {
|
||||
|
||||
EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
|
||||
for (const spy of SelectorEngine.find(SELECTOR_DATA_SPY)) {
|
||||
new ScrollSpy(spy) // eslint-disable-line no-new
|
||||
ScrollSpy.getOrCreateInstance(spy)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@@ -105,86 +105,4 @@ describe('Manipulator', () => {
|
||||
expect(Manipulator.getDataAttribute(div, 'test')).toEqual(1)
|
||||
})
|
||||
})
|
||||
|
||||
describe('offset', () => {
|
||||
it('should return an object with two properties top and left, both numbers', () => {
|
||||
fixtureEl.innerHTML = '<div></div>'
|
||||
|
||||
const div = fixtureEl.querySelector('div')
|
||||
const offset = Manipulator.offset(div)
|
||||
|
||||
expect(offset).toBeDefined()
|
||||
expect(offset.top).toEqual(jasmine.any(Number))
|
||||
expect(offset.left).toEqual(jasmine.any(Number))
|
||||
})
|
||||
|
||||
it('should return offset relative to attached element\'s offset', () => {
|
||||
const top = 500
|
||||
const left = 1000
|
||||
|
||||
fixtureEl.innerHTML = `<div style="position:absolute;top:${top}px;left:${left}px"></div>`
|
||||
|
||||
const div = fixtureEl.querySelector('div')
|
||||
const offset = Manipulator.offset(div)
|
||||
const fixtureOffset = Manipulator.offset(fixtureEl)
|
||||
|
||||
expect(offset).toEqual({
|
||||
top: fixtureOffset.top + top,
|
||||
left: fixtureOffset.left + left
|
||||
})
|
||||
})
|
||||
|
||||
it('should not change offset when viewport is scrolled', () => {
|
||||
return new Promise(resolve => {
|
||||
const top = 500
|
||||
const left = 1000
|
||||
const scrollY = 200
|
||||
const scrollX = 400
|
||||
|
||||
fixtureEl.innerHTML = `<div style="position:absolute;top:${top}px;left:${left}px"></div>`
|
||||
|
||||
const div = fixtureEl.querySelector('div')
|
||||
const offset = Manipulator.offset(div)
|
||||
|
||||
// append an element that forces scrollbars on the window so we can scroll
|
||||
const { defaultView: win, body } = fixtureEl.ownerDocument
|
||||
const forceScrollBars = document.createElement('div')
|
||||
forceScrollBars.style.cssText = 'position:absolute;top:5000px;left:5000px;width:1px;height:1px'
|
||||
body.append(forceScrollBars)
|
||||
|
||||
const scrollHandler = () => {
|
||||
expect(window.pageYOffset).toEqual(scrollY)
|
||||
expect(window.pageXOffset).toEqual(scrollX)
|
||||
|
||||
const newOffset = Manipulator.offset(div)
|
||||
|
||||
expect(newOffset).toEqual({
|
||||
top: offset.top,
|
||||
left: offset.left
|
||||
})
|
||||
|
||||
win.removeEventListener('scroll', scrollHandler)
|
||||
forceScrollBars.remove()
|
||||
win.scrollTo(0, 0)
|
||||
resolve()
|
||||
}
|
||||
|
||||
win.addEventListener('scroll', scrollHandler)
|
||||
win.scrollTo(scrollX, scrollY)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('position', () => {
|
||||
it('should return an object with two properties top and left, both numbers', () => {
|
||||
fixtureEl.innerHTML = '<div></div>'
|
||||
|
||||
const div = fixtureEl.querySelector('div')
|
||||
const position = Manipulator.position(div)
|
||||
|
||||
expect(position).toBeDefined()
|
||||
expect(position.top).toEqual(jasmine.any(Number))
|
||||
expect(position.left).toEqual(jasmine.any(Number))
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,28 +1,71 @@
|
||||
import ScrollSpy from '../../src/scrollspy'
|
||||
import Manipulator from '../../src/dom/manipulator'
|
||||
|
||||
/** Test helpers */
|
||||
import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture'
|
||||
import EventHandler from '../../src/dom/event-handler'
|
||||
|
||||
describe('ScrollSpy', () => {
|
||||
let fixtureEl
|
||||
|
||||
const testElementIsActiveAfterScroll = ({ elementSelector, targetSelector, contentEl, scrollSpy, spy, cb }) => {
|
||||
const element = fixtureEl.querySelector(elementSelector)
|
||||
const target = fixtureEl.querySelector(targetSelector)
|
||||
const getElementScrollSpy = element => element.scrollTo ?
|
||||
spyOn(element, 'scrollTo').and.callThrough() :
|
||||
spyOnProperty(element, 'scrollTop', 'set').and.callThrough()
|
||||
|
||||
// add top padding to fix Chrome on Android failures
|
||||
const paddingTop = 5
|
||||
const scrollHeight = Math.ceil(contentEl.scrollTop + Manipulator.position(target).top) + paddingTop
|
||||
const scrollTo = (el, height) => {
|
||||
el.scrollTop = height
|
||||
}
|
||||
|
||||
function listener() {
|
||||
expect(element).toHaveClass('active')
|
||||
contentEl.removeEventListener('scroll', listener)
|
||||
expect(scrollSpy._process).toHaveBeenCalled()
|
||||
spy.calls.reset()
|
||||
cb()
|
||||
const onScrollStop = (callback, element, timeout = 30) => {
|
||||
let handle = null
|
||||
const onScroll = function () {
|
||||
if (handle) {
|
||||
window.clearTimeout(handle)
|
||||
}
|
||||
|
||||
handle = setTimeout(() => {
|
||||
element.removeEventListener('scroll', onScroll)
|
||||
callback()
|
||||
}, timeout + 1)
|
||||
}
|
||||
|
||||
contentEl.addEventListener('scroll', listener)
|
||||
contentEl.scrollTop = scrollHeight
|
||||
element.addEventListener('scroll', onScroll)
|
||||
}
|
||||
|
||||
const getDummyFixture = () => {
|
||||
return [
|
||||
'<nav id="navBar" class="navbar">',
|
||||
' <ul class="nav">',
|
||||
' <li class="nav-item"><a id="li-jsm-1" class="nav-link" href="#div-jsm-1">div 1</a></li>',
|
||||
' </ul>',
|
||||
'</nav>',
|
||||
'<div class="content" data-bs-target="#navBar" style="overflow-y: auto">',
|
||||
' <div id="div-jsm-1">div 1</div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
}
|
||||
|
||||
const testElementIsActiveAfterScroll = ({ elementSelector, targetSelector, contentEl, scrollSpy, cb }) => {
|
||||
const element = fixtureEl.querySelector(elementSelector)
|
||||
const target = fixtureEl.querySelector(targetSelector)
|
||||
// add top padding to fix Chrome on Android failures
|
||||
const paddingTop = 0
|
||||
const parentOffset = getComputedStyle(contentEl).getPropertyValue('position') === 'relative' ? 0 : contentEl.offsetTop
|
||||
const scrollHeight = (target.offsetTop - parentOffset) + paddingTop
|
||||
|
||||
contentEl.addEventListener('activate.bs.scrollspy', event => {
|
||||
if (scrollSpy._activeTarget !== element) {
|
||||
return
|
||||
}
|
||||
|
||||
expect(element).toHaveClass('active')
|
||||
expect(scrollSpy._activeTarget).toEqual(element)
|
||||
expect(event.relatedTarget).toEqual(element)
|
||||
cb()
|
||||
})
|
||||
|
||||
setTimeout(() => { // in case we scroll something before the test
|
||||
scrollTo(contentEl, scrollHeight)
|
||||
}, 100)
|
||||
}
|
||||
|
||||
beforeAll(() => {
|
||||
@@ -53,16 +96,60 @@ describe('ScrollSpy', () => {
|
||||
|
||||
describe('constructor', () => {
|
||||
it('should take care of element either passed as a CSS selector or DOM element', () => {
|
||||
fixtureEl.innerHTML = '<nav id="navigation"></nav><div class="content"></div>'
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
|
||||
const sSpyEl = fixtureEl.querySelector('#navigation')
|
||||
const sSpyBySelector = new ScrollSpy('#navigation')
|
||||
const sSpyEl = fixtureEl.querySelector('.content')
|
||||
const sSpyBySelector = new ScrollSpy('.content')
|
||||
const sSpyByElement = new ScrollSpy(sSpyEl)
|
||||
|
||||
expect(sSpyBySelector._element).toEqual(sSpyEl)
|
||||
expect(sSpyByElement._element).toEqual(sSpyEl)
|
||||
})
|
||||
|
||||
it('should null, if element is not scrollable', () => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<nav id="navigation" class="navbar">',
|
||||
' <ul class="navbar-nav">' +
|
||||
' <li class="nav-item"><a class="nav-link active" id="one-link" href="#">One</a></li>' +
|
||||
' </ul>',
|
||||
'</nav>',
|
||||
'<div id="content">',
|
||||
' <div id="1" style="height: 300px;">test</div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const scrollSpy = new ScrollSpy(fixtureEl.querySelector('#content'), {
|
||||
target: '#navigation'
|
||||
})
|
||||
|
||||
expect(scrollSpy._observer.root).toBeNull()
|
||||
expect(scrollSpy._rootElement).toBeNull()
|
||||
})
|
||||
|
||||
it('should not take count to not visible sections', () => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<nav id="navigation" class="navbar">',
|
||||
' <ul class="navbar-nav">',
|
||||
' <li class="nav-item"><a class="nav-link active" id="one-link" href="#one">One</a></li>',
|
||||
' <li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>',
|
||||
' <li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>',
|
||||
' </ul>',
|
||||
'</nav>',
|
||||
'<div id="content" style="height: 200px; overflow-y: auto;">',
|
||||
' <div id="one" style="height: 300px;">test</div>',
|
||||
' <div id="two" hidden style="height: 300px;">test</div>',
|
||||
' <div id="three" style="display: none;">test</div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const scrollSpy = new ScrollSpy(fixtureEl.querySelector('#content'), {
|
||||
target: '#navigation'
|
||||
})
|
||||
|
||||
expect(scrollSpy._observableSections.size).toBe(1)
|
||||
expect(scrollSpy._targetLinks.size).toBe(1)
|
||||
})
|
||||
|
||||
it('should not process element without target', () => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<nav id="navigation" class="navbar">',
|
||||
@@ -73,8 +160,8 @@ describe('ScrollSpy', () => {
|
||||
' </ul>',
|
||||
'</nav>',
|
||||
'<div id="content" style="height: 200px; overflow-y: auto;">',
|
||||
' <div id="two" style="height: 300px;"></div>',
|
||||
' <div id="three" style="height: 10px;"></div>',
|
||||
' <div id="two" style="height: 300px;">test</div>',
|
||||
' <div id="three" style="height: 10px;">test2</div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
@@ -82,7 +169,7 @@ describe('ScrollSpy', () => {
|
||||
target: '#navigation'
|
||||
})
|
||||
|
||||
expect(scrollSpy._targets).toHaveSize(2)
|
||||
expect(scrollSpy._targetLinks).toHaveSize(2)
|
||||
})
|
||||
|
||||
it('should only switch "active" class on current target', () => {
|
||||
@@ -100,14 +187,8 @@ describe('ScrollSpy', () => {
|
||||
' </div>',
|
||||
' </div>',
|
||||
' <div id="scrollspy-example" style="height: 100px; overflow: auto;">',
|
||||
' <div style="height: 200px;">',
|
||||
' <h4 id="masthead">Overview</h4>',
|
||||
' <p style="height: 200px;"></p>',
|
||||
' </div>',
|
||||
' <div style="height: 200px;">',
|
||||
' <h4 id="detail">Detail</h4>',
|
||||
' <p style="height: 200px;"></p>',
|
||||
' </div>',
|
||||
' <div style="height: 200px;" id="masthead">Overview</div>',
|
||||
' <div style="height: 200px;" id="detail">Detail</div>',
|
||||
' </div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
@@ -120,13 +201,52 @@ describe('ScrollSpy', () => {
|
||||
|
||||
spyOn(scrollSpy, '_process').and.callThrough()
|
||||
|
||||
scrollSpyEl.addEventListener('scroll', () => {
|
||||
onScrollStop(() => {
|
||||
expect(rootEl).toHaveClass('active')
|
||||
expect(scrollSpy._process).toHaveBeenCalled()
|
||||
resolve()
|
||||
}, scrollSpyEl)
|
||||
|
||||
scrollTo(scrollSpyEl, 350)
|
||||
})
|
||||
})
|
||||
|
||||
it('should not process data if `activeTarget` is same as given target', () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<nav class="navbar">',
|
||||
' <ul class="nav">',
|
||||
' <li class="nav-item"><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>',
|
||||
' <li class="nav-item"><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>',
|
||||
' </ul>',
|
||||
'</nav>',
|
||||
'<div class="content" style="overflow: auto; height: 50px">',
|
||||
' <div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>',
|
||||
' <div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const contentEl = fixtureEl.querySelector('.content')
|
||||
const scrollSpy = new ScrollSpy(contentEl, {
|
||||
offset: 0,
|
||||
target: '.navbar'
|
||||
})
|
||||
|
||||
scrollSpyEl.scrollTop = 350
|
||||
const triggerSpy = spyOn(EventHandler, 'trigger').and.callThrough()
|
||||
|
||||
scrollSpy._activeTarget = fixtureEl.querySelector('#a-1')
|
||||
testElementIsActiveAfterScroll({
|
||||
elementSelector: '#a-1',
|
||||
targetSelector: '#div-1',
|
||||
contentEl,
|
||||
scrollSpy,
|
||||
cb: reject
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
expect(triggerSpy).not.toHaveBeenCalled()
|
||||
resolve()
|
||||
}, 100)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -145,14 +265,8 @@ describe('ScrollSpy', () => {
|
||||
' </div>',
|
||||
' </div>',
|
||||
' <div id="scrollspy-example" style="height: 100px; overflow: auto;">',
|
||||
' <div style="height: 200px;">',
|
||||
' <h4 id="masthead">Overview</h4>',
|
||||
' <p style="height: 200px;"></p>',
|
||||
' </div>',
|
||||
' <div style="height: 200px;">',
|
||||
' <h4 id="detail">Detail</h4>',
|
||||
' <p style="height: 200px;"></p>',
|
||||
' </div>',
|
||||
' <div style="height: 200px;" id="masthead">Overview</div>',
|
||||
' <div style="height: 200px;" id="detail">Detail</div>',
|
||||
' </div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
@@ -165,51 +279,14 @@ describe('ScrollSpy', () => {
|
||||
|
||||
spyOn(scrollSpy, '_process').and.callThrough()
|
||||
|
||||
scrollSpyEl.addEventListener('scroll', () => {
|
||||
onScrollStop(() => {
|
||||
expect(rootEl).toHaveClass('active')
|
||||
expect(scrollSpy._activeTarget).toEqual(fixtureEl.querySelector('[href="#detail"]'))
|
||||
expect(scrollSpy._process).toHaveBeenCalled()
|
||||
resolve()
|
||||
})
|
||||
}, scrollSpyEl)
|
||||
|
||||
scrollSpyEl.scrollTop = 350
|
||||
})
|
||||
})
|
||||
|
||||
it('should correctly select middle navigation option when large offset is used', () => {
|
||||
return new Promise(resolve => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div id="header" style="height: 500px;"></div>',
|
||||
'<nav id="navigation" class="navbar">',
|
||||
' <ul class="navbar-nav">',
|
||||
' <li class="nav-item"><a class="nav-link active" id="one-link" href="#one">One</a></li>',
|
||||
' <li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>',
|
||||
' <li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>',
|
||||
' </ul>',
|
||||
'</nav>',
|
||||
'<div id="content" style="height: 200px; overflow-y: auto;">',
|
||||
' <div id="one" style="height: 500px;"></div>',
|
||||
' <div id="two" style="height: 300px;"></div>',
|
||||
' <div id="three" style="height: 10px;"></div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const contentEl = fixtureEl.querySelector('#content')
|
||||
const scrollSpy = new ScrollSpy(contentEl, {
|
||||
target: '#navigation',
|
||||
offset: Manipulator.position(contentEl).top
|
||||
})
|
||||
|
||||
spyOn(scrollSpy, '_process').and.callThrough()
|
||||
|
||||
contentEl.addEventListener('scroll', () => {
|
||||
expect(fixtureEl.querySelector('#one-link')).not.toHaveClass('active')
|
||||
expect(fixtureEl.querySelector('#two-link')).toHaveClass('active')
|
||||
expect(fixtureEl.querySelector('#three-link')).not.toHaveClass('active')
|
||||
expect(scrollSpy._process).toHaveBeenCalled()
|
||||
resolve()
|
||||
})
|
||||
|
||||
contentEl.scrollTop = 550
|
||||
scrollTo(scrollSpyEl, 350)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -233,21 +310,18 @@ describe('ScrollSpy', () => {
|
||||
offset: 0,
|
||||
target: '.navbar'
|
||||
})
|
||||
const spy = spyOn(scrollSpy, '_process').and.callThrough()
|
||||
|
||||
testElementIsActiveAfterScroll({
|
||||
elementSelector: '#a-1',
|
||||
targetSelector: '#div-1',
|
||||
contentEl,
|
||||
scrollSpy,
|
||||
spy,
|
||||
cb() {
|
||||
testElementIsActiveAfterScroll({
|
||||
elementSelector: '#a-2',
|
||||
targetSelector: '#div-2',
|
||||
contentEl,
|
||||
scrollSpy,
|
||||
spy,
|
||||
cb: resolve
|
||||
})
|
||||
}
|
||||
@@ -255,7 +329,7 @@ describe('ScrollSpy', () => {
|
||||
})
|
||||
})
|
||||
|
||||
it('should add the active class to the correct element (nav markup)', () => {
|
||||
it('should add to nav the active class to the correct element (nav markup)', () => {
|
||||
return new Promise(resolve => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<nav class="navbar">',
|
||||
@@ -275,21 +349,18 @@ describe('ScrollSpy', () => {
|
||||
offset: 0,
|
||||
target: '.navbar'
|
||||
})
|
||||
const spy = spyOn(scrollSpy, '_process').and.callThrough()
|
||||
|
||||
testElementIsActiveAfterScroll({
|
||||
elementSelector: '#a-1',
|
||||
targetSelector: '#div-1',
|
||||
contentEl,
|
||||
scrollSpy,
|
||||
spy,
|
||||
cb() {
|
||||
testElementIsActiveAfterScroll({
|
||||
elementSelector: '#a-2',
|
||||
targetSelector: '#div-2',
|
||||
contentEl,
|
||||
scrollSpy,
|
||||
spy,
|
||||
cb: resolve
|
||||
})
|
||||
}
|
||||
@@ -297,7 +368,7 @@ describe('ScrollSpy', () => {
|
||||
})
|
||||
})
|
||||
|
||||
it('should add the active class to the correct element (list-group markup)', () => {
|
||||
it('should add to list-group, the active class to the correct element (list-group markup)', () => {
|
||||
return new Promise(resolve => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<nav class="navbar">',
|
||||
@@ -317,21 +388,18 @@ describe('ScrollSpy', () => {
|
||||
offset: 0,
|
||||
target: '.navbar'
|
||||
})
|
||||
const spy = spyOn(scrollSpy, '_process').and.callThrough()
|
||||
|
||||
testElementIsActiveAfterScroll({
|
||||
elementSelector: '#a-1',
|
||||
targetSelector: '#div-1',
|
||||
contentEl,
|
||||
scrollSpy,
|
||||
spy,
|
||||
cb() {
|
||||
testElementIsActiveAfterScroll({
|
||||
elementSelector: '#a-2',
|
||||
targetSelector: '#div-2',
|
||||
contentEl,
|
||||
scrollSpy,
|
||||
spy,
|
||||
cb: resolve
|
||||
})
|
||||
}
|
||||
@@ -351,10 +419,10 @@ describe('ScrollSpy', () => {
|
||||
' </ul>',
|
||||
'</nav>',
|
||||
'<div id="content" style="height: 200px; overflow-y: auto;">',
|
||||
' <div id="spacer" style="height: 100px;"></div>',
|
||||
' <div id="one" style="height: 100px;"></div>',
|
||||
' <div id="two" style="height: 100px;"></div>',
|
||||
' <div id="three" style="height: 100px;"></div>',
|
||||
' <div id="spacer" style="height: 200px;"></div>',
|
||||
' <div id="one" style="height: 100px;">text</div>',
|
||||
' <div id="two" style="height: 100px;">text</div>',
|
||||
' <div id="three" style="height: 100px;">text</div>',
|
||||
' <div id="spacer" style="height: 100px;"></div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
@@ -362,29 +430,24 @@ describe('ScrollSpy', () => {
|
||||
const contentEl = fixtureEl.querySelector('#content')
|
||||
const scrollSpy = new ScrollSpy(contentEl, {
|
||||
target: '#navigation',
|
||||
offset: Manipulator.position(contentEl).top
|
||||
offset: contentEl.offsetTop
|
||||
})
|
||||
const spy = spyOn(scrollSpy, '_process').and.callThrough()
|
||||
|
||||
let firstTime = true
|
||||
|
||||
contentEl.addEventListener('scroll', () => {
|
||||
const active = fixtureEl.querySelector('.active')
|
||||
|
||||
onScrollStop(() => {
|
||||
const active = () => fixtureEl.querySelector('.active')
|
||||
expect(spy).toHaveBeenCalled()
|
||||
spy.calls.reset()
|
||||
if (firstTime) {
|
||||
expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
|
||||
expect(active.getAttribute('id')).toEqual('two-link')
|
||||
firstTime = false
|
||||
contentEl.scrollTop = 0
|
||||
} else {
|
||||
expect(active).toBeNull()
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
|
||||
contentEl.scrollTop = 201
|
||||
expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
|
||||
expect(active().getAttribute('id')).toEqual('two-link')
|
||||
onScrollStop(() => {
|
||||
expect(active()).toBeNull()
|
||||
resolve()
|
||||
}, contentEl)
|
||||
scrollTo(contentEl, 0)
|
||||
}, contentEl)
|
||||
|
||||
scrollTo(contentEl, 200)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -399,43 +462,40 @@ describe('ScrollSpy', () => {
|
||||
' <li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>',
|
||||
' </ul>',
|
||||
'</nav>',
|
||||
'<div id="content" style="height: 200px; overflow-y: auto;">',
|
||||
' <div id="one" style="height: 100px;"></div>',
|
||||
' <div id="two" style="height: 100px;"></div>',
|
||||
' <div id="three" style="height: 100px;"></div>',
|
||||
' <div id="spacer" style="height: 100px;"></div>',
|
||||
'<div id="content" style="height: 150px; overflow-y: auto;">',
|
||||
' <div id="one" style="height: 100px;">test</div>',
|
||||
' <div id="two" style="height: 100px;">test</div>',
|
||||
' <div id="three" style="height: 100px;">test</div>',
|
||||
' <div id="spacer" style="height: 100px;">test</div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const negativeHeight = -10
|
||||
const negativeHeight = 0
|
||||
const startOfSectionTwo = 101
|
||||
const contentEl = fixtureEl.querySelector('#content')
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const scrollSpy = new ScrollSpy(contentEl, {
|
||||
target: '#navigation',
|
||||
offset: contentEl.offsetTop
|
||||
rootMargin: '0px 0px -50%'
|
||||
})
|
||||
const spy = spyOn(scrollSpy, '_process').and.callThrough()
|
||||
|
||||
let firstTime = true
|
||||
onScrollStop(() => {
|
||||
const activeId = () => fixtureEl.querySelector('.active').getAttribute('id')
|
||||
|
||||
contentEl.addEventListener('scroll', () => {
|
||||
const active = fixtureEl.querySelector('.active')
|
||||
expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
|
||||
expect(activeId()).toEqual('two-link')
|
||||
scrollTo(contentEl, negativeHeight)
|
||||
|
||||
expect(spy).toHaveBeenCalled()
|
||||
spy.calls.reset()
|
||||
if (firstTime) {
|
||||
onScrollStop(() => {
|
||||
expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
|
||||
expect(active.getAttribute('id')).toEqual('two-link')
|
||||
firstTime = false
|
||||
contentEl.scrollTop = negativeHeight
|
||||
} else {
|
||||
expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
|
||||
expect(active.getAttribute('id')).toEqual('one-link')
|
||||
expect(activeId()).toEqual('one-link')
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
}, contentEl)
|
||||
|
||||
contentEl.scrollTop = startOfSectionTwo
|
||||
scrollTo(contentEl, 0)
|
||||
}, contentEl)
|
||||
|
||||
scrollTo(contentEl, startOfSectionTwo)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -465,46 +525,41 @@ describe('ScrollSpy', () => {
|
||||
offset: 0,
|
||||
target: '.navbar'
|
||||
})
|
||||
const spy = spyOn(scrollSpy, '_process').and.callThrough()
|
||||
|
||||
scrollTo(contentEl, 0)
|
||||
testElementIsActiveAfterScroll({
|
||||
elementSelector: '#li-100-5',
|
||||
targetSelector: '#div-100-5',
|
||||
scrollSpy,
|
||||
spy,
|
||||
contentEl,
|
||||
scrollSpy,
|
||||
cb() {
|
||||
contentEl.scrollTop = 0
|
||||
scrollTo(contentEl, 0)
|
||||
testElementIsActiveAfterScroll({
|
||||
elementSelector: '#li-100-4',
|
||||
targetSelector: '#div-100-4',
|
||||
scrollSpy,
|
||||
spy,
|
||||
elementSelector: '#li-100-2',
|
||||
targetSelector: '#div-100-2',
|
||||
contentEl,
|
||||
scrollSpy,
|
||||
cb() {
|
||||
contentEl.scrollTop = 0
|
||||
scrollTo(contentEl, 0)
|
||||
testElementIsActiveAfterScroll({
|
||||
elementSelector: '#li-100-3',
|
||||
targetSelector: '#div-100-3',
|
||||
scrollSpy,
|
||||
spy,
|
||||
contentEl,
|
||||
scrollSpy,
|
||||
cb() {
|
||||
contentEl.scrollTop = 0
|
||||
scrollTo(contentEl, 0)
|
||||
testElementIsActiveAfterScroll({
|
||||
elementSelector: '#li-100-2',
|
||||
targetSelector: '#div-100-2',
|
||||
scrollSpy,
|
||||
spy,
|
||||
contentEl,
|
||||
scrollSpy,
|
||||
cb() {
|
||||
contentEl.scrollTop = 0
|
||||
scrollTo(contentEl, 0)
|
||||
testElementIsActiveAfterScroll({
|
||||
elementSelector: '#li-100-1',
|
||||
targetSelector: '#div-100-1',
|
||||
scrollSpy,
|
||||
spy,
|
||||
contentEl,
|
||||
scrollSpy,
|
||||
cb: resolve
|
||||
})
|
||||
}
|
||||
@@ -517,116 +572,73 @@ describe('ScrollSpy', () => {
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
it('should allow passed in option offset method: offset', () => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<nav class="navbar">',
|
||||
' <ul class="nav">',
|
||||
' <li class="nav-item"><a id="li-jsm-1" class="nav-link" href="#div-jsm-1">div 1</a></li>',
|
||||
' <li class="nav-item"><a id="li-jsm-2" class="nav-link" href="#div-jsm-2">div 2</a></li>',
|
||||
' <li class="nav-item"><a id="li-jsm-3" class="nav-link" href="#div-jsm-3">div 3</a></li>',
|
||||
' </ul>',
|
||||
'</nav>',
|
||||
'<div class="content" style="position: relative; overflow: auto; height: 100px">',
|
||||
' <div id="div-jsm-1" style="position: relative; height: 200px; padding: 0; margin: 0">div 1</div>',
|
||||
' <div id="div-jsm-2" style="position: relative; height: 150px; padding: 0; margin: 0">div 2</div>',
|
||||
' <div id="div-jsm-3" style="position: relative; height: 250px; padding: 0; margin: 0">div 3</div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
describe('refresh', () => {
|
||||
it('should disconnect existing observer', () => {
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
|
||||
const contentEl = fixtureEl.querySelector('.content')
|
||||
const targetEl = fixtureEl.querySelector('#div-jsm-2')
|
||||
const scrollSpy = new ScrollSpy(contentEl, {
|
||||
target: '.navbar',
|
||||
offset: 0,
|
||||
method: 'offset'
|
||||
})
|
||||
const el = fixtureEl.querySelector('.content')
|
||||
const scrollSpy = new ScrollSpy(el)
|
||||
|
||||
expect(scrollSpy._offsets[1]).toEqual(Manipulator.offset(targetEl).top)
|
||||
expect(scrollSpy._offsets[1]).not.toEqual(Manipulator.position(targetEl).top)
|
||||
})
|
||||
spyOn(scrollSpy._observer, 'disconnect')
|
||||
|
||||
it('should allow passed in option offset method: position', () => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<nav class="navbar">',
|
||||
' <ul class="nav">',
|
||||
' <li class="nav-item"><a id="li-jsm-1" class="nav-link" href="#div-jsm-1">div 1</a></li>',
|
||||
' <li class="nav-item"><a id="li-jsm-2" class="nav-link" href="#div-jsm-2">div 2</a></li>',
|
||||
' <li class="nav-item"><a id="li-jsm-3" class="nav-link" href="#div-jsm-3">div 3</a></li>',
|
||||
' </ul>',
|
||||
'</nav>',
|
||||
'<div class="content" style="position: relative; overflow: auto; height: 100px">',
|
||||
' <div id="div-jsm-1" style="position: relative; height: 200px; padding: 0; margin: 0">div 1</div>',
|
||||
' <div id="div-jsm-2" style="position: relative; height: 150px; padding: 0; margin: 0">div 2</div>',
|
||||
' <div id="div-jsm-3" style="position: relative; height: 250px; padding: 0; margin: 0">div 3</div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
scrollSpy.refresh()
|
||||
|
||||
const contentEl = fixtureEl.querySelector('.content')
|
||||
const targetEl = fixtureEl.querySelector('#div-jsm-2')
|
||||
const scrollSpy = new ScrollSpy(contentEl, {
|
||||
target: '.navbar',
|
||||
offset: 0,
|
||||
method: 'position'
|
||||
})
|
||||
|
||||
expect(scrollSpy._offsets[1]).not.toEqual(Manipulator.offset(targetEl).top)
|
||||
expect(scrollSpy._offsets[1]).toEqual(Manipulator.position(targetEl).top)
|
||||
expect(scrollSpy._observer.disconnect).toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
|
||||
describe('dispose', () => {
|
||||
it('should dispose a scrollspy', () => {
|
||||
fixtureEl.innerHTML = '<div style="display: none;"></div>'
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
|
||||
const divEl = fixtureEl.querySelector('div')
|
||||
spyOn(divEl, 'addEventListener').and.callThrough()
|
||||
spyOn(divEl, 'removeEventListener').and.callThrough()
|
||||
const el = fixtureEl.querySelector('.content')
|
||||
const scrollSpy = new ScrollSpy(el)
|
||||
|
||||
const scrollSpy = new ScrollSpy(divEl)
|
||||
expect(divEl.addEventListener).toHaveBeenCalledWith('scroll', jasmine.any(Function), jasmine.any(Boolean))
|
||||
expect(ScrollSpy.getInstance(el)).not.toBeNull()
|
||||
|
||||
scrollSpy.dispose()
|
||||
|
||||
expect(divEl.removeEventListener).toHaveBeenCalledWith('scroll', jasmine.any(Function), jasmine.any(Boolean))
|
||||
expect(ScrollSpy.getInstance(el)).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
describe('jQueryInterface', () => {
|
||||
it('should create a scrollspy', () => {
|
||||
fixtureEl.innerHTML = '<div></div>'
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
|
||||
const div = fixtureEl.querySelector('div')
|
||||
const div = fixtureEl.querySelector('.content')
|
||||
|
||||
jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
|
||||
jQueryMock.elements = [div]
|
||||
|
||||
jQueryMock.fn.scrollspy.call(jQueryMock)
|
||||
jQueryMock.fn.scrollspy.call(jQueryMock, { target: '#navBar' })
|
||||
|
||||
expect(ScrollSpy.getInstance(div)).not.toBeNull()
|
||||
})
|
||||
|
||||
it('should create a scrollspy with given config', () => {
|
||||
fixtureEl.innerHTML = '<div></div>'
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
|
||||
const div = fixtureEl.querySelector('div')
|
||||
const div = fixtureEl.querySelector('.content')
|
||||
|
||||
jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
|
||||
jQueryMock.elements = [div]
|
||||
|
||||
jQueryMock.fn.scrollspy.call(jQueryMock, { offset: 15 })
|
||||
jQueryMock.fn.scrollspy.call(jQueryMock, { rootMargin: '100px' })
|
||||
spyOn(ScrollSpy.prototype, 'constructor')
|
||||
expect(ScrollSpy.prototype.constructor).not.toHaveBeenCalledWith(div, { offset: 15 })
|
||||
expect(ScrollSpy.prototype.constructor).not.toHaveBeenCalledWith(div, { rootMargin: '100px' })
|
||||
|
||||
const scrollspy = ScrollSpy.getInstance(div)
|
||||
expect(scrollspy).not.toBeNull()
|
||||
expect(scrollspy._config.offset).toEqual(15)
|
||||
expect(scrollspy._config.rootMargin).toEqual('100px')
|
||||
})
|
||||
|
||||
it('should not re create a scrollspy', () => {
|
||||
fixtureEl.innerHTML = '<div></div>'
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
|
||||
const div = fixtureEl.querySelector('div')
|
||||
const div = fixtureEl.querySelector('.content')
|
||||
const scrollSpy = new ScrollSpy(div)
|
||||
|
||||
jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
|
||||
@@ -638,9 +650,9 @@ describe('ScrollSpy', () => {
|
||||
})
|
||||
|
||||
it('should call a scrollspy method', () => {
|
||||
fixtureEl.innerHTML = '<div></div>'
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
|
||||
const div = fixtureEl.querySelector('div')
|
||||
const div = fixtureEl.querySelector('.content')
|
||||
const scrollSpy = new ScrollSpy(div)
|
||||
|
||||
spyOn(scrollSpy, 'refresh')
|
||||
@@ -655,9 +667,9 @@ describe('ScrollSpy', () => {
|
||||
})
|
||||
|
||||
it('should throw error on undefined method', () => {
|
||||
fixtureEl.innerHTML = '<div></div>'
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
|
||||
const div = fixtureEl.querySelector('div')
|
||||
const div = fixtureEl.querySelector('.content')
|
||||
const action = 'undefinedMethod'
|
||||
|
||||
jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
|
||||
@@ -667,29 +679,60 @@ describe('ScrollSpy', () => {
|
||||
jQueryMock.fn.scrollspy.call(jQueryMock, action)
|
||||
}).toThrowError(TypeError, `No method named "${action}"`)
|
||||
})
|
||||
|
||||
it('should throw error on protected method', () => {
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
|
||||
const div = fixtureEl.querySelector('.content')
|
||||
const action = '_getConfig'
|
||||
|
||||
jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
|
||||
jQueryMock.elements = [div]
|
||||
|
||||
expect(() => {
|
||||
jQueryMock.fn.scrollspy.call(jQueryMock, action)
|
||||
}).toThrowError(TypeError, `No method named "${action}"`)
|
||||
})
|
||||
|
||||
it('should throw error if method "constructor" is being called', () => {
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
|
||||
const div = fixtureEl.querySelector('.content')
|
||||
const action = 'constructor'
|
||||
|
||||
jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
|
||||
jQueryMock.elements = [div]
|
||||
|
||||
expect(() => {
|
||||
jQueryMock.fn.scrollspy.call(jQueryMock, action)
|
||||
}).toThrowError(TypeError, `No method named "${action}"`)
|
||||
})
|
||||
})
|
||||
|
||||
describe('getInstance', () => {
|
||||
it('should return scrollspy instance', () => {
|
||||
fixtureEl.innerHTML = '<div></div>'
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
|
||||
const div = fixtureEl.querySelector('div')
|
||||
const scrollSpy = new ScrollSpy(div)
|
||||
const div = fixtureEl.querySelector('.content')
|
||||
const scrollSpy = new ScrollSpy(div, { target: fixtureEl.querySelector('#navBar') })
|
||||
|
||||
expect(ScrollSpy.getInstance(div)).toEqual(scrollSpy)
|
||||
expect(ScrollSpy.getInstance(div)).toBeInstanceOf(ScrollSpy)
|
||||
})
|
||||
|
||||
it('should return null if there is no instance', () => {
|
||||
expect(ScrollSpy.getInstance(fixtureEl)).toBeNull()
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
|
||||
const div = fixtureEl.querySelector('.content')
|
||||
expect(ScrollSpy.getInstance(div)).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
describe('getOrCreateInstance', () => {
|
||||
it('should return scrollspy instance', () => {
|
||||
fixtureEl.innerHTML = '<div></div>'
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
|
||||
const div = fixtureEl.querySelector('div')
|
||||
const div = fixtureEl.querySelector('.content')
|
||||
const scrollspy = new ScrollSpy(div)
|
||||
|
||||
expect(ScrollSpy.getOrCreateInstance(div)).toEqual(scrollspy)
|
||||
@@ -698,18 +741,18 @@ describe('ScrollSpy', () => {
|
||||
})
|
||||
|
||||
it('should return new instance when there is no scrollspy instance', () => {
|
||||
fixtureEl.innerHTML = '<div></div>'
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
|
||||
const div = fixtureEl.querySelector('div')
|
||||
const div = fixtureEl.querySelector('.content')
|
||||
|
||||
expect(ScrollSpy.getInstance(div)).toBeNull()
|
||||
expect(ScrollSpy.getOrCreateInstance(div)).toBeInstanceOf(ScrollSpy)
|
||||
})
|
||||
|
||||
it('should return new instance when there is no scrollspy instance with given configuration', () => {
|
||||
fixtureEl.innerHTML = '<div></div>'
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
|
||||
const div = fixtureEl.querySelector('div')
|
||||
const div = fixtureEl.querySelector('.content')
|
||||
|
||||
expect(ScrollSpy.getInstance(div)).toBeNull()
|
||||
const scrollspy = ScrollSpy.getOrCreateInstance(div, {
|
||||
@@ -721,9 +764,9 @@ describe('ScrollSpy', () => {
|
||||
})
|
||||
|
||||
it('should return the instance when exists without given configuration', () => {
|
||||
fixtureEl.innerHTML = '<div></div>'
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
|
||||
const div = fixtureEl.querySelector('div')
|
||||
const div = fixtureEl.querySelector('.content')
|
||||
const scrollspy = new ScrollSpy(div, {
|
||||
offset: 1
|
||||
})
|
||||
@@ -741,13 +784,119 @@ describe('ScrollSpy', () => {
|
||||
|
||||
describe('event handler', () => {
|
||||
it('should create scrollspy on window load event', () => {
|
||||
fixtureEl.innerHTML = '<div data-bs-spy="scroll"></div>'
|
||||
fixtureEl.innerHTML = [
|
||||
'<div id="nav"></div>' +
|
||||
'<div id="wrapper" data-bs-spy="scroll" data-bs-target="#nav" style="overflow-y: auto"></div>'
|
||||
].join('')
|
||||
|
||||
const scrollSpyEl = fixtureEl.querySelector('div')
|
||||
const scrollSpyEl = fixtureEl.querySelector('#wrapper')
|
||||
|
||||
window.dispatchEvent(createEvent('load'))
|
||||
|
||||
expect(ScrollSpy.getInstance(scrollSpyEl)).not.toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
describe('SmoothScroll', () => {
|
||||
it('should not enable smoothScroll', () => {
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
const offSpy = spyOn(EventHandler, 'off').and.callThrough()
|
||||
const onSpy = spyOn(EventHandler, 'on').and.callThrough()
|
||||
|
||||
const div = fixtureEl.querySelector('.content')
|
||||
const target = fixtureEl.querySelector('#navBar')
|
||||
// eslint-disable-next-line no-new
|
||||
new ScrollSpy(div, {
|
||||
offset: 1
|
||||
})
|
||||
|
||||
expect(offSpy).not.toHaveBeenCalledWith(target, 'click.bs.scrollspy')
|
||||
expect(onSpy).not.toHaveBeenCalledWith(target, 'click.bs.scrollspy')
|
||||
})
|
||||
|
||||
it('should enable smoothScroll', () => {
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
const offSpy = spyOn(EventHandler, 'off').and.callThrough()
|
||||
const onSpy = spyOn(EventHandler, 'on').and.callThrough()
|
||||
|
||||
const div = fixtureEl.querySelector('.content')
|
||||
const target = fixtureEl.querySelector('#navBar')
|
||||
// eslint-disable-next-line no-new
|
||||
new ScrollSpy(div, {
|
||||
offset: 1,
|
||||
smoothScroll: true
|
||||
})
|
||||
|
||||
expect(offSpy).toHaveBeenCalledWith(target, 'click.bs.scrollspy')
|
||||
expect(onSpy).toHaveBeenCalledWith(target, 'click.bs.scrollspy', '[href]', jasmine.any(Function))
|
||||
})
|
||||
|
||||
it('should not smoothScroll to element if it not handles a scrollspy section', () => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<nav id="navBar" class="navbar">',
|
||||
' <ul class="nav">',
|
||||
' <a id="anchor-1" href="#div-jsm-1">div 1</a></li>',
|
||||
' <a id="anchor-2" href="#foo">div 2</a></li>',
|
||||
' </ul>',
|
||||
'</nav>',
|
||||
'<div class="content" data-bs-target="#navBar" style="overflow-y: auto">',
|
||||
' <div id="div-jsm-1">div 1</div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const div = fixtureEl.querySelector('.content')
|
||||
// eslint-disable-next-line no-new
|
||||
new ScrollSpy(div, {
|
||||
offset: 1,
|
||||
smoothScroll: true
|
||||
})
|
||||
|
||||
const clickSpy = getElementScrollSpy(div)
|
||||
|
||||
fixtureEl.querySelector('#anchor-2').click()
|
||||
expect(clickSpy).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should call `scrollTop` if element doesn\'t not support `scrollTo`', () => {
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
|
||||
const div = fixtureEl.querySelector('.content')
|
||||
const link = fixtureEl.querySelector('[href="#div-jsm-1"]')
|
||||
delete div.scrollTo
|
||||
const clickSpy = getElementScrollSpy(div)
|
||||
// eslint-disable-next-line no-new
|
||||
new ScrollSpy(div, {
|
||||
offset: 1,
|
||||
smoothScroll: true
|
||||
})
|
||||
|
||||
link.click()
|
||||
expect(clickSpy).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should smoothScroll to the proper observable element on anchor click', done => {
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
|
||||
const div = fixtureEl.querySelector('.content')
|
||||
const link = fixtureEl.querySelector('[href="#div-jsm-1"]')
|
||||
const observable = fixtureEl.querySelector('#div-jsm-1')
|
||||
const clickSpy = getElementScrollSpy(div)
|
||||
// eslint-disable-next-line no-new
|
||||
new ScrollSpy(div, {
|
||||
offset: 1,
|
||||
smoothScroll: true
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
if (div.scrollTo) {
|
||||
expect(clickSpy).toHaveBeenCalledWith({ top: observable.offsetTop - div.offsetTop })
|
||||
} else {
|
||||
expect(clickSpy).toHaveBeenCalledWith(observable.offsetTop - div.offsetTop)
|
||||
}
|
||||
|
||||
done()
|
||||
}, 100)
|
||||
link.click()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user