Difference between revisions of "MediaWiki:Common.js"

From Waltharius
Jump to: navigation, search
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 =
        return;
 
    }
 
 
 
     var textPanel = icon.querySelector(
 
 
         '.metertext, .paralleltext, .commentarytext, ' +
 
         '.metertext, .paralleltext, .commentarytext, ' +
         '.picturestext, .outlinetext, .commenttext, .wordtext'
+
         '.picturestext, .outlinetext, .commenttext, .wordtext';
    );
 
 
 
    if (textPanel && textPanel.contains(event.target)) {
 
        return;
 
    }
 
  
     var isOpening = !icon.classList.contains('open');
+
     function updatePopupWidth(icon) {
 
 
    document.querySelectorAll(
 
        '.meter.open, .parallel.open, .commentary.open, ' +
 
        '.pictures.open, .outline.open, .comment.open, .word.open'
 
    ).forEach(function (openIcon) {
 
        if (openIcon !== icon) {
 
            openIcon.classList.remove('open');
 
        }
 
    });
 
 
 
    icon.classList.toggle('open');
 
 
 
    if (isOpening) {
 
 
         var iconPosition = icon.getBoundingClientRect();
 
         var iconPosition = icon.getBoundingClientRect();
 +
        var viewportWidth = document.documentElement.clientWidth;
 
         var rightMargin = 16;
 
         var rightMargin = 16;
 +
 
         var availableWidth =
 
         var availableWidth =
             document.documentElement.clientWidth -
+
             viewportWidth -
 
             iconPosition.left -
 
             iconPosition.left -
 
             rightMargin;
 
             rightMargin;
  
         var preferredWidth =
+
         var preferredWidth = viewportWidth * 0.7;
            document.documentElement.clientWidth * 0.7;
 
 
 
 
         var popupWidth = Math.min(preferredWidth, availableWidth);
 
         var popupWidth = Math.min(preferredWidth, availableWidth);
  
Line 48: Line 25:
 
         );
 
         );
 
     }
 
     }
});
+
 
 +
    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);
 +
})();

Revision as of 16:57, 24 July 2026

(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);
})();