MediaWiki:Common.js - Revision history

R0o0di at 14:08, 11 June 2025

2025-06-11T14:08:29Z

R0o0di at 12:46, 11 June 2025

2025-06-11T12:46:06Z

R0o0di at 22:11, 10 June 2025

2025-06-10T22:11:55Z

R0o0di at 21:51, 10 June 2025

2025-06-10T21:51:58Z

R0o0di: fixes reposition issue on mobile

2025-06-10T21:50:52Z

fixes reposition issue on mobile

R0o0di: changing class names to avoid issues with identical, already-existing classes

2025-06-10T18:42:06Z

changing class names to avoid issues with identical, already-existing classes

R0o0di at 23:41, 8 June 2025

2025-06-08T23:41:18Z

R0o0di at 21:49, 8 June 2025

2025-06-08T21:49:08Z

R0o0di at 21:34, 8 June 2025

2025-06-08T21:34:13Z

R0o0di at 21:10, 8 June 2025

2025-06-08T21:10:58Z

@@ Line 384: / Line 384: @@
     */
-   var tooltips = document.querySelectorAll(".tt-container");
+   // Run on page load, resize, and scroll
          Array.prototype.forEach.call(tooltips, function (tooltipContainer) {
              var tooltip = tooltipContainer.querySelector(".tt-tooltip");
@@ Line 431: / Line 436: @@
              tooltipContainer.style.display = "";
          });
-−
-    // Run on page load, resize, and scroll
+   } // end of adjustTooltipPositions()
 }); // end of $(function () )

@@ Line 383: / Line 383: @@
     * @author [[User:AvidConanContributor]]
     */
    var tooltips = document.querySelectorAll(".tt-container");
    if (tooltips.length > 0) {
      function adjustTooltipPositions() {
          Array.prototype.forEach.call(tooltips, function (tooltipContainer) {
              var tooltip = tooltipContainer.querySelector(".tt-tooltip");
              var chevron = tooltip.querySelector(".tt-chevron");
-−
              // 1. Temporarily show tooltip to measure size
              tooltipContainer.style.opacity = "0";
              tooltipContainer.style.display = "flex";
              tooltip.style.transform = "";
-−
              var tooltipRect = tooltip.getBoundingClientRect();
              var targetRect = tooltipContainer.parentElement.getBoundingClientRect();
-−
-             // 2. Measure overflow
+             // 2. Measure how much the tooltip is outside the viewport
              var overflowTop = tooltipRect.top < 1;
-             var spaceTop = targetRect.top > tooltipRect.height + 4;
+             var spaceTop = targetRect.top > tooltipRect.height + 10;
              var overflowLeft = Math.min(Math.max(0, -tooltipRect.left), 0.5 * tooltipRect.width - 15);
              var overflowRight = Math.min(Math.max(0, tooltipRect.right - document.documentElement.clientWidth), 0.5 * tooltipRect.width - 15);
-−
-             // 3. Reposition top/bottom
+             // 3. Shift tooltip into view if needed and move chevron accordingly
              if (overflowTop) {
                  tooltipContainer.classList.remove("tt-container-above");
@@ Line 414: / Line 415: @@
                  tooltipContainer.classList.remove("tt-container-below");
+             }
-−
              if (overflowLeft > 0) {
                  tooltip.style.transform = "translateX(calc(" + overflowLeft + "px + 4px))";
@@ Line 426: / Line 426: @@
                  chevron.style.transform = "";
+             }
-−
-             // 5. Restore styles
+             // 4. Hide it again until hover
              tooltipContainer.style.opacity = "";
              tooltipContainer.style.display = "";
          });
-     } // end of adjustTooltipPositions()
-−
-     // Run on page load, resize, scroll
+     // Run on page load, resize, and scroll
      adjustTooltipPositions();
      window.addEventListener("resize", adjustTooltipPositions);
      window.addEventListener("scroll", adjustTooltipPositions, true);
    } // end of if (tooltips.length > 0) {
 }); // end of $(function () )

@@ Line 383: / Line 383: @@
     * @author [[User:AvidConanContributor]]
     */
-    var tooltips = document.querySelectorAll(".tt-container");
+  var tooltips = document.querySelectorAll(".tt-container");
      function adjustTooltipPositions() {
          Array.prototype.forEach.call(tooltips, function (tooltipContainer) {
@@ Line 439: / Line 440: @@
      // Also run when tooltip is triggered via interaction
-     // This fixes the tooltip not repositioning on mobie
+     // This fixes the tooltip not repositioning on mobile
      function mobileTT(e) {
          var target = e.target.closest ? e.target.closest(".tt-target") : null;
@@ Line 452: / Line 453: @@
      document.addEventListener("touchstart", mobileTT);
 }); // end of $(function () )

@@ Line 383: / Line 383: @@
     * @author [[User:AvidConanContributor]]
     */
-     var tooltips = document.querySelectorAll(".ttt-container");
+     var tooltips = document.querySelectorAll(".tt-container");
      function adjustTooltipPositions() {
          Array.prototype.forEach.call(tooltips, function (tooltipContainer) {
-             var tooltip = tooltipContainer.querySelector(".ttt-tooltip");
+             var tooltip = tooltipContainer.querySelector(".tt-tooltip");
-             var chevron = tooltip.querySelector(".ttt-chevron");
+             var chevron = tooltip.querySelector(".tt-chevron");
              // 1. Temporarily show tooltip to measure size
@@ Line 407: / Line 407: @@
              // 3. Reposition top/bottom
              if (overflowTop) {
-                 tooltipContainer.classList.remove("ttt-container-above");
+                 tooltipContainer.classList.remove("tt-container-above");
-                 tooltipContainer.classList.add("ttt-container-below");
+                 tooltipContainer.classList.add("tt-container-below");
              } else if (spaceTop) {
-                 tooltipContainer.classList.add("ttt-container-above");
+                 tooltipContainer.classList.add("tt-container-above");
-                 tooltipContainer.classList.remove("ttt-container-below");
+                 tooltipContainer.classList.remove("tt-container-below");
+             }
@@ Line 441: / Line 441: @@
      // This fixes the tooltip not repositioning on mobie
      function mobileTT(e) {
-         var target = e.target.closest ? e.target.closest(".ttt-target") : null;
+         var target = e.target.closest ? e.target.closest(".tt-target") : null;
          if (!target) return;
-         var tooltipContainer = target.querySelector(".ttt-container");
+         var tooltipContainer = target.querySelector(".tt-container");
          if (!tooltipContainer) return;

@@ Line 383: / Line 383: @@
     * @author [[User:AvidConanContributor]]
     */
-  var tooltips = document.querySelectorAll(".tt-container");
+    var tooltips = document.querySelectorAll(".ttt-container");
-  if (tooltips.length > 0) {
+    function adjustTooltipPositions() {
-	function adjustTooltipPositions() {
+        Array.prototype.forEach.call(tooltips, function (tooltipContainer) {
-		Array.prototype.forEach.call(tooltips, function (tooltipContainer) {
+            var tooltip = tooltipContainer.querySelector(".ttt-tooltip");
-			var tooltip = tooltipContainer.querySelector(".tt-tooltip");
+            var chevron = tooltip.querySelector(".ttt-chevron");
-			// 1. Temporarily show tooltip to measure size
+            // 1. Temporarily show tooltip to measure size
-			tooltipContainer.style.opacity = "0";
+            tooltipContainer.style.opacity = "0";
-			tooltipContainer.style.display = "flex";
+            tooltipContainer.style.display = "flex";
-			tooltip.style.transform = "";
+            tooltip.style.transform = "";
-			var tooltipRect = tooltip.getBoundingClientRect();
+            var tooltipRect = tooltip.getBoundingClientRect();
-			var targetRect = tooltipContainer.parentElement.getBoundingClientRect();
+            var targetRect = tooltipContainer.parentElement.getBoundingClientRect();
-			// 2. Measure how much the tooltip is outside the viewport
+            // 2. Measure overflow
-			var overflowTop = tooltipRect.top < 1;
+            var overflowTop = tooltipRect.top < 1;
-			var spaceTop = targetRect.top > tooltipRect.height + 4;
+            var spaceTop = targetRect.top > tooltipRect.height + 4;
-			// 3. Shift tooltip into view if needed and move chevron accordingly
+            var overflowLeft = Math.min(Math.max(0, -tooltipRect.left), 0.5 * tooltipRect.width - 15);
-			if (overflowTop) {
+            var overflowRight = Math.min(Math.max(0, tooltipRect.right - document.documentElement.clientWidth), 0.5 * tooltipRect.width - 15);
-			if (overflowLeft > 0) {
+            // 3. Reposition top/bottom
-				tooltip.style.transform = "translateX(calc(" + overflowLeft + "px + 4px))";
+            if (overflowTop) {
-				chevron.style.transform = "translateX(calc(-50% - " + overflowLeft + "px - 4px))";
+                tooltipContainer.classList.remove("ttt-container-above");
-			} else if (overflowRight > 0) {
+                tooltipContainer.classList.add("ttt-container-below");
-				tooltip.style.transform = "translateX(calc(-" + overflowRight + "px - 4px))";
+            } else if (spaceTop) {
-				chevron.style.transform = "translateX(calc(-50% + " + overflowRight + "px + 4px))";
+                tooltipContainer.classList.add("ttt-container-above");
-			} else {
+                tooltipContainer.classList.remove("ttt-container-below");
-				tooltip.style.transform = "";
-			// 4. Hide it again until hover
+            // 4. Reposition left/right
-			tooltipContainer.style.opacity = "";
+            if (overflowLeft > 0) {
-			tooltipContainer.style.display = "";
+                tooltip.style.transform = "translateX(calc(" + overflowLeft + "px + 4px))";
-		});
+                chevron.style.transform = "translateX(calc(-50% - " + overflowLeft + "px - 4px))";
-	} // end of adjustTooltipPositions()
+    // Run on page load, resize, scroll
-	// Run on page load, resize, and scroll
-	adjustTooltipPositions();
+    // Also run when tooltip is triggered via interaction
-	window.addEventListener("resize", adjustTooltipPositions);
+    // This fixes the tooltip not repositioning on mobie
-	window.addEventListener("scroll", adjustTooltipPositions, true);
+    function mobileTT(e) {
+        var target = e.target.closest ? e.target.closest(".ttt-target") : null;
 }); // end of $(function () )

@@ Line 348: / Line 348: @@
 		var styles = el.dataset.styles || "";
 		var html = decodeURIComponent(el.dataset.html || "");
-		var param = el.dataset.param || ""; // allows parameters inside html
+		var param = el.dataset.param || "";
 		var uid = (Math.random().toString(36).slice(2)); // unique ID, useful for Template:cover
 		// replace placeholders inside HTML
-		html = html.replace("{{{param}}}", param).replace(/{{{UID}}}/g, uid);
+                html = html.replace("{{{param}}}", param).replace("{{{param2}}}", param2).replace(/{{{UID}}}/g, uid);
 		// Insert HTML code right where the <span> was

← Older revision		Revision as of 21:49, 8 June 2025
Line 375:		Line 375:


−	// code for Template:tt. ~~suggested by~~ User:AvidConanContributor	+	// code for Template:tt
		+	/**
		+	* Tooltip
		+	* Interactive tooltip with smart repositioning
		+	* @version 1.0 (2025-06-07)
		+	* @author [[User:AvidConanContributor]]
		+	*/
	var tooltips = document.querySelectorAll(".tooltip-container");		var tooltips = document.querySelectorAll(".tooltip-container");

← Older revision		Revision as of 21:34, 8 June 2025
Line 423:		Line 423:
	});		});

−
−	~~/* // fix issue: <ref> not being inline after a tooltip~~
−	~~var targets = document.querySelectorAll(".tooltip-target");~~
−
−	~~// fix issue for InfoBoxes~~
−	~~Array.prototype.forEach.call(targets, function (target) {~~
−	~~var next = target.nextElementSibling;~~
−	~~if (next) {~~
−	~~next.style.display = "inline";~~
−	}
−	~~});~~
−
−	~~// fix issue for other cases~~
−	~~if (targets.length > 0) {~~
−	~~var last = targets[targets.length - 1];~~
−	~~var parent = last.parentNode;~~
−	~~var sibling = parent.nextElementSibling;~~
−	~~if (parent) {~~
−	~~parent.style.display = "inline";~~
−	}
−	~~if (sibling) {~~
−	~~sibling.style.display = "inline";~~
−	}
−	}
−
−	*/

	} // end of adjustTooltipPositions()		} // end of adjustTooltipPositions()

@@ Line 424: / Line 424: @@
-		// fix issue: <ref> not being inline after a tooltip
+	/*	// fix issue: <ref> not being inline after a tooltip
 		var targets = document.querySelectorAll(".tooltip-target");
@@ Line 446: / Line 446: @@
 				sibling.style.display = "inline";
+			}
-−
+		}
 	} // end of adjustTooltipPositions()