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

Adding the ability to use data-zooms in HTML files

Browse source
This commit is contained in:
Christian Aribaud 2023-05-21 21:04:31 +02:00
parent 24459a8430
commit 855808b469
2 changed files with 49 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

2
demos/demo_data.js
View file

@ -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],

57
melpomene.js
View file

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