Difference between revisions of "MediaWiki:Common.js"
(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(...") |
|||
| (5 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | + | (function () { | |
| + | var iconSelector = | ||
| + | '.meter, .parallel, .commentary, .pictures, .outline, .comment, .word'; | ||
| − | + | var panelSelector = | |
| − | var | + | '.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' | ||
| + | ); | ||
} | } | ||
| − | icon.classList. | + | 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); | ||
| + | } | ||
| + | }); | ||
| + | })(); | ||
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);
}
});
})();