Add Ability To Sort Offline Comic Viewing

CSS/main.css

@@ -128,6 +128,7 @@ input::-webkit-input-placeholder { user-select: none }
 	padding: 10px;
 	background-color: var(--obr-con-bgc);
 	overflow-y: auto;
+	position: relative;
 }
 
 /* Menu */
@@ -269,6 +270,34 @@ input::-webkit-input-placeholder { user-select: none }
 	font-size: 20px;
 }
 
+#off-page-sort {
+	display: inline-block;
+	position: absolute;
+	top: 17px;
+	right: 15px;
+	cursor: default;
+}
+
+#off-page-sort > div {
+	display: inline-block;
+	width: 30px;
+	height: 30px;
+	padding: 5px;
+	margin: 0 2px;
+	color: var(--black-white);
+	border: 2px solid #2488cb;
+	border-radius: 4px;
+	cursor: pointer;
+}
+
+#off-page-sort > div > svg { width: 100%; height: 100% }
+#off-page-sort > div:not([active]):hover { border-color: #5DADE2 }
+
+#off-page-sort > div[active] {
+	background-color: #2488cb;
+	color: #fff;
+}
+
 #c-c-r-c-p,
 #c-p-i-r-p,
 #c-r-c-m {

JS/classes.js

@@ -696,6 +696,7 @@ class OfflinePageManager {
 		this.infoIndex = null
 		this.infoNameIndex = null
 		this.container = document.getElementById('comic-container')
+		this.sort = {_id:-1}
 		this.#byName = false
 		this.#scroll = 0
 		this.#counter = document.getElementById('comics-counter')
@@ -777,7 +778,7 @@ class OfflinePageManager {
 		let load = {}
 		if (this.search != null) load.n = new RegExp(this.search.toLowerCase())
 
-		db.comics.find(load).sort({_id:-1}).exec((err, doc) => {
+		db.comics.find(load).sort(this.sort).exec((err, doc) => {
 			if (err) { error(err); return }
 			const list = []
 			let limit = this.#MaxAndMin(doc.length, page)
@@ -819,7 +820,7 @@ class OfflinePageManager {
 		const load = {}
 		if (this.search != null) load.n = new RegExp(this.search.toLowerCase())
 
-		db.comics.find(load).sort({_id:-1}).exec((err, doc) => {
+		db.comics.find(load).sort(this.sort).exec((err, doc) => {
 			if (err) { error(err); return }
 
 			let check
@@ -916,6 +917,7 @@ class OfflinePageManager {
 		if (list.length == 0) {
 			if (this.search != null) this.container.innerHTML = '<br><div class="alert alert-danger">No Comic has been Found.</div>'
 			else this.container.innerHTML = '<br><div class="alert alert-danger">There is no Comic Downloaded.</div>'
+			this.#titleDom.innerHTML = null
 		}
 
 		document.getElementById('main-body').scrollTop = this.#scroll
@@ -1009,6 +1011,27 @@ class OfflinePageManager {
 		}
 	}
 
+	Sort(index) {
+		switch(index) {
+			case 0:
+				this.sort = {_id:-1}
+				break
+			case 1:
+				this.sort = {_id:1}
+				break
+			case 2:
+				this.sort = {n:-1}
+				break
+			case 3:
+				this.sort = {n:1}
+				break
+		}
+		const children = document.getElementById('off-page-sort').children
+		for (let i = 0; i < children.length; i++) children[i].removeAttribute('active')
+		children[index].setAttribute('active','')
+		this.Reload()
+	}
+
 	Home() {
 		document.getElementById('offline-search-form-input').value = null
 		this.search = null