import {ScrapBubble} from '/api/code/programming-notes/ScrapBubble/script.js'; new ScrapBubble();

// ==UserScript== // @name ScrapBubble // @namespace https://scrapbox.io // @version 0.1.6 // @description n hop先のテキストを表示する // @author takker // @downloadURL https://scrapbox.io/api/code/programming-notes/ScrapBubble/tampermonkey.js // @match https://scrapbox.io/* // @exclude https://scrapbox.io/settings // @license MIT // @copyright Copyright (c) 2021 takker // ==/UserScript== "use strict"; window.addEventListener('load', async () => { // 自分が所属しているprojectは除く const res = await fetch('/api/projects'); const {projects} = await res.json(); // #editorが読み込まれるまで待機 // cf. https://scrapbox.io/scrapbox-drinkup/puppeteerでscrapboxを自動化してイテレーション資料を宣言的に完成させる_(2019%2F9%2F5) await new Promise(resolve => { let timer = null; timer = setInterval(() => { if (!document.getElementById('editor')) return; clearInterval(timer); resolve(); }, 1000); }); // 念の為1秒くらい待っとく await new Promise((resolve) => setTimeout(() => resolve(), 1000)); if (projects.map(({name}) => name).includes(scrapbox.Project.name)) { console.info(`You belong to "/${scrapbox.Project.name}".`); return; } console.info(`You don't belong to "/${scrapbox.Project.name}".`); const {ScrapBubble} = await import('/api/code/programming-notes/ScrapBubble/script.js'); new ScrapBubble(); window.onload = undefined; });

// scrapboxが有効になるまで待つ const callback = (resolve) => scrapbox ? (scrapbox?.Project ? resolve() : setTimeout(() => callback(resolve), 1000)) : setTimeout(() => callback(resolve), 1000); await new Promise(resolve => callback(resolve));

+if (!target.matches('.page-link')) return; -const link = target.closest('.page-link'); -if (!link) return; +const link = target;

(async () => { const {ScrapBubble} = await import('/api/code/programming-notes/ScrapBubble/script.js'); new ScrapBubble(); })();

import {textBubble} from '../text-bubble-component/script.js'; import {cardContainer} from '../scrapbox-card-container/script.js'; import {scrapboxDOM} from '../scrapbox-dom-accessor/script.js'; export class ScrapBubble { constructor({delay = 650} = {}) { this._list = []; this._timer = null; this._acceptProjects = [scrapbox.Project.name]; this._delay = delay; // rootのevent設定 // リンクにcursorを乗せると吹き出しを開く scrapboxDOM.editor.parentElement.addEventListener('pointerenter', ({target}) => { if (target.matches('.line-title .text')) { this._onenterLink(0, target, {project: scrapbox.Project.name, title: scrapbox.Page.title}, {text: true}, ); return; } if (!target.matches('.page-link')) return; this._onenterLink(0, target, {project: scrapbox.Project.name, title: scrapbox.Page.title}); }, {capture: true}); // リンクから離れたら全てを消すトリガーを発動する scrapboxDOM.editor.parentElement.addEventListener('pointerleave', ({target}) => { if (!target.matches('.page-link, .line-title .text')) return; this._onleave(0); }, {capture: true}); // 対象カード以外を押したら、そのカードを消す addEventListener('click', ({target}) => { if (target.matches('text-bubble, card-container')) { this._hide(parseInt(target.dataset.index) + 1); return; } this._hide(0); }, {capture: true}); addEventListener('wheel', () => this._cancel()); // 次ページに遷移するときには全部消す const observer = new MutationObserver(() => { this._cancel(); this._remove(0); }); observer.observe(document.getElementsByTagName('title')[0], {childList: true}); } _cancel() { clearTimeout(this._timer); } // 特定の位置にtext bubbleとcard bubbleを生成して表示する // リンク先が存在しなければfalseを返す async _bubble(index, {top, left, right, bottom, href, base, disable}) { if (index < 0 || this._list.length < index) return; // 新しく追加するので、最大要素番号 + 1まで許容する const path = new URL(href).pathname; const [project, title] = path.match(/^\/([\w\-]+)\/(.+)/)?.slice(1) ?? ['', '']; if (!this._acceptProjects.includes(project)) return true; this._cancel(); const now = new Date().getTime(); // 吹き出し表示する情報を取得する const res = await fetch(`/api/pages/${project}/${title}`); if (!res.ok) return false; const json = await res.json(); const {name, lines, links, relatedPages} = json; // 空ページなら何もしない if (json.name || (relatedPages?.links1hop?.length < 2 && relatedPages?.links2hop.length === 0 && lines.length < 2) ) return false; const {links1hop} = relatedPages; // 逆リンクのみを取得する const linksLc = [base.title, ...links].map(link => link.toLowerCase().replace(/ /g, '_')); const cards = links1hop.flatMap(({ title: _title, titleLc, descriptions, linked, updated, image }) => !linksLc.includes(titleLc) ? [{project, title: _title, description: descriptions.join('\n'), linked, updated, image}] : [] ); // text bubbleとcar bubbleを作る const textBubble = !disable?.text ? this._createTextBubble({ path, lines: JSON.stringify(lines), index, }) : undefined; const cardBubble = this._createCardBubble({ cards: JSON.stringify(cards), index, }); // 要素を付け替える this._remove(index); this._list[index] = {text: textBubble, card: cardBubble}; if (textBubble) scrapboxDOM.editor.append(textBubble); if (cardBubble) scrapboxDOM.editor.append(cardBubble); // 位置合わせする const root = scrapboxDOM.editor.getBoundingClientRect(); // 親要素が基準になる if (textBubble) { textBubble.style.top = `${bottom - root.top}px`; // leftが左端に寄りすぎの場合は、rightで合わせる if ((left - root.left)/ root.width > 0.5) { textBubble.style.right = `${root.right - right}px`; } else { textBubble.style.left = `${left - root.left}px`; } } if (cardBubble) { cardBubble.style.bottom = `${root.bottom - top}px`; // leftが左端に寄りすぎの場合は、rightで合わせる if ((left - root.left)/ root.width > 0.5) { cardBubble.style.right = `${root.right - right}px`; } else { cardBubble.style.left = `${left - root.left}px`; }

} // bubbleを開く this._timer = setTimeout(() => { this._show(index); // fetchとDOMの組み立てにかかった時間を除いておく }, Math.max(0, this._delay - (new Date().getTime() - now))); return true; } _onenterBubble(index) { this._onleave(index + 1); this._show(index); } async _onenterLink(index, target, base, disable = {}) { const {top, left, right, bottom} = target.getBoundingClientRect(); const isEmptyLink = !(await this._bubble(index, { top, left, right, bottom, href: target.href ?? location.href, base, disable, })); if (target.matches('.page-link') && isEmptyLink) { const [project, title] = new URL(target.href).pathname .match(/^\/([\w\-]+)\/(.+)/)?.slice(1) ?? ['', '']; this._list[index-1]?.text?.changeToEmptyLink?.(project, title); } } _onleave(index) { this._cancel(); this._timer = setTimeout(() => this._hide(index), this._delay); } // indexまで表示する _show(index) { if (index < 0 || this._list.length <= index) return; this._list.slice(0, index + 1).forEach(({text, card}) => {text?.show?.();card?.show?.();}); } // index以下を非表示にする _hide(index) { if (index < 0 || this._list.length <= index) return; this._list.slice(index).forEach(({text, card}) => {text?.hide?.();card?.hide?.()}); } // index以下を全て消す _remove(index) { if (index < 0 || this._list.length <= index) return; const deleteList = this._list.slice(index); this._list = this._list.slice(0, index); deleteList.forEach(({card, text}) => {card?.remove?.();text?.remove?.();}); } // bubbleの作成 _createCardBubble({top, left, cards, index}) { const container = cardContainer({ cards, css: {top, left}, 'data-index': index, hidden: true, }); // eventの設定 container.on('pointerenter', 'related-page-card', ({target}) => this._onenterLink(index + 1, target, {project: target.project, title: target.title})); container.on('pointerleave', 'related-page-card', ({target}) => this._onleave(index + 1)); container.addEventListener('pointerenter', () => this._onenterBubble(index), {capture: true}); container.addEventListener('pointerleave', ({screenX, screenY}) => { // 同階層と子孫要素のbubbleにいたときは無視 const element = document.elementFromPoint(screenX, screenY); if (element && element.matches('text-bubble, card-container') && element.dataset.index !== undefined && parseInt(element.dataset.index) >= index) return; console.log(`[scrapbox-text-bubble-2]Leave No. ${index}`); this._onleave(index); }, {capture: true}); return container; } _createTextBubble({top, left, path, lines, index}) { const bubble = textBubble({ path, lines, css: {top, left}, hidden: true, 'data-index': index, }); // eventの設定 bubble.on('pointerenter', '.page-link', ({target}) => this._onenterLink(index + 1, target, {project: bubble.project, title: bubble.title})); bubble.on('pointerleave', '.page-link', ({target}) => this._onleave(index + 1)); bubble.addEventListener('pointerenter', () => this._onenterBubble(index), {capture: true}); bubble.addEventListener('pointerleave', ({screenX, screenY}) => { // 同階層と子孫要素のbubbleにいたときは無視 const element = document.elementFromPoint(screenX, screenY); if (element && element.matches('text-bubble, card-container') && element.dataset.index !== undefined && parseInt(element.dataset.index) >= index) return; console.log(`[scrapbox-text-bubble-2]Leave No. ${index}`); this._onleave(index); }, {capture: true}); return bubble; } }