Difference between revisions of "MediaWiki:Common.js"

From Waltharius
Jump to: navigation, search
 
(4 intermediate revisions by the same user not shown)
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;
+
         '.metertext, .paralleltext, .commentarytext, ' +
     }
+
        '.picturestext, .outlinetext, .commenttext, .wordtext';
 +
 
 +
     var openIcon = null;
  
     var textPanel = icon.querySelector(
+
     function updateWidth(icon) {
         '.metertext, .paralleltext, .commentarytext, ' +
+
         var viewportWidth = document.documentElement.clientWidth;
         '.picturestext, .outlinetext, .commenttext, .wordtext'
+
         var availableWidth =
    );
+
            viewportWidth - icon.getBoundingClientRect().left - 16;
  
    if (textPanel && textPanel.contains(event.target)) {
+
        icon.style.setProperty(
         return;
+
            '--popup-width',
 +
            Math.max(0, Math.min(viewportWidth * 0.7, availableWidth)) + 'px'
 +
         );
 
     }
 
     }
  
     var isOpening = !icon.classList.contains('open');
+
     document.addEventListener('click', function (event) {
 +
        var icon = event.target.closest(iconSelector);
  
    document.querySelectorAll(
+
         if (!icon) {
        '.meter.open, .parallel.open, .commentary.open, ' +
+
             return;
        '.pictures.open, .outline.open, .comment.open, .word.open'
 
    ).forEach(function (openIcon) {
 
         if (openIcon !== icon) {
 
             openIcon.classList.remove('open');
 
 
         }
 
         }
    });
 
  
    icon.classList.toggle('open');
+
        var panel = icon.querySelector(panelSelector);
  
    if (isOpening) {
+
        if (panel && panel.contains(event.target)) {
        var iconPosition = icon.getBoundingClientRect();
+
            return;
         var rightMargin = 16;
+
         }
         var availableWidth =
+
 
             document.documentElement.clientWidth -
+
         if (icon === openIcon) {
             iconPosition.left -
+
             icon.classList.remove('open');
             rightMargin;
+
             openIcon = null;
 +
             return;
 +
        }
  
         var preferredWidth =
+
         if (openIcon) {
             document.documentElement.clientWidth * 0.7;
+
             openIcon.classList.remove('open');
 +
        }
  
         var popupWidth = Math.min(preferredWidth, availableWidth);
+
         updateWidth(icon);
 +
        icon.classList.add('open');
 +
        openIcon = icon;
 +
    });
  
        icon.style.setProperty(
+
    window.addEventListener('resize', function () {
            '--popup-width',
+
        if (openIcon) {
             Math.max(popupWidth, 0) + 'px'
+
             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);
        }
    });
})();