zz-shopify-components 0.0.1-beta.1

package/blocks/zz-full-screen-swiper.liquid

@@ -0,0 +1,444 @@
+{% assign block_size = block.blocks.size %}
+
+
+
+<style>
+  #shopify-block-{{block.id}} {
+    background: {{ block.settings.bg_color }};
+    width: 100vw;
+    height: 100vh;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+  }
+  #shopify-block-{{block.id}} .zz-full-screen-swiper {
+    width: 100vw;
+    height: 100vh;
+    box-sizing: border-box;
+    overflow: hidden;
+    height: fit-content;
+    position: relative;
+    letter-spacing: 0;
+  }
+ 
+  
+  #shopify-block-{{block.id}} .swiper-button-next:after,
+  #shopify-block-{{block.id}} .swiper-button-prev:after {
+    display: none;
+  }
+  #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets {
+    bottom: 30px;
+  }
+ 
+  #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+    margin: 0 4px;
+    width: 24px;
+    height: 3px;
+    border-radius: 3px;
+    background: {{ block.settings.pagination_color | color_modify: 'alpha', 0.3 }};
+    opacity: 1;
+    transition: 0.3s;
+  }
+  #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
+    position: relative;
+    width: 48px;
+  }
+  #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active .progress-line {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    background-color: {{ block.settings.pagination_color }};
+    border-radius: 3px;
+    height: 3px;
+  }
+
+  @media screen and (max-width: 1023px) {
+    #shopify-block-{{block.id}} .swiper-button-next,
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      display: none;
+    }
+  }
+  @media screen and (min-width: 1024px) {
+   
+    #shopify-block-{{block.id}} .swiper-button-next,
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      width: 48px;
+      height: 48px;
+    }
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      left: 20px;
+      top: 50%;
+      right: unset;
+      transform:translateY(-50%);
+    }
+    #shopify-block-{{block.id}} .swiper-button-next {
+      right: 20px;
+      left: unset;
+      top: 50%;
+      transform:translateY(-50%);
+    }
+    #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+      margin: 0 8px;
+      width: 48px;
+      height: 4px;
+      border-radius: 3px;
+    }
+    #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
+      width: 120px;
+    }
+    #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active .progress-line {
+      height: 4px;
+      border-radius: 3px;
+    }
+  }
+
+</style>
+
+
+ 
+  <div 
+    class='zz-full-screen-swiper zz-full-screen-swiper-{{ block.id }}'
+  >
+    <div class='zz-swiper-wrapper'>
+      {% content_for 'blocks' %}
+    </div>
+
+    <!-- If we need navigation buttons -->
+    <div class='swiper-button-prev {% if block_size <= 1 %} tw-hidden {% endif %}'>
+
+        {% render 'zz-prev-next-btn', type: 'prev', color_type: block.settings.prev_next_type %}
+    </div>
+    <div class='swiper-button-next {% if block_size <= 1 %} tw-hidden {% endif %}'>
+      {% render 'zz-prev-next-btn', type: 'next', color_type: block.settings.prev_next_type %}
+    </div>
+
+    <!-- Pagination indicator -->
+    <div class='swiper-pagination'></div>
+  </div>
+
+
+<script>
+  
+  document.addEventListener('DOMContentLoaded', function () {
+    const block = document.getElementById(
+      'shopify-block-{{block.id}}'
+    );
+
+    const swiperWrapper = block.querySelector('.zz-swiper-wrapper');
+    // 获取当前 swiper-wrapper 下面 所有 第一层 div 
+    const swiperSlides = swiperWrapper.querySelectorAll(':scope > div');
+    // 给每个 swiper-slide 添加 class swiper-slide
+    swiperSlides.forEach(slide => {
+      slide.classList.add('swiper-slide');
+    });
+    swiperWrapper.classList.add('swiper-wrapper');
+    let progressTimer = null;
+    const swiperClassName = '.zz-full-screen-swiper-{{ block.id }}';
+    const fullScreenSwiper = new Swiper(swiperClassName, {
+      loop: true,
+      slidesPerView: 1,
+      centeredSlides: true,
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+        renderBullet: function (index, className) {
+          return `
+          <span class="${className}">
+            <span class="progress-line"></span>
+          </span>`;
+        },
+      },
+      effect: 'slide',
+      on: {
+        slideChangeTransitionEnd: function () {
+          block.querySelectorAll(".swiper-pagination-bullet").forEach((bullet) => {
+            console.log('do reset')
+            const progressBar = bullet.querySelector(".progress-line");
+            progressBar.style.transition = "none";
+            progressBar.style.width = "0";
+          });
+          handleVideoOnSlideChange();
+        },
+        slideChangeTransitionStart: function () {
+          console.log('do slideChangeTransitionStart')
+          if (progressTimer) {
+            clearInterval(progressTimer);
+          }
+        },
+      },
+    });
+    handleVideoOnSlideChange();
+    
+    
+    function getVisibleDisplayMedias(container) {
+      const videos = container.querySelectorAll('video');
+      const video = Array.from(videos).find((video) => {
+        const style = window.getComputedStyle(video);
+        return style.display !== 'none';
+      });
+      if (video) {
+        return {
+          video,
+          type: 'video'
+        }
+      } else {
+        const images = container.querySelectorAll('img');
+        const image = Array.from(images).find((image) => {
+          const style = window.getComputedStyle(image);
+          return style.display !== 'none';
+        });
+        if (image) {
+          return {
+            image,
+            type: 'image'
+          }
+        }
+      }
+      return null;
+    }
+    const endedHandler = function() {
+
+        fullScreenSwiper.slideNext();
+        if (progressTimer) {
+          clearInterval(progressTimer);
+        }
+        this.removeEventListener('ended', endedHandler);
+    };
+
+    function updataMediaProgress(type, videoDom) {
+      console.log('do updataMediaProgress')
+      const activeBullet = block.querySelector(".swiper-pagination-bullet-active");
+      const progressBar = activeBullet.querySelector(".progress-line");
+      if (progressBar) {
+        if (type === 'video') {
+          if (progressTimer) {
+            clearInterval(progressTimer);
+          }
+          // 添加新的事件监听器
+            progressTimer = setInterval(() => {
+              const progress = videoDom.currentTime / videoDom.duration;
+              progressBar.style.transition = "0.2s";
+              progressBar.style.width = `${progress * 100}%`;
+            }, 100);
+          videoDom.addEventListener('ended', endedHandler);
+        } else if (type === 'image') {
+          console.log('do animate')
+          progressBar.style.transition = "15s";
+          progressBar.style.width = "100%";
+          setTimeout(() => {
+            fullScreenSwiper.slideNext();
+          }, 15000);
+        }
+      }
+    }
+
+    function handleVideoOnSlideChange() {
+      
+      const activeSlide = block.querySelector('.swiper-slide-active');
+      const media = getVisibleDisplayMedias(activeSlide);
+      const activeBullet = block.querySelector(".swiper-pagination-bullet-active");
+      const progressBar = activeBullet.querySelector(".progress-line");
+      if (progressBar) {
+        console.log('do reset 1')
+          progressBar.style.transition = "none";
+          progressBar.style.width = "0";
+       }
+      if (media.type === 'video') {
+            media.video.currentTime = 0;
+            updataMediaProgress('video', media.video);
+      } else if (media.type === 'image') {
+        // 处理图片的情况
+        updataMediaProgress('image', media.image);
+      }
+    }
+  });
+</script>
+
+{% schema %}
+{
+  "name": "Full Screen Swiper",
+  "class": "zz-full-screen-swiper-block",
+  "settings": [
+    {
+      "type": "color",
+      "id": "bg_color",
+      "default": "#ffffff",
+      "label": "背景色"
+    },
+   
+    {
+      "type": "color",
+      "id": "pagination_color",
+      "default": "#ffffff",
+      "label": "轮播导航圆圈颜色"
+    },
+    {
+      "type": "select",
+      "id": "prev_next_type",
+      "label": "prev next 颜色",
+      "options": [
+        { "value": "dark", "label": "黑色" },
+        { "value": "light", "label": "白色" },
+      ],
+      "default": "dark"
+    },
+  ],
+  "blocks": [
+    {
+      "type": "zz-flex-layout-bg-block",
+    }
+  ],
+  "presets": [
+    {
+      "name": "全屏轮播组件",
+      "settings": {
+        "bg_color": "#ffffff",
+        "pagination_color": "#ffffff",
+        "prev_next_type": "dark"
+      },
+      "blocks": [
+        {
+          "type": "zz-flex-layout-bg-block",
+          "settings": {
+            "background_color": "rgba(0,0,0,0)",
+            "bg_type": "image",
+            "full_screen_bg": true,
+            "pc_background_image": "shopify://shop_images/preset_pc_full_bg_pic.png",
+            "mobile_background_image": "shopify://shop_images/preset_mobile_full_bg_pic.png",
+            "pc_background_video_url": "",
+            "video_loop": false,
+            "pc_direction": "column",
+            "pc_gap": 40,
+            "pc_justify": "center",
+            "pc_align": "flex-start",
+            "pc_padding_top": 0,
+            "pc_padding_bottom": 0,
+            "pc_full_width": false,
+            "pc_xl_width": 1200,
+            "pc_lg_width": 90,
+            "mobile_direction": "column",
+            "mobile_gap": 20,
+            "mobile_justify": "flex-end",
+            "mobile_align": "center",
+            "mobile_padding_bottom": 100,
+          },
+          "blocks": [
+            {
+              "type": "zz-responsive-width-image",
+              "settings": {
+                "desktop_image": "shopify://shop_images/1_521b8e7f-8da9-4df0-9ee1-10a25ee62323.png",
+                "desktop_width_xl": 322,
+                "desktop_width_lg": 322,
+                "desktop_border_radius": 0,
+                "mobile_image": "shopify://shop_images/12_5bbff2ea-19fe-46e1-944b-f78a79ae2d4a.png",
+                "mb_width_type": "mb_use_padding",
+                "mobile_padding_x": 60,
+                "mobile_width": 60,
+                "mb_width_px": 100,
+                "mobile_border_radius": 0,
+                "alt": "image loading",
+              },
+            },
+            {
+              "type": "zz-title",
+              "settings": {
+                "pc_title": "<p>OFFICIAL FLYING CAMERA OF<br/>USA CYCLING TEAM</p>",
+                "mb_title": "<p>OFFICIAL FLYING CAMERA OF<br/>USA CYCLING TEAM</p>",
+                "tag": "h3",
+                "text_color": "#ffffff",
+                "pc_align": "left",
+                "mobile_align": "center",
+    
+              },
+            },
+            {
+              "type": "zz-button",
+              "settings": {
+                "text": "Buy Now",
+                "function_type": "link_map",
+                "type": "primary",
+                "color": "white",
+                "size": "medium"
+              },
+            },
+            
+          ]
+        },
+        {
+          "type": "zz-flex-layout-bg-block",
+          "settings": {
+            "background_color": "rgba(0,0,0,0)",
+            "bg_type": "image",
+            "full_screen_bg": true,
+            "pc_background_image": "shopify://shop_images/preset_pc_full_bg_pic.png",
+            "mobile_background_image": "shopify://shop_images/preset_mobile_full_bg_pic.png",
+            "pc_background_video_url": "",
+            "video_loop": false,
+            "pc_direction": "column",
+            "pc_gap": 40,
+            "pc_justify": "center",
+            "pc_align": "flex-start",
+            "pc_padding_top": 0,
+            "pc_padding_bottom": 0,
+            "pc_full_width": false,
+            "pc_xl_width": 1200,
+            "pc_lg_width": 90,
+            "mobile_direction": "column",
+            "mobile_gap": 20,
+            "mobile_justify": "flex-end",
+            "mobile_align": "center",
+            "mobile_padding_bottom": 100,
+          },
+          "blocks": [
+            {
+              "type": "zz-responsive-width-image",
+              "settings": {
+                "desktop_image": "shopify://shop_images/1_521b8e7f-8da9-4df0-9ee1-10a25ee62323.png",
+                "desktop_width_xl": 322,
+                "desktop_width_lg": 322,
+                "desktop_border_radius": 0,
+                "mobile_image": "shopify://shop_images/12_5bbff2ea-19fe-46e1-944b-f78a79ae2d4a.png",
+                "mb_width_type": "mb_use_padding",
+                "mobile_padding_x": 60,
+                "mobile_width": 60,
+                "mb_width_px": 100,
+                "mobile_border_radius": 0,
+                "alt": "image loading",
+              },
+            },
+            {
+              "type": "zz-title",
+              "settings": {
+                "pc_title": "<p>OFFICIAL FLYING CAMERA OF<br/>USA CYCLING TEAM</p>",
+                "mb_title": "<p>OFFICIAL FLYING CAMERA OF<br/>USA CYCLING TEAM</p>",
+                "tag": "h3",
+                "text_color": "#ffffff",
+                "pc_align": "left",
+                "mobile_align": "center",
+    
+              },
+            },
+            {
+              "type": "zz-button",
+              "settings": {
+                "text": "Buy Now",
+                "function_type": "link_map",
+                "type": "primary",
+                "color": "white",
+                "size": "medium"
+              },
+            },
+            
+          ]
+        }
+      ]
+    }
+  ]
+}
+{% endschema %}

package/blocks/zz-icon.liquid

@@ -0,0 +1,46 @@
+
+{% schema %}
+{
+  "name": "Icon",
+  "settings": [
+    {
+      "type": "select",
+      "id": "icon_name",
+      "label": "图标类型",
+      "options": [
+        {
+          "value": "download",
+          "label": "download"
+        },
+        {
+          "value": "arrow-right",
+          "label": "arrow-right"
+        },
+        {
+          "value": "mail",
+          "label": "mail"
+        },
+        {
+          "value": "copy",
+          "label": "copy"
+        }
+      ],
+      "default": "download"
+    },
+    {
+      "type": "number",
+      "id": "icon_size",
+      "label": "图标大小",
+      "default": 15
+    }
+  ],
+  "presets": [
+    {
+      "name": "Icon"
+    }
+  ]
+}
+{% endschema %}
+
+
+{% render 'zz-icon', icon_name: block.settings.icon_name, icon_size: block.settings.icon_size %}

package/blocks/zz-mail.liquid

@@ -0,0 +1,135 @@
+{% schema %}
+{
+  "name": "Email Link",
+  "settings": [
+    {
+      "type": "text",
+      "id": "email_address",
+      "label": "邮箱地址",
+      "default": "pr@hoverair.com"
+    },
+    {
+      "type": "text",
+      "id": "subject",
+      "label": "邮件主题",
+      "default": "Media Inquiries"
+    },
+    {
+      "type": "text",
+      "id": "text",
+      "label": "复制成功提示",
+      "default": "Copied to clipboard"
+    }
+  ],
+  "presets": [
+    {
+      "name": "Email Link"
+    }
+  ]
+}
+{% endschema %}
+
+<style>
+  .zz-btn-icon {
+    display: flex;
+    padding-left: 4px;
+  }
+</style>
+
+<span class='tw-inline-flex tw-text-[#378DDD] tw-items-center tw-text-[12px] lg:tw-text-[14px] '>
+  <a
+    href='mailto:{{ block.settings.email_address }}?subject={{ block.settings.subject | default: "Media Inquiries"  }}'
+    class='tw-text-[#378DDD] tw-no-underline'
+  >
+    <span class='zz-btn-text'>{{ block.settings.email_address }}</span>
+  </a>
+  <span
+    class='zz-btn-icon tw-cursor-pointer tw-daisy-tooltip'
+    data-tip='Copy to clipboard'
+    id='zz-email-copy-icon'
+  >
+    {% render 'zz-icon', icon_name: 'copy', icon_size: 25 %}
+  </span>
+</span>
+<div id='toast-email-copied'>{{ block.settings.text | default: "Copied to clipboard" }}</div>
+
+<style>
+  #toast-email-copied {
+    visibility: hidden; 
+    min-width: 250px; 
+    margin-left: -125px; 
+    background-color: #333; 
+    color: #fff; 
+    text-align: center; 
+    border-radius: 2px; 
+    padding: 16px; 
+    position: fixed;
+    z-index: 1; 
+    left: 50%; 
+    bottom: 30px;
+  }
+
+  #toast-email-copied.show {
+    visibility: visible; 
+    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, fadeout 0.5s 2.5s;
+  }
+
+  @-webkit-keyframes fadein {
+    from {
+      bottom: 0;
+      opacity: 0;
+    }
+    to {
+      bottom: 30px;
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadein {
+    from {
+      bottom: 0;
+      opacity: 0;
+    }
+    to {
+      bottom: 30px;
+      opacity: 1;
+    }
+  }
+
+  @-webkit-keyframes fadeout {
+    from {
+      bottom: 30px;
+      opacity: 1;
+    }
+    to {
+      bottom: 0;
+      opacity: 0;
+    }
+  }
+
+  @keyframes fadeout {
+    from {
+      bottom: 30px;
+      opacity: 1;
+    }
+    to {
+      bottom: 0;
+      opacity: 0;
+    }
+  }
+</style>
+
+<script>
+  document
+    .getElementById('zz-email-copy-icon')
+    .addEventListener('click', function () {
+      navigator.clipboard.writeText('{{ block.settings.email_address }}');
+
+      var x = document.getElementById('toast-email-copied');
+      x.className = 'show';
+      setTimeout(function () {
+        x.className = x.className.replace('show', '');
+      }, 3000);
+    });
+</script>