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

MediaWiki:Common.js:修订间差异

MediaWiki界面页面
Rin留言 | 贡献
引入 CardData.js (via update-page on MediaWiki MCP Server)
Rin留言 | 贡献
无编辑摘要
第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");
                }
            });

        });

    });

});