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>
<slot name="subtitle" />
</div>
<div class="hidden sm:block" v-show="showScrollLeftButton">
<!-- <div class="hidden sm:block" v-show="showScrollLeftButton">
<button
@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"
>
<span class="">&lt;</span>
</button>
</div>
</div> -->
<div class="overflow-hidden">
<div
class="multi-card-event"
@ -53,54 +53,54 @@ const emit = defineEmits(["doGeoLoc"]);
const { t } = useI18n({ useScope: "global" });
const showScrollRightButton = ref(true);
const showScrollLeftButton = ref(false);
// const showScrollRightButton = ref(true);
// const showScrollLeftButton = ref(false);
const scrollContainer = ref<any>();
// const scrollContainer = ref<any>();
const scrollHandler = () => {
if (scrollContainer.value) {
showScrollRightButton.value =
scrollContainer.value.scrollLeft <
scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth;
showScrollLeftButton.value = scrollContainer.value.scrollLeft > 0;
}
};
// const scrollHandler = () => {
// if (scrollContainer.value) {
// showScrollRightButton.value =
// scrollContainer.value.scrollLeft <
// scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth;
// showScrollLeftButton.value = scrollContainer.value.scrollLeft > 0;
// }
// };
const doScroll = (e: Event, left: number) => {
e.preventDefault();
if (scrollContainer.value) {
scrollContainer.value.scrollBy({
left,
behavior: "smooth",
});
}
};
// const doScroll = (e: Event, left: number) => {
// e.preventDefault();
// if (scrollContainer.value) {
// scrollContainer.value.scrollBy({
// left,
// behavior: "smooth",
// });
// }
// };
const scrollLeft = (e: Event) => {
doScroll(e, -300);
};
// const scrollLeft = (e: Event) => {
// doScroll(e, -300);
// };
const scrollRight = (e: Event) => {
doScroll(e, 300);
};
// const scrollRight = (e: Event) => {
// doScroll(e, 300);
// };
const scrollHorizontalToVertical = (evt: WheelEvent) => {
evt.deltaY > 0 ? doScroll(evt, 300) : doScroll(evt, -300);
};
// const scrollHorizontalToVertical = (evt: WheelEvent) => {
// evt.deltaY > 0 ? doScroll(evt, 300) : doScroll(evt, -300);
// };
onMounted(async () => {
scrollContainer.value.addEventListener("wheel", scrollHorizontalToVertical);
});
// onMounted(async () => {
// scrollContainer.value.addEventListener("wheel", scrollHorizontalToVertical);
// });
onUnmounted(() => {
if (scrollContainer.value) {
scrollContainer.value.removeEventListener(
"wheel",
scrollHorizontalToVertical
);
}
});
// onUnmounted(() => {
// if (scrollContainer.value) {
// scrollContainer.value.removeEventListener(
// "wheel",
// scrollHorizontalToVertical
// );
// }
// });
</script>
<style lang="scss" scoped>