74 lines
2.8 KiB
JavaScript
74 lines
2.8 KiB
JavaScript
import Skeleton from 'react-loading-skeleton'
|
|
import "./contents.css"
|
|
|
|
const Contents = ({data, readerRef, readerHeight, currentPage, setCurrentPage}) => {
|
|
const Chapter = ({title, id, subId}) => {
|
|
if (!readerRef.current) return
|
|
let totalSections = readerRef.current.getElementsByTagName("section")
|
|
if (totalSections[id] === undefined) return
|
|
let anchorOffset = totalSections[id].offsetTop
|
|
let nextAnchorOffset
|
|
if (totalSections[id+1] != undefined) {
|
|
nextAnchorOffset = totalSections[id+1].offsetTop
|
|
}
|
|
let anchorPage = Math.ceil(anchorOffset / readerHeight)
|
|
let nextAnchorPage
|
|
if (nextAnchorOffset) {
|
|
nextAnchorPage = Math.ceil(nextAnchorOffset / readerHeight)
|
|
}
|
|
return <div
|
|
className={subId !== undefined ? "contents__chapter sub" : "contents__chapter"}
|
|
onClick={() => {
|
|
setCurrentPage(anchorPage)
|
|
}}
|
|
style={{
|
|
backgroundColor: currentPage >= anchorPage && currentPage < nextAnchorPage || currentPage == anchorPage ? "var(--md-sys-color-primary-container)" : ""
|
|
}}
|
|
>
|
|
<md-ripple></md-ripple>
|
|
{title}
|
|
</div>
|
|
}
|
|
if (!readerRef.current || readerRef.current.getElementsByTagName("section").length === 0) {
|
|
return <div className="contents">
|
|
<span className="contents__scroll">
|
|
<div className="contents__chapter" style={{background: "var(--md-sys-color-primary-container)"}}>
|
|
<md-ripple></md-ripple>
|
|
<Skeleton width={200}/>
|
|
</div>
|
|
<div className="contents__chapter">
|
|
<md-ripple></md-ripple>
|
|
<Skeleton width={130}/>
|
|
</div>
|
|
<div className="contents__chapter">
|
|
<md-ripple></md-ripple>
|
|
<Skeleton width={180}/>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
}
|
|
let anchors = data.map(chapter => {
|
|
let chapters = []
|
|
if (chapter.title === "") return false
|
|
chapters.push(<Chapter title={chapter.title} id={chapter.id} key={chapter.id}/>)
|
|
if (chapter.subChapters) {
|
|
chapter.subChapters.map(subchapter => {
|
|
if (subchapter.title === "") return false
|
|
chapters.push(<Chapter title={subchapter.title} id={subchapter.id} subId={subchapter.id} key={subchapter.id}/>)
|
|
})
|
|
}
|
|
return chapters
|
|
}).filter(val => val !== false)
|
|
if (anchors.length === 0) {
|
|
return <></>
|
|
}
|
|
return <div className="contents">
|
|
<span className="contents__scroll">
|
|
{
|
|
anchors
|
|
}
|
|
</span>
|
|
</div>
|
|
}
|
|
|
|
export default Contents |