Widget:SideBarPic: Difference between revisions

@@ Line 1: / Line 1: @@
 <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(function() {
+window.RLQ.push(() => {
-    $(function() {
+    async function loop() {
-         var sidebarCharacter = $(".sidebar-character").slice(0, 3);
+        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");
-         sidebarCharacter.addClass('active').each(function() {
+         sidebarCharacter.each((_, ele) => {
-             var self = $(this);
+             const self = $(ele);
-             self.appendTo("#mw-navigation").fadeIn().addClass(this.dataset.align === 'top' ? 'top' : 'bottom').css('user-select', 'none');
+            if (!self.find("img")[0]) {
-             self.find('img').removeAttr('width').removeAttr('height');
+                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', function() {
+         $(window).on("resize", () => {
-             sidebarCharacter.each(function() {
+             sidebarCharacter.each((_, ele) => {
-                 var self = $(this);
+                 const self = $(ele);
-                 self.find('img').width(self.width());
+                 self.find("img").width(self.width());
              });
          }).resize();
-     });
+        if (sidebarCharacter.is('[data-displaylogo="yes"]')) {
-});</script><style>
+            $("body").addClass("show-logo");
+        }
+     }
+    $(() => loop());
+});
+</script><style>
 /* 侧边栏logo或左下角图片添加 */
 .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);
      /*padding-top: 0;
@@ Line 49: / Line 104: @@
      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;
      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);
      left: 0;
@@ Line 59: / Line 114: @@
      top: -212px*/
 }
-.sideBarPic .sidebar-character.active {
+.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>

Revision as of 07:33, 15 August 2021