New: Buttons in library to go next and prev chapter

CHANGELOG.md

@@ -13,7 +13,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Show image in its original size [`30df2fc`](https://github.com/ollm/OpenComic/commit/30df2fc70dbaefecfe1942bc8032686e083e7d53)
 - Show in first/last page buttons if has next/prev comic and go to next/prev comics scrolling [`2a3796e`](https://github.com/ollm/OpenComic/commit/2a3796eb82cdc86c70c69cae62e48da9baf41aa0)
 - Improve the detection of the type of compressed files if the file extension is not correct [`b39605c`](https://github.com/ollm/OpenComic/commit/b39605c5d5ab72742cf32f14a23004976cccec7c)
-- Option to start OpenComic in startup (Windows and macOS only)
+- Option to start OpenComic in startup (Windows and macOS only) [`7b9b8ec`](https://github.com/ollm/OpenComic/commit/7b9b8ec4457445ad9bb3a761face8403ff507b7f)
+- Buttons in library to go next and prev chapter
 
 ##### 🐛 Bug Fixes
 

scripts/dom.js

@@ -430,6 +430,10 @@ async function loadIndexPage(animation = true, path = false, content = false, ke
 
 		handlebarsContext.comicsIndex = false;
 		handlebarsContext.comicsIndexVar = 'false';
+		handlebarsContext.comicsDeep2 = path.replace(new RegExp('^\s*'+pregQuote(mainPathR)), '').split(p.sep).length >= 2 ? true : false;
+
+		if(handlebarsContext.comicsDeep2)
+			showIfHasPrevOrNext(path, mainPath);
 
 		headerPath(path, mainPath);
 		template.loadHeader('index.header.html', animation);
@@ -541,6 +545,49 @@ async function previousComic(path, mainPath)
 	return image && image.path ? image.path : false;
 }
 
+async function goNextComic(path, mainPath)
+{
+	let _nextComic = await nextComic(indexPathA, indexMainPathA);
+
+	if(_nextComic)
+	{
+		dom.loadIndexPage(true, p.dirname(_nextComic), false, false, indexMainPathA);
+	}
+}
+
+async function goPrevComic(path, mainPath)
+{
+	let prevComic = await previousComic(indexPathA, indexMainPathA);
+
+	if(prevComic)
+	{
+		dom.loadIndexPage(true, p.dirname(prevComic), false, false, indexMainPathA);
+	}
+}
+
+async function showIfHasPrevOrNext(path, mainPath)
+{
+	let _nextComic = await nextComic(path, mainPath);
+	let prevComic = await previousComic(path, mainPath);
+
+	let barHeader = template._barHeader();
+
+	let buttonNext = barHeader.querySelector('.button-next-comic');
+	let buttonPrev = barHeader.querySelector('.button-prev-comic');
+
+	if(buttonNext)
+	{
+		if(_nextComic)
+			buttonNext.classList.remove('disable-pointer');
+	}
+
+	if(buttonPrev)
+	{
+		if(prevComic)
+			buttonPrev.classList.remove('disable-pointer');
+	}
+}
+
 async function _getFolderThumbnails(file, images, _images, path, folderSha, isAsync = false)
 {
 	let shaIndex = {};
@@ -1355,6 +1402,8 @@ module.exports = {
 	openComic: openComic,
 	nextComic: function(){return skipNextComic},
 	previousComic: function(){return skipPreviousComic},
+	goNextComic: goNextComic,
+	goPrevComic: goPrevComic,
 	orderBy: orderBy,
 	nightMode: nightMode,
 	addComicButtons: addComicButtons,

templates/index.header.html

@@ -27,6 +27,13 @@
 		</div>
 		<div class="bar-buttons-separator"></div>
 		<div class="material-icon button button2 hover-text" hover-text="{{language.global.reload}}" onclick="dom.reloadIndex();">refresh</div>
+		{{#unless comicsIndex}}
+		{{#if comicsDeep2}}
+		<div class="bar-buttons-separator"></div>
+		<div class="material-icon button button2 button-next-comic hover-text disable-pointer" hover-text="{{language.reading.nextChapter}}" onclick="dom.goNextComic();">navigate_next</div>
+		<div class="material-icon button button2 button-prev-comic hover-text disable-pointer" hover-text="{{language.reading.prevChapter}}" onclick="dom.goPrevComic();">navigate_before</div>
+		{{/if}}
+		{{/unless}}
 		<div class="bar-buttons-separator"></div>
 		<div class="material-icon button button2 button-night-mode hover-text" hover-text="{{language.global.nightMode}}" onclick="dom.nightMode();">{{#if config.nightMode}}dark_mode{{else}}light_mode{{/if}}</div>
 	</div>