subtrack/internal/web/static/app.js

/* 代打台 · 交互增强（无框架，全部渐进增强） */
(function () {
  'use strict';

  /* 提示条自动淡出 */
  document.querySelectorAll('[data-flash]').forEach(function (el) {
    setTimeout(function () {
      el.classList.add('hide');
      setTimeout(function () { el.remove(); }, 450);
    }, 4200);
  });

  /* 按 / 聚焦搜索框 */
  document.addEventListener('keydown', function (e) {
    if (e.key !== '/' || e.metaKey || e.ctrlKey || e.altKey) return;
    var tag = (document.activeElement && document.activeElement.tagName) || '';
    if (/^(INPUT|TEXTAREA|SELECT)$/.test(tag)) return;
    var s = document.querySelector('[data-search]');
    if (s) { e.preventDefault(); s.focus(); s.select(); }
  });

  /* 危险操作确认 */
  document.querySelectorAll('form[data-confirm]').forEach(function (f) {
    f.addEventListener('submit', function (e) {
      if (!window.confirm(f.getAttribute('data-confirm'))) e.preventDefault();
    });
  });

  /* 追加时长面板：点日历挑终止日 + 实时反算 */
  function parseDay(s) { return new Date(s + 'T00:00:00'); }
  function diffDays(a, b) { return Math.round((b.getTime() - a.getTime()) / 86400000); }

  document.querySelectorAll('form[data-extend]').forEach(function (form) {
    var base = parseDay(form.getAttribute('data-base'));
    var today = parseDay(form.getAttribute('data-today'));
    var input = form.querySelector('[data-end-input]');
    var endLabel = form.querySelector('[data-end-label]');
    var daysEl = form.querySelector('[data-days]');
    var remainEl = form.querySelector('[data-remain]');
    var buttons = form.querySelectorAll('.miniday');
    if (!input) return;

    function paint(date) {
      if (!date) return;
      var d = parseDay(date);
      input.value = date;
      if (endLabel) endLabel.textContent = date;
      var days = diffDays(base, d) + 1;
      if (daysEl) daysEl.textContent = days > 0 ? days : 0;
      var remain = diffDays(today, d) + 1;
      if (remainEl) remainEl.textContent = remain > 0 ? remain : 0;
      buttons.forEach(function (b) {
        b.classList.toggle('picked', b.getAttribute('data-date') === date);
      });
    }

    buttons.forEach(function (b) {
      b.addEventListener('click', function () {
        if (!b.disabled) paint(b.getAttribute('data-date'));
      });
    });
    input.addEventListener('change', function () { paint(input.value); });
    if (input.value) paint(input.value);
  });

  /* 新订阅表单：按套餐类型切换「天数 / 次数 / 终止日」 */
  document.querySelectorAll('form[data-sub-form]').forEach(function (form) {
    var sel = form.querySelector('[data-pkg-select]');
    var daysWrap = form.querySelector('[data-days-wrap]');
    var countWrap = form.querySelector('[data-count-wrap]');
    var endWrap = form.querySelector('[data-end-wrap]');
    if (!sel) return;

    function sync() {
      var opt = sel.options[sel.selectedIndex];
      var unit = opt && opt.getAttribute('data-unit');
      var amount = opt && opt.getAttribute('data-amount');
      if (unit === 'count') {
        if (daysWrap) daysWrap.hidden = true;
        if (countWrap) { countWrap.hidden = false; if (amount) countWrap.querySelector('input').value = amount; }
        if (endWrap) endWrap.hidden = true;
      } else if (unit === 'day') {
        if (daysWrap) { daysWrap.hidden = false; if (amount) daysWrap.querySelector('input').value = amount; }
        if (countWrap) countWrap.hidden = true;
        if (endWrap) endWrap.hidden = false;
      } else {
        if (daysWrap) daysWrap.hidden = false;
        if (countWrap) countWrap.hidden = true;
        if (endWrap) endWrap.hidden = true;
      }
    }
    sel.addEventListener('change', sync);
    sync();
  });

  /* 套餐表单：切换默认量单位文案 */
  document.querySelectorAll('form[data-package-form]').forEach(function (form) {
    var label = form.querySelector('[data-unit-label]');
    var radios = form.querySelectorAll('input[name="unit"]');
    function sync() {
      var v = 'day';
      radios.forEach(function (r) { if (r.checked) v = r.value; });
      if (label) label.textContent = v === 'count' ? '次' : '天';
    }
    radios.forEach(function (r) { r.addEventListener('change', sync); });
    sync();
  });
})();

/* ---------- 亮色 / 暗色切换 ----------
   偏好写 cookie，服务端首屏直接带 data-theme，不闪。
   没有 cookie 时跟随系统（由 CSS 的 prefers-color-scheme 决定）。 */
(function () {
  'use strict';
  var KEY = 'daili_theme';
  var btns = document.querySelectorAll('[data-theme-toggle]');
  if (!btns.length) return;

  function effective() {
    var attr = document.documentElement.getAttribute('data-theme');
    if (attr === 'light' || attr === 'dark') return attr;
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }

  Array.prototype.forEach.call(btns, function (btn) {
    btn.addEventListener('click', function () {
      var next = effective() === 'dark' ? 'light' : 'dark';
      document.documentElement.setAttribute('data-theme', next);
      document.cookie = KEY + '=' + next + '; path=/; max-age=31536000; SameSite=Lax';
    });
  });
})();