関連ページを吹き出し表示する
https://gyazo.com/e4be2e5d69e22459c13d5237c0033217
/icons/hr.icon
code:style.css
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;
}
display: inline-block;
white-space: normal;
}
code:script.js
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=a0.getBoundingClientRect();d.css({"max-width":$(".editor-wrapper")0.offsetWidth-a0.offsetLeft,left:f.left+window.pageXOffset,top:f.top+window.pageYOffset+a0.offsetHeight+3-24,"background-color":$("body").css("background-color")});a=a0.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=$(dg);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)});