Fix: Some errors on go back before comic load

CHANGELOG.md

@@ -12,7 +12,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Error when resizing after exit comic opened from recents [`8291730`](https://github.com/ollm/OpenComic/commit/829173058bb3dde12d35b726070c19ec43a63be3)
 - When reloading, change view or sorting a folder opens reading mode in some cases [`e8e2c16`](https://github.com/ollm/OpenComic/commit/e8e2c16a18d8f0c03b6b00b09a7c0d1bf8a24032)
-- Reading shortcuts remain active when going back to recently opened
+- Reading shortcuts remain active when going back to recently opened [`716c10b`](https://github.com/ollm/OpenComic/commit/716c10b3a6b3ec17352952bba6a19b3b1a4dd66a)
+- Some errors on go back before comic load
 
 ## [v1.0.0-beta.5](https://github.com/ollm/OpenComic/releases/tag/v1.0.0-beta.5) (24-11-2023)
 

build/entitlements.mas.plist

@@ -13,8 +13,19 @@
     <true/>
     <key>com.apple.security.files.user-selected.read-write</key>
     <true/>
+    <key>com.apple.security.files.downloads.read-write</key>
+    <true/>
+    <key>com.apple.security.assets.pictures.read-write</key>
+    <true/>
+    <key>com.apple.security.assets.music.read-write</key>
+    <true/>
+    <key>com.apple.security.assets.movies.read-write</key>
+    <true/>
     <key>com.apple.security.files.bookmarks.app-scope</key>
     <true/>
+    <key>com.apple.security.files.bookmarks.document-scope</key>
+    <true/>
     <key>com.apple.security.network.client</key>
+    <true/>
   </dict>
 </plist>

scripts/dom.js

@@ -468,7 +468,7 @@ async function loadIndexPage(animation = true, path = false, content = false, ke
 
 		headerPath(path, mainPath);
 
-		if(fromDeepLoad && Date.now() - fromDeepLoadNow < 300)
+		if(fromDeepLoad && Date.now() - fromDeepLoadNow < 200)
 		{
 			template._barHeader().firstElementChild.innerHTML = template.load('index.header.html');
 			// template._contentRight().firstElementChild.innerHTML = template.load('index.content.right.loading.html');
@@ -1383,6 +1383,8 @@ async function openComic(animation = true, path = true, mainPath = true, end = f
 		}
 	}
 
+	onReading = _onReading = true;
+
 	currentPathScrollTop[currentPath === false ? 0 : currentPath] = template.contentRight().children().scrollTop();
 	currentPath = path;
 
@@ -1403,7 +1405,7 @@ async function openComic(animation = true, path = true, mainPath = true, end = f
 
 	handlebarsContext.comics = [];
 
-	if(fromDeepLoad && Date.now() - fromDeepLoadNow < 300)
+	if(fromDeepLoad && Date.now() - fromDeepLoadNow < 200)
 	{
 		template._barHeader().firstElementChild.innerHTML = template.load('reading.header.html');
 	}
@@ -1415,6 +1417,8 @@ async function openComic(animation = true, path = true, mainPath = true, end = f
 		template.loadHeader('reading.header.html', animation);
 	}
 
+	template.loadContentLeft('reading.content.left.html', animation);
+
 	// Load files
 	let file = fileManager.file(path);
 	let files = await file.read();
@@ -1450,6 +1454,10 @@ async function openComic(animation = true, path = true, mainPath = true, end = f
 	skipNextComic = await nextComic(path, mainPath);
 	skipPreviousComic = await previousComic(path, mainPath);
 
+	// The user has gone back before finishing loading
+	if(!onReading)
+		return;
+
 	if(!fromGoBack)
 		indexPathControl(imagePath, mainPath, true, fromNextAndPrev);
 
@@ -1539,7 +1547,7 @@ async function openComic(animation = true, path = true, mainPath = true, end = f
 
 	handlebarsContext.loading = true;
 
-	if(Date.now() - now < 300)
+	if(Date.now() - now < 200)
 	{
 		if(template._contentRight().querySelector('.loading'))
 		{
@@ -1550,13 +1558,15 @@ async function openComic(animation = true, path = true, mainPath = true, end = f
 		{
 			template._contentRight().firstElementChild.innerHTML = template.load('reading.content.right.html');
 		}
+
+		template._contentLeft().firstElementChild.innerHTML = template.load('reading.content.left.html');
 	}
 	else
 	{
+		template.loadContentLeft('reading.content.left.html', animation);
 		template.loadContentRight('reading.content.right.html', animation);
 	}
 
-	template.loadContentLeft('reading.content.left.html', animation);
 	template._contentLeft().firstElementChild.style.height = 'calc(100% - 66px)';
 
 	if(template.globalElement('.reading-elements-menus').length == 0) template.loadGlobalElement('reading.elements.menus.html', 'menus');

scripts/reading.js

@@ -3572,6 +3572,9 @@ var onLoadCallback = false;
 
 async function isLoad()
 {
+	let readingHeaderLoading = template._barHeader().querySelector('.reading-header-loading');
+	if(readingHeaderLoading) readingHeaderLoading.classList.remove('reading-header-loading');
+
 	if(onLoadCallback) onLoadCallback();
 	onLoadCallback = false;
 }
@@ -4151,7 +4154,8 @@ async function read(path, index = 1, end = false, isCanvas = false, isEbook = fa
 	else
 		readingCurrentBookmarks = undefined;
 
-	goToImageCL(index, false);
+	if(!isEbook)
+		goToImageCL(index, false);
 
 	$(window).off('keydown touchstart touchend mouseup mousemove touchmove mouseout click');
 	template.contentRight().off('mousewheel');
@@ -4682,6 +4686,8 @@ async function read(path, index = 1, end = false, isCanvas = false, isEbook = fa
 	readingIsCanvas = isCanvas;
 	readingIsEbook = isEbook;
 
+	console.log(readingIsEbook);
+
 	if(isCanvas)
 	{
 		readingFile = fileManager.fileCompressed(path);

templates/reading.content.left.ebook.html

@@ -26,10 +26,10 @@
 		<div class="simple-slider-text"><div class="range-percent"><i class="material-icon slider-reset" onclick="reading.goBackPageRangeHistory(this)">undo</i><span onclick="reading.goPageDialog()">0%</span></div><div onclick="reading.goPageDialog()"><span>1</span> / {{ebookPages}}</div></div>
 		<div class="range show-point-on-hover">
 			<div class="range-position">
-				<span class="range-line" style="width: 100%"></span>
+				<span class="range-line" style="width: 0%"></span>
 				<span class="range-steps"></span>
 				<div>
-					<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
+					<div class="range-point" position="100" style="left: 0%;"><div class="elevation-1"></div></div>
 				</div>
 			</div>
 			<input type="range" max="{{ebookPages}}" min="1" value="1" onrange="reading.pageRange(\{{value}}, \{{toEnd}})">

templates/reading.content.left.html

@@ -4,7 +4,7 @@
 	{{#if folder}}
 	<i class="material-icon">folder</i>
 	{{else}}
-	<img class="reading-images ri-sha-{{sha}}" src="{{chain 'escapeBackSlash' 'escapeQuotesSimples' thumbnail}}">
+	<img class="reading-images ri-sha-{{sha}}{{#if thumbnail}} show{{/if}}" src="{{chain 'escapeBackSlash' 'escapeQuotesSimples' thumbnail}}" onload="this.classList.add('show')">
 	{{/if}}
 </div>
 {{/each}}
@@ -13,10 +13,10 @@
 		<div class="simple-slider-text"><div class="range-percent"><i class="material-icon slider-reset" onclick="reading.goBackPageRangeHistory(this)">undo</i><span onclick="reading.goPageDialog()">0%</span></div><div onclick="reading.goPageDialog()"><span>1</span> / {{comics.length}}</div></div>
 		<div class="range show-point-on-hover">
 			<div class="range-position">
-				<span class="range-line" style="width: 100%"></span>
+				<span class="range-line" style="width: 0%"></span>
 				<span class="range-steps"></span>
 				<div>
-					<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
+					<div class="range-point" position="100" style="left: 0%;"><div class="elevation-1"></div></div>
 				</div>
 			</div>
 			<input type="range" max="{{comics.length}}" min="1" value="1" onrange="reading.pageRange(\{{value}}, \{{toEnd}})">

templates/reading.header.html

@@ -12,7 +12,7 @@
 			{{language.global.comics}}
 		{{/if}}
 	{{/if}}</div>
-<div class="bar-right-buttons reading-header">
+<div class="bar-right-buttons reading-header reading-header-loading">
 	<div>
 		<div class="material-icon button button-min button1 button-more-options hover-text" hover-text="{{language.reading.moreOptions.main}}" onclick="reading.loadReadingMoreOptions(); events.activeMenu('#reading-more-options', '.bar-right-buttons .button-more-options', 'right');">more_vert</div>
 		<div class="bar-buttons-separator"></div>

themes/material-design/reading.css

@@ -1,5 +1,10 @@
 /* Reading - Start */
 
+.reading-header-loading
+{
+	pointer-events: none;
+}
+
 .reading-left
 {
 	width: 100%;
@@ -97,8 +102,14 @@
 	background-repeat: no-repeat;
 	background-position: 50%;
 	margin-left: calc(100% - 80px);
-	transition: 0.2s border;
 	border: 1px solid var(--md-sys-color-surface-variant);
+	transition: 0.2s border;
+	opacity: 0;
+}
+
+.reading-images.show
+{
+	opacity: 1;
 }
 
 .reading-number