HomeDash/web/navi.js

(() => {
  'use strict';

  // 浏览器插件在 document_start 阶段写入这个属性（见 extension/*/detect.js）。
  const EXT_ATTR = 'data-navi-ext';
  const INSTALL_SELECTOR = 'a[href*="/extension/install"]';

  const SVG_NS = 'http://www.w3.org/2000/svg';

  function svg(paths, opts = {}) {
    const el = document.createElementNS(SVG_NS, 'svg');
    el.setAttribute('viewBox', opts.viewBox || '0 0 24 24');
    el.setAttribute('fill', 'none');
    el.setAttribute('stroke', 'currentColor');
    el.setAttribute('stroke-width', opts.width || '2.2');
    el.setAttribute('stroke-linecap', 'round');
    el.setAttribute('stroke-linejoin', 'round');
    el.setAttribute('aria-hidden', 'true');
    if (opts.size) {
      el.setAttribute('width', opts.size);
      el.setAttribute('height', opts.size);
    }
    paths.forEach((p) => {
      const node = document.createElementNS(SVG_NS, p.tag);
      Object.keys(p.attrs).forEach((k) => node.setAttribute(k, p.attrs[k]));
      el.append(node);
    });
    return el;
  }

  const magnifierIcon = () => svg([
    { tag: 'circle', attrs: { cx: '11', cy: '11', r: '7.5' } },
    { tag: 'line', attrs: { x1: '20.5', y1: '20.5', x2: '16.2', y2: '16.2' } },
  ], { size: '20' });

  const arrowIcon = () => svg([
    { tag: 'line', attrs: { x1: '5', y1: '12', x2: '19', y2: '12' } },
    { tag: 'polyline', attrs: { points: '13 6 19 12 13 18' } },
  ]);

  const gearIcon = () => svg([
    { tag: 'circle', attrs: { cx: '12', cy: '12', r: '3.2' } },
    { tag: 'path', attrs: { d: 'M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.7 1.7 0 0 0-1.87-.34 1.7 1.7 0 0 0-1.03 1.56V21a2 2 0 1 1-4 0v-.09A1.7 1.7 0 0 0 8.9 19.3a1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.56-1.03H3a2 2 0 1 1 0-4h.09A1.7 1.7 0 0 0 4.7 8.9a1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6h.09A1.7 1.7 0 0 0 10.6 3.04V3a2 2 0 1 1 4 0v.09a1.7 1.7 0 0 0 1.03 1.56 1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9v.09a1.7 1.7 0 0 0 1.56 1.03H21a2 2 0 1 1 0 4h-.09a1.7 1.7 0 0 0-1.51 1.03z' } },
  ], { size: '20', width: '1.9' });

  function extensionInstalled() {
    return document.documentElement.hasAttribute(EXT_ATTR);
  }

  // 已装插件的浏览器不需要安装入口：连外层网格单元一起隐藏，
  // 否则 .item-wrapper 会留下一个空位。
  function hideInstallEntry() {
    if (!extensionInstalled()) return;
    document.querySelectorAll(INSTALL_SELECTOR).forEach((link) => {
      const cell = link.closest('.item-wrapper') || link.parentElement || link;
      if (cell.style.display !== 'none') cell.style.display = 'none';
    });
  }

  // 底部搜索栏：默认收起成一个放大镜悬浮球（左下角），
  // 点放大镜展开成输入框，再点输入框里的放大镜收起。
  function mountSearch() {
    if (document.querySelector('.navi-search-bar')) return;

    const form = document.createElement('form');
    form.className = 'navi-search-bar';
    form.dataset.state = 'collapsed';
    form.method = 'GET';
    form.action = '/search';
    form.target = '_blank';
    form.setAttribute('role', 'search');

    const toggle = document.createElement('button');
    toggle.type = 'button';
    toggle.className = 'navi-search-toggle';
    toggle.setAttribute('aria-label', '展开搜索');
    toggle.setAttribute('aria-expanded', 'false');
    toggle.append(magnifierIcon());

    const input = document.createElement('input');
    input.type = 'search';
    input.name = 'q';
    input.placeholder = '搜索…';
    input.autocomplete = 'off';
    input.tabIndex = -1;
    input.setAttribute('aria-label', '搜索内容');

    const submit = document.createElement('button');
    submit.type = 'submit';
    submit.className = 'navi-search-submit';
    submit.setAttribute('aria-label', '开始搜索');
    submit.append(arrowIcon());

    const setState = (state) => {
      const open = state === 'open';
      form.dataset.state = open ? 'open' : 'collapsed';
      toggle.setAttribute('aria-expanded', String(open));
      toggle.setAttribute('aria-label', open ? '收起搜索' : '展开搜索');
      input.tabIndex = open ? 0 : -1;
      if (open) {
        input.focus({ preventScroll: true });
      } else {
        input.value = '';
        input.blur();
      }
    };

    toggle.addEventListener('click', (evt) => {
      evt.preventDefault();
      setState(form.dataset.state === 'open' ? 'collapsed' : 'open');
    });

    // Esc 收起（不阻止其它默认行为）
    form.addEventListener('keydown', (evt) => {
      if (evt.key === 'Escape' && form.dataset.state === 'open') {
        evt.stopPropagation();
        setState('collapsed');
      }
    });

    form.append(toggle, input, submit);
    document.body.append(form);
  }

  // Dashy 页面没有管理入口：右下角补一个悬浮链接到 /admin/。
  function mountAdminEntry() {
    if (document.querySelector('.navi-admin-entry')) return;
    const link = document.createElement('a');
    link.className = 'navi-admin-entry';
    link.href = '/admin/';
    link.title = '导航管理';
    link.setAttribute('aria-label', '导航管理');
    link.append(gearIcon());
    document.body.append(link);
  }

  // 极简视图（/minimal）与工作空间视图不渲染 Dashy 页脚，备案号会整段消失。
  // 这里从只读的 pageinfo 取回页脚 HTML 补一份，保证每个视图都能看到备案信息。
  let footerPending = false;
  async function mountFooter() {
    if (footerPending || document.querySelector('.navi-footer')) return;
    footerPending = true;
    try {
      const res = await fetch('/admin/api/pageinfo', { credentials: 'same-origin' });
      if (!res.ok) return;
      const info = await res.json();
      const html = (info && info.footer) || '';
      if (!html) return;
      // 用 DOMParser 解析（不用 innerHTML），只取 .navi-footer 节点。
      const parsed = new DOMParser().parseFromString(html, 'text/html');
      const node = parsed.querySelector('.navi-footer');
      if (!node || document.querySelector('.navi-footer')) return;
      const host = document.createElement('div');
      host.className = 'navi-footer-host';
      host.append(node);
      const bar = document.querySelector('.navi-search-bar');
      if (bar && bar.parentNode) bar.parentNode.insertBefore(host, bar);
      else document.body.append(host);
    } catch (err) {
      // 补页脚失败不影响搜索等主功能
    } finally {
      footerPending = false;
    }
  }

  function run() {
    mountSearch();
    mountAdminEntry();
    hideInstallEntry();
    mountFooter();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', run, { once: true });
  } else {
    run();
  }
  new MutationObserver(run).observe(document.documentElement, { childList: true, subtree: true });
})();