给 Dawn 增加倒计时分区：同源截止时间、服务端时钟与编辑器清理

{{ 'section-countdown-timer.css' | asset_url | stylesheet_tag }}
<script src="{{ 'countdown-timer.js' | asset_url }}" defer="defer"></script>

{%- liquid
  assign ends_at = shop.metafields.promo.ends_at.value
  if ends_at == blank
    assign ends_at = section.settings.ends_at_fallback
  endif
  assign ends_at = ends_at | strip
  assign last_char = ends_at | slice: -1
  assign has_offset = false
  if last_char == 'Z' or ends_at contains '+'
    assign has_offset = true
  endif
  if ends_at != blank and has_offset == false
    assign ends_at = ends_at | append: 'Z'
  endif
  assign ends_at_unix = ends_at | date: '%s' | plus: 0
  assign rendered_at_unix = 'now' | date: '%s' | plus: 0
  assign state = 'running'
  if ends_at == blank or ends_at_unix == 0
    assign state = 'missing'
  elsif rendered_at_unix >= ends_at_unix
    assign state = 'ended'
  endif
-%}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- if state == 'missing' -%}
  {%- if request.design_mode -%}
    <div class="page-width section-{{ section.id }}-padding">
      <p class="caption-with-letter-spacing">{{ 'sections.countdown_timer.missing_end_time' | t }}</p>
    </div>
  {%- endif -%}
{%- else -%}
  <div class="color-{{ section.settings.color_scheme }} gradient section-{{ section.id }}-padding">
    <countdown-timer
      class="countdown-timer page-width"
      data-ends-at="{{ ends_at | escape }}"
      data-state="{{ state }}"
      data-section-id="{{ section.id }}"
    >
      {%- if section.settings.heading != blank -%}
        <h2 class="countdown-timer__heading inline-richtext {{ section.settings.heading_size }}">
          {{ section.settings.heading }}
        </h2>
      {%- endif -%}

      <p class="countdown-timer__ends-at">
        {{ 'sections.countdown_timer.ends_at_html' | t: ends_at: ends_at | date: '%Y-%m-%d %H:%M UTC' }}
        <time datetime="{{ ends_at | escape }}" data-ends-at-local hidden></time>
      </p>

      <div class="countdown-timer__clock" data-clock{% if state == 'ended' %} hidden{% endif %} aria-hidden="true">
        {%- assign units = 'days,hours,minutes,seconds' | split: ',' -%}
        {%- for unit in units -%}
          {%- assign unit_key = 'sections.countdown_timer.' | append: unit -%}
          <div class="countdown-timer__unit" data-unit-wrapper="{{ unit }}">
            <span class="countdown-timer__value h2" data-unit="{{ unit }}">--</span>
            <span class="countdown-timer__label caption-with-letter-spacing">{{ unit_key | t }}</span>
          </div>
        {%- endfor -%}
      </div>

      <p class="countdown-timer__ended" data-ended{% unless state == 'ended' %} hidden{% endunless %}>
        {{ 'sections.countdown_timer.ended' | t }}
      </p>

      {%- if section.settings.show_hide_button and state != 'ended' -%}
        <button type="button" class="link link--text countdown-timer__hide" data-hide hidden>
          {{ 'sections.countdown_timer.hide' | t }}
        </button>
      {%- endif -%}

      <p class="visually-hidden" role="status" data-status></p>
    </countdown-timer>
  </div>
{%- endif -%}

{% schema %}
{
  "name": "t:sections.countdown-timer.name",
  "tag": "section",
  "class": "section",
  "disabled_on": { "groups": ["footer"] },
  "settings": [
    { "type": "paragraph", "content": "t:sections.countdown-timer.settings.paragraph.content" },
    {
      "type": "text",
      "id": "ends_at_fallback",
      "label": "t:sections.countdown-timer.settings.ends_at_fallback.label",
      "info": "t:sections.countdown-timer.settings.ends_at_fallback.info"
    },
    {
      "type": "inline_richtext",
      "id": "heading",
      "default": "t:sections.countdown-timer.settings.heading.default",
      "label": "t:sections.countdown-timer.settings.heading.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        { "value": "h2", "label": "t:sections.all.heading_size.options__1.label" },
        { "value": "h1", "label": "t:sections.all.heading_size.options__2.label" },
        { "value": "h0", "label": "t:sections.all.heading_size.options__3.label" }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "checkbox",
      "id": "show_hide_button",
      "default": true,
      "label": "t:sections.countdown-timer.settings.show_hide_button.label",
      "info": "t:sections.countdown-timer.settings.show_hide_button.info"
    },
    { "type": "color_scheme", "id": "color_scheme", "label": "t:sections.all.colors.label", "default": "scheme-1" },
    { "type": "header", "content": "t:sections.all.padding.section_padding_heading" },
    { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_top", "default": 36 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_bottom", "default": 36 }
  ],
  "presets": [{ "name": "t:sections.countdown-timer.presets.name" }]
}
{% endschema %}

if (!customElements.get('countdown-timer')) {
  customElements.define(
    'countdown-timer',
    class CountdownTimer extends HTMLElement {
      static STORAGE_KEY = 'countdown-timer-hidden';

      connectedCallback() {
        this.endsAt = Date.parse(this.dataset.endsAt);
        this.clock = this.querySelector('[data-clock]');
        this.values = Object.fromEntries(
          Array.from(this.querySelectorAll('[data-unit]')).map((element) => [element.dataset.unit, element])
        );
        this.secondsWrapper = this.querySelector('[data-unit-wrapper="seconds"]');
        this.endedMessage = this.querySelector('[data-ended]');
        this.status = this.querySelector('[data-status]');
        this.hideButton = this.querySelector('[data-hide]');
        this.localTime = this.querySelector('[data-ends-at-local]');
        this.skew = 0;
        this.announcedHour = false;

        if (Number.isNaN(this.endsAt) || this.dataset.state === 'ended') {
          this.finish(false);
          return;
        }

        this.renderLocalTime();
        this.hideButton?.addEventListener('click', this.onHide.bind(this));
        if (this.hideButton && this.readHiddenPreference()) {
          this.hideClock();
        } else {
          this.hideButton?.removeAttribute('hidden');
        }

        this.estimateSkew().finally(() => {
          if (!this.isConnected) return;
          this.tick();
        });
      }

      disconnectedCallback() {
        clearTimeout(this.timer);
      }

      async estimateSkew() {
        try {
          const sentAt = Date.now();
          const response = await fetch(window.location.href, { method: 'HEAD', cache: 'no-store' });
          const serverDate = Date.parse(response.headers.get('date'));
          if (Number.isNaN(serverDate)) return;
          const roundTrip = Date.now() - sentAt;
          this.skew = serverDate + roundTrip / 2 - Date.now();
        } catch {
          this.skew = 0;
        }
      }

      remainingMs() {
        return this.endsAt - (Date.now() + this.skew);
      }

      tick() {
        const remaining = this.remainingMs();
        if (remaining <= 0) {
          this.finish(true);
          return;
        }

        const totalSeconds = Math.floor(remaining / 1000);
        const parts = {
          days: Math.floor(totalSeconds / 86400),
          hours: Math.floor((totalSeconds % 86400) / 3600),
          minutes: Math.floor((totalSeconds % 3600) / 60),
          seconds: totalSeconds % 60,
        };
        const underOneHour = remaining < 3600 * 1000;
        Object.entries(parts).forEach(([unit, value]) => {
          const element = this.values[unit];
          if (element) element.textContent = String(value).padStart(2, '0');
        });
        this.secondsWrapper?.toggleAttribute('hidden', !underOneHour);

        if (underOneHour && !this.announcedHour) {
          this.announcedHour = true;
          this.announce(window.countdownStrings.lessThanOneHour);
        }

        const interval = underOneHour ? 1000 : 60 * 1000;
        this.timer = setTimeout(this.tick.bind(this), interval - (remaining % interval || interval));
      }

      finish(announce) {
        clearTimeout(this.timer);
        this.dataset.state = 'ended';
        this.clock?.setAttribute('hidden', '');
        this.hideButton?.setAttribute('hidden', '');
        this.endedMessage?.removeAttribute('hidden');
        if (announce) this.announce(window.countdownStrings.ended);
      }

      announce(message) {
        if (!this.status || !message) return;
        this.status.textContent = '';
        requestAnimationFrame(() => {
          this.status.textContent = message;
        });
      }

      renderLocalTime() {
        if (!this.localTime || typeof Intl === 'undefined') return;
        try {
          const formatter = new Intl.DateTimeFormat(document.documentElement.lang || undefined, {
            dateStyle: 'medium',
            timeStyle: 'short',
            timeZoneName: 'short',
          });
          this.localTime.textContent = ` (${formatter.format(new Date(this.endsAt))})`;
          this.localTime.removeAttribute('hidden');
        } catch {
          // keep the server-rendered UTC text only
        }
      }

      onHide() {
        this.hideClock();
        try {
          sessionStorage.setItem(CountdownTimer.STORAGE_KEY, '1');
        } catch {
          // storage unavailable; hide for this page only
        }
      }

      hideClock() {
        this.clock?.setAttribute('hidden', '');
        this.hideButton?.setAttribute('hidden', '');
        clearTimeout(this.timer);
        this.timer = setTimeout(this.tick.bind(this), 60 * 1000);
      }

      readHiddenPreference() {
        try {
          return sessionStorage.getItem(CountdownTimer.STORAGE_KEY) === '1';
        } catch {
          return false;
        }
      }
    }
  );
}

.countdown-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.countdown-timer__heading,
.countdown-timer__ends-at,
.countdown-timer__ended {
  margin: 0;
}

.countdown-timer__clock {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.countdown-timer__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 6rem;
}

.countdown-timer__value {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: no-preference) {
  .countdown-timer__value {
    transition: opacity var(--duration-short) ease;
  }
}

.countdown-timer__hide {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.2rem;
}

"countdown_timer": {
  "days": "Days",
  "hours": "Hours",
  "minutes": "Minutes",
  "seconds": "Seconds",
  "ends_at_html": "Ends {{ ends_at }}",
  "ended": "This offer has ended.",
  "less_than_one_hour": "Less than one hour left.",
  "hide": "Hide countdown",
  "missing_end_time": "Countdown: set the shop metafield promo.ends_at or the fallback end time to show this section."
}

window.countdownStrings = {
  ended: `{{ 'sections.countdown_timer.ended' | t }}`,
  lessThanOneHour: `{{ 'sections.countdown_timer.less_than_one_hour' | t }}`,
};