add TOC overview bar

7 files changed, 117 insertions, 9 deletions

diff --git a/css/read.css b/css/read.css
index 35226ce..f7a9e2d 100644
--- a/css/read.css
+++ b/css/read.css
@@ -67,6 +67,20 @@
 
 .footer .spacer {
 	flex-grow : 2;
+	position : relative;
+	height : 12px;
+}
+
+.footer .spacer .toc-bar-entry {
+	position : absolute;
+	background: #999;
+	top: 0;
+	bottom : 0;
+	width : 1px;
+}
+
+.footer .spacer .toc-bar-entry.current-position {
+	background : #C33;
 }
 
 .footer .location {
@@ -74,6 +88,25 @@
 	text-align : right;
 }
 
+@media (max-width: 539px) {
+	.spacer > .toc-bar-entry {
+		display : none;
+	}
+}
+
+@media (min-width: 540px) {
+	.footer .chapter_wrapper, .footer .location {
+		width : 25%;
+	}
+}
+
+@media (min-width: 800px) {
+	.footer .chapter_wrapper, .footer .location {
+		width : 20%;
+	}
+}
+
+
 .toolbar {
 	text-align : right;
 	display : flex;
diff --git a/js/reader.js b/js/reader.js
index c7172e5..c97f2fe 100644
--- a/js/reader.js
+++ b/js/reader.js
@@ -549,7 +549,6 @@ const Reader = {
 					book.rendition.display(book.locations._locations[page]);
 				}
 			});
-
 			Reader.Page.openLastRead();
 
 			window.setTimeout(function() {
@@ -601,6 +600,8 @@ const Reader = {
 
 					if (toc_entry && toc_entry.label)
 						$(".chapter").append(" " + toc_entry.label.trim() + " | ");
+
+					Reader.generateTocBar(book, Reader.flattenToc(book));
 				}
 
 			} catch (e) {
@@ -621,6 +622,8 @@ const Reader = {
 			$("#total_pages").text(book.locations.length());
 			$("#page_pct").text(parseInt(book.locations.percentageFromCfi(currentCfi)*100) + '%');
 
+			Reader.updateTocBarPosition(book, location);
+
 			const displayed = location.start.displayed;
 
 			if (displayed) {
@@ -662,28 +665,79 @@ const Reader = {
 		});
 	},
 	flattenTocSubItems: function(entry, nest) {
-		const rv = [];
+		let rv = [];
 
-		if (nest == 2) return false;
+		if (nest == 3) return false;
 
 		if (entry.subitems) {
 			$.each(entry.subitems, function (i, r) {
+				r._nest = nest;
+
 				rv.push(r);
-				rv.concat(Reader.flattenTocSubItems(r, nest+1));
+				rv = rv.concat(Reader.flattenTocSubItems(r, nest+1));
 			});
 		}
 
 		return rv;
 	},
 	flattenToc: function(book) {
-		const rv = [];
+		if (this._flattened_toc) {
+			return this._flattened_toc;
+		} else {
+			let rv = [];
+
+			$.each(book.navigation.toc, function(i, r) {
+				r._nest = 0;
+
+				rv.push(r);
+				rv = rv.concat(Reader.flattenTocSubItems(r, 1));
+			});
+
+			this._flattened_toc = rv;
+
+			return rv;
+		}
+	},
+	generateTocBar: function(book, toc) {
+
+		$(".spacer")
+			.html("");
 
-		$.each(book.navigation.toc, function(i, a) {
-			rv.push(a);
-			rv.concat(Reader.flattenTocSubItems(a), 0);
+		$.each(toc, function(i, te) {
+			try {
+				const cfiBase = book.spine.get(te.href).cfiBase;
+				const loc = book.locations._locations.find(function(k) {
+					return k.indexOf(cfiBase) != -1
+				});
+
+				if (loc) {
+					const pct = Math.round(book.locations.percentageFromCfi(loc) * 100);
+
+					$(".spacer").append(
+						$("<div class='toc-bar-entry'>")
+							.attr('data-nest-level', te._nest)
+							.css('left', pct + '%')
+							.css('_width', (3 - te._nest) + "px")
+							.attr("title", te.label)
+						)
+
+				}
+
+			} catch (e) {
+				console.warn(e);
+			}
 		});
 
-		return rv;
+		$(".spacer").append($("<div class='toc-bar-entry current-position'>"));
+
+		Reader.updateTocBarPosition(book, book.rendition.currentLocation())
+
+	},
+	updateTocBarPosition: function(book, location) {
+		const cur_pct = Math.round(location.start.location / book.locations.length() * 100);
+
+		$(".toc-bar-entry.current-position")
+				.css('left', cur_pct + '%');
 	},
 	applyStyles: function(default_only) {
 		Promise.all([
diff --git a/themes/gray.css b/themes/gray.css
index 6f8f7ed..ab2b611 100644
--- a/themes/gray.css
+++ b/themes/gray.css
@@ -7,3 +7,7 @@ body .header,
 body .footer {
 	color : #B85C57;
 }
+
+body .footer .spacer .toc-bar-entry.current-position {
+	background : #B85C57;
+}
\ No newline at end of file
diff --git a/themes/mocca.css b/themes/mocca.css
index 9005561..6deb233 100644
--- a/themes/mocca.css
+++ b/themes/mocca.css
@@ -26,3 +26,8 @@ body .header button.btn {
 	text-shadow : #534636 0px 0px;
 	border-color : #534636;
 }
+
+
+body .footer .spacer .toc-bar-entry.current-position {
+	background : #F4BC87;
+}
diff --git a/themes/night.css b/themes/night.css
index d0a7ede..2c3b816 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -6,3 +6,7 @@ body, .loading, html:-webkit-full-screen {
 body .modal {
 	color : #333;
 }
+
+body .footer .spacer .toc-bar-entry.current-position {
+	background : darkred;
+}
\ No newline at end of file
diff --git a/themes/plan9.css b/themes/plan9.css
index d3d25c8..e2a2867 100644
--- a/themes/plan9.css
+++ b/themes/plan9.css
@@ -15,3 +15,7 @@ body .header,
 body .footer {
 	color : #B85C57;
 }
+
+body .footer .spacer .toc-bar-entry.current-position {
+	background : #B85C57;
+}
\ No newline at end of file
diff --git a/themes/sepia.css b/themes/sepia.css
index 102d9c3..cb5b2d1 100644
--- a/themes/sepia.css
+++ b/themes/sepia.css
@@ -7,3 +7,7 @@ body .header,
 body .footer {
 	color : #B85C57;
 }
+
+body .footer .spacer .toc-bar-entry.current-position {
+	background : #B85C57;
+}
\ No newline at end of file