New: Option to show only one page at a time in Vertical Reader

Author: ollm

CHANGELOG.md

@@ -19,7 +19,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Multiple poster/folder sizes [`c64222a`](https://github.com/ollm/OpenComic/commit/c64222a1b697f6de3f64f0ed79f1a7f293337bcf)
 - Implement header scrolling functionality [`cf5615e`](https://github.com/ollm/OpenComic/commit/cf5615eee312dcc4e1239528866bfcbfb86e0b23)
 - Clear cache for individual files [`45e2e99`](https://github.com/ollm/OpenComic/commit/45e2e99114c031f64c3b4ba218f3412273a7a169)
-- Add support in server settings for show in library the files in subfolders
+- Add support in server settings for show in library the files in subfolders [`e2fa97a`](https://github.com/ollm/OpenComic/commit/e2fa97aea24424499910eb90843150f93e6e0c12)
+- Option to show only one page at a time in Vertical Reader
 
 ##### 🐛 Bug Fixes
 

languages/ca.json

@@ -116,6 +116,7 @@
 			"adjustToWidth": "Ajustar a l'ample",
 			"notEnlargeMoreThanOriginalSize": "No ampliar més de la seva mida original",
 			"rotateHorizontals": "Rotar les horitzontals",
+			"forceSinglePage": "Mostra només una pàgina al mateix temps",
 			"margin": "Marge",
 			"marginHorizontal": "Marge horitzontal",
 			"marginVertical": "Marge vertical",

languages/en.json

@@ -116,6 +116,7 @@
 			"adjustToWidth": "Adjust to width",
 			"notEnlargeMoreThanOriginalSize": "Do not enlarge more than its original size",
 			"rotateHorizontals": "Rotate horizontals",
+			"forceSinglePage": "Show only one page at a time",
 			"margin": "Margin",
 			"marginHorizontal": "Horizontal margin",
 			"marginVertical": "Vertical margin",

languages/es.json

@@ -116,6 +116,7 @@
 			"adjustToWidth": "Ajustar a lo ancho",
 			"notEnlargeMoreThanOriginalSize": "No ampliar más de su tamaño original",
 			"rotateHorizontals": "Rotar las horizontales",
+			"forceSinglePage": "Mostrar sólo una página a la vez",
 			"margin": "Margen",
 			"marginHorizontal": "Margen horizontal",
 			"marginVertical": "Margen vertical",

scripts/reading.js

@@ -295,6 +295,8 @@ function disposeImages(data = false)
 	let marginVertical = _margin.top;
 	let marginHorizontalsHorizontal = readingHorizontalsMargin(data).left;
 
+	const forceSinglePage = (_config.readingForceSinglePage && !_config.readingWebtoon) ? true : false;
+
 	let contentRight = template._contentRight();
 	let rect = contentRight.firstElementChild.getBoundingClientRect();
 
@@ -384,7 +386,7 @@ function disposeImages(data = false)
 				marginTop0 = marginTop1 = contentHeight / 2 - imageHeight / 2;
 			}
 
-			if(readingViewIs('scroll'))
+			if(readingViewIs('scroll') && !forceSinglePage)
 				marginTop0 = marginTop1 = marginVertical;
 
 			let imgHeight0 = (clipVertical > 0 ? (imageHeight0 / (1 - clipVertical)) : imageHeight0);
@@ -570,7 +572,7 @@ function disposeImages(data = false)
 				}
 			}
 
-			if(readingViewIs('scroll'))
+			if(readingViewIs('scroll') && !forceSinglePage)
 				marginTop = marginVertical;
 
 			let imgHeight = (clipVertical > 0 ? (imageHeight / (1 - clipVertical)) : imageHeight);
@@ -3076,9 +3078,9 @@ function changePagesView(mode, value, save)
 		dom.query('.reading-view-'+value).addClass('active');
 
 		if(value != 'scroll')
-			template.globalElement('.reading-ajust-to-width').addClass('disable-pointer');
+			template.globalElement('.reading-ajust-to-width, .reading-force-single-page').addClass('disable-pointer');
 		else
-			template.globalElement('.reading-ajust-to-width').removeClass('disable-pointer');
+			template.globalElement('.reading-ajust-to-width, .reading-force-single-page').removeClass('disable-pointer');
 
 		if(readingIsEbook) handlebarsContext.loading = true;
 		template.loadContentRight('reading.content.right.html', true);
@@ -3151,12 +3153,12 @@ function changePagesView(mode, value, save)
 
 		if(value)
 		{
-			template.globalElement('.reading-view, .reading-reading-manga, .reading-double-page, .reading-do-not-apply-to-horizontals, .reading-blank-page, .reading-ajust-to-width, .reading-not-enlarge-more-than-original-size, .reading-margin-vertical').addClass('disable-pointer');
+			template.globalElement('.reading-view, .reading-reading-manga, .reading-double-page, .reading-do-not-apply-to-horizontals, .reading-blank-page, .reading-ajust-to-width, .reading-not-enlarge-more-than-original-size, .reading-margin-vertical, .reading-force-single-page').addClass('disable-pointer');
 		}
 		else
 		{
 			if(_config.readingView == 'scroll')
-				template.globalElement('.reading-ajust-to-width').removeClass('disable-pointer');
+				template.globalElement('.reading-ajust-to-width, .reading-force-single-page').removeClass('disable-pointer');
 
 			if(_config.readingDoublePage)
 				template.globalElement('.reading-do-not-apply-to-horizontals, .reading-blank-page').removeClass('disable-pointer');
@@ -3279,6 +3281,17 @@ function changePagesView(mode, value, save)
 
 		read(readingCurrentPath, imageIndex, false, readingIsCanvas, readingIsEbook);
 	}
+	else if(mode == 20) // Force show single page in scroll mode
+	{
+		updateReadingPagesConfig('readingForceSinglePage', value);
+
+		disposeImages();
+		calculateView();
+		stayInLine();
+
+		render.resized(readingDoublePage());
+		// updateEbook(true);
+	}
 }
 
 function change(key, value)

scripts/storage.js

@@ -1,4 +1,4 @@
-var changes = 95; // Update this if readingPagesConfig is updated
+var changes = 96; // Update this if readingPagesConfig is updated
 
 var readingPagesConfig = {
 	readingConfigName: '',
@@ -15,6 +15,7 @@ var readingPagesConfig = {
 	readingViewAdjustToWidth: false,
 	readingNotEnlargeMoreThanOriginalSize: true,
 	readingRotateHorizontals: false,
+	readingForceSinglePage: false,
 	readingMargin: {
 		margin: 16,
 		top: 16,

templates/reading.elements.menus.pages.html

@@ -370,6 +370,13 @@
 					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
 				</div>
 			</div>
+			<div class="menu-simple-text reading-force-single-page gamepad-item{{#if _config.readingWebtoon}} disable-pointer{{else compare _config.readingView '!=' 'scroll'}} disable-pointer{{/if}}">
+				{{language.reading.pages.forceSinglePage}}
+				<div class="switch{{#if _config.readingForceSinglePage}} a{{/if}}" on="reading.changePagesView(20, true, false)" off="reading.changePagesView(20, false, false)">
+					<div></div>
+					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
+				</div>
+			</div>
 			<div class="simple-slider gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
 				<div class="simple-slider-text">{{language.reading.pages.marginHorizontal}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="16">undo</i><span>{{_config.readingMargin.left}}</span>px</div></div>
 				<div class="range">