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

fix fullscreen mode

Browse source
This commit is contained in:
Christian Aribaud 2023-04-17 20:45:46 +02:00
parent 28bd495867
commit 38cf84f532
3 changed files with 27 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
comic_reader.css
View file

@ -8,7 +8,7 @@
flex-direction: column;
}
#reader-content {
#reader-content-frame {
flex: 1;
position: relative;
overflow: hidden;

34
comic_reader.js
View file

@ -5,6 +5,7 @@
MOVE_NEXT = "ArrowRight"
MOVE_BACK = "ArrowLeft"
TOGGLE_FULLSCREEN = "F"
TOGGLE_PROGRESSBAR = "P"
//========================
@ -20,9 +21,11 @@ DELAY_BEFORE_HIDDING_CONTROLS = 4000;
//====================
READER_FRAME = document.getElementById("reader-frame")
READER_CONTENT_FRAME = document.getElementById("reader-content-frame")
READER_PAGES = document.getElementById("reader-pages")
FOCUS_OVERLAY = document.getElementById("focus-overlay")
HELP_CONTROLS = document.getElementById("help-controls")
PROGRESS_BAR_CONTAINER = document.getElementById("reader-progress-container")
PROGRESS_BAR = document.getElementById("reader-progress-bar")
CURRENT_ZOOM = 0
@ -35,7 +38,6 @@ CURRENT_Y = 0
IS_PAGE_MODE = false
MOUSEWHELL_WAIT = false
// =============
// UTILITIES
// =============
@ -111,7 +113,7 @@ function pageOriginalWidth() {
}
function readerFrameRatio() {
return READER_FRAME.clientWidth / READER_FRAME.clientHeight
return READER_CONTENT_FRAME.clientWidth / READER_CONTENT_FRAME.clientHeight
}
function pageRatio() {
@ -125,9 +127,9 @@ function isFrameRatioWiderThanPage(){
function pageToFrameScaleFactor(useHeight){
// The scale factor to apply to a page so it exactly fit in the reader frame
if (useHeight) {
return READER_FRAME.clientHeight / pageOriginalHeight()
return READER_CONTENT_FRAME.clientHeight / pageOriginalHeight()
}
return READER_FRAME.clientWidth / pageOriginalWidth()
return READER_CONTENT_FRAME.clientWidth / pageOriginalWidth()
}
function totalPagesWidth() {
@ -153,7 +155,7 @@ function initReader(){
entry.target.style.visibility = "hidden"
}
});
}, { root: READER_FRAME, rootMargin: "-10px" });
}, { root: READER_CONTENT_FRAME, rootMargin: "-10px" });
for (var i = 0; i < READER_PAGES.children.length; i++) {
let img = READER_PAGES.children[i];
@ -189,11 +191,11 @@ function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){
if (readerFrameRatio() > zoomRatio) {
// Frame wider than zoom
var zoomToFrameScaleFactor = pageToFrameScaleFactor(true) * pageOriginalHeight() / height
var zoomToFrameCenteringOffset = [(READER_FRAME.clientWidth - width * zoomToFrameScaleFactor) / 2, 0]
var zoomToFrameCenteringOffset = [(READER_CONTENT_FRAME.clientWidth - width * zoomToFrameScaleFactor) / 2, 0]
updateFocusByWidth(width * zoomToFrameScaleFactor)
} else {
var zoomToFrameScaleFactor = pageToFrameScaleFactor(false) * pageOriginalWidth() / width
var zoomToFrameCenteringOffset = [0, (READER_FRAME.clientHeight - height * zoomToFrameScaleFactor) / 2]
var zoomToFrameCenteringOffset = [0, (READER_CONTENT_FRAME.clientHeight - height * zoomToFrameScaleFactor) / 2]
updateFocusByHeight(height * zoomToFrameScaleFactor)
}
@ -212,6 +214,9 @@ function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){
CURRENT_Y = posy
}
function refreshReaderDisplay() {
moveReaderDisplayToArea(CURRENT_PAGE, CURRENT_WIDTH, CURRENT_HEIGHT, CURRENT_X, CURRENT_Y)
}
function moveReaderDisplayToPage(pageNumber) {
moveReaderDisplayToArea(pageNumber, 0, 0, 0, 0)
@ -226,7 +231,7 @@ function moveReaderDisplayToZoom(index) {
function updateFocusByWidth(width){
side_width = (READER_FRAME.clientWidth - width) / 2
side_width = (READER_CONTENT_FRAME.clientWidth - width) / 2
FOCUS_OVERLAY.style.gridTemplateColumns = side_width +"px auto " + side_width + "px"
FOCUS_OVERLAY.style.gridTemplateRows = "0px auto 0px";
@ -234,7 +239,7 @@ function updateFocusByWidth(width){
function updateFocusByHeight(height){
side_width = (READER_FRAME.clientHeight - height) / 2
side_width = (READER_CONTENT_FRAME.clientHeight - height) / 2
FOCUS_OVERLAY.style.gridTemplateRows = side_width +"px auto " + side_width + "px"
FOCUS_OVERLAY.style.gridTemplateColumns = "0px auto 0px";
@ -330,6 +335,15 @@ function handleKeyPress(key, has_shift){
}
}
else if (key.toUpperCase() == TOGGLE_PROGRESSBAR){
if (PROGRESS_BAR_CONTAINER.hidden == true) {
PROGRESS_BAR_CONTAINER.hidden = false
} else {
PROGRESS_BAR_CONTAINER.hidden = true
}
refreshReaderDisplay();
}
}
@ -362,7 +376,7 @@ window.addEventListener("load", (event) => {
});
addEventListener("resize", (event) => {
moveReaderDisplayToArea(CURRENT_PAGE, CURRENT_WIDTH, CURRENT_HEIGHT, CURRENT_X, CURRENT_Y)
refreshReaderDisplay();
});
addEventListener("keydown", (event) => {

3
comic_reader_test_high_res.html
View file

@ -11,7 +11,7 @@
<body>
<div id="reader-frame">
<div id="reader-content">
<div id="reader-content-frame">
<div id="reader-pages" data-pages-width="2481" data-pages-height="3503" hidden>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg"/>
@ -44,6 +44,7 @@
<div id="help-menu">
<div id="help-controls" style="opacity:1; transform: translate(0,0);">
<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>