adds windowResize event listener
This commit is contained in:
parent
4089964fea
commit
bdfff3b643
2 changed files with 42 additions and 0 deletions
|
|
@ -11,6 +11,7 @@
|
||||||
isReverseMode,
|
isReverseMode,
|
||||||
createRenderConfig,
|
createRenderConfig,
|
||||||
isNullish,
|
isNullish,
|
||||||
|
debounce,
|
||||||
} from './ts/utils';
|
} from './ts/utils';
|
||||||
import { Tween } from 'svelte/motion';
|
import { Tween } from 'svelte/motion';
|
||||||
|
|
||||||
|
|
@ -116,6 +117,24 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleWindowResize() {
|
||||||
|
let resizing = false;
|
||||||
|
let timer = undefined;
|
||||||
|
|
||||||
|
if (!resizing && lottiePlayer?.isLoaded && lottiePlayer.isPlaying) {
|
||||||
|
lottiePlayer?.pause();
|
||||||
|
resizing = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
clearTimeout(timer);
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
resizing = false;
|
||||||
|
if (lottiePlayer?.isLoaded && lottiePlayer.isPaused) {
|
||||||
|
lottiePlayer?.play();
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
const shouldAutoplay = autoplay && !playOnHover;
|
const shouldAutoplay = autoplay && !playOnHover;
|
||||||
|
|
||||||
|
|
@ -144,6 +163,7 @@
|
||||||
lottiePlayer.addEventListener('load', onLoadEvent);
|
lottiePlayer.addEventListener('load', onLoadEvent);
|
||||||
lottiePlayer.addEventListener('frame', onRenderEvent);
|
lottiePlayer.addEventListener('frame', onRenderEvent);
|
||||||
lottiePlayer.addEventListener('complete', onCompleteEvent);
|
lottiePlayer.addEventListener('complete', onCompleteEvent);
|
||||||
|
window.addEventListener('resize', handleWindowResize);
|
||||||
|
|
||||||
if (dotLottieRefCallback) {
|
if (dotLottieRefCallback) {
|
||||||
dotLottieRefCallback(lottiePlayer);
|
dotLottieRefCallback(lottiePlayer);
|
||||||
|
|
@ -160,6 +180,7 @@
|
||||||
lottiePlayer.removeEventListener('load', onLoad);
|
lottiePlayer.removeEventListener('load', onLoad);
|
||||||
lottiePlayer.destroy();
|
lottiePlayer.destroy();
|
||||||
}
|
}
|
||||||
|
window.removeEventListener('resize', handleWindowResize);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Handles progress change
|
// Handles progress change
|
||||||
|
|
|
||||||
|
|
@ -109,3 +109,24 @@ export function createRenderConfig() {
|
||||||
export function isNullish(value: any): boolean {
|
export function isNullish(value: any): boolean {
|
||||||
return value === null || value === undefined || value === '';
|
return value === null || value === undefined || value === '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns a debounced version of the given function.
|
||||||
|
* @template T
|
||||||
|
* @param {T} func - The function to debounce.
|
||||||
|
* @param {number} [delay=0] - The debounce delay in milliseconds.
|
||||||
|
* @returns {(...args: Parameters<T>) => void} The debounced function.
|
||||||
|
*/
|
||||||
|
export function debounce<T extends (...args: unknown[]) => void>(
|
||||||
|
func: T,
|
||||||
|
delay = 0
|
||||||
|
) {
|
||||||
|
let timeoutId: ReturnType<typeof setTimeout> | undefined;
|
||||||
|
|
||||||
|
return (...args: Parameters<T>) => {
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
timeoutId = setTimeout(() => {
|
||||||
|
func(...args);
|
||||||
|
}, delay);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue