Things commented out which in my opinion are no longer needed 6bcff6d1ae

This commit is contained in:
johndoe4 2023-05-22 00:52:05 +02:00
parent 04e7a2e02d
commit be8a206b0d

View file

@ -19,14 +19,14 @@
</div> </div>
<slot name="subtitle" /> <slot name="subtitle" />
</div> </div>
<div class="hidden sm:block" v-show="showScrollLeftButton"> <!-- <div class="hidden sm:block" v-show="showScrollLeftButton">
<button <button
@click="scrollLeft" @click="scrollLeft"
class="absolute inset-y-0 my-auto z-10 rounded-full bg-white dark:bg-transparent w-10 h-10 border border-shadowColor -left-5" class="absolute inset-y-0 my-auto z-10 rounded-full bg-white dark:bg-transparent w-10 h-10 border border-shadowColor -left-5"
> >
<span class="">&lt;</span> <span class="">&lt;</span>
</button> </button>
</div> </div> -->
<div class="overflow-hidden"> <div class="overflow-hidden">
<div <div
class="multi-card-event" class="multi-card-event"
@ -53,54 +53,54 @@ const emit = defineEmits(["doGeoLoc"]);
const { t } = useI18n({ useScope: "global" }); const { t } = useI18n({ useScope: "global" });
const showScrollRightButton = ref(true); // const showScrollRightButton = ref(true);
const showScrollLeftButton = ref(false); // const showScrollLeftButton = ref(false);
const scrollContainer = ref<any>(); // const scrollContainer = ref<any>();
const scrollHandler = () => { // const scrollHandler = () => {
if (scrollContainer.value) { // if (scrollContainer.value) {
showScrollRightButton.value = // showScrollRightButton.value =
scrollContainer.value.scrollLeft < // scrollContainer.value.scrollLeft <
scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth; // scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth;
showScrollLeftButton.value = scrollContainer.value.scrollLeft > 0; // showScrollLeftButton.value = scrollContainer.value.scrollLeft > 0;
} // }
}; // };
const doScroll = (e: Event, left: number) => { // const doScroll = (e: Event, left: number) => {
e.preventDefault(); // e.preventDefault();
if (scrollContainer.value) { // if (scrollContainer.value) {
scrollContainer.value.scrollBy({ // scrollContainer.value.scrollBy({
left, // left,
behavior: "smooth", // behavior: "smooth",
}); // });
} // }
}; // };
const scrollLeft = (e: Event) => { // const scrollLeft = (e: Event) => {
doScroll(e, -300); // doScroll(e, -300);
}; // };
const scrollRight = (e: Event) => { // const scrollRight = (e: Event) => {
doScroll(e, 300); // doScroll(e, 300);
}; // };
const scrollHorizontalToVertical = (evt: WheelEvent) => { // const scrollHorizontalToVertical = (evt: WheelEvent) => {
evt.deltaY > 0 ? doScroll(evt, 300) : doScroll(evt, -300); // evt.deltaY > 0 ? doScroll(evt, 300) : doScroll(evt, -300);
}; // };
onMounted(async () => { // onMounted(async () => {
scrollContainer.value.addEventListener("wheel", scrollHorizontalToVertical); // scrollContainer.value.addEventListener("wheel", scrollHorizontalToVertical);
}); // });
onUnmounted(() => { // onUnmounted(() => {
if (scrollContainer.value) { // if (scrollContainer.value) {
scrollContainer.value.removeEventListener( // scrollContainer.value.removeEventListener(
"wheel", // "wheel",
scrollHorizontalToVertical // scrollHorizontalToVertical
); // );
} // }
}); // });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>