Jump to content

MediaWiki:Minerva.js

From Artemis Archive
Revision as of 11:39, 30 April 2025 by Bxuwd (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* All JavaScript here will be loaded for users of the MinervaNeue skin */
$(document).ready(function () {
  // 目标是包含 Home, Random 的那个 <ul>
  var $navUl = $('#p-navigation');

  // 确保目标列表存在
  if ($navUl.length) {

    // --- 辅助函数:创建一个带图标和文字的菜单项 LI ---
    // id: 用于 li 的 id 后缀 (e.g., 'cat-loc' -> id='menu-item-cat-loc')
    // text: 显示的链接文字
    // pageName: 链接指向的维基页面名称 (或完整 URL)
    // iconClass: (可选) 用于图标的 mw-ui-icon- 类名 (e.g., 'mw-ui-icon-minerva-listBullet')
    function createMenuItem(id, text, pageName, iconClass) {
      var $li = $('<li>').attr('id', 'menu-item-' + id);
      var $a = $('<a>')
        .addClass('menu__item') // 应用基础菜单项样式
        .attr('href', mw.util.getUrl(pageName)) // 使用 MediaWiki 函数生成 URL
        .attr('data-mw', 'interface'); // 标准属性

      // 添加图标 Span (如果提供了 iconClass)
      var iconSpanClass = 'mw-ui-icon'; // 基础图标类
      if (iconClass) {
         iconSpanClass += ' ' + iconClass; // 添加具体图标类
      }
      $('<span>').addClass(iconSpanClass).appendTo($a);

      // 添加文字 Span
      $('<span>').text(text).appendTo($a);

      $li.append($a);
      return $li;
    }

    // --- 插入点:尝试插入到 "Random" (#menu-item-random) 后面 ---
    var $insertAfterElement = $navUl.find('#menu-item-random');

    // 如果找不到 "Random",则退回到在列表末尾追加
    var appendMode = !$insertAfterElement.length;
    if (appendMode) {
        $insertAfterElement = $navUl; // 直接追加到 UL
    }

    // --- 创建并添加 Categories 链接 ---
    // 注意:Minerva 菜单通常是扁平列表,不直接支持段落标题。
    // 如果需要视觉分隔,后续可以通过 CSS 为特定 li 添加边框或边距。
    // 这里我们直接添加链接。

    var $catLoc = createMenuItem('cat-loc', 'By Location/地点', 'Animal cruelty cases by location', 'mw-ui-icon-minerva-listBullet'); // 使用列表符号图标
    var $catSp  = createMenuItem('cat-sp', 'By Species/物种', 'Animal cruelty cases by species', 'mw-ui-icon-minerva-listBullet');
    var $catYr  = createMenuItem('cat-yr', 'By Year/年份', 'Animal cruelty cases by year', 'mw-ui-icon-minerva-listBullet');

    // --- 创建并添加 Resources 链接 ---
    var $resUl  = createMenuItem('res-ul', 'Useful links/实用链接', 'useful links', 'mw-ui-icon-minerva-link'); // 使用链接图标
    var $resDoc = createMenuItem('res-doc', 'Documentaries/纪录片', 'documentaries', 'mw-ui-icon-minerva-articles'); // 使用文章图标
    var $resPsy = createMenuItem('res-psy', 'Psychological study/心理研究', 'psychological study', 'mw-ui-icon-minerva-userContributions'); // 使用用户贡献图标 (仅示例)


    // --- 执行插入 ---
    if (appendMode) {
        // 追加到末尾
        $insertAfterElement.append($catLoc);
        $insertAfterElement.append($catSp);
        $insertAfterElement.append($catYr);
        $insertAfterElement.append($resUl);
        $insertAfterElement.append($resDoc);
        $insertAfterElement.append($resPsy);
    } else {
        // 依次插入到 "Random" 之后
        $insertAfterElement.after($resPsy); // 先插入最后一个,方便链式调用
        $insertAfterElement.after($resDoc);
        $insertAfterElement.after($resUl);
        $insertAfterElement.after($catYr);
        $insertAfterElement.after($catSp);
        $insertAfterElement.after($catLoc);
        // 注意:jQuery .after() 插入后元素仍在原位置,所以是反序插入或者用变量跟踪上一个插入的元素
        // 一个更清晰的方式可能是:
        // var $lastItem = $insertAfterElement;
        // $lastItem = $lastItem.after($catLoc).next(); // after 返回原始集合, next() 移到新插入的元素
        // $lastItem = $lastItem.after($catSp).next();
        // ... etc. (但上面的反序插入代码也能工作)
    }

  } else {
    // 如果找不到 #p-navigation,在控制台警告
    console.warn('Could not find #p-navigation element to append mobile menu items.');
  }
});