aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/utils.mjs
diff options
context:
space:
mode:
Diffstat (limited to 'src/utils.mjs')
-rw-r--r--src/utils.mjs52
1 files changed, 27 insertions, 25 deletions
diff --git a/src/utils.mjs b/src/utils.mjs
index ead3002..ad9131e 100644
--- a/src/utils.mjs
+++ b/src/utils.mjs
@@ -18,8 +18,8 @@ export const onRemove = (element, callback) => {
18 } 18 }
19 } 19 }
20 }); 20 });
21 obs.observe(parent, { childList: true, }); 21 obs.observe(parent, { childList: true });
22} 22};
23 23
24/** 24/**
25 * Animate transition of DOMRect, with Web Animation API 25 * Animate transition of DOMRect, with Web Animation API
@@ -32,18 +32,24 @@ export const onRemove = (element, callback) => {
32 * @returns {Animation} https://developer.mozilla.org/en-US/docs/Web/API/Animation 32 * @returns {Animation} https://developer.mozilla.org/en-US/docs/Web/API/Animation
33 */ 33 */
34export const animateRectTransition = (element, rect, options = {}) => { 34export const animateRectTransition = (element, rect, options = {}) => {
35 if (!element.parentElement) throw new Error("The node must already be attached"); 35 if (!element.parentElement)
36 throw new Error("The node must already be attached");
36 37
37 const { width: w1, height: h1, left: x1, top: y1 } = rect 38 const { width: w1, height: h1, left: x1, top: y1 } = rect;
38 const { width: w2, height: h2, left: x2, top: y2 } = element.getBoundingClientRect() 39 const {
40 width: w2,
41 height: h2,
42 left: x2,
43 top: y2,
44 } = element.getBoundingClientRect();
39 45
40 const rw = (w1 ?? w2) / w2 46 const rw = (w1 ?? w2) / w2;
41 const rh = (h1 ?? h2) / h2 47 const rh = (h1 ?? h2) / h2;
42 const dx = x1 - x2; 48 const dx = x1 - x2;
43 const dy = y1 - y2; 49 const dy = y1 - y2;
44 50
45 if (dx === 0 && dy === 0 || !isFinite(rw) || !isFinite(rh)) { 51 if ((dx === 0 && dy === 0) || !isFinite(rw) || !isFinite(rh)) {
46 return element.animate([], { duration: 0 }) 52 return element.animate([], { duration: 0 });
47 } 53 }
48 54
49 const transform1 = `translate(0, 0) scale(1, 1)`; 55 const transform1 = `translate(0, 0) scale(1, 1)`;
@@ -51,18 +57,14 @@ export const animateRectTransition = (element, rect, options = {}) => {
51 const keyframes = [ 57 const keyframes = [
52 { transform: transform1, opacity: 1 }, 58 { transform: transform1, opacity: 1 },
53 { transform: transform2, opacity: 0.3 }, 59 { transform: transform2, opacity: 0.3 },
54 ] 60 ];
55 if (options.resume === true) keyframes.reverse() 61 if (options.resume === true) keyframes.reverse();
56
57 return element.animate(
58 keyframes,
59 {
60 duration: options.duration ?? 500,
61 easing: 'ease-in-out',
62 }
63 );
64}
65 62
63 return element.animate(keyframes, {
64 duration: options.duration ?? 500,
65 easing: "ease-in-out",
66 });
67};
66 68
67/** 69/**
68 * Throttle for function call 70 * Throttle for function call
@@ -74,13 +76,13 @@ export const animateRectTransition = (element, rect, options = {}) => {
74export function throttle(func, delay) { 76export function throttle(func, delay) {
75 let timerFlag = null; 77 let timerFlag = null;
76 78
77 return function(...args) { 79 return function (...args) {
78 const context = this 80 const context = this;
79 if (timerFlag !== null) return null 81 if (timerFlag !== null) return null;
80 82
81 timerFlag = setTimeout( 83 timerFlag = setTimeout(
82 () => timerFlag = null, 84 () => (timerFlag = null),
83 typeof delay === 'function' ? delay.call(context) : delay 85 typeof delay === "function" ? delay.call(context) : delay,
84 ); 86 );
85 87
86 return func.call(context, ...args); 88 return func.call(context, ...args);