MediaWiki:Common.js - Revision history

Wewert at 15:04, 4 November 2026

2026-11-04T15:04:32Z

← Older revision		Revision as of 15:04, 4 November 2026
Line 7:		Line 7:
	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");		var column = document.querySelector(".vector-column-start .vector-sticky-pinned-container");
	if (!box \|\| !column \|\| document.getElementById("bc-section-panel")) {		if (!box \|\| !column \|\| document.getElementById("bc-section-panel")) {
	return;		return;

TheCarriedOne: Section tree panel below Contents, with hide/show

2026-11-02T15:46:00Z

Section tree panel below Contents, with hide/show

@@ Line 1: / Line 1: @@
 /* 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
+  * Copies the tree on an article into a panel in the left column, below Contents,
-  * Contents), styled like the Contents panel, with the current page in bold. The
+  * styled like the Contents panel: the section name is the heading, the current
-  * in-page box stays as the fallback where Vector hides that column
+ * page is in bold, and "hide"/"show" collapses the list (remembered per browser).
   * (see .bc-section-nav--moved in MediaWiki:Common.css). */
 mw.hook("wikipage.content").add(function ($content) {
@@ Line 10: / Line 11: @@
      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) {
@@ Line 31: / Line 68: @@
      list.appendChild(li);
    };
    box.querySelectorAll("li").forEach(function (item) {
      var depth = 0;
@@ Line 53: / Line 86: @@
    });
    panel.appendChild(list);
-   column.insertBefore(
-     panel,
+   var render = function (hidden) {
-     column.querySelector(".vector-sticky-pinned-container"),
+    list.hidden = hidden;
-   );
+     panel.classList.toggle("bc-section-panel--collapsed", hidden);
    box.classList.add("bc-section-nav--moved");
 });

TheCarriedOne: Show section trees above Contents in the left column

2026-11-02T15:41:39Z

Show section trees above Contents in the left column

← Older revision		Revision as of 15:41, 2 November 2026
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");
	});		});

TheCarriedOne: Move section trees into the sidebar

2026-11-02T15:40:20Z

Move section trees into the sidebar

New page

/* Section trees ({{… sidebar}} templates, class bc-section-nav).
* Moves the tree on an article into the left sidebar as its own block, with the
* current page in bold. The in-page box stays as the fallback on narrow screens
* (see .bc-section-nav--moved in MediaWiki:Common.css). */
mw.loader.using("mediawiki.util").then(function () {
mw.hook("wikipage.content").add(function ($content) {
var box = $content[0] && $content[0].querySelector(".bc-section-nav");
if (!box || document.getElementById("p-bc-section")) {
return;
}
var titleLink = box.querySelector(
".bc-section-nav-title a, .bc-section-nav-title strong",
);
var label =
box.getAttribute("aria-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");
var addItem = function (link, text, depth) {
var li = document.createElement("li");
li.className = "mw-list-item bc-section-depth-" + depth;
if (link && link.classList.contains("mw-selflink")) {
li.className += " bc-section-current";
}
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 depth = 0;
for (
var el = item.parentElement;
el && el !== box;
el = el.parentElement
) {
if (el.tagName === "UL") {
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");
});
});