パンくずリストを表示するUserScript
https://gyazo.com/4cb11f6e27f5fbcb55115263795878d5
code:script.js
(() => {
const statusDom = document.createElement('div');
statusDom.className = 'bread-list';
statusDom.style = 'position: absolute; top: 40px; left: 10px; overflow: auto; white-space: nowrap; max-width: 98%; background-color: #dcdde0;'; document.querySelector('.navbar').appendChild(statusDom);
const pageChanged = () => {
const breadList = stack.map(m => {
let bread;
if (m === scrapbox.Page.title) {
bread = ${m};
} else {
bread = <a href="/${scrapbox.Project.name}/${encodeURIComponent(m)}" title="${m}">${m}</a>;
}
return <span class="bread">${bread}</span>;
}).reverse().join(' < ');
statusDom.innerHTML = breadList;
stack.push(scrapbox.Page.title);
};
const layoutChanged = () => {
switch(scrapbox.Layout) {
case 'page':
document.querySelector('.navbar').appendChild(statusDom);
break;
case 'list':
document.querySelector('.navbar').removeChild(statusDom);
//stack.splice(0);
break;
default:
break;
}
};
scrapbox.on(page:changed, pageChanged);
scrapbox.on(layout:changed, layoutChanged);
})();
内容
ページ遷移の履歴を列挙しているだけで、階層の遷移をあらわしているわけではないため厳密にはパンくずリストではないかもしれない
一覧ページに移ったときにクリアする
別に残ってなくていい
右から左に並べている
タイトルのすぐ上を必ず直前のページにしたかった
リネームに追従できない問題がある
特に新規ページ(newページ)に名前をつける行為(≒newからのリネーム)パンくず上はnewのまま残る
更新履歴
作成(2022/07/26)
リストを表示する場所を変更、現在のページをpushするタイミングを変更(2022/07/28)
今見ているページと同じページはパンくずになくて良いので、現在のリストを描画したあとに今見ているページをpush
追尾させるため、設置場所をnavbarに変更した(2022/07/30)
同じページタイトルの場合はaタグを付加しないようにした(2022/08/10)