diff --git a/comic_reader.css b/comic_reader.css index 42492d0..e391acf 100644 --- a/comic_reader.css +++ b/comic_reader.css @@ -8,7 +8,7 @@ flex-direction: column; } -#reader-content { +#reader-content-frame { flex: 1; position: relative; overflow: hidden; diff --git a/comic_reader.js b/comic_reader.js index 43c9749..4dcea05 100644 --- a/comic_reader.js +++ b/comic_reader.js @@ -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) => { diff --git a/comic_reader_test_high_res.html b/comic_reader_test_high_res.html index e2d6550..19d4de3 100644 --- a/comic_reader_test_high_res.html +++ b/comic_reader_test_high_res.html @@ -11,7 +11,7 @@
-
+