vuestic-ui
Version:
Vue 3 UI Framework
127 lines (126 loc) • 3.35 kB
JavaScript
import { onMounted, onBeforeUnmount, ref, computed, watch } from "vue";
const useCarouselAnimation = (props, currentSlide) => {
let animationInterval = -1;
const start = () => {
if (!props.autoscroll) {
return;
}
clearInterval(animationInterval);
animationInterval = setInterval(() => {
currentSlide.value += 1;
if (currentSlide.value >= props.items.length) {
currentSlide.value = 0;
}
}, props.autoscrollInterval);
};
let pauseTimeout;
const pause = () => {
if (!props.autoscroll) {
return;
}
clearInterval(animationInterval);
pauseTimeout = setTimeout(() => {
start();
clearTimeout(pauseTimeout);
}, props.autoscrollPauseDuration);
};
const stop = () => {
clearInterval(animationInterval);
clearTimeout(pauseTimeout);
};
onMounted(() => start());
onBeforeUnmount(() => stop());
const withPause = (fn) => {
return (...args) => {
pause();
fn(...args);
};
};
const slidesContainerStyle = ref({
transition: void 0
});
const sliderToBeShown = ref(0);
const computedSlidesStyle = computed(() => {
if (props.effect === "fade") {
return {
...slidesContainerStyle.value,
transition: "none"
};
}
if (props.vertical) {
return {
...slidesContainerStyle.value,
transform: `translateY(${sliderToBeShown.value * -100}%)`
};
}
return {
...slidesContainerStyle.value,
transform: `translateX(${sliderToBeShown.value * -100}%)`
};
});
const animator = {
isAnimating: false,
speed: 0.3,
order: [],
move(from, to) {
const last = props.items.length - 1;
const firstAfterLast = props.items.length;
if (to === 0 && from === last) {
this.order.push({ to: firstAfterLast });
this.order.push({ to: 0, animate: false });
} else if (to === last && from === 0) {
this.order.push({ to: firstAfterLast, animate: false });
this.order.push({ to });
} else {
this.order.push({ to });
}
if (!this.isAnimating) {
this.runAnimation();
}
},
runAnimation() {
this.isAnimating = true;
const animation = this.order.shift();
if (!animation) {
this.isAnimating = false;
return;
}
sliderToBeShown.value = animation == null ? void 0 : animation.to;
if (animation.animate || animation.animate === void 0) {
slidesContainerStyle.value.transition = `all ${this.speed}s linear`;
setTimeout(() => {
this.runAnimation();
}, this.speed * 1e3);
} else {
slidesContainerStyle.value.transition = "none";
setTimeout(() => {
this.runAnimation();
}, 16);
}
}
};
watch(currentSlide, (newValue, oldValue) => {
animator.move(oldValue, newValue);
});
const slides = computed(() => {
if (props.effect === "fade") {
return [props.items[currentSlide.value]];
}
if (props.infinite || props.autoscroll) {
return [...props.items, props.items[0]];
}
return props.items;
});
return {
start,
pause,
stop,
withPause,
computedSlidesStyle,
slides
};
};
export {
useCarouselAnimation as u
};
//# sourceMappingURL=useCarouselAnimation.js.map