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) }