MediaWiki:Common.js: Difference between revisions
Appearance
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). | ||
* | * 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). */ | * (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 | var inner = document.createElement(link ? "a" : "span"); | ||
if (link) { | |||
inner.href = link.getAttribute("href") || location.pathname; | |||
} else { | |||
li.className += " bc-section-label"; | |||
} | } | ||
var | inner.textContent = text; | ||
li.appendChild(inner); | |||
list.appendChild(li); | |||
}; | |||
if ( | 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"); | |||
}); | }); | ||
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");
});