zz-shopify-components 0.24.1-beta.2 → 0.25.0

package/snippets/zz-product-model.liquid

@@ -1,447 +0,0 @@
-<script
-  type='module'
-  src='https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js'
-></script>
-<script
-  {% comment %} defer {% endcomment %}
-  nomodule
-  src='https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js'
-></script>
-
-<style>
-  .mv-container {
-    position: relative;
-  }
-  .mv-view {
-    position: absolute;
-    inset: 0;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 280ms ease;
-  }
-  .mv-view.is-active {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  .mv-toggle {
-    position: absolute;
-    bottom: 24px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: inline-flex;
-    align-items: center;
-    gap: 12px;
-    padding: 0;
-    background: transparent;
-    box-shadow: none;
-    z-index: 10;
-  }
-  .mv-toggle__btn {
-    appearance: none;
-    border: 0;
-    cursor: pointer;
-    background: transparent;
-    padding: 0;
-    margin: 0;
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 1;
-    color: #9ca3af; /* gray-400 */
-  }
-  .mv-toggle__btn.is-active {
-    color: #111827; /* gray-900 */
-    font-weight: 600;
-  }
-  .mv-toggle__sep {
-    color: #d1d5db; /* gray-300 */
-    user-select: none;
-    pointer-events: none;
-  }
-
-  .mv-fs-btn {
-    position: absolute;
-    bottom: 20px;
-    right: 20px;
-    width: 48px;
-    height: 48px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 9999px;
-    background: rgba(0, 0, 0, 0.3);
-    color: #fff;
-    border: 0;
-    cursor: pointer;
-    z-index: 11;
-  }
-  .mv-fs-btn:focus {
-    outline: 2px solid rgba(255, 255, 255, 0.8);
-    outline-offset: 2px;
-  }
-</style>
-
-{% assign model_folded = product.metafields.custom.model_folded.value %}
-{% assign model_unfolded = product.metafields.custom.model_unfolded.value %}
-{% assign model_folded_poster = model_folded.preview_image
-  | image_url: width: 656
-%}
-{% assign model_unfolded_poster = model_unfolded.preview_image
-  | image_url: width: 656
-%}
-
-<div class=' tw-relative model-container max-lg:tw-hidden tw-w-full tw-h-full max-lg:tw-w-screen tw-rounded-2xl tw-overflow-hidden'>
-  <div class=' tw-w-full tw-h-full tw-absolute tw-top-0 tw-left-0 mv-container'>
-    <div class='mv-view mv-view--folded is-active' data-view='folded'>
-      {% render 'zz-model-viewer',
-        id: 'mv-folded-{{ block.id }}',
-        src: model_folded.sources[0].url,
-        poster: model_folded_poster,
-        environment_image: 'https://se-cdn.djiits.com/uploads/3d/ce4f991f2121e53418c2978ce4d44709.hdr'
-      %}
-    </div>
-
-    <div class='mv-view mv-view--unfolded' data-view='unfolded'>
-      {% render 'zz-model-viewer',
-        id: 'mv-unfolded-{{ block.id }}',
-        src: model_unfolded.sources[0].url,
-        poster: model_unfolded_poster,
-        environment_image: 'https://se-cdn.djiits.com/uploads/3d/ce4f991f2121e53418c2978ce4d44709.hdr'
-      %}
-    </div>
-  </div>
-
-  <div class='mv-toggle' role='tablist' aria-label='Model toggle'>
-    <button
-      class='mv-toggle__btn is-active'
-      data-toggle='unfolded'
-      role='tab'
-      aria-selected='true'
-    >
-      Unfolded
-    </button>
-    <span class='mv-toggle__sep' aria-hidden='true'>|</span>
-    <button
-      class='mv-toggle__btn'
-      data-toggle='folded'
-      role='tab'
-      aria-selected='false'
-    >
-      Folded
-    </button>
-  </div>
-</div>
-
-<button
-  id='mv-open-{{ block.id }}'
-  type='button'
-  class=' tw-w-full lg:tw-hidden tw-h-full tw-bg-[#F5F5F6] tw-flex tw-justify-center tw-items-center'
->
-  <img src='{{ model_folded_poster }}' alt='product model'>
-
-  <svg
-    width='36'
-    height='36'
-    viewBox='0 0 36 36'
-    fill='none'
-    class=' tw-absolute'
-    xmlns='http://www.w3.org/2000/svg'
-  >
-    <rect x="0.5" y="0.5" width="35" height="35" rx="17.5" stroke="white"/>
-    <path d="M24.4004 14.6953V21.4121L18 25.1064L11.5996 21.4121V14.6953L18 11L24.4004 14.6953Z" stroke="white" stroke-width="1.2"/>
-    <path d="M24.2434 14.6886L18.0478 18.2656L11.8522 14.6886" stroke="white" stroke-width="1.2"/>
-    <path d="M17.9999 24.9582V17.5488" stroke="white" stroke-width="1.2" stroke-linejoin="round"/>
-  </svg>
-</button>
-
-<div
-  id='mv-drawer-{{ block.id }}'
-  class='mv-drawer lg:tw-hidden'
-  aria-hidden='true'
->
-  <div class='mv-drawer__backdrop'></div>
-  <div class='mv-drawer__panel'>
-    <button
-      class='mv-drawer__close'
-      type='button'
-      aria-label='Close'
-      data-close
-    >
-      <svg
-        width='24'
-        height='24'
-        viewBox='0 0 24 24'
-        fill='none'
-        xmlns='http://www.w3.org/2000/svg'
-      >
-        <path d='M6 6L18 18' stroke='#111' stroke-width='1.5' stroke-linecap='round'/>
-        <path d='M18 6L6 18' stroke='#111' stroke-width='1.5' stroke-linecap='round'/>
-      </svg>
-    </button>
-    <div class=' tw-w-full tw-h-full tw-absolute tw-top-0 tw-left-0 mv-container'>
-      <div class='mv-view mv-mb-view--folded is-active' data-view='mb-folded'>
-        {% render 'zz-model-viewer',
-          id: 'mv-folded-mb-{{ block.id }}',
-          src: model_folded.sources[0].url,
-          poster: model_folded_poster,
-          environment_image: 'https://se-cdn.djiits.com/uploads/3d/ce4f991f2121e53418c2978ce4d44709.hdr'
-        %}
-      </div>
-  
-      <div class='mv-view mv-mb-view--unfolded' data-view='mb-unfolded'>
-        {% render 'zz-model-viewer',
-          id: 'mv-unfolded-mb-{{ block.id }}',
-          src: model_unfolded.sources[0].url,
-          poster: model_unfolded_poster,
-          environment_image: 'https://se-cdn.djiits.com/uploads/3d/ce4f991f2121e53418c2978ce4d44709.hdr'
-        %}
-      </div>
-    </div>
-  
-    <div class='mv-toggle' role='tablist' aria-label='Model toggle'>
-      <button
-        class='mv-toggle__btn is-active'
-        data-toggle='mb-unfolded'
-        role='tab'
-        aria-selected='true'
-      >
-        Unfolded
-      </button>
-      <span class='mv-toggle__sep' aria-hidden='true'>|</span>
-      <button
-        class='mv-toggle__btn'
-        data-toggle='mb-folded'
-        role='tab'
-        aria-selected='false'
-      >
-        Folded
-      </button>
-    </div>
-  </div>
-</div>
-
-<style>
-  .mv-drawer {
-    position: fixed;
-    inset: 0;
-    z-index: 60;
-    visibility: hidden;
-    pointer-events: none;
-  }
-  .mv-drawer.is-open {
-    visibility: visible;
-    pointer-events: auto;
-  }
-  .mv-drawer__backdrop {
-    position: absolute;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.5);
-    opacity: 0;
-    transition: opacity 200ms ease;
-  }
-  .mv-drawer.is-open .mv-drawer__backdrop {
-    opacity: 1;
-  }
-  .mv-drawer__panel {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: auto;
-    height: 100%;
-    background: #fff;
-    transform: translateY(100%);
-    transition: transform 300ms ease;
-    display: flex;
-    flex-direction: column;
-  }
-  .mv-drawer.is-open .mv-drawer__panel {
-    transform: translateY(0);
-  }
-  .mv-drawer__close {
-    position: absolute;
-    top: 12px;
-    right: 12px;
-    width: 40px;
-    height: 40px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 9999px;
-    background: rgba(0, 0, 0, 0.06);
-    border: 0;
-    cursor: pointer;
-    z-index: 1;
-  }
-  .mv-drawer__close:focus {
-    outline: 2px solid rgba(17, 17, 17, 0.5);
-    outline-offset: 2px;
-  }
-</style>
-
-<script>
-  (function () {
-    const isMobile = window.matchMedia('(max-width: 1023.98px)').matches;
-    if (!isMobile) return;
-    const openBtn = document.getElementById('mv-open-{{ block.id }}');
-    const drawer = document.getElementById('mv-drawer-{{ block.id }}');
-    if (!openBtn || !drawer) return;
-    const backdrop = drawer.querySelector('.mv-drawer__backdrop');
-    const closeBtn = drawer.querySelector('[data-close]');
-    const open = () => {
-      drawer.classList.add('is-open');
-      drawer.setAttribute('aria-hidden', 'false');
-      document.documentElement.style.overflow = 'hidden';
-    };
-    const close = () => {
-      drawer.classList.remove('is-open');
-      drawer.setAttribute('aria-hidden', 'true');
-      document.documentElement.style.overflow = '';
-    };
-    openBtn.addEventListener('click', open);
-    if (backdrop) backdrop.addEventListener('click', close);
-    if (closeBtn) closeBtn.addEventListener('click', close);
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape') close();
-    });
-  })();
-</script>
-
-<script>
-  (function () {
-    // Scoped toggle logic for each toggle block (desktop and mobile)
-    function initToggle(toggleRoot) {
-      const scope = toggleRoot.closest('.model-container, .mv-drawer') || document;
-      const container = scope.querySelector('.mv-container');
-      if (!container) return;
-      const btns = toggleRoot.querySelectorAll('.mv-toggle__btn');
-      function setActive(key) {
-        container.querySelectorAll('.mv-view').forEach((viewEl) => {
-          const isActive = viewEl.getAttribute('data-view') === key;
-          viewEl.classList.toggle('is-active', isActive);
-          if (isActive) {
-            viewEl.removeAttribute('inert');
-            viewEl.setAttribute('aria-hidden', 'false');
-          } else {
-            viewEl.setAttribute('inert', '');
-            viewEl.setAttribute('aria-hidden', 'true');
-          }
-        });
-        btns.forEach((b) => {
-          const active = b.getAttribute('data-toggle') === key;
-          b.classList.toggle('is-active', active);
-          b.setAttribute('aria-selected', active ? 'true' : 'false');
-        });
-      }
-      btns.forEach((btn) => {
-        btn.addEventListener('click', () => {
-          setActive(btn.getAttribute('data-toggle'));
-        });
-      });
-      const defaultKey =
-        Array.from(btns).find(
-          (b) => b.classList.contains('is-active') || b.getAttribute('aria-selected') === 'true'
-        )?.getAttribute('data-toggle') || 'unfolded';
-      setActive(defaultKey);
-    }
-    document.querySelectorAll('.mv-toggle').forEach(initToggle);
-
-    const mv = document.querySelector('.mv-container');
-    if (!mv) return;
-    const parent = mv.parentElement; // wrapper with relative positioning
-    if (!parent) return;
-    if (window.innerWidth < 1024) {
-      return;
-    }
-    const btnId = 'mv-fs-btn';
-    let btn = document.getElementById(btnId);
-    if (!btn) {
-      btn = document.createElement('button');
-      btn.type = 'button';
-      btn.id = btnId;
-      btn.className = 'mv-fs-btn';
-      btn.setAttribute('aria-label', 'Enter fullscreen');
-      btn.innerHTML =
-        '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 4.5H19.5V9.5" stroke="white" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.475 4.52515L13.8181 10.182" stroke="white" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.5 19.5H4.5V14.5" stroke="white" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.52502 19.4749L10.1819 13.818" stroke="white" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>';
-      parent.appendChild(btn);
-    }
-
-    const getActiveTarget = () =>
-      document.querySelector('.mv-view.is-active model-viewer') ||
-      document.querySelector('.mv-view.is-active') ||
-      mv;
-
-    const isFullscreenSupported = () => {
-      const el = getActiveTarget();
-      const elSupports = !!(
-        el &&
-        (el.requestFullscreen || el.webkitRequestFullscreen)
-      );
-      const docSupports = !!(
-        document.fullscreenEnabled || document.webkitFullscreenEnabled
-      );
-      return true;
-    };
-
-    const isFs = () => {
-      const el = getActiveTarget();
-      return (
-        document.fullscreenElement === el ||
-        document.webkitFullscreenElement === el
-      );
-    };
-
-    const enterFs = async () => {
-      const el = getActiveTarget();
-      try {
-        if (!el) return;
-        if (el.requestFullscreen) {
-          await el.requestFullscreen({ navigationUI: 'hide' });
-        } else if (el.webkitRequestFullscreen) {
-          el.webkitRequestFullscreen();
-        } else {
-          throw new Error('Fullscreen not supported');
-        }
-      } catch (e) {}
-    };
-
-    const exitFs = async () => {
-      try {
-        if (document.fullscreenElement && document.exitFullscreen) {
-          await document.exitFullscreen();
-        } else if (
-          document.webkitFullscreenElement &&
-          document.webkitExitFullscreen
-        ) {
-          document.webkitExitFullscreen();
-        }
-      } catch (_) {}
-    };
-
-    const toggleFs = () => {
-      if (isFs()) {
-        exitFs();
-      } else {
-        enterFs();
-      }
-    };
-
-    const onFsChange = () => {
-      const active = isFs();
-      btn.setAttribute('aria-pressed', active ? 'true' : 'false');
-      btn.setAttribute(
-        'aria-label',
-        active ? 'Exit fullscreen' : 'Enter fullscreen'
-      );
-    };
-
-    btn.addEventListener('click', toggleFs);
-    document.addEventListener('fullscreenchange', onFsChange);
-    document.addEventListener('webkitfullscreenchange', onFsChange);
-
-    // Hide fullscreen button if unsupported
-    if (!isFullscreenSupported()) {
-      btn.style.display = 'none';
-    }
-  })();
-</script>

package/snippets/zz-product-preview.liquid

@@ -1,51 +0,0 @@
-<div class='tw-w-full tw-max-w-[1680px] tw-mx-auto'>
-  <div class='product-container tw-flex tw-items-center tw-justify-center'>
-    {% comment %} 左侧产品预览 {% endcomment %}
-    <div
-      class='product-preview  tw-w-full tw-aspect-square md:tw-aspect-[16/9]'
-      data-test-locator='productPreview'
-    >
-      <div
-        class='product-swiper product-preview-item active'
-        data-test-locator='productPreviewSwiper'
-        data-gallery-value='photo'
-      >
-        {% render 'zz-product-swiper' %}
-      </div>
-      {% comment %} 产品模型 {% endcomment %}
-      {% if show_model %}
-        <div
-          class='product-model product-preview-item'
-          data-test-locator='productPreviewModel'
-          data-gallery-value='3d'
-        >
-          {% render 'zz-product-model' %}
-        </div>
-      {% endif %}
-      {% comment %} 配件标注点 {% endcomment %}
-      {% if show_accessories_point %}
-        {%- if accessories_points.size > 0 -%}
-          <div
-            class='product-accessories-point product-preview-item'
-            data-test-locator='productPreviewAccessoriesPoint'
-            data-gallery-value='accessories'
-          >
-            {% render 'zz-accessories-preview-swiper',
-              accessories_points: accessories_points
-            %}
-          </div>
-        {%- endif -%}
-      {%- endif -%}
-      {% if show_video %}
-        <div
-          class='product-video product-preview-item'
-          data-test-locator='productPreviewVideo'
-          data-gallery-value='video'
-        >
-          {%- render 'zz-product-video' -%}
-        </div>
-      {% endif %}
-    </div>
-  </div>
-</div>
-{% render 'zz-gallery-tab' show_accessories_point: show_accessories_point, show_video: show_video, show_model: show_model %}