MediaWiki:Common.js: Difference between revisions

← Older edit Newer edit →

@@ Line 62: / Line 62: @@
 /* 각주 팝업창 위치 보정 DOM */
+document.addEventListener('DOMContentLoaded', function () {
+    var tooltip = null;
+    document.body.addEventListener('mouseenter', function (e) {
+        if (e.target.classList && e.target.classList.contains('rt-tooltip')) {
+            tooltip = e.target;
+            adjustTooltipPosition(e.clientX, e.clientY);
+        }
+    });
+    document.body.addEventListener('mousemove', function (e) {
+        if (tooltip) {
+            adjustTooltipPosition(e.clientX, e.clientY);
+        }
+    });
+    document.body.addEventListener('mouseleave', function (e) {
+        if (tooltip) {
+            tooltip = null;
+        }
+    });
+    function adjustTooltipPosition(mouseX, mouseY) {
+        var tooltipRect = tooltip.getBoundingClientRect();
+        var tooltipHeight = tooltipRect.height;
+        var tooltipWidth = tooltipRect.width;
+        var windowHeight = window.innerHeight;
+        var windowWidth = window.innerWidth;
+        var tooltipTop = mouseY - 10; // 팝업이 마우스 위로 올라가지 않도록 보정
+        var tooltipLeft = mouseX + 10; // 팝업이 마우스 옆으로 올라가지 않도록 보정
+        // 팝업이 브라우저 창 아래쪽으로 벗어나는 경우 보정
+        if ((tooltipTop + tooltipHeight) > windowHeight) {
+            tooltipTop = windowHeight - tooltipHeight - 10;
+        }
+        // 팝업이 브라우저 창 오른쪽으로 벗어나는 경우 보정
+        if ((tooltipLeft + tooltipWidth) > windowWidth) {
+            tooltipLeft = windowWidth - tooltipWidth - 10;
+        }
+        tooltip.style.top = tooltipTop + 'px';
+        tooltip.style.left = tooltipLeft + 'px';
+    }
+});
+/*
 document.body.addEventListener(
      'DOMNodeInserted',
@@ Line 76: / Line 124: @@
      false
 );
-document.body.addEventListener(
+*/
-    'DOMNodeInserted',
-    function (e) {
-        if (e.target.classList && e.target.classList.contains('mwe-popups')) {
-            requestAnimationFrame(function () {
-                var bodyLeft = document.body.getBoundingClientRect().left;
-                var left = parseInt(window.getComputedStyle(e.target).left);
-                e.target.style.left = left - bodyLeft + 'px';
-            });
-        }
-    },
-    false
-);
 /* 우클릭 방지  */
 window.oncontextmenu = function (e) {