MediaWiki:Common.js:修订间差异
MediaWiki界面页面
更多操作
添加邀约故事区点击交互逻辑 (via update-page on MediaWiki MCP Server) |
更新邀约故事区 JS,对应 sandbox/2.0 的 data-date-index / data-story-index 结构 (via update-page on MediaWiki MCP Server) |
||
| 第56行: | 第56行: | ||
mw.hook("wikipage.content").add(function(){ | mw.hook("wikipage.content").add(function(){ | ||
var cards = document.querySelectorAll(". | /* 卡片:.card_content_date-item,带 data-date-index | ||
var | 故事内容:.card_date_story-content,带 data-story-index | ||
面板:#date-story-panel | |||
*/ | |||
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; | if(!cards.length || !panel) return; | ||
| 第63行: | 第68行: | ||
var currentIndex = -1; | var currentIndex = -1; | ||
cards.forEach(function(card | cards.forEach(function(card){ | ||
card.addEventListener("click", function(){ | card.addEventListener("click", function(){ | ||
var index = parseInt(card.getAttribute("data-date-index"), 10); | |||
// 点同一张 → 收起 | // 点同一张 → 收起 | ||
if(currentIndex === index){ | if(currentIndex === index){ | ||
panel.classList.remove(" | panel.classList.remove("card_date_story--active"); | ||
card.classList.remove(" | card.classList.remove("card_content_date-item--active"); | ||
currentIndex = -1; | currentIndex = -1; | ||
return; | return; | ||
} | } | ||
// | // 切换卡片高亮 | ||
cards.forEach(function(c){ c.classList.remove(" | cards.forEach(function(c){ c.classList.remove("card_content_date-item--active"); }); | ||
card.classList.add(" | card.classList.add("card_content_date-item--active"); | ||
currentIndex = index; | currentIndex = index; | ||
// | // 重新触发淡入动画 | ||
panel.classList.remove(" | panel.classList.remove("card_date_story--active"); | ||
void panel.offsetWidth; // | void panel.offsetWidth; // 强制 reflow,使动画重置 | ||
panel.classList.add(" | panel.classList.add("card_date_story--active"); | ||
// | // 显示对应故事内容,隐藏其他 | ||
contents.forEach(function(content){ | |||
var storyIndex = parseInt(content.getAttribute("data-story-index"), 10); | |||
content.style.display = storyIndex === index ? "" : "none"; | |||
}); | }); | ||
2026年3月5日 (四) 23:19的版本
/* 这里的任何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(){
/* 卡片:.card_content_date-item,带 data-date-index
故事内容:.card_date_story-content,带 data-story-index
面板:#date-story-panel
*/
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("card_date_story--active");
card.classList.remove("card_content_date-item--active");
currentIndex = -1;
return;
}
// 切换卡片高亮
cards.forEach(function(c){ c.classList.remove("card_content_date-item--active"); });
card.classList.add("card_content_date-item--active");
currentIndex = index;
// 重新触发淡入动画
panel.classList.remove("card_date_story--active");
void panel.offsetWidth; // 强制 reflow,使动画重置
panel.classList.add("card_date_story--active");
// 显示对应故事内容,隐藏其他
contents.forEach(function(content){
var storyIndex = parseInt(content.getAttribute("data-story-index"), 10);
content.style.display = storyIndex === index ? "" : "none";
});
});
});
});