Merge pull request #137 from IBEC-BOX/fix/slider

fix variable undefined in slider when page reload[2]
IBEC-BOX · Nov 7, 2024 · cc7f0f5 · cc7f0f5
2 parents 8212811 + b1662ad
commit cc7f0f5
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 58 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ibecsystems/nuxt3-ui-kit",
-  "version": "1.0.51",
+  "version": "1.0.52",
   "description": "Ibec Nuxt3 UI components",
   "repository": {
     "type": "git",

diff --git a/src/runtime/components/Parts/Slider.vue b/src/runtime/components/Parts/Slider.vue
@@ -432,25 +432,24 @@ const props = defineProps({
 });
 
 const slider = ref(null);
-
 const activeSlide = ref(0);
-const pagination = ref(props.slides);
+const pagination = ref(props.slides || []);
 
 const slideTo = (index) => {
   if (slider.value !== null) {
     slider.value.swiper.slideTo(index);
   }
 };
 
-const slidePrev = () => {
-  if (slider.value && slider.value.swiper) {
-    slider.value.swiper.slidePrev(500);
+const slideNext = () => {
+  if (slider.value?.swiper) {
+    slider.value.swiper.slideNext(500);
   }
 };
 
-const slideNext = () => {
-  if (slider.value && slider.value.swiper) {
-    slider.value.swiper.slideNext(500);
+const slidePrev = () => {
+  if (slider.value?.swiper) {
+    slider.value.swiper.slidePrev(500);
   }
 };
 
@@ -465,70 +464,56 @@ const updatePagination = () => {
 };
 
 const handleWheel = (event) => {
-  if (!slider.value || !props.controlScroll) return;
-
-  const isAtStart = slider.value.swiper.isBeginning;
-  const isAtEnd = slider.value.swiper.isEnd;
+  if (!slider.value?.swiper || !props.controlScroll) return;
 
-  if ((!isAtStart && event.deltaY < 0) || (!isAtEnd && event.deltaY > 0)) {
+  const swiperInstance = slider.value.swiper;
+  if ((!swiperInstance.isBeginning && event.deltaY < 0) || (!swiperInstance.isEnd && event.deltaY > 0)) {
     event.preventDefault();
-    if (event.deltaY > 0) {
-      slider.value.swiper.slideNext();
-    } else {
-      slider.value.swiper.slidePrev();
-    }
+    event.deltaY > 0 ? swiperInstance.slideNext(500) : swiperInstance.slidePrev(500);
   }
 };
 
-let lastScrollPosition = 0;
-
-if(typeof window !== 'undefined') {
-  lastScrollPosition = window.pageYOffset
-}
-
 const handleScroll = () => {
-  if (!slider.value || typeof window === 'undefined' || !props.controlScroll) return;
+  if (!slider.value?.swiper || !props.controlScroll) return;
 
-  const currentScrollPosition = window.pageYOffset;
-  const direction = currentScrollPosition > lastScrollPosition ? 'down' : 'up';
+  const direction = window.pageYOffset > lastScrollPosition ? 'down' : 'up';
+  direction === 'down' ? slider.value.swiper.slideNext() : slider.value.swiper.slidePrev();
+  lastScrollPosition = window.pageYOffset;
+};
 
-  if (direction === 'down') {
-    slider.value.swiper.slideNext();
+const manageEventListeners = (addListeners) => {
+  if (addListeners) {
+    window.addEventListener('wheel', handleWheel, { passive: false });
+    window.addEventListener('scroll', handleScroll, { passive: true });
   } else {
-    slider.value.swiper.slidePrev();
+    window.removeEventListener('wheel', handleWheel);
+    window.removeEventListener('scroll', handleScroll);
   }
-
-  lastScrollPosition = currentScrollPosition;
 };
 
-watch(() => props.controlScroll, (newValue) => {
-  if(props.controlScroll) {
-    if (newValue) {
-      window.addEventListener('wheel', handleWheel, { passive: false });
-      window.addEventListener('scroll', handleScroll, { passive: true });
-    } else {
-      window.removeEventListener('wheel', handleWheel);
-      window.removeEventListener('scroll', handleScroll);
-    }
-  }
-}, { immediate: true });
-
-const zoomStyle = computed(() => ({
-  transform: activeSlide.value === 1 ? `scale(${props.sliderBackgroundImageZoomScale})` : 'scale(1)',
-  transition: 'transform 0.3s ease-in-out',
-}));
-
-onMounted(() => {
-  if(!slider.value) return
-  activeSlide.value = slider?.value?.swiper?.realIndex;
-  if (pagination.value.length > 0) {
-    pagination.value[0].active = true;
+let lastScrollPosition = window.pageYOffset;
+
+watch(
+  () => props.controlScroll,
+  (newValue) => manageEventListeners(newValue),
+  { immediate: true }
+);
+
+watch(() => props.slides, (newSlides) => {
+  if (slider.value?.swiper) {
+    slider.value.swiper.update();
   }
 });
 
+onMounted(async () => {
+  activeSlide.value = slider.value?.swiper?.realIndex;
+  if (pagination.value.length > 0) pagination.value[0].active = true;
+});
+
 onUnmounted(() => {
-  if (props.controlScroll) {
-    window.removeEventListener('wheel', handleScroll);
+  manageEventListeners(false);
+  if (slider.value?.swiper && !slider.value.swiper.destroyed) {
+    slider.value.swiper.destroy();
   }
 });
 </script>

diff --git a/src/runtime/plugin.ts b/src/runtime/plugin.ts
@@ -10,5 +10,5 @@ export default defineNuxtPlugin(nuxtApp => {
   nuxtApp.vueApp.use(vuetifyInstance);
   nuxtApp.vueApp.directive("maska", vMaska);
 
-  if (!process.server) console.log('❤️ Initialized Vuetify 3', vuetifyInstance);
+  if (!process.server && process.env.NODE_ENV !== 'production') console.log('❤️ Initialized Vuetify 3', vuetifyInstance);
 });