(()=>{ const title = 'ScrapJupyter' const debug = (...args) => { //console.log(title, ...args) } // 独自log, 右側に表示できる div[id] .cody-bodyに突っ込む const __log = (id) => (arg) => { $(`[id=L${id}] .code-body [data-${title}-log]`).remove() const text = JSON.stringify(arg) const result = $(`<code data-${title}-log>`) .css('background', 'lightyellow') .append(` => ${text} `) const $icon = $('<i class="far fa-copy">').appendTo(result) $icon.click(()=>{ navigator.clipboard.writeText(text) }) $(`[id=L${id}] .code-body`).append(result) //console.log(id, arg) } window.__log = __log; const transpileLog = (line) => { return line.text.replace(/^(\s)*log/, `__log("${line.id}")`) } // 現在のPageからcode blockの配列を作る function getCodeBlocks() { const lines = scrapbox.Page.lines ?? []; return lines.reduce( (acc,line) => { if(line?.codeBlock?.lang !== "js") return acc if(line?.codeBlock?.start) { return [...acc,{id: line.id, line, content: ""}]; } if(line?.codeBlock) { const text = transpileLog(line) acc[acc.length-1].content += text + "\n" } return acc; },[]) // {id:string, line: typeof scrapbox["Page"]["lines"][number] start line , content:string}[] } const createButton = () => { const r = $(`<div data-${title}-button>`) .css({ 'position': 'absolute', 'border': "solid 1px", 'border-radius': '50%', 'text-align': 'center', 'font-size': 'large', }) .css({left: -40, top:0, 'z-index': 900}) .width(30).height(30) .on('mousedown',function(){ $(this).css('color','red') }) .on('mouseup',function(){ $(this).css('color','black') }) .text("▶") return r } //ボタンは div[id] .code-startの下に突っ込む const $button = (id) => $(`[id="L${id}"] .code-start [data-${title}-button]`) const $buttons = () => $(`[id] .code-start [data-${title}-button]`) const getOrCreateButton = (id) => { const found = $button(id) return found.length ? found : createButton() } const removeAllButtons = () => { debug('removeAllButtons') $buttons().remove() } function appendButtons() { getCodeBlocks().forEach( block => { const { id } = block const b = getOrCreateButton(id) b.click(()=>{run(block)}) $(`[id=L${id}] .code-start`).append(b) }) } function run(block) { debug('run', block) const b = getOrCreateButton(block.id) try { (1,eval)(block.content) b.css("background", "lightgreen") return true } catch (e) { console.error(title, "eval error", block, e); b.css("background", "red") return false } } function runAll() { debug('runAll start') for(const block of getCodeBlocks()){ const ok = run(block) if(!ok) break; } debug('runAll end') } // disable when project is changed const currentProject = scrapbox.Project.name; function disableWhenProjectChange(){ if (scrapbox.Project.name !== currentProject) _disable() } function _enable() { appendButtons() scrapbox.on('lines:changed', appendButtons) //scrapbox.on('lines:changed', runAll) scrapbox.on('project:changed', disableWhenProjectChange) } function _disable(remove=true) { if(remove) removeAllButtons() scrapbox.off('lines:changed', appendButtons) scrapbox.off('lines:changed', runAll) scrapbox.off('project:changed', disableWhenProjectChange) } const off = 'https://i.gyazo.com/b12404a0c17e0808af3c8366419073b2.png' const on = 'https://i.gyazo.com/fcaa624a3b739bb3cb35d7f60bf5ae39.png' function loadScript() { scrapbox.PageMenu.addMenu({ title, image: off, onClick: runAll }) _enable() } // debug const cache = (window.miyamonz ??= {})[title] ??= {}; cache.prev?.() loadScript() cache.prev = () => _disable(false) })()

window.open('https://example.com')

const n = Date.now() window.open(`${n}`)