FamilyBook/assets/js/person_picker.js

/**
 * 全局人员选择器（v24 用户第 11 条）
 *
 * 一个页面里可能有多个 .pp（观影同行人 / 旅程同行人 / 资源归属 / 共享给谁 …），
 * 所以这里按容器逐个初始化，状态全挂在容器自己身上，互不影响。
 *
 * 三件事：
 *   ① 汉字 → 拼音首字母（Intl 拼音排序 + 23 个锚字二分，零依赖）
 *   ② 搜索：名字 / 显示名 / 首字母 三者任一命中就留下
 *   ③ chips 与弹窗里的勾选状态双向同步
 */
(function () {
  'use strict';

  /* ------------------------------------------------------------------
   * 汉字 → 拼音首字母
   *
   * 做法：a..z 各挑一个「锚字」（没有 i / u / v 开头的常用字，所以是 23 个），
   * 用拼音 collation 二分定位某个汉字落在哪一段 —— 落在「垃」之后、「妈」之前
   * 就是 l。整套零依赖，不需要塞一张几万字的拼音表进来。
   *
   * ⚠️ 浏览器不支持拼音排序时返回 null：此时只按名字搜，不硬出错误结果。
   * ---------------------------------------------------------------- */
  var initialsOf = (function () {
    var anchors = '阿八擦搭娥发嘎哈击喀垃妈拿哦啪期然撒塌挖昔压匝';
    var letters = 'abcdefghjklmnopqrstwxyz';
    var coll;
    try { coll = new Intl.Collator('zh-Hans-CN-u-co-pinyin'); } catch (e) { return null; }
    // 排序没真正生效时 compare 会退化成按码点/笔画，这里直接认不出来 → 放弃拼音
    if (!coll || coll.compare('阿', '匝') >= 0) { return null; }
    return function (s) {
      var out = '';
      for (var i = 0; i < s.length; i++) {
        var ch = s.charAt(i);
        if (/[a-zA-Z]/.test(ch)) { out += ch.toUpperCase(); continue; }
        if (ch.charCodeAt(0) < 0x2E80) { continue; }          // 非 CJK：不产字母
        var lo = 0, hi = anchors.length - 1, best = -1;
        while (lo <= hi) {
          var mid = (lo + hi) >> 1;
          if (coll.compare(ch, anchors.charAt(mid)) >= 0) { best = mid; lo = mid + 1; }
          else { hi = mid - 1; }
        }
        if (best >= 0) { out += letters.charAt(best); }
      }
      return out;
    };
  })();

  /**
   * q 是否是 s 的**子序列**。
   * 为什么不用 indexOf：「杨永全」的首字母是 yyq，用户很自然地会打 yq ——
   * 连续子串匹配不到，子序列能。选人这种小列表宁可放宽一点，也别让人以为坏了。
   */
  function isSubSeq(q, s) {
    if (!q) { return true; }
    var i = 0;
    for (var j = 0; j < s.length && i < q.length; j++) {
      if (s.charAt(j) === q.charAt(i)) { i++; }
    }
    return i === q.length;
  }

  function init(root) {
    var id = root.getAttribute('data-pp') || '';
    var isMulti = root.getAttribute('data-pp-mode') !== 'single';
    var modal = root.querySelector('.pp-modal');
    var openBtn = root.querySelector('.pp-open');
    var closeBtn = root.querySelector('.pp-close');
    var search = root.querySelector('.pp-search');
    var list = root.querySelector('.pp-list');
    var chips = root.querySelector('.pp-chips');
    var emptyTip = root.querySelector('.pp-empty');
    if (!modal || !list || !chips) { return; }

    // 预计算每个人的首字母串，挂在 data-initials 上（列表再长也只是算一次）
    // ⚠️⚠️ **每个字段单独算，用空格分隔，绝不拼成一串**。
    //    "姓名 + 称呼" 拼起来会造出**跨字段的巧合命中**：
    //    用户 2026-10-03 实测「输 yy 把岳父搜出来」——洪勇的称呼是"岳父"，
    //    `hy` + `yf` = `hyyf`，子序列 `yy` 正好跨过边界命中；
    //    单独看 `hy` 与 `yf` 都不含 `yy`。逐字段判才是对的。
    //    服务端（App\Pinyin::matches）本来就是逐字段判的，两边口径保持一致。
    /**
     * 给一批 .pp-item 算 data-initials 与首字母徽标。
     * ⚠️ 抽成函数是因为**动态建出来的清单也要走同一套**（v24 第 11 批 #7 续：
     *    候选人清单改成打开弹框时才建，建完必须补算首字母，
     *    否则"输入 yyq 找杨永全"这条既有功能会静默失效）。
     */
    function decorateItems(scope) {
      Array.prototype.forEach.call((scope || list).querySelectorAll('.pp-item'), function (el) {
        var parts = [];
        var n1 = el.getAttribute('data-name') || '';
        var n2 = el.getAttribute('data-shown') || '';
        [n1, n2].forEach(function (s) {
          if (!s) { return; }
          var ini = initialsOf ? initialsOf(s) : '';
          if (ini && parts.indexOf(ini.toLowerCase()) < 0) { parts.push(ini.toLowerCase()); }
        });
        el.setAttribute('data-initials', parts.join(' '));
        // 徽标只显示**姓名的**首字母（称呼那串太杂，显示出来反而更乱）
        var badge = el.querySelector('.pp-initials');
        var first = initialsOf ? initialsOf(n1) : '';
        if (badge && first) { badge.textContent = first; badge.hidden = false; }
      });
    }
    decorateItems();

    function syncChips() {
      chips.innerHTML = '';
      var any = false;
      Array.prototype.forEach.call(list.querySelectorAll('.pp-item input:checked'), function (box) {
        if (box.value === '0') { return; }                // 「不选」不进 chips
        var item = box.closest('.pp-item');
        if (!item) { return; }
        any = true;
        // ⚠️ 必须点名取 .pp-name：.pp-item 里第一个 span 是隐藏的首字母占位，
        //    早年靠「取第一个 span 当名字」碰巧成立，加了首字母徽标后 chip 就没名字了。
        var nameEl = item.querySelector('.pp-name');
        var av = item.querySelector('.pp-av');
        var chip = document.createElement('span');
        chip.className = 'pp-chip';
        chip.setAttribute('data-id', box.value);
        if (av) {
          var im = document.createElement('img');
          im.src = av.getAttribute('src');                // 服务端已 e() 过，这里原样搬
          im.alt = '';
          chip.appendChild(im);
        }
        var nm = document.createElement('span');
        nm.className = 'pp-name';
        nm.textContent = nameEl ? nameEl.textContent : box.value;
        chip.appendChild(nm);
        if (isMulti) {
          var x = document.createElement('button');
          x.type = 'button'; x.className = 'pp-x'; x.textContent = '×';
          x.title = '移除'; x.setAttribute('data-id', box.value);
          chip.appendChild(x);
        }
        chips.appendChild(chip);
      });
      // ⚠️ 多选且一个都没选时**不要**塞占位 chip：.pp-chip 自己写了 display:inline-flex，
      //    再给它 hidden 也藏不掉（作者样式压过 UA 的 [hidden]），会留下一个空胶囊。
      if (!any && !isMulti) {
        var ph = document.createElement('span');
        ph.className = 'pp-chip pp-chip-empty';
        ph.textContent = '未选择';
        chips.appendChild(ph);
      }
    }

    function applyFilter() {
      var q = (search.value || '').trim().toLowerCase();
      var shown = 0;
      Array.prototype.forEach.call(list.querySelectorAll('.pp-item'), function (el) {
        // ⚠️ 首字母按**空格分隔的多段**逐段独立判 —— 见上面写 data-initials 时的说明
        //    （把"姓名+称呼"拼成一串会让 `yy` 跨字段命中"洪勇/岳父"）。
        var inis = (el.getAttribute('data-initials') || '').split(/\s+/);
        var iniHit = false;
        for (var i = 0; i < inis.length; i++) {
          if (inis[i] && isSubSeq(q, inis[i])) { iniHit = true; break; }
        }
        var hit = !q ||
          (el.getAttribute('data-name') || '').toLowerCase().indexOf(q) >= 0 ||
          (el.getAttribute('data-shown') || '').toLowerCase().indexOf(q) >= 0 ||
          iniHit;
        el.hidden = !hit;
        if (hit) { shown++; }
      });
      if (emptyTip) { emptyTip.hidden = shown > 0; }
    }

    /**
     * 按需把候选人清单建出来（v24 第 11 批 #7 续）。
     *
     * 为什么不在服务端首屏渲染：线上真实数据下每页 1~3 个选人组件 × 1184 人
     * = 几千个 <label>+<input>（账目页因此 6.9 MB / 16788 个 input），
     * 密码管理器逐个扫描 → 页面卡死。
     * 现在只有在**用户真要看候选人**（打开弹框）的那一刻才建 DOM。
     * 幂等：建过一次就打标记，反复开合不再重建。
     */
    function buildList() {
      if (list.getAttribute('data-pp-built') === '1') { return; }
      var raw = list.getAttribute('data-pp-people') || '[]';
      var people = [];
      try { people = JSON.parse(raw) || []; } catch (e) { people = []; }
      var selAttr = list.getAttribute('data-pp-selected') || '';
      var selected = selAttr === '' ? [] : selAttr.split(',').map(function (v) { return String(v); });
      var type = list.getAttribute('data-pp-type') || 'radio';
      var fname = list.getAttribute('data-pp-name') || '';

      var frag = document.createDocumentFragment();
      people.forEach(function (p) {
        var lab = document.createElement('label');
        lab.className = 'pp-item';
        lab.setAttribute('data-name', p.name || '');
        lab.setAttribute('data-shown', p.shown || p.name || '');
        var inp = document.createElement('input');
        inp.type = type;
        inp.name = fname;
        inp.value = String(p.id);
        if (selected.indexOf(String(p.id)) >= 0) { inp.checked = true; }
        lab.appendChild(inp);
        var av = document.createElement('img');
        av.className = 'pp-av';
        av.src = p.avatar || '';
        av.alt = '';
        av.loading = 'lazy';
        lab.appendChild(av);
        var nm = document.createElement('span');
        nm.className = 'pp-name';
        nm.textContent = p.shown || p.name || '';
        lab.appendChild(nm);
        var ini = document.createElement('span');
        ini.className = 'pp-initials';
        ini.hidden = true;
        lab.appendChild(ini);
        frag.appendChild(lab);
      });
      // 插在「不选」与 .pp-empty 之间（保持"不选"永远在最前）
      var empty = list.querySelector('.pp-empty');
      list.insertBefore(frag, empty || null);
      list.setAttribute('data-pp-built', '1');
      // 首字母要补算（组件的拼音筛选依赖它）—— 复用上面那套，口径只有一处
      decorateItems(list);
    }

    function openModal() {
      modal.hidden = false;
      buildList();
      search.value = '';
      applyFilter();
      syncChips();
      search.focus();
    }
    function closeModal() { modal.hidden = true; }

    if (openBtn) { openBtn.addEventListener('click', openModal); }
    if (closeBtn) { closeBtn.addEventListener('click', closeModal); }
    modal.addEventListener('click', function (e) { if (e.target === modal) { closeModal(); } });
    search.addEventListener('input', applyFilter);

    chips.addEventListener('click', function (e) {
      var x = e.target.closest ? e.target.closest('.pp-x') : null;
      if (!x) { return; }
      var gid = x.getAttribute('data-id');
      Array.prototype.forEach.call(list.querySelectorAll('.pp-item input'), function (box) {
        if (box.value === gid) { box.checked = false; }
      });
      syncChips();
    });

    /* 多选：勾一个 = 出 chip + 关弹窗（再添加就再点一次「+ 添加人」）；
       单选：点一个 = 换掉当前这个人 + 关弹窗 */
    list.addEventListener('change', function (e) {
      if (!e.target || e.target.tagName !== 'INPUT') { return; }
      syncChips();
      if (e.target.checked) { closeModal(); }
    });

    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape' && !modal.hidden) { closeModal(); }
    });

    syncChips();
    // 把"重画 chips"暴露出去：外部程序化改了勾选（ppSetSelected）之后要能刷新展示
    // ⚠️ 这里的作用域里变量名是 `root`（不是 box）—— 写成 box 会抛
    //    "box is not defined"，而且是在**初始化末尾**抛，前面都正常，
    //    只有后面的 ppSetSelected 才失效（e2e 抓不到，真浏览器才报）。
    root.__ppSync = syncChips;
  }

  /**
   * 对外接口：按**字段名**设置某个选人组件的选中项（单选）。
   *
   * 为什么需要它：共享弹框（名册的动作框、财务的修改框）打开时要把"这一行的人"
   * 灌进组件里。组件是服务端渲染的、选中状态靠 `input:checked`，
   * 从外部只知道字段名（person_id / attendees[]…），不知道 DOM 里的 id。
   *
   * 用法：window.ppSetSelected('person_id', 12)   // 0 或不传 = 不指定
   * ⚠️ 多选组件请传数组或逗号分隔的字符串。
   */
  window.ppSetSelected = function (name, value) {
    if (!name) { return false; }
    var box = document.querySelector('.pp[data-pp-name="' + name + '"]');
    if (!box) {
      // 兼容：老渲染里没有 data-pp-name 时，退化成"找包含该 name 的 radio/checkbox"
      var host = document.querySelector('.pp');
      if (!host) { return false; }
      box = host;
    }
    var want = [];
    if (Array.isArray(value)) {
      want = value.map(String);
    } else if (typeof value === 'string' && value.indexOf(',') >= 0) {
      want = value.split(',');
    } else {
      want = [String(value == null ? '' : value)];
    }
    Array.prototype.forEach.call(box.querySelectorAll('.pp-item input'), function (inp) {
      inp.checked = want.indexOf(String(inp.value)) >= 0;
    });
    // 同步 chips（组件的选中态展示）
    if (typeof box.__ppSync === 'function') { box.__ppSync(); }
    return true;
  };

  function boot() {
    Array.prototype.forEach.call(document.querySelectorAll('.pp'), init);
  }

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