Difference between revisions of "Widget:SideBarPic"
(Created page with "<noinclude>用来给{{tl|替换侧边栏底图}}更好的体验效果的，作者User:AnnAngela</noinclude><includeonly><!--{if !isset($wgSideBarPic) || !$wgSideBarPic}-->...") |
|||
| Line 1: | Line 1: | ||
<noinclude>用来给{{tl|替换侧边栏底图}}更好的体验效果的，作者[[User:AnnAngela]]</noinclude><includeonly><!--{if !isset($wgSideBarPic) || !$wgSideBarPic}--><!--{assign var="wgSideBarPic" value=true scope="global"}--><script> | <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 = window.RLQ || []; | ||
| − | window.RLQ.push(function() { | + | window.RLQ.push(() => { |
| − | + | async function loop() { | |
| − | + | await new Promise((res) => { | |
| − | if (!sidebarCharacter.length) return; | + | 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); | ||
| + | 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"); | $("body").addClass("sideBarPic"); | ||
| − | sidebarCharacter | + | sidebarCharacter.each((_, ele) => { |
| − | + | const self = $(ele); | |
| − | self.appendTo("#mw-navigation").fadeIn().addClass( | + | if (!self.find("img")[0]) { |
| − | self.find( | + | 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( | + | $(window).on("resize", () => { |
| − | sidebarCharacter.each( | + | sidebarCharacter.each((_, ele) => { |
| − | + | const self = $(ele); | |
| − | self.find( | + | self.find("img").width(self.width()); |
}); | }); | ||
}).resize(); | }).resize(); | ||
| − | }); | + | if (sidebarCharacter.is('[data-displaylogo="yes"]')) { |
| − | });</script><style> | + | $("body").addClass("show-logo"); |
| + | } | ||
| + | } | ||
| + | $(() => loop()); | ||
| + | }); | ||
| + | </script><style> | ||
/* 侧边栏logo或左下角图片添加 */ | /* 侧边栏logo或左下角图片添加 */ | ||
.sidebar-character { | .sidebar-character { | ||
| Line 40: | Line 95: | ||
} | } | ||
} | } | ||
| − | .sideBarPic.skin-vector div#mw-panel div.portal { | + | .sideBarPic.skin-vector:not(.DeceasedPerson) div#mw-panel div.portal { |
background-color: rgba(246, 246, 246, 0.9); | background-color: rgba(246, 246, 246, 0.9); | ||
/*padding-top: 0; | /*padding-top: 0; | ||
| Line 49: | Line 104: | ||
padding-right: .95em; | padding-right: .95em; | ||
} | } | ||
| − | .sideBarPic.skin-vector div#mw-panel #p-logo + div.portal{ | + | .sideBarPic.skin-vector:not(.DeceasedPerson) div#mw-panel #p-logo + div.portal{ |
padding-top: 1.1em; | padding-top: 1.1em; | ||
margin-top: 0; | margin-top: 0; | ||
} | } | ||
| − | .sideBarPic.skin-vector #mw-panel div#p-logo { | + | .sideBarPic.skin-vector:not(.DeceasedPerson) #mw-panel div#p-logo { |
/*background: rgba(246, 246, 246, 0.73); | /*background: rgba(246, 246, 246, 0.73); | ||
left: 0; | left: 0; | ||
| Line 59: | Line 114: | ||
top: -212px*/ | top: -212px*/ | ||
} | } | ||
| − | .sideBarPic .sidebar-character.active { | + | .sideBarPic:not(.DeceasedPerson) .sidebar-character.active { |
display: block; | display: block; | ||
} | } | ||
.sidebar-character { | .sidebar-character { | ||
display: none; | 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> | </style> | ||
<!--{/if}--></includeonly> | <!--{/if}--></includeonly> | ||
Revision as of 07:33, 15 August 2021
用来给{{替换侧边栏底图}}更好的体验效果的，作者User:AnnAngela
