テロメアを画面に常に表示するUserScript
https://gyazo.com/b2684fb17d71cac11a3dc1980056de49
code:script.js
(() => {
const showTelomereDoms = new Map();
scrapbox.on('page:changed', showTelomere);
scrapbox.on('lines:changed', showTelomere);
showTelomere();
function clearShowTelomer() {
scrapbox.Page.lines.map(line => {
if (showTelomereDoms.has(line.id)) {
document.querySelector(#L${line.id}).removeChild(showTelomereDoms.get(line.id));
showTelomereDoms.delete(line.id);
}
});
}
function createShowTelomereDom() {
const div = document.createElement('div');
div.classList.add('show-telomere');
div.style = 'position:absolute;top:0;right:0;white-space:pre;font-size:10px;color:grey;';
return div;
}
function showTelomere() {
if (!window.scrapbox.Page.lines) return;
// scrapbox.Page.linesに格納されている更新日を取得
scrapbox.Page.lines.map(line => {
const updated = new Date(line.updated * 1000);
console.debug(updated);
if (!showTelomereDoms.has(line.id)) {
showTelomereDoms.set(line.id, createShowTelomereDom());
}
document.querySelector(#L${line.id}).appendChild(showTelomereDoms.get(line.id));
// 更新日がDate.nowと同じなら日付は出力しない
if (new Date(Date.now()).toDateString() === updated.toDateString()) {
showTelomereDoms.get(line.id).innerText = ;
return;
}
showTelomereDoms.get(line.id).innerText = ${updated.toLocaleString('ja-jp', {month: 'numeric', day: 'numeric'})};
});
}
})();
やりたいこと
常に最終更新日を画面に出しておきたい
テロメア(≒幅)が見たいわけじゃない
やったこと
行更新lines:changedのタイミングでscrapbox.Page.linesのupdatedを取得する
pageとlist切り替わりのタイミングも必要かも？
後片付けしてから移動しないとダメ？
それぞれの行に整形したupdatedを出力する
参考