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

Rework melpomene to respect newly added ESLINT 

This includes:

+ Removing trailling whitespaces
+ Adding missing const keywords
+ Fixing equality checks
+ Removing unused variables, functions, etc...
+ Adding missing let & const statements
+ Use strict
+ Correcting all names to use camelCase
+ Using semicolons everywhere
+ Use Allman style everywhere
+ Make comments headers uniform

This also includes:

+ Fixing displayed version number
This commit is contained in:
caribaud 2023-06-04 12:54:21 +02:00 committed by Christian Aribaud
parent 230abf08e8
commit 5f3060995b
1 changed files with 451 additions and 348 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

655
melpomene.js
View File

@ -2,60 +2,63 @@
/* Version 1.0.0_RC1 */ /* Version 1.0.0_RC1 */
/* CC-BY-NC-SA : https://git.aribaud.net/caribaud/melpomene/ */ /* CC-BY-NC-SA : https://git.aribaud.net/caribaud/melpomene/ */
"use strict";
// ============ // ============
// CONTROLS // CONTROLS
// ============ // ============
MOVE_NEXT = "ArrowRight" const MOVE_NEXT = "ArrowRight";
MOVE_BACK = "ArrowLeft" const MOVE_BACK = "ArrowLeft";
TOGGLE_FULLSCREEN = "F" const TOGGLE_FULLSCREEN = "F";
TOGGLE_PROGRESSBAR = "P" const TOGGLE_PROGRESSBAR = "P";
TOGGLE_VIEW_MODE = "V" const TOGGLE_VIEW_MODE = "V";
// ======================== // ========================
// NAVIGATION CONSTANTS // NAVIGATION CONSTANTS
// ======================== // ========================
PAGE_TRANSITION_SPEED = "1.5s" const MOUSEWHELL_MIN_DELAY = 50;
MOUSEWHELL_MIN_DELAY = 50 const DELAY_BEFORE_HIDDING_CONTROLS = 4000;
DELAY_BEFORE_HIDDING_CONTROLS = 4000;
// ==================== // ====================
// STATES CONSTANTS // STATES CONSTANTS
// ==================== // ====================
MELPOMENE_VERSION = "1.0.0_RC1" const MELPOMENE_VERSION = "1.0.0_UNSTABLE";
READER_FRAME = document.getElementById("melpomene") const READER_FRAME = document.getElementById("melpomene");
READER_CONTENT_FRAME = document.getElementById("melpomene-content-frame") const READER_CONTENT_FRAME = document.getElementById("melpomene-content-frame");
READER_PAGES = document.getElementById("melpomene-pages") const READER_PAGES = document.getElementById("melpomene-pages");
FOCUS_OVERLAY_HEIGHT = document.getElementById("melpomene-focus") const FOCUS_OVERLAY_HEIGHT = document.getElementById("melpomene-focus");
FOCUS_OVERLAY_WIDTH = document.getElementById("melpomene-focus-col") const FOCUS_OVERLAY_WIDTH = document.getElementById("melpomene-focus-col");
HELP_CONTROLS = document.getElementById("melpomene-help-menu") const HELP_CONTROLS = document.getElementById("melpomene-help-menu");
PROGRESS_BAR_CONTAINER = document.getElementById("melpomene-progress-container") const PROGRESS_BAR_CONTAINER = document.getElementById("melpomene-progress-container");
PROGRESS_BAR = document.getElementById("melpomene-progress-bar") const PROGRESS_BAR = document.getElementById("melpomene-progress-bar");
PROGRESS_BAR_PAGES = document.getElementById("melpomene-progress-sections") const PROGRESS_BAR_PAGES = document.getElementById("melpomene-progress-sections");
VERSION_DISPLAY = document.getElementById("melpomene-version") const VERSION_DISPLAY = document.getElementById("melpomene-version");
// =========================== // ===========================
// STATES GLOBAL VARIABLES // STATES GLOBAL VARIABLES
// =========================== // ===========================
var PAGES_ZOOMS;
// The variable ZOOMS can either be defined by another JS file or contructed at init // The variable ZOOMS can either be defined by another JS file or contructed at init
if (typeof PAGES_ZOOMS == 'undefined') { if (typeof PAGES_ZOOMS === 'undefined')
PAGES_ZOOMS = null {
PAGES_ZOOMS = null;
} }
CURRENT_ZOOM = 0 var CURRENT_ZOOM = 0;
CURRENT_PAGE = 1 var CURRENT_PAGE = 1;
CURRENT_WIDTH = 0 var CURRENT_WIDTH = 0;
CURRENT_HEIGHT = 0 var CURRENT_HEIGHT = 0;
CURRENT_X = 0 var CURRENT_X = 0;
CURRENT_Y = 0 var CURRENT_Y = 0;
IS_PAGE_MODE = false var IS_PAGE_MODE = false;
MOUSEWHELL_WAIT = false var MOUSEWHELL_WAIT = false;
// ============= // =============
// UTILITIES // UTILITIES
@ -64,360 +67,433 @@ MOUSEWHELL_WAIT = false
// Zooms utilites // Zooms utilites
// -------------- // --------------
function globalZoomScale(){ function globalZoomScale()
{
if (READER_PAGES.dataset.globalZoomScale != undefined){ if (READER_PAGES.dataset.globalZoomScale !== undefined)
return parseFloat(READER_PAGES.dataset.globalZoomScale) {
return parseFloat(READER_PAGES.dataset.globalZoomScale);
} }
return 1.0 return 1.0;
} }
function globalZoomOffsetX(){ function globalZoomOffsetX()
{
if (READER_PAGES.dataset.globalZoomOffset != undefined){ if (READER_PAGES.dataset.globalZoomOffset !== undefined)
return parseFloat(READER_PAGES.dataset.globalZoomOffset.split(',')[0]) {
return parseFloat(READER_PAGES.dataset.globalZoomOffset.split(',')[0]);
} }
return 0.0 return 0.0;
} }
function globalZoomOffsetY(){ function globalZoomOffsetY()
{
if (READER_PAGES.dataset.globalZoomOffset != undefined){ if (READER_PAGES.dataset.globalZoomOffset !== undefined)
return parseFloat(READER_PAGES.dataset.globalZoomOffset.split(',')[1]) {
return parseFloat(READER_PAGES.dataset.globalZoomOffset.split(',')[1]);
} }
return 0.0 return 0.0;
} }
function loadZoomsFromImgTagsIfRequired(){ function loadZoomsFromImgTagsIfRequired()
{
// Zooms may be defined by another JS file // Zooms may be defined by another JS file
if (PAGES_ZOOMS == null){ if (PAGES_ZOOMS === null)
{
PAGES_ZOOMS = [] PAGES_ZOOMS = [];
// parse the data-zooms of each img and and the page number info // parse the data-zooms of each img and and the page number info
for (var i = 0; i < READER_PAGES.children.length; i++) { for (let idx = 0; idx < READER_PAGES.children.length; idx += 1)
{
zooms_raw_data = READER_PAGES.children[i].dataset.zooms const zoomsRawData = READER_PAGES.children[idx].dataset.zooms;
// ';' separates zooms data, ',' separates values // ';' separates zooms data, ',' separates values
// We add the page number (adding 1 because of indexing) // We add the page number (adding 1 because of indexing)
zooms = zooms_raw_data.split(";").map( const zooms = zoomsRawData.split(";").map(
zoom => [i + 1].concat( zoom => [idx + 1].concat(
zoom.split(',').map( zoom.split(',').map(
value => parseFloat(value) value => parseFloat(value)
) )
) )
) );
PAGES_ZOOMS = PAGES_ZOOMS.concat(zooms) PAGES_ZOOMS = PAGES_ZOOMS.concat(zooms);
}
}
}
function getFirstZoomOfPage(pageNumber){
for (var zoom_idx = 0; zoom_idx < PAGES_ZOOMS.length; zoom_idx++){
if (PAGES_ZOOMS[zoom_idx][0] == pageNumber) {
return zoom_idx
} }
} }
} }
function getLastZoomOfPage(pageNumber){ function getFirstZoomOfPage(pageNumber)
let res = null {
for (let zoomIdx = 0; zoomIdx < PAGES_ZOOMS.length; zoomIdx += 1)
for (var zoom_idx = 0; zoom_idx < PAGES_ZOOMS.length; zoom_idx++){ {
if (PAGES_ZOOMS[zoom_idx][0] == pageNumber) { if (PAGES_ZOOMS[zoomIdx][0] === pageNumber)
res = zoom_idx {
return zoomIdx;
} }
if (res != null && PAGES_ZOOMS[zoom_idx][0] != pageNumber) {
break
} }
} }
return res function getLastZoomOfPage(pageNumber)
{
let res = null;
for (let zoomIdx = 0; zoomIdx < PAGES_ZOOMS.length; zoomIdx += 1)
{
if (PAGES_ZOOMS[zoomIdx][0] === pageNumber)
{
res = zoomIdx;
} }
function getZoomCountForPage(pageNumber) { if (res !== null && PAGES_ZOOMS[zoomIdx][0] !== pageNumber)
return PAGES_ZOOMS.filter(zoom => zoom[0] == pageNumber).length {
break;
}
} }
function getCurrentZoomIndexForPage() { return res;
previousZoomsCount = PAGES_ZOOMS.filter(zoom => zoom[0] < CURRENT_PAGE).length
return CURRENT_ZOOM - previousZoomsCount + 1
} }
function getReadingProgressPercent() { function getZoomCountForPage(pageNumber)
progressPerPage = 1 / getPagesCount() {
return PAGES_ZOOMS.filter(zoom => zoom[0] === pageNumber).length;
if (IS_PAGE_MODE){
return 100 * progressPerPage * CURRENT_PAGE
} }
progressPerZoom = progressPerPage / getZoomCountForPage(CURRENT_PAGE) function getCurrentZoomIndexForPage()
{
readingProgress = (CURRENT_PAGE - 1) * progressPerPage + getCurrentZoomIndexForPage() * progressPerZoom const previousZoomsCount = PAGES_ZOOMS.filter(zoom => zoom[0] < CURRENT_PAGE).length;
return CURRENT_ZOOM - previousZoomsCount + 1;
return 100 * readingProgress
} }
function updateProgressBar(){ function getReadingProgressPercent()
PROGRESS_BAR.style.width = getReadingProgressPercent() + "%" {
const progressPerPage = 1 / getPagesCount();
if (IS_PAGE_MODE)
{
return 100 * progressPerPage * CURRENT_PAGE;
}
const progressPerZoom = progressPerPage / getZoomCountForPage(CURRENT_PAGE);
const readingProgress = (CURRENT_PAGE - 1) * progressPerPage + getCurrentZoomIndexForPage() * progressPerZoom;
return 100 * readingProgress;
}
function updateProgressBar()
{
PROGRESS_BAR.style.width = getReadingProgressPercent() + "%";
} }
// Dimensions utilites // Dimensions utilites
// ------------------- // -------------------
function getPagesCount() { function getPagesCount()
return READER_PAGES.childElementCount {
return READER_PAGES.childElementCount;
} }
function pageOriginalHeight(pageNumber) { function pageOriginalHeight(pageNumber)
return READER_PAGES.children[pageNumber - 1].naturalHeight {
return READER_PAGES.children[pageNumber - 1].naturalHeight;
} }
function pageOriginalWidth(pageNumber) { function pageOriginalWidth(pageNumber)
return READER_PAGES.children[pageNumber - 1].naturalWidth {
return READER_PAGES.children[pageNumber - 1].naturalWidth;
} }
function readerFrameRatio() { function readerFrameRatio()
return READER_CONTENT_FRAME.clientWidth / READER_CONTENT_FRAME.clientHeight {
return READER_CONTENT_FRAME.clientWidth / READER_CONTENT_FRAME.clientHeight;
} }
function pageRatio(pageNumber) { function pageRatio(pageNumber)
return READER_PAGES.children[pageNumber - 1].naturalWidth / READER_PAGES.children[pageNumber - 1].naturalHeight {
return READER_PAGES.children[pageNumber - 1].naturalWidth / READER_PAGES.children[pageNumber - 1].naturalHeight;
} }
function pageMaxHeight(){ function pageMaxHeight()
let max_height = 0 {
let maxHeight = 0;
for (var i = 0; i < READER_PAGES.children.length; i++) { for (let i = 0; i < READER_PAGES.children.length; i += 1)
if(READER_PAGES.children[i].naturalHeight > max_height){ {
max_height = READER_PAGES.children[i].naturalHeight if(READER_PAGES.children[i].naturalHeight > maxHeight)
{
maxHeight = READER_PAGES.children[i].naturalHeight;
} }
} }
return max_height return maxHeight;
} }
function pageVerticalOffset(pageNumber) { function pageVerticalOffset(pageNumber)
return ( pageMaxHeight() - pageOriginalHeight(pageNumber) ) / 2 {
return ( pageMaxHeight() - pageOriginalHeight(pageNumber) ) / 2;
} }
function previousPagesWidth(pageNumber) { function previousPagesWidth(pageNumber)
{
// The width of all previous pages relative to the provided index // The width of all previous pages relative to the provided index
let totalWidth = 0 let totalWidth = 0;
for (let idx = 0; idx < pageNumber - 1; idx++){ for (let idx = 0; idx < pageNumber - 1; idx += 1)
totalWidth = totalWidth + READER_PAGES.children[idx].naturalWidth {
totalWidth += READER_PAGES.children[idx].naturalWidth;
} }
return totalWidth return totalWidth;
} }
// ========= // =========
// ACTIONS // ACTIONS
// ========= // =========
function initReader(){ function initReader()
loadZoomsFromImgTagsIfRequired() {
moveReaderDisplayToZoom(0) VERSION_DISPLAY.innerText = VERSION_DISPLAY.innerText.replace("Unknown version", MELPOMENE_VERSION);
loadZoomsFromImgTagsIfRequired();
moveReaderDisplayToZoom(0);
// Smoothly show pictures when they intersect with the viewport // Smoothly show pictures when they intersect with the viewport
let visibilityObserver = new IntersectionObserver((entries, observer) => { const visibilityObserver = new IntersectionObserver(
entries.forEach((entry) => { (entries, observer) =>
if (entry.isIntersecting) { {
entry.target.style.opacity = 1 entries.forEach((entry) =>
entry.target.style.visibility = "visible" {
} else { if (entry.isIntersecting)
entry.target.style.opacity = 0 {
entry.target.style.visibility = "hidden" entry.target.style.opacity = 1;
entry.target.style.visibility = "visible";
}
else
{
entry.target.style.opacity = 0;
entry.target.style.visibility = "hidden";
} }
}); });
}, { root: READER_CONTENT_FRAME, rootMargin: "-10px" }); },
{ root: READER_CONTENT_FRAME, rootMargin: "-10px" }
);
for (var i = 0; i < READER_PAGES.children.length; i++) { for (let i = 0; i < READER_PAGES.children.length; i += 1)
let img = READER_PAGES.children[i]; {
visibilityObserver.observe(img) const img = READER_PAGES.children[i];
visibilityObserver.observe(img);
PROGRESS_BAR_PAGES.appendChild(document.createElement("div")) PROGRESS_BAR_PAGES.appendChild(document.createElement("div"));
} }
READER_PAGES.style.display = "flex" READER_PAGES.style.display = "flex";
setTimeout(() => { setTimeout(
READER_PAGES.hidden = false () => { READER_PAGES.hidden = false },
}, "300") "300"
);
setTimeout(() => { setTimeout(
() =>
{
HELP_CONTROLS.style.opacity = null; HELP_CONTROLS.style.opacity = null;
HELP_CONTROLS.style.transform = null; HELP_CONTROLS.style.transform = null;
}, DELAY_BEFORE_HIDDING_CONTROLS) },
DELAY_BEFORE_HIDDING_CONTROLS
);
} }
function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){ function moveReaderDisplayToArea(pageNumber, oWidth, oHeight, oPosx, oPosy)
{
// Keep original values for registering // Keep original values for registering
o_width = width let width = oWidth;
o_height = height let height = oHeight;
o_posx = posx let posx = oPosx;
o_posy = posy let posy = oPosy;
// Apply global offsets before scales if we are displaying a zoom // Apply global offsets before scales if we are displaying a zoom
// Pages display uses width & height = 0 // Pages display uses width & height = 0
if (width != 0 || height != 0){ if (width !== 0 || height !== 0)
width = width * globalZoomScale() {
height = height * globalZoomScale() width = width * globalZoomScale();
posx = (posx + globalZoomOffsetX()) * globalZoomScale() height = height * globalZoomScale();
posy = (posy + globalZoomOffsetY()) * globalZoomScale() posx = (posx + globalZoomOffsetX()) * globalZoomScale();
posy = (posy + globalZoomOffsetY()) * globalZoomScale();
} }
// reduce width if offset sent us outside of page // reduce width if offset sent us outside of page
if (posx < 0) { if (posx < 0)
width = width + posx {
posx = 0 width = width + posx;
posx = 0;
} }
if ((posx + width) > pageOriginalWidth(pageNumber)) {
width = pageOriginalWidth(pageNumber) - posx if ((posx + width) > pageOriginalWidth(pageNumber))
{
width = pageOriginalWidth(pageNumber) - posx;
} }
// reduce height if offset sent us outside of page // reduce height if offset sent us outside of page
if (posy < 0) { if (posy < 0)
height = height + posy {
posy = 0 height = height + posy;
posy = 0;
} }
if ((posy + height) > pageOriginalHeight(pageNumber)) {
height = pageOriginalHeight(pageNumber) - posy if ((posy + height) > pageOriginalHeight(pageNumber))
{
height = pageOriginalHeight(pageNumber) - posy;
} }
// Align the top-left corner of the frame with the page // Align the top-left corner of the frame with the page
READER_PAGES.style.transform = "translate(-" + previousPagesWidth(pageNumber) + "px, -" + pageVerticalOffset(pageNumber) + "px )" READER_PAGES.style.transform = "translate(-" + previousPagesWidth(pageNumber) + "px, -" + pageVerticalOffset(pageNumber) + "px )";
// Then move so the top-left point of the zoom match the frame top-left // 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 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 // Then, scale so the zoom would fit the frame, and center the zoom
if (width == 0){ if (width === 0)
width = pageOriginalWidth(pageNumber) {
width = pageOriginalWidth(pageNumber);
} }
if (height == 0){ if (height === 0)
height = pageOriginalHeight(pageNumber) {
height = pageOriginalHeight(pageNumber);
} }
zoomRatio = width / height const zoomRatio = width / height;
if (readerFrameRatio() > zoomRatio) { if (readerFrameRatio() > zoomRatio)
{
// Frame wider than zoom => scale so heights are the same, offset on x // Frame wider than zoom => scale so heights are the same, offset on x
var zoomToFrameScaleFactor = READER_CONTENT_FRAME.clientHeight / height const zoomToFrameScaleFactor = READER_CONTENT_FRAME.clientHeight / height;
READER_PAGES.style.transform = "scale(" + zoomToFrameScaleFactor + ")" + READER_PAGES.style.transform READER_PAGES.style.transform = "scale(" + zoomToFrameScaleFactor + ")" + READER_PAGES.style.transform;
var scaledWidth = width * zoomToFrameScaleFactor const scaledWidth = width * zoomToFrameScaleFactor;
var offset = (READER_CONTENT_FRAME.clientWidth - scaledWidth) / 2 const offset = (READER_CONTENT_FRAME.clientWidth - scaledWidth) / 2;
READER_PAGES.style.transform = "translateX(" + offset + "px)" + READER_PAGES.style.transform READER_PAGES.style.transform = "translateX(" + offset + "px)" + READER_PAGES.style.transform;
updateFocusByWidth(scaledWidth) updateFocusByWidth(scaledWidth);
} else { }
else
{
// Frame narower than zoom => scale so left/right match, offset on y // Frame narower than zoom => scale so left/right match, offset on y
var zoomToFrameScaleFactor = READER_CONTENT_FRAME.clientWidth / width const zoomToFrameScaleFactor = READER_CONTENT_FRAME.clientWidth / width;
READER_PAGES.style.transform = "scale(" + zoomToFrameScaleFactor + ")" + READER_PAGES.style.transform READER_PAGES.style.transform = "scale(" + zoomToFrameScaleFactor + ")" + READER_PAGES.style.transform;
var scaledHeight = height * zoomToFrameScaleFactor const scaledHeight = height * zoomToFrameScaleFactor;
var offset = (READER_CONTENT_FRAME.clientHeight - scaledHeight) / 2 const offset = (READER_CONTENT_FRAME.clientHeight - scaledHeight) / 2;
READER_PAGES.style.transform = "translateY(" + offset + "px)" + READER_PAGES.style.transform READER_PAGES.style.transform = "translateY(" + offset + "px)" + READER_PAGES.style.transform;
updateFocusByHeight(scaledHeight) updateFocusByHeight(scaledHeight);
} }
// Use values before global offset / scale // Use values before global offset / scale
CURRENT_PAGE = pageNumber CURRENT_PAGE = pageNumber;
CURRENT_WIDTH = o_width CURRENT_WIDTH = oWidth;
CURRENT_HEIGHT = o_height CURRENT_HEIGHT = oHeight;
CURRENT_X = o_posx CURRENT_X = oPosx;
CURRENT_Y = o_posy CURRENT_Y = oPosy;
} }
function refreshReaderDisplay() { function refreshReaderDisplay()
moveReaderDisplayToArea(CURRENT_PAGE, CURRENT_WIDTH, CURRENT_HEIGHT, CURRENT_X, CURRENT_Y) {
moveReaderDisplayToArea(CURRENT_PAGE, CURRENT_WIDTH, CURRENT_HEIGHT, CURRENT_X, CURRENT_Y);
} }
function moveReaderDisplayToPage(pageNumber) { function moveReaderDisplayToPage(pageNumber)
moveReaderDisplayToArea(pageNumber, 0, 0, 0, 0) {
moveReaderDisplayToArea(pageNumber, 0, 0, 0, 0);
} }
function moveReaderDisplayToZoom(index) { function moveReaderDisplayToZoom(index)
{
moveReaderDisplayToArea(PAGES_ZOOMS[index][0], PAGES_ZOOMS[index][1], PAGES_ZOOMS[index][2], PAGES_ZOOMS[index][3], PAGES_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;
CURRENT_ZOOM = index
} }
function updateFocusByWidth(width){ function updateFocusByWidth(width)
FOCUS_OVERLAY_WIDTH.style.width = (width / READER_CONTENT_FRAME.clientWidth * 100) + "%" {
FOCUS_OVERLAY_HEIGHT.style.height = "100%" FOCUS_OVERLAY_WIDTH.style.width = (width / READER_CONTENT_FRAME.clientWidth * 100) + "%";
FOCUS_OVERLAY_HEIGHT.style.height = "100%";
} }
function updateFocusByHeight(height){ function updateFocusByHeight(height)
FOCUS_OVERLAY_WIDTH.style.width = "100%" {
FOCUS_OVERLAY_HEIGHT.style.height = (height / READER_CONTENT_FRAME.clientHeight * 100) + "%" FOCUS_OVERLAY_WIDTH.style.width = "100%";
FOCUS_OVERLAY_HEIGHT.style.height = (height / READER_CONTENT_FRAME.clientHeight * 100) + "%";
} }
function toggleViewMode() { function toggleViewMode()
if (IS_PAGE_MODE){ {
if (CURRENT_ZOOM != null){ if (IS_PAGE_MODE)
moveReaderDisplayToZoom(CURRENT_ZOOM) {
} else { if (CURRENT_ZOOM !== null)
moveReaderDisplayToZoom(getFirstZoomOfPage(CURRENT_PAGE)) {
} moveReaderDisplayToZoom(CURRENT_ZOOM);
IS_PAGE_MODE = false
} else {
moveReaderDisplayToPage(CURRENT_PAGE)
IS_PAGE_MODE = true
} }
updateProgressBar() else
{
moveReaderDisplayToZoom(getFirstZoomOfPage(CURRENT_PAGE));
} }
function moveReader(to_next) { IS_PAGE_MODE = false;
if (IS_PAGE_MODE){
if (to_next && CURRENT_PAGE < getPagesCount()) {
moveReaderDisplayToPage(CURRENT_PAGE + 1)
CURRENT_ZOOM = null
} }
else if (!to_next && CURRENT_PAGE > 1) { else
moveReaderDisplayToPage(CURRENT_PAGE - 1) {
CURRENT_ZOOM = null moveReaderDisplayToPage(CURRENT_PAGE);
IS_PAGE_MODE = true;
} }
} else { updateProgressBar();
if (to_next && CURRENT_ZOOM < PAGES_ZOOMS.length - 1) {
moveReaderDisplayToZoom(CURRENT_ZOOM + 1)
} }
else if (!to_next && CURRENT_ZOOM > 0) { function moveReader(toNext)
moveReaderDisplayToZoom(CURRENT_ZOOM - 1) {
if (IS_PAGE_MODE)
{
if (toNext && CURRENT_PAGE < getPagesCount())
{
moveReaderDisplayToPage(CURRENT_PAGE + 1);
CURRENT_ZOOM = null;
}
else if (!toNext && CURRENT_PAGE > 1)
{
moveReaderDisplayToPage(CURRENT_PAGE - 1);
CURRENT_ZOOM = null;
} }
} }
updateProgressBar() else
{
if (toNext && CURRENT_ZOOM < PAGES_ZOOMS.length - 1)
{
moveReaderDisplayToZoom(CURRENT_ZOOM + 1);
}
else if (!toNext && CURRENT_ZOOM > 0)
{
moveReaderDisplayToZoom(CURRENT_ZOOM - 1);
}
}
updateProgressBar();
} }
@ -425,69 +501,89 @@ function moveReader(to_next) {
// CALLBACKS // CALLBACKS
// ============= // =============
function handleKeyPress(key){ function handleKeyPress(key)
{
if (key == MOVE_NEXT) { if (key === MOVE_NEXT)
moveReader(true) {
moveReader(true);
} }
else if (key == MOVE_BACK) { else if (key === MOVE_BACK)
moveReader(false) {
moveReader(false);
} }
else if (key.toUpperCase() == TOGGLE_FULLSCREEN){ else if (key.toUpperCase() === TOGGLE_FULLSCREEN)
if (document.fullscreenElement == null){ {
if (document.fullscreenElement === null)
{
READER_FRAME.requestFullscreen(); READER_FRAME.requestFullscreen();
} else { }
else
{
document.exitFullscreen(); document.exitFullscreen();
} }
} }
else if (key.toUpperCase() == TOGGLE_PROGRESSBAR){ else if (key.toUpperCase() === TOGGLE_PROGRESSBAR)
if (PROGRESS_BAR_CONTAINER.hidden == true) { {
PROGRESS_BAR_CONTAINER.hidden = false if (PROGRESS_BAR_CONTAINER.hidden === true)
} else { {
PROGRESS_BAR_CONTAINER.hidden = true PROGRESS_BAR_CONTAINER.hidden = false;
} }
else
{
PROGRESS_BAR_CONTAINER.hidden = true;
}
refreshReaderDisplay(); refreshReaderDisplay();
} }
else if (key.toUpperCase() == TOGGLE_VIEW_MODE) { else if (key.toUpperCase() === TOGGLE_VIEW_MODE)
toggleViewMode() {
toggleViewMode();
}
} }
} function handleMouseWhell(event)
{
function handleMouseWhell(event){
// Only handle scroll event if the target is the nav controls // Only handle scroll event if the target is the nav controls
// to avoid preventing page scrolling. // to avoid preventing page scrolling.
// Do disable page scrolling when we do prev/next, though // Do disable page scrolling when we do prev/next, though
if (! READER_FRAME.contains(event.target)){ if (! READER_FRAME.contains(event.target))
return {
return;
} }
event.preventDefault() event.preventDefault();
event.stopPropagation() event.stopPropagation();
if (MOUSEWHELL_WAIT){ if (MOUSEWHELL_WAIT)
return {
} else { return;
MOUSEWHELL_WAIT = true
setTimeout(() => {
MOUSEWHELL_WAIT = false
}, MOUSEWHELL_MIN_DELAY)
} }
if (event.deltaY > 0) { else
moveReader(true, false) {
MOUSEWHELL_WAIT = true;
setTimeout(
() => { MOUSEWHELL_WAIT = false; },
MOUSEWHELL_MIN_DELAY
);
} }
else { if (event.deltaY > 0)
moveReader(false, false) {
moveReader(true, false);
}
else
{
moveReader(false, false);
} }
} }
@ -495,19 +591,26 @@ function handleMouseWhell(event){
// INIT // INIT
// ====== // ======
window.addEventListener("load", (event) => { window.addEventListener(
VERSION_DISPLAY.innerText = VERSION_DISPLAY.innerText.replace("Unknown version", MELPOMENE_VERSION) "load",
initReader() (event) => { initReader() }
}); );
addEventListener("resize", (event) => { addEventListener(
refreshReaderDisplay(); "resize",
}); (event) => { refreshReaderDisplay() }
);
addEventListener("keydown", (event) => { addEventListener(
"keydown",
(event) =>
{
handleKeyPress(event.key, event.shiftKey) handleKeyPress(event.key, event.shiftKey)
}); }
);
addEventListener("wheel", (event) => { addEventListener(
handleMouseWhell(event) "wheel",
}, { passive:false }); (event) => { handleMouseWhell(event) },
{ passive:false }
);