関連ページを吹き出し表示する

関連ページを吹き出し表示するScrapboxの関連ページを吹き出し表示する

ref. /customize/関連ページを吹き出し表示するJS

style.cssCopied!
#daiiz-rel-cards-bubble {
   background-color: #fff;
   box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
   position: absolute;
   display: none;
   padding: 10px;
   box-sizing: content-box;
   z-index: 10000;
 }
 .daiiz-cards {
   height: 100%;
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
 }
 .daiiz-cards li {
   float: none !important;
 }
 #daiiz-rel-cards-bubble .page-list-item {
   display: inline-block;
   white-space: normal;
 }

script.jsCopied!
var bindEvents=function(b){var c=null;b.on("mouseenter","a.page-link",function(a){a=$(a.target).closest("a.page-link");if(!a.hasClass("empty-page-link")){var d=$getRelCardBubble(b),f=a[0].getBoundingClientRect();d.css({"max-width":$(".editor-wrapper")[0].offsetWidth-a[0].offsetLeft,left:f.left+window.pageXOffset,top:f.top+window.pageYOffset+a[0].offsetHeight+3-24,"background-color":$("body").css("background-color")});a=a[0].innerText.replace(/^#/gi,"").split("#")[0];a.startsWith("/")?d.hide():($cards=
$getRelCards(a),0===$cards.children().length?d.hide():(d.find(".daiiz-cards").remove(),d.append($cards),d.css({height:$("li.relation-label").css("height")}),c=window.setTimeout(function(){d.show()},650)))}});b.on("mouseleave","a.page-link",function(a){window.clearTimeout(c)});b.on("mouseleave","#daiiz-rel-cards-bubble",function(a){a=$getRelCardBubble(b);window.clearTimeout(c);a.hide()});b.on("click",function(){var a=$getRelCardBubble(b);window.clearTimeout(c);a.hide()})},$getRelCardBubble=function(b){var c=
$("#daiiz-rel-cards-bubble");0===c.length&&(c=$('<div id="daiiz-rel-cards-bubble" class="related-page-list"></div>'),b.find(".page").append(c));return c},$getRelCards=function(b){var c=window.encodeURIComponent(window.location.href.match(/scrapbox.io\/([^\/.]*)/)[1]),a=function(a){if(0===a.find("img.lazy-load-img").length){var b=window.encodeURIComponent(a.find("div.title").text());a.find("div.icon").append('<img src="https://scrapbox.io/api/pages/'+c+"/"+b+'/icon" class="lazy-load-img">')}return a};
$(".daiiz-cards").remove();for(var d=$(".relation-label"),f=$('<div class="daiiz-cards grid"></div>'),g=0;g<d.length;g++){var e=$(d[g]);if(e.find(".title")[0].innerText===b){var e=e.next("li.page-list-item"),h=e.clone(!0);f.append(a(h));for(var k=0;1===e.length&&200>k;)e=e.next("li.page-list-item"),h=e.clone(!0),f.append(a(h)),k++}}return f};$(function(){var b=$("#app-container");bindEvents(b)});