MediaWiki:Common.js: Difference between revisions

← Older edit

@@ Line 108: / Line 108: @@
    });
 });
 /* =========================================================
-    OOO FAQ – True Accordion Control
+    OOO Anchor navigation (tabs + browser)
     ========================================================= */
-mw.hook('wikipage.content').add(function ($content) {
+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)
+   ========================================================= */
-  $content.find('.ooo-faq__item').each(function () {
+document.addEventListener("click", function (e) {
-    var $item = $(this);
-    // Ensure collapsible initialized
+  const item = e.target.closest(".ooo-browser__item");
-    if (!$item.hasClass('mw-collapsible')) return;
+  if (!item) return;
-    // Click handler for accordion behavior
+  const browser = item.closest(".ooo-browser");
-    $item.on('click', '.ooo-faq__question', function () {
+  if (!browser) return;
-      // If already open, do nothing (allow collapse normally)
+  const target = item.getAttribute("data-target");
-      if (!$item.hasClass('mw-collapsed')) {
+  if (!target) return;
-        // Close all other FAQ items
+  e.preventDefault();
-        $content.find('.ooo-faq__item').not($item).each(function () {
-          var $other = $(this);
+  browser.querySelectorAll(".ooo-browser__item")
-          if (!$other.hasClass('mw-collapsed')) {
+    .forEach(el => el.classList.remove("is-active"));
-            $other.find('.mw-collapsible-toggle').trigger('click');
-          }
+  browser.querySelectorAll(".ooo-browser__info")
-        });
+    .forEach(el => el.classList.remove("is-active"));
-      }
+  item.classList.add("is-active");
-    });
+const panel = browser.querySelector("#" + CSS.escape(target));
+if (panel) panel.classList.add("is-active");
-  });
+/* update browser URL */
+history.replaceState(null, null, "#" + target);
 });
+/* V2 Level Progression Accordion */
+(function () {
+    function initLevelCards() {
+        document.querySelectorAll('.ooo-v2-level-heading').forEach(function (heading) {
+            if (heading.dataset.levelInitialized) return;
+            heading.dataset.levelInitialized = '1';
+            var card = heading.closest('.ooo-v2-level-card');
+            if (!card) return;
+            card.classList.remove('is-open');
+            heading.setAttribute('aria-expanded', 'false');
+            function toggle() {
+                var isOpen = card.classList.toggle('is-open');
+heading.setAttribute('aria-expanded', String(isOpen));
+var detailsLabel = heading.querySelector('.ooo-v2-level-arrow');
+if (detailsLabel) {
+    detailsLabel.textContent = isOpen ? 'Hide Details' : 'Details';
+}
+            }
+            heading.addEventListener('click', toggle);
+            heading.addEventListener('keydown', function (event) {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    toggle();
+                }
+            });
+        });
+    }
+    mw.hook('wikipage.content').add(initLevelCards);
+})();