MediaWiki:Common.js:修订间差异
MediaWiki界面页面
更多操作
更新邀约故事区 JS,对应 sandbox/2.0 的 data-date-index / data-story-index 结构 (via update-page on MediaWiki MCP Server) |
统一邀约故事区 class 命名,与 CSS 保持一致(is-visible / is-active) (via update-page on MediaWiki MCP Server) |
||
| 第57行: | 第57行: | ||
/* 卡片:.card_content_date-item,带 data-date-index | /* 卡片:.card_content_date-item,带 data-date-index | ||
故事内容:.card_date_story-content,带 data-story- | 故事内容:.card_date_story-content,带 data-story-index(CSS:.is-active → display:block) | ||
面板:#date-story- | 面板:#date-story-panel(CSS:.is-visible → display:block + 淡入动画) | ||
*/ | */ | ||
var cards = document.querySelectorAll(".card_content_date-item"); | var cards = document.querySelectorAll(".card_content_date-item"); | ||
| 第74行: | 第74行: | ||
var index = parseInt(card.getAttribute("data-date-index"), 10); | var index = parseInt(card.getAttribute("data-date-index"), 10); | ||
// 点同一张 → | // 点同一张 → 收起面板 | ||
if(currentIndex === index){ | if(currentIndex === index){ | ||
panel.classList.remove(" | panel.classList.remove("is-visible"); | ||
card.classList.remove(" | card.classList.remove("is-active"); | ||
currentIndex = -1; | currentIndex = -1; | ||
return; | return; | ||
} | } | ||
// | // 切换卡片高亮(is-active) | ||
cards.forEach(function(c){ c.classList.remove(" | cards.forEach(function(c){ c.classList.remove("is-active"); }); | ||
card.classList.add(" | card.classList.add("is-active"); | ||
currentIndex = index; | currentIndex = index; | ||
// | // 重新触发淡入动画:先移除再加回,强制 reflow | ||
panel.classList.remove(" | panel.classList.remove("is-visible"); | ||
void panel.offsetWidth; | void panel.offsetWidth; | ||
panel.classList.add(" | panel.classList.add("is-visible"); | ||
// | // 切换故事内容(is-active) | ||
contents.forEach(function(content){ | contents.forEach(function(content){ | ||
var storyIndex = parseInt(content.getAttribute("data-story-index"), 10); | var storyIndex = parseInt(content.getAttribute("data-story-index"), 10); | ||
if(storyIndex === index){ | |||
content.classList.add("is-active"); | |||
} else { | |||
content.classList.remove("is-active"); | |||
} | |||
}); | }); | ||
2026年3月6日 (五) 18:24的版本
/* 这里的任何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(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");
}
});
});
});
});