From c6f88e8d85658cba6e782285670931e963ba9906 Mon Sep 17 00:00:00 2001 From: caribaud Date: Sun, 4 Jun 2023 21:38:56 +0200 Subject: [PATCH 1/5] fix trailling whitespace --- melpomene.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/melpomene.js b/melpomene.js index 8689592..87a73ab 100644 --- a/melpomene.js +++ b/melpomene.js @@ -231,7 +231,7 @@ function previousPagesWidth(pageNumber) function initReader() { VERSION_DISPLAY.innerText = VERSION_DISPLAY.innerText.replace("Unknown version", MELPOMENE_VERSION); - + loadZoomsFromImgTagsIfRequired(); moveReaderDisplayToZoom(0); @@ -246,7 +246,7 @@ function initReader() entry.target.style.opacity = 1; entry.target.style.visibility = "visible"; } - + else { entry.target.style.opacity = 0; @@ -307,7 +307,7 @@ function moveReaderDisplayToArea(pageNumber, oWidth, oHeight, oPosx, oPosy) width = width + posx; posx = 0; } - + if ((posx + width) > pageOriginalWidth(pageNumber)) { width = pageOriginalWidth(pageNumber) - posx; @@ -319,7 +319,7 @@ function moveReaderDisplayToArea(pageNumber, oWidth, oHeight, oPosx, oPosy) height = height + posy; posy = 0; } - + if ((posy + height) > pageOriginalHeight(pageNumber)) { height = pageOriginalHeight(pageNumber) - posy; @@ -359,7 +359,7 @@ function moveReaderDisplayToArea(pageNumber, oWidth, oHeight, oPosx, oPosy) updateFocusByWidth(scaledWidth); } - + else { // Frame narower than zoom => scale so left/right match, offset on y @@ -420,15 +420,15 @@ function toggleViewMode() { moveReaderDisplayToZoom(CURRENT_ZOOM); } - + else { moveReaderDisplayToZoom(getFirstZoomOfPage(CURRENT_PAGE)); } - + IS_PAGE_MODE = false; } - + else { moveReaderDisplayToPage(CURRENT_PAGE); @@ -454,7 +454,7 @@ function moveReader(toNext) CURRENT_ZOOM = null; } } - + else { if (toNext && CURRENT_ZOOM < PAGES_ZOOMS.length - 1) @@ -494,7 +494,7 @@ function handleKeyPress(key) { READER_FRAME.requestFullscreen(); } - + else { document.exitFullscreen(); @@ -507,12 +507,12 @@ function handleKeyPress(key) { PROGRESS_BAR_CONTAINER.hidden = false; } - + else { PROGRESS_BAR_CONTAINER.hidden = true; } - + refreshReaderDisplay(); } @@ -541,7 +541,7 @@ function handleMouseWhell(event) { return; } - + else { MOUSEWHELL_WAIT = true; From 7299157521c9de5c2bf8b8ad3ef44b50499e1ef3 Mon Sep 17 00:00:00 2001 From: caribaud Date: Mon, 5 Jun 2023 00:16:02 +0200 Subject: [PATCH 2/5] new round of fixing eslint findings --- eslint/eslintrc.json | 4 +++- melpomene.js | 44 ++++++++++++++++++++++---------------------- 2 files changed, 25 insertions(+), 23 deletions(-) diff --git a/eslint/eslintrc.json b/eslint/eslintrc.json index 5fd6db2..92436b8 100644 --- a/eslint/eslintrc.json +++ b/eslint/eslintrc.json @@ -31,6 +31,8 @@ "function-paren-newline": ["warn", "consistent"], "no-magic-numbers": ["error", {"ignore": [0,1,2,100]}], "quote-props": ["warn", "as-needed"], - "no-unused-vars": ["error", {"argsIgnorePattern": "^_"}] + "no-unused-vars": ["error", {"argsIgnorePattern": "^_"}], + "max-len" : ["warn", {"code": 88}], + "capitalized-comments": "off" } } diff --git a/melpomene.js b/melpomene.js index 87a73ab..be4f664 100644 --- a/melpomene.js +++ b/melpomene.js @@ -327,10 +327,10 @@ function moveReaderDisplayToArea(pageNumber, oWidth, oHeight, oPosx, oPosy) // 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 - 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 if (width === 0) @@ -350,12 +350,12 @@ function moveReaderDisplayToArea(pageNumber, oWidth, oHeight, oPosx, oPosy) // Frame wider than zoom => scale so heights are the same, offset on x 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}`; const scaledWidth = width * zoomToFrameScaleFactor; 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); } @@ -365,12 +365,12 @@ function moveReaderDisplayToArea(pageNumber, oWidth, oHeight, oPosx, oPosy) // Frame narower than zoom => scale so left/right match, offset on y 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}`; const scaledHeight = height * zoomToFrameScaleFactor; 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); } @@ -402,28 +402,28 @@ function moveReaderDisplayToZoom(index) function updateFocusByWidth(width) { - FOCUS_OVERLAY_WIDTH.style.width = (width / READER_CONTENT_FRAME.clientWidth * 100) + "%"; + 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) + "%"; + FOCUS_OVERLAY_HEIGHT.style.height = `${height / READER_CONTENT_FRAME.clientHeight * 100}%`; } function toggleViewMode() { if (IS_PAGE_MODE) { - if (CURRENT_ZOOM !== null) + if (CURRENT_ZOOM === null) { - moveReaderDisplayToZoom(CURRENT_ZOOM); + moveReaderDisplayToZoom(getFirstZoomOfPage(CURRENT_PAGE)); } else { - moveReaderDisplayToZoom(getFirstZoomOfPage(CURRENT_PAGE)); + moveReaderDisplayToZoom(CURRENT_ZOOM); } IS_PAGE_MODE = false; @@ -453,8 +453,11 @@ function moveReader(toNext) moveReaderDisplayToPage(CURRENT_PAGE - 1); CURRENT_ZOOM = null; } + + updateProgressBar(); } + // Zoom mode else { if (toNext && CURRENT_ZOOM < PAGES_ZOOMS.length - 1) @@ -466,9 +469,9 @@ function moveReader(toNext) { moveReaderDisplayToZoom(CURRENT_ZOOM - 1); } - } - updateProgressBar(); + updateProgressBar(); + } } @@ -529,7 +532,7 @@ function handleMouseWhell(event) // Do disable page scrolling when we do prev/next, though - if (! READER_FRAME.contains(event.target)) + if (!READER_FRAME.contains(event.target)) { return; } @@ -542,14 +545,11 @@ function handleMouseWhell(event) return; } - else - { - MOUSEWHELL_WAIT = true; - setTimeout( - () => { MOUSEWHELL_WAIT = false; }, - MOUSEWHELL_MIN_DELAY - ); - } + MOUSEWHELL_WAIT = true; + setTimeout( + () => { MOUSEWHELL_WAIT = false; }, + MOUSEWHELL_MIN_DELAY + ); if (event.deltaY > 0) { From f1cfb326d530f40c10bfe2117b4430d25dad689e Mon Sep 17 00:00:00 2001 From: caribaud Date: Mon, 5 Jun 2023 00:17:23 +0200 Subject: [PATCH 3/5] Fix declaration order --- melpomene.js | 239 +++++++++++++++++++++++++-------------------------- 1 file changed, 119 insertions(+), 120 deletions(-) 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 From 5a1987f77b1e573178b2f250359c3078d3d03346 Mon Sep 17 00:00:00 2001 From: caribaud Date: Mon, 5 Jun 2023 00:20:32 +0200 Subject: [PATCH 4/5] single quote -> double quote --- melpomene.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/melpomene.js b/melpomene.js index d76678f..4ad7a55 100644 --- a/melpomene.js +++ b/melpomene.js @@ -45,7 +45,7 @@ const VERSION_DISPLAY = document.getElementById("melpomene-version"); var PAGES_ZOOMS; // 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; } @@ -138,7 +138,7 @@ function globalZoomOffsetX() { 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; @@ -148,7 +148,7 @@ function globalZoomOffsetY() { 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; @@ -166,11 +166,11 @@ function loadZoomsFromImgTagsIfRequired() { 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) const zooms = zoomsRawData.split(";").map( zoom => [idx + 1].concat( - zoom.split(',').map( + zoom.split(",").map( value => parseFloat(value) ) ) From b12cf2c4f1be477c321498ace524bcd141b17533 Mon Sep 17 00:00:00 2001 From: caribaud Date: Mon, 5 Jun 2023 00:40:25 +0200 Subject: [PATCH 5/5] new eslint fixes run --- eslint/eslintrc.json | 3 ++- melpomene.js | 55 +++++++++++++++++++++++++++++--------------- 2 files changed, 39 insertions(+), 19 deletions(-) diff --git a/eslint/eslintrc.json b/eslint/eslintrc.json index 92436b8..77aaba5 100644 --- a/eslint/eslintrc.json +++ b/eslint/eslintrc.json @@ -33,6 +33,7 @@ "quote-props": ["warn", "as-needed"], "no-unused-vars": ["error", {"argsIgnorePattern": "^_"}], "max-len" : ["warn", {"code": 88}], - "capitalized-comments": "off" + "capitalized-comments": "off", + "operator-linebreak": ["warn", "before"] } } diff --git a/melpomene.js b/melpomene.js index 4ad7a55..8572c8c 100644 --- a/melpomene.js +++ b/melpomene.js @@ -91,11 +91,11 @@ function pageMaxHeight() { let maxHeight = 0; - for (let i = 0; i < READER_PAGES.children.length; i += 1) + for (let pageIdx = 0; pageIdx < READER_PAGES.children.length; pageIdx += 1) { - if(READER_PAGES.children[i].naturalHeight > maxHeight) + if (READER_PAGES.children[pageIdx].naturalHeight > maxHeight) { - maxHeight = READER_PAGES.children[i].naturalHeight; + maxHeight = READER_PAGES.children[pageIdx].naturalHeight; } } @@ -104,7 +104,7 @@ function pageMaxHeight() function pageVerticalOffset(pageNumber) { - return ( pageMaxHeight() - pageOriginalHeight(pageNumber) ) / 2; + return (pageMaxHeight() - pageOriginalHeight(pageNumber)) / 2; } function previousPagesWidth(pageNumber) @@ -169,9 +169,9 @@ function loadZoomsFromImgTagsIfRequired() // ";" separates zooms data, "," separates values // We add the page number (adding 1 because of indexing) const zooms = zoomsRawData.split(";").map( - zoom => [idx + 1].concat( + (zoom) => [idx + 1].concat( zoom.split(",").map( - value => parseFloat(value) + (value) => parseFloat(value) ) ) ); @@ -190,16 +190,18 @@ function getFirstZoomOfPage(pageNumber) return zoomIdx; } } + + return undefined; } function getZoomCountForPage(pageNumber) { - return PAGES_ZOOMS.filter(zoom => zoom[0] === pageNumber).length; + return PAGES_ZOOMS.filter((zoom) => zoom[0] === pageNumber).length; } function getCurrentZoomIndexForPage() { - const previousZoomsCount = PAGES_ZOOMS.filter(zoom => zoom[0] < CURRENT_PAGE).length; + const previousZoomsCount = PAGES_ZOOMS.filter((zoom) => zoom[0] < CURRENT_PAGE).length; return CURRENT_ZOOM - previousZoomsCount + 1; } @@ -214,14 +216,16 @@ function getReadingProgressPercent() const progressPerZoom = progressPerPage / getZoomCountForPage(CURRENT_PAGE); - const readingProgress = (CURRENT_PAGE - 1) * progressPerPage + getCurrentZoomIndexForPage() * progressPerZoom; + + let readingProgress = (CURRENT_PAGE - 1) * progressPerPage; + readingProgress += getCurrentZoomIndexForPage() * progressPerZoom; return 100 * readingProgress; } function updateProgressBar() { - PROGRESS_BAR.style.width = getReadingProgressPercent() + "%"; + PROGRESS_BAR.style.width = `${getReadingProgressPercent()}%`; } // ========= @@ -265,7 +269,7 @@ function moveReaderDisplayToArea(pageNumber, oWidth, oHeight, oPosx, oPosy) posx = 0; } - if ((posx + width) > pageOriginalWidth(pageNumber)) + if (posx + width > pageOriginalWidth(pageNumber)) { width = pageOriginalWidth(pageNumber) - posx; } @@ -277,7 +281,7 @@ function moveReaderDisplayToArea(pageNumber, oWidth, oHeight, oPosx, oPosy) posy = 0; } - if ((posy + height) > pageOriginalHeight(pageNumber)) + if (posy + height > pageOriginalHeight(pageNumber)) { height = pageOriginalHeight(pageNumber) - posy; } @@ -342,7 +346,13 @@ function moveReaderDisplayToArea(pageNumber, oWidth, oHeight, oPosx, oPosy) 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) @@ -352,7 +362,13 @@ function moveReaderDisplayToPage(pageNumber) 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; } @@ -445,12 +461,15 @@ function initReader() } }); }, - { root: READER_CONTENT_FRAME, rootMargin: "-10px" } + { + root: READER_CONTENT_FRAME, + rootMargin: "-10px" + } ); - for (let i = 0; i < READER_PAGES.children.length; i += 1) + for (let pageIndex = 0; pageIndex < READER_PAGES.children.length; pageIndex += 1) { - const img = READER_PAGES.children[i]; + const img = READER_PAGES.children[pageIndex]; visibilityObserver.observe(img); PROGRESS_BAR_PAGES.appendChild(document.createElement("div")); @@ -459,7 +478,7 @@ function initReader() READER_PAGES.style.display = "flex"; setTimeout( - () => { READER_PAGES.hidden = false }, + () => { READER_PAGES.hidden = false; }, "300" );