Jump to content

MediaWiki:Common.js: Difference between revisions

From Bconomy Wiki
Move section trees into the sidebar
 
Show section trees above Contents in the left column
Line 1: Line 1:
/* Section trees ({{… sidebar}} templates, class bc-section-nav).
/* Section trees ({{… sidebar}} templates, class bc-section-nav).
  * Moves the tree on an article into the left sidebar as its own block, with the
  * Copies the tree on an article into a panel at the top of the left column (above
* current page in bold. The in-page box stays as the fallback on narrow screens
* Contents), styled like the Contents panel, with the current page in bold. The
* in-page box stays as the fallback where Vector hides that column
  * (see .bc-section-nav--moved in MediaWiki:Common.css). */
  * (see .bc-section-nav--moved in MediaWiki:Common.css). */
mw.loader.using("mediawiki.util").then(function () {
mw.hook("wikipage.content").add(function ($content) {
  mw.hook("wikipage.content").add(function ($content) {
  var box = $content[0] && $content[0].querySelector(".bc-section-nav");
    var box = $content[0] && $content[0].querySelector(".bc-section-nav");
  var column = document.querySelector(".vector-column-start");
    if (!box || document.getElementById("p-bc-section")) {
  if (!box || !column || document.getElementById("bc-section-panel")) {
       return;
    return;
  }
  var panel = document.createElement("nav");
  panel.id = "bc-section-panel";
  panel.className = "vector-pinned-container bc-section-panel";
  panel.setAttribute("aria-label", box.getAttribute("aria-label") || "");
  var list = document.createElement("ul");
  var addItem = function (link, text, depth) {
    var li = document.createElement("li");
    li.className = "bc-section-depth-" + depth;
    if (link && link.classList.contains("mw-selflink")) {
       li.className += " bc-section-current";
     }
     }
     var titleLink = box.querySelector(
     var inner = document.createElement(link ? "a" : "span");
      ".bc-section-nav-title a, .bc-section-nav-title strong",
     if (link) {
    );
       inner.href = link.getAttribute("href") || location.pathname;
     var label =
     } else {
       box.getAttribute("aria-label") ||
       li.className += " bc-section-label";
      (titleLink && titleLink.textContent) ||
      "";
     var before = document.getElementById("p-Getting_started")
       ? "#p-Getting_started"
      : "#p-navigation";
    var portlet = mw.util.addPortlet("p-bc-section", label, before);
    if (!portlet) {
      return;
     }
     }
     var list = portlet.querySelector("ul");
     inner.textContent = text;
     var addItem = function (link, text, depth) {
    li.appendChild(inner);
      var li = document.createElement("li");
    list.appendChild(li);
      li.className = "mw-list-item bc-section-depth-" + depth;
  };
       if (link && link.classList.contains("mw-selflink")) {
  var titleLink = box.querySelector(".bc-section-nav-title a");
         li.className += " bc-section-current";
  if (titleLink) {
     addItem(titleLink, titleLink.textContent, 0);
  }
  box.querySelectorAll("li").forEach(function (item) {
    var depth = 0;
    for (var el = item.parentElement; el && el !== box; el = el.parentElement) {
       if (el.tagName === "UL") {
         depth++;
       }
       }
      if (link) {
        var a = document.createElement("a");
        a.href =
          link.getAttribute("href") ||
          mw.util.getUrl(mw.config.get("wgPageName"));
        a.textContent = text;
        li.appendChild(a);
      } else {
        li.className += " bc-section-label";
        var span = document.createElement("span");
        span.textContent = text;
        li.appendChild(span);
      }
      list.appendChild(li);
    };
    if (titleLink) {
      addItem(titleLink, titleLink.textContent, 0);
     }
     }
     box.querySelectorAll("li").forEach(function (item) {
     var link = item.querySelector(":scope > a");
      var depth = 0;
    var text = link
      for (
      ? link.textContent
        var el = item.parentElement;
      : item.firstChild && item.firstChild.nodeType === 3
        el && el !== box;
        ? item.firstChild.textContent.trim()
        el = el.parentElement
        : "";
      ) {
    if (text) {
        if (el.tagName === "UL") {
      addItem(link, text, depth);
          depth++;
     }
        }
      }
      var link = item.querySelector(
        ":scope > a, :scope > strong.mw-selflink, :scope > .mw-selflink",
      );
      var text = link
        ? link.textContent
        : item.firstChild && item.firstChild.nodeType === 3
          ? item.firstChild.textContent.trim()
          : "";
      if (text) {
        addItem(link, text, depth);
      }
     });
    box.classList.add("bc-section-nav--moved");
   });
   });
  panel.appendChild(list);
  column.insertBefore(
    panel,
    column.querySelector(".vector-sticky-pinned-container"),
  );
  box.classList.add("bc-section-nav--moved");
});
});

Revision as of 15:41, 2 November 2026

/* Section trees ({{… sidebar}} templates, class bc-section-nav).
 * Copies the tree on an article into a panel at the top of the left column (above
 * Contents), styled like the Contents panel, with the current page in bold. The
 * in-page box stays as the fallback where Vector hides that column
 * (see .bc-section-nav--moved in MediaWiki:Common.css). */
mw.hook("wikipage.content").add(function ($content) {
  var box = $content[0] && $content[0].querySelector(".bc-section-nav");
  var column = document.querySelector(".vector-column-start");
  if (!box || !column || document.getElementById("bc-section-panel")) {
    return;
  }
  var panel = document.createElement("nav");
  panel.id = "bc-section-panel";
  panel.className = "vector-pinned-container bc-section-panel";
  panel.setAttribute("aria-label", box.getAttribute("aria-label") || "");
  var list = document.createElement("ul");
  var addItem = function (link, text, depth) {
    var li = document.createElement("li");
    li.className = "bc-section-depth-" + depth;
    if (link && link.classList.contains("mw-selflink")) {
      li.className += " bc-section-current";
    }
    var inner = document.createElement(link ? "a" : "span");
    if (link) {
      inner.href = link.getAttribute("href") || location.pathname;
    } else {
      li.className += " bc-section-label";
    }
    inner.textContent = text;
    li.appendChild(inner);
    list.appendChild(li);
  };
  var titleLink = box.querySelector(".bc-section-nav-title a");
  if (titleLink) {
    addItem(titleLink, titleLink.textContent, 0);
  }
  box.querySelectorAll("li").forEach(function (item) {
    var depth = 0;
    for (var el = item.parentElement; el && el !== box; el = el.parentElement) {
      if (el.tagName === "UL") {
        depth++;
      }
    }
    var link = item.querySelector(":scope > a");
    var text = link
      ? link.textContent
      : item.firstChild && item.firstChild.nodeType === 3
        ? item.firstChild.textContent.trim()
        : "";
    if (text) {
      addItem(link, text, depth);
    }
  });
  panel.appendChild(list);
  column.insertBefore(
    panel,
    column.querySelector(".vector-sticky-pinned-container"),
  );
  box.classList.add("bc-section-nav--moved");
});