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(...") |
|||
| Line 1: | Line 1: | ||
| − | |||
| − | |||
document.addEventListener('click', function (event) { | document.addEventListener('click', function (event) { | ||
var icon = event.target.closest( | var icon = event.target.closest( | ||
| Line 9: | Line 7: | ||
return; | return; | ||
} | } | ||
| + | |||
| + | var textPanel = icon.querySelector( | ||
| + | '.metertext, .paralleltext, .commentarytext, ' + | ||
| + | '.picturestext, .outlinetext, .commenttext, .wordtext' | ||
| + | ); | ||
| + | |||
| + | if (textPanel && textPanel.contains(event.target)) { | ||
| + | return; | ||
| + | } | ||
| + | |||
| + | var isOpening = !icon.classList.contains('open'); | ||
| + | |||
| + | document.querySelectorAll( | ||
| + | '.meter.open, .parallel.open, .commentary.open, ' + | ||
| + | '.pictures.open, .outline.open, .comment.open, .word.open' | ||
| + | ).forEach(function (openIcon) { | ||
| + | if (openIcon !== icon) { | ||
| + | openIcon.classList.remove('open'); | ||
| + | } | ||
| + | }); | ||
icon.classList.toggle('open'); | icon.classList.toggle('open'); | ||
| + | |||
| + | if (isOpening) { | ||
| + | var iconPosition = icon.getBoundingClientRect(); | ||
| + | var rightMargin = 16; | ||
| + | var availableWidth = | ||
| + | document.documentElement.clientWidth - | ||
| + | iconPosition.left - | ||
| + | rightMargin; | ||
| + | |||
| + | var preferredWidth = | ||
| + | document.documentElement.clientWidth * 0.7; | ||
| + | |||
| + | var popupWidth = Math.min(preferredWidth, availableWidth); | ||
| + | |||
| + | icon.style.setProperty( | ||
| + | '--popup-width', | ||
| + | Math.max(popupWidth, 0) + 'px' | ||
| + | ); | ||
| + | } | ||
}); | }); | ||
Revision as of 16:54, 24 July 2026
document.addEventListener('click', function (event) {
var icon = event.target.closest(
'.meter, .parallel, .commentary, .pictures, .outline, .comment, .word'
);
if (!icon) {
return;
}
var textPanel = icon.querySelector(
'.metertext, .paralleltext, .commentarytext, ' +
'.picturestext, .outlinetext, .commenttext, .wordtext'
);
if (textPanel && textPanel.contains(event.target)) {
return;
}
var isOpening = !icon.classList.contains('open');
document.querySelectorAll(
'.meter.open, .parallel.open, .commentary.open, ' +
'.pictures.open, .outline.open, .comment.open, .word.open'
).forEach(function (openIcon) {
if (openIcon !== icon) {
openIcon.classList.remove('open');
}
});
icon.classList.toggle('open');
if (isOpening) {
var iconPosition = icon.getBoundingClientRect();
var rightMargin = 16;
var availableWidth =
document.documentElement.clientWidth -
iconPosition.left -
rightMargin;
var preferredWidth =
document.documentElement.clientWidth * 0.7;
var popupWidth = Math.min(preferredWidth, availableWidth);
icon.style.setProperty(
'--popup-width',
Math.max(popupWidth, 0) + 'px'
);
}
});