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

MediaWiki:Common.js:修订间差异

MediaWiki界面页面
Rin留言 | 贡献
新增道具页 switchItem 函数 (via update-page on MediaWiki MCP Server)
Rin留言 | 贡献
道具页:搜索过滤 + 切换逻辑整合 (via update-page on MediaWiki MCP Server)
 
第5行: 第5行:


/* 卡面滚动 */
/* 卡面滚动 */
window.addEventListener("scroll", () => {
window.addEventListener("scroll", function() {
   const bg = document.querySelector(".card_fullscreen-img");
   var bg = document.querySelector(".card_fullscreen-img");
 
  if (!bg) return;
   if (window.scrollY > 10) {
   if (window.scrollY > 10) {
     bg.classList.add("scrolled");
     bg.classList.add("scrolled");
第14行: 第14行:
   }
   }
});
});


/* 小传折叠 + 标题 sticky */
/* 小传折叠 + 标题 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");
         var headerLeft = story.querySelector(".card_content_story-header-left");
         if (!toggle || !timeline || !headerLeft) 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";
第47行: 第40行:
             if (!collapsed) headerLeft.classList.remove("is-sticky");
             if (!collapsed) headerLeft.classList.remove("is-sticky");
         });
         });
        /* sticky 判断 */
         function updateSticky() {
         function updateSticky() {
             if (toggle.getAttribute("data-collapsed") === "true") {
             if (toggle.getAttribute("data-collapsed") === "true") {
第62行: 第53行:
             }
             }
         }
         }
         window.addEventListener("scroll", updateSticky, { passive: true });
         window.addEventListener("scroll", updateSticky, { passive: true });
         updateSticky();
         updateSticky();
     });
     });
});
});


/* 邀约故事区 */
/* 邀约故事区 */
mw.hook("wikipage.content").add(function(){
mw.hook("wikipage.content").add(function(){
 
     var cards   = document.querySelectorAll(".card_content_date-item");
     var cards = document.querySelectorAll(".card_content_date-item");
     var panel   = document.getElementById("date-story-panel");
     var panel = document.getElementById("date-story-panel");
     var contents = document.querySelectorAll(".card_date_story-content");
     var contents = document.querySelectorAll(".card_date_story-content");
 
     if (!cards.length || !panel) return;
     if(!cards.length || !panel) return;
 
     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);
             var index = parseInt(card.getAttribute("data-date-index"), 10);
 
             if (currentIndex === index) {
             if(currentIndex === index){
                 panel.classList.remove("is-visible");
                 panel.classList.remove("is-visible");
                 card.classList.remove("is-active");
                 card.classList.remove("is-active");
第92行: 第74行:
                 return;
                 return;
             }
             }
             cards.forEach(function(c){ c.classList.remove("is-active"); });
             cards.forEach(function(c){ c.classList.remove("is-active"); });
             card.classList.add("is-active");
             card.classList.add("is-active");
             currentIndex = index;
             currentIndex = index;
             panel.classList.remove("is-visible");
             panel.classList.remove("is-visible");
             void panel.offsetWidth;
             void panel.offsetWidth;
             panel.classList.add("is-visible");
             panel.classList.add("is-visible");
             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.toggle("is-active", storyIndex === index);
                    content.classList.add("is-active");
                } else {
                    content.classList.remove("is-active");
                }
             });
             });
         });
         });
     });
     });
});
});


/* 道具页:左侧列表切换右侧详情 */
/* 道具页:列表切换 + 搜索过滤 */
mw.hook("wikipage.content").add(function(){
mw.hook("wikipage.content").add(function(){
 
     var tabs   = document.querySelectorAll(".item-tab");
     var tabs = document.querySelectorAll(".item-tab");
     var details = document.querySelectorAll(".item-detail");
     var details = document.querySelectorAll(".item-detail");
    var search  = document.getElementById("item-search");
    if (!tabs.length) return;


     if (!tabs.length || !details.length) return;
     function activate(id) {
        details.forEach(function(el){ el.style.display = "none"; });
        tabs.forEach(function(t){ t.setAttribute("data-active", "false"); });
        var detail = document.getElementById("item-" + id);
        if (detail) detail.style.display = "block";
        var tab = document.querySelector(".item-tab[data-item='" + id + "']");
        if (tab) tab.setAttribute("data-active", "true");
    }


     tabs.forEach(function(tab){
     tabs.forEach(function(tab){
         tab.addEventListener("click", function(){
         tab.addEventListener("click", function(){
             var id = tab.getAttribute("data-item");
             activate(tab.getAttribute("data-item"));
        });
    });


            details.forEach(function(el){ el.style.display = "none"; });
    if (search) {
             tabs.forEach(function(t){
        search.addEventListener("input", function(){
                 t.style.borderLeft = "2px solid transparent";
            var q = search.value.trim().toLowerCase();
                 t.style.background = "transparent";
             tabs.forEach(function(tab){
                 var text = (tab.getAttribute("data-name") || tab.textContent || "").toLowerCase();
                 tab.style.display = text.indexOf(q) !== -1 ? "" : "none";
             });
             });
            var detail = document.getElementById("item-" + id);
            if (detail) detail.style.display = "block";
            tab.style.borderLeft = "2px solid #ff7676";
            tab.style.background = "rgba(255,150,170,0.08)";
         });
         });
     });
     }
 
});
});

2026年3月28日 (六) 22:06的最新版本

/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */

/* 引入卡片数据渲染模块 */
mw.loader.load( '/index.php?title=MediaWiki:CardData.js&action=raw&ctype=text/javascript' );

/* 卡面滚动 */
window.addEventListener("scroll", function() {
  var bg = document.querySelector(".card_fullscreen-img");
  if (!bg) return;
  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");
        });
        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(){
    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;
            }
            cards.forEach(function(c){ c.classList.remove("is-active"); });
            card.classList.add("is-active");
            currentIndex = index;
            panel.classList.remove("is-visible");
            void panel.offsetWidth;
            panel.classList.add("is-visible");
            contents.forEach(function(content){
                var storyIndex = parseInt(content.getAttribute("data-story-index"), 10);
                content.classList.toggle("is-active", storyIndex === index);
            });
        });
    });
});

/* 道具页:列表切换 + 搜索过滤 */
mw.hook("wikipage.content").add(function(){
    var tabs    = document.querySelectorAll(".item-tab");
    var details = document.querySelectorAll(".item-detail");
    var search  = document.getElementById("item-search");
    if (!tabs.length) return;

    function activate(id) {
        details.forEach(function(el){ el.style.display = "none"; });
        tabs.forEach(function(t){ t.setAttribute("data-active", "false"); });
        var detail = document.getElementById("item-" + id);
        if (detail) detail.style.display = "block";
        var tab = document.querySelector(".item-tab[data-item='" + id + "']");
        if (tab) tab.setAttribute("data-active", "true");
    }

    tabs.forEach(function(tab){
        tab.addEventListener("click", function(){
            activate(tab.getAttribute("data-item"));
        });
    });

    if (search) {
        search.addEventListener("input", function(){
            var q = search.value.trim().toLowerCase();
            tabs.forEach(function(tab){
                var text = (tab.getAttribute("data-name") || tab.textContent || "").toLowerCase();
                tab.style.display = text.indexOf(q) !== -1 ? "" : "none";
            });
        });
    }
});