Difference between revisions of "MediaWiki:Common.js"
| Line 1: | Line 1: | ||
| − | + | (function () { | |
| − | var | + | var iconSelector = |
| − | '.meter, .parallel, .commentary, .pictures, .outline, .comment, .word' | + | '.meter, .parallel, .commentary, .pictures, .outline, .comment, .word'; |
| − | |||
| − | + | var panelSelector = | |
| − | |||
| − | |||
| − | |||
| − | var | ||
'.metertext, .paralleltext, .commentarytext, ' + | '.metertext, .paralleltext, .commentarytext, ' + | ||
| − | '.picturestext, .outlinetext, .commenttext, .wordtext' | + | '.picturestext, .outlinetext, .commenttext, .wordtext'; |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | function updatePopupWidth(icon) { | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
var iconPosition = icon.getBoundingClientRect(); | var iconPosition = icon.getBoundingClientRect(); | ||
| + | var viewportWidth = document.documentElement.clientWidth; | ||
var rightMargin = 16; | var rightMargin = 16; | ||
| + | |||
var availableWidth = | var availableWidth = | ||
| − | + | viewportWidth - | |
iconPosition.left - | iconPosition.left - | ||
rightMargin; | rightMargin; | ||
| − | var preferredWidth = | + | var preferredWidth = viewportWidth * 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);
})();