選択範囲に似ているリンクを入力補完するUserScriptに、projectで絞り込む機能を実装する

UI

補完windowの隣に、markを縦に並べたwindowを移す

灰色のアイコンは除外されたproject、色のあるアイコンが検索候補になっているproject

検索に引っかからなかったprojectは表示しない

除外設定はlocal storageに保存し、再読込しても設定を維持するようにする

実装

2つある

並び替え済みの検索結果リストを、projectごとに保持する

表示するリストだけ合成して表示する

複雑になってきたかも……

これだと、別projectの同名リンクを別に保持することになるのか

表示するときに合成するのもめんどくさそう

10:48:52 表示調整

違うそうじゃない

縦一列に並ぶようにしよう

あーでも、三段組でもいいかもしれない

仕切りを外すか。あと幅をより狭める

11:06:57 <button>を使うとfocusが奪われる。imgを直接クリックさせるようにしたほうがよさそう

11:34:07 縦長でも気にならないかも？

UserCSSでなんとかできるようにすればいいか

→✅UserCSSを設定できるようにする (scrapbox-select-suggestion)

絞り込んだことを示すために、押したら灰色にする

/villagepump/白黒記法のfilter: grayscale()を使う

アイコンによっては分かりづらい。背景ごと変えたほうがいいかも

11:21:23 filter: opacity()で50%を追加でかけたらいい感じになった

これでいいや

10:27:19 projectの絞り込みにかかる時間

ミス で検索

use で検索

検索結果が7000件以上あった

やはり絞り込みアルゴリズムが雑なせいで、やや時間をとってしまう

見つかったprojectを作成する処理にはほとんど時間がかからない

もう計測しなくてよさそうだ

10:23:54 コードは完成した。動くか試す

(従来の方法)検索候補にprojectの情報をもたせ、表示のときに絞り込みする

課題

絞り込みをクリックすると、#text-inputからフォーカスが外れてしまう

候補確定自体はできるっぽい

キーボードを使った選択範囲変更などができなくなる

11:44:04 merged

11:43:26 StorageEventを検知して、絞り込み設定を反映させる

#2022-10-27 11:36:15