テロメアを画面に常に表示するUserScript
https://gyazo.com/b2684fb17d71cac11a3dc1980056de49
なにがやりたいのか
1. 常に最終更新日の「値」を見たい
画面に出しておきたい
テロメア(≒幅や色)が見たいわけじゃない
2. そして日付を差し込みたい
例えば「情報が古くなったので20XX年当時と注釈を入れておきたい。これはいつ書いたものだっけ？」という感じでしばしばテロメアを見る
行をいじると更新されてしまうので最新のテロメアは参考情報程度だが…
そのテロメアを見る作業が面倒くさいので横に出すようにした
3. 最終更新日を見ながら考えたい
例えば「継ぎ足し、継ぎ足しで書いていく週報のようなもの」の場合、先週どこを変えたのか見たい
やったこと
行更新lines:changedのタイミングでscrapbox.Page.linesのupdatedを取得する
pageとlist切り替わりのタイミングも必要かも？
後片付けしてから移動しないとダメ？
それぞれの行に整形したupdatedを出力する
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:-40px;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', {year: 'numeric', month: 'numeric', day: 'numeric'})};
});
}
})();
参考