diff --git a/melpomene.css b/melpomene.css index cfdbd50..869c1db 100644 --- a/melpomene.css +++ b/melpomene.css @@ -26,6 +26,8 @@ flex-direction: row; left: 0px; right: 0px; + transform-origin: top left; + transform: scale(1) translate(0); } #reader-pages > img { diff --git a/melpomene.js b/melpomene.js index 327dc25..324d9d5 100644 --- a/melpomene.js +++ b/melpomene.js @@ -226,6 +226,16 @@ function initReader(){ function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){ + // First, scale so the page is at scale 1 compared to the frame + READER_PAGES.style.transform = "scale(" + totalPagesWidth() / READER_CONTENT_FRAME.clientWidth + ")" + + // Then, move to the correct page + READER_PAGES.style.transform = "translateX(" + (- pageOriginalWidth() * (pageNumber - 1)) + "px )" + READER_PAGES.style.transform + + // Then move so the top-left point of the zoom match the frame top-left + READER_PAGES.style.transform = "translate(" + (- posx) + "px, " + (-posy) + "px )" + READER_PAGES.style.transform + + // Then, scale so the zoom would fit the frame, and center the zoom if (width == 0){ width = pageOriginalWidth() } @@ -237,24 +247,31 @@ function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){ zoomRatio = width / height if (readerFrameRatio() > zoomRatio) { - // Frame wider than zoom - var zoomToFrameScaleFactor = pageToFrameScaleFactor(true) * pageOriginalHeight() / height - var zoomToFrameCenteringOffset = [(READER_CONTENT_FRAME.clientWidth - width * zoomToFrameScaleFactor) / 2, 0] - updateFocusByWidth(width * zoomToFrameScaleFactor) + // Frame wider than zoom => scale so heights are the same, offset on x + var zoomToFrameScaleFactor = READER_CONTENT_FRAME.clientHeight / height + + READER_PAGES.style.transform = "scale(" + zoomToFrameScaleFactor + ")" + READER_PAGES.style.transform + + var scaledWidth = width * zoomToFrameScaleFactor + var offset = (READER_CONTENT_FRAME.clientWidth - scaledWidth) / 2 + + READER_PAGES.style.transform = "translateX(" + offset + "px)" + READER_PAGES.style.transform + + updateFocusByWidth(scaledWidth) } else { - var zoomToFrameScaleFactor = pageToFrameScaleFactor(false) * pageOriginalWidth() / width - var zoomToFrameCenteringOffset = [0, (READER_CONTENT_FRAME.clientHeight - height * zoomToFrameScaleFactor) / 2] - updateFocusByHeight(height * zoomToFrameScaleFactor) + // Frame narower than zoom => scale so left/right match, offset on y + var zoomToFrameScaleFactor = READER_CONTENT_FRAME.clientWidth / width + + READER_PAGES.style.transform = "scale(" + zoomToFrameScaleFactor + ")" + READER_PAGES.style.transform + + var scaledHeight = height * zoomToFrameScaleFactor + var offset = (READER_CONTENT_FRAME.clientHeight - scaledHeight) / 2 + + READER_PAGES.style.transform = "translateY(" + offset + "px)" + READER_PAGES.style.transform + + updateFocusByHeight(scaledHeight) } - 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