New: Delete bookmarks from the bookmark list

Author: ollm

CHANGELOG.md

@@ -8,6 +8,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ##### 🚀 New Features
 
+- Delete bookmarks from the bookmark list
+
 ##### 🐛 Bug Fixes
 
 - Error when resizing after exit comic opened from recents [`8291730`](https://github.com/ollm/OpenComic/commit/829173058bb3dde12d35b726070c19ec43a63be3)

scripts/reading.js

@@ -716,7 +716,7 @@ function goToImageCL(index, animation = true, fromScroll = false, fromPageRange
 	if(!fromPageRange)
 	{
 		render.focusIndex(index);
-		filters.focusIndex(index, readingIsEbook);
+		filters.focusIndex(index);
 	}
 
 	let animationDurationMS = ((animation) ? _config.readingViewSpeed : 0) * 1000;
@@ -2910,6 +2910,14 @@ function createAndDeleteBookmark(index = false)
 	}
 }
 
+function deleteBookmark(key)
+{
+	readingCurrentBookmarks.splice(key, 1);
+	storage.updateVar('bookmarks', dom.indexMainPathA(), readingCurrentBookmarks);
+
+	loadBookmarks(true);
+}
+
 var saveReadingProgressA = false, fromSkip = false;
 
 function setFromSkip()
@@ -3010,7 +3018,7 @@ function startSaveReadingProgressSI()
 }
 
 //Load the bookmarks in the current directory
-function loadBookmarks()
+function loadBookmarks(bookmarksChild = false)
 {
 	var bookmarksPath = {}, mainPath = dom.indexMainPathA();
 
@@ -3036,6 +3044,7 @@ function loadBookmarks()
 			let chapterIndex = app.extract(/^([0-9]+):sortonly/, name, 1);
 
 			bookmarksPath[bookmarkDirname].push({
+				key: key,
 				name: dom.translatePageName(decodeURI(p.basename(bookmark.path).replace(/\.[^\.]*$/, ''))),
 				index: (bookmarkDirname !== readingCurrentPath) ? bookmark.index : imagesPath[bookmark.path],
 				sha: sha,
@@ -3112,8 +3121,9 @@ function loadBookmarks()
 	});
 
 	handlebarsContext.bookmarks = bookmarks;
+	handlebarsContext.bookmarksChild = bookmarksChild;
 
-	$('#collections-bookmark .menu-simple').html(template.load('reading.elements.menus.collections.bookmarks.html'));
+	dom.query(!bookmarksChild ? '#collections-bookmark .menu-simple' : '#collections-bookmark .menu-simple > div').html(template.load('reading.elements.menus.collections.bookmarks.html'));
 }
 
 var currentReadingConfigKey = false;
@@ -4884,6 +4894,7 @@ module.exports = {
 	saveReadingProgressA: function(){return saveReadingProgressA},
 	setFromSkip: setFromSkip,
 	createAndDeleteBookmark: createAndDeleteBookmark,
+	deleteBookmark: deleteBookmark,
 	currentIndex: function(){return currentIndex},
 	currentPageVisibility: function(){return currentPageVisibility},
 	loadBookmarks: loadBookmarks,

scripts/reading/filters.js

@@ -1117,7 +1117,8 @@ async function focusIndex(index, notBlackAndWhite = false)
 
 				if(isBlackAndWhite[sha] === undefined)
 				{
-					isBlackAndWhiteQueue[sha] = {index: i, path: image.path, sha: image.sha};
+					let _path = image.path.replace(/\?page=[0-9]+$/, '');
+					isBlackAndWhiteQueue[sha] = {index: i, path: _path, sha: sha1(_path)};
 
 					processIsBlackAndWhiteQueue();
 				}

templates/reading.elements.menus.collections.bookmarks.html

@@ -1,19 +1,26 @@
+{{#unless bookmarksChild}}
 <div class="menu-simple-content">
+{{/unless}}
 	<div>
 		{{#each bookmarks}}
 			<div class="reading-bookmark menu-simple-text-small">
 				<span>{{#if continueReading}}{{../language.comics.continueReading}}: {{else if current}}{{../language.reading.currentReading}}: {{/if}}{{name}}</span>
 			</div>
 			{{#each bookmarks}}
-				<div class="reading-bookmark menu-simple-element gamepad-item" onclick="{{#if ../current}}{{#if ebook}}reading.goToChapterProgress({{chapterIndex}}, {{chapterProgress}}, true);{{else}}reading.goToImage({{index}}, true);{{/if}}{{else}}{{#if ebook}}reading.setNextOpenChapterProgress({{chapterIndex}}, {{chapterProgress}});{{/if}}dom.openComic(true, '{{chain 'escapeBackSlash' 'escapeQuotesSimples' path}}', '{{chain 'escapeBackSlash' 'escapeQuotesSimples' mainPath}}');{{/if}} events.desactiveMenu('#collections-bookmark', '.bar-right-buttons .button-collections-bookmark');">
+				<div class="reading-bookmark{{#unless ../continueReading}} reading-bookmark--{{key}}{{/unless}} menu-simple-element menu-simple-element-medium gamepad-item" onclick="{{#if ../current}}{{#if ebook}}reading.goToChapterProgress({{chapterIndex}}, {{chapterProgress}}, true);{{else}}reading.goToImage({{index}}, true);{{/if}}{{else}}{{#if ebook}}reading.setNextOpenChapterProgress({{chapterIndex}}, {{chapterProgress}});{{/if}}dom.openComic(true, '{{chain 'escapeBackSlash' 'escapeQuotesSimples' path}}', '{{chain 'escapeBackSlash' 'escapeQuotesSimples' mainPath}}');{{/if}} events.desactiveMenu('#collections-bookmark', '.bar-right-buttons .button-collections-bookmark');">
 					<div class="menu-simple-element-image menu-simple-element-image-{{sha}}" style="background-image: url({{thumbnail}})"></div>
 					<span>{{#if ebook}}{{round progress}}%{{else}}{{index}}{{/if}}</span>
 					{{name}}
 					{{#if ebook}}({{round chapterProgress}}%){{/if}}
+					{{#unless ../continueReading}}
+					<i class="material-icon menu-simple-icon-last" onclick="reading.deleteBookmark({{key}}); event.stopPropagation();">close<!-- bookmark_remove --></i>
+					{{/unless}}
 				</div>
 			{{/each}}
 		{{else}}
 			<div class="menu-simple-text">{{language.reading.emptyBookmarks}}</div>
 		{{/each}}
 	</div>
-</div>
+{{#unless bookmarksChild}}
+</div>
+{{/unless}}

templates/reading.elements.menus.html

@@ -97,7 +97,7 @@
 	<div class="menu-clip-path-shadow elevation-2"></div>
 </div>
 <div class="menu" id="collections-bookmark">
-	<div class="menu-simple menu-simple-header elevation-2" style="width: 256px;"></div>
+	<div class="menu-simple menu-simple-header elevation-2" style="width: 512px;"></div>
 	<div class="menu-close" onclick="reading.magnifyingGlassControl(2); events.desactiveMenu('#collections-bookmark', '.bar-right-buttons .button-collections-bookmark');"></div>
 </div>
 <div class="menu" id="tracking-sites">

themes/material-design/actions.css

@@ -663,7 +663,7 @@
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: cover;
-	margin: 4px 6px 0px 0px;
+	margin: 4px 12px 0px 0px;
 	float: left;
 }