scrapbox-suggest-container-2

変えるところ

CSS周りの挙動をしりたい

任意のcomponentを選択候補に指定できるようにする

役割分担を変える

アイテム内部のDOM構造

onclick

2つ設計案がある

欠点

Shadow DOMがたくさんネストする

どのみちユーザー定義のDOMでCustom Elementを作ることになる

ユーザー定義のDOMで選択/選択解除とクリック処理を作る必要がある

実際に使うことを想定しているCustom Elementはたったの2つだし、気にしなくてもいいかもしれない

2.を使うか。

UI

--completion-bg

--completion-item-text-color

--completion-item-hover-text-color

--completion-item-hover-bg

focusがあたったときのアイテムの背景色

--completion-border

枠線のスタイル

--completion-shadow

影のスタイル

html構造

code:html

<suggest-container>

<ul>

<li>

${foreignElement}

</li>

</ul>

</suggest-container>

defaultはこれ

code:html

<a tabindex="0">

<img></img>

</a>

Interface

code:container-css.js

export const css = `

ul {

position: absolute;

top: 100%;

left: 0;

z-index: 1000;

flex-direction: column;

min-width: 160px;

max-width: 80%;

padding: 5px 0;

margin: 2px 0 0;

list-style: none;

font-size: 14px;

text-align: left;

border: var(--completion-border, 1px solid rgba(0,0,0,0.15));

border-radius: 4px;

box-shadow: var(--completion-shadow, 0 6px 12px rgba(0,0,0,0.175));

background-clip: padding-box;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

`;

Custom Elementの本体

code:script.js

import {css} from './container-css.js';

customElements.define('suggest-container', class extends HTMLElement {

constructor() {

super();

const shadow = this.attachShadow({mode: 'open'});

shadow.innerHTML =

`<style>${css}</style>

<ul id="box"></ul>`;

}

connectedCallback() {

this.hide();

}

methods/properties

アイテムの追加

code:js

suggestContainer.push({

body: () => {},

onClick: () => {},

});

読み込み中のメッセージなどを表示するときに使う

アイテムの追加方法をいくつか用意しておく

末尾に挿入

code:script.js

push(...items) {

this._box.append(...items);

if (this.mode === 'auto') this.show();

}

code:script.js

insert(index, ...items) {

if (index > this.items.length - 1)

//const itemNodes = _createItems(...items);

const itemNodes = items;

if (index === this.items.length - 1) {

this._box.append(...itemNodes);

} else {

const fragment = new DocumentFragment();

fragment.append(...itemNodes);

}

if (this.mode === 'auto') this.show();

}

code:script.js

pushFirst(...items) {

if (this.items.length === 0) {

this.push(...items);

return;

}

const index = this.selectedItemIndex;

const fragment = new DocumentFragment();

fragment.append(...items);

this._box.insertBefore(fragment, this.firstItem);

if (this.mode === 'auto') this.show();

}

アイテムの置換

選択されていたらそれも維持する

code:script.js

replace(...items) {

if (item.length === 0) throw Error('No item to be replaced found.');

const index = this.selecteItemIndex;

this.clear();

}

アイテムの削除

空っぽになったらwindowを閉じる

任意のアイテムを削除する

code:script.js

pop(...indices) {

if (this.items.length === 0) this.hide();

}

無効なindexは無視する

全てのアイテムを削除する

code:script.js

clear() {

this.hide();

}

アイテムを取得する

code:script.js

get items() {

return this._box.childNodes;

}

get selectableItems() {

}

get firstItem() {

return this._box.firstElementChild;

}

get lastItem() {

return this._box.lastElementChild;

}

get firstSelectableItem() {

}

get lastSelectableItem() {

}

フォーカスのあたっているアイテムを取得する

もっとわかり易い名前にした

code:script.js

get selectedItem() {

}

code:script.js

get selectedItemIndex() {

}

get lastSelectedItem()

最後にフォーカスのあたっていたアイテムを取得する

できなかったら、classでwrapするなど他の方法を考えよう

フォーカスの移動

code:script.js

selectNext({wrap}) {

if (!this.firstSelectableItem) return;

const selectedItem = this.selectedItem;

this.selectedItem?.deselect?.();

if (!selectedItem || (wrap && this.lastItem === selectedItem)) {

this.firstSelectableItem?.select?.();

} else{

selectedItem.nextSibling?.select?.();

}

if (this.selectedItem.disabled) this.selectNext({wrap});

}

code:script.js

selectPrevious({wrap}) {

if (!this.firstSelectableItem) return;

const selectedItem = this.selectedItem;

this.selectedItem?.deselect?.();

if (!selectedItem) {

this.firstSelectableItem?.select?.();

} else if (wrap && this.firstItem === selectedItem) {

this.lastSelectableItem?.select?.();

} else {

selectedItem.previousSibling?.select?.();

}

if (this.selectedItem.disabled) this.selectPrevious({wrap});

}

defaultでは、先頭/末尾を選択しているときは何もしない

返り値として、移動先のアイテムを返す

windowの表示/非表示

アイテムが一つもないときは、自動的に非表示になる

表示位置を指定する

どういう書式で指定するかは考え中

code:script.js

position({top, left}) {

this.show();

}

code:script.js

show() {

if (this.items.length === 0) {

this.hide();

return;

}

this.hidden = false;

}

hide() {

this.hidden = true;

}

内部実装

途中に新しいアイテムを挿入しても、focusが外れたりしないようにする

code:script.js

get _box() {

return this.shadowRoot.getElementById('box');

}

code:script.js

});

containerの要素

Custom Elementにはしない

Custom Elementにしたほうが便利なのでCutom Elementにした

Custome Elementあり

Custome Elementなし

DOMとDOMを操作するclass objectとで別々にリストを作って管理する必要がある

Shadow DOMを使った

やめた

Shadow DOMがネストしまくって気持ち悪い

https://gyazo.com/d4560b513b9266e47fc34af82328829d

無理だ。

HTMLLiElementに格納できないcallback関数を保持する必要がある

Custome Elementを使うしかないか。

ユーザが各自で定義する

defaultのCustom Elementは予め提供しておく

defaultのitem

suggest-container-default-item

code:item-css.js

export const css = `

:host(.disabled) {

cursor: not-allowed;

}

a {

display: flex;

padding: 0px 20px;

clear: both;

font-weight: normal;

line-height: 28px;

align-items: center;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

text-decoration: none;

}

a:hover {

}

:host(.selected) a{

outline: 0;

box-shadow: 0 0px 0px 3px rgba(102,175,233,0.6);

transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;

}

img {

height: 1.3em;

margin-right: 3px;

display: inline-block;

}

`;

code:item.js

import {css} from './item-css.js';

customElements.define('suggest-container-item', class extends HTMLElement {

constructor() {

super();

const shadow = this.attachShadow({mode: 'open'});

shadow.innerHTML =

`<style>${css}</style>

<li id="frame">

<a id="body" tabindex="-1">

<img id="icon" hidden></img>

<div id="text"></div>

</a>

</li>`;

this._frame = shadow.getElementById('frame');

this._body = shadow.getElementById('body');

this._icon = shadow.getElementById('icon');

this._text = shadow.getElementById('text');

this._body.addEventListener('click', e =>{

if (!this._onClick) return;

e.preventDefault();

e.stopPropagation();

this.click(e);

});

}

set({text, image, link, onClick}) {

if (text) this.setAttribute('text', text);

if (image) this.setAttribute('image', image);

if (link) this.setAttribute('link', link);

if (!onClick) {

this.classList.add('disabled');

return;

}

if (typeof onClick !== 'function') throw Error('onClick is not a function.');

this._onClick = onClick;

}

get disabled() {

return this.classList.contains('disabled');

}

get isSelected() {

return !this.disabled && this.classList.contains('selected');

}

select() {

if (!this.disabled) this.classList.add('selected');

}

deselect() {

this.classList.remove('selected');

}

click(eventHandler) {

this._onClick?.(eventHandler ?? {});

}

static get observedAttributes() {

}

attributeChangedCallback(name, oldValue, newValue) {

switch(name) {

case 'text':

this._text.textContent = newValue;

return;

case 'image':

const img = this._icon;

if (newValue) {

img.src = newValue;

img.hidden = false;

} else {

img.src = '';

img.hidden = true;

}

return;

case 'link':

this._body.href = newValue ?? '';

return;

}

}

});

作成用関数

code:item.js

export const create = (props) => {

const item = document.createElement('suggest-container-item');

item.set(props);

return item;

}

test code

code:js

(async () => import('/api/code/programming-notes/scrapbox-suggest-container-2/test1.js'))();

code:test1.js

import {list} from './test-sample-list.js';

import {scrapboxDOM} from '../scrapbox-dom-accessor/script.js';

import './script.js';

import {create} from './item.js';

import {js2vim} from '../JSのkeyをVim_key_codeに変換するscript/script.js';

const suggestBox = document.createElement('suggest-container');

scrapboxDOM.editor.append(suggestBox);

// 選択候補の追加

suggestBox.push(...list.map(props => create(props)));

// keyboard操作

scrapboxDOM.editor.addEventListener('keydown', e => {

if (suggestBox.hidden) return;

if (!e.isTrusted) return; // programで生成したkeyboard eventは無視する

switch(js2vim(e)) {

case '<C-i>':

e.preventDefault();

e.stopPropagation();

(suggestBox.selectedItem ?? suggestBox.firstItem).click({ctrlKey: true});

return;

case '<Tab>':

e.preventDefault();

e.stopPropagation();

suggestBox.selectNext({wrap: true});

return;

case '<S-Tab>':

e.preventDefault();

e.stopPropagation();

suggestBox.selectPrevious({wrap: true});

return;

case '<CR>':

e.preventDefault();

e.stopPropagation();

(suggestBox.selectedItem ?? suggestBox.firstItem).click();

default:

return;

}

});

// windowの表示

const observer = new MutationObserver(() =>{

suggestBox.position({

top: parseInt(scrapboxDOM.cursor.style.top) + 14,

left: parseInt(scrapboxDOM.cursor.style.left),

});

});

observer.observe(scrapboxDOM.cursor, {attributes: true});

サンプルデータ

code:test-sample-list.js

export const list = [

{

text: 'Loading...',

},

{

text: 'scrapbox',

onClick: (e) => {

if (e.ctrlKey) {

return;

}

alert('Hello, Scrapbox!');

},

},

];