Difference between revisions of "MediaWiki:Common.js"
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | + | (function () { | |
| − | var | + | var iconSelector = |
| − | '.meter, .parallel, .commentary, .pictures, .outline, .comment, .word' | + | '.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' | ||
| + | ); | ||
} | } | ||
| − | var | + | document.addEventListener('click', function (event) { |
| + | var icon = event.target.closest(iconSelector); | ||
| − | + | if (!icon) { | |
| − | + | return; | |
| − | |||
| − | |||
| − | if ( | ||
| − | |||
} | } | ||
| − | |||
| − | + | 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); | |
| − | + | } | |
| − | } | + | }); |
| − | }); | + | })(); |
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);
}
});
})();