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

make viewing mode a toggle

This commit is contained in:
Christian Aribaud 2023-04-17 20:59:32 +02:00
parent 38cf84f532
commit 1299615359
3 changed files with 42 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
comic_reader.css
View File

@ -104,7 +104,7 @@
} }
#help-menu > #help-controls { #help-menu > #help-controls {
padding: 0 1em 1em 0; padding: 0 1em 1em 1em;
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
@ -123,7 +123,7 @@
#help-menu > #help-controls > div { #help-menu > #help-controls > div {
margin-top: 1em; margin-top: 1em;
text-align: end; text-align: center;
} }
.key { .key {

68
comic_reader.js
View File

@ -6,6 +6,7 @@ MOVE_NEXT = "ArrowRight"
MOVE_BACK = "ArrowLeft" MOVE_BACK = "ArrowLeft"
TOGGLE_FULLSCREEN = "F" TOGGLE_FULLSCREEN = "F"
TOGGLE_PROGRESSBAR = "P" TOGGLE_PROGRESSBAR = "P"
TOGGLE_VIEW_MODE = "V"
//======================== //========================
@ -245,66 +246,41 @@ function updateFocusByHeight(height){
FOCUS_OVERLAY.style.gridTemplateColumns = "0px auto 0px"; FOCUS_OVERLAY.style.gridTemplateColumns = "0px auto 0px";
} }
function moveReader(to_next, move_page) { function toggleViewMode() {
if (IS_PAGE_MODE){
if (CURRENT_ZOOM != null){
moveReaderDisplayToZoom(CURRENT_ZOOM)
} else {
moveReaderDisplayToZoom(getFirstZoomOfPage(CURRENT_PAGE))
}
IS_PAGE_MODE = false
} else {
moveReaderDisplayToPage(CURRENT_PAGE)
IS_PAGE_MODE = true
}
}
if (move_page){ function moveReader(to_next) {
if (IS_PAGE_MODE){ if (IS_PAGE_MODE){
if (to_next && CURRENT_PAGE < getPagesCount()) { if (to_next && CURRENT_PAGE < getPagesCount()) {
moveReaderDisplayToPage(CURRENT_PAGE + 1) moveReaderDisplayToPage(CURRENT_PAGE + 1)
IS_PAGE_MODE = true CURRENT_ZOOM = null
} }
else if (!to_next && CURRENT_PAGE > 1) { else if (!to_next && CURRENT_PAGE > 1) {
moveReaderDisplayToPage(CURRENT_PAGE - 1) moveReaderDisplayToPage(CURRENT_PAGE - 1)
IS_PAGE_MODE = true CURRENT_ZOOM = null
}
}
else {
if (to_next && CURRENT_PAGE < getPagesCount()) {
moveReaderDisplayToPage(CURRENT_PAGE + 1)
IS_PAGE_MODE = true
}
else {
moveReaderDisplayToPage(CURRENT_PAGE)
IS_PAGE_MODE = true
}
}
} else {
if (IS_PAGE_MODE){
if (to_next) {
moveReaderDisplayToZoom(getFirstZoomOfPage(CURRENT_PAGE))
IS_PAGE_MODE = false
}
else {
if (CURRENT_PAGE == 1) {
moveReaderDisplayToZoom(0)
IS_PAGE_MODE = false
} else {
moveReaderDisplayToZoom(getLastZoomOfPage(CURRENT_PAGE - 1))
IS_PAGE_MODE = false
}
} }
} else { } else {
if (to_next && CURRENT_ZOOM < zooms.length - 1) { if (to_next && CURRENT_ZOOM < zooms.length - 1) {
moveReaderDisplayToZoom(CURRENT_ZOOM + 1) moveReaderDisplayToZoom(CURRENT_ZOOM + 1)
IS_PAGE_MODE = false
} }
else if (!to_next && CURRENT_ZOOM > 0) { else if (!to_next && CURRENT_ZOOM > 0) {
moveReaderDisplayToZoom(CURRENT_ZOOM - 1) moveReaderDisplayToZoom(CURRENT_ZOOM - 1)
IS_PAGE_MODE = false
}
} }
} }
@ -317,14 +293,14 @@ function moveReader(to_next, move_page) {
// CALLBACKS // CALLBACKS
// ============= // =============
function handleKeyPress(key, has_shift){ function handleKeyPress(key){
if (key == MOVE_NEXT) { if (key == MOVE_NEXT) {
moveReader(true, has_shift) moveReader(true)
} }
else if (key == MOVE_BACK) { else if (key == MOVE_BACK) {
moveReader(false, has_shift) moveReader(false)
} }
else if (key.toUpperCase() == TOGGLE_FULLSCREEN){ else if (key.toUpperCase() == TOGGLE_FULLSCREEN){
@ -345,6 +321,10 @@ function handleKeyPress(key, has_shift){
refreshReaderDisplay(); refreshReaderDisplay();
} }
else if (key.toUpperCase() == TOGGLE_VIEW_MODE) {
toggleViewMode()
}
} }
function handleMouseWhell(deltaY){ function handleMouseWhell(deltaY){

7
comic_reader_test_high_res.html
View File

@ -43,11 +43,12 @@
<div id="help-menu"> <div id="help-menu">
<div id="help-controls" style="opacity:1; transform: translate(0,0);"> <div id="help-controls" style="opacity:1; transform: translate(0,0);">
<div><div class="key">&larr;</div>/ scroll up / clic : previous</div>
<div><div class="key">&rarr;</div>/ scroll down / clic : next</div>
<div>-----------------------</div>
<div><div class="key">F</div>: Toggle fullscreen</div> <div><div class="key">F</div>: Toggle fullscreen</div>
<div><div class="key">P</div>: Toggle progress bar</div> <div><div class="key">P</div>: Toggle progress bar</div>
<div><div class="key">&larr;</div>/ scroll up / clic left : previous panel</div> <div><div class="key">V</div>: Toggle panel / page viewing mode</div>
<div><div class="key">&rarr;</div>/ scroll down / clic center or right : next panel</div>
<div><div class="key">SHIFT</div> + <div class="key">&larr;</div>/<div class="key">&rarr;</div>: previous / next page</div>
</div> </div>
</div> </div>