zz-shopify-components 0.0.27 → 0.0.28-beta.2

package/assets/zz-world-video-dialog.js

@@ -1,190 +1,190 @@
-class WorldVideoDialog extends HTMLElement {
-  isInitOpen = true;
-  swiper = null; // swiper实例
-
-  constructor() {
-    super();
-    this.init();
-  }
-
-  init() {
-    this.initData();
-    document.addEventListener('DOMContentLoaded', () => {
-      this.initEvent();
-    });
-  }
-
-  initEvent() {
-    const closeBtn = this.querySelector('.close-modal-btn');
-    closeBtn.addEventListener('click', () => {
-      this.closeModal();
-    });
-  }
-  initData() {
-    this.x1Img = this.dataset.x1Img;
-    this.x1ProImg = this.dataset.x1proImg;
-    this.x1Links = this.dataset.x1Links;
-    this.x1ProLinks = this.dataset.x1proLinks;
-  }
-
-  // 初始化
-  initSwiper() {
-    const swiperContainer = this.querySelector('.video-page-swiper');
-    if (swiperContainer) {
-      const isDesktop = window.innerWidth >= 1024;
-      this.swiper = new Swiper(swiperContainer, {
-        direction: isDesktop ? 'horizontal' : 'vertical',
-        navigation: {
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev',
-        },
-        virtual: {
-          slides: [],
-        },
-        slidesPerView: 1,
-        spaceBetween: 0,
-        allowTouchMove: isDesktop ? false : true, // 禁用Swiper的触摸/拖动
-        preventInteractionOnTransition: false,
-        touchStartPreventDefault: false,
-        touchMoveStopPropagation: false,
-        on: {
-          slideChangeTransitionEnd: () => {
-            this.handleVideoOnSlideChange();
-          },
-          slideChange: () => {
-            const currentIndex = this.swiper.activeIndex;
-            if (currentIndex === this.swiper.virtual.slides.length - 1) {
-              // 滑到最后一条，加载下一页数据
-              const wordList = document.querySelector('world-video-list');
-              if (wordList) {
-                wordList.loadNextPage();
-              }
-            }
-          },
-        },
-      });
-      this.isInitOpen = true;
-    }
-  }
-
-  handleVideoOnSlideChange() {
-    // 暂停所有视频
-    this.parseVideo();
-    // 播放当前 active slide 中的视频
-    const activeSlide = this.querySelector('.swiper-slide-active');
-    const video = activeSlide.querySelector('.word-slide-lazy-video');
-    if (video) {
-      video.play().catch((err) => {
-        console.error('视频播放失败', err);
-        video.pause();
-      });
-    }
-  }
-  parseVideo() {
-    // 暂停所有视频
-    const allVideos = this.querySelectorAll('.word-slide-lazy-video');
-    allVideos.forEach((video) => {
-      video.pause();
-    });
-  }
-  updateSlide(data, productType, isInit = false) {
-    const template = $('#video-swiper-slide').html();
-    if (isInit) {
-      this.destroySwiper();
-      this.initSwiper();
-    }
-    data.forEach((item) => {
-      let replacedTemplate = template
-        .replace(new RegExp('{video-url}', 'g'), item.videoUrl)
-        .replace(new RegExp('{poster-url}', 'g'), item.pictureUrl)
-        .replace(
-          new RegExp('{avatar}', 'g'),
-          item.userInfo && item.userInfo.avatar
-        )
-        .replace(
-          new RegExp('{nickname}', 'g'),
-          item.userInfo && item.userInfo.nickname
-        )
-        .replace(new RegExp('{content}', 'g'), item.content)
-        .replace(new RegExp('{likeCount}', 'g'), item.likeCount)
-        .replace(new RegExp('{commentCount}', 'g'), item.commentCount)
-        .replace(new RegExp('{mediaId}', 'g'), item.id);
-      if (productType === 1) {
-        replacedTemplate = replacedTemplate
-          .replace(new RegExp('{product-links}', 'g'), this.x1Links)
-          .replace(new RegExp('{product-icon}', 'g'), this.x1Img)
-          .replace(new RegExp('{product-type}', 'g'), '130');
-      } else if (productType === 4) {
-        replacedTemplate = replacedTemplate
-          .replace(new RegExp('{product-links}', 'g'), this.x1ProLinks)
-          .replace(new RegExp('{product-icon}', 'g'), this.x1ProImg)
-          .replace(new RegExp('{product-type}', 'g'), '141');
-      }
-      this.swiper.virtual.slides.push(replacedTemplate);
-    });
-    this.swiper.virtual.update();
-  }
-  // 销毁
-  destroySwiper() {
-    if (this.swiper) {
-      // 完全销毁swiper，包括所有事件监听器和DOM元素
-      const swiperWrapper = this.querySelector('.swiper-wrapper');
-      if (!swiperWrapper) return;
-      // 找到swiper-wrapper 清空
-      swiperWrapper.innerHTML = '';
-      this.swiper.destroy(true, true);
-      this.swiper = null;
-    }
-  }
-  // 虚拟列表播放视频
-  playVideo() {
-    setTimeout(() => {
-      this.handleVideoOnSlideChange();
-    }, 200);
-  }
-  showModal(videoIndex) {
-    const modal = this.querySelector('#world-video-modal');
-    const mask = this.querySelector('#world-video-modalMask');
-    const body = document.body;
-    modal.style.display = 'block';
-    mask.style.display = 'block';
-    setTimeout(() => {
-      modal.classList.add('show');
-    }, 10);
-    body.classList.add('modal-open');
-    // 滑到固定位置
-    if (this.isInitOpen) {
-      // 是否是初始化后第一次打开
-      videoIndex && this.swiper.slideTo(videoIndex);
-    } else {
-      this.swiper.slideTo(videoIndex);
-    }
-    this.isInitOpen = false;
-    this.playVideo();
-    dataLayer.push({
-      event: 'world_video_dialog_open',
-      timestamp: new Date().toISOString(),
-    });
-  }
-  closeModal() {
-    const modal = this.querySelector('#world-video-modal');
-    const mask = this.querySelector('#world-video-modalMask');
-    const body = document.body;
-    modal.classList.remove('show');
-    setTimeout(() => {
-      modal.style.display = 'none';
-      mask.style.display = 'none';
-      this.parseVideo();
-    }, 200);
-    body.classList.remove('modal-open');
-  }
-
-  closeTouchMove() {
-    this.swiper.allowTouchMove = false;
-  }
-  openTouchMove() {
-    this.swiper.allowTouchMove = true;
-  }
-}
-
-customElements.define('world-video-dialog', WorldVideoDialog);
+class WorldVideoDialog extends HTMLElement {
+  isInitOpen = true;
+  swiper = null; // swiper实例
+
+  constructor() {
+    super();
+    this.init();
+  }
+
+  init() {
+    this.initData();
+    document.addEventListener('DOMContentLoaded', () => {
+      this.initEvent();
+    });
+  }
+
+  initEvent() {
+    const closeBtn = this.querySelector('.close-modal-btn');
+    closeBtn.addEventListener('click', () => {
+      this.closeModal();
+    });
+  }
+  initData() {
+    this.x1Img = this.dataset.x1Img;
+    this.x1ProImg = this.dataset.x1proImg;
+    this.x1Links = this.dataset.x1Links;
+    this.x1ProLinks = this.dataset.x1proLinks;
+  }
+
+  // 初始化
+  initSwiper() {
+    const swiperContainer = this.querySelector('.video-page-swiper');
+    if (swiperContainer) {
+      const isDesktop = window.innerWidth >= 1024;
+      this.swiper = new Swiper(swiperContainer, {
+        direction: isDesktop ? 'horizontal' : 'vertical',
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+        virtual: {
+          slides: [],
+        },
+        slidesPerView: 1,
+        spaceBetween: 0,
+        allowTouchMove: isDesktop ? false : true, // 禁用Swiper的触摸/拖动
+        preventInteractionOnTransition: false,
+        touchStartPreventDefault: false,
+        touchMoveStopPropagation: false,
+        on: {
+          slideChangeTransitionEnd: () => {
+            this.handleVideoOnSlideChange();
+          },
+          slideChange: () => {
+            const currentIndex = this.swiper.activeIndex;
+            if (currentIndex === this.swiper.virtual.slides.length - 1) {
+              // 滑到最后一条，加载下一页数据
+              const wordList = document.querySelector('world-video-list');
+              if (wordList) {
+                wordList.loadNextPage();
+              }
+            }
+          },
+        },
+      });
+      this.isInitOpen = true;
+    }
+  }
+
+  handleVideoOnSlideChange() {
+    // 暂停所有视频
+    this.parseVideo();
+    // 播放当前 active slide 中的视频
+    const activeSlide = this.querySelector('.swiper-slide-active');
+    const video = activeSlide.querySelector('.word-slide-lazy-video');
+    if (video) {
+      video.play().catch((err) => {
+        console.error('视频播放失败', err);
+        video.pause();
+      });
+    }
+  }
+  parseVideo() {
+    // 暂停所有视频
+    const allVideos = this.querySelectorAll('.word-slide-lazy-video');
+    allVideos.forEach((video) => {
+      video.pause();
+    });
+  }
+  updateSlide(data, productType, isInit = false) {
+    const template = $('#video-swiper-slide').html();
+    if (isInit) {
+      this.destroySwiper();
+      this.initSwiper();
+    }
+    data.forEach((item) => {
+      let replacedTemplate = template
+        .replace(new RegExp('{video-url}', 'g'), item.videoUrl)
+        .replace(new RegExp('{poster-url}', 'g'), item.pictureUrl)
+        .replace(
+          new RegExp('{avatar}', 'g'),
+          item.userInfo && item.userInfo.avatar
+        )
+        .replace(
+          new RegExp('{nickname}', 'g'),
+          item.userInfo && item.userInfo.nickname
+        )
+        .replace(new RegExp('{content}', 'g'), item.content)
+        .replace(new RegExp('{likeCount}', 'g'), item.likeCount)
+        .replace(new RegExp('{commentCount}', 'g'), item.commentCount)
+        .replace(new RegExp('{mediaId}', 'g'), item.id);
+      if (productType === 1) {
+        replacedTemplate = replacedTemplate
+          .replace(new RegExp('{product-links}', 'g'), this.x1Links)
+          .replace(new RegExp('{product-icon}', 'g'), this.x1Img)
+          .replace(new RegExp('{product-type}', 'g'), '130');
+      } else if (productType === 4) {
+        replacedTemplate = replacedTemplate
+          .replace(new RegExp('{product-links}', 'g'), this.x1ProLinks)
+          .replace(new RegExp('{product-icon}', 'g'), this.x1ProImg)
+          .replace(new RegExp('{product-type}', 'g'), '141');
+      }
+      this.swiper.virtual.slides.push(replacedTemplate);
+    });
+    this.swiper.virtual.update();
+  }
+  // 销毁
+  destroySwiper() {
+    if (this.swiper) {
+      // 完全销毁swiper，包括所有事件监听器和DOM元素
+      const swiperWrapper = this.querySelector('.swiper-wrapper');
+      if (!swiperWrapper) return;
+      // 找到swiper-wrapper 清空
+      swiperWrapper.innerHTML = '';
+      this.swiper.destroy(true, true);
+      this.swiper = null;
+    }
+  }
+  // 虚拟列表播放视频
+  playVideo() {
+    setTimeout(() => {
+      this.handleVideoOnSlideChange();
+    }, 200);
+  }
+  showModal(videoIndex) {
+    const modal = this.querySelector('#world-video-modal');
+    const mask = this.querySelector('#world-video-modalMask');
+    const body = document.body;
+    modal.style.display = 'block';
+    mask.style.display = 'block';
+    setTimeout(() => {
+      modal.classList.add('show');
+    }, 10);
+    body.classList.add('modal-open');
+    // 滑到固定位置
+    if (this.isInitOpen) {
+      // 是否是初始化后第一次打开
+      videoIndex && this.swiper.slideTo(videoIndex);
+    } else {
+      this.swiper.slideTo(videoIndex);
+    }
+    this.isInitOpen = false;
+    this.playVideo();
+    dataLayer.push({
+      event: 'world_video_dialog_open',
+      timestamp: new Date().toISOString(),
+    });
+  }
+  closeModal() {
+    const modal = this.querySelector('#world-video-modal');
+    const mask = this.querySelector('#world-video-modalMask');
+    const body = document.body;
+    modal.classList.remove('show');
+    setTimeout(() => {
+      modal.style.display = 'none';
+      mask.style.display = 'none';
+      this.parseVideo();
+    }, 200);
+    body.classList.remove('modal-open');
+  }
+
+  closeTouchMove() {
+    this.swiper.allowTouchMove = false;
+  }
+  openTouchMove() {
+    this.swiper.allowTouchMove = true;
+  }
+}
+
+customElements.define('world-video-dialog', WorldVideoDialog);