“Widget:SideBarPic”的版本间的差异

这里有，偶像们的一切！
跳到导航 跳到搜索
（建立内容为“<noinclude>原作者是萌娘百科的moe:User:AnnAngela。</noinclude><includeonly><!--{if !isset($wgSideBarPic) || !$wgSideBarPic}--><!--{assign var="wgSide…”的新页面）
 
（清空全部内容）
标签：清空
 
第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>
 

2024年12月1日 (日) 11:01的最新版本

取自“https://www.ksepeses.com/index.php?title=Widget:SideBarPic&oldid=356”