status barに文字カウントを表示する（event版）
https://gyazo.com/bf2127949ba5b03b0edd46bd8428eb26
code:script.js
(() => {
const statusDom = document.createElement('div')
document.querySelector('.status-bar').appendChild(statusDom)
updateStatusDom()
updateCount()
scrapbox.on('layout:changed', updateStatusDom)
scrapbox.on('lines:changed', updateCount)
function updateStatusDom () {
if (scrapbox.Layout !== 'page') {
document.querySelector('.status-bar').removeChild(statusDom)
} else {
document.querySelector('.status-bar').appendChild(statusDom)
}
}
function updateCount () {
if (!window.scrapbox.Page.lines) return
const chars = scrapbox.Page.lines.map(line => line.text.length).reduce((a, b) => a + b)
const words = scrapbox.Page.lines.map(line => line.text.split(/\s/).length).reduce((a, b) => a + b)
const lines = scrapbox.Page.lines.length
statusDom.innerText = ${lines}lines ${words}words ${chars}char
}
})()
これまではページのデータが更新されたことを検知するまともな手段がなかった
setIntervalでwindow.scrapbox.Page.linesをひたすら監視
どちらかしかなかった
ポイント
page list画面で文字カウントを表示しない
画面レイアウトの変更イベントで表示・非表示を切り替えている