查看“Widget:SideBarPic”的源代码

<noinclude>用来给{{tl|替换侧边栏底图}}更好的体验效果的，作者[[User:AnnAngela]]</noinclude><includeonly><!--{if !isset($wgSideBarPic) || !$wgSideBarPic}--><!--{assign var="wgSideBarPic" value=true scope="global"}--><script>
"use strict";
window.RLQ = window.RLQ || [];
window.RLQ.push(() => $(() => (async () => {
    if (+mw.user.options.get("gadget-disableSideBarPic") === 1) {
        return;
    }
    await new Promise((res) => {
        const i = setInterval(() => {
            if (document.querySelector("html > body > #content ~ #mw-navigation")) {
                clearInterval(i);
                res();
            }
        }, 100);
    });
    console.info(" Widget:SideBarPic pre-init-check", document.querySelector("html > body > #content ~ #mw-navigation"));
    if ($("body").is(".sideBarPic-executed")) {
        return;
    }
    $("body").addClass("sideBarPic-executed");
    const sidebarCharacter = $(".sidebar-character:not(.executed)").addClass("executed").slice(0, 3);
    if (!sidebarCharacter.length) {
        return;
    }
    await mw.loader.using("mediawiki.Uri");
    await Promise.all(sidebarCharacter.find("img").toArray().map((img) => new Promise((res) => {
        let retryCount = 0;
        try {
            const lazyload = new Image();
            const url = new mw.Uri(img.dataset.src || img.src);
            if (url.host.endsWith(".moegirl.org")) {
                url.host += ".cn";
            }
            lazyload.addEventListener("load", () => {
                img.src = url;
                res();
            });
            lazyload.addEventListener("error", () => {
                if (retryCount++ < 3) {
                    const url = new mw.Uri(lazyload.src);
                    url.query._ = Math.random();
                    lazyload.src = url;
                } else {
                    console.info(" Widget:SideBarPic img-load-failed\n", img.dataset.src);
                    img.remove();
                    res();
                }
            });
            lazyload.src = url;
        } catch (e) {
            console.info(" Widget:SideBarPic img-load-failed\n", e);
            img.remove();
            res();
            return;
        }
    })));
    $("body").addClass("sideBarPic");
    sidebarCharacter.each((_, ele) => {
        const self = $(ele);
        if (!self.find("img")[0]) {
            return;
        }
        console.info(" Widget:SideBarPic append-check\n", document.querySelector("html > body > #content ~ #mw-navigation"));
        self.appendTo("html > body > #content ~ #mw-navigation").fadeIn().addClass(ele.dataset.align === "top" ? "top" : "bottom").css("user-select", "none");
        self.addClass("active").find("img").removeAttr("width").removeAttr("height");
    });
    $(window).on("resize", () => {
        sidebarCharacter.each((_, ele) => {
            const self = $(ele);
            self.find("img").width(self.width());
        });
    }).trigger("resize");
    if (sidebarCharacter.is('[data-displaylogo="yes"]')) {
        $("body").addClass("show-logo");
    }
})()));
</script><style>
/* 侧边栏logo或左下角图片添加 */
.sidebar-character {
    position: fixed;
    left: -3px;
    z-index: -9999;
}
.sidebar-character.top {
    top: 0;
}
.sidebar-character.bottom {
    bottom: 0;
}
#wglogo {
    display: none;
}
@media screen and (max-width: 600px) {
    /* 低像素设备隐藏 */
    .sidebar-character {
        display: none!important;
    }
}
.sideBarPic.skin-vector:not(.DeceasedPerson) div#mw-panel div.portal {
    background-color: rgba(246, 246, 246, 0.9);
    /*padding-top: 0;
    top: 212px*/
    margin-left: -0.75em;
    margin-right: 0;
    padding-left: 1.5em;
    padding-right: .95em;
}
.sideBarPic.skin-vector:not(.DeceasedPerson) div#mw-panel #p-logo + div.portal{
    padding-top: 1.1em;
    margin-top: 0;
}
.sideBarPic.skin-vector:not(.DeceasedPerson) #mw-panel div#p-logo {
    /*background: rgba(246, 246, 246, 0.73);
    left: 0;
    padding: 0 .5em;
    top: -212px*/
}
.sideBarPic:not(.DeceasedPerson) .sidebar-character.active {
    display: block;
}
.sidebar-character {
    display: none;
}
body.show-logo:not(.DeceasedPerson) #mw-panel #p-logo {
    height: 160px;
}
body.show-logo:not(.DeceasedPerson) #mw-panel #p-logo .mw-wiki-logo {
    background-image: url(https://img.moegirl.org.cn/logo/zhMoegirl15.2.png);
    height: 160px;
}
.sideBarPic:not(.DeceasedPerson) #footer {
    background-color: rgba(255,255,255,.7);
}
.sideBarPic:not(.DeceasedPerson) #footer #footer-moegirl .copyright {
    color: #2f2f2f;
}
</style>
<!--{/if}--></includeonly>