diff --git a/comic_reader.css b/comic_reader.css index f8c8467..69bdbd1 100644 --- a/comic_reader.css +++ b/comic_reader.css @@ -5,11 +5,9 @@ #reader-pages { position: absolute; - display: flex; flex-direction: row; left: 0px; right: 0px; - height: 100%; transition: all 1.5s ease; } diff --git a/comic_reader.js b/comic_reader.js index d7d7509..f58ca20 100644 --- a/comic_reader.js +++ b/comic_reader.js @@ -22,6 +22,9 @@ IS_PAGE_MODE = false // UTILITIES // =========== +// Zooms utilites +// -------------- + function getFirstZoomOfPage(pageNumber){ for (var zoom_idx = 0; zoom_idx < zooms.length; zoom_idx++){ @@ -47,26 +50,45 @@ function getLastZoomOfPage(pageNumber){ return res } -function getReaderFrameRatio() { - return READER_FRAME.clientWidth / READER_FRAME.clientHeight -} +// Dimensions utilites +// ------------------- function getPagesCount() { return READER_PAGES.childElementCount } -function getPagesHeight() { - return READER_PAGES.dataset.pagesHeight +function pageOriginalHeight() { + return parseInt(READER_PAGES.dataset.pagesHeight) } -function getPagesWidth() { - return READER_PAGES.dataset.pagesWidth +function pageOriginalWidth() { + return parseInt(READER_PAGES.dataset.pagesWidth) } -function getPagesRatio() { +function readerFrameRatio() { + return READER_FRAME.clientWidth / READER_FRAME.clientHeight +} + +function pageRatio() { return READER_PAGES.dataset.pagesWidth / READER_PAGES.dataset.pagesHeight } +function isFrameRatioWiderThanPage(){ + return readerFrameRatio() > pageRatio() +} + +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_FRAME.clientWidth / pageOriginalWidth() +} + +function totalPagesWidth() { + // The width of all cumuled pages with scale factor applied + return pageOriginalWidth() * getPagesCount() +} // ========= // ACTIONS @@ -74,57 +96,49 @@ function getPagesRatio() { function initReader(){ moveReaderDisplayToZoom(0) + + for (var i = 0; i < READER_PAGES.children.length; i++) { + let img = READER_PAGES.children[i]; + img.style.width = 100 / getPagesCount() + "%" + } + + READER_PAGES.style.display = "flex" + READER_PAGES.hidden = false + } function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){ if (width == 0){ - width = getPagesWidth() + width = pageOriginalWidth() } if (height == 0){ - height = getPagesHeight() + height = pageOriginalHeight() } - ratio = width / height + zoomRatio = width / height - base_scale_factor = getPagesHeight() / READER_FRAME.clientHeight // This is the factor at 100% height - - if (ratio < getReaderFrameRatio()) { - - scale_factor = READER_FRAME.clientHeight / height - - centering_padding = (READER_FRAME.clientWidth - width * scale_factor) / 2 - - pages_negative_padding = getPagesWidth() * scale_factor * (pageNumber - 1) - - READER_PAGES.style.height = base_scale_factor * scale_factor * 100 + "%" - - READER_PAGES.style.left = (- posx * scale_factor + centering_padding - pages_negative_padding) + "px" - - READER_PAGES.style.top = -posy * scale_factor + "px" - - updateFocusByWidth(width * scale_factor) - + if (readerFrameRatio() > zoomRatio) { + // Frame wider than zoom + var zoomToFrameScaleFactor = pageToFrameScaleFactor(true) * pageOriginalHeight() / height + var zoomToFrameCenteringOffset = [(READER_FRAME.clientWidth - width * zoomToFrameScaleFactor) / 2, 0] + updateFocusByWidth(width * zoomToFrameScaleFactor) } else { - - scale_factor = READER_FRAME.clientWidth / width - - pages_negative_padding = getPagesWidth() * scale_factor * (pageNumber - 1) - - scaled_height = height * scale_factor - - READER_PAGES.style.height = base_scale_factor * scale_factor * 100 + "%" - - READER_PAGES.style.left = (- posx * scale_factor - pages_negative_padding) + "px" - - READER_PAGES.style.top = -posy * scale_factor + (READER_FRAME.clientHeight - scaled_height)/2 + "px" - - updateFocusByHeight(scaled_height) - + var zoomToFrameScaleFactor = pageToFrameScaleFactor(false) * pageOriginalWidth() / width + var zoomToFrameCenteringOffset = [0, (READER_FRAME.clientHeight - height * zoomToFrameScaleFactor) / 2] + updateFocusByHeight(height * zoomToFrameScaleFactor) } + previousPagesOffset = pageOriginalWidth() * (pageNumber - 1) * zoomToFrameScaleFactor + + READER_PAGES.style.width = totalPagesWidth() * zoomToFrameScaleFactor + "px" + READER_PAGES.style.height = pageOriginalHeight() * zoomToFrameScaleFactor + "px" + + READER_PAGES.style.left = (- posx * zoomToFrameScaleFactor + zoomToFrameCenteringOffset[0] - previousPagesOffset) + "px" + READER_PAGES.style.top = (- posy * zoomToFrameScaleFactor + zoomToFrameCenteringOffset[1]) + "px" + CURRENT_PAGE = pageNumber CURRENT_WIDTH = width CURRENT_HEIGHT = height diff --git a/comic_reader_test_high_res.html b/comic_reader_test_high_res.html index df7c818..8ea8135 100644 --- a/comic_reader_test_high_res.html +++ b/comic_reader_test_high_res.html @@ -11,7 +11,7 @@