MediaWiki:Common.js

Note: After saving, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

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

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

    function updatePopupWidth(icon) {
        var iconPosition = icon.getBoundingClientRect();
        var viewportWidth = document.documentElement.clientWidth;
        var rightMargin = 16;

        var availableWidth =
            viewportWidth -
            iconPosition.left -
            rightMargin;

        var preferredWidth = viewportWidth * 0.7;
        var popupWidth = Math.min(preferredWidth, availableWidth);

        icon.style.setProperty(
            '--popup-width',
            Math.max(popupWidth, 0) + 'px'
        );
    }

    function updateAllOpenPopups() {
        document.querySelectorAll(iconSelector + '.open').forEach(function (icon) {
            updatePopupWidth(icon);
        });
    }

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

        if (!icon) {
            return;
        }

        var textPanel = icon.querySelector(panelSelector);

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

        var isOpening = !icon.classList.contains('open');

        icon.classList.toggle('open');

        if (isOpening) {
            updatePopupWidth(icon);
        }
    });

    window.addEventListener('resize', updateAllOpenPopups);
    window.addEventListener('orientationchange', updateAllOpenPopups);
})();