scrapbox-preview-box
scrapbox-text-bubble-2使preview window
Custom Element

done
method emitChange
2021-03-18 01:12:58
done title project
setTimeout 使
100ms
2021-03-18 05:31:12
title project method使
takker
2021-04-13 14:22:28 /project/title
done
2021-03-18 08:01:01 #ditor scroll
08:06:45
done
takker
hover
hover
scroll
DOMscrapbox-text-bubble
takker
2021-03-19 05:59:28
2021-04-16 11:02:47

2021-04-16
09:54:24 ID
2021-04-14
20:42:53 get title get project
20:38:31
20:48:53
2021-04-13
17:17:17 encodeID
14:16:26 easyDOMgeneratorinterface使
2021-03-18
07:38:57
07:19:47 hoverscrollscrapbox-text-bubble

UI
<scrapbox-preview-box>
project
title
theme
<div>...</div>
<div> html
CSS
scrapbox-card-bubblemouseover event
Shadow DOM使
Style
const css = `
:host {
padding: 5px 0px 5px 5px;
font-size: 11px;
line-height: 1.42857;
user-select: text;
position: absolute;
background-color: var(--page-bg, #fefefe);
color: var(--page-text-color, #4a4a4a);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0,0,0,0.175);
/*max-height: 80vh;
overflow-y: auto;*/
z-index: 9000;
}
`;
HTMLJavascript
import {parse} from '../scrapbox-preview-box%2Fparser/script.js';
import {fragment, h} from '../easyDOMgenerator/script.js';
customElements.define('preview-box', class extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: 'open', delegatesFocus: true});
shadow.innerHTML =
`<style>${css}</style>
<div id="box"></div>`;
this._box = shadow.getElementById('box');
this._onmouseenterCallback = undefined;
this._onmouseleaveCallback = undefined;
this._loading = undefined;
}
connectedCallback() {
this.hide();
}
get project() {
return this._project;
}
get title() {
return this._title;
}
set path(value) {
this.setAttribute('path', value);
}
set theme(value) {
this.setAttribute('theme', value);
}
position({top, left}) {
this.style.top = `${top}px`;
this.style.left = `${left}px`;
}
async show() {
await this._loading;
//
// default<style>node2
if (this._box.childElementCount < 2) {
this.hide();
return;
}
this.hidden = false;
if(!this._lineId) return;
/*
// IDscroll
// web pagescroll
const scrollY = window.scrollY;
this.shadowRoot.getElementById(`L${this._lineId}`)?.scrollIntoView?.({block: 'start'});
window.scroll(0, scrollY);
*/
}
hide() {
this.hidden = true;
}
set onmouseenterInLink(callback) {
this.shadowRoot.removeEventListener('mouseenter', this._onmouseenterCallback, {capture: true});
this._onmouseenterCallback = e => {
if (!e.target.matches('.page-link')) return;
callback(e);
};
this.shadowRoot.addEventListener('mouseenter', this._onmouseenterCallback, {capture: true});
}
static get observedAttributes() {
return ['path', 'theme'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) return;
switch(name) {
case 'path':
const [project, title] = decodeURIComponent(newValue)
.match(/^\/([\w\-]+)\/(.+)$/).slice(1);
this._project = project;
this._title = title;
this._createBody();
break;
case 'theme':
//
break;
}
}
_createBody() {
if (!this._project || !this._title) return;
this._lineId = this._title.match(/#([\d\w+]+)$/)?.[1];
const title = this._lineId ? this._title.slice(0, -this._lineId.length - 1) : this._title;
this._loading = (async () => {
const res = await fetch(`/api/pages/${this._project}/${encodeURIComponent(title)}`);
if (!res.ok) {
this._replace(
document.createTextNode('An invalid page source.')
);
return;
}
let {lines} = await res.json();
// title
lines = lines.slice(1);
const lineDOMs = parse(lines, this._project, this._title);
if (!this._lineId) {
this._replace(...lineDOMs);
return;
}
// ID
const id = `L${this._lineId}`;
const index = lineDOMs.findIndex(dom => dom.id === id);
if (index < 0) {
this._replace(...lineDOMs);
return;
}
this._replace(lineDOMs[0], ...lineDOMs.slice(index)); // <style>
// IDhighlight
this.shadowRoot.getElementById(id).classList.add('permalink');
})();
}
_replace(...newElements) {
this._box.textContent = '';
if (newElements.length === 0) return;
this._box.append(...newElements);
}
});
export const previewBox = (...params) => h('preview-box', ...params);

test code
1
window
2021-03-01 00:11:50
import('/api/code/programming-notes/scrapbox-preview-box/test1.js');
import {previewBox as create} from './script.js';
import {scrapboxDOM} from '../scrapbox-dom-accessor/script.js';
(async () => {
const box = previewBox({path: '/programming-notes/scrapbox-preview-boxDOM'});
scrapboxDOM.editor.append(box);
const observer = new MutationObserver(async () =>{
box.position({
top: parseInt(scrapboxDOM.cursor.style.top) + 14,
left: parseInt(scrapboxDOM.cursor.style.left),
});
await box.show();
});
observer.observe(scrapboxDOM.cursor, {attributes: true});
})();
2
hoverwindow
2021-03-01 01:26:06
mousecard
this.hide() previewBox.hide()
01:59:40 if (timer) return
timer
preview-boxpreview-box
this this.shadowRoot event listener
preview-box
2021-03-01 02:03:19 preview box
<preview-box> <preview-box>
Shadow DOM<slot>
event
#editor
div#preview-box-list
#editor
javascript max-width
2021-03-01 03:13:09
import('/api/code/programming-notes/scrapbox-preview-box/test2.js');
import {previewBox as create} from './script.js';
import {scrapboxDOM} from '../scrapbox-dom-accessor/script.js';
let timer = null;
(async () => {
const previewBox = await createPreviewBox(scrapboxDOM.editor);
scrapboxDOM.editor.addEventListener('mouseenter', ({target}) => {
if (!target.matches('.page-link')
|| scrapbox.Layout !== 'page') return;
onmouseenter(previewBox, {target});
}, {capture: true});
scrapboxDOM.editor.addEventListener('mouseleave', ({target}) => {
if (!target.matches('.page-link')
|| scrapbox.Layout !== 'page') return;
fadeoutCallback(previewBox)
}, {capture: true});
scrapboxDOM.editor.addEventListener('click', ({target}) => {
if (target.matches('preview-box')) return;
previewBox.hide();
}, {capture: true});
addEventListener('wheel', () => clearTimeout(timer));
})();
async function createPreviewBox(parentNode) {
const previewBox = await create();
let childBox = undefined;
previewBox.onmouseenterInLink = async (e) => {
if (!childBox) childBox = await createPreviewBox(previewBox);
onmouseenter(childBox, e);
};
previewBox.addEventListener('mouseenter', () => clearTimeout(timer));
previewBox.addEventListener('mouseleave', () => fadeoutCallback(previewBox));
previewBox.addEventListener('click', ({target}) => {
if (target.matches('preview-box')) return;
previewBox.hide();
});
parentNode.append(previewBox);
return previewBox;
}
function onmouseenter(previewBox, {target}) {
const [_, project, title] = target.href.match(/scrapbox\.io\/([^\/]+)\/(.+)$/);
previewBox.path = `/${project}/${title}`;
clearTimeout(timer);
timer = setTimeout(async () => {
const {top, left} = target.getBoundingClientRect();
const parent = previewBox.parentElement.getBoundingClientRect();
previewBox.position({
top: top + 18 - parent.top,
left: left - parent.left,
});
await previewBox.show();
}, 650);
target.addEventListener('mouseleave', () => {
clearTimeout(timer);
fadeoutCallback(previewBox);
}, {once: true});
}
function fadeoutCallback(previewBox) {
if (previewBox.hidden) return;
clearTimeout(timer);
timer = setTimeout(() => {
previewBox.hide();
}, 650);
}


#2021-04-13 14:29:33
#2021-03-18 01:08:23
#2021-03-01 00:43:01
#2021-02-28 21:52:49