zz-shopify-components 0.35.1-beta.6 → 0.35.1-beta.8

package/assets/zz-components.css

@@ -311,51 +311,52 @@ body.zz-dialog-open {
 .zz-btn.zz-btn-default.zz-btn-black {
   background: transparent;
   color: #2D2D2D;
-  border: 1.5px solid #2D2D2D;
+  border: 1px solid #2D2D2D;
 }
 
 .zz-btn.zz-btn-default.zz-btn-white {
   background: transparent;
   color: #fff;
-  border: 1.5px solid #FFFFFF4D;
+  border: 1px solid #FFFFFF;
+  font-weight: 400;
 }
 
 .zz-btn.zz-btn-default.zz-btn-orange {
   background: transparent;
   color: #FC6C0F;
-  border: 1.5px solid #FC6C0F;
+  border: 1px solid #FC6C0F;
 }
 
 .zz-btn.zz-btn-default.zz-btn-yellow {
   background: transparent;
   color: #000;
-  border: 1.5px solid #FFEB00;
+  border: 1px solid #FFEB00;
 }
 
 .zz-btn.zz-btn-default.zz-btn-blue {
   background: transparent;
   color: #378DDD;
-  border: 1.5px solid #378DDD;
+  border: 1px solid #378DDD;
 }
 
 .zz-btn.zz-btn-round.zz-btn-black {
   background: transparent;
   color: #2D2D2D;
-  border: 1.5px solid #2D2D2D;
+  border: 1px solid #2D2D2D;
   border-radius: 30px;
 }
 
 .zz-btn.zz-btn-round.zz-btn-white {
   background: transparent;
   color: #fff;
-  border: 1.5px solid #FFFFFF4D;
+  border: 1px solid #FFFFFF4D;
   border-radius: 30px;
 }
 
 .zz-btn.zz-btn-round.zz-btn-orange {
   background: transparent;
   color: #ff9900;
-  border: 1.5px solid #ff9900;
+  border: 1px solid #ff9900;
   border-radius: 30px;
 }
 
@@ -408,6 +409,11 @@ body.zz-dialog-open {
   font-size: 14px;
 }
 
+.zz-btn.zz-btn-large.zz-btn-default {
+  padding: 0px 1.6rem;
+
+}
+
 @media (min-width: 1024px) {
   .zz-btn {
     height: 40px;
@@ -434,6 +440,10 @@ body.zz-dialog-open {
   .zz-btn-link.zz-btn-link-large {
     font-size: 16px;
   }
+
+  .zz-btn.zz-btn-large.zz-btn-default {
+    padding: 0px 30px;
+  }
 }
 
 .zz-video-btn.zz-btn.zz-btn-white {

package/blocks/zz-button-v2.liquid

@@ -1,6 +1,7 @@
 {% schema %}
 {
   "name": "Button v2",
+  "class": "zz-button-v2",
   "settings": [
     {
       "type": "text",
@@ -102,6 +103,18 @@
       ],
       "default": "black",
     },
+    {
+      "type": "color",
+      "id": "custom_background_color",
+      "label": "自定义背景颜色",
+      "info": "按钮颜色有限，颜色自定义"
+    },
+    {
+      "type": "color",
+      "id": "custom_text_color",
+      "label": "自定义文字颜色",
+      "info": "按钮文字颜色有限，颜色自定义"
+    },
     {
       "type": "select",
       "id": "size",
@@ -213,6 +226,18 @@
       }
     }
   {% endif %}
+
+  {% if block.settings.custom_background_color != blank %}
+    #shopify-block-{{ block.id }} .{{ btn_class }} {
+      background: {{ block.settings.custom_background_color }} !important;
+    }
+  {% endif %}
+
+  {% if block.settings.custom_text_color != blank %}
+    #shopify-block-{{ block.id }} .{{ btn_class }} {
+      color: {{ block.settings.custom_text_color }} !important;
+    }
+  {% endif %}
 </style>
 
 {% render 'zz-button-v2',

package/blocks/zz-count-down.liquid

@@ -0,0 +1,255 @@
+<style>
+  #shopify-block-{{ block.id }} .zz-countdown {
+    display: flex;
+  }
+  
+  #shopify-block-{{ block.id }} .zz-countdown-title {
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 120%;
+    letter-spacing: 0%;
+    {% if block.settings.theme_color == 'white' %}
+      color: #FFFFFF;
+    {% else %}
+      color: #2D2D2D !important;
+    {% endif %}
+
+    {% if block.settings.title_position == 'front' %}
+      margin-right: 24px;
+    {% else %}
+      margin-left: 24px;
+    {% endif %}
+  }
+  
+  #shopify-block-{{ block.id }} .zz-countdown-timer {
+    display: flex;
+    gap: 20px;
+   
+  }
+  
+  #shopify-block-{{ block.id }} .zz-countdown-unit {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    position: relative;
+  }
+  
+  #shopify-block-{{ block.id }} .zz-countdown-number {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    
+    align-items: center;
+    justify-content: center;
+    {% if block.settings.theme_color == 'white' %}
+        background: #FFFFFF33;
+        color: #FFFFFF;
+    {% else %}
+      background: #2D2D2D66;
+      color:#2D2D2D;
+    {% endif %}
+  
+    border-radius: 4px;
+    font-size: 18px;
+    font-weight: 600;
+  }
+  
+  #shopify-block-{{ block.id }} .zz-countdown-label {
+    font-size: 12px;
+    font-weight: 400;
+    {% if block.settings.theme_color == 'white' %}
+      color: #F5F5F5B2;
+    {% else %}
+      color: #2D2D2D;
+    {% endif %}
+  }
+  
+  #shopify-block-{{ block.id }} .zz-countdown-separator {
+    font-size: 12px;
+    font-weight: 700;
+    {% if block.settings.theme_color == 'white' %}
+      color: #FFFFFF;
+    {% else %}
+      color: #2D2D2D;
+    {% endif %}
+    margin-top: 14px;
+  }
+  
+  /* 响应式设计 */
+  @media screen and (max-width: 1024px) {
+    #shopify-block-{{ block.id }} .zz-countdown-title {
+      font-size: 20px;
+    }
+    
+    #shopify-block-{{ block.id }} .zz-countdown-timer {
+      gap: 12px;
+    }
+    
+    #shopify-block-{{ block.id }} .zz-countdown-number {
+      width: 34px;
+      height: 34px;
+      font-size: 14px;
+    }
+    
+    #shopify-block-{{ block.id }} .zz-countdown-label {
+      font-size: 10px;
+    }
+
+    #shopify-block-{{ block.id }} .zz-countdown-separator {
+      font-size: 12px;
+      font-weight: 700;
+      margin-top: 10px;
+    }
+    #shopify-block-{{ block.id }} .zz-countdown-title {
+      font-size: 14px;
+    }
+    
+    
+  }
+  
+
+</style>
+
+<div 
+  class="zz-countdown tw-flex {% if block.settings.title_position == 'back' %} tw-flex-row-reverse {% endif %}">
+  <div class="zz-countdown-title">{{ block.settings.title }}</div>
+  <div class="zz-countdown-timer">
+    <div class="zz-countdown-unit">
+      <div class="zz-countdown-number" id="zz-countdown-days">00</div>
+      <div class="zz-countdown-label">{{ block.settings.day_label | default: 'Day' }}</div>
+    </div>
+    <div class="zz-countdown-separator">:</div>
+    <div class="zz-countdown-unit">
+      <div class="zz-countdown-number" id="zz-countdown-hours">00</div>
+      <div class="zz-countdown-label">{{ block.settings.hour_label | default: 'Hour' }}</div>
+    </div>
+    <div class="zz-countdown-separator">:</div>
+    <div class="zz-countdown-unit">
+      <div class="zz-countdown-number" id="zz-countdown-minutes">00</div>
+      <div class="zz-countdown-label">{{ block.settings.minute_label | default: 'Minute' }}</div>
+    </div>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    // 获取结束时间
+    const endTimeStr = '{{ block.settings.end_time | date: "%s" }}';
+    
+    // 解析结束时间
+    const endTime = Number(endTimeStr) * 1000;
+    if (isNaN(endTime)) {
+      console.error('Invalid end time format');
+      return;
+    }
+    
+    // 获取倒计时元素
+    const daysElement = document.getElementById('zz-countdown-days');
+    const hoursElement = document.getElementById('zz-countdown-hours');
+    const minutesElement = document.getElementById('zz-countdown-minutes');
+    
+    // 补零函数
+    function padZero(num) {
+      return num < 10 ? '0' + num : num;
+    }
+    
+    // 更新倒计时函数
+    function updateCountdown() {
+      const now = Date.now();
+      const distance = endTime - now;
+      
+      // 如果倒计时结束
+      if (distance < 0) {
+        daysElement.textContent = '00';
+        hoursElement.textContent = '00';
+        minutesElement.textContent = '00';
+        return;
+      }
+      
+      // 计算剩余时间
+      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+      
+      // 更新UI
+      daysElement.textContent = padZero(days);
+      hoursElement.textContent = padZero(hours);
+      minutesElement.textContent = padZero(minutes);
+    }
+    
+    // 初始更新
+    updateCountdown();
+    
+    // 每分钟更新一次
+    const timer = setInterval(updateCountdown, 60000);
+    
+    // 清理定时器
+    window.addEventListener('beforeunload', function() {
+      clearInterval(timer);
+    });
+  });
+</script>
+
+{% schema %}
+{
+  "name": "Count Down",
+  "settings": [
+    {
+      "type": "text",
+      "id": "end_time",
+      "default": "2026-04-28 23:59:59",
+      "label": "结束时间",
+      "info": "shopify后台配置的时区，格式：YYYY-MM-DD HH:MM:SS"
+    },
+    {
+      "type": "richtext",
+      "id": "title",
+      "label": "标题"
+    },
+    {
+      "type": "select",
+      "id": "theme_color",
+      "label": "文案颜色模式",
+      "options": [
+        { "value": "black", "label": "黑色模式" },
+        { "value": "white", "label": "白色模式" },
+      ],
+      "default": "white",
+    },
+    {
+      "type": "select",
+      "id": "title_position",
+      "label": "标题位置",
+      "options": [
+        { "value": "front", "label": "前置" },
+        { "value": "back", "label": "后置" },
+      ],
+      "default": "front",
+    },
+    {
+      "type": "text",
+      "id": "day_label",
+      "label": "天数标签",
+      "default": "Day"
+    },
+    {
+      "type": "text",
+      "id": "hour_label",
+      "label": "小时标签",
+      "default": "Hour"
+    },
+    {
+      "type": "text",
+      "id": "minute_label",
+      "label": "分钟标签",
+      "default": "Minute"
+    }
+  ],
+  "presets": [
+    {
+      "name": "Count Down"
+    }
+  ]
+}
+{% endschema %}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.35.1-beta.6",
+  "version": "0.35.1-beta.8",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",

package/sections/zz-product-subnav.liquid

@@ -0,0 +1,417 @@
+{% schema %}
+{
+  "name": "ZZ Product Subnav",
+  "class": "zz-product-subnav-section",
+  "settings": [
+    {
+      "type": "number",
+      "id": "top_offset",
+      "label": "吸附偏移量 (sticky top)",
+      "default": 50
+    },
+    {
+      "type": "number",
+      "id": "scroll_offset_desktop",
+      "label": "点击滚动偏移量 (PC)",
+      "default": 120
+    },
+    {
+      "type": "number",
+      "id": "scroll_offset_mobile",
+      "label": "点击滚动偏移量 (Mob)",
+      "default": 100
+    },
+    {
+      "type": "text",
+      "id": "max_width",
+      "label": "内容最大宽度 (PC, CSS value)",
+      "default": "1520px",
+      "info": "例如：1520px / 1660px / 100%"
+    },
+    {
+      "type": "color",
+      "id": "background_color",
+      "label": "背景颜色",
+      "default": "#FDBD33"
+    },
+    {
+      "type": "select",
+      "id": "text_color_mode",
+      "label": "文案颜色模式",
+      "default": "black",
+      "options": [
+        {
+          "value": "black",
+          "label": "黑色"
+        },
+        {
+          "value": "white",
+          "label": "白色"
+        }
+      ]
+    }
+  ],
+  "blocks": [
+    {
+      "type": "tab",
+      "name": "Tab",
+      "settings": [
+        {
+          "type": "text",
+          "id": "label",
+          "label": "Tab 文案",
+          "default": "X1 PRO"
+        },
+        {
+          "type": "text",
+          "id": "target_module_name",
+          "label": "目标模块 data-zz-module-name",
+          "info": "用于定位页面模块，如：x1-pro（匹配 [data-zz-module-name='x1-pro']）"
+        },
+        {
+          "type": "text",
+          "id": "target_selector",
+          "label": "目标选择器 (可选)",
+          "info": "优先级高于模块名。例如：#x1-pro 或 .my-section 或 [data-zz-module-name~='x1-pro']"
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "ZZ Product Subnav"
+    }
+  ]
+}
+{% endschema %}
+
+{%- assign top_offset = section.settings.top_offset | default: 50 -%}
+{%- assign text_color_mode = section.settings.text_color_mode | default: 'black' -%}
+{%- if text_color_mode == 'white' -%}
+  {%- assign tab_text_color = 'rgba(255,255,255,0.8)' -%}
+  {%- assign tab_active_text_color = '#FFFFFF' -%}
+{%- else -%}
+  {%- assign tab_text_color = 'rgba(45,45,45,0.8)' -%}
+  {%- assign tab_active_text_color = '#2D2D2D' -%}
+{%- endif -%}
+
+<nav class="zz-product-subnav" aria-label="Product sub navigation">
+  <div class="zz-product-subnav__wrap">
+    <div class="zz-product-subnav__track" role="tablist">
+      {%- for block in section.blocks -%}
+        {%- assign label = block.settings.label | default: '' -%}
+        {%- assign module_name = block.settings.target_module_name | default: '' -%}
+        {%- assign selector = block.settings.target_selector | default: '' -%}
+        <button
+          type="button"
+          class="zz-product-subnav__tab{% if forloop.first %} is-active{% endif %}"
+          role="tab"
+          aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
+          data-zz-subnav-label="{{ label | escape }}"
+          data-zz-subnav-module="{{ module_name | escape }}"
+          data-zz-subnav-selector="{{ selector | escape }}"
+          {{ block.shopify_attributes }}
+        >
+          <span class="zz-product-subnav__tabText">{{ label }}</span>
+        </button>
+      {%- endfor -%}
+    </div>
+  </div>
+</nav>
+
+<style>
+  #shopify-section-{{ section.id }} {
+    position: sticky;
+    top: {{ top_offset }}px;
+    z-index: 30;
+  }
+
+  #shopify-section-{{ section.id }} .zz-product-subnav {
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    background: {{ section.settings.background_color | default: '#FDBD33' }};
+  }
+
+  #shopify-section-{{ section.id }} .zz-product-subnav__wrap {
+    max-width: {{ section.settings.max_width | default: '1520px' }};
+    margin: 0 auto;
+    padding: 0 20px;
+  }
+
+  #shopify-section-{{ section.id }} .zz-product-subnav__track {
+    display: flex;
+    align-items: center;
+    gap: 60px;
+    justify-content: center;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  #shopify-section-{{ section.id }} .zz-product-subnav__track::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+
+  #shopify-section-{{ section.id }} .zz-product-subnav__tab {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 16px 0;
+    cursor: pointer;
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 3px solid transparent;
+  }
+
+  #shopify-section-{{ section.id }} .zz-product-subnav__tabText {
+    font-family: Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500;
+    color: {{ tab_text_color }};
+    white-space: nowrap;
+  }
+
+  #shopify-section-{{ section.id }} .zz-product-subnav__tab.is-active {
+    border-bottom-color: {{ tab_active_text_color }};
+  }
+
+  #shopify-section-{{ section.id }} .zz-product-subnav__tab.is-active .zz-product-subnav__tabText {
+    font-weight: 700;
+    color: {{ tab_active_text_color }};
+  }
+
+  @media (max-width: 1023px) {
+    #shopify-section-{{ section.id }} .zz-product-subnav__wrap {
+      padding: 0 20px;
+    }
+
+    #shopify-section-{{ section.id }} .zz-product-subnav__track {
+      justify-content: flex-start;
+      gap: 24px;
+    }
+
+    #shopify-section-{{ section.id }} .zz-product-subnav__tab {
+      padding: 12px 0;
+    }
+
+    #shopify-section-{{ section.id }} .zz-product-subnav__tabText {
+      font-size: 14px;
+    }
+  }
+</style>
+
+<script>
+  (function () {
+    const sectionEl = document.getElementById('shopify-section-{{ section.id }}');
+    if (!sectionEl) return;
+
+    // Prevent duplicate bindings (theme editor / section re-render)
+    if (typeof sectionEl.__zzProductSubnavCleanup === 'function') {
+      sectionEl.__zzProductSubnavCleanup();
+      sectionEl.__zzProductSubnavCleanup = null;
+    }
+
+    const trackEl = sectionEl.querySelector('.zz-product-subnav__track');
+    const tabs = Array.from(sectionEl.querySelectorAll('.zz-product-subnav__tab'));
+    if (!trackEl || tabs.length === 0) return;
+
+    const scrollOffsetDesktop = Number({{ section.settings.scroll_offset_desktop | default: 120 }}) || 0;
+    const scrollOffsetMobile = Number({{ section.settings.scroll_offset_mobile | default: 100 }}) || 0;
+    const mqDesktop = window.matchMedia('(min-width: 1024px)');
+
+    const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+    const getScrollOffset = () => (mqDesktop.matches ? scrollOffsetDesktop : scrollOffsetMobile);
+
+    function resolveTarget(tabEl) {
+      const selector = (tabEl.getAttribute('data-zz-subnav-selector') || '').trim();
+      const moduleName = (tabEl.getAttribute('data-zz-subnav-module') || '').trim();
+
+      if (selector) {
+        try {
+          return document.querySelector(selector);
+        } catch (e) {
+          return null;
+        }
+      }
+
+      if (moduleName) {
+        return document.querySelector(`[data-zz-module-name="${CSS.escape(moduleName)}"]`);
+      }
+
+      return null;
+    }
+
+    function setActive(tabEl, shouldScrollIntoView) {
+      tabs.forEach((t) => {
+        const isActive = t === tabEl;
+        t.classList.toggle('is-active', isActive);
+        t.setAttribute('aria-selected', isActive ? 'true' : 'false');
+      });
+
+      if (shouldScrollIntoView) {
+        const containerWidth = trackEl.clientWidth;
+        const tabLeft = tabEl.offsetLeft;
+        const tabWidth = tabEl.offsetWidth;
+        const targetLeft = tabLeft - (containerWidth / 2) + (tabWidth / 2);
+        const nextLeft = clamp(targetLeft, 0, Math.max(0, trackEl.scrollWidth - containerWidth));
+        trackEl.scrollTo({ left: nextLeft, behavior: 'smooth' });
+      }
+    }
+
+    function scrollToTarget(tabEl) {
+      const target = resolveTarget(tabEl);
+      if (!target) return;
+      const rect = target.getBoundingClientRect();
+      const offsetTop = rect.top + window.scrollY - getScrollOffset();
+      window.scrollTo({ top: offsetTop, behavior: 'smooth' });
+    }
+
+    // Click to scroll
+    tabs.forEach((tabEl) => {
+      tabEl.addEventListener('click', () => {
+        setActive(tabEl, true);
+        scrollToTarget(tabEl);
+      });
+    });
+
+    // Scroll-spy (activate when target crosses viewport center)
+    const ac = new AbortController();
+    let targets = [];
+    let rafId = 0;
+    let domObserver = null;
+
+    function buildTargets() {
+      targets = tabs
+        .map((tabEl) => ({ tabEl, target: resolveTarget(tabEl) }))
+        .filter((x) => !!x.target);
+      return targets;
+    }
+
+    function computeActiveByViewportCenter() {
+      if (targets.length === 0) return;
+      const mid = window.innerHeight / 2;
+
+      let best = null;
+      let bestDist = Infinity;
+
+      for (const x of targets) {
+        const r = x.target.getBoundingClientRect();
+        if (!r || r.height <= 0) continue;
+
+        // Primary rule: viewport center is inside the target region
+        if (r.top <= mid && r.bottom >= mid) {
+          const center = r.top + r.height / 2;
+          const dist = Math.abs(center - mid);
+          if (dist < bestDist) {
+            best = x;
+            bestDist = dist;
+          }
+        }
+      }
+
+      // Fallback: choose the last section above the center
+      if (!best) {
+        let above = null;
+        let aboveTop = -Infinity;
+        for (const x of targets) {
+          const r = x.target.getBoundingClientRect();
+          if (!r || r.height <= 0) continue;
+          if (r.top <= mid && r.top > aboveTop) {
+            above = x;
+            aboveTop = r.top;
+          }
+        }
+        best = above;
+      }
+
+      if (!best) return;
+
+      const currentActive = sectionEl.querySelector('.zz-product-subnav__tab.is-active');
+      if (currentActive !== best.tabEl) {
+        setActive(best.tabEl, true);
+      }
+    }
+
+    function scheduleCompute() {
+      if (rafId) return;
+      rafId = window.requestAnimationFrame(() => {
+        rafId = 0;
+        computeActiveByViewportCenter();
+      });
+    }
+
+    function startSpy() {
+      if (buildTargets().length === 0) return false;
+
+      // Keep it simple: scroll/resize-driven, rAF-throttled
+      window.addEventListener('scroll', scheduleCompute, { passive: true, signal: ac.signal });
+      window.addEventListener('resize', scheduleCompute, { passive: true, signal: ac.signal });
+      mqDesktop.addEventListener('change', scheduleCompute, { signal: ac.signal });
+
+      // Initial sync
+      scheduleCompute();
+      return true;
+    }
+
+    function tryStartSpyWithWait() {
+      if (startSpy()) return;
+
+      // Targets not in DOM yet: wait for insertion
+      if (domObserver) return;
+      domObserver = new MutationObserver(() => {
+        if (startSpy()) {
+          domObserver.disconnect();
+          domObserver = null;
+        }
+      });
+
+      const root = document.body || document.documentElement;
+      if (root) {
+        domObserver.observe(root, { childList: true, subtree: true });
+      }
+
+      // Also retry a few times in case mutations are not observed (e.g. large async render)
+      let attempts = 0;
+      const maxAttempts = 20;
+      const tick = () => {
+        if (startSpy()) {
+          if (domObserver) domObserver.disconnect();
+          domObserver = null;
+          return;
+        }
+        attempts += 1;
+        if (attempts >= maxAttempts) return;
+        window.setTimeout(tick, 150);
+      };
+      window.setTimeout(tick, 0);
+    }
+
+    // If this script runs before the rest of the page modules mount, defer spy start.
+    if (document.readyState === 'loading') {
+      document.addEventListener(
+        'DOMContentLoaded',
+        () => {
+          tryStartSpyWithWait();
+        },
+        { once: true, signal: ac.signal }
+      );
+    } else {
+      tryStartSpyWithWait();
+    }
+
+    sectionEl.__zzProductSubnavCleanup = () => {
+      ac.abort();
+      if (rafId) window.cancelAnimationFrame(rafId);
+      rafId = 0;
+      if (domObserver) domObserver.disconnect();
+      domObserver = null;
+    };
+  })();
+</script>