MediaWiki:Common.js:修订间差异
MediaWiki界面页面
更多操作
引入 CardData.js (via update-page on MediaWiki MCP Server) |
无编辑摘要 |
||
| 第16行: | 第16行: | ||
/* 小传折叠 */ | /* 小传折叠 + 标题 sticky */ | ||
mw.hook("wikipage.content").add(function(){ | mw.hook("wikipage.content").add(function(){ | ||
document.querySelectorAll(".card_content_story").forEach(function(story){ | document.querySelectorAll(".card_content_story").forEach(function(story){ | ||
var toggle = story.querySelector(".card_content_story-toggle"); | var toggle = story.querySelector(".card_content_story-toggle"); | ||
var timeline = story.querySelector(".card_content_story-timeline"); | var timeline = story.querySelector(".card_content_story-timeline"); | ||
var headerLeft = story.querySelector(".card_content_story-header-left"); | |||
if(!toggle || !timeline) return; | if (!toggle || !timeline || !headerLeft) return; | ||
var icon = toggle.querySelector(".story-toggle-icon"); | var icon = toggle.querySelector(".story-toggle-icon"); | ||
var text = toggle.querySelector(".story-toggle-text"); | var text = toggle.querySelector(".story-toggle-text"); | ||
/* 折叠/展开 */ | |||
toggle.addEventListener("click", function(){ | toggle.addEventListener("click", function(){ | ||
var collapsed = toggle.getAttribute("data-collapsed") === "true"; | var collapsed = toggle.getAttribute("data-collapsed") === "true"; | ||
if (collapsed) { | |||
if(collapsed){ | timeline.style.opacity = "1"; | ||
timeline.style.opacity = "1"; | |||
timeline.style.transform = "translateY(0)"; | timeline.style.transform = "translateY(0)"; | ||
timeline.style.maxHeight = "5000px"; | timeline.style.maxHeight = "5000px"; | ||
}else{ | } else { | ||
timeline.style.opacity = "0"; | |||
timeline.style.opacity = "0"; | |||
timeline.style.transform = "translateY(-6px)"; | timeline.style.transform = "translateY(-6px)"; | ||
timeline.style.maxHeight = "0"; | timeline.style.maxHeight = "0"; | ||
} | } | ||
toggle.setAttribute("data-collapsed", collapsed ? "false" : "true"); | toggle.setAttribute("data-collapsed", collapsed ? "false" : "true"); | ||
icon.innerText = collapsed ? "-" : "+"; | icon.innerText = collapsed ? "-" : "+"; | ||
text.innerText = collapsed ? "收起" : "展开"; | text.innerText = collapsed ? "收起" : "展开"; | ||
if (!collapsed) headerLeft.classList.remove("is-sticky"); | |||
}); | |||
}); | /* sticky 判断 */ | ||
function updateSticky() { | |||
if (toggle.getAttribute("data-collapsed") === "true") { | |||
headerLeft.classList.remove("is-sticky"); | |||
return; | |||
} | |||
var storyRect = story.getBoundingClientRect(); | |||
var timelineRect = timeline.getBoundingClientRect(); | |||
// 小传顶部滚出视口 && 时间轴底部还在视口内 | |||
if (storyRect.top < 0 && timelineRect.bottom > window.innerHeight) { | |||
headerLeft.classList.add("is-sticky"); | |||
} else { | |||
headerLeft.classList.remove("is-sticky"); | |||
} | |||
} | |||
window.addEventListener("scroll", updateSticky, { passive: true }); | |||
updateSticky(); | |||
}); | }); | ||
}); | }); | ||
/* 邀约故事区 */ | /* 邀约故事区 */ | ||
2026年3月12日 (四) 18:53的版本
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
/* 引入卡片数据渲染模块 */
mw.loader.load( '/index.php?title=MediaWiki:CardData.js&action=raw&ctype=text/javascript' );
/* 卡面滚动 */
window.addEventListener("scroll", () => {
const bg = document.querySelector(".card_fullscreen-img");
if (window.scrollY > 10) {
bg.classList.add("scrolled");
} else {
bg.classList.remove("scrolled");
}
});
/* 小传折叠 + 标题 sticky */
mw.hook("wikipage.content").add(function(){
document.querySelectorAll(".card_content_story").forEach(function(story){
var toggle = story.querySelector(".card_content_story-toggle");
var timeline = story.querySelector(".card_content_story-timeline");
var headerLeft = story.querySelector(".card_content_story-header-left");
if (!toggle || !timeline || !headerLeft) return;
var icon = toggle.querySelector(".story-toggle-icon");
var text = toggle.querySelector(".story-toggle-text");
/* 折叠/展开 */
toggle.addEventListener("click", function(){
var collapsed = toggle.getAttribute("data-collapsed") === "true";
if (collapsed) {
timeline.style.opacity = "1";
timeline.style.transform = "translateY(0)";
timeline.style.maxHeight = "5000px";
} else {
timeline.style.opacity = "0";
timeline.style.transform = "translateY(-6px)";
timeline.style.maxHeight = "0";
}
toggle.setAttribute("data-collapsed", collapsed ? "false" : "true");
icon.innerText = collapsed ? "-" : "+";
text.innerText = collapsed ? "收起" : "展开";
if (!collapsed) headerLeft.classList.remove("is-sticky");
});
/* sticky 判断 */
function updateSticky() {
if (toggle.getAttribute("data-collapsed") === "true") {
headerLeft.classList.remove("is-sticky");
return;
}
var storyRect = story.getBoundingClientRect();
var timelineRect = timeline.getBoundingClientRect();
// 小传顶部滚出视口 && 时间轴底部还在视口内
if (storyRect.top < 0 && timelineRect.bottom > window.innerHeight) {
headerLeft.classList.add("is-sticky");
} else {
headerLeft.classList.remove("is-sticky");
}
}
window.addEventListener("scroll", updateSticky, { passive: true });
updateSticky();
});
});
/* 邀约故事区 */
mw.hook("wikipage.content").add(function(){
/* 卡片:.card_content_date-item,带 data-date-index
故事内容:.card_date_story-content,带 data-story-index(CSS:.is-active → display:block)
面板:#date-story-panel(CSS:.is-visible → display:block + 淡入动画)
*/
var cards = document.querySelectorAll(".card_content_date-item");
var panel = document.getElementById("date-story-panel");
var contents = document.querySelectorAll(".card_date_story-content");
if(!cards.length || !panel) return;
var currentIndex = -1;
cards.forEach(function(card){
card.addEventListener("click", function(){
var index = parseInt(card.getAttribute("data-date-index"), 10);
// 点同一张 → 收起面板
if(currentIndex === index){
panel.classList.remove("is-visible");
card.classList.remove("is-active");
currentIndex = -1;
return;
}
// 切换卡片高亮(is-active)
cards.forEach(function(c){ c.classList.remove("is-active"); });
card.classList.add("is-active");
currentIndex = index;
// 重新触发淡入动画:先移除再加回,强制 reflow
panel.classList.remove("is-visible");
void panel.offsetWidth;
panel.classList.add("is-visible");
// 切换故事内容(is-active)
contents.forEach(function(content){
var storyIndex = parseInt(content.getAttribute("data-story-index"), 10);
if(storyIndex === index){
content.classList.add("is-active");
} else {
content.classList.remove("is-active");
}
});
});
});
});