@hashrytech/quick-components-kit 0.9.0 → 0.10.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/CHANGELOG.md +12 -0
- package/dist/actions/disable-scroll.d.ts +8 -3
- package/dist/actions/disable-scroll.js +18 -9
- package/dist/actions/lock-scroll.d.ts +16 -0
- package/dist/actions/lock-scroll.js +45 -0
- package/dist/drawer/Drawer.svelte +1 -1
- package/dist/modal/Modal.svelte +2 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @hashrytech/quick-components-kit
|
|
2
2
|
|
|
3
|
+
## 0.10.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- feat: Adding lock-scroll action
|
|
8
|
+
|
|
9
|
+
## 0.9.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- fix: disable scroll on Overlay component control properly enabled and disabled
|
|
14
|
+
|
|
3
15
|
## 0.9.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Svelte action to disable page scroll
|
|
3
|
-
*
|
|
2
|
+
* Svelte action to disable page scroll (commonly used for modals, drawers, or mobile menus).
|
|
3
|
+
*
|
|
4
|
+
* It locks the scroll position by applying `position: fixed` to the `<body>` and
|
|
5
|
+
* preserving the current scroll offset. This approach prevents visual jumps and maintains scroll state.
|
|
6
|
+
*
|
|
7
|
+
* @param node - The element the action is bound to (required for Svelte actions, though unused here).
|
|
8
|
+
* @param enabled - Whether disable scroll should be enabled immediately (default: true).
|
|
4
9
|
*/
|
|
5
|
-
export declare function disableScroll(node: HTMLElement,
|
|
10
|
+
export declare function disableScroll(node: HTMLElement, enabled?: boolean): {
|
|
6
11
|
update(newValue: boolean): void;
|
|
7
12
|
destroy(): void;
|
|
8
13
|
};
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Svelte action to disable page scroll
|
|
3
|
-
*
|
|
2
|
+
* Svelte action to disable page scroll (commonly used for modals, drawers, or mobile menus).
|
|
3
|
+
*
|
|
4
|
+
* It locks the scroll position by applying `position: fixed` to the `<body>` and
|
|
5
|
+
* preserving the current scroll offset. This approach prevents visual jumps and maintains scroll state.
|
|
6
|
+
*
|
|
7
|
+
* @param node - The element the action is bound to (required for Svelte actions, though unused here).
|
|
8
|
+
* @param enabled - Whether disable scroll should be enabled immediately (default: true).
|
|
4
9
|
*/
|
|
5
|
-
export function disableScroll(node,
|
|
10
|
+
export function disableScroll(node, enabled = true) {
|
|
6
11
|
const scrollTop = window.scrollY;
|
|
7
12
|
const originalBodyPosition = document.body.style.position;
|
|
8
13
|
const originalBodyWidth = document.body.style.width;
|
|
@@ -21,17 +26,21 @@ export function disableScroll(node, disableBodyScroll = true) {
|
|
|
21
26
|
document.documentElement.style.overflowY = originalOverflow;
|
|
22
27
|
window.scrollTo(0, scrollTop);
|
|
23
28
|
}
|
|
24
|
-
if (node &&
|
|
29
|
+
if (node && enabled)
|
|
25
30
|
applyLock();
|
|
26
31
|
return {
|
|
27
32
|
update(newValue) {
|
|
28
|
-
if (
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
33
|
+
if (enabled) {
|
|
34
|
+
if (newValue)
|
|
35
|
+
applyLock();
|
|
36
|
+
else
|
|
37
|
+
removeLock();
|
|
38
|
+
}
|
|
32
39
|
},
|
|
33
40
|
destroy() {
|
|
34
|
-
|
|
41
|
+
if (enabled) {
|
|
42
|
+
removeLock();
|
|
43
|
+
}
|
|
35
44
|
}
|
|
36
45
|
};
|
|
37
46
|
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Svelte action to lock all page scrolling by intercepting scroll events and keys.
|
|
3
|
+
* It prevents:
|
|
4
|
+
* - Mouse wheel scrolling
|
|
5
|
+
* - Touch-based scrolling
|
|
6
|
+
* - Arrow key and spacebar scrolling
|
|
7
|
+
* - Scroll position changes via `window.onscroll`
|
|
8
|
+
*
|
|
9
|
+
* This is useful for modals or mobile menus where background scrolling should be disabled.
|
|
10
|
+
*
|
|
11
|
+
* @param node - The element the action is applied to (typically unused, but required by Svelte).
|
|
12
|
+
* @param enabled - Whether scroll locking should be applied immediately (default: true).
|
|
13
|
+
*/
|
|
14
|
+
export declare function lockScroll(node: HTMLElement, enabled?: boolean): {
|
|
15
|
+
destroy(): void;
|
|
16
|
+
};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Svelte action to lock all page scrolling by intercepting scroll events and keys.
|
|
3
|
+
* It prevents:
|
|
4
|
+
* - Mouse wheel scrolling
|
|
5
|
+
* - Touch-based scrolling
|
|
6
|
+
* - Arrow key and spacebar scrolling
|
|
7
|
+
* - Scroll position changes via `window.onscroll`
|
|
8
|
+
*
|
|
9
|
+
* This is useful for modals or mobile menus where background scrolling should be disabled.
|
|
10
|
+
*
|
|
11
|
+
* @param node - The element the action is applied to (typically unused, but required by Svelte).
|
|
12
|
+
* @param enabled - Whether scroll locking should be applied immediately (default: true).
|
|
13
|
+
*/
|
|
14
|
+
export function lockScroll(node, enabled = true) {
|
|
15
|
+
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
16
|
+
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
|
|
17
|
+
// Prevent all scrolling interaction
|
|
18
|
+
function preventDefault(e) {
|
|
19
|
+
e.preventDefault();
|
|
20
|
+
}
|
|
21
|
+
function preventDefaultForScrollKeys(e) {
|
|
22
|
+
const keys = [' ', 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'];
|
|
23
|
+
if (keys.includes(e.key)) {
|
|
24
|
+
e.preventDefault();
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
// Attach scroll-lock event listeners if enabled
|
|
28
|
+
if (node && enabled) {
|
|
29
|
+
window.addEventListener('wheel', preventDefault, { passive: false });
|
|
30
|
+
window.addEventListener('touchmove', preventDefault, { passive: false });
|
|
31
|
+
window.addEventListener('keydown', preventDefaultForScrollKeys);
|
|
32
|
+
window.onscroll = () => window.scrollTo(scrollLeft, scrollTop);
|
|
33
|
+
}
|
|
34
|
+
return {
|
|
35
|
+
// Svelte action cleanup
|
|
36
|
+
destroy() {
|
|
37
|
+
if (enabled) {
|
|
38
|
+
window.removeEventListener('wheel', preventDefault);
|
|
39
|
+
window.removeEventListener('touchmove', preventDefault);
|
|
40
|
+
window.removeEventListener('keydown', preventDefaultForScrollKeys);
|
|
41
|
+
window.onscroll = null;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
}
|
package/dist/modal/Modal.svelte
CHANGED