diff --git a/melpomene.js b/melpomene.js index be4f664..d76678f 100644 --- a/melpomene.js +++ b/melpomene.js @@ -64,6 +64,63 @@ var MOUSEWHELL_WAIT = false; // UTILITIES // ============= +// Dimensions utilites +// ------------------- + +function getPagesCount() +{ + return READER_PAGES.childElementCount; +} + +function pageOriginalHeight(pageNumber) +{ + return READER_PAGES.children[pageNumber - 1].naturalHeight; +} + +function pageOriginalWidth(pageNumber) +{ + return READER_PAGES.children[pageNumber - 1].naturalWidth; +} + +function readerFrameRatio() +{ + return READER_CONTENT_FRAME.clientWidth / READER_CONTENT_FRAME.clientHeight; +} + +function pageMaxHeight() +{ + let maxHeight = 0; + + for (let i = 0; i < READER_PAGES.children.length; i += 1) + { + if(READER_PAGES.children[i].naturalHeight > maxHeight) + { + maxHeight = READER_PAGES.children[i].naturalHeight; + } + } + + return maxHeight; +} + +function pageVerticalOffset(pageNumber) +{ + return ( pageMaxHeight() - pageOriginalHeight(pageNumber) ) / 2; +} + +function previousPagesWidth(pageNumber) +{ + // The width of all previous pages relative to the provided index + + let totalWidth = 0; + + for (let idx = 0; idx < pageNumber - 1; idx += 1) + { + totalWidth += READER_PAGES.children[idx].naturalWidth; + } + + return totalWidth; +} + // Zooms utilites // -------------- @@ -167,121 +224,21 @@ function updateProgressBar() PROGRESS_BAR.style.width = getReadingProgressPercent() + "%"; } -// Dimensions utilites -// ------------------- - -function getPagesCount() -{ - return READER_PAGES.childElementCount; -} - -function pageOriginalHeight(pageNumber) -{ - return READER_PAGES.children[pageNumber - 1].naturalHeight; -} - -function pageOriginalWidth(pageNumber) -{ - return READER_PAGES.children[pageNumber - 1].naturalWidth; -} - -function readerFrameRatio() -{ - return READER_CONTENT_FRAME.clientWidth / READER_CONTENT_FRAME.clientHeight; -} - -function pageMaxHeight() -{ - let maxHeight = 0; - - for (let i = 0; i < READER_PAGES.children.length; i += 1) - { - if(READER_PAGES.children[i].naturalHeight > maxHeight) - { - maxHeight = READER_PAGES.children[i].naturalHeight; - } - } - - return maxHeight; -} - -function pageVerticalOffset(pageNumber) -{ - return ( pageMaxHeight() - pageOriginalHeight(pageNumber) ) / 2; -} - -function previousPagesWidth(pageNumber) -{ - // The width of all previous pages relative to the provided index - - let totalWidth = 0; - - for (let idx = 0; idx < pageNumber - 1; idx += 1) - { - totalWidth += READER_PAGES.children[idx].naturalWidth; - } - - return totalWidth; -} - // ========= // ACTIONS // ========= -function initReader() +function updateFocusByWidth(width) { - VERSION_DISPLAY.innerText = VERSION_DISPLAY.innerText.replace("Unknown version", MELPOMENE_VERSION); - - loadZoomsFromImgTagsIfRequired(); - moveReaderDisplayToZoom(0); - - // Smoothly show pictures when they intersect with the viewport - const visibilityObserver = new IntersectionObserver( - (entries, _observer) => - { - entries.forEach((entry) => - { - if (entry.isIntersecting) - { - 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" } - ); - - for (let i = 0; i < READER_PAGES.children.length; i += 1) - { - const img = READER_PAGES.children[i]; - visibilityObserver.observe(img); - - PROGRESS_BAR_PAGES.appendChild(document.createElement("div")); - } - - READER_PAGES.style.display = "flex"; - - setTimeout( - () => { READER_PAGES.hidden = false }, - "300" - ); - - setTimeout( - () => - { - HELP_CONTROLS.style.opacity = null; - HELP_CONTROLS.style.transform = null; - }, - DELAY_BEFORE_HIDDING_CONTROLS - ); + FOCUS_OVERLAY_WIDTH.style.width = `${width / READER_CONTENT_FRAME.clientWidth * 100}%`; + FOCUS_OVERLAY_HEIGHT.style.height = "100%"; } +function updateFocusByHeight(height) +{ + FOCUS_OVERLAY_WIDTH.style.width = "100%"; + FOCUS_OVERLAY_HEIGHT.style.height = `${height / READER_CONTENT_FRAME.clientHeight * 100}%`; +} function moveReaderDisplayToArea(pageNumber, oWidth, oHeight, oPosx, oPosy) { @@ -400,18 +357,6 @@ function moveReaderDisplayToZoom(index) CURRENT_ZOOM = index; } -function updateFocusByWidth(width) -{ - FOCUS_OVERLAY_WIDTH.style.width = `${width / READER_CONTENT_FRAME.clientWidth * 100}%`; - FOCUS_OVERLAY_HEIGHT.style.height = "100%"; -} - -function updateFocusByHeight(height) -{ - FOCUS_OVERLAY_WIDTH.style.width = "100%"; - FOCUS_OVERLAY_HEIGHT.style.height = `${height / READER_CONTENT_FRAME.clientHeight * 100}%`; -} - function toggleViewMode() { if (IS_PAGE_MODE) @@ -474,6 +419,60 @@ function moveReader(toNext) } } +function initReader() +{ + VERSION_DISPLAY.innerText = VERSION_DISPLAY.innerText.replace("Unknown version", MELPOMENE_VERSION); + + loadZoomsFromImgTagsIfRequired(); + moveReaderDisplayToZoom(0); + + // Smoothly show pictures when they intersect with the viewport + const visibilityObserver = new IntersectionObserver( + (entries, _observer) => + { + entries.forEach((entry) => + { + if (entry.isIntersecting) + { + 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" } + ); + + for (let i = 0; i < READER_PAGES.children.length; i += 1) + { + const img = READER_PAGES.children[i]; + visibilityObserver.observe(img); + + PROGRESS_BAR_PAGES.appendChild(document.createElement("div")); + } + + READER_PAGES.style.display = "flex"; + + setTimeout( + () => { READER_PAGES.hidden = false }, + "300" + ); + + setTimeout( + () => + { + HELP_CONTROLS.style.opacity = null; + HELP_CONTROLS.style.transform = null; + }, + DELAY_BEFORE_HIDDING_CONTROLS + ); +} + // ============= // CALLBACKS