@smartimpact-it/scroll-utils 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +674 -0
- package/README.md +158 -0
- package/dist/cjs/Bootstrap4AccordionScrollIntoView.js +74 -0
- package/dist/cjs/BootstrapAccordionScrollIntoView.js +68 -0
- package/dist/cjs/FixHashScrollPosition.js +38 -0
- package/dist/cjs/FoundationAccordionScrollIntoView.js +52 -0
- package/dist/cjs/ScrollDirection.js +120 -0
- package/dist/cjs/ScrollOffset.js +346 -0
- package/dist/cjs/ScrollPages.js +97 -0
- package/dist/cjs/index.js +93 -0
- package/dist/cjs/scrollWithMarginTop.js +34 -0
- package/dist/cjs/utils/onReady.js +46 -0
- package/dist/cjs/utils/utils.js +77 -0
- package/dist/esm/Bootstrap4AccordionScrollIntoView.js +57 -0
- package/dist/esm/BootstrapAccordionScrollIntoView.js +51 -0
- package/dist/esm/FixHashScrollPosition.js +24 -0
- package/dist/esm/FoundationAccordionScrollIntoView.js +35 -0
- package/dist/esm/ScrollDirection.js +98 -0
- package/dist/esm/ScrollOffset.js +283 -0
- package/dist/esm/ScrollPages.js +80 -0
- package/dist/esm/index.js +9 -0
- package/dist/esm/scrollWithMarginTop.js +25 -0
- package/dist/esm/utils/onReady.js +33 -0
- package/dist/esm/utils/utils.js +62 -0
- package/dist/types/Bootstrap4AccordionScrollIntoView.d.ts +11 -0
- package/dist/types/BootstrapAccordionScrollIntoView.d.ts +11 -0
- package/dist/types/FixHashScrollPosition.d.ts +7 -0
- package/dist/types/FoundationAccordionScrollIntoView.d.ts +11 -0
- package/dist/types/ScrollDirection.d.ts +29 -0
- package/dist/types/ScrollOffset.d.ts +49 -0
- package/dist/types/ScrollPages.d.ts +21 -0
- package/dist/types/index.d.ts +9 -0
- package/dist/types/scrollWithMarginTop.d.ts +5 -0
- package/dist/types/utils/onReady.d.ts +20 -0
- package/dist/types/utils/utils.d.ts +4 -0
- package/dist/umd/index.js +2 -0
- package/dist/umd/index.js.LICENSE.txt +8 -0
- package/package.json +101 -0
- package/src/Bootstrap4AccordionScrollIntoView.ts +51 -0
- package/src/BootstrapAccordionScrollIntoView.ts +45 -0
- package/src/FixHashScrollPosition.ts +31 -0
- package/src/FoundationAccordionScrollIntoView.ts +31 -0
- package/src/ScrollDirection.ts +122 -0
- package/src/ScrollOffset.ts +316 -0
- package/src/ScrollPages.ts +81 -0
- package/src/index.js +9 -0
- package/src/scrollWithMarginTop.ts +33 -0
- package/src/utils/onReady.ts +38 -0
- package/src/utils/utils.ts +78 -0
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
|
|
2
|
+
function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
|
|
3
|
+
function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
|
|
4
|
+
function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
|
|
5
|
+
function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
|
|
6
|
+
function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
|
|
7
|
+
var _intersectionElement = /*#__PURE__*/new WeakMap();
|
|
8
|
+
var _observer = /*#__PURE__*/new WeakMap();
|
|
9
|
+
var _isBelowTheFold = /*#__PURE__*/new WeakMap();
|
|
10
|
+
var _belowTheFoldClass = /*#__PURE__*/new WeakMap();
|
|
11
|
+
var _aboveTheFoldClass = /*#__PURE__*/new WeakMap();
|
|
12
|
+
var _ScrollPages_brand = /*#__PURE__*/new WeakSet();
|
|
13
|
+
/**
|
|
14
|
+
* ScrollPages - a class to add classes to the body,
|
|
15
|
+
* detecting whether we are above the fold or below
|
|
16
|
+
* (the above-the-fold are can also be set as an existing element)
|
|
17
|
+
*
|
|
18
|
+
* Author: Bogdan Barbu
|
|
19
|
+
* Team: Codingheads (codingheads.com)
|
|
20
|
+
*/
|
|
21
|
+
export class ScrollPages {
|
|
22
|
+
/**
|
|
23
|
+
* start an instance
|
|
24
|
+
*/
|
|
25
|
+
constructor({
|
|
26
|
+
intersectionElement = null,
|
|
27
|
+
belowTheFoldClass = 'below-the-fold',
|
|
28
|
+
aboveTheFoldClass = 'above-the-fold'
|
|
29
|
+
} = {}) {
|
|
30
|
+
/**
|
|
31
|
+
* dispatch an event on the window
|
|
32
|
+
*/
|
|
33
|
+
_classPrivateMethodInitSpec(this, _ScrollPages_brand);
|
|
34
|
+
_classPrivateFieldInitSpec(this, _intersectionElement, void 0);
|
|
35
|
+
_classPrivateFieldInitSpec(this, _observer, null);
|
|
36
|
+
_classPrivateFieldInitSpec(this, _isBelowTheFold, false);
|
|
37
|
+
_classPrivateFieldInitSpec(this, _belowTheFoldClass, void 0);
|
|
38
|
+
_classPrivateFieldInitSpec(this, _aboveTheFoldClass, void 0);
|
|
39
|
+
_classPrivateFieldSet(_intersectionElement, this, intersectionElement);
|
|
40
|
+
_classPrivateFieldSet(_belowTheFoldClass, this, belowTheFoldClass);
|
|
41
|
+
_classPrivateFieldSet(_aboveTheFoldClass, this, aboveTheFoldClass);
|
|
42
|
+
_assertClassBrand(_ScrollPages_brand, this, _setupObserver).call(this);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
function _dispatchEvent(name) {
|
|
46
|
+
requestAnimationFrame(() => {
|
|
47
|
+
window.dispatchEvent(new CustomEvent(name));
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
function _setupObserver() {
|
|
51
|
+
const body = document.body;
|
|
52
|
+
// create the intersection element, if it doesn't exist
|
|
53
|
+
if (!_classPrivateFieldGet(_intersectionElement, this)) {
|
|
54
|
+
let containerPosition = window.getComputedStyle(body).getPropertyValue('position');
|
|
55
|
+
if (!containerPosition || containerPosition == 'static') {
|
|
56
|
+
body.style.position = 'relative';
|
|
57
|
+
}
|
|
58
|
+
_classPrivateFieldSet(_intersectionElement, this, document.createElement('div'));
|
|
59
|
+
_classPrivateFieldGet(_intersectionElement, this).classList.add('second-page-observer');
|
|
60
|
+
_classPrivateFieldGet(_intersectionElement, this).style.cssText = 'pointerEvents: none; visibility: hidden; position: absolute; top: 0; left: 0; right: 0; height: 100vh;';
|
|
61
|
+
body.appendChild(_classPrivateFieldGet(_intersectionElement, this));
|
|
62
|
+
}
|
|
63
|
+
body.classList.add(_classPrivateFieldGet(_aboveTheFoldClass, this));
|
|
64
|
+
_classPrivateFieldSet(_observer, this, new IntersectionObserver(entries => {
|
|
65
|
+
let isFirstPage = true;
|
|
66
|
+
entries.forEach(entry => {
|
|
67
|
+
if (!entry.isIntersecting) {
|
|
68
|
+
isFirstPage = false;
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
if (_classPrivateFieldGet(_isBelowTheFold, this) != !isFirstPage) {
|
|
72
|
+
_classPrivateFieldSet(_isBelowTheFold, this, !isFirstPage);
|
|
73
|
+
body.classList[_classPrivateFieldGet(_isBelowTheFold, this) ? 'add' : 'remove'](_classPrivateFieldGet(_belowTheFoldClass, this));
|
|
74
|
+
body.classList[!_classPrivateFieldGet(_isBelowTheFold, this) ? 'add' : 'remove'](_classPrivateFieldGet(_aboveTheFoldClass, this));
|
|
75
|
+
_assertClassBrand(_ScrollPages_brand, this, _dispatchEvent).call(this, 'ScrollPageChange');
|
|
76
|
+
}
|
|
77
|
+
}));
|
|
78
|
+
_classPrivateFieldGet(_observer, this).observe(_classPrivateFieldGet(_intersectionElement, this));
|
|
79
|
+
}
|
|
80
|
+
export default ScrollPages;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { ScrollDirection } from './ScrollDirection';
|
|
2
|
+
export { ScrollOffset, ScrollOffsetPart } from './ScrollOffset';
|
|
3
|
+
export { ScrollPages } from './ScrollPages';
|
|
4
|
+
export { scrollWithMarginTop } from './scrollWithMarginTop';
|
|
5
|
+
export { FixHashScrollPosition } from './FixHashScrollPosition';
|
|
6
|
+
export { BootstrapAccordionScrollIntoView } from './BootstrapAccordionScrollIntoView';
|
|
7
|
+
export { Bootstrap4AccordionScrollIntoView } from './Bootstrap4AccordionScrollIntoView';
|
|
8
|
+
export { FoundationAccordionScrollIntoView } from './FoundationAccordionScrollIntoView';
|
|
9
|
+
export { onReadyState, onComplete, onInteractive, onReady } from './utils/onReady';
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Scroll to an element taking into account its "scroll-margin-top"/"scroll-snap-margin-top".
|
|
3
|
+
* This will help with Safari < 14.1 / Safari iOS <= 1.4, which doesn't support "scroll-margin-top".
|
|
4
|
+
*/
|
|
5
|
+
export const scrollWithMarginTop = (element, offset = 0, onlyWhenNeeded = false) => {
|
|
6
|
+
if (!element) return;
|
|
7
|
+
const rect = element.getBoundingClientRect();
|
|
8
|
+
const pageYOffset = window.pageYOffset;
|
|
9
|
+
const top = rect.top + pageYOffset;
|
|
10
|
+
const style = window.getComputedStyle(element);
|
|
11
|
+
const scrollMarginTop = parseInt(style.getPropertyValue('scroll-margin-top')) || parseInt(style.getPropertyValue('scroll-snap-margin-top')) || 0;
|
|
12
|
+
const newPosition = top - scrollMarginTop + offset;
|
|
13
|
+
// don't scroll if the element is already visible in the first half of the screen
|
|
14
|
+
if (onlyWhenNeeded) {
|
|
15
|
+
const isVisible = newPosition >= pageYOffset && newPosition + rect.height < pageYOffset + window.innerHeight / 2;
|
|
16
|
+
if (isVisible) {
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
window.scrollTo({
|
|
21
|
+
top: newPosition,
|
|
22
|
+
left: 0,
|
|
23
|
+
behavior: 'smooth'
|
|
24
|
+
});
|
|
25
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Run a callback when the document.readyState has a certain value
|
|
3
|
+
* @param {string|string[]} state - the state(s) when to run the callback
|
|
4
|
+
* @param {Function} callback - the callback to run
|
|
5
|
+
*/
|
|
6
|
+
export const onReadyState = (state, callback) => {
|
|
7
|
+
const validStates = Array.isArray(state) ? state : [state];
|
|
8
|
+
const checkAndRun = () => {
|
|
9
|
+
if (validStates.includes(document.readyState)) {
|
|
10
|
+
document.removeEventListener('readystatechange', checkAndRun);
|
|
11
|
+
callback();
|
|
12
|
+
return true;
|
|
13
|
+
}
|
|
14
|
+
return false;
|
|
15
|
+
};
|
|
16
|
+
if (!checkAndRun()) {
|
|
17
|
+
document.addEventListener('readystatechange', checkAndRun);
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* Run a callback when the document.readyState is 'complete'
|
|
22
|
+
* (DOM + assets are loaded)
|
|
23
|
+
* @param {Function} callback - the callback to run
|
|
24
|
+
*/
|
|
25
|
+
export const onComplete = callback => onReadyState('complete', callback);
|
|
26
|
+
/**
|
|
27
|
+
* Run a callback when the document.readyState is 'interactive'
|
|
28
|
+
* (DOM is loaded - equivalent to DOMContentLoaded)
|
|
29
|
+
* @param {Function} callback - the callback to run
|
|
30
|
+
*/
|
|
31
|
+
export const onInteractive = callback => onReadyState(['interactive', 'complete'], callback);
|
|
32
|
+
export const onReady = onInteractive;
|
|
33
|
+
export default onReady;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
// deep compare objects
|
|
2
|
+
export const deepEquals = (x, y) => {
|
|
3
|
+
if (x === y) return true;
|
|
4
|
+
// if both x and y are null or undefined and exactly the same
|
|
5
|
+
if (!(x instanceof Object) || !(y instanceof Object)) return false;
|
|
6
|
+
// if they are not strictly equal, they both need to be Objects
|
|
7
|
+
if (x.constructor !== y.constructor) return false;
|
|
8
|
+
// they must have the exact same prototype chain, the closest we can do is
|
|
9
|
+
// test there constructor.
|
|
10
|
+
for (let p in x) {
|
|
11
|
+
if (!x.hasOwnProperty(p)) continue;
|
|
12
|
+
// other properties were tested using x.constructor === y.constructor
|
|
13
|
+
if (!y.hasOwnProperty(p)) return false;
|
|
14
|
+
// allows to compare x[ p ] and y[ p ] when set to undefined
|
|
15
|
+
if (x[p] === y[p]) continue;
|
|
16
|
+
// if they have the same strict value or identity then they are equal
|
|
17
|
+
if (typeof x[p] !== 'object') return false;
|
|
18
|
+
// Numbers, Strings, Functions, Booleans must be strictly equal
|
|
19
|
+
if (!deepEquals(x[p], y[p])) return false;
|
|
20
|
+
// Objects and Arrays must be tested recursively
|
|
21
|
+
}
|
|
22
|
+
for (let p in y) {
|
|
23
|
+
if (y.hasOwnProperty(p) && !x.hasOwnProperty(p)) return false;
|
|
24
|
+
// allows x[ p ] to be set to undefined
|
|
25
|
+
}
|
|
26
|
+
return true;
|
|
27
|
+
};
|
|
28
|
+
export const throttle = (func, limit = 100) => {
|
|
29
|
+
let inThrottle;
|
|
30
|
+
return function () {
|
|
31
|
+
const args = arguments,
|
|
32
|
+
context = this;
|
|
33
|
+
if (!inThrottle) {
|
|
34
|
+
func.apply(context, args);
|
|
35
|
+
inThrottle = true;
|
|
36
|
+
setTimeout(() => inThrottle = false, limit);
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
// Returns a function, that, as long as it continues to be invoked, will not
|
|
41
|
+
// be triggered. The function will be called after it stops being called for
|
|
42
|
+
// N milliseconds. If `immediate` is passed, trigger the function on the
|
|
43
|
+
// leading edge, instead of the trailing.
|
|
44
|
+
export const debounce = (func, wait, immediate = false) => {
|
|
45
|
+
let timeout;
|
|
46
|
+
return function () {
|
|
47
|
+
const context = this,
|
|
48
|
+
args = arguments;
|
|
49
|
+
const later = function later() {
|
|
50
|
+
timeout = null;
|
|
51
|
+
if (!immediate) func.apply(context, args);
|
|
52
|
+
};
|
|
53
|
+
const callNow = immediate && !timeout;
|
|
54
|
+
clearTimeout(timeout);
|
|
55
|
+
timeout = setTimeout(later, wait);
|
|
56
|
+
if (callNow) func.apply(context, args);
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
export const isFunction = value => {
|
|
60
|
+
// from https://stackoverflow.com/a/55785839
|
|
61
|
+
return Boolean(value) && (Object.prototype.toString.call(value) === '[object Function]' || 'function' === typeof value || value instanceof Function);
|
|
62
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Scroll to the opened accordion tab
|
|
3
|
+
*/
|
|
4
|
+
export declare class Bootstrap4AccordionScrollIntoView {
|
|
5
|
+
#private;
|
|
6
|
+
extraOffset: number;
|
|
7
|
+
constructor({ extraOffset }?: {
|
|
8
|
+
extraOffset?: number;
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
export default Bootstrap4AccordionScrollIntoView;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Scroll to the opened accordion tab
|
|
3
|
+
*/
|
|
4
|
+
export declare class BootstrapAccordionScrollIntoView {
|
|
5
|
+
#private;
|
|
6
|
+
extraOffset: number;
|
|
7
|
+
constructor({ extraOffset }?: {
|
|
8
|
+
extraOffset?: number;
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
export default BootstrapAccordionScrollIntoView;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Scroll to the opened accordion tab
|
|
3
|
+
*/
|
|
4
|
+
export declare class FoundationAccordionScrollIntoView {
|
|
5
|
+
#private;
|
|
6
|
+
extraOffset: number;
|
|
7
|
+
constructor({ extraOffset }?: {
|
|
8
|
+
extraOffset?: number;
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
export default FoundationAccordionScrollIntoView;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ScrollDirection - a class to handle scroll direction classes on body
|
|
3
|
+
*
|
|
4
|
+
* Author: Bogdan Barbu
|
|
5
|
+
* Team: Codingheads (codingheads.com)
|
|
6
|
+
*/
|
|
7
|
+
interface ThrottleSettings {
|
|
8
|
+
leading?: boolean | undefined;
|
|
9
|
+
trailing?: boolean | undefined;
|
|
10
|
+
}
|
|
11
|
+
interface ScrollDirectionOptions {
|
|
12
|
+
onlyFor?: () => boolean | null;
|
|
13
|
+
threshold?: number;
|
|
14
|
+
thresholdCallback?: Function | null;
|
|
15
|
+
throttle?: null | number;
|
|
16
|
+
throttleOptions?: ThrottleSettings;
|
|
17
|
+
}
|
|
18
|
+
export declare class ScrollDirection {
|
|
19
|
+
#private;
|
|
20
|
+
onlyForCallback: () => boolean | null;
|
|
21
|
+
threshold: number;
|
|
22
|
+
thresholdCallback?: Function | null;
|
|
23
|
+
/**
|
|
24
|
+
* start an instance
|
|
25
|
+
* @param {{onlyFor: a callback to determine where to modify classes; threshold: amount in px to take into account }} param0
|
|
26
|
+
*/
|
|
27
|
+
constructor({ onlyFor, threshold, thresholdCallback, throttle, throttleOptions, }?: ScrollDirectionOptions);
|
|
28
|
+
}
|
|
29
|
+
export default ScrollDirection;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
export type ScrollOffsetPartSettings = {
|
|
2
|
+
name?: string;
|
|
3
|
+
selectors?: string[];
|
|
4
|
+
elements?: HTMLElement[];
|
|
5
|
+
fixedHeight?: number | false;
|
|
6
|
+
condition?: Function | false;
|
|
7
|
+
resizeCondition?: Function | false;
|
|
8
|
+
};
|
|
9
|
+
export type ScrollOffsetVariable = {
|
|
10
|
+
name: string;
|
|
11
|
+
offsetParts: Array<string | ScrollOffsetPart>;
|
|
12
|
+
};
|
|
13
|
+
export type ScrollOffsetMap = {
|
|
14
|
+
[key: string]: Array<string | ScrollOffsetPart>;
|
|
15
|
+
};
|
|
16
|
+
export type ScrollOffsetSettings = {
|
|
17
|
+
offsetParts?: ScrollOffsetPart[] | ScrollOffsetPartSettings[];
|
|
18
|
+
variables?: ScrollOffsetVariable[] | ScrollOffsetMap;
|
|
19
|
+
extraEvents?: string[];
|
|
20
|
+
registerForHoudini?: boolean;
|
|
21
|
+
useResizeObserver?: boolean;
|
|
22
|
+
};
|
|
23
|
+
export declare class ScrollOffsetPart {
|
|
24
|
+
#private;
|
|
25
|
+
constructor({ name, selectors, elements, fixedHeight, condition, resizeCondition, }: ScrollOffsetPartSettings);
|
|
26
|
+
get name(): string;
|
|
27
|
+
get totalHeight(): number;
|
|
28
|
+
get isValid(): boolean;
|
|
29
|
+
get elements(): HTMLElement[];
|
|
30
|
+
setElementHeight: (element: HTMLElement, height: number) => void;
|
|
31
|
+
calculate: () => this;
|
|
32
|
+
calculateResizeConditions: () => boolean;
|
|
33
|
+
}
|
|
34
|
+
/**!
|
|
35
|
+
* ScrollOffset - a class to handle add css variables to the body element,
|
|
36
|
+
* with the value of the "header" parts that are visible
|
|
37
|
+
* so that we can adjust scroll positions etc. based on it
|
|
38
|
+
*
|
|
39
|
+
* Author: Bogdan Barbu
|
|
40
|
+
* Team: Codingheads (codingheads.com)
|
|
41
|
+
*/
|
|
42
|
+
export declare class ScrollOffset {
|
|
43
|
+
#private;
|
|
44
|
+
/**
|
|
45
|
+
* setup the conditions
|
|
46
|
+
*/
|
|
47
|
+
constructor({ offsetParts, variables, registerForHoudini, useResizeObserver, extraEvents, }?: ScrollOffsetSettings);
|
|
48
|
+
}
|
|
49
|
+
export default ScrollOffset;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ScrollPages - a class to add classes to the body,
|
|
3
|
+
* detecting whether we are above the fold or below
|
|
4
|
+
* (the above-the-fold are can also be set as an existing element)
|
|
5
|
+
*
|
|
6
|
+
* Author: Bogdan Barbu
|
|
7
|
+
* Team: Codingheads (codingheads.com)
|
|
8
|
+
*/
|
|
9
|
+
interface ScrollPagesOptions {
|
|
10
|
+
intersectionElement?: HTMLElement;
|
|
11
|
+
belowTheFoldClass?: string;
|
|
12
|
+
aboveTheFoldClass?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare class ScrollPages {
|
|
15
|
+
#private;
|
|
16
|
+
/**
|
|
17
|
+
* start an instance
|
|
18
|
+
*/
|
|
19
|
+
constructor({ intersectionElement, belowTheFoldClass, aboveTheFoldClass, }?: ScrollPagesOptions);
|
|
20
|
+
}
|
|
21
|
+
export default ScrollPages;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { ScrollDirection } from "./ScrollDirection";
|
|
2
|
+
export { ScrollPages } from "./ScrollPages";
|
|
3
|
+
export { scrollWithMarginTop } from "./scrollWithMarginTop";
|
|
4
|
+
export { FixHashScrollPosition } from "./FixHashScrollPosition";
|
|
5
|
+
export { BootstrapAccordionScrollIntoView } from "./BootstrapAccordionScrollIntoView";
|
|
6
|
+
export { Bootstrap4AccordionScrollIntoView } from "./Bootstrap4AccordionScrollIntoView";
|
|
7
|
+
export { FoundationAccordionScrollIntoView } from "./FoundationAccordionScrollIntoView";
|
|
8
|
+
export { ScrollOffset, ScrollOffsetPart } from "./ScrollOffset";
|
|
9
|
+
export { onReadyState, onComplete, onInteractive, onReady } from "./utils/onReady";
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Scroll to an element taking into account its "scroll-margin-top"/"scroll-snap-margin-top".
|
|
3
|
+
* This will help with Safari < 14.1 / Safari iOS <= 1.4, which doesn't support "scroll-margin-top".
|
|
4
|
+
*/
|
|
5
|
+
export declare const scrollWithMarginTop: (element: HTMLElement, offset?: number, onlyWhenNeeded?: boolean) => void;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Run a callback when the document.readyState has a certain value
|
|
3
|
+
* @param {string|string[]} state - the state(s) when to run the callback
|
|
4
|
+
* @param {Function} callback - the callback to run
|
|
5
|
+
*/
|
|
6
|
+
export declare const onReadyState: (state: string | string[], callback: Function) => void;
|
|
7
|
+
/**
|
|
8
|
+
* Run a callback when the document.readyState is 'complete'
|
|
9
|
+
* (DOM + assets are loaded)
|
|
10
|
+
* @param {Function} callback - the callback to run
|
|
11
|
+
*/
|
|
12
|
+
export declare const onComplete: (callback: Function) => void;
|
|
13
|
+
/**
|
|
14
|
+
* Run a callback when the document.readyState is 'interactive'
|
|
15
|
+
* (DOM is loaded - equivalent to DOMContentLoaded)
|
|
16
|
+
* @param {Function} callback - the callback to run
|
|
17
|
+
*/
|
|
18
|
+
export declare const onInteractive: (callback: Function) => void;
|
|
19
|
+
export declare const onReady: (callback: Function) => void;
|
|
20
|
+
export default onReady;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const deepEquals: (x: any, y: any) => boolean;
|
|
2
|
+
export declare const throttle: (func: any, limit?: number) => () => void;
|
|
3
|
+
export declare const debounce: (func: any, wait: any, immediate?: boolean) => () => void;
|
|
4
|
+
export declare const isFunction: (value: any) => boolean;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! For license information please see index.js.LICENSE.txt */
|
|
2
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.scrollUtils=e():t.scrollUtils=e()}(this,()=>(()=>{var t={198(t,e,n){"use strict";function r(t){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r(t)}function o(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,l(r.key),r)}}function i(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function a(t,e){if(e.has(t))throw new TypeError("Cannot initialize the same private elements twice on an object")}function l(t){var e=function(t){if("object"!=r(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=r(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==r(e)?e:e+""}function c(t,e){return t.get(u(t,e))}function u(t,e,n){if("function"==typeof t?t===e:t.has(e))return arguments.length<3?e:n;throw new TypeError("Private element is not present on this object")}e.tG=void 0;var s=n(130),f=n(938),p=new WeakSet,h=new WeakMap,d=i(function t(){var e,n=this,r=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).extraOffset,o=void 0===r?0:r;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),a(this,e=p),e.add(this),function(t,e,n){(e=l(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n}(this,"extraOffset",void 0),function(t,e){a(t,e),e.set(t,function(t){var e,r=null,o=t.target;if(null===(e=o.closest)||void 0===e||!e.call(o,".skip-scroll-into-view, [data-skip-scroll-into-view]")){var i=o.id,a=o.getAttribute("aria-labelledby");a&&(r=document.querySelector("#".concat(a))),!r&&i&&(r=document.querySelector('[data-target="#'.concat(i,'"]'))),r&&(0,s.scrollWithMarginTop)(r,n.extraOffset,!0)}})}(this,h),this.extraOffset=o,(0,f.onComplete)(function(){return setTimeout(function(){return u(p,n,v).call(n)},1e3)})});function v(){var t=this;"$"in window?window.$(document).on("shown.collapse",function(e){c(h,t).call(t,e)}):document.addEventListener("shown.collapse",function(e){c(h,t).call(t,e)})}e.tG=d},459(t,e,n){"use strict";function r(t){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r(t)}function o(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,l(r.key),r)}}function i(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function a(t,e){if(e.has(t))throw new TypeError("Cannot initialize the same private elements twice on an object")}function l(t){var e=function(t){if("object"!=r(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=r(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==r(e)?e:e+""}function c(t,e,n){if("function"==typeof t?t===e:t.has(e))return arguments.length<3?e:n;throw new TypeError("Private element is not present on this object")}e.pn=void 0;var u=n(130),s=n(938),f=new WeakSet,p=new WeakMap,h=i(function t(){var e,n=this,r=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).extraOffset,o=void 0===r?0:r;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),a(this,e=f),e.add(this),function(t,e,n){(e=l(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n}(this,"extraOffset",void 0),function(t,e){a(t,e),e.set(t,function(t){var e,r=null,o=t.target;if(null===(e=o.closest)||void 0===e||!e.call(o,".skip-scroll-into-view, [data-skip-scroll-into-view]")){var i=o.id,a=o.getAttribute("aria-labelledby");a&&(r=document.querySelector("#".concat(a))),!r&&i&&(r=document.querySelector('[data-bs-target="#'.concat(i,'"]'))),r&&(0,u.scrollWithMarginTop)(r,n.extraOffset,!0)}})}(this,p),this.extraOffset=o,(0,s.onComplete)(function(){return setTimeout(function(){return c(f,n,d).call(n)},1e3)})});function d(){var t=this;document.addEventListener("shown.bs.collapse",function(e){var n,r;(n=p,r=t,n.get(c(n,r))).call(t,e)})}e.pn=h},869(t,e,n){"use strict";function r(t){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r(t)}function o(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,a(r.key),r)}}function i(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function a(t){var e=function(t){if("object"!=r(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=r(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==r(e)?e:e+""}e.kG=void 0;var l=n(130),c=i(function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),window.addEventListener("hashchange",function(){var t=window.location.hash;if(t&&"#"!==t)try{var e=document.querySelector(t);e&&setTimeout(function(){return(0,l.scrollWithMarginTop)(e)})}catch(t){console.warn(t)}},!1)});e.kG=c},171(t,e,n){"use strict";function r(t){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r(t)}function o(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,a(r.key),r)}}function i(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function a(t){var e=function(t){if("object"!=r(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=r(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==r(e)?e:e+""}e.e_=void 0;var l=n(130),c=n(938),u=new WeakSet,s=i(function t(){var e,n,r,o=this,i=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).extraOffset,l=void 0===i?0:i;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),function(t,e){(function(t,e){if(e.has(t))throw new TypeError("Cannot initialize the same private elements twice on an object")})(t,e),e.add(t)}(this,u),e=this,r=void 0,(n=a(n="extraOffset"))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,this.extraOffset=l,(0,c.onComplete)(function(){return setTimeout(function(){return function(t,e,n){if("function"==typeof t?t===e:t.has(e))return arguments.length<3?e:n;throw new TypeError("Private element is not present on this object")}(u,o,f).call(o)},1e3)})});function f(){var t=this;"$"in window&&window.$(document).on("down.zf.accordion",function(e,n){var r,o=n.get(0).parentNode;null!==(r=o.closest)&&void 0!==r&&r.call(o,".skip-scroll-into-view, [data-skip-scroll-into-view]")||(0,l.scrollWithMarginTop)(o,t.extraOffset,!0)})}e.e_=s},978(t,e,n){"use strict";function r(t){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r(t)}function o(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,u(r.key),r)}}function i(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function a(t,e,n){l(t,e),e.set(t,n)}function l(t,e){if(e.has(t))throw new TypeError("Cannot initialize the same private elements twice on an object")}function c(t,e,n){return(e=u(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function u(t){var e=function(t){if("object"!=r(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=r(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==r(e)?e:e+""}function s(t,e){return t.get(p(t,e))}function f(t,e,n){return t.set(p(t,e),n),n}function p(t,e,n){if("function"==typeof t?t===e:t.has(e))return arguments.length<3?e:n;throw new TypeError("Private element is not present on this object")}var h=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.ScrollDirection=void 0;var d=h(n(882)),v=h(n(969)),y=new WeakMap,b=new WeakMap,m=new WeakMap,w=new WeakSet,g=i(function t(){var e,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=n.onlyFor,o=void 0===r?null:r,i=n.threshold,u=void 0===i?0:i,s=n.thresholdCallback,h=void 0===s?null:s,d=n.throttle,v=void 0===d?16:d,g=n.throttleOptions,j=void 0===g?{trailing:!1}:g;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),l(this,e=w),e.add(this),c(this,"onlyForCallback",null),a(this,y,0),c(this,"threshold",0),c(this,"thresholdCallback",null),a(this,b,void 0),a(this,m,void 0),this.onlyForCallback=o,this.threshold=u,this.thresholdCallback=h,f(b,this,v),f(m,this,j),f(y,this,window.pageYOffset||document.documentElement.scrollTop),p(w,this,S).call(this)});function S(){var t=this,e=function(){(!t.onlyForCallback||t.onlyForCallback())&&p(w,t,O).call(t)};if(s(b,this)){var n=(0,v.default)(e,s(b,this),s(m,this)||{});window.addEventListener("scroll",n,{passive:!0})}else window.addEventListener("scroll",e,{passive:!0})}function j(t){requestAnimationFrame(function(){window.dispatchEvent(new CustomEvent(t))})}function O(){var t=document.body.classList,e=window.pageYOffset||document.documentElement.scrollTop,n=this.thresholdCallback&&(0,d.default)(this.thresholdCallback)?this.thresholdCallback({scrollTop:e,threshold:this.threshold,lastScrollTop:s(y,this)}):this.threshold;Math.abs(e-s(y,this))<n||(e>s(y,this)+n&&!t.contains("scrolling-down")?(t.add("scrolling-down"),t.remove("scrolling-up"),p(w,this,j).call(this,"scrollDirectionChange")):e<s(y,this)-n&&!t.contains("scrolling-up")&&(t.add("scrolling-up"),t.remove("scrolling-down"),p(w,this,j).call(this,"scrollDirectionChange")),f(y,this,Math.max(e,0)))}e.ScrollDirection=g,e.default=g},24(t,e,n){"use strict";function r(t){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r(t)}function o(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)}return n}function i(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?o(Object(n),!0).forEach(function(e){p(t,e,n[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}function a(t){return function(t){if(Array.isArray(t))return c(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||l(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(t,e){if(t){if("string"==typeof t)return c(t,e);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?c(t,e):void 0}}function c(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=Array(e);n<e;n++)r[n]=t[n];return r}function u(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,h(r.key),r)}}function f(t,e,n){return e&&s(t.prototype,e),n&&s(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function p(t,e,n){return(e=h(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function h(t){var e=function(t){if("object"!=r(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=r(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==r(e)?e:e+""}function d(t,e,n){(function(t,e){if(e.has(t))throw new TypeError("Cannot initialize the same private elements twice on an object")})(t,e),e.set(t,n)}function v(t,e){return t.get(b(t,e))}function y(t,e,n){return t.set(b(t,e),n),n}function b(t,e,n){if("function"==typeof t?t===e:t.has(e))return arguments.length<3?e:n;throw new TypeError("Private element is not present on this object")}var m=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.ScrollOffset=e.ScrollOffsetPart=void 0;var w=m(n(221)),g=m(n(882)),S=new WeakMap,j=new WeakMap,O=new WeakMap,P=new WeakMap,k=new WeakMap,E=new WeakMap,T=new WeakMap,M=new WeakMap,x=new WeakMap,W=new WeakMap,C=new WeakMap,_=function(){return f(function t(e){var n=this,r=e.name,o=void 0===r?"":r,i=e.selectors,l=void 0===i?[]:i,c=e.elements,s=void 0===c?[]:c,f=e.fixedHeight,h=void 0!==f&&f,b=e.condition,m=void 0!==b&&b,w=e.resizeCondition,_=void 0!==w&&w;u(this,t),d(this,S,void 0),d(this,j,void 0),d(this,O,void 0),d(this,P,void 0),d(this,k,void 0),d(this,E,void 0),d(this,T,void 0),d(this,M,0),d(this,x,!1),d(this,W,new WeakMap),p(this,"setElementHeight",function(t,e){!t||!Number.isFinite(e)||e<0||v(W,n).set(t,Math.round(e))}),d(this,C,function(t){if(!t)return 0;var e=v(W,n).get(t);if(void 0!==e)return e;var r=t.clientHeight||0;return v(W,n).set(t,r),r}),p(this,"calculate",function(){var t;if(y(x,n,!(null===(t=v(O,n))||void 0===t||!t.length)),v(x,n)&&v(k,n)&&(0,g.default)(v(k,n))&&y(x,n,v(x,n)&&v(k,n).call(n)),v(x,n)&&v(E,n)&&(0,g.default)(v(E,n))&&("resizeConditionValue"in n||y(T,n,v(E,n).call(n)),y(x,n,v(x,n)&&v(T,n))),v(x,n))if(v(P,n))y(M,n,v(P,n));else{var e=0;v(O,n).forEach(function(t){e+=v(C,n).call(n,t)}),y(M,n,e)}else y(M,n,0);return n}),p(this,"calculateResizeConditions",function(){if(v(E,n)&&(0,g.default)(v(E,n))){var t=v(T,n)||!1;return y(T,n,v(E,n).call(n)),t!=v(T,n)}return!1}),y(S,this,o),y(j,this,(l||[]).filter(Boolean)),y(O,this,(s||[]).filter(Boolean)),y(P,this,h),y(k,this,m),y(E,this,_),v(j,this).forEach(function(t){var e=a(document.querySelectorAll(t));e.length&&y(O,n,[].concat(a(v(O,n)),a(e)))}),this.calculate()},[{key:"name",get:function(){return v(S,this)}},{key:"totalHeight",get:function(){return v(M,this)}},{key:"isValid",get:function(){return v(x,this)}},{key:"elements",get:function(){return v(O,this)}}])}();e.ScrollOffsetPart=_;var A=new WeakMap,I=new WeakMap,F=new WeakMap,R=new WeakMap,z=new WeakMap,D=new WeakMap,L=new WeakMap,H=new WeakMap,V=new WeakMap,q=new WeakMap,$=new WeakMap,G=new WeakMap,N=new WeakMap,B=f(function t(){var e=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=n.offsetParts,o=void 0===r?[]:r,c=n.variables,s=void 0===c?[]:c,f=n.registerForHoudini,p=void 0===f||f,h=n.useResizeObserver,b=void 0===h||h,m=n.extraEvents,g=void 0===m?[]:m;u(this,t),d(this,A,void 0),d(this,I,void 0),d(this,F,void 0),d(this,R,void 0),d(this,z,void 0),d(this,D,!1),d(this,L,function(){v(I,e).forEach(function(t){var e=t.name;window.CSS.registerProperty({name:"--".concat(e),syntax:"<length>",inherits:!0,initialValue:"0px"})})}),d(this,H,function(){v(A,e).forEach(function(t){return t.calculate()}),v(I,e).map(function(t){var n=t.offsetParts.reduce(function(t,n){return"string"==typeof n&&(n=v(A,e).find(function(t){return 0==t.name.localeCompare(n)})),n&&n.isValid&&(t+=n.totalHeight),t},0);return i(i({},t),{},{value:n})}).forEach(function(t){var e=t.name,n=t.value;document.documentElement.style.setProperty("--".concat(e),"".concat(n,"px"))}),document.body.dispatchEvent(new CustomEvent("ScrollOffsetChange",{bubbles:!0}))}),d(this,V,function(){v(A,e).forEach(function(t){return t.calculateResizeConditions()})}),d(this,q,(0,w.default)(v(H,this),32)),d(this,$,(0,w.default)(v(V,this),32)),d(this,G,function(){v(D,e)||(y(D,e,!0),requestAnimationFrame(function(){y(D,e,!1),v(q,e).call(e)}))}),d(this,N,function(){if(["resize","orientationchange"].forEach(function(t){window.addEventListener(t,v($,e))}),["resize","orientationchange","scrollDirectionChange","stickyIsPinned","stickyIsUnpinned"].concat(a(v(F,e))).forEach(function(t){return window.addEventListener(t,v(G,e))}),v(z,e)){var t=new ResizeObserver(function(t){t.forEach(function(t){var n,r=t.target,o=Math.round((null===(n=t.contentRect)||void 0===n?void 0:n.height)||(null==r?void 0:r.clientHeight)||0);r&&o&&v(A,e).forEach(function(t){t.elements.includes(r)&&t.setElementHeight(r,o)})}),v(G,e).call(e)});v(A,e).forEach(function(e){return e.elements.forEach(function(e){return t.observe(e)})})}}),Array.isArray(s)?y(I,this,s):y(I,this,Object.entries(s).map(function(t){var e,n,r=(n=2,function(t){if(Array.isArray(t))return t}(e=t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var r,o,i,a,l=[],c=!0,u=!1;try{if(i=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(l.push(r.value),l.length!==e);c=!0);}catch(t){u=!0,o=t}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(u)throw o}}return l}}(e,n)||l(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}());return{name:r[0],offsetParts:r[1]}}));var S=v(I,this).map(function(t){return t.offsetParts.filter(function(t){return t instanceof _})}).flat(1);o=a(new Set([].concat(a(o),a(S)))),y(A,this,o.map(function(t){var e=null;return(e=t instanceof _?t:new _(t)).calculate(),e})),y(F,this,g||[]),y(R,this,p&&"CSS"in window&&"registerProperty"in window.CSS),y(z,this,"ResizeObserver"in window&&b),v(R,this)&&v(L,this).call(this),v(N,this).call(this),v(H,this).call(this)});e.ScrollOffset=B,e.default=B},103(t,e){"use strict";function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(t)}function r(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,i(r.key),r)}}function o(t,e,n){return e&&r(t.prototype,e),n&&r(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function i(t){var e=function(t){if("object"!=n(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var r=e.call(t,"string");if("object"!=n(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==n(e)?e:e+""}function a(t,e,n){l(t,e),e.set(t,n)}function l(t,e){if(e.has(t))throw new TypeError("Cannot initialize the same private elements twice on an object")}function c(t,e){return t.get(s(t,e))}function u(t,e,n){return t.set(s(t,e),n),n}function s(t,e,n){if("function"==typeof t?t===e:t.has(e))return arguments.length<3?e:n;throw new TypeError("Private element is not present on this object")}e.W_=void 0;var f=new WeakMap,p=new WeakMap,h=new WeakMap,d=new WeakMap,v=new WeakMap,y=new WeakSet,b=o(function t(){var e,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=n.intersectionElement,o=void 0===r?null:r,i=n.belowTheFoldClass,c=void 0===i?"below-the-fold":i,b=n.aboveTheFoldClass,m=void 0===b?"above-the-fold":b;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),l(this,e=y),e.add(this),a(this,f,void 0),a(this,p,null),a(this,h,!1),a(this,d,void 0),a(this,v,void 0),u(f,this,o),u(d,this,c),u(v,this,m),s(y,this,w).call(this)});function m(t){requestAnimationFrame(function(){window.dispatchEvent(new CustomEvent(t))})}function w(){var t=this,e=document.body;if(!c(f,this)){var n=window.getComputedStyle(e).getPropertyValue("position");n&&"static"!=n||(e.style.position="relative"),u(f,this,document.createElement("div")),c(f,this).classList.add("second-page-observer"),c(f,this).style.cssText="pointerEvents: none; visibility: hidden; position: absolute; top: 0; left: 0; right: 0; height: 100vh;",e.appendChild(c(f,this))}e.classList.add(c(v,this)),u(p,this,new IntersectionObserver(function(n){var r=!0;n.forEach(function(t){t.isIntersecting||(r=!1)}),c(h,t)!=!r&&(u(h,t,!r),e.classList[c(h,t)?"add":"remove"](c(d,t)),e.classList[c(h,t)?"remove":"add"](c(v,t)),s(y,t,m).call(t,"ScrollPageChange"))})),c(p,this).observe(c(f,this))}e.W_=b},130(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.scrollWithMarginTop=void 0,e.scrollWithMarginTop=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(t){var r=t.getBoundingClientRect(),o=window.pageYOffset,i=r.top+o,a=window.getComputedStyle(t),l=i-(parseInt(a.getPropertyValue("scroll-margin-top"))||parseInt(a.getPropertyValue("scroll-snap-margin-top"))||0)+e;if(n&&l>=o&&l+r.height<o+window.innerHeight/2)return;window.scrollTo({top:l,left:0,behavior:"smooth"})}}},938(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.onReady=e.onInteractive=e.onComplete=e.onReadyState=void 0,e.onReadyState=function(t,e){var n=Array.isArray(t)?t:[t],r=function(){return!!n.includes(document.readyState)&&(document.removeEventListener("readystatechange",r),e(),!0)};r()||document.addEventListener("readystatechange",r)},e.onComplete=function(t){return(0,e.onReadyState)("complete",t)},e.onInteractive=function(t){return(0,e.onReadyState)(["interactive","complete"],t)},e.onReady=e.onInteractive,e.default=e.onReady},873(t,e,n){var r=n(325).Symbol;t.exports=r},552(t,e,n){var r=n(873),o=n(659),i=n(350),a=r?r.toStringTag:void 0;t.exports=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":a&&a in Object(t)?o(t):i(t)}},128(t,e,n){var r=n(800),o=/^\s+/;t.exports=function(t){return t?t.slice(0,r(t)+1).replace(o,""):t}},840(t,e,n){var r="object"==typeof n.g&&n.g&&n.g.Object===Object&&n.g;t.exports=r},659(t,e,n){var r=n(873),o=Object.prototype,i=o.hasOwnProperty,a=o.toString,l=r?r.toStringTag:void 0;t.exports=function(t){var e=i.call(t,l),n=t[l];try{t[l]=void 0;var r=!0}catch(t){}var o=a.call(t);return r&&(e?t[l]=n:delete t[l]),o}},350(t){var e=Object.prototype.toString;t.exports=function(t){return e.call(t)}},325(t,e,n){var r=n(840),o="object"==typeof self&&self&&self.Object===Object&&self,i=r||o||Function("return this")();t.exports=i},800(t){var e=/\s/;t.exports=function(t){for(var n=t.length;n--&&e.test(t.charAt(n)););return n}},221(t,e,n){var r=n(805),o=n(124),i=n(374),a=Math.max,l=Math.min;t.exports=function(t,e,n){var c,u,s,f,p,h,d=0,v=!1,y=!1,b=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function m(e){var n=c,r=u;return c=u=void 0,d=e,f=t.apply(r,n)}function w(t){var n=t-h;return void 0===h||n>=e||n<0||y&&t-d>=s}function g(){var t=o();if(w(t))return S(t);p=setTimeout(g,function(t){var n=e-(t-h);return y?l(n,s-(t-d)):n}(t))}function S(t){return p=void 0,b&&c?m(t):(c=u=void 0,f)}function j(){var t=o(),n=w(t);if(c=arguments,u=this,h=t,n){if(void 0===p)return function(t){return d=t,p=setTimeout(g,e),v?m(t):f}(h);if(y)return clearTimeout(p),p=setTimeout(g,e),m(h)}return void 0===p&&(p=setTimeout(g,e)),f}return e=i(e)||0,r(n)&&(v=!!n.leading,s=(y="maxWait"in n)?a(i(n.maxWait)||0,e):s,b="trailing"in n?!!n.trailing:b),j.cancel=function(){void 0!==p&&clearTimeout(p),d=0,c=h=u=p=void 0},j.flush=function(){return void 0===p?f:S(o())},j}},882(t,e,n){var r=n(552),o=n(805);t.exports=function(t){if(!o(t))return!1;var e=r(t);return"[object Function]"==e||"[object GeneratorFunction]"==e||"[object AsyncFunction]"==e||"[object Proxy]"==e}},805(t){t.exports=function(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}},346(t){t.exports=function(t){return null!=t&&"object"==typeof t}},394(t,e,n){var r=n(552),o=n(346);t.exports=function(t){return"symbol"==typeof t||o(t)&&"[object Symbol]"==r(t)}},124(t,e,n){var r=n(325);t.exports=function(){return r.Date.now()}},969(t,e,n){var r=n(221),o=n(805);t.exports=function(t,e,n){var i=!0,a=!0;if("function"!=typeof t)throw new TypeError("Expected a function");return o(n)&&(i="leading"in n?!!n.leading:i,a="trailing"in n?!!n.trailing:a),r(t,e,{leading:i,maxWait:e,trailing:a})}},374(t,e,n){var r=n(128),o=n(805),i=n(394),a=/^[-+]0x[0-9a-f]+$/i,l=/^0b[01]+$/i,c=/^0o[0-7]+$/i,u=parseInt;t.exports=function(t){if("number"==typeof t)return t;if(i(t))return NaN;if(o(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=o(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=r(t);var n=l.test(t);return n||c.test(t)?u(t.slice(2),n?2:8):a.test(t)?NaN:+t}}},e={};function n(r){var o=e[r];if(void 0!==o)return o.exports;var i=e[r]={exports:{}};return t[r].call(i.exports,i,i.exports,n),i.exports}n.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return n.d(e,{a:e}),e},n.d=(t,e)=>{for(var r in e)n.o(e,r)&&!n.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var r={};return(()=>{"use strict";n.r(r),n.d(r,{Bootstrap4AccordionScrollIntoView:()=>c.tG,BootstrapAccordionScrollIntoView:()=>l.pn,FixHashScrollPosition:()=>a.kG,FoundationAccordionScrollIntoView:()=>u.e_,ScrollDirection:()=>t.ScrollDirection,ScrollOffset:()=>e.ScrollOffset,ScrollOffsetPart:()=>e.ScrollOffsetPart,ScrollPages:()=>o.W_,onComplete:()=>s.onComplete,onInteractive:()=>s.onInteractive,onReady:()=>s.onReady,onReadyState:()=>s.onReadyState,scrollWithMarginTop:()=>i.scrollWithMarginTop});var t=n(978),e=n(24),o=n(103),i=n(130),a=n(869),l=n(459),c=n(198),u=n(171),s=n(938)})(),r})());
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**!
|
|
2
|
+
* ScrollOffset - a class to handle add css variables to the body element,
|
|
3
|
+
* with the value of the "header" parts that are visible
|
|
4
|
+
* so that we can adjust scroll positions etc. based on it
|
|
5
|
+
*
|
|
6
|
+
* Author: Bogdan Barbu
|
|
7
|
+
* Team: Codingheads (codingheads.com)
|
|
8
|
+
*/
|
package/package.json
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@smartimpact-it/scroll-utils",
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"description": "A library for scroll-related utils.",
|
|
5
|
+
"main": "dist/cjs/index.js",
|
|
6
|
+
"module": "dist/esm/index.js",
|
|
7
|
+
"module:src": "src/index.js",
|
|
8
|
+
"umd:main": "dist/umd/index.js",
|
|
9
|
+
"types": "dist/types/index.d.ts",
|
|
10
|
+
"sideEffects": false,
|
|
11
|
+
"authors": [
|
|
12
|
+
{
|
|
13
|
+
"name": "Codingheads",
|
|
14
|
+
"email": "dev@smartimpact-it.com",
|
|
15
|
+
"url": "https://codingheads.com"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"name": "Bogdan Barbu",
|
|
19
|
+
"email": "bbarbu@smartimpact.fr"
|
|
20
|
+
}
|
|
21
|
+
],
|
|
22
|
+
"license": "GPL-3",
|
|
23
|
+
"keywords": [
|
|
24
|
+
"scroll",
|
|
25
|
+
"intersectionObserver",
|
|
26
|
+
"scroll direction",
|
|
27
|
+
"above the fold",
|
|
28
|
+
"scroll-margin-top",
|
|
29
|
+
"offset"
|
|
30
|
+
],
|
|
31
|
+
"scripts": {
|
|
32
|
+
"test": "jest",
|
|
33
|
+
"watch": "webpack --progress --watch --color",
|
|
34
|
+
"format": "prettier --write \"src/**/**.{js,ts}\" \"**/*.md\"",
|
|
35
|
+
"format:check": "prettier --list-different \"src/**/**.{js,ts}\" \"**/*.md\"",
|
|
36
|
+
"pretest": "npm run build",
|
|
37
|
+
"build": "npm run build:cjs && npm run build:esm && npm run build:umd && npm run build:types",
|
|
38
|
+
"build:cjs": "node tools/cleanup cjs && tsc -p config/tsconfig.cjs.json && babel ./dist/cjs -d ./dist/cjs",
|
|
39
|
+
"build:esm": "node tools/cleanup esm && tsc -p config/tsconfig.esm.json && babel ./dist/esm -d ./dist/esm --config-file ./config/babel.config.esm.js",
|
|
40
|
+
"build:umd": "node tools/cleanup umd && webpack --config config/webpack.config.js",
|
|
41
|
+
"build:types": "node tools/cleanup types && tsc -p config/tsconfig.types.json",
|
|
42
|
+
"clean": "node tools/cleanup",
|
|
43
|
+
"package": "npm run build && npm pack",
|
|
44
|
+
"addscope": "node tools/packagejson name @smartimpact-it/scroll-utils",
|
|
45
|
+
"postversion": "git push --follow-tags"
|
|
46
|
+
},
|
|
47
|
+
"publishConfig": {
|
|
48
|
+
"access": "public"
|
|
49
|
+
},
|
|
50
|
+
"directories": {
|
|
51
|
+
"lib": "dist"
|
|
52
|
+
},
|
|
53
|
+
"files": [
|
|
54
|
+
"dist",
|
|
55
|
+
"src",
|
|
56
|
+
"utils"
|
|
57
|
+
],
|
|
58
|
+
"repository": {
|
|
59
|
+
"type": "git",
|
|
60
|
+
"url": "git+https://github.com/siit-dev/scroll-utils.git"
|
|
61
|
+
},
|
|
62
|
+
"dependencies": {
|
|
63
|
+
"lodash": "^4.18.1"
|
|
64
|
+
},
|
|
65
|
+
"devDependencies": {
|
|
66
|
+
"@babel/cli": "^7.28.6",
|
|
67
|
+
"@babel/core": "^7.29.0",
|
|
68
|
+
"@babel/helpers": "^7.29.2",
|
|
69
|
+
"@babel/plugin-proposal-decorators": "^7.29.0",
|
|
70
|
+
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
|
71
|
+
"@babel/plugin-transform-async-to-generator": "^7.28.6",
|
|
72
|
+
"@babel/plugin-transform-react-jsx": "^7.28.6",
|
|
73
|
+
"@babel/plugin-transform-runtime": "^7.29.0",
|
|
74
|
+
"@babel/preset-env": "^7.29.5",
|
|
75
|
+
"@babel/preset-typescript": "^7.28.5",
|
|
76
|
+
"@babel/register": "^7.29.3",
|
|
77
|
+
"@types/lodash": "^4.17.24",
|
|
78
|
+
"autoprefixer": "^10.5.0",
|
|
79
|
+
"babel-jest": "^30.4.1",
|
|
80
|
+
"babel-loader": "^10.1.1",
|
|
81
|
+
"babel-plugin-lodash": "^3.3.4",
|
|
82
|
+
"cross-env": "^10.1.0",
|
|
83
|
+
"jest": "^30.4.2",
|
|
84
|
+
"jest-environment-jsdom": "^30.4.1",
|
|
85
|
+
"mini-css-extract-plugin": "^2.10.2",
|
|
86
|
+
"postcss": "^8.5.14",
|
|
87
|
+
"postcss-loader": "^8.2.1",
|
|
88
|
+
"prettier": "^3.8.3",
|
|
89
|
+
"typescript": "^6.0.3",
|
|
90
|
+
"webpack": "^5.106.2",
|
|
91
|
+
"webpack-cli": "^7.0.2",
|
|
92
|
+
"webpack-notifier": "^1.15.0"
|
|
93
|
+
},
|
|
94
|
+
"bugs": {
|
|
95
|
+
"url": "https://github.com/siit-dev/scroll-utils/issues"
|
|
96
|
+
},
|
|
97
|
+
"homepage": "https://github.com/siit-dev/scroll-utils",
|
|
98
|
+
"jest": {
|
|
99
|
+
"testEnvironment": "jsdom"
|
|
100
|
+
}
|
|
101
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { scrollWithMarginTop } from './scrollWithMarginTop';
|
|
2
|
+
import { onComplete } from './utils/onReady';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Scroll to the opened accordion tab
|
|
6
|
+
*/
|
|
7
|
+
export class Bootstrap4AccordionScrollIntoView {
|
|
8
|
+
extraOffset: number;
|
|
9
|
+
|
|
10
|
+
constructor({ extraOffset = 0 } = {}) {
|
|
11
|
+
this.extraOffset = extraOffset;
|
|
12
|
+
onComplete(() => setTimeout(() => this.#addEventListeners(), 1000));
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
#addEventListeners() {
|
|
16
|
+
if ('$' in window) {
|
|
17
|
+
(window as any).$(document).on('shown.collapse', (e: Event) => {
|
|
18
|
+
this.#handle(e);
|
|
19
|
+
});
|
|
20
|
+
} else {
|
|
21
|
+
document.addEventListener('shown.collapse', (e: Event) => {
|
|
22
|
+
this.#handle(e);
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
#handle = (e: Event) => {
|
|
28
|
+
let header: HTMLElement = null;
|
|
29
|
+
const target = e.target as unknown as HTMLElement;
|
|
30
|
+
|
|
31
|
+
// Skip scrolling if the clicked element or any of its parents has the class 'skip-scroll-into-view'.
|
|
32
|
+
if (target.closest?.('.skip-scroll-into-view, [data-skip-scroll-into-view]')) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
const tabId = target.id;
|
|
37
|
+
const headerId = target.getAttribute('aria-labelledby');
|
|
38
|
+
if (headerId) {
|
|
39
|
+
header = document.querySelector(`#${headerId}`);
|
|
40
|
+
}
|
|
41
|
+
if (!header && tabId) {
|
|
42
|
+
header = document.querySelector(`[data-target="#${tabId}"]`);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
if (header) {
|
|
46
|
+
scrollWithMarginTop(header, this.extraOffset, true);
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export default Bootstrap4AccordionScrollIntoView;
|