MediaWiki:Citizen.js: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
-$(document).ready(function() {
+/* All JavaScript here will be loaded for users of the Citizen skin */
-  if (window.innerWidth >= 768) { // Only on desktop
-    mw.hook('citizen-collapsibles-init').add(function() {
-      const idsToCollapse = [
-        'Muling',
-        'Misc',
-        'Anti-ban',
-        'Anti-PK',
-        'Trip_Settings',
-        'Skills_Settings',
-        'Equipment'
-      ];
-       idsToCollapse.forEach(function(rawId) {
+// Collapse specific headers by default on Desktop
-        var id = rawId.replace(/ /g, "_");
+mw.hook('wikipage.content').add(function($content) {
-        var header = document.getElementById(id);
+  if (window.innerWidth >= 768) {
-        if (header) {
+    const idsToCollapse = [
-          var section = header.closest('.citizen-section-heading');
+       'Muling', 'Misc', 'Anti-ban', 'Proggies', 'Anti-PK', 'Trip_Settings', 'Add-On_Settings', 'Skills_Settings', 'Equipment'
-          if (section && !section.classList.contains('citizen-section-collapsed')) {
+    ];
-             // Only click if not collapsed
-             section.click();
+    idsToCollapse.forEach(function(rawId) {
+      const id = rawId.replace(/ /g, "_");
+      const heading = document.getElementById(id);
+      if (!heading) return;
+      const sectionHeading = heading.closest('.citizen-section-heading');
+      const content = sectionHeading?.nextElementSibling;
+      if (content && content.classList.contains('citizen-section')) {
+        content.hidden = 'until-found'; // Collapse by default
+      }
+    });
+  }
+});
+// Expand any collapsed parent citizen-section containing the heading
+function expandCitizenSectionFromHeading(heading) {
+  if (!heading) return;
+  // If the clicked ID is on a <span> inside a heading, go up to the heading
+  if (heading.tagName === 'SPAN' && heading.parentElement && heading.parentElement.classList.contains('citizen-section-heading')) {
+    heading = heading.parentElement;
+  }
+  // Case 1: Heading itself is a .citizen-section-heading
+  if (heading.classList.contains('citizen-section-heading')) {
+    const section = heading.nextElementSibling;
+    if (section && section.classList.contains('citizen-section') && section.hidden) {
+      section.hidden = false;
+    }
+    return;
+  }
+  // Case 2: Heading is inside a collapsed .citizen-section
+  let current = heading;
+  while (current) {
+    if (current.classList && current.classList.contains('citizen-section') && current.hidden) {
+      current.hidden = false;
+    }
+    if (current.classList && current.classList.contains('citizen-section-heading')) {
+      break;
+    }
+    current = current.parentElement;
+  }
+}
+// Scroll to real heading, after layout is ready
+function smoothScrollToHeading(heading) {
+  if (!heading) return;
+  // If the heading is an invisible anchor, find the next real visible heading
+  if (heading.offsetHeight === 0) {
+    const nextHeading = heading.parentElement.querySelector('h1, h2, h3, h4, h5, h6');
+    if (nextHeading) {
+      heading = nextHeading;
+    }
+  }
+  // Wait two animation frames to ensure layout is ready
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      const rect = heading.getBoundingClientRect();
+      const scrollTop = window.scrollY + rect.top - 80; // Adjust 80px for sticky header
+      window.scrollTo({ top: scrollTop, behavior: 'smooth' });
+    });
+  });
+}
+// Handle direct URL loads with a hash (on page load)
+mw.hook('wikipage.content').add(function() {
+  if (window.innerWidth >= 768) {
+    const hash = window.location.hash;
+    if (hash && hash.length > 1) {
+      const headingId = decodeURIComponent(hash.substring(1));
+      setTimeout(() => {
+        const heading = document.getElementById(headingId);
+        if (heading) {
+          expandCitizenSectionFromHeading(heading);
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              smoothScrollToHeading(heading);
+             });
+          });
+        }
+      }, 100);
+    }
+  }
+});
+// Hook into Citizen TOC (Contents Menu) clicks correctly
+mw.hook('wikipage.content').add(function() {
+  if (window.innerWidth >= 768) {
+    setTimeout(() => {
+      document.querySelectorAll('#mw-panel-toc a[href^="#"]').forEach(function(anchor) {
+        anchor.addEventListener('click', function(e) {
+          e.preventDefault(); // Block native browser jump immediately
+          const hash = decodeURIComponent(this.getAttribute('href')).substring(1);
+          const heading = document.getElementById(hash);
+          if (heading) {
+            expandCitizenSectionFromHeading(heading);
+             requestAnimationFrame(() => {
+              requestAnimationFrame(() => {
+                smoothScrollToHeading(heading);
+              });
+            });
            }
-         }
+         });
+      });
+    }, 200);
+  }
+});
+// Intercept in-page wiki links like [[#HeadingName]]
+mw.hook('wikipage.content').add(function($content) {
+  if (window.innerWidth >= 768) {
+    setTimeout(() => {
+      document.querySelectorAll('#mw-content-text a[href^="#"]').forEach(function(anchor) {
+        anchor.addEventListener('click', function(e) {
+          e.preventDefault(); // Block native jump
+          const hash = decodeURIComponent(this.getAttribute('href')).substring(1);
+          const heading = document.getElementById(hash);
+          if (heading) {
+            expandCitizenSectionFromHeading(heading);
+            requestAnimationFrame(() => {
+              requestAnimationFrame(() => {
+                smoothScrollToHeading(heading);
+              });
+            });
+          }
+        });
        });
-     });
+     }, 200);
    }
 });