1,649
个编辑
更改
跳到导航
跳到搜索
第1行：
第1行： − <noinclude>原作者是萌娘百科的[[moe: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 () => { − // wait dependency − await Promise.all([ − mw.loader.using(["mediawiki.Uri"]), − $.ready, − ]); − − − − − // if user disabled − if (+mw.user.options.get("gadget-disableSideBarPic") === 1) { − return; − } − // get sidebar − /** @type {() => JQuery<HTMLDivElement>} */ − const useSidebar = () => { − switch (mw.config.get("skin")) { − case "moeskin": − return $("html > body > #app > #moe-full-container > #moe-main-container > main"); − case "vector": − default: − return $("html > body > #mw-navigation"); − } − }; − // wait bg container − await new Promise((res) => { − const i = setInterval(() => { − if (useSidebar().length) { − clearInterval(i); − res(); − } − }, 100); − }); − console.info(" Widget:SideBarPic pre-init-check", useSidebar()); − // if already executed − if ($("body").hasClass("sideBarPic-executed")) { − return; − } − $("body").addClass("sideBarPic-executed"); − // get this character, limit to 3 pictures − /** @type {JQuery<HTMLDivElement>} */ − const $sidebarCharacter = $(".sidebar-character:not(.executed)").addClass("executed").slice(0, 3); − if (!$sidebarCharacter.length) { − return; − } − // preload images − 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"); − // mount images − $sidebarCharacter.each((_, ele) => { − const $this = $(ele); − if (!$this.find("img")[0]) { − return; − } − const $sidebar = useSidebar(); − console.info(" Widget:SideBarPic append-check\n", $sidebar); − $this.appendTo($sidebar); − $this.fadeIn().addClass(ele.dataset.align === "top" ? "top" : "bottom").css("user-select", "none"); − $this.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.data("displaylogo") === "yes") { − $("body").addClass("show-logo"); − } − })()); − </script><style> − /* 侧边栏logo或左下角图片添加 */ − .sidebar-character { − position: fixed; − left: -3px; − z-index: -2; − } − .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; − } − .sideBarPic:not(.DeceasedPerson) #footer { − background-color: rgba(255,255,255,.7); − } − .sideBarPic:not(.DeceasedPerson) #footer #footer-moegirl .copyright { − color: #2f2f2f; − } − body.skin-moeskin #moe-global-footer { − z-index: 1; − } − body.skin-moeskin #moe-main-container { − --theme-card-background-color: rgba(255, 255, 255, 0.85); − } − </style> − <!--{/if}--></includeonly>
清空全部内容