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

package/assets/zz-components.js

@@ -1,166 +1,166 @@
-class ZZRadioTabsItem extends HTMLElement {
-  constructor() {
-    super();
-  }
-
-  connectedCallback() {
-    // 创建radio input
-    const groupName =
-      this.closest('zz-radio-tabs')?.getAttribute('name') || 'option';
-    const type =
-      this.closest('zz-radio-tabs')?.getAttribute('type') || 'default';
-    const value = this.getAttribute('value') || '';
-    const slot = this.innerHTML;
-    this.innerHTML = `
-      <label class="zz-radio-tabs-wrapper">
-        <input type="radio" name=${groupName} value=${value}>
-        <div class="zz-radio-tabs-label">
-            ${slot}
-        </div>
-      </label>
-    `;
-  }
-}
-
-/**
- * type: default, black 两种风格模式
- */
-class ZZRadioTabs extends HTMLElement {
-  constructor() {
-    super();
-  }
-  connectedCallback() {
-    // 获取组件的type属性
-    const type = this.getAttribute('type') || 'default';
-    // 给自己加class
-    this.classList.add('zz-radio-tabs');
-    this.classList.add(`zz-radio-tabs-${type}`);
-  }
-
-  get value() {
-    const selectedRadio = this.querySelector('input[type="radio"]:checked');
-    return selectedRadio?.value;
-  }
-
-  set value(val) {
-    const radio = this.querySelector(`input[type="radio"][value="${val}"]`);
-    if (radio) {
-      radio.checked = true;
-    }
-  }
-}
-
-// 注册自定义元素
-customElements.define('zz-radio-tabs-item', ZZRadioTabsItem);
-customElements.define('zz-radio-tabs', ZZRadioTabs);
-
-// 页面加载完成后执行
-document.addEventListener('DOMContentLoaded', function () {
-  // 点击视频播放/暂停
-  // 在 video 标签上添加 class='click-video-play-pause' 即可
-  (function () {
-    const videoPlayAndPause = document.querySelectorAll(
-      '.click-video-play-pause'
-    );
-    videoPlayAndPause.forEach((video) => {
-      video.classList.remove('video-play-pause');
-      video.addEventListener('click', function () {
-        if (this.paused) {
-          this.play();
-        } else {
-          this.pause();
-        }
-      });
-    });
-  })();
-});
-/**
- * 视频按钮+弹窗
- */
-class ZZVideoBtn extends HTMLElement {
-  constructor() {
-    super();
-    this.togglePopup = this.togglePopup.bind(this);
-    this.popup = null;
-  }
-
-  connectedCallback() {
-    this.querySelectorAll('.togglePopup').forEach((el) => {
-      el.addEventListener('click', (event) => {
-        console.log('click');
-        if (event.target.tagName !== 'VIDEO') {
-          this.togglePopup();
-        }
-      });
-    });
-    this.popup = this.querySelector('.popup');
-
-    if (this.popup) {
-      // 将 popup 移动到 body
-      document.body.appendChild(this.popup);
-    } else {
-      console.error('Popup element not found.');
-    }
-  }
-
-  disconnectedCallback() {
-    if (this.popup && document.body.contains(this.popup)) {
-      document.body.removeChild(this.popup); // 清理 popup 元素
-    }
-  }
-
-  togglePopup() {
-    if (!this.popup) return;
-
-    const isHidden = this.popup.classList.contains('!tw-hidden');
-
-    if (isHidden) {
-      this.showPopup();
-    } else {
-      this.hidePopup();
-    }
-  }
-
-  showPopup() {
-    if (!this.popup) return;
-
-    this.popup.classList.remove('!tw-hidden');
-    gsap.fromTo(
-      this.popup,
-      { opacity: 0 },
-      {
-        opacity: 1,
-        duration: 0.3,
-        ease: 'linear',
-        backdropFilter: 'blur(30px)',
-        onComplete: () => {
-          const video = this.popup.querySelector('video');
-          if (video) {
-            video.play();
-          }
-        },
-      }
-    );
-  }
-
-  hidePopup() {
-    if (!this.popup) return;
-
-    gsap.to(this.popup, {
-      opacity: 0,
-      duration: 0.3,
-      ease: 'linear',
-      onComplete: () => {
-        this.popup.classList.add('!tw-hidden');
-        const video = this.popup.querySelector('video');
-        if (video) {
-          video.pause();
-        }
-      },
-    });
-  }
-}
-
-if (!customElements.get('zz-video-button')) {
-  customElements.define('zz-video-button', ZZVideoBtn);
-}
+class ZZRadioTabsItem extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    // 创建radio input
+    const groupName =
+      this.closest('zz-radio-tabs')?.getAttribute('name') || 'option';
+    const type =
+      this.closest('zz-radio-tabs')?.getAttribute('type') || 'default';
+    const value = this.getAttribute('value') || '';
+    const slot = this.innerHTML;
+    this.innerHTML = `
+      <label class="zz-radio-tabs-wrapper">
+        <input type="radio" name=${groupName} value=${value}>
+        <div class="zz-radio-tabs-label">
+            ${slot}
+        </div>
+      </label>
+    `;
+  }
+}
+
+/**
+ * type: default, black 两种风格模式
+ */
+class ZZRadioTabs extends HTMLElement {
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    // 获取组件的type属性
+    const type = this.getAttribute('type') || 'default';
+    // 给自己加class
+    this.classList.add('zz-radio-tabs');
+    this.classList.add(`zz-radio-tabs-${type}`);
+  }
+
+  get value() {
+    const selectedRadio = this.querySelector('input[type="radio"]:checked');
+    return selectedRadio?.value;
+  }
+
+  set value(val) {
+    const radio = this.querySelector(`input[type="radio"][value="${val}"]`);
+    if (radio) {
+      radio.checked = true;
+    }
+  }
+}
+
+// 注册自定义元素
+customElements.define('zz-radio-tabs-item', ZZRadioTabsItem);
+customElements.define('zz-radio-tabs', ZZRadioTabs);
+
+// 页面加载完成后执行
+document.addEventListener('DOMContentLoaded', function () {
+  // 点击视频播放/暂停
+  // 在 video 标签上添加 class='click-video-play-pause' 即可
+  (function () {
+    const videoPlayAndPause = document.querySelectorAll(
+      '.click-video-play-pause'
+    );
+    videoPlayAndPause.forEach((video) => {
+      video.classList.remove('video-play-pause');
+      video.addEventListener('click', function () {
+        if (this.paused) {
+          this.play();
+        } else {
+          this.pause();
+        }
+      });
+    });
+  })();
+});
+/**
+ * 视频按钮+弹窗
+ */
+class ZZVideoBtn extends HTMLElement {
+  constructor() {
+    super();
+    this.togglePopup = this.togglePopup.bind(this);
+    this.popup = null;
+  }
+
+  connectedCallback() {
+    this.querySelectorAll('.togglePopup').forEach((el) => {
+      el.addEventListener('click', (event) => {
+        console.log('click');
+        if (event.target.tagName !== 'VIDEO') {
+          this.togglePopup();
+        }
+      });
+    });
+    this.popup = this.querySelector('.popup');
+
+    if (this.popup) {
+      // 将 popup 移动到 body
+      document.body.appendChild(this.popup);
+    } else {
+      console.error('Popup element not found.');
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.popup && document.body.contains(this.popup)) {
+      document.body.removeChild(this.popup); // 清理 popup 元素
+    }
+  }
+
+  togglePopup() {
+    if (!this.popup) return;
+
+    const isHidden = this.popup.classList.contains('!tw-hidden');
+
+    if (isHidden) {
+      this.showPopup();
+    } else {
+      this.hidePopup();
+    }
+  }
+
+  showPopup() {
+    if (!this.popup) return;
+
+    this.popup.classList.remove('!tw-hidden');
+    gsap.fromTo(
+      this.popup,
+      { opacity: 0 },
+      {
+        opacity: 1,
+        duration: 0.3,
+        ease: 'linear',
+        backdropFilter: 'blur(30px)',
+        onComplete: () => {
+          const video = this.popup.querySelector('video');
+          if (video) {
+            video.play();
+          }
+        },
+      }
+    );
+  }
+
+  hidePopup() {
+    if (!this.popup) return;
+
+    gsap.to(this.popup, {
+      opacity: 0,
+      duration: 0.3,
+      ease: 'linear',
+      onComplete: () => {
+        this.popup.classList.add('!tw-hidden');
+        const video = this.popup.querySelector('video');
+        if (video) {
+          video.pause();
+        }
+      },
+    });
+  }
+}
+
+if (!customElements.get('zz-video-button')) {
+  customElements.define('zz-video-button', ZZVideoBtn);
+}

package/assets/zz-fade-in-content.js

@@ -1,169 +1,169 @@
-document.addEventListener('DOMContentLoaded', () => {
-  gsap.registerPlugin(ScrollTrigger);
-
-  // 从下往上显示
-  (function () {
-    const fadeDom = document.querySelectorAll('.fade-in-content');
-    fadeDom.forEach((item) => {
-      gsap.from(item, {
-        scrollTrigger: {
-          trigger: item,
-          start: 'top 80%',
-          toggleActions: 'play none none reverse',
-          once: false, // 动画只播放一次
-        },
-        opacity: 0,
-        y: 80,
-        duration: 0.4,
-        ease: 'power2.out',
-      });
-    });
-  })();
-
-  // 从左往右显示
-  (function () {
-    const fadeDom = document.querySelectorAll('.fade-in-from-left-content');
-    fadeDom.forEach((item) => {
-      gsap.from(item, {
-        scrollTrigger: {
-          trigger: item,
-          start: 'top 80%',
-          toggleActions: 'play none none reverse',
-          once: false, // 动画只播放一次
-        },
-        opacity: 0,
-        x: -80,
-        duration: 0.4,
-        ease: 'power1.out',
-      });
-    });
-  })();
-
-  // 从右往左显示
-  (function () {
-    const fadeDom = document.querySelectorAll('.fade-in-from-right-content');
-    fadeDom.forEach((item) => {
-      gsap.from(item, {
-        scrollTrigger: {
-          trigger: item,
-          start: 'top 80%',
-          toggleActions: 'play none none reverse',
-          once: false, // 动画只播放一次
-        },
-        opacity: 0,
-        x: 80,
-        duration: 0.4,
-        ease: 'power1.out',
-      });
-    });
-  })();
-
-  // 跟随滚动缓慢显示
-  (function () {
-    const fadeDom = document.querySelectorAll('.slow-reveal-content');
-    fadeDom.forEach((item) => {
-      gsap.from(item, {
-        scrollTrigger: {
-          trigger: item,
-          start: 'top 80%',
-          end: 'top 60%',
-          toggleActions: 'play none none reverse',
-          scrub: 1, // 平滑跟随滚动
-        },
-        opacity: 1,
-        y: 100,
-        duration: 0.4,
-        ease: 'power1.out',
-      });
-    });
-  })();
-
-  // 按序从下显示(group)
-  const el = document.querySelectorAll('.fade-in-box');
-  el.forEach((item) => {
-    // 过滤出不包含 no-fade-in 类名的子元素
-    const children = Array.from(item.children).filter(
-      (child) => !child.classList.contains('no-fade-in')
-    );
-    gsap.from(children, {
-      scrollTrigger: {
-        trigger: item,
-        start: 'top 80%',
-        toggleActions: 'play none none reverse',
-        once: false, // 动画只播放一次
-      },
-      opacity: 0,
-      y: 80,
-      duration: 0.4,
-      stagger: 0.2,
-      ease: 'power2.out',
-    });
-  });
-
-  // 按序从左进入显示
-  const fromLeft = document.querySelectorAll('.fade-in-from-left');
-  fromLeft.forEach((item) => {
-    // 过滤出不包含 no-fade-in 类名的子元素
-    const children = Array.from(item.children).filter(
-      (child) => !child.classList.contains('no-fade-in')
-    );
-    gsap.from(children, {
-      scrollTrigger: {
-        trigger: item,
-        start: 'top 80%',
-        toggleActions: 'play none none reverse',
-        once: false, // 动画只播放一次
-      },
-      opacity: 0,
-      x: -80,
-      duration: 0.4,
-      stagger: 0.1,
-      ease: 'power1.out',
-    });
-  });
-
-  // 按序从右进入显示
-  const fromRight = document.querySelectorAll('.fade-in-from-right');
-  fromRight.forEach((item) => {
-    // 过滤出不包含 no-fade-in 类名的子元素
-    const children = Array.from(item.children).filter(
-      (child) => !child.classList.contains('no-fade-in')
-    );
-    gsap.from(children, {
-      scrollTrigger: {
-        trigger: item,
-        start: 'top 80%',
-        toggleActions: 'play none none reverse',
-        once: false,
-      },
-      opacity: 0,
-      x: 80,
-      duration: 0.4,
-      stagger: 0.1,
-      ease: 'power1.out',
-    });
-  });
-});
-
-// 跟随滚动缓慢显示
-const slowReveal = document.querySelectorAll('.slow-reveal');
-slowReveal.forEach((element) => {
-  // 过滤出不包含 no-fade-in 类名的子元素
-  const children = Array.from(element.children).filter(
-    (child) => !child.classList.contains('no-fade-in')
-  );
-  gsap.from(children, {
-    scrollTrigger: {
-      trigger: element,
-      start: 'top 80%',
-      end: 'top 60%',
-      scrub: 1, // 平滑跟随滚动
-      toggleActions: 'play none none reverse',
-    },
-    opacity: 1,
-    y: 100,
-    duration: 0.4,
-    stagger: 0.1,
-    ease: 'power1.out',
-  });
-});
+document.addEventListener('DOMContentLoaded', () => {
+  gsap.registerPlugin(ScrollTrigger);
+
+  // 从下往上显示
+  (function () {
+    const fadeDom = document.querySelectorAll('.fade-in-content');
+    fadeDom.forEach((item) => {
+      gsap.from(item, {
+        scrollTrigger: {
+          trigger: item,
+          start: 'top 80%',
+          toggleActions: 'play none none reverse',
+          once: false, // 动画只播放一次
+        },
+        opacity: 0,
+        y: 80,
+        duration: 0.4,
+        ease: 'power2.out',
+      });
+    });
+  })();
+
+  // 从左往右显示
+  (function () {
+    const fadeDom = document.querySelectorAll('.fade-in-from-left-content');
+    fadeDom.forEach((item) => {
+      gsap.from(item, {
+        scrollTrigger: {
+          trigger: item,
+          start: 'top 80%',
+          toggleActions: 'play none none reverse',
+          once: false, // 动画只播放一次
+        },
+        opacity: 0,
+        x: -80,
+        duration: 0.4,
+        ease: 'power1.out',
+      });
+    });
+  })();
+
+  // 从右往左显示
+  (function () {
+    const fadeDom = document.querySelectorAll('.fade-in-from-right-content');
+    fadeDom.forEach((item) => {
+      gsap.from(item, {
+        scrollTrigger: {
+          trigger: item,
+          start: 'top 80%',
+          toggleActions: 'play none none reverse',
+          once: false, // 动画只播放一次
+        },
+        opacity: 0,
+        x: 80,
+        duration: 0.4,
+        ease: 'power1.out',
+      });
+    });
+  })();
+
+  // 跟随滚动缓慢显示
+  (function () {
+    const fadeDom = document.querySelectorAll('.slow-reveal-content');
+    fadeDom.forEach((item) => {
+      gsap.from(item, {
+        scrollTrigger: {
+          trigger: item,
+          start: 'top 80%',
+          end: 'top 60%',
+          toggleActions: 'play none none reverse',
+          scrub: 1, // 平滑跟随滚动
+        },
+        opacity: 1,
+        y: 100,
+        duration: 0.4,
+        ease: 'power1.out',
+      });
+    });
+  })();
+
+  // 按序从下显示(group)
+  const el = document.querySelectorAll('.fade-in-box');
+  el.forEach((item) => {
+    // 过滤出不包含 no-fade-in 类名的子元素
+    const children = Array.from(item.children).filter(
+      (child) => !child.classList.contains('no-fade-in')
+    );
+    gsap.from(children, {
+      scrollTrigger: {
+        trigger: item,
+        start: 'top 80%',
+        toggleActions: 'play none none reverse',
+        once: false, // 动画只播放一次
+      },
+      opacity: 0,
+      y: 80,
+      duration: 0.4,
+      stagger: 0.2,
+      ease: 'power2.out',
+    });
+  });
+
+  // 按序从左进入显示
+  const fromLeft = document.querySelectorAll('.fade-in-from-left');
+  fromLeft.forEach((item) => {
+    // 过滤出不包含 no-fade-in 类名的子元素
+    const children = Array.from(item.children).filter(
+      (child) => !child.classList.contains('no-fade-in')
+    );
+    gsap.from(children, {
+      scrollTrigger: {
+        trigger: item,
+        start: 'top 80%',
+        toggleActions: 'play none none reverse',
+        once: false, // 动画只播放一次
+      },
+      opacity: 0,
+      x: -80,
+      duration: 0.4,
+      stagger: 0.1,
+      ease: 'power1.out',
+    });
+  });
+
+  // 按序从右进入显示
+  const fromRight = document.querySelectorAll('.fade-in-from-right');
+  fromRight.forEach((item) => {
+    // 过滤出不包含 no-fade-in 类名的子元素
+    const children = Array.from(item.children).filter(
+      (child) => !child.classList.contains('no-fade-in')
+    );
+    gsap.from(children, {
+      scrollTrigger: {
+        trigger: item,
+        start: 'top 80%',
+        toggleActions: 'play none none reverse',
+        once: false,
+      },
+      opacity: 0,
+      x: 80,
+      duration: 0.4,
+      stagger: 0.1,
+      ease: 'power1.out',
+    });
+  });
+});
+
+// 跟随滚动缓慢显示
+const slowReveal = document.querySelectorAll('.slow-reveal');
+slowReveal.forEach((element) => {
+  // 过滤出不包含 no-fade-in 类名的子元素
+  const children = Array.from(element.children).filter(
+    (child) => !child.classList.contains('no-fade-in')
+  );
+  gsap.from(children, {
+    scrollTrigger: {
+      trigger: element,
+      start: 'top 80%',
+      end: 'top 60%',
+      scrub: 1, // 平滑跟随滚动
+      toggleActions: 'play none none reverse',
+    },
+    opacity: 1,
+    y: 100,
+    duration: 0.4,
+    stagger: 0.1,
+    ease: 'power1.out',
+  });
+});