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

92
comic_reader.js
View File

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

7
comic_reader_test_high_res.html
View File

@ -43,11 +43,12 @@
<div id="help-menu">
<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">P</div>: Toggle progress bar</div>
<div><div class="key">&larr;</div>/ scroll up / clic left : previous panel</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 class="key">V</div>: Toggle panel / page viewing mode</div>
</div>
</div>