MediaWiki:Common.js - Revision history

HGL at 17:15, 24 July 2026

2026-07-24T17:15:13Z

HGL at 17:09, 24 July 2026

2026-07-24T17:09:19Z

HGL at 17:07, 24 July 2026

2026-07-24T17:07:56Z

HGL at 16:58, 24 July 2026

2026-07-24T16:58:54Z

HGL at 16:57, 24 July 2026

2026-07-24T16:57:37Z

HGL at 16:54, 24 July 2026

2026-07-24T16:54:52Z

HGL: Created page with "/* Any JavaScript here will be loaded for all users on every page load. */ document.addEventListener('click', function (event) { var icon = event.target.closest(..."

2026-07-24T16:46:43Z

Created page with "‎Any JavaScript here will be loaded for all users on every page load.: document.addEventListener('click', function (event) { var icon = event.target.closest(..."

New page

/* Any JavaScript here will be loaded for all users on every page load. */

document.addEventListener('click', function (event) {
var icon = event.target.closest(
'.meter, .parallel, .commentary, .pictures, .outline, .comment, .word'
);

if (!icon) {
return;
}

icon.classList.toggle('open');
});

@@ Line 6: / Line 6: @@
          '.metertext, .paralleltext, .commentarytext, ' +
          '.picturestext, .outlinetext, .commenttext, .wordtext';
      function updateWidth(icon) {
          var viewportWidth = document.documentElement.clientWidth;
-         var iconLeft = icon.getBoundingClientRect().left;
+         var availableWidth =
-        var availableWidth = viewportWidth - iconLeft - 16;
+            viewportWidth - icon.getBoundingClientRect().left - 16;
          icon.style.setProperty(
              '--popup-width',
-             Math.max(0, popupWidth) + 'px'
+             Math.max(0, Math.min(viewportWidth * 0.7, availableWidth)) + 'px'
          );
+     }
@@ Line 80: / Line 33: @@
+         }
-         icon.classList.toggle('open');
+         if (icon === openIcon) {
-         window.requestAnimationFrame(arrangePopups);
+         updateWidth(icon);
      });
      window.addEventListener('resize', function () {
-         window.requestAnimationFrame(arrangePopups);
+         if (openIcon) {
      });
 })();

@@ Line 1: / Line 1: @@
 (function () {
      var iconSelector =
@@ Line 39: / Line 11: @@
          var iconLeft = icon.getBoundingClientRect().left;
          var availableWidth = viewportWidth - iconLeft - 16;
          icon.style.setProperty(
              '--popup-width',
-             Math.max(0, Math.min(viewportWidth * 0.7, availableWidth)) + 'px'
+             Math.max(0, popupWidth) + 'px'
          );
+     }
      function arrangePopups() {
-         var openIcons = Array.from(
+         var openIcons = Array.prototype.filter.call(
-             document.querySelectorAll(iconSelector)
+             document.querySelectorAll(iconSelector),
-        ).filter(function (icon) {
+            function (icon) {
-            return icon.classList.contains('open');
+                return icon.classList.contains('open');
-         });
          openIcons.forEach(function (icon) {
@@ Line 67: / Line 41: @@
+             }
              var offset = 0;
              placedPanels.forEach(function (previousRect) {
@@ Line 87: / Line 61: @@
              });
-             icon.style.setProperty(
+             icon.style.setProperty('--popup-offset', offset + 'px');
              placedPanels.push(panel.getBoundingClientRect());
@@ Line 111: / Line 82: @@
          icon.classList.toggle('open');
-         requestAnimationFrame(arrangePopups);
+         window.requestAnimationFrame(arrangePopups);
      });
      window.addEventListener('resize', function () {
-         requestAnimationFrame(arrangePopups);
+         window.requestAnimationFrame(arrangePopups);
      });
 })();

@@ Line 1: / Line 1: @@
 (function () {
      var iconSelector =
@@ Line 6: / Line 34: @@
          '.metertext, .paralleltext, .commentarytext, ' +
          '.picturestext, .outlinetext, .commenttext, .wordtext';
      function updateWidth(icon) {
          var viewportWidth = document.documentElement.clientWidth;
-         var availableWidth =
+         var iconLeft = icon.getBoundingClientRect().left;
-            viewportWidth - icon.getBoundingClientRect().left - 16;
+        var availableWidth = viewportWidth - iconLeft - 16;
          icon.style.setProperty(
@@ Line 18: / Line 44: @@
              Math.max(0, Math.min(viewportWidth * 0.7, availableWidth)) + 'px'
          );
+     }
@@ Line 33: / Line 109: @@
+         }
-         if (icon === openIcon) {
+         icon.classList.toggle('open');
-         if (openIcon) {
+         requestAnimationFrame(arrangePopups);
      });
      window.addEventListener('resize', function () {
-         if (openIcon) {
+         requestAnimationFrame(arrangePopups);
      });
 })();

@@ Line 7: / Line 7: @@
          '.picturestext, .outlinetext, .commenttext, .wordtext';
-     function updatePopupWidth(icon) {
+    var openIcon = null;
-        var iconPosition = icon.getBoundingClientRect();
          var viewportWidth = document.documentElement.clientWidth;
          var availableWidth =
-             viewportWidth -
+             viewportWidth - icon.getBoundingClientRect().left - 16;
          icon.style.setProperty(
              '--popup-width',
-             Math.max(popupWidth, 0) + 'px'
+             Math.max(0, Math.min(viewportWidth * 0.7, availableWidth)) + 'px'
          );
+     }
@@ Line 39: / Line 27: @@
+         }
-         var textPanel = icon.querySelector(panelSelector);
+         var panel = icon.querySelector(panelSelector);
-         if (textPanel && textPanel.contains(event.target)) {
+         if (panel && panel.contains(event.target)) {
              return;
+         }
-         var isOpening = !icon.classList.contains('open');
+         if (icon === openIcon) {
-         icon.classList.toggle('open');
+         if (openIcon) {
-         if (isOpening) {
+        updateWidth(icon);
-             updatePopupWidth(icon);
+        icon.classList.add('open');
+         }
      });
 })();

@@ Line 1: / Line 1: @@
-document.addEventListener('click', function (event) {
+(function () {
-     var icon = event.target.closest(
+     var iconSelector =
-         '.meter, .parallel, .commentary, .pictures, .outline, .comment, .word'
+         '.meter, .parallel, .commentary, .pictures, .outline, .comment, .word';
-    if (!icon) {
+     var panelSelector =
          '.metertext, .paralleltext, .commentarytext, ' +
-         '.picturestext, .outlinetext, .commenttext, .wordtext'
+         '.picturestext, .outlinetext, .commenttext, .wordtext';
-     var isOpening = !icon.classList.contains('open');
+     function updatePopupWidth(icon) {
          var iconPosition = icon.getBoundingClientRect();
          var rightMargin = 16;
          var availableWidth =
-             document.documentElement.clientWidth -
+             viewportWidth -
              iconPosition.left -
              rightMargin;
-         var preferredWidth =
+         var preferredWidth = viewportWidth * 0.7;
          var popupWidth = Math.min(preferredWidth, availableWidth);
@@ Line 48: / Line 25: @@
          );
+     }
 });