From 855808b46965e8602709d296231b4e015ca270f2 Mon Sep 17 00:00:00 2001
From: Christian Aribaud <christian@aribaud.net>
Date: Sun, 21 May 2023 21:04:31 +0200
Subject: [PATCH] Adding the ability to use data-zooms in HTML files

---
 demos/demo_data.js |  2 +-
 melpomene.js       | 57 ++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/demos/demo_data.js b/demos/demo_data.js
index 07797b4..dffd7ed 100644
--- a/demos/demo_data.js
+++ b/demos/demo_data.js
@@ -1,4 +1,4 @@
-zooms = [
+PAGES_ZOOMS = [
     [1, 2481.0, 1327.1057, 0.0, 0.0],
     [1, 593.15338, 1076.4635, 0.0, 1364.053],
     [1, 890.72864, 491.29874, 830.81415, 1751.5],
diff --git a/melpomene.js b/melpomene.js
index ece00db..745484c 100644
--- a/melpomene.js
+++ b/melpomene.js
@@ -34,6 +34,15 @@ PROGRESS_BAR_CONTAINER = document.getElementById("reader-progress-container")
 PROGRESS_BAR = document.getElementById("reader-progress-bar")
 PROGRESS_BAR_PAGES = document.getElementById("reader-progress-pages")
 
+//===========================
+//  STATES GLOBAL VARIABLES
+//===========================
+
+// The variable ZOOMS can either be defined by another JS file or contructed at init
+if (typeof PAGES_ZOOMS == 'undefined') {
+    PAGES_ZOOMS = null
+}
+
 CURRENT_ZOOM = 0
 CURRENT_PAGE = 1
 CURRENT_WIDTH = 0
@@ -51,10 +60,39 @@ MOUSEWHELL_WAIT = false
 // Zooms utilites
 // --------------
 
+function loadZoomsFromImgTagsIfRequired(){
+    
+    // Zooms may be defined by another JS file
+    if (PAGES_ZOOMS == null){
+        
+        PAGES_ZOOMS = []
+        
+        // parse the data-zooms of each img and and the page number info
+        for (var i = 0; i < READER_PAGES.children.length; i++) {
+            
+            zooms_raw_data = READER_PAGES.children[i].dataset.zooms
+            
+            // ';' separates zooms data, ',' separates values
+            // We add the page number (adding 1 because of indexing)
+            zooms = zooms_raw_data.split(";").map(
+                zoom => [i + 1].concat(
+                    zoom.split(',').map(
+                        value => parseFloat(value)
+                    )
+                )
+            )
+            
+            PAGES_ZOOMS = PAGES_ZOOMS.concat(zooms)
+        }
+        
+    }
+    
+}
+
 function getFirstZoomOfPage(pageNumber){
    
-    for (var zoom_idx = 0; zoom_idx < zooms.length; zoom_idx++){
-        if (zooms[zoom_idx][0] == pageNumber) {
+    for (var zoom_idx = 0; zoom_idx < PAGES_ZOOMS.length; zoom_idx++){
+        if (PAGES_ZOOMS[zoom_idx][0] == pageNumber) {
             return zoom_idx
         }
     }
@@ -63,12 +101,12 @@ function getFirstZoomOfPage(pageNumber){
 function getLastZoomOfPage(pageNumber){
     let res = null
     
-    for (var zoom_idx = 0; zoom_idx < zooms.length; zoom_idx++){
-        if (zooms[zoom_idx][0] == pageNumber) {
+    for (var zoom_idx = 0; zoom_idx < PAGES_ZOOMS.length; zoom_idx++){
+        if (PAGES_ZOOMS[zoom_idx][0] == pageNumber) {
             res = zoom_idx
         }
         
-        if (res != null && zooms[zoom_idx][0] != pageNumber) {
+        if (res != null && PAGES_ZOOMS[zoom_idx][0] != pageNumber) {
             break
         }
     }
@@ -77,11 +115,11 @@ function getLastZoomOfPage(pageNumber){
 }
 
 function getZoomCountForPage(pageNumber) {
-    return zooms.filter(zoom => zoom[0] == pageNumber).length
+    return PAGES_ZOOMS.filter(zoom => zoom[0] == pageNumber).length
 }
 
 function getCurrentZoomIndexForPage() {
-    previousZoomsCount = zooms.filter(zoom => zoom[0] < CURRENT_PAGE).length
+    previousZoomsCount = PAGES_ZOOMS.filter(zoom => zoom[0] < CURRENT_PAGE).length
     return CURRENT_ZOOM - previousZoomsCount + 1
 }
 
@@ -148,6 +186,7 @@ function totalPagesWidth() {
 // =========
 
 function initReader(){
+    loadZoomsFromImgTagsIfRequired()
     moveReaderDisplayToZoom(0)
     
     // Smoothly show pictures when they intersect with the viewport
@@ -232,7 +271,7 @@ function moveReaderDisplayToPage(pageNumber) {
 
 function moveReaderDisplayToZoom(index) {
     
-    moveReaderDisplayToArea(zooms[index][0], zooms[index][1], zooms[index][2], zooms[index][3], zooms[index][4])
+    moveReaderDisplayToArea(PAGES_ZOOMS[index][0], PAGES_ZOOMS[index][1], PAGES_ZOOMS[index][2], PAGES_ZOOMS[index][3], PAGES_ZOOMS[index][4])
     
     CURRENT_ZOOM = index
 }
@@ -278,7 +317,7 @@ function moveReader(to_next) {
     
     } else {
     
-        if (to_next && CURRENT_ZOOM < zooms.length - 1) {
+        if (to_next && CURRENT_ZOOM < PAGES_ZOOMS.length - 1) {
             moveReaderDisplayToZoom(CURRENT_ZOOM + 1)
         }