| 1 | /*!
|
|---|
| 2 | * Bootstrap scrollspy.js v5.3.3 (https://getbootstrap.com/)
|
|---|
| 3 | * Copyright 2011-2024 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
|
|---|
| 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|---|
| 5 | */
|
|---|
| 6 | (function (global, factory) {
|
|---|
| 7 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./base-component.js'), require('./dom/event-handler.js'), require('./dom/selector-engine.js'), require('./util/index.js')) :
|
|---|
| 8 | typeof define === 'function' && define.amd ? define(['./base-component', './dom/event-handler', './dom/selector-engine', './util/index'], factory) :
|
|---|
| 9 | (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Scrollspy = factory(global.BaseComponent, global.EventHandler, global.SelectorEngine, global.Index));
|
|---|
| 10 | })(this, (function (BaseComponent, EventHandler, SelectorEngine, index_js) { 'use strict';
|
|---|
| 11 |
|
|---|
| 12 | /**
|
|---|
| 13 | * --------------------------------------------------------------------------
|
|---|
| 14 | * Bootstrap scrollspy.js
|
|---|
| 15 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|---|
| 16 | * --------------------------------------------------------------------------
|
|---|
| 17 | */
|
|---|
| 18 |
|
|---|
| 19 |
|
|---|
| 20 | /**
|
|---|
| 21 | * Constants
|
|---|
| 22 | */
|
|---|
| 23 |
|
|---|
| 24 | const NAME = 'scrollspy';
|
|---|
| 25 | const DATA_KEY = 'bs.scrollspy';
|
|---|
| 26 | const EVENT_KEY = `.${DATA_KEY}`;
|
|---|
| 27 | const DATA_API_KEY = '.data-api';
|
|---|
| 28 | const EVENT_ACTIVATE = `activate${EVENT_KEY}`;
|
|---|
| 29 | const EVENT_CLICK = `click${EVENT_KEY}`;
|
|---|
| 30 | const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`;
|
|---|
| 31 | const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item';
|
|---|
| 32 | const CLASS_NAME_ACTIVE = 'active';
|
|---|
| 33 | const SELECTOR_DATA_SPY = '[data-bs-spy="scroll"]';
|
|---|
| 34 | const SELECTOR_TARGET_LINKS = '[href]';
|
|---|
| 35 | const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group';
|
|---|
| 36 | const SELECTOR_NAV_LINKS = '.nav-link';
|
|---|
| 37 | const SELECTOR_NAV_ITEMS = '.nav-item';
|
|---|
| 38 | const SELECTOR_LIST_ITEMS = '.list-group-item';
|
|---|
| 39 | const SELECTOR_LINK_ITEMS = `${SELECTOR_NAV_LINKS}, ${SELECTOR_NAV_ITEMS} > ${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}`;
|
|---|
| 40 | const SELECTOR_DROPDOWN = '.dropdown';
|
|---|
| 41 | const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle';
|
|---|
| 42 | const Default = {
|
|---|
| 43 | offset: null,
|
|---|
| 44 | // TODO: v6 @deprecated, keep it for backwards compatibility reasons
|
|---|
| 45 | rootMargin: '0px 0px -25%',
|
|---|
| 46 | smoothScroll: false,
|
|---|
| 47 | target: null,
|
|---|
| 48 | threshold: [0.1, 0.5, 1]
|
|---|
| 49 | };
|
|---|
| 50 | const DefaultType = {
|
|---|
| 51 | offset: '(number|null)',
|
|---|
| 52 | // TODO v6 @deprecated, keep it for backwards compatibility reasons
|
|---|
| 53 | rootMargin: 'string',
|
|---|
| 54 | smoothScroll: 'boolean',
|
|---|
| 55 | target: 'element',
|
|---|
| 56 | threshold: 'array'
|
|---|
| 57 | };
|
|---|
| 58 |
|
|---|
| 59 | /**
|
|---|
| 60 | * Class definition
|
|---|
| 61 | */
|
|---|
| 62 |
|
|---|
| 63 | class ScrollSpy extends BaseComponent {
|
|---|
| 64 | constructor(element, config) {
|
|---|
| 65 | super(element, config);
|
|---|
| 66 |
|
|---|
| 67 | // this._element is the observablesContainer and config.target the menu links wrapper
|
|---|
| 68 | this._targetLinks = new Map();
|
|---|
| 69 | this._observableSections = new Map();
|
|---|
| 70 | this._rootElement = getComputedStyle(this._element).overflowY === 'visible' ? null : this._element;
|
|---|
| 71 | this._activeTarget = null;
|
|---|
| 72 | this._observer = null;
|
|---|
| 73 | this._previousScrollData = {
|
|---|
| 74 | visibleEntryTop: 0,
|
|---|
| 75 | parentScrollTop: 0
|
|---|
| 76 | };
|
|---|
| 77 | this.refresh(); // initialize
|
|---|
| 78 | }
|
|---|
| 79 |
|
|---|
| 80 | // Getters
|
|---|
| 81 | static get Default() {
|
|---|
| 82 | return Default;
|
|---|
| 83 | }
|
|---|
| 84 | static get DefaultType() {
|
|---|
| 85 | return DefaultType;
|
|---|
| 86 | }
|
|---|
| 87 | static get NAME() {
|
|---|
| 88 | return NAME;
|
|---|
| 89 | }
|
|---|
| 90 |
|
|---|
| 91 | // Public
|
|---|
| 92 | refresh() {
|
|---|
| 93 | this._initializeTargetsAndObservables();
|
|---|
| 94 | this._maybeEnableSmoothScroll();
|
|---|
| 95 | if (this._observer) {
|
|---|
| 96 | this._observer.disconnect();
|
|---|
| 97 | } else {
|
|---|
| 98 | this._observer = this._getNewObserver();
|
|---|
| 99 | }
|
|---|
| 100 | for (const section of this._observableSections.values()) {
|
|---|
| 101 | this._observer.observe(section);
|
|---|
| 102 | }
|
|---|
| 103 | }
|
|---|
| 104 | dispose() {
|
|---|
| 105 | this._observer.disconnect();
|
|---|
| 106 | super.dispose();
|
|---|
| 107 | }
|
|---|
| 108 |
|
|---|
| 109 | // Private
|
|---|
| 110 | _configAfterMerge(config) {
|
|---|
| 111 | // TODO: on v6 target should be given explicitly & remove the {target: 'ss-target'} case
|
|---|
| 112 | config.target = index_js.getElement(config.target) || document.body;
|
|---|
| 113 |
|
|---|
| 114 | // TODO: v6 Only for backwards compatibility reasons. Use rootMargin only
|
|---|
| 115 | config.rootMargin = config.offset ? `${config.offset}px 0px -30%` : config.rootMargin;
|
|---|
| 116 | if (typeof config.threshold === 'string') {
|
|---|
| 117 | config.threshold = config.threshold.split(',').map(value => Number.parseFloat(value));
|
|---|
| 118 | }
|
|---|
| 119 | return config;
|
|---|
| 120 | }
|
|---|
| 121 | _maybeEnableSmoothScroll() {
|
|---|
| 122 | if (!this._config.smoothScroll) {
|
|---|
| 123 | return;
|
|---|
| 124 | }
|
|---|
| 125 |
|
|---|
| 126 | // unregister any previous listeners
|
|---|
| 127 | EventHandler.off(this._config.target, EVENT_CLICK);
|
|---|
| 128 | EventHandler.on(this._config.target, EVENT_CLICK, SELECTOR_TARGET_LINKS, event => {
|
|---|
| 129 | const observableSection = this._observableSections.get(event.target.hash);
|
|---|
| 130 | if (observableSection) {
|
|---|
| 131 | event.preventDefault();
|
|---|
| 132 | const root = this._rootElement || window;
|
|---|
| 133 | const height = observableSection.offsetTop - this._element.offsetTop;
|
|---|
| 134 | if (root.scrollTo) {
|
|---|
| 135 | root.scrollTo({
|
|---|
| 136 | top: height,
|
|---|
| 137 | behavior: 'smooth'
|
|---|
| 138 | });
|
|---|
| 139 | return;
|
|---|
| 140 | }
|
|---|
| 141 |
|
|---|
| 142 | // Chrome 60 doesn't support `scrollTo`
|
|---|
| 143 | root.scrollTop = height;
|
|---|
| 144 | }
|
|---|
| 145 | });
|
|---|
| 146 | }
|
|---|
| 147 | _getNewObserver() {
|
|---|
| 148 | const options = {
|
|---|
| 149 | root: this._rootElement,
|
|---|
| 150 | threshold: this._config.threshold,
|
|---|
| 151 | rootMargin: this._config.rootMargin
|
|---|
| 152 | };
|
|---|
| 153 | return new IntersectionObserver(entries => this._observerCallback(entries), options);
|
|---|
| 154 | }
|
|---|
| 155 |
|
|---|
| 156 | // The logic of selection
|
|---|
| 157 | _observerCallback(entries) {
|
|---|
| 158 | const targetElement = entry => this._targetLinks.get(`#${entry.target.id}`);
|
|---|
| 159 | const activate = entry => {
|
|---|
| 160 | this._previousScrollData.visibleEntryTop = entry.target.offsetTop;
|
|---|
| 161 | this._process(targetElement(entry));
|
|---|
| 162 | };
|
|---|
| 163 | const parentScrollTop = (this._rootElement || document.documentElement).scrollTop;
|
|---|
| 164 | const userScrollsDown = parentScrollTop >= this._previousScrollData.parentScrollTop;
|
|---|
| 165 | this._previousScrollData.parentScrollTop = parentScrollTop;
|
|---|
| 166 | for (const entry of entries) {
|
|---|
| 167 | if (!entry.isIntersecting) {
|
|---|
| 168 | this._activeTarget = null;
|
|---|
| 169 | this._clearActiveClass(targetElement(entry));
|
|---|
| 170 | continue;
|
|---|
| 171 | }
|
|---|
| 172 | const entryIsLowerThanPrevious = entry.target.offsetTop >= this._previousScrollData.visibleEntryTop;
|
|---|
| 173 | // if we are scrolling down, pick the bigger offsetTop
|
|---|
| 174 | if (userScrollsDown && entryIsLowerThanPrevious) {
|
|---|
| 175 | activate(entry);
|
|---|
| 176 | // if parent isn't scrolled, let's keep the first visible item, breaking the iteration
|
|---|
| 177 | if (!parentScrollTop) {
|
|---|
| 178 | return;
|
|---|
| 179 | }
|
|---|
| 180 | continue;
|
|---|
| 181 | }
|
|---|
| 182 |
|
|---|
| 183 | // if we are scrolling up, pick the smallest offsetTop
|
|---|
| 184 | if (!userScrollsDown && !entryIsLowerThanPrevious) {
|
|---|
| 185 | activate(entry);
|
|---|
| 186 | }
|
|---|
| 187 | }
|
|---|
| 188 | }
|
|---|
| 189 | _initializeTargetsAndObservables() {
|
|---|
| 190 | this._targetLinks = new Map();
|
|---|
| 191 | this._observableSections = new Map();
|
|---|
| 192 | const targetLinks = SelectorEngine.find(SELECTOR_TARGET_LINKS, this._config.target);
|
|---|
| 193 | for (const anchor of targetLinks) {
|
|---|
| 194 | // ensure that the anchor has an id and is not disabled
|
|---|
| 195 | if (!anchor.hash || index_js.isDisabled(anchor)) {
|
|---|
| 196 | continue;
|
|---|
| 197 | }
|
|---|
| 198 | const observableSection = SelectorEngine.findOne(decodeURI(anchor.hash), this._element);
|
|---|
| 199 |
|
|---|
| 200 | // ensure that the observableSection exists & is visible
|
|---|
| 201 | if (index_js.isVisible(observableSection)) {
|
|---|
| 202 | this._targetLinks.set(decodeURI(anchor.hash), anchor);
|
|---|
| 203 | this._observableSections.set(anchor.hash, observableSection);
|
|---|
| 204 | }
|
|---|
| 205 | }
|
|---|
| 206 | }
|
|---|
| 207 | _process(target) {
|
|---|
| 208 | if (this._activeTarget === target) {
|
|---|
| 209 | return;
|
|---|
| 210 | }
|
|---|
| 211 | this._clearActiveClass(this._config.target);
|
|---|
| 212 | this._activeTarget = target;
|
|---|
| 213 | target.classList.add(CLASS_NAME_ACTIVE);
|
|---|
| 214 | this._activateParents(target);
|
|---|
| 215 | EventHandler.trigger(this._element, EVENT_ACTIVATE, {
|
|---|
| 216 | relatedTarget: target
|
|---|
| 217 | });
|
|---|
| 218 | }
|
|---|
| 219 | _activateParents(target) {
|
|---|
| 220 | // Activate dropdown parents
|
|---|
| 221 | if (target.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) {
|
|---|
| 222 | SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, target.closest(SELECTOR_DROPDOWN)).classList.add(CLASS_NAME_ACTIVE);
|
|---|
| 223 | return;
|
|---|
| 224 | }
|
|---|
| 225 | for (const listGroup of SelectorEngine.parents(target, SELECTOR_NAV_LIST_GROUP)) {
|
|---|
| 226 | // Set triggered links parents as active
|
|---|
| 227 | // With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
|
|---|
| 228 | for (const item of SelectorEngine.prev(listGroup, SELECTOR_LINK_ITEMS)) {
|
|---|
| 229 | item.classList.add(CLASS_NAME_ACTIVE);
|
|---|
| 230 | }
|
|---|
| 231 | }
|
|---|
| 232 | }
|
|---|
| 233 | _clearActiveClass(parent) {
|
|---|
| 234 | parent.classList.remove(CLASS_NAME_ACTIVE);
|
|---|
| 235 | const activeNodes = SelectorEngine.find(`${SELECTOR_TARGET_LINKS}.${CLASS_NAME_ACTIVE}`, parent);
|
|---|
| 236 | for (const node of activeNodes) {
|
|---|
| 237 | node.classList.remove(CLASS_NAME_ACTIVE);
|
|---|
| 238 | }
|
|---|
| 239 | }
|
|---|
| 240 |
|
|---|
| 241 | // Static
|
|---|
| 242 | static jQueryInterface(config) {
|
|---|
| 243 | return this.each(function () {
|
|---|
| 244 | const data = ScrollSpy.getOrCreateInstance(this, config);
|
|---|
| 245 | if (typeof config !== 'string') {
|
|---|
| 246 | return;
|
|---|
| 247 | }
|
|---|
| 248 | if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
|
|---|
| 249 | throw new TypeError(`No method named "${config}"`);
|
|---|
| 250 | }
|
|---|
| 251 | data[config]();
|
|---|
| 252 | });
|
|---|
| 253 | }
|
|---|
| 254 | }
|
|---|
| 255 |
|
|---|
| 256 | /**
|
|---|
| 257 | * Data API implementation
|
|---|
| 258 | */
|
|---|
| 259 |
|
|---|
| 260 | EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
|
|---|
| 261 | for (const spy of SelectorEngine.find(SELECTOR_DATA_SPY)) {
|
|---|
| 262 | ScrollSpy.getOrCreateInstance(spy);
|
|---|
| 263 | }
|
|---|
| 264 | });
|
|---|
| 265 |
|
|---|
| 266 | /**
|
|---|
| 267 | * jQuery
|
|---|
| 268 | */
|
|---|
| 269 |
|
|---|
| 270 | index_js.defineJQueryPlugin(ScrollSpy);
|
|---|
| 271 |
|
|---|
| 272 | return ScrollSpy;
|
|---|
| 273 |
|
|---|
| 274 | }));
|
|---|
| 275 | //# sourceMappingURL=scrollspy.js.map
|
|---|
