@marianmeres/stuic 1.8.0 → 1.9.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.
|
@@ -1,29 +1,37 @@
|
|
|
1
1
|
<script>import { createClog } from "@marianmeres/clog";
|
|
2
2
|
import { createEventDispatcher } from "svelte";
|
|
3
3
|
import { get } from "svelte/store";
|
|
4
|
+
import { twMerge } from "tailwind-merge";
|
|
4
5
|
import { prefersReducedMotionStore } from "../../utils/prefers-reduced-motion.js";
|
|
5
6
|
import { windowSize } from "../../utils/window-size.js";
|
|
6
|
-
import { twMerge } from "tailwind-merge";
|
|
7
7
|
const clog = createClog("HoverExpandableWidth");
|
|
8
8
|
const dispatch = createEventDispatcher();
|
|
9
9
|
export let shadowOpacity = 0.5;
|
|
10
10
|
export let duration = 150;
|
|
11
11
|
export let targetWidth = 256;
|
|
12
|
+
export let delayIn = 400;
|
|
13
|
+
export let delayOut = 100;
|
|
12
14
|
let _class = "";
|
|
13
15
|
export { _class as class };
|
|
14
16
|
$:
|
|
15
17
|
_isExpanded = false;
|
|
16
18
|
let _isShrinking = false;
|
|
17
19
|
let _isExpanding = false;
|
|
18
|
-
let _todo;
|
|
19
20
|
let el;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
let _delayTimer;
|
|
22
|
+
const _resetDelayTimer = () => {
|
|
23
|
+
if (_delayTimer)
|
|
24
|
+
clearTimeout(_delayTimer);
|
|
25
|
+
_delayTimer = null;
|
|
26
|
+
};
|
|
27
|
+
const _planDelayedExec = (_fn, _delay) => {
|
|
28
|
+
_resetDelayTimer();
|
|
29
|
+
_delayTimer = setTimeout(() => {
|
|
30
|
+
_fn();
|
|
31
|
+
_resetDelayTimer();
|
|
32
|
+
}, _delay);
|
|
24
33
|
};
|
|
25
34
|
const _expand = () => {
|
|
26
|
-
_todo = _expand;
|
|
27
35
|
if (_isExpanding || _isShrinking || _isExpanded)
|
|
28
36
|
return;
|
|
29
37
|
_isExpanded = true;
|
|
@@ -47,7 +55,6 @@ const _expand = () => {
|
|
|
47
55
|
setTimeout(
|
|
48
56
|
() => {
|
|
49
57
|
_isExpanding = false;
|
|
50
|
-
_maybeTodo();
|
|
51
58
|
},
|
|
52
59
|
duration + 1e3 / 60 * 3
|
|
53
60
|
// 3 x raf
|
|
@@ -64,7 +71,6 @@ const _expand = () => {
|
|
|
64
71
|
});
|
|
65
72
|
};
|
|
66
73
|
const _shrink = () => {
|
|
67
|
-
_todo = _shrink;
|
|
68
74
|
if (_isExpanding || _isShrinking || !_isExpanded)
|
|
69
75
|
return;
|
|
70
76
|
_isExpanded = false;
|
|
@@ -81,7 +87,6 @@ const _shrink = () => {
|
|
|
81
87
|
setTimeout(() => {
|
|
82
88
|
_isShrinking = false;
|
|
83
89
|
el.style.transitionProperty = "none";
|
|
84
|
-
_maybeTodo();
|
|
85
90
|
}, duration);
|
|
86
91
|
};
|
|
87
92
|
$:
|
|
@@ -91,8 +96,8 @@ $:
|
|
|
91
96
|
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
|
|
92
97
|
<div
|
|
93
98
|
bind:this={el}
|
|
94
|
-
on:mouseenter={_expand}
|
|
95
|
-
on:mouseleave={_shrink}
|
|
99
|
+
on:mouseenter={() => _planDelayedExec(_expand, delayIn)}
|
|
100
|
+
on:mouseleave={() => _planDelayedExec(_shrink, delayOut)}
|
|
96
101
|
on:click
|
|
97
102
|
aria-expanded={_isExpanded}
|
|
98
103
|
class={twMerge(`overflow-x-hidden overflow-y-auto ${_class}`)}
|