New: Global zoom in the slide reading

ollm · Nov 23, 2023 · da36774 · da36774
1 parent eb3249a
commit da36774
Show file tree

Hide file tree

Showing 19 changed files with 70 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Option to open folder/file directly in first image or in continue reading [`6a20160`](https://github.com/ollm/OpenComic/commit/6a20160bcd96291c14d16d025baf7aef7ebe13c9)
 - Change page using an input range [`527999c`](https://github.com/ollm/OpenComic/commit/527999ccacf16beea2387f7eef2f6cb7648fb2d5)
 - Go to page writing it in a dialog [`2d7a028`](https://github.com/ollm/OpenComic/commit/2d7a02853d27752094555275e77cdc7ad2ca3771)
+- Global zoom in the slide reading
 
 ##### 🐛 Bug Fixes
 

diff --git a/languages/ca.json b/languages/ca.json
@@ -169,10 +169,11 @@
 		"reading": {
 			"main": "Preferències de lectura",
 			"maxMargin": "Marge horitzontal i vertical màxim",
-			"globalZoom": "Aplica un zoom global en comptes d'imatge a imatge (Només en lectura vertical)",
+			"globalZoom": "Zoom global en comptes d'imatge a imatge (Lectura vertical)",
+			"globalZoomSlide": "Zoom global en comptes d'imatge a imatge (Lectura horitzontal)",
 			"moveZoomWithMouse": "Moure el zoom mitjançant el cursor (Desactiva moure mitjançant arrossegar i deixar anar)",
 			"scrollWithMouse": "Realitzar desplaçament movent el cursor per les vores de la pantalla (Desactiva desplaçament mitjançant arrossegar i deixar anar)",
-			"startReadingInFullScreen": "Comença la lectura a pantalla completa",
+			"startReadingInFullScreen": "Començar la lectura a pantalla completa",
 			"trackingAtTheEnd": "Seguiment al final del capítol/tom"
 		},
 		"navigation": {

diff --git a/languages/cs.json b/languages/cs.json
@@ -170,6 +170,7 @@
 			"main": "",
 			"maxMargin": "",
 			"globalZoom": "",
+			"globalZoomSlide": "",
 			"moveZoomWithMouse": "",
 			"scrollWithMouse": "",
 			"startReadingInFullScreen": "",

diff --git a/languages/de.json b/languages/de.json
@@ -170,6 +170,7 @@
 			"main": "",
 			"maxMargin": "",
 			"globalZoom": "",
+			"globalZoomSlide": "",
 			"moveZoomWithMouse": "",
 			"scrollWithMouse": "",
 			"startReadingInFullScreen": "",

diff --git a/languages/en.json b/languages/en.json
@@ -169,7 +169,8 @@
 		"reading": {
 			"main": "Reading preferences",
 			"maxMargin": "Maximum horizontal and vertical margin",
-			"globalZoom": "Applies a global zoom instead of image by image (Only in vertical reading)",
+			"globalZoom": "Global zoom instead of image by image (Vertical reading)",
+			"globalZoomSlide": "Global zoom instead of image by image (Slide reading)",
 			"moveZoomWithMouse": "Move zoom using cursor (Disables moving by drag and drop)",
 			"scrollWithMouse": "Scroll by moving the cursor along the edges of the screen (Disables drag and drop scrolling)",
 			"startReadingInFullScreen": "Start reading in full screen",

diff --git a/languages/es.json b/languages/es.json
@@ -169,10 +169,11 @@
 		"reading": {
 			"main": "Preferencias de lectura",
 			"maxMargin": "Margen horizontal y vertical máximo",
-			"globalZoom": "Aplica un zoom global en vez de imagen a imagen (Solo en lectura vertical)",
+			"globalZoom": "Zoom global en vez de imagen a imagen (Lectura vertical)",
+			"globalZoomSlide": "Zoom global en vez de imagen a imagen (Lectura horizontal)",
 			"moveZoomWithMouse": "Mover el zoom mediante el cursor (Desactiva mover mediante arrastrar y soltar)",
 			"scrollWithMouse": "Realizar desplazamiento moviendo el cursor por los bordes de la pantalla (Desactiva desplazamiento mediante arrastrar y soltar)",
-			"startReadingInFullScreen": "Empieza la lectura en pantalla completa",
+			"startReadingInFullScreen": "Empezar la lectura en pantalla completa",
 			"trackingAtTheEnd": "Seguimiento al final del capítulo/tomo"
 		},
 		"navigation": {

diff --git a/languages/fr.json b/languages/fr.json
@@ -170,6 +170,7 @@
 			"main": "",
 			"maxMargin": "",
 			"globalZoom": "",
+			"globalZoomSlide": "",
 			"moveZoomWithMouse": "",
 			"scrollWithMouse": "",
 			"startReadingInFullScreen": "",

diff --git a/languages/hu.json b/languages/hu.json
@@ -170,6 +170,7 @@
 			"main": "",
 			"maxMargin": "",
 			"globalZoom": "",
+			"globalZoomSlide": "",
 			"moveZoomWithMouse": "",
 			"scrollWithMouse": "",
 			"startReadingInFullScreen": "",

diff --git a/languages/it.json b/languages/it.json
@@ -170,6 +170,7 @@
 			"main": "",
 			"maxMargin": "",
 			"globalZoom": "",
+			"globalZoomSlide": "",
 			"moveZoomWithMouse": "",
 			"scrollWithMouse": "",
 			"startReadingInFullScreen": "",

diff --git a/languages/ja.json b/languages/ja.json
@@ -170,6 +170,7 @@
 			"main": "",
 			"maxMargin": "",
 			"globalZoom": "",
+			"globalZoomSlide": "",
 			"moveZoomWithMouse": "",
 			"scrollWithMouse": "",
 			"startReadingInFullScreen": "",

diff --git a/languages/pt-br.json b/languages/pt-br.json
@@ -170,6 +170,7 @@
 			"main": "",
 			"maxMargin": "",
 			"globalZoom": "",
+			"globalZoomSlide": "",
 			"moveZoomWithMouse": "",
 			"scrollWithMouse": "",
 			"startReadingInFullScreen": "",

diff --git a/languages/ru.json b/languages/ru.json
@@ -170,6 +170,7 @@
 			"main": "",
 			"maxMargin": "",
 			"globalZoom": "",
+			"globalZoomSlide": "",
 			"moveZoomWithMouse": "",
 			"scrollWithMouse": "",
 			"startReadingInFullScreen": "",

diff --git a/languages/th.json b/languages/th.json
@@ -170,6 +170,7 @@
 			"main": "กำหนดค่าการอ่าน",
 			"maxMargin": "ขยายระยะขอบแนวนอนแนวตั้งให้สุด",
 			"globalZoom": "ใช้การซูมที่ตั้งไว้แทนการซูมแบบหนึ่งต่อหนึ่ง (เฉพาะการอ่านแนวตั้งเท่านั้น)",
+			"globalZoomSlide": "",
 			"moveZoomWithMouse": "ย้ายซูมโดยใช้เคอร์เซอร์ (ปิดการย้ายโดยลากวาง)",
 			"scrollWithMouse": "เลื่อนโดยย้ายเคอร์เซอร์ไปตามขอบจอ (ปิดการเลื่อนแบบลากและวาง)",
 			"startReadingInFullScreen": "เริ่มอ่านแบบเต็มจอ",

diff --git a/languages/vi.json b/languages/vi.json
@@ -170,6 +170,7 @@
 			"main": "",
 			"maxMargin": "",
 			"globalZoom": "",
+			"globalZoomSlide": "",
 			"moveZoomWithMouse": "",
 			"scrollWithMouse": "",
 			"startReadingInFullScreen": "",

diff --git a/languages/zh-hans.json b/languages/zh-hans.json
@@ -170,6 +170,7 @@
 			"main": "阅读设置",
 			"maxMargin": "最大水平和垂直边距",
 			"globalZoom": "应用全局缩放而不是逐个图片（仅在垂直阅读时）",
+			"globalZoomSlide": "",
 			"moveZoomWithMouse": "使用鼠标移动缩放（禁用通过拖放移动）",
 			"scrollWithMouse": "通过沿着屏幕边缘移动鼠标来滚动（禁用拖放滚动）",
 			"startReadingInFullScreen": "开始全屏阅读",

diff --git a/languages/zh-hant.json b/languages/zh-hant.json
@@ -170,6 +170,7 @@
 			"main": "",
 			"maxMargin": "",
 			"globalZoom": "",
+			"globalZoomSlide": "",
 			"moveZoomWithMouse": "",
 			"scrollWithMouse": "",
 			"startReadingInFullScreen": "",

diff --git a/scripts/reading.js b/scripts/reading.js
@@ -942,8 +942,10 @@ function goToIndex(index, animation = true, nextPrevious = false, end = false)
 	let animationDurationS = ((animation) ? _config.readingViewSpeed : 0);
 	let animationDurationMS = animationDurationS * 1000;
 
+	let _currentScale = currentScale;
+
 	if(currentScale != 1 && animation && !(config.readingGlobalZoom && readingViewIs('scroll')))
-		reading.resetZoom();
+		reading.resetZoom(true, false, true, true, (config.readingGlobalZoomSlide && readingViewIs('slide')));
 
 	let content = template._contentRight().firstElementChild;
 	let rect = content.getBoundingClientRect();
@@ -1095,6 +1097,13 @@ function goToIndex(index, animation = true, nextPrevious = false, end = false)
 
 	}, false, false, true);
 
+	if(_currentScale != 1 && config.readingGlobalZoomSlide && readingViewIs('slide'))
+	{
+		currentZoomIndex = false;
+		currentScale = _currentScale;
+		reading.applyScale(false, _currentScale, true, _currentScale > 1 ? false : true);
+	}
+
 	//goToImageCL(imagesDistribution[eIndex-1][0].index, animation);
 
 	var isBookmarkTrue = false;
@@ -1611,12 +1620,10 @@ function showPreviousComic(mode, animation = true, invert = false)
 
 var currentScale = 1, scalePrevData = {tranX: 0, tranX2: 0, tranY: 0, tranY2: 0, scale: 1, scrollTop: 0}, originalRect = false, originalRectReadingBody = false, originalRect2 = false, originalRectReadingBody2 = false, haveZoom = false, currentZoomIndex = false, applyScaleST = false, zoomingIn = false, prevAnime = false;
 
-function applyScale(animation = true, scale = 1, center = false, zoomOut = false, round = true)
+function applyScale(animation = true, scale = 1, center = false, zoomOut = false, delayed = false)
 {
 	let animationDurationS = ((animation) ? _config.readingViewSpeed : 0);
 
-	if(round) scale = Math.round(scale * 100) / 100;
-
 	if(currentZoomIndex === false)
 	{
 		if(center || !readingViewIs('scroll'))
@@ -1813,13 +1820,30 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false
 			translateX = withLimits.x;
 			translateY = withLimits.y;
 
-			dom.this(contentRight).find('.image-position'+currentZoomIndex, true).css({
-				transition: 'transform '+animationDurationS+'s, z-index '+animationDurationS+'s',
-				transform: 'translateX('+app.roundDPR(translateX)+'px) translateY('+app.roundDPR(translateY)+'px) scale('+scale+')',
-				transformOrigin: 'center center',
-				zIndex: scale == 1 ? 1 : 2,
-				// willChange: scale == 1 ? '' : 'transform',
-			});
+			let imagePosition = dom.this(contentRight).find('.image-position'+currentZoomIndex, true)
+
+			if(delayed)
+			{
+				setTimeout(function(){
+
+					imagePosition.css({
+						transition: 'transform 0s, z-index 0s',
+						transform: 'translateX('+app.roundDPR(translateX)+'px) translateY('+app.roundDPR(translateY)+'px) scale('+scale+')',
+						transformOrigin: 'center center',
+						zIndex: scale == 1 ? 1 : 2,
+					});
+
+				}, _config.readingViewSpeed * 1000);
+			}
+			else
+			{
+				imagePosition.css({
+					transition: 'transform '+animationDurationS+'s, z-index '+animationDurationS+'s',
+					transform: 'translateX('+app.roundDPR(translateX)+'px) translateY('+app.roundDPR(translateY)+'px) scale('+scale+')',
+					transformOrigin: 'center center',
+					zIndex: scale == 1 ? 1 : 2,
+				});
+			}
 
 			if(scale == 1)
 			{
@@ -1887,7 +1911,7 @@ function zoomOut(animation = true, center = false)
 
 
 // Reset zoom or show in original size if is current in 1 scale
-function resetZoom(animation = true, index = false, apply = true, center = true)
+function resetZoom(animation = true, index = false, apply = true, center = true, delayed = false)
 {
 	var animationDurationS = ((animation) ? _config.readingViewSpeed : 0);
 
@@ -1912,7 +1936,7 @@ function resetZoom(animation = true, index = false, apply = true, center = true)
 				currentScale = ((image.width / width + image.height / height) / 2) / window.devicePixelRatio;
 
 				if(apply)
-					applyScale(animation, currentScale, center, (currentScale < 1) ? true : false, false);
+					applyScale(animation, currentScale, center, (currentScale < 1) ? true : false);
 
 				return;
 			}
@@ -1929,7 +1953,7 @@ function resetZoom(animation = true, index = false, apply = true, center = true)
 		}
 		else
 		{
-			applyScale(animation, currentScale, true);
+			applyScale(animation, currentScale, true, false, delayed);
 
 			originalRect = false;
 			scalePrevData = {tranX: 0, tranX2: 0, tranY: 0, tranY2: 0, scale: 1, scrollTop: 0};
@@ -4837,6 +4861,7 @@ module.exports = {
 	zoomOut: zoomOut,
 	resetZoom: resetZoom,
 	dragZoom: dragZoom,
+	fixBlurOnZoom: fixBlurOnZoom,
 	applyScale: applyScale,
 	activeMagnifyingGlass: activeMagnifyingGlass,
 	changeMagnifyingGlass: changeMagnifyingGlass,

diff --git a/scripts/storage.js b/scripts/storage.js
@@ -1,4 +1,4 @@
-var changes = 61; // Update this if readingPagesConfig is updated
+var changes = 62; // Update this if readingPagesConfig is updated
 
 var readingPagesConfig = {
 	readingConfigName: '',
@@ -102,6 +102,7 @@ var storageDefault = {
 		readingHideBarHeaderFullScreen: true,
 		readingMaxMargin: 400,
 		readingGlobalZoom: true,
+		readingGlobalZoomSlide: true,
 		readingMoveZoomWithMouse: false,
 		readingScrollWithMouse: false,
 		readingStartReadingInFullScreen: false,

diff --git a/templates/settings.content.right.html b/templates/settings.content.right.html
@@ -35,6 +35,14 @@ <h2 class="headline-small">{{language.settings.masterFolders.main}}</h2>
 
 			<h2 class="headline-small">{{language.settings.reading.main}}</h2>
 
+			<div class="menu-simple-text gamepad-item">
+				<span>{{language.settings.reading.globalZoomSlide}}</span>
+				<div class="switch{{#if config.readingGlobalZoomSlide}} a{{/if}}" on="settings.set('readingGlobalZoomSlide', true)" off="settings.set('readingGlobalZoomSlide', 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="menu-simple-text gamepad-item">
 				<span>{{language.settings.reading.globalZoom}}</span>
 				<div class="switch{{#if config.readingGlobalZoom}} a{{/if}}" on="settings.setGlobalZoom(true)" off="settings.setGlobalZoom(false)">