New: Option to not enlarge images more than its original size

CHANGELOG.md

@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Label to display only the contents of a master folder [`ff35144`](https://github.com/ollm/OpenComic/commit/ff351447829641de32e59a7332f354d945df88fa)
 - Support favorite label [`86039e6`](https://github.com/ollm/OpenComic/commit/86039e6d9f90d77b9671068d520c8bc2fa635f30)
 - Custom labels support [`1185d82`](https://github.com/ollm/OpenComic/commit/1185d82790a764e63d1d223362e4b44e203ff0e1)
+- Option to not enlarge images more than its original size
 
 ##### 🐛 Bug Fixes
 

languages/ca.json

@@ -76,6 +76,7 @@
 			"slide": "Lectura horitzontal",
 			"scroll": "Lectura vertical",
 			"adjustToWidth": "Ajustar a l'ample",
+			"notEnlargeMoreThanOriginalSize": "No ampliar més de la seva mida original",
 			"margin": "Marge",
 			"marginHorizontal": "Margen horitzontal",
 			"marginVertical": "Margen vertical",

languages/cs.json

@@ -76,6 +76,7 @@
 			"slide": "Režim Prezentace",
 			"scroll": "Režim Vertikální Čtečka",
 			"adjustToWidth": "Přizpůsobit šířce",
+			"notEnlargeMoreThanOriginalSize": "",
 			"margin": "Okraj",
 			"marginHorizontal": "Vodorovné odsazení",
 			"marginVertical": "Svislé odsazení",

languages/de.json

@@ -76,6 +76,7 @@
 			"slide": "Slide Reader",
 			"scroll": "Vertikaler Reader",
 			"adjustToWidth": "Der Breite anpassen",
+			"notEnlargeMoreThanOriginalSize": "",
 			"margin": "Spanne",
 			"marginHorizontal": "Horizontale Spanne",
 			"marginVertical": "Vertikale Spanne",

languages/en.json

@@ -76,6 +76,7 @@
 			"slide": "Slide Reader",
 			"scroll": "Vertical Reader",
 			"adjustToWidth": "Adjust to width",
+			"notEnlargeMoreThanOriginalSize": "Do not enlarge more than its original size",
 			"margin": "Margin",
 			"marginHorizontal": "Horizontal margin",
 			"marginVertical": "Vertical margin",

languages/es.json

@@ -76,6 +76,7 @@
 			"slide": "Lectura horizontal",
 			"scroll": "Lectura vertical",
 			"adjustToWidth": "Ajustar a lo ancho",
+			"notEnlargeMoreThanOriginalSize": "No ampliar más de su tamaño original",
 			"margin": "Margen",
 			"marginHorizontal": "Margen horizontal",
 			"marginVertical": "Margen vertical",

languages/fr.json

@@ -76,6 +76,7 @@
 			"slide": "Lecture horizontale",
 			"scroll": "Lecture verticale",
 			"adjustToWidth": "Ajuster à la largeur",
+			"notEnlargeMoreThanOriginalSize": "",
 			"margin": "Marges",
 			"marginHorizontal": "Marge horizontale",
 			"marginVertical": "Marge verticale",

languages/hu.json

@@ -76,6 +76,7 @@
 			"slide": "Lapozás",
 			"scroll": "Görgetés",
 			"adjustToWidth": "Teljes szélesség",
+			"notEnlargeMoreThanOriginalSize": "",
 			"margin": "Margó",
 			"marginHorizontal": "Vízszintes margó",
 			"marginVertical": "Függőlges margó",

languages/it.json

@@ -76,6 +76,7 @@
 			"slide": "diapositiva",
 			"scroll": "Scorri verso il basso",
 			"adjustToWidth": "Regola in larghezza",
+			"notEnlargeMoreThanOriginalSize": "",
 			"margin": "Margine",
 			"marginHorizontal": "",
 			"marginVertical": "",

languages/ja.json

@@ -76,6 +76,7 @@
 			"slide": "スライドリーダー",
 			"scroll": "垂直方向リーダー",
 			"adjustToWidth": "幅に合わせる",
+			"notEnlargeMoreThanOriginalSize": "",
 			"margin": "マージン",
 			"marginHorizontal": "横方向のマージン",
 			"marginVertical": "縦方向のマージン",

languages/pt-br.json

@@ -76,6 +76,7 @@
 			"slide": "Deslizar",
 			"scroll": "Rolar para baixo",
 			"adjustToWidth": "Ajustar a largura",
+			"notEnlargeMoreThanOriginalSize": "",
 			"margin": "Margem",
 			"marginHorizontal": "",
 			"marginVertical": "",

languages/ru.json

@@ -76,6 +76,7 @@
 			"slide": "Слайд-ридер",
 			"scroll": "Вертикальный ридер",
 			"adjustToWidth": "Отрегулировать по ширине",
+			"notEnlargeMoreThanOriginalSize": "",
 			"margin": "Края",
 			"marginHorizontal": "Горизонтальный край",
 			"marginVertical": "Вертикальный край",

languages/th.json

@@ -76,6 +76,7 @@
 			"slide": "อ่านแบบเลื่อนข้าง",
 			"scroll": "อ่านแบบเลื่อนลง",
 			"adjustToWidth": "ปรับตามความกว้าง",
+			"notEnlargeMoreThanOriginalSize": "",
 			"margin": "ระยะขอบ",
 			"marginHorizontal": "ขอบแนวนอน",
 			"marginVertical": "ขอบแนวตั้ง",

languages/vi.json

@@ -76,6 +76,7 @@
 			"slide": "Trình đọc ngang",
 			"scroll": "Trình đọc dọc",
 			"adjustToWidth": "Điều chỉnh theo độ rộng",
+			"notEnlargeMoreThanOriginalSize": "",
 			"margin": "Lề",
 			"marginHorizontal": "Lề ngang",
 			"marginVertical": "Lề dọc",

languages/zh-hans.json

@@ -76,6 +76,7 @@
 			"slide": "横向翻页",
 			"scroll": "纵向翻页",
 			"adjustToWidth": "适应屏幕",
+			"notEnlargeMoreThanOriginalSize": "",
 			"margin": "边距",
 			"marginHorizontal": "水平边距",
 			"marginVertical": "垂直边距",

languages/zh-hant.json

@@ -76,6 +76,7 @@
 			"slide": "水平翻頁",
 			"scroll": "垂直翻頁",
 			"adjustToWidth": "適應寬度",
+			"notEnlargeMoreThanOriginalSize": "",
 			"margin": "邊際",
 			"marginHorizontal": "",
 			"marginVertical": "",

scripts/app.js

@@ -92,15 +92,15 @@ function round(number, precision = 0) {
 
 }
 
-function roundDPR(number) {
+function roundDPR(number, base = 0) {
 
-	return Math.round(number * window.devicePixelRatio) / window.devicePixelRatio;
+	return Math.round(base + number * window.devicePixelRatio) / window.devicePixelRatio - base;
 
 }
 
-function floorDPR(number) {
+function floorDPR(number, base = 0) {
 
-	return Math.floor(number * window.devicePixelRatio) / window.devicePixelRatio;
+	return Math.floor(base + number * window.devicePixelRatio) / window.devicePixelRatio - base;
 
 }
 

scripts/cache.js

@@ -17,7 +17,7 @@ function processTheImageQueue()
 	let realPath = fileManager.realPath(img.file);
 	let toImage = p.join(cacheFolder, sha+'.jpg');
 
-	image.resize(realPath, toImage, {width: img.size, height: img.size * 1.5, quality: 95}).then(function(){
+	image.resize(realPath, toImage, {width: img.size, height: Math.round(img.size * 1.5), quality: 95}).then(function(){
 
 		if(typeof data[sha] == 'undefined') data[sha] = {lastAccess: time()};
 

scripts/reading.js

@@ -338,6 +338,8 @@ function disposeImages(data = false)
 		imageElements[key1][key2].push(image.firstElementChild);
 	}
 
+	let readingNotEnlargeMoreThanOriginalSize = (_config.readingNotEnlargeMoreThanOriginalSize || _config.readingWebtoon) ? true : false;
+
 	for(let key1 in _imagesDistribution)
 	{
 		if(!imageElements[key1])
@@ -388,6 +390,25 @@ function disposeImages(data = false)
 
 			if(image0)
 			{
+				if(readingNotEnlargeMoreThanOriginalSize)
+				{
+					let dpr = window.devicePixelRatio;
+					let size = imagesData[first.index];
+					let sizeClip = imagesDataClip[first.index];
+
+					if(imgWidth0 * dpr > size.width || imgHeight0 * dpr > size.height)
+					{
+						marginLeft0 += (imgWidth0 - size.width / dpr);
+						if(!readingViewIs('scroll')) marginTop0 += (imgHeight0 - size.height / dpr) / 2;
+
+						imgWidth0 = sizeClip.width / dpr;
+						imgHeight0 = sizeClip.height / dpr;
+
+						imageWidth0 = size.width / dpr;
+						imageHeight0 = size.height / dpr;
+					}
+				}
+
 				for(let i = 0, len = image0.length; i < len; i++)
 				{
 					let image = image0[i];
@@ -423,6 +444,25 @@ function disposeImages(data = false)
 
 			if(image1)
 			{
+				if(readingNotEnlargeMoreThanOriginalSize)
+				{
+					let dpr = window.devicePixelRatio;
+					let size = imagesData[second.index];
+					let sizeClip = imagesDataClip[second.index];
+
+					if(imgWidth1 * dpr > size.width || imgHeight1 * dpr > size.height)
+					{
+						marginLeft1 += 0;
+						if(!readingViewIs('scroll')) marginTop1 += (imgHeight1 - size.height / dpr) / 2;
+
+						imgWidth1 = sizeClip.width / dpr;
+						imgHeight1 = sizeClip.height / dpr;
+
+						imageWidth1 = size.width / dpr;
+						imageHeight1 = size.height / dpr;
+					}
+				}
+
 				for(let i = 0, len = image1.length; i < len; i++)
 				{
 					let image = image1[i];
@@ -500,6 +540,25 @@ function disposeImages(data = false)
 
 			if(image0)
 			{
+				if(readingNotEnlargeMoreThanOriginalSize)
+				{
+					let dpr = window.devicePixelRatio;
+					let size = imagesData[first.index];
+					let sizeClip = imagesDataClip[first.index];
+
+					if(imgWidth * dpr > size.width || imgHeight * dpr > size.height)
+					{
+						marginLeft += (imgWidth - size.width / dpr) / 2;
+						if(!readingViewIs('scroll')) marginTop += (imgHeight - size.height / dpr) / 2;
+
+						imgWidth = sizeClip.width / dpr;
+						imgHeight = sizeClip.height / dpr;
+
+						imageWidth = size.width / dpr;
+						imageHeight = size.height / dpr;
+					}
+				}
+
 				for(let i = 0, len = image0.length; i < len; i++)
 				{
 					let image = image0[i];
@@ -2669,7 +2728,7 @@ function changePagesView(mode, value, save)
 
 		if(value)
 		{
-			template.globalElement('.pages-slide, .pages-scroll, .reading-reading-manga, .reading-double-page, .reading-do-not-apply-to-horizontals, .reading-blank-page, .reading-ajust-to-width').addClass('disable-pointer');
+			template.globalElement('.pages-slide, .pages-scroll, .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').addClass('disable-pointer');
 		}
 		else
 		{
@@ -2679,7 +2738,7 @@ function changePagesView(mode, value, save)
 			if(_config.readingDoublePage)
 				template.globalElement('.reading-do-not-apply-to-horizontals, .reading-blank-page').removeClass('disable-pointer');
 
-			template.globalElement('.pages-slide, .pages-scroll, .reading-reading-manga, .reading-double-page').removeClass('disable-pointer');
+			template.globalElement('.pages-slide, .pages-scroll, .reading-reading-manga, .reading-double-page, .reading-not-enlarge-more-than-original-size').removeClass('disable-pointer');
 		}
 
 		template.loadContentRight('reading.content.right.html', true);
@@ -2760,6 +2819,14 @@ function changePagesView(mode, value, save)
 		calculateView();
 		stayInLine();
 	}
+	else if(mode == 18) // Do not enlarge images more than its original size
+	{
+		updateReadingPagesConfig('readingNotEnlargeMoreThanOriginalSize', value);
+
+		template.loadContentRight('reading.content.right.html', true);
+
+		read(readingCurrentPath, imageIndex, false, readingIsCanvas, readingIsEbook);
+	}
 }
 
 //Change the bookmark icon
@@ -4615,11 +4682,7 @@ async function read(path, index = 1, end = false, isCanvas = false, isEbook = fa
 		}
 
 		if(haveZoom && zoomMoveData.active)
-		{
 			dragZoomEnd();
-
-			$('body').removeClass('dragging');
-		}
 
 		if(readingDragScroll)
 		{
@@ -4643,13 +4706,16 @@ async function read(path, index = 1, end = false, isCanvas = false, isEbook = fa
 
 					readingDragScroll.content.stop(true).animate({scrollTop: (readingDragScroll.content.scrollTop() + moreScroll)+'px'}, duration * 1000, $.bez([0.22, 0.6, 0.3, 1]));
 				}
-
-				$('body').removeClass('dragging');
 			}
 
 			setTimeout(function(){reading.setReadingDragScroll(false)}, 10);
 		}
 
+		let dragging = document.querySelector('body.dragging');
+
+		if(dragging)
+			dragging.classList.remove('dragging');
+
 	});
 
 	$(window).on('click', function(e) {

scripts/storage.js

@@ -1,10 +1,11 @@
-var changes = 68; // Update this if readingPagesConfig is updated
+var changes = 69; // Update this if readingPagesConfig is updated
 
 var readingPagesConfig = {
 	readingConfigName: '',
 	readingView: 'slide',
 	readingViewSpeed: 0.3,
 	readingViewAdjustToWidth: false,
+	readingNotEnlargeMoreThanOriginalSize: false,
 	readingMargin: {
 		margin: 16,
 		top: 16,

templates/reading.elements.menus.pages.html

@@ -325,6 +325,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-not-enlarge-more-than-original-size gamepad-item{{#if _config.readingWebtoon}} disable-pointer{{/if}}">
+				{{language.reading.pages.notEnlargeMoreThanOriginalSize}}
+				<div class="switch{{#if _config.readingNotEnlargeMoreThanOriginalSize}} a{{/if}}" on="reading.changePagesView(18, true, false)" off="reading.changePagesView(18, 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">