✨🎊 Postal Wiki 三周年！ 🎊✨
🎂 2026.09.11 — 邮路三载，百科同行
用户:Hehua/filepreview.js
来自Postal Wiki
< 用户:Hehua
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/**
* FilePreview — 文件链接悬停预览脚本
* 鼠标悬停在 File: 蓝色链接上时，弹出浮窗显示：
* - 缩略图预览
* - 文件信息（尺寸、大小、上传者）
* - 分类 (categories)
* - 版权/许可模板 (templates)
*
* 安装方式：
* 将本脚本的内容复制到 User:<你的名字>/common.js
* 或通过 importScript('User:你的名字/FilePreview.js'); 引入
*/
(function () {
'use strict';
if (!window.mw || !mw.loader) return;
mw.loader.using(['mediawiki.api', 'mediawiki.util'], function () {
console.log('[FilePreview] 启动');
var CONFIG = {
delay: 400,
thumbWidth: 220,
maxPopupWidth: 460,
maxPopupHeight: 520
};
var state = { fetchTimer: null, hideTimer: null, popup: null };
/* ---------- popup ---------- */
function getPopup() {
if (!state.popup) {
var el = document.createElement('div');
el.id = 'filepreview-popup';
el.style.cssText = [
'display:none;position:fixed;z-index:9999',
'background:#fff',
'border:1px solid #c8ccd1',
'border-radius:6px',
'box-shadow:0 4px 16px rgba(0,0,0,0.2)',
'padding:14px',
'max-width:' + CONFIG.maxPopupWidth + 'px',
'max-height:' + CONFIG.maxPopupHeight + 'px',
'overflow-y:auto',
'font:13px/1.5 sans-serif',
'color:#222'
].join(';');
document.body.appendChild(el);
state.popup = el;
el.addEventListener('mouseenter', function () {
clearTimeout(state.hideTimer);
});
el.addEventListener('mouseleave', function () {
hidePopup();
});
}
return state.popup;
}
function showPopup(link, x, y, html) {
var popup = getPopup();
popup.innerHTML = html;
popup.style.display = 'block';
var rect = popup.getBoundingClientRect();
var left = Math.max(6, Math.min(x + 12, window.innerWidth - rect.width - 6));
var top = Math.max(6, Math.min(y + 12, window.innerHeight - rect.height - 6));
popup.style.left = left + 'px';
popup.style.top = top + 'px';
}
function hidePopup() {
clearTimeout(state.hideTimer);
clearTimeout(state.fetchTimer);
if (state.popup) state.popup.style.display = 'none';
}
/* ---------- localized namespace ---------- */
function getFileNSNames() {
var names = ['File', 'Image'];
var fmt = mw.config.get('wgFormattedNamespaces') || {};
if (fmt[6] && names.indexOf(fmt[6]) === -1) names.push(fmt[6]);
var aliases = mw.config.get('wgNamespaceAliases') || {};
for (var a in aliases) { if (aliases[a] === 6 && names.indexOf(a) === -1) names.push(a); }
return names;
}
var fileNSNames = getFileNSNames();
var fileNSRe = new RegExp('^(' + fileNSNames.map(function(n) { return n.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); }).join('|') + '):(.+)$', 'i');
/* ---------- api + render ---------- */
function esc(s) { return mw.html.escape(String(s)); }
function fmtBytes(b) {
if (!b) return '?';
if (b < 1024) return b + ' B';
if (b < 1048576) return (b / 1024).toFixed(1) + ' KB';
return (b / 1048576).toFixed(1) + ' MB';
}
function getFileTitle(link) {
var t = link.getAttribute('title') || '';
var m = t.match(fileNSRe);
if (m) return 'File:' + m[2];
var h = link.getAttribute('href') || '';
m = h.match(/[?&]title=(File|Image):([^&]+)/);
if (m) return 'File:' + decodeURIComponent(m[2].replace(/\+/g, ' '));
return null;
}
function isFileLink(link) {
if (!link) return false;
var title = link.getAttribute('title') || '';
if (fileNSRe.test(title)) return true;
var href = link.href || '';
if (/\/wiki\/(File|Image):/i.test(href) || /[?&]title=(File|Image):/i.test(href)) return true;
return false;
}
function fetchData(title) {
return new mw.Api().get({
action: 'query',
titles: title,
prop: 'categories|templates|imageinfo',
cllimit: 50,
tllimit: 50,
iiprop: 'url|size|user|comment|timestamp|extmetadata',
iiurlwidth: CONFIG.thumbWidth,
format: 'json'
});
}
function render(data, link, x, y) {
var pages = data.query && data.query.pages;
if (!pages) { showPopup(link, x, y, '<div style="color:#c00;">\u65e0\u6cd5\u83b7\u53d6\u6570\u636e</div>'); return; }
var id = Object.keys(pages)[0], page = pages[id];
if (id === '-1' || !page) { showPopup(link, x, y, '<div style="color:#888;">\u6587\u4ef6\u9875\u4e0d\u5b58\u5728</div>'); return; }
var parts = [];
parts.push('<div style="font-weight:bold;font-size:14px;margin-bottom:6px;word-break:break-all;">' + esc(page.title) + '</div>');
var ii = page.imageinfo && page.imageinfo[0];
if (ii) {
if (ii.thumburl) {
parts.push('<div style="text-align:center;margin-bottom:8px;"><a href="' + esc(ii.url) + '" target="_blank">' +
'<img src="' + esc(ii.thumburl) + '" alt="" style="max-width:100%;border:1px solid #eaecf0;border-radius:3px;"></a></div>');
}
var meta = [];
if (ii.width && ii.height) meta.push(ii.width + '\u00d7' + ii.height + ' (' + fmtBytes(ii.size) + ')');
if (ii.user) meta.push('\u4e0a\u4f20\u8005: ' + esc(ii.user));
if (meta.length) parts.push('<div style="color:#555;margin-bottom:4px;font-size:12px;">' + meta.join(' | ') + '</div>');
if (ii.extmetadata) {
var lf = ii.extmetadata.LicenseShortName || ii.extmetadata.License || ii.extmetadata.Copyright;
if (lf) parts.push('<div style="color:#555;margin-bottom:4px;font-size:12px;">\u8bb8\u53ef: ' + esc(String(lf.value || lf)) + '</div>');
}
}
if (page.categories && page.categories.length) {
parts.push('<div style="margin-top:8px;font-weight:bold;font-size:13px;">\u5206\u7c7b</div><ul style="margin:2px 0 0 14px;padding:0;">');
page.categories.slice(0, 25).forEach(function (c) {
parts.push('<li style="padding:1px 0;font-size:12px;">\u2022 ' + esc(c.title.replace(/^Category:/, '')) + '</li>');
});
if (page.categories.length > 25) parts.push('<li style="color:#888;font-size:12px;">\u2026\u8fd8\u6709' + (page.categories.length - 25) + '\u4e2a</li>');
parts.push('</ul>');
} else {
parts.push('<div style="margin-top:6px;color:#888;font-size:12px;">\u65e0\u5206\u7c7b</div>');
}
if (page.templates && page.templates.length) {
parts.push('<div style="margin-top:8px;font-weight:bold;font-size:13px;">\u6a21\u677f(\u542b\u7248\u6743/\u8bb8\u53ef)</div>');
parts.push('<div style="margin:2px 0 0;max-height:130px;overflow-y:auto;">');
page.templates.slice(0, 40).forEach(function (t) {
parts.push('<span style="display:inline-block;background:#f0f2f5;border:1px solid #d4d8dd;border-radius:3px;padding:1px 5px;margin:1px 2px;font:12px monospace;color:#333;">{{' + esc(t.title.replace(/^Template:/, '')) + '}}</span>');
});
if (page.templates.length > 40) parts.push('<span style="color:#888;font-size:11px;">\u2026+' + (page.templates.length - 40) + '</span>');
parts.push('</div>');
}
parts.push('<div style="margin-top:10px;border-top:1px solid #eaecf0;padding-top:6px;text-align:right;font-size:12px;">' +
'<a href="' + mw.util.getUrl(page.title) + '" target="_blank">\u6253\u5f00\u6587\u4ef6\u9875 \u2192</a></div>');
showPopup(link, x, y, parts.join(''));
}
/* ---------- bind ---------- */
function bindLink(link) {
if (link._filePreview) return;
link._filePreview = true;
link.addEventListener('mouseenter', function (e) {
clearTimeout(state.fetchTimer);
clearTimeout(state.hideTimer);
var title = getFileTitle(link);
if (!title) {
console.log('[FilePreview] 无法提取标题, title属性:', link.getAttribute('title'));
return;
}
console.log('[FilePreview] 请求:', title);
var x = e.clientX, y = e.clientY;
state.fetchTimer = setTimeout(function () {
showPopup(link, x, y, '<div style="color:#888;">\u52a0\u8f7d\u4e2d\u2026 ' + esc(title) + '</div>');
fetchData(title).then(function (d) {
console.log('[FilePreview] API返回:', JSON.stringify(d).slice(0, 300));
render(d, link, x, y);
}).catch(function (err) {
console.log('[FilePreview] API错误:', err);
showPopup(link, x, y, '<div style="color:#c00;">\u5931\u8d95: ' + esc(String(err)) + '</div>');
});
}, CONFIG.delay);
});
link.addEventListener('mouseleave', function () {
clearTimeout(state.fetchTimer);
state.hideTimer = setTimeout(hidePopup, 200);
});
}
function scanLinks() {
var sel = fileNSNames.map(function (n) { return 'a[title^="' + n + ':"]'; }).join(',');
var links = document.querySelectorAll(sel);
console.log('[FilePreview] 命名空间名:', JSON.stringify(fileNSNames), '选择器:', sel, '找到:', links.length);
links.forEach(bindLink);
}
/* ---------- mutation observer ---------- */
var observer = new MutationObserver(function () { scanLinks(); });
observer.observe(document.body, { childList: true, subtree: true });
scanLinks();
/* ---------- scroll hide ---------- */
window.addEventListener('scroll', hidePopup, true);
console.log('[FilePreview] 就绪');
});
})();
