A simple script for adding a jump key (N
/ B
) with two guidelines to help reading on PC easier.
The progress is also more trackable with page and percent
document.body.addEventListener('keydown', (event) => { | |
console.log(event); | |
if (event.keyCode === 78) { | |
document.getElementsByTagName('html')[0].scrollBy(0, 300); | |
} else if (event.keyCode === 66) { | |
document.getElementsByTagName('html')[0].scrollBy(0, -300); | |
} | |
}); | |
function addGuidelines() { | |
const top = document.createElement('div'); | |
const bottom = document.createElement('div'); | |
document.body.append(top); | |
document.body.append(bottom); | |
top.className = "jump-guideline jump-guideline-top"; | |
bottom.className = "jump-guideline jump-guideline-bottom"; | |
}; | |
function getPageSizeInfo() { | |
const rootNode = document.documentElement; | |
const documentHeightPx = rootNode.scrollHeight; | |
const pageHeightPx = rootNode.clientHeight - 144; | |
const topPx = rootNode.scrollTop; | |
return [documentHeightPx, 700, topPx]; | |
} | |
function addPageBreaks() { | |
const bookContent = document.getElementById('book-content'); | |
const contentElement = document.getElementById('sbo-rt-content'); | |
if (!bookContent || !contentElement) { | |
return; | |
} | |
let container = bookContent.querySelector('.page-breaker-container'); | |
if (!container) { | |
container = document.createElement('div'); | |
container.className = 'page-breaker-container'; | |
bookContent.append(container); | |
} else { | |
container.innerHTML = ""; | |
} | |
container.style.left = `${contentElement.offsetLeft - 100}px`; | |
const [documentHeightPx, pageHeightPx, scrollTopPx] = getPageSizeInfo(); | |
const breakerPace = pageHeightPx; | |
const breakerCount = documentHeightPx / breakerPace; | |
for (let i = 0; i < breakerCount; i++) { | |
const breakerYPx = i * breakerPace; | |
if (breakerYPx < scrollTopPx - pageHeightPx || breakerYPx > scrollTopPx + pageHeightPx * 2) { | |
continue; | |
} | |
const breaker = document.createElement('div'); | |
breaker.className = 'page-breaker'; | |
breaker.innerText = `${i}`; | |
container.append(breaker); | |
breaker.style.top = `${i * breakerPace}px`; | |
} | |
} | |
function tryAttachingProgress() { | |
const progressInfoNode = document.querySelector('#main section div.orm-ProgressBar-labels'); | |
if (progressInfoNode === undefined) { | |
return | |
} | |
const originalInfo = progressInfoNode.innerText.split('|')[0].trim(); | |
const [documentHeightPx, pageHeightPx, scrollTopPx] = getPageSizeInfo(); | |
const scrollPercent = Math.round(scrollTopPx / documentHeightPx * 100); | |
const currentPage = Math.floor((scrollTopPx + pageHeightPx) / pageHeightPx); | |
const totalPages = Math.round(documentHeightPx / pageHeightPx); | |
progressInfoNode.innerText = `${originalInfo} | ${currentPage} / ${totalPages} pages (${scrollPercent}%)`; | |
} | |
setInterval(tryAttachingProgress, 500); | |
addGuidelines(); | |
new ResizeObserver(addPageBreaks).observe(document.documentElement); | |
document.addEventListener("scroll", (event) => { | |
addPageBreaks(); | |
}); |
@media only screen { | |
#root #book-content #sbo-rt-content p, | |
#root #book-content #sbo-rt-content ul li, | |
#root #book-content #sbo-rt-content ol li, | |
#root #book-content #sbo-rt-content dl dd, | |
#root #book-content #sbo-rt-content dl dt{ | |
font-family: 'Roboto Slab'!important; | |
hyphens: none!important; | |
font-size: 1rem!important; | |
} | |
#root content #sbo-rt-content .figure h6 { | |
font-size: 0.7rem!important; | |
} | |
#book-content #sbo-rt-content h2:before, | |
#book-content #sbo-rt-content h3:before, | |
#book-content #sbo-rt-content h4:before { | |
position: absolute; | |
margin-left: -3.5rem; | |
color: #0002; | |
text-align: right; | |
width: 3rem; | |
} | |
#book-content #sbo-rt-content h2:before { | |
content: "##"; | |
} | |
#book-content #sbo-rt-content h3:before { | |
content: "###"; | |
} | |
#book-content #sbo-rt-content h4:before { | |
content: "####"; | |
} | |
code { | |
color: #0044ba; | |
padding: 2px; | |
} | |
.jump-guideline { | |
position: fixed; | |
left: 0; | |
right: 0; | |
background: #1000; | |
z-index: 100000; | |
} | |
.jump-guideline-top { | |
top: 364px; | |
border-bottom: 0.3px solid #0001; | |
} | |
.jump-guideline-bottom { | |
bottom: 374px; | |
border-top: 0.3px solid #0001; | |
} | |
.page-breaker-container { | |
width: 100px; | |
position: absolute; | |
top: 0; | |
} | |
.page-breaker { | |
position: absolute; | |
left: 0; | |
width: 64px; | |
height: 1px; | |
background: #aaa; | |
font-size: 13px; | |
color: #aaa; | |
} | |
} |