Difference between revisions of "MediaWiki:Common.js"

From Waltharius
Jump to: navigation, search
 
Line 6: Line 6:
 
         '.metertext, .paralleltext, .commentarytext, ' +
 
         '.metertext, .paralleltext, .commentarytext, ' +
 
         '.picturestext, .outlinetext, .commenttext, .wordtext';
 
         '.picturestext, .outlinetext, .commenttext, .wordtext';
 +
 +
    var openIcon = null;
  
 
     function updateWidth(icon) {
 
     function updateWidth(icon) {
 
         var viewportWidth = document.documentElement.clientWidth;
 
         var viewportWidth = document.documentElement.clientWidth;
         var iconLeft = icon.getBoundingClientRect().left;
+
         var availableWidth =
        var availableWidth = viewportWidth - iconLeft - 16;
+
            viewportWidth - icon.getBoundingClientRect().left - 16;
        var popupWidth = Math.min(viewportWidth * 0.7, availableWidth);
 
  
 
         icon.style.setProperty(
 
         icon.style.setProperty(
 
             '--popup-width',
 
             '--popup-width',
             Math.max(0, popupWidth) + 'px'
+
             Math.max(0, Math.min(viewportWidth * 0.7, availableWidth)) + 'px'
 
         );
 
         );
    }
 
 
    function arrangePopups() {
 
        var openIcons = Array.prototype.filter.call(
 
            document.querySelectorAll(iconSelector),
 
            function (icon) {
 
                return icon.classList.contains('open');
 
            }
 
        );
 
 
        openIcons.forEach(function (icon) {
 
            icon.style.setProperty('--popup-offset', '0px');
 
            updateWidth(icon);
 
        });
 
 
        var placedPanels = [];
 
 
        openIcons.forEach(function (icon) {
 
            var panel = icon.querySelector(panelSelector);
 
 
            if (!panel) {
 
                return;
 
            }
 
 
            var panelRect = panel.getBoundingClientRect();
 
            var offset = 0;
 
 
            placedPanels.forEach(function (previousRect) {
 
                var overlapsHorizontally =
 
                    panelRect.left < previousRect.right &&
 
                    panelRect.right > previousRect.left;
 
 
                var overlapsVertically =
 
                    panelRect.top < previousRect.bottom &&
 
                    panelRect.bottom > previousRect.top;
 
 
                if (overlapsHorizontally && overlapsVertically) {
 
                    offset = Math.max(
 
                        offset,
 
                        previousRect.bottom - panelRect.top + 8
 
                    );
 
                }
 
            });
 
 
            icon.style.setProperty('--popup-offset', offset + 'px');
 
 
            placedPanels.push(panel.getBoundingClientRect());
 
        });
 
 
     }
 
     }
  
Line 80: Line 33:
 
         }
 
         }
  
         icon.classList.toggle('open');
+
         if (icon === openIcon) {
 +
            icon.classList.remove('open');
 +
            openIcon = null;
 +
            return;
 +
        }
 +
 
 +
        if (openIcon) {
 +
            openIcon.classList.remove('open');
 +
        }
  
         window.requestAnimationFrame(arrangePopups);
+
         updateWidth(icon);
 +
        icon.classList.add('open');
 +
        openIcon = icon;
 
     });
 
     });
  
 
     window.addEventListener('resize', function () {
 
     window.addEventListener('resize', function () {
         window.requestAnimationFrame(arrangePopups);
+
         if (openIcon) {
 +
            updateWidth(openIcon);
 +
        }
 
     });
 
     });
 
})();
 
})();

Latest revision as of 17:15, 24 July 2026

(function () {
    var iconSelector =
        '.meter, .parallel, .commentary, .pictures, .outline, .comment, .word';

    var panelSelector =
        '.metertext, .paralleltext, .commentarytext, ' +
        '.picturestext, .outlinetext, .commenttext, .wordtext';

    var openIcon = null;

    function updateWidth(icon) {
        var viewportWidth = document.documentElement.clientWidth;
        var availableWidth =
            viewportWidth - icon.getBoundingClientRect().left - 16;

        icon.style.setProperty(
            '--popup-width',
            Math.max(0, Math.min(viewportWidth * 0.7, availableWidth)) + 'px'
        );
    }

    document.addEventListener('click', function (event) {
        var icon = event.target.closest(iconSelector);

        if (!icon) {
            return;
        }

        var panel = icon.querySelector(panelSelector);

        if (panel && panel.contains(event.target)) {
            return;
        }

        if (icon === openIcon) {
            icon.classList.remove('open');
            openIcon = null;
            return;
        }

        if (openIcon) {
            openIcon.classList.remove('open');
        }

        updateWidth(icon);
        icon.classList.add('open');
        openIcon = icon;
    });

    window.addEventListener('resize', function () {
        if (openIcon) {
            updateWidth(openIcon);
        }
    });
})();