diff options
author | Andrew Dolgov <[email protected]> | 2020-09-15 13:07:40 +0300 |
---|---|---|
committer | Andrew Dolgov <[email protected]> | 2020-09-15 13:07:40 +0300 |
commit | 80ae1536d167000d2979fc354a84ab4923513df8 (patch) | |
tree | c232635ddb28a199a1aca3ade2079543c15eaca4 | |
parent | b8e5b9c7b7a94de28c6e51a7d996668d271e6b10 (diff) |
add TOC overview bar
-rw-r--r-- | css/read.css | 33 | ||||
-rw-r--r-- | js/reader.js | 72 | ||||
-rw-r--r-- | themes/gray.css | 4 | ||||
-rw-r--r-- | themes/mocca.css | 5 | ||||
-rw-r--r-- | themes/night.css | 4 | ||||
-rw-r--r-- | themes/plan9.css | 4 | ||||
-rw-r--r-- | themes/sepia.css | 4 |
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 |