Hierarchy Extension
横のスライダーで階層の浅いところだけを見れるようにできるUserScript
最初の
MAX_INDENT の脇にある数字を変更すれば、最大インデント数を変えられます。既知のバグ
ページを移動した時にスライダーが消えることがある
リロードして対処してください
理由
トップページなどではサイドバーがなくなるタイミングがあるので、その時になくなってしまう
ページ更新の度に確認したら良いのですが、そこまで手が回っていません
ページの内容を編集すると、消えるべきなのに消えない行が出てきてしまう
これもリロードして対処してください。(すみません)
理由
行を隠すのにはCSSを使っています。
インデント数を計算してclassに定義しています。その定義を元に隠す/隠さないの挙動を行っている
インデント数を計算するのがページの読み込み時で、編集する度にインデント数を計算していないので、このバグが起こる
解決法
indent-1 みたいなclassを公式で付けてくれるあるいは、毎回計算する(重いかも、そうでもないかも。実験してみる価値はあると思いますが、やっていません)
script.js// 設定
// MAX_INDENT: 最大のインデント数を調整する
const MAX_INDENT=10
// それぞれの行にインデント数のclassをつける
scrapbox.Page.lines.map(l => {
return {id: l.id, indent: l.text.match(/^\s+/)}
}).forEach((l) => {
let indent;
if(l.indent == null) {
indent = 0;
} else {
indent = l.indent[0].length;
}
document.getElementById(`L${l.id}`).classList.add(`indent-${indent}`)
})
// スライダーを作る関数
const createSlider = function() {
const slider = document.createElement('input');
slider.setAttribute('type', 'range');
slider.setAttribute('min', '0');
slider.setAttribute('max', MAX_INDENT);
slider.setAttribute('step', '1');
slider.setAttribute('type', 'range');
slider.setAttribute('value', '0');
let dom = document.createElement('div');
dom.appendChild(slider);
return dom;
};
// スタイルをつくる
const style = document.createElement('style');
style.type = 'text/css';
document.querySelector('head').appendChild(style);
const setCSS = function(level) {
let css = "";
for(var i=0; i < level; i++) {
css += `.indent-${MAX_INDENT-i}`;
if(i < level - 1) {
css += ', ';
}
}
css += `{
display: none;
}`;
style.innerHTML = css;
};
// スライダーを追加する
const root = document.querySelector('.page-menu');
const slider = createSlider();
root.appendChild(slider);
// スライダーのインプットがあったらCSSを更新
slider.addEventListener('input', (e) => {
setCSS(e.target.valueAsNumber);
});