Difference between revisions of "MediaWiki:Common.js"

From Waltharius
Jump to: navigation, search
(Created page with "Any JavaScript here will be loaded for all users on every page load.: document.addEventListener('click', function (event) { var icon = event.target.closest(...")
 
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
 
 
 
document.addEventListener('click', function (event) {
 
document.addEventListener('click', function (event) {
 
     var icon = event.target.closest(
 
     var icon = event.target.closest(
Line 9: Line 7:
 
         return;
 
         return;
 
     }
 
     }
 +
 +
    var textPanel = icon.querySelector(
 +
        '.metertext, .paralleltext, .commentarytext, ' +
 +
        '.picturestext, .outlinetext, .commenttext, .wordtext'
 +
    );
 +
 +
    if (textPanel && textPanel.contains(event.target)) {
 +
        return;
 +
    }
 +
 +
    var isOpening = !icon.classList.contains('open');
 +
 +
    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');
 
     icon.classList.toggle('open');
 +
 +
    if (isOpening) {
 +
        var iconPosition = icon.getBoundingClientRect();
 +
        var rightMargin = 16;
 +
        var availableWidth =
 +
            document.documentElement.clientWidth -
 +
            iconPosition.left -
 +
            rightMargin;
 +
 +
        var preferredWidth =
 +
            document.documentElement.clientWidth * 0.7;
 +
 +
        var popupWidth = Math.min(preferredWidth, availableWidth);
 +
 +
        icon.style.setProperty(
 +
            '--popup-width',
 +
            Math.max(popupWidth, 0) + 'px'
 +
        );
 +
    }
 
});
 
});

Revision as of 16:54, 24 July 2026

document.addEventListener('click', function (event) {
    var icon = event.target.closest(
        '.meter, .parallel, .commentary, .pictures, .outline, .comment, .word'
    );

    if (!icon) {
        return;
    }

    var textPanel = icon.querySelector(
        '.metertext, .paralleltext, .commentarytext, ' +
        '.picturestext, .outlinetext, .commenttext, .wordtext'
    );

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

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

    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 rightMargin = 16;
        var availableWidth =
            document.documentElement.clientWidth -
            iconPosition.left -
            rightMargin;

        var preferredWidth =
            document.documentElement.clientWidth * 0.7;

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

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