@txstate-mws/svelte-components 1.6.8 → 1.6.10
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/dist/actions/glue.js
CHANGED
|
@@ -20,17 +20,18 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
|
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
let lastrect;
|
|
23
|
+
let timer;
|
|
23
24
|
function reposition() {
|
|
24
25
|
const fixedParent = fixedContainingBlock(el);
|
|
25
26
|
let fixedRect = { left: 0, top: 0, right: 0, bottom: 0 };
|
|
26
27
|
if (fixedParent) {
|
|
27
28
|
const tmpRect = fixedParent.getBoundingClientRect();
|
|
28
|
-
fixedRect = { left: tmpRect.left, right:
|
|
29
|
+
fixedRect = { left: tmpRect.left, right: document.documentElement.clientWidth - tmpRect.right, top: tmpRect.top, bottom: document.documentElement.clientHeight - tmpRect.bottom };
|
|
29
30
|
}
|
|
30
31
|
if (!target)
|
|
31
32
|
return;
|
|
32
33
|
const tmpRect = target.getBoundingClientRect();
|
|
33
|
-
const rect = { left: tmpRect.left - fixedRect.left, right:
|
|
34
|
+
const rect = { left: tmpRect.left - fixedRect.left, right: document.documentElement.clientWidth - tmpRect.right - fixedRect.right, top: tmpRect.top - fixedRect.top, bottom: document.documentElement.clientHeight - tmpRect.bottom - fixedRect.bottom, width: tmpRect.width, height: tmpRect.height };
|
|
34
35
|
if (equal(rect, lastrect))
|
|
35
36
|
return;
|
|
36
37
|
let autoalign = align;
|
|
@@ -41,7 +42,8 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
|
|
|
41
42
|
}
|
|
42
43
|
const targetHeight = rect.height;
|
|
43
44
|
if (autoalign === 'bottomleft') {
|
|
44
|
-
|
|
45
|
+
cancelAnimationFrame(timer);
|
|
46
|
+
timer = requestAnimationFrame(() => {
|
|
45
47
|
el.style.top = `${rect.top + (cover ? 0 : targetHeight) + gap}px`;
|
|
46
48
|
el.style.left = `${rect.left}px`;
|
|
47
49
|
el.style.removeProperty('bottom');
|
|
@@ -52,7 +54,8 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
|
|
|
52
54
|
halign = 'left';
|
|
53
55
|
}
|
|
54
56
|
else if (autoalign === 'bottomright') {
|
|
55
|
-
|
|
57
|
+
cancelAnimationFrame(timer);
|
|
58
|
+
timer = requestAnimationFrame(() => {
|
|
56
59
|
el.style.top = `${rect.top + (cover ? 0 : targetHeight) + gap}px`;
|
|
57
60
|
el.style.removeProperty('left');
|
|
58
61
|
el.style.removeProperty('bottom');
|
|
@@ -63,7 +66,8 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
|
|
|
63
66
|
halign = 'right';
|
|
64
67
|
}
|
|
65
68
|
else if (autoalign === 'topleft') {
|
|
66
|
-
|
|
69
|
+
cancelAnimationFrame(timer);
|
|
70
|
+
timer = requestAnimationFrame(() => {
|
|
67
71
|
el.style.removeProperty('top');
|
|
68
72
|
el.style.left = `${rect.left}px`;
|
|
69
73
|
el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
|
|
@@ -74,7 +78,8 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
|
|
|
74
78
|
halign = 'left';
|
|
75
79
|
}
|
|
76
80
|
else if (autoalign === 'topright') {
|
|
77
|
-
|
|
81
|
+
cancelAnimationFrame(timer);
|
|
82
|
+
timer = requestAnimationFrame(() => {
|
|
78
83
|
el.style.removeProperty('top');
|
|
79
84
|
el.style.removeProperty('left');
|
|
80
85
|
el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
|
|
@@ -255,10 +255,10 @@ function reactToButtonElement(buttonelement) {
|
|
|
255
255
|
for (const parent of [...parents, undefined]) {
|
|
256
256
|
const observer = new IntersectionObserver((entries) => {
|
|
257
257
|
for (const entry of entries) {
|
|
258
|
-
if (entry.intersectionRatio < 1)
|
|
258
|
+
if (entry.intersectionRatio < 0.1)
|
|
259
259
|
menushown = false;
|
|
260
260
|
}
|
|
261
|
-
}, { root: parent, threshold: 1 });
|
|
261
|
+
}, { root: parent, threshold: 0.1 });
|
|
262
262
|
observer.observe(buttonelement);
|
|
263
263
|
observers.push(observer);
|
|
264
264
|
}
|