打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:Common.js:修订间差异

MediaWiki界面页面
Rin留言 | 贡献
添加邀约故事区点击交互逻辑 (via update-page on MediaWiki MCP Server)
Rin留言 | 贡献
更新邀约故事区 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(".ron-date-card");
    /* 卡片:.card_content_date-item,带 data-date-index
     var panel = document.querySelector(".ron-date-story");
      故事内容:.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, index){
     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("is-active");
                 panel.classList.remove("card_date_story--active");
                 card.classList.remove("is-active");
                 card.classList.remove("card_content_date-item--active");
                 currentIndex = -1;
                 currentIndex = -1;
                 return;
                 return;
             }
             }


             // 切换高亮
             // 切换卡片高亮
             cards.forEach(function(c){ c.classList.remove("is-active"); });
             cards.forEach(function(c){ c.classList.remove("card_content_date-item--active"); });
             card.classList.add("is-active");
             card.classList.add("card_content_date-item--active");
             currentIndex = index;
             currentIndex = index;


             // 重新触发动画
             // 重新触发淡入动画
             panel.classList.remove("is-active");
             panel.classList.remove("card_date_story--active");
             void panel.offsetWidth; // reflow
             void panel.offsetWidth; // 强制 reflow,使动画重置
             panel.classList.add("is-active");
             panel.classList.add("card_date_story--active");


             // 切换对应故事内容
             // 显示对应故事内容,隐藏其他
             var storyId = card.getAttribute("data-story");
             contents.forEach(function(content){
            panel.querySelectorAll(".ron-date-story__chapter").forEach(function(chapter){
                 var storyIndex = parseInt(content.getAttribute("data-story-index"), 10);
                 chapter.classList.toggle("is-active", chapter.getAttribute("data-story") === storyId);
                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";
            });

        });

    });

});