MediaWiki:Common.js:修订间差异
MediaWiki界面页面
更多操作
无编辑摘要 |
添加邀约故事区点击交互逻辑 (via update-page on MediaWiki MCP Server) |
||
| 第45行: | 第45行: | ||
icon.innerText = collapsed ? "-" : "+"; | icon.innerText = collapsed ? "-" : "+"; | ||
text.innerText = collapsed ? "收起" : "展开"; | text.innerText = collapsed ? "收起" : "展开"; | ||
}); | |||
}); | |||
}); | |||
/* 邀约故事区 */ | |||
mw.hook("wikipage.content").add(function(){ | |||
var cards = document.querySelectorAll(".ron-date-card"); | |||
var panel = document.querySelector(".ron-date-story"); | |||
if(!cards.length || !panel) return; | |||
var currentIndex = -1; | |||
cards.forEach(function(card, index){ | |||
card.addEventListener("click", function(){ | |||
// 点同一张 → 收起 | |||
if(currentIndex === index){ | |||
panel.classList.remove("is-active"); | |||
card.classList.remove("is-active"); | |||
currentIndex = -1; | |||
return; | |||
} | |||
// 切换高亮 | |||
cards.forEach(function(c){ c.classList.remove("is-active"); }); | |||
card.classList.add("is-active"); | |||
currentIndex = index; | |||
// 重新触发动画 | |||
panel.classList.remove("is-active"); | |||
void panel.offsetWidth; // reflow | |||
panel.classList.add("is-active"); | |||
// 切换对应故事内容 | |||
var storyId = card.getAttribute("data-story"); | |||
panel.querySelectorAll(".ron-date-story__chapter").forEach(function(chapter){ | |||
chapter.classList.toggle("is-active", chapter.getAttribute("data-story") === storyId); | |||
}); | |||
}); | }); | ||
2026年3月5日 (四) 23:08的版本
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
/* 卡面滚动 */
window.addEventListener("scroll", () => {
const bg = document.querySelector(".card_fullscreen-img");
if (window.scrollY > 10) {
bg.classList.add("scrolled");
} else {
bg.classList.remove("scrolled");
}
});
/* 小传折叠 */
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");
if(!toggle || !timeline) 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 ? "收起" : "展开";
});
});
});
/* 邀约故事区 */
mw.hook("wikipage.content").add(function(){
var cards = document.querySelectorAll(".ron-date-card");
var panel = document.querySelector(".ron-date-story");
if(!cards.length || !panel) return;
var currentIndex = -1;
cards.forEach(function(card, index){
card.addEventListener("click", function(){
// 点同一张 → 收起
if(currentIndex === index){
panel.classList.remove("is-active");
card.classList.remove("is-active");
currentIndex = -1;
return;
}
// 切换高亮
cards.forEach(function(c){ c.classList.remove("is-active"); });
card.classList.add("is-active");
currentIndex = index;
// 重新触发动画
panel.classList.remove("is-active");
void panel.offsetWidth; // reflow
panel.classList.add("is-active");
// 切换对应故事内容
var storyId = card.getAttribute("data-story");
panel.querySelectorAll(".ron-date-story__chapter").forEach(function(chapter){
chapter.classList.toggle("is-active", chapter.getAttribute("data-story") === storyId);
});
});
});
});