MediaWiki:Common.js: Difference between revisions

← Older edit

@@ Line 111: / Line 111: @@
 /* =========================================================
-    OOO Browser controller (left click -> right panel)
+    OOO Anchor navigation (tabs + browser)
-   Requires:
-   - .ooo-browser__item with data-target="panelId"
-   - .ooo-browser__info with id="panelId"
-   - .is-active on one item + one panel for default
     ========================================================= */
+mw.hook('wikipage.content').add(function () {
+  if (!location.hash) return;
+  const id = location.hash.slice(1);
+  setTimeout(function(){
+    const item  = document.querySelector('.ooo-browser__item[data-target="'+id+'"]');
+    const panel = document.getElementById(id);
+    if (!item || !panel) return;
+    const browser = item.closest('.ooo-browser');
+    if (!browser) return;
+    browser.querySelectorAll('.ooo-browser__item')
+      .forEach(el => el.classList.remove('is-active'));
+    browser.querySelectorAll('.ooo-browser__info')
+      .forEach(el => el.classList.remove('is-active'));
+    item.classList.add('is-active');
+    panel.classList.add('is-active');
+  },150);
+});
+/* =========================================================
+   OOO Browser controller (click switching)
+   ========================================================= */
 document.addEventListener("click", function (e) {
    const item = e.target.closest(".ooo-browser__item");
    if (!item) return;
@@ Line 127: / Line 158: @@
    if (!target) return;
-   // Activate selected item (left)
+   e.preventDefault();
-   browser.querySelectorAll(".ooo-browser__item").forEach(el => {
-    el.classList.remove("is-active");
+   browser.querySelectorAll(".ooo-browser__item")
-   });
+    .forEach(el => el.classList.remove("is-active"));
+   browser.querySelectorAll(".ooo-browser__info")
+    .forEach(el => el.classList.remove("is-active"));
    item.classList.add("is-active");
-  // Activate matching panel (right)
+const panel = browser.querySelector("#" + CSS.escape(target));
-  browser.querySelectorAll(".ooo-browser__info").forEach(el => {
+if (panel) panel.classList.add("is-active");
-    el.classList.remove("is-active");
-  });
+/* update browser URL */
+history.replaceState(null, null, "#" + target);
-  const panel = browser.querySelector("#" + CSS.escape(target));
-  if (panel) panel.classList.add("is-active");
 });