scrapbox-suggest-container-3

変えるところ

アイテムのDOMを決め打ちにした

代わりに少し設定項目を増やした

アイテムを追加するmethodsを減らした

使いそうになかったので

2021-04-08

01:53:09 DOMを生成する補助関数を追加した

2021-03-16

14:30:55 CSSを調節した

説明書きを表示するときに、少し文字を詰めるようにした

2021-03-15

UI

--completion-bg

--completion-item-text-color

--completion-item-hover-text-color

--completion-item-hover-bg

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

--completion-border

枠線のスタイル

--completion-shadow

影のスタイル

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%;

max-height: 50vh;

padding: 5px 0;

margin: 2px 0 0;

list-style: none;

font-size: 14px;

font-weight: normal;

line-height: 28px;

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-x: hidden;

overflow-y: auto;

text-overflow: ellipsis;

}

`;

Custom Elementの本体

code:script.js

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

import {create} from './item.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:ts

public push(Props: {

title: string;

link?: string;

image?: string;

description?: string;

onClick: () => {},

});

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

末尾に挿入

code:script.js

push(...items) {

this._box.append(...items.map(props => create(props)));

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.map(props => create(props)));

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

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

}

アイテムの置換

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

使い回せるDOMは使い回す

code:script.js

replace(...items) {

this._box.textContent = '';

this.push(...items);

}

code:script.js_disabled(js)

replace(...items) {

if (items.length === 0) {

this.clear();

return;

}

const index = this.selecteItemIndex;

if (items.length > this.items.length) {

this._box.append(...items.slice(this.items.length).map(props => create(props)));

} else {

.forEach(item => item.remove());

}

}

アイテムの削除

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

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

code:script.js

pop(...indices) {

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

}

無効なindexは無視する

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

code:script.js

clear() {

this._box.textContent = '';

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?.();

this._box.scroll(0, 0);

} else{

selectedItem.nextSibling?.select?.();

}

// アイテムが隠れていたらスクロールさせる

const {top, bottom} = this.selectedItem.getBoundingClientRect();

const boxRect = this._box.getBoundingClientRect();

if (top < 0) {

this.selectedItem.scrollIntoView({block: 'start'});

} else if (bottom > window.innerHeight) {

this.selectedItem.scrollIntoView({block: 'end'});

} else if (top < boxRect.top) {

this._box.scrollBy(0, top - boxRect.top);

} else if (bottom > boxRect.bottom) {

this._box.scrollBy(0, bottom - boxRect.bottom);

}

if (bottom > window.innerHeight) {

this.selectedItem.scrollIntoView({block: 'bottom'});

} else if (bottom > this._box.getBoundingClientRect().bottom) {

this._box.scrollBy(0, bottom - this._box.getBoundingClientRect().bottom);

}

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?.();

this._box.scroll(0, this._box.scrollHeight);

} else {

selectedItem.previousSibling?.select?.();

}

// アイテムが隠れていたらスクロールさせる

const {top, bottom} = this.selectedItem.getBoundingClientRect();

const boxRect = this._box.getBoundingClientRect();

if (top < 0) {

this.selectedItem.scrollIntoView({block: 'start'});

} else if (bottom > window.innerHeight) {

this.selectedItem.scrollIntoView({block: 'end'});

} else if (top < boxRect.top) {

this._box.scrollBy(0, top - boxRect.top);

} else if (bottom > boxRect.bottom) {

this._box.scrollBy(0, bottom - boxRect.bottom);

}

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

});

簡単に使えるようにする

code:script.js

import {h} from '../easyDOMgenerator/script.js';

export const suggestContainer = (...params) => h('suggest-container', ...params);

containerの要素

<suggest-container-item>

code:item-css.js

export const css = `

:host(.disabled) {

cursor: not-allowed;

}

a {

display: flex;

padding: 0px 20px;

clear: both;

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;

}

width: 100%;

}

min-height: 28px;

}

line-height: 100%;

}

opacity: 0.5;

font-size: 50%;

line-height: 100%;

overflow: hidden;

text-overflow: ellipsis;

}

`;

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>

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

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

<div id="content">

<div id="title"></div>

<div id="description"></div>

</div>

</a>

</li>`;

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

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

this._title = shadow.getElementById('title');

this._description = shadow.getElementById('description');

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

if (e.metaKey && this._body.href !== '') return;

if (!this._onClick) return;

e.preventDefault();

e.stopPropagation();

this.click(e);

});

}

set({title, link, image, description, onClick}) {

title ? this.setAttribute('title', title) : this.removeAttribute('title');

link ? this.setAttribute('link', link) : this.removeAttribute('link');

image ? this.setAttribute('image', image) : this.removeAttribute('image');

description ?

this.setAttribute('description', description) :

this.removeAttribute('description');

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');

const element = document.activeElement;

this.focus();

element.focus();

}

deselect() {

this.classList.remove('selected');

this.blur();

}

click(eventHandler) {

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

}

static get observedAttributes() {

}

attributeChangedCallback(name, oldValue, newValue) {

switch(name) {

case 'title':

this._title.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 'description':

this._description.textContent = newValue ?? '';

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

import('/api/code/programming-notes/scrapbox-suggest-container-3/test1.js');

code:test1.js

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

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

import {suggestContainer} from './script.js';

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

const suggestBox = suggestContainer();

scrapboxDOM.editor.append(suggestBox);

// 選択候補の追加

suggestBox.push(...list);

// 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 = [

{

title: 'Loading...',

},

{

title: 'scrapbox',

onClick: (e) => {

if (e.ctrlKey) {

return;

}

alert('Hello, Scrapbox!');

},

},

{

title: 'scrapbox',

description: 'UserScriptの危険性open project（誰でも参加できるプロジェクト）の場合、自分のページに悪意のあるUserScriptの書き込み・改変をされる恐れがあるこれが出たときに、すぐにLoad new UserScriptを押さずに、まず自分のページに行って内容を確認するまた、このprojectで公開しているUserScript, UserCSSは破壊的変更を行う場合があります',

onClick: (e) => {

if (e.ctrlKey) {

return;

}

alert('Hello, Scrapbox!');

},

},

];