Difference between revisions of "MediaWiki:Common.js"
| Line 7: | Line 7: | ||
'.picturestext, .outlinetext, .commenttext, .wordtext'; | '.picturestext, .outlinetext, .commenttext, .wordtext'; | ||
| − | function | + | var openIcon = null; |
| − | + | ||
| + | function updateWidth(icon) { | ||
var viewportWidth = document.documentElement.clientWidth; | var viewportWidth = document.documentElement.clientWidth; | ||
| − | |||
| − | |||
var availableWidth = | var availableWidth = | ||
| − | viewportWidth - | + | viewportWidth - icon.getBoundingClientRect().left - 16; |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
icon.style.setProperty( | icon.style.setProperty( | ||
'--popup-width', | '--popup-width', | ||
| − | Math.max( | + | Math.max(0, Math.min(viewportWidth * 0.7, availableWidth)) + 'px' |
); | ); | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| Line 39: | Line 27: | ||
} | } | ||
| − | var | + | var panel = icon.querySelector(panelSelector); |
| − | if ( | + | if (panel && panel.contains(event.target)) { |
return; | return; | ||
} | } | ||
| − | + | if (icon === openIcon) { | |
| + | icon.classList.remove('open'); | ||
| + | openIcon = null; | ||
| + | return; | ||
| + | } | ||
| − | + | if (openIcon) { | |
| + | openIcon.classList.remove('open'); | ||
| + | } | ||
| − | if ( | + | updateWidth(icon); |
| − | + | icon.classList.add('open'); | |
| + | openIcon = icon; | ||
| + | }); | ||
| + | |||
| + | window.addEventListener('resize', function () { | ||
| + | if (openIcon) { | ||
| + | updateWidth(openIcon); | ||
} | } | ||
}); | }); | ||
| − | |||
| − | |||
| − | |||
})(); | })(); | ||
Revision as of 16:58, 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);
}
});
})();