FamilyBook/assets/js/cs_picker.js

/* ============================================================================
   通用「色点下拉」（`.cs`）—— 全站一份
   ----------------------------------------------------------------------------
   起源 v44（用户 2026-10-12 第 1 条）：「新建日程，放在哪本，改成日历本后面加冒号。
   现在这句话和日历本下拉框还有前面的颜色，仍然不在一行，我建议把颜色放在下拉框里面，
   就跟电影的影院选择一样」。当时那段交互是**内联在 templates/calendar/index.php**
   里的，只服务日程页那一个 `#calPicker`。

   🔴🔴 v93（用户 2026-10-25）：
     「如果新建日程，日历本是拉不下来的，是空的，好像只有一个"工作"什么的。」
   真根因：首页「今天的日程」卡片右上角的「新建日程」，用的是**与日程页同一份**
   模板块（`templates/calendar/_add_modal.php`），HTML 一模一样 ⇒ 日历本那颗
   按钮和菜单都在页面上；可**交互全在日程页的内联脚本里**，首页没有那一段
   ⇒ 按钮点了没反应、菜单永远 `hidden`。用户看到的就是"拉不下来"；
   而按钮上那个默认值（「工作」）是服务端渲染出来的，所以"只有一个工作"。

   ⇒ 把那段交互抽成这一份，**按标记初始化**（`[data-cs-picker]`）：
     不认具体 id、不认哪个页面 —— 谁 require 了模板块谁就能用。

   契约（模板只需给容器加 `data-cs-picker`，其余全按类名找）：
     <div class="cs" data-cs-picker>
       <button class="cs-btn"><span class="cs-dot"><span class="cs-text">…
       <div class="cs-menu" hidden><div class="cs-list">…</div></div>
       <select name="…">            ← 真正的提交字段（单一真值来源）
     </div>

   ⚠️ **只认 `[data-cs-picker]`，不扫所有 `.cs`**：观影表单里的影院下拉
      （`templates/movies/form.php` 的 `#csBtn`）有它自己的一套内联脚本，
      两边都绑 = 点一次开两次、关两次（`add_modal.js` 头部记着同一个坑）。
   ⚠️ 幂等闸门 `data-cs-ready`：AJAX 换进来的表单（浮层里点「编辑」）要能被
      重复初始化，但同一个容器绝不能被绑两遍。
   ⚠️ 列表项**从 `<select>` 重建**：单一真值来源是那个 select。
      模板里已经输出的 `.cs-item` 只是"没有 JS 时的样子"，不被当作数据源。
   ============================================================================ */
(function () {
  'use strict';

  var MARK = 'data-cs-picker';
  var READY = 'data-cs-ready';

  function initOne(box) {
    if (!box || box.getAttribute(READY) === '1') { return false; }

    var btn  = box.querySelector('.cs-btn');
    var menu = box.querySelector('.cs-menu');
    var list = box.querySelector('.cs-list');
    var sel  = box.querySelector('select');
    /* `.cs-dot` 在按钮里和列表项里都有 —— `querySelector` 按文档序取第一个，
       而按钮一定排在菜单前面，所以取到的就是按钮里那颗。 */
    var dot  = btn ? btn.querySelector('.cs-dot') : null;
    var text = btn ? btn.querySelector('.cs-text') : null;
    if (!btn || !menu || !list || !sel) { return false; }

    /* ---- 从 select 重建列表项 -------------------------------------------- */
    function build() {
      list.innerHTML = '';
      Array.prototype.forEach.call(sel.options, function (o) {
        var b = document.createElement('button');
        b.type = 'button';
        b.className = 'cs-item' + (o.disabled ? ' is-disabled' : '');
        b.setAttribute('role', 'option');
        if (o.disabled) {
          b.disabled = true;
          b.title = o.getAttribute('title') || '';
        }
        b.setAttribute('data-id', o.value);
        b.setAttribute('data-color', o.getAttribute('data-color') || '');
        b.setAttribute('data-text', o.textContent || '');
        var d = document.createElement('span');
        d.className = 'cs-dot';
        d.style.background = o.getAttribute('data-color') || '';
        var s = document.createElement('span');
        s.textContent = o.textContent || '';
        b.appendChild(d);
        b.appendChild(s);
        list.appendChild(b);
      });
    }

    /* ---- 按钮外观跟选中项走 ---------------------------------------------- */
    function paint() {
      var o = sel.options[sel.selectedIndex];
      if (!o) { return; }
      if (text) { text.textContent = o.textContent || ''; }
      var c = o.getAttribute('data-color') || '';
      if (dot) {
        if (c) { dot.hidden = false; dot.style.background = c; } else { dot.hidden = true; }
      }
    }

    function closeMenu() {
      menu.hidden = true;
      btn.setAttribute('aria-expanded', 'false');
      box.setAttribute('data-open', '0');
    }
    function openMenu() {
      menu.hidden = false;
      btn.setAttribute('aria-expanded', 'true');
      box.setAttribute('data-open', '1');
    }

    build();
    paint();
    /* ⚠️ 原生 select 的 change 也可能由别处触发（无 JS 路径 / 老脚本），
       这里跟着刷新外观，保证"显示的值"永远是"要提交的值"。 */
    sel.addEventListener('change', paint);

    btn.addEventListener('click', function (e) {
      e.stopPropagation();
      if (menu.hidden) { openMenu(); } else { closeMenu(); }
    });
    menu.addEventListener('click', function (e) {
      var it = e.target.closest ? e.target.closest('.cs-item') : null;
      if (!it || it.disabled) { return; }
      e.stopPropagation();
      sel.value = it.getAttribute('data-id');
      sel.dispatchEvent(new Event('change', { bubbles: true }));
      closeMenu();
    });
    /* 点空白处收起。用 document 监听 + 判定 inside，不额外造遮罩节点。
       ⚠️ 必须**捕获阶段**：菜单项的 click 会 stopPropagation（冒泡阶段），
          捕获阶段先于它，这里判"点在不在容器里"才精确。 */
    document.addEventListener('click', function (e) {
      if (menu.hidden) { return; }
      if (box.contains(e.target)) { return; }
      closeMenu();
    }, true);
    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape' && !menu.hidden) { closeMenu(); }
    });

    box.setAttribute(READY, '1');
    return true;
  }

  /**
   * 初始化 `scope` 内所有还没初始化的色点下拉。给动态插入的 HTML 用
   * （浮层里点「编辑」→ AJAX 换进表单 → 这里补一次）。
   *
   * @param {Document|Element} [scope] 默认整个文档
   * @return {number} 本次真正绑了几个（0 = 都已经是就绪状态）
   */
  function init(scope) {
    var root = scope || document;
    var list = [];
    if (root.matches && root.matches('[' + MARK + ']')) { list.push(root); }
    var found = root.querySelectorAll('[' + MARK + ']');
    for (var i = 0; i < found.length; i++) { list.push(found[i]); }
    var n = 0;
    for (var j = 0; j < list.length; j++) {
      if (initOne(list[j])) { n++; }
    }
    return n;
  }

  window.fbInitCsPicker = init;

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function () { init(document); });
  } else {
    init(document);
  }
})();