カーソル行をUserScriptで取得するテスト
カーソル行の文字列をリアルタイムで取得する
実装
window
windowの位置
cursor行の文字列
document.getElementsByClassName('cursor-line')[0].textContent.trim()
で取得できる
[/ を含む行のみ取得する
/\[\// にマッチした行でのみ補完windowをopen
2020-8-22 17:14 出来たー！
script.jsclass suggestWindow{
constructor() {
this.box = document.createElement('div');
this.box.classList.add('form-group');
this.box.style.position = 'absolute';
this.container = document.createElement('div');
this.container.classList.add('dropdown');
this.box.appendChild(this.container);
this.items = document.createElement('ul');
this.items.classList.add('dropdown-menu');
this.items.style.whiteSpace='nowrap'; // 文字列を折り返さない
this.container.appendChild(this.items);
this.editor = document.getElementById('editor');
this.editor.appendChild(this.box);
}
// 入力補完window を開く
open() {
this.container.classList.add('open');
}
close() {
this.container.classList.remove('open');
}
// 入力候補に表示するアイテムを更新する
updateItems(items) {
const newList = document.createElement('ul');
newList.classList.add('dropdown-menu');
newList.style.whiteSpace='nowrap';
for(const item of items) {
let listItem = document.createElement('li');
listItem.classList.add('dropdown-item');
listItem.innerHTML = item;
newList.appendChild(listItem)
}
this.items.replaceWith(newList);
this.items = newList; // これを書かないと置き換えが完了しない
}
}
const suggestion=new suggestWindow();
suggestion.editor.addEventListener('keyup',() => {
let text= 'No line is focused.'
if(suggestion.editor.getElementsByClassName('cursor-line').length!=0){
let line = suggestion.editor.getElementsByClassName('cursor-line')[0];
// indentがない行は、span[class="text"]を選択する
let noIndentLine = line.getElementsByClassName('indent')[0];
if(!noIndentLine) {
text = line.getElementsByClassName('text')[0].textContent;
} else {
text = noIndentLine.textContent;
}
}
if(!/\[\//.test(text)) {
suggestion.close();
return;
}
suggestion.open();
suggestion.updateItems([text]);
const cursor = document.getElementById('text-input');
// 入力補完windowの位置を更新する
suggestion.box.style.top = `${parseInt(cursor.style.top) + parseInt(cursor.style.height) + 3}px`;
suggestion.box.style.left = `${parseInt(cursor.style.left)}px`;
});