caribaud
/
melpomene
1
0
Fork 0
Code Issues 9 Pull Requests 1 Releases 3 Wiki Activity

segmented progress bar

This commit is contained in:
Christian Aribaud 2023-04-22 14:31:26 +02:00
parent 3f13441890
commit e2d5e24319
4 changed files with 22 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
comic_reader.css
View File

@ -136,6 +136,7 @@
#reader-progress-container { #reader-progress-container {
background-color: dimgray; background-color: dimgray;
position: relative;
} }
#reader-progress-bar{ #reader-progress-bar{
@ -144,3 +145,19 @@
width: 0%; width: 0%;
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
} }
#reader-progress-pages {
display: flex;
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
}
#reader-progress-pages > * {
height: 100%;
box-sizing: border-box;
border-right: 0.3em black solid;
flex: 1;
}

3
comic_reader.js
View File

@ -28,6 +28,7 @@ FOCUS_OVERLAY = document.getElementById("focus-overlay")
HELP_CONTROLS = document.getElementById("help-controls") HELP_CONTROLS = document.getElementById("help-controls")
PROGRESS_BAR_CONTAINER = document.getElementById("reader-progress-container") PROGRESS_BAR_CONTAINER = document.getElementById("reader-progress-container")
PROGRESS_BAR = document.getElementById("reader-progress-bar") PROGRESS_BAR = document.getElementById("reader-progress-bar")
PROGRESS_BAR_PAGES = document.getElementById("reader-progress-pages")
CURRENT_ZOOM = 0 CURRENT_ZOOM = 0
CURRENT_PAGE = 1 CURRENT_PAGE = 1
@ -162,6 +163,8 @@ function initReader(){
let img = READER_PAGES.children[i]; let img = READER_PAGES.children[i];
img.style.width = 100 / getPagesCount() + "%" img.style.width = 100 / getPagesCount() + "%"
visibilityObserver.observe(img) visibilityObserver.observe(img)
PROGRESS_BAR_PAGES.appendChild(document.createElement("div"))
} }
READER_PAGES.style.display = "flex" READER_PAGES.style.display = "flex"

1
comic_reader_test_high_res.html
View File

@ -56,6 +56,7 @@
<div id="reader-progress-container"> <div id="reader-progress-container">
<div id="reader-progress-bar"></div> <div id="reader-progress-bar"></div>
<div id="reader-progress-pages"></div>
</div> </div>
</div> </div>

1
comic_reader_test_low_res.html
View File

@ -56,6 +56,7 @@
<div id="reader-progress-container"> <div id="reader-progress-container">
<div id="reader-progress-bar"></div> <div id="reader-progress-bar"></div>
<div id="reader-progress-pages"></div>
</div> </div>
</div> </div>