From c7830c3f177a825b202b9fac7ba142509e3663b4 Mon Sep 17 00:00:00 2001 From: caribaud Date: Thu, 25 May 2023 23:30:23 +0200 Subject: [PATCH] Add possibility for global offset / scaling --- README.md | 8 +++ demos/pepper_and_carrot_e35_lowres.html | 69 ++++++++++++++++++++++++ melpomene.js | 70 +++++++++++++++++++++++-- 3 files changed, 143 insertions(+), 4 deletions(-) create mode 100644 demos/pepper_and_carrot_e35_lowres.html diff --git a/README.md b/README.md index 4fd34e9..b8a99d2 100644 --- a/README.md +++ b/README.md @@ -80,6 +80,14 @@ If you wish to run a custom generation process, this generator can output a JSON You are now ready to integrate Melpomene in your website! +## Advanced usage + +If you need to do some global scaling / offset of all zooms in HTML (if for example you reuse zooms data for multiple resolutions), you can add the following attributes to the `
` tag : + ++ `data-global-zoom-offset=","` : offset all positions by the provided x / y values + + If they become negative, they get clamped to 0 and width / height get reduced to compensate + + If they become greater than the page size, they get clamped to the page size and width / height get reduced to compensate ++ `data-global-zoom-scale=""` : scale all positions / sizes by this factor # Credits diff --git a/demos/pepper_and_carrot_e35_lowres.html b/demos/pepper_and_carrot_e35_lowres.html new file mode 100644 index 0000000..b3a3add --- /dev/null +++ b/demos/pepper_and_carrot_e35_lowres.html @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + +
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
←
/ scroll up / clic : previous
+
→
/ scroll down / clic : next
+
-----------------------
+
F
: Toggle fullscreen
+
P
: Toggle progress bar
+
V
: Toggle panel / page viewing mode
+
+
+
+
+
+
+
+
+ + + + + + + + + diff --git a/melpomene.js b/melpomene.js index bffd898..7eb0e9f 100644 --- a/melpomene.js +++ b/melpomene.js @@ -61,6 +61,33 @@ MOUSEWHELL_WAIT = false // Zooms utilites // -------------- +function globalZoomScale(){ + + if (READER_PAGES.dataset.globalZoomScale != undefined){ + return parseFloat(READER_PAGES.dataset.globalZoomScale) + } + + return 1.0 +} + +function globalZoomOffsetX(){ + + if (READER_PAGES.dataset.globalZoomOffset != undefined){ + return parseFloat(READER_PAGES.dataset.globalZoomOffset.split(',')[0]) + } + + return 0.0 +} + +function globalZoomOffsetY(){ + + if (READER_PAGES.dataset.globalZoomOffset != undefined){ + return parseFloat(READER_PAGES.dataset.globalZoomOffset.split(',')[1]) + } + + return 0.0 +} + function loadZoomsFromImgTagsIfRequired(){ // Zooms may be defined by another JS file @@ -236,6 +263,40 @@ function initReader(){ function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){ + // Keep original values for registering + o_width = width + o_height = height + o_posx = posx + o_posy = posy + + // Apply global offsets before scales if we are displaying a zoom + // Pages display uses width & height = 0 + if (width != 0 || height != 0){ + width = width * globalZoomScale() + height = height * globalZoomScale() + posx = (posx + globalZoomOffsetX()) * globalZoomScale() + posy = (posy + globalZoomOffsetY()) * globalZoomScale() + } + + // reduce width if offset sent us outside of page + if (posx < 0) { + width = width + posx + posx = 0 + } + if ((posx + width) > pageOriginalWidth(pageNumber)) { + width = pageOriginalWidth(pageNumber) - posx + } + + // reduce height if offset sent us outside of page + if (posy < 0) { + height = height + posy + posy = 0 + } + if ((posy + height) > pageOriginalHeight(pageNumber)) { + height = pageOriginalHeight(pageNumber) - posy + } + + // Align the top-left corner of the frame with the page READER_PAGES.style.transform = "translate(-" + previousPagesWidth(pageNumber) + "px, -" + pageVerticalOffset(pageNumber) + "px )" @@ -279,11 +340,12 @@ function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){ updateFocusByHeight(scaledHeight) } + // Use values before global offset / scale CURRENT_PAGE = pageNumber - CURRENT_WIDTH = width - CURRENT_HEIGHT = height - CURRENT_X = posx - CURRENT_Y = posy + CURRENT_WIDTH = o_width + CURRENT_HEIGHT = o_height + CURRENT_X = o_posx + CURRENT_Y = o_posy } function refreshReaderDisplay() {