増井俊之
シャア アズナブルのコスプレをしている
script.js// ページ全体の更新された行を画面右端に表示
const container = document.createElement('div')
container.style.position = 'fixed'
container.style.top = '0px'
container.style.height = '100vh'
container.style.right = '0px'
container.style.zIndex = 10000
document.body.appendChild(container)
function render() {
const linesDiv = document.querySelector('.lines') // 行全体の高さをもつdiv
const linesRect = linesDiv.getBoundingClientRect()
const offset = document.documentElement.scrollTop
const H = document.body.scrollHeight
container.innerHTML = '' // remove all children
const unreads = Array.from(document.querySelectorAll('.telomere .unread'))
unreads.forEach(unread => {
const { top, height } = unread.getBoundingClientRect()
const bar = document.createElement('div')
bar.style.position = 'absolute'
bar.style.backgroundColor = 'var(--telomere-unread, #52ba68)'
bar.style.top = (top + offset) / H * 100 + '%'
bar.style.height = height / H * 100 + '%'
// bar.style.minHeight = '4px'
bar.style.width = '10px'
bar.style.right = '0px'
container.appendChild(bar)
})
}
render()
window.scrapbox.on('lines:changed', render)
window.scrapbox.on('layout:changed', render)
// 画像がロードされた時にlineの高さが変わるので再計算する
const watchLoad = () => {
document.querySelectorAll('img').forEach(element => {
element.addEventListener('load', render)
})
}
watchLoad()
window.scrapbox.on('page:changed', watchLoad)
// スクロールでフワッと出す
container.style.transition = 'all 0.4s'
const hide = () => {
container.style.opacity = '0.2' // 目を凝らせば見えるギリギリの透明度
}
let timerId = 0
window.addEventListener('scroll', () => {
container.style.opacity = '1.0'
window.clearTimeout(timerId)
timerId = window.setTimeout(hide, 4 * 1000) // 読んでいるうちに気づいたら消えている
})
window.scrapbox.on('layout:changed', hide) // ページリストに飛んだらリセット