Use transform for translation
This commit is contained in:
parent
8f777a2a1a
commit
3fddd1cf5c
|
@ -26,6 +26,8 @@
|
|||
flex-direction: row;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
transform-origin: top left;
|
||||
transform: scale(1) translate(0);
|
||||
}
|
||||
|
||||
#reader-pages > img {
|
||||
|
|
47
melpomene.js
47
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
|
||||
|
|
Loading…
Reference in New Issue