(async () => { const {mount} = await import('/api/code/programming-notes/ScrapBubble@0.2.0/script.js'); mount({whiteList: ['takker', 'yosider']}); })();

// ==UserScript== // @name ScrapBubble // @namespace https://scrapbox.io // @version 0.2.1 // @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 {mount} = await import('/api/code/programming-notes/ScrapBubble@0.2.0/script.js'); mount({whiteList: ['takker', 'yosider']}); window.onload = undefined; });

import {TextBubble, CSS as textCSS} from '../ScrapBubble@0.2.0%2FTextBubble/script.js'; import {CardBubble, CSS as listCSS} from '../ScrapBubble@0.2.0%2FCardBubble/script.js'; import {RelatedPageCard, CSS as cardCSS} from '../card-bubble-component@0.1.0/script.js'; import {html, Fragment, render} from '../htm@3.0.4%2Fpreact/script.js'; import {useState, useCallback} from '../preact@10.5.13/hooks.js'; import {useCards} from '../ScrapBubble@0.2.0%2Fuse-cards/script.js'; import {useEventListener} from '../use-event-listener/script.js'; import {useProjectTheme} from '../use-project-theme/script.js'; import {useMutationObserver} from '../useMutationObserver/script.js'; import {toLc} from '../scrapbox-titleLc/script.js'; const userscriptName = 'scrap-bubble'; export const App = ({delay = 500, expired = 60, whiteList = []} = {}) => { const {cards, cache, show, hide} = useCards({expired, whiteList}); const [timer, setTimer] = useState(null); const {getTheme, loadTheme} = useProjectTheme(); const showCard = useCallback((depth, link) => { if (!link.matches('a.page-link, .line-title .text')) return; const [_, project, encodedTitleLc] = link.classList.contains('page-link') ? link.href.match(/\/([\w\-]+)\/([^#]*)/) ?? ['','',''] : ['', scrapbox.Project.name, scrapbox.Page.title]; if (project === '') return; const titleLc = toLc(decodeURIComponent(encodedTitleLc)); loadTheme(project); cache(project, titleLc); setTimer(before => { clearTimeout(before); return setTimeout(() => { const {top, right, left, bottom} = link.getBoundingClientRect(); const root = document.getElementById('editor').getBoundingClientRect(); const adjustRight = (left - root.left)/ root.width > 0.5; // 右寄せにするかどうか show(depth, project, titleLc, { top: Math.round(bottom - root.top), bottom: Math.round(root.bottom - top), ...(adjustRight ? {right: Math.round(root.right - right)} : {left: Math.round(left - root.left)} ), }); }, delay); }); }, [cache, show, loadTheme]); const cancel = useCallback(({target}) => { if (!target.matches('a.page-link, .line-title .text')) return; setTimer(before => { clearTimeout(before); return null; }); }, []); const editor = document.getElementById('editor'); useEventListener(editor, 'pointerenter', ({target}) => showCard(0, target), {capture: true}); useEventListener(editor, 'pointerleave', cancel, {capture: true}); useEventListener(document, 'click', ({target}) => { if (target.dataset.userscriptName === userscriptName) return; hide(0); }, {capture: true}); useMutationObserver( [{current: document.getElementsByClassName("page-wrapper")[0]}], ([{target}]) => { if (target.classList.contains("enter")) return; hide(0); }, {attributes: true, attributeFilter: ["class"]} ); return html` <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/katex.min.css" /> <style> * {box-sizing: border-box;} ${textCSS} ${listCSS} ${cardCSS} </style> ${cards.map(({ project, titleLc, lines, position: {top, left, bottom, right}, linked, loading, }, index) => html`<${Fragment} key="/${project}/${titleLc}/"> <${TextBubble} project="${project}" titleLc="${titleLc}" theme="${getTheme(project)}" style="top: ${top}px; ${left ? `left: ${left}` : `right: ${right}`}px;" lines="${lines}" loading="${loading}" onPointerEnterCapture="${({target}) => showCard(index + 1, target)}" onPointerLeaveCapture="${cancel}" onClick="${() => hide(index + 1)}" hasChild="${cards.length > index + 1}" /> <${CardBubble} loading="${loading}" style="bottom: ${bottom}px; ${left ? `left: ${left}` : `right: ${right}`}px;" onClickCapture="${({target}) => target.tagName !== 'A'&& hide(index + 1)}" hasChild="${cards.length > index + 1}"> ${linked.map(page => html` <${RelatedPageCard} key="/${page.project}/${page.title}" project="${page.project}" title="${page.title}" theme="${getTheme(page.project)}" descriptions="${page.descriptions}" thumbnail="${page.image}" onPointerEnterCapture="${({target}) => showCard(index + 1, target)}" onPointerLeaveCapture="${cancel}" /> `)} <//> <//>`)} `; }; export function mount({delay = 500, expired = 60, whiteList = []} = {}) { const app = document.createElement('div'); app.dataset.userscriptName= userscriptName; document.getElementById('editor').append(app); app.attachShadow({mode: 'open'}); render(html`<${App} delay="${delay}" expired="${expired}" whiteList="${whiteList}"/>`, app.shadowRoot); }