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

Use transform for translation

Browse source
This commit is contained in:
Christian Aribaud 2023-05-22 00:19:12 +02:00
parent 8f777a2a1a
commit 3fddd1cf5c
2 changed files with 34 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

2
melpomene.css
View file

@ -26,6 +26,8 @@
flex-direction: row; flex-direction: row;
left: 0px; left: 0px;
right: 0px; right: 0px;
transform-origin: top left;
transform: scale(1) translate(0);
} }
#reader-pages > img { #reader-pages > img {

47
melpomene.js
View file

@ -226,6 +226,16 @@ function initReader(){
function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){ 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){ if (width == 0){
width = pageOriginalWidth() width = pageOriginalWidth()
} }
@ -237,24 +247,31 @@ function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){
zoomRatio = width / height zoomRatio = width / height
if (readerFrameRatio() > zoomRatio) { if (readerFrameRatio() > zoomRatio) {
// Frame wider than zoom // Frame wider than zoom => scale so heights are the same, offset on x
var zoomToFrameScaleFactor = pageToFrameScaleFactor(true) * pageOriginalHeight() / height var zoomToFrameScaleFactor = READER_CONTENT_FRAME.clientHeight / height
var zoomToFrameCenteringOffset = [(READER_CONTENT_FRAME.clientWidth - width * zoomToFrameScaleFactor) / 2, 0]
updateFocusByWidth(width * zoomToFrameScaleFactor) 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 { } else {
var zoomToFrameScaleFactor = pageToFrameScaleFactor(false) * pageOriginalWidth() / width // Frame narower than zoom => scale so left/right match, offset on y
var zoomToFrameCenteringOffset = [0, (READER_CONTENT_FRAME.clientHeight - height * zoomToFrameScaleFactor) / 2] var zoomToFrameScaleFactor = READER_CONTENT_FRAME.clientWidth / width
updateFocusByHeight(height * zoomToFrameScaleFactor)
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_PAGE = pageNumber
CURRENT_WIDTH = width CURRENT_WIDTH = width
CURRENT_HEIGHT = height CURRENT_HEIGHT = height