MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
hover hires |
chrome zoom popup |
||
| Line 1: | Line 1: | ||
/* | /* Logo stays in the sidebar. Search sits at the left of the header. | ||
Card thumbs | Card list: 200px thumbs for load; hover shows a fixed popup of the full 745px GEMP image. | ||
Chrome/Edge ignore src changes while srcset is set, so we never swap the thumb src. */ | |||
(function () { | (function () { | ||
function | function originalFromImg(img) { | ||
var src = img.getAttribute('src') || img.src || ''; | |||
var ss = img.getAttribute('srcset') || ''; | |||
var m = src.match(/\/images\/thumb\/([^/]+\/[^/]+\/[^/?#]+)\/\d+px-/); | |||
if (m) { | |||
return '/images/' + m[1]; | |||
} | } | ||
m = ss.match(/\/images\/thumb\/([^/]+\/[^/]+\/[^/?#]+)\//); | |||
if (m) { | if (m) { | ||
return '/images/' + m[1]; | return '/images/' + m[1]; | ||
} | } | ||
return src; | m = src.match(/\/images\/[^/]+\/[^/]+\/Premiere-[LD]-[^/?#]+/i); | ||
if (m) { | |||
return m[0]; | |||
} | |||
return src.split(' ')[0]; | |||
} | } | ||
function | function bindZoom(root) { | ||
var | var pop = document.getElementById('swccg-card-zoom'); | ||
if (!pop) { | |||
pop = document.createElement('img'); | |||
pop.id = 'swccg-card-zoom'; | |||
pop.alt = ''; | |||
document.body.appendChild(pop); | |||
} | |||
var links = (root || document).querySelectorAll('table.card-thumbs a'); | |||
for (var i = 0; i < links.length; i++) { | |||
if (links[i].getAttribute('data-zoom-bound')) { | |||
continue; | |||
} | |||
links[i].setAttribute('data-zoom-bound', '1'); | |||
(function (a) { | |||
var img = a.querySelector('img'); | |||
if (!img) { | |||
return; | |||
} | |||
a.addEventListener('mouseenter', function () { | |||
var full = originalFromImg(img); | |||
pop.src = full; | |||
var r = img.getBoundingClientRect(); | |||
var w = 300; | |||
var h = 420; | |||
var left = r.right + 10; | |||
if (left + w > window.innerWidth - 8) { | |||
left = Math.max(8, r.left - w - 10); | |||
} | |||
var top = r.top; | |||
if (top + h > window.innerHeight - 8) { | |||
top = Math.max(8, window.innerHeight - h - 8); | |||
} | |||
pop.style.left = left + 'px'; | |||
pop.style.top = top + 'px'; | |||
pop.classList.add('is-on'); | |||
}); | |||
a.addEventListener('mouseleave', function () { | |||
pop.classList.remove('is-on'); | |||
}); | |||
})(links[i]); | |||
} | } | ||
} | } | ||
function moveSearch() { | |||
var search = document.getElementById('p-search'); | var search = document.getElementById('p-search'); | ||
var head = document.getElementById('mw-head'); | var head = document.getElementById('mw-head'); | ||
| Line 34: | Line 71: | ||
head.insertBefore(search, head.firstChild); | head.insertBefore(search, head.firstChild); | ||
} | } | ||
} | |||
function start() { | |||
moveSearch(); | |||
bindZoom(document); | |||
} | |||
if (window.mw && mw.hook) { | |||
mw.hook('wikipage.content').add(function () { | |||
start(); | |||
}); | |||
} | |||
if (document.readyState === 'loading') { | |||
document.addEventListener('DOMContentLoaded', start); | |||
} else { | |||
start(); | |||
} | |||
} | |||
})(); | })(); | ||
Revision as of 01:38, 21 September 2026
/* Logo stays in the sidebar. Search sits at the left of the header.
Card list: 200px thumbs for load; hover shows a fixed popup of the full 745px GEMP image.
Chrome/Edge ignore src changes while srcset is set, so we never swap the thumb src. */
(function () {
function originalFromImg(img) {
var src = img.getAttribute('src') || img.src || '';
var ss = img.getAttribute('srcset') || '';
var m = src.match(/\/images\/thumb\/([^/]+\/[^/]+\/[^/?#]+)\/\d+px-/);
if (m) {
return '/images/' + m[1];
}
m = ss.match(/\/images\/thumb\/([^/]+\/[^/]+\/[^/?#]+)\//);
if (m) {
return '/images/' + m[1];
}
m = src.match(/\/images\/[^/]+\/[^/]+\/Premiere-[LD]-[^/?#]+/i);
if (m) {
return m[0];
}
return src.split(' ')[0];
}
function bindZoom(root) {
var pop = document.getElementById('swccg-card-zoom');
if (!pop) {
pop = document.createElement('img');
pop.id = 'swccg-card-zoom';
pop.alt = '';
document.body.appendChild(pop);
}
var links = (root || document).querySelectorAll('table.card-thumbs a');
for (var i = 0; i < links.length; i++) {
if (links[i].getAttribute('data-zoom-bound')) {
continue;
}
links[i].setAttribute('data-zoom-bound', '1');
(function (a) {
var img = a.querySelector('img');
if (!img) {
return;
}
a.addEventListener('mouseenter', function () {
var full = originalFromImg(img);
pop.src = full;
var r = img.getBoundingClientRect();
var w = 300;
var h = 420;
var left = r.right + 10;
if (left + w > window.innerWidth - 8) {
left = Math.max(8, r.left - w - 10);
}
var top = r.top;
if (top + h > window.innerHeight - 8) {
top = Math.max(8, window.innerHeight - h - 8);
}
pop.style.left = left + 'px';
pop.style.top = top + 'px';
pop.classList.add('is-on');
});
a.addEventListener('mouseleave', function () {
pop.classList.remove('is-on');
});
})(links[i]);
}
}
function moveSearch() {
var search = document.getElementById('p-search');
var head = document.getElementById('mw-head');
if (search && head && search.parentNode !== head) {
head.insertBefore(search, head.firstChild);
}
}
function start() {
moveSearch();
bindZoom(document);
}
if (window.mw && mw.hook) {
mw.hook('wikipage.content').add(function () {
start();
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', start);
} else {
start();
}
})();