diff options
author | Andrew Dolgov <[email protected]> | 2018-02-01 21:56:10 +0300 |
---|---|---|
committer | Andrew Dolgov <[email protected]> | 2018-02-01 22:36:46 +0300 |
commit | 0af56d18e86ac90cdd53d8e79781777b3fa23688 (patch) | |
tree | c7bf32de005aa3ed3bc8c53c91b1e4dce1fc9541 | |
parent | f7f56cc0c0307bbf7f01d2375f916e976be49cdb (diff) |
various fixes related to multi-theme support
-rw-r--r-- | css/read.css | 16 | ||||
-rw-r--r-- | js/read.js | 9 | ||||
-rw-r--r-- | read.html | 61 | ||||
-rw-r--r-- | themes/mocca.css | 2 | ||||
-rw-r--r-- | themes/night.css | 3 | ||||
-rw-r--r-- | worker.js | 1 |
6 files changed, 65 insertions, 27 deletions
diff --git a/css/read.css b/css/read.css index f1f1172..6b9ddd2 100644 --- a/css/read.css +++ b/css/read.css @@ -1,11 +1,3 @@ -body.night { - background : black; - color : #999; -} - -body.night .loading { - background : black; -} .loading { position : absolute; color : #999; @@ -37,7 +29,7 @@ body.night .loading { .footer { bottom : 5px; left : 0px; - width : 100%; + width : 100%; height : 24px; } .header, .footer { @@ -76,7 +68,7 @@ body.night .loading { top : 32px; bottom : 32px; left : 96px; - right : 96px; + right : 96px; } @media (max-width: 992px) { @@ -98,7 +90,7 @@ body.night .loading { right : 48px; } .toolbar { - width : 128px; + width : 96px; } } @@ -108,7 +100,7 @@ body.night .loading { right : 32px; } .toolbar { - width : 96px; + width : 64px; } } @@ -144,7 +144,12 @@ function apply_styles() { var lineHeight = res[2] ? res[2] + "%" : DEFAULT_LINE_HEIGHT + "%"; var themeName = res[3] ? res[3] : false; - $("#reader iframe").contents().find("*") + book.setStyle("fontSize", fontSize); + book.setStyle("fontFamily", fontFamily); + book.setStyle("lineHeight", lineHeight); + book.setStyle("textAlign", "justify"); + + $("#reader iframe").contents().find("p") .css("background", "") .css("color", "") .css("background-color", "") @@ -153,8 +158,6 @@ function apply_styles() { .css("line-height", lineHeight) .css("text-align", "justify"); - $("#reader").show(); - }); } @@ -66,8 +66,9 @@ <div class="col-sm-9"> <select class="theme_name form-control" onchange="change_theme(this)"> <option value="default">Default</option> - <option value="night">Night</option> <option value="mocca">Mocca</option> + <option value="night">Night</option> + <option value="plan9">Plan9</option> </select> </div> </div> @@ -259,6 +260,8 @@ } $(document).ready(function() { + apply_theme(); + $(window).on('online', function() { console.log("we're online, storing lastread"); @@ -362,13 +365,25 @@ }); init_taps(); - apply_theme(); document.onkeydown = hotkey_handler; localforage.getItem("epube.enable-fullscreen").then(function(enable) { _enable_fullscreen = enable; }); + EPUBJS.Hooks.register("beforeChapterDisplay").applyTheme = function(callback, renderer) { + var baseUrl = window.location.href.match(/^.*\//)[0]; + +console.log('tn', themeName); + + $(book.renderer.doc.head) + .append($("<link rel='stylesheet' id='theme_css' type='text/css'>") + .attr('href', baseUrl + 'themes/' + themeName + '.css')); + + + if (callback) callback(); + } + EPUBJS.Hooks.register("beforeChapterDisplay").swipeDetection = function(callback, renderer) { var baseUrl = window.location.href.match(/^.*\//)[0]; @@ -379,9 +394,6 @@ EPUBJS.core.addCss(baseUrl + "css/reader.css", null, renderer.doc.head); - $(book.renderer.doc.head) - .append("<link rel='stylesheet' id='theme_css' type='text/css' href='themes/default.css'>") - localforage.getItem("epube.disable-swipes").then(function(noswipes) { if (!noswipes) { @@ -425,9 +437,30 @@ }); } - window.book = book; + var fontSize; + var fontFamily; + var lineHeight; + var themeName; + + Promise.all([ + localforage.getItem("epube.fontSize"), + localforage.getItem("epube.fontFamily"), + localforage.getItem("epube.lineHeight"), + localforage.getItem("epube.theme") + ]).then(function(res) { + fontSize = res[0] ? res[0] + "px" : DEFAULT_FONT_SIZE + "px"; + fontFamily = res[1] ? res[1] : DEFAULT_FONT_FAMILY; + lineHeight = res[2] ? res[2] + "%" : DEFAULT_LINE_HEIGHT + "%"; + themeName = res[3] ? res[3] : 'default'; + + book.setStyle("fontSize", fontSize); + book.setStyle("fontFamily", fontFamily); + book.setStyle("lineHeight", lineHeight); + book.setStyle("textAlign", "justify"); + }); - var rendered = book.renderTo("reader"); + window.book = book; + rendered = book.renderTo("reader"); $('#settings-modal').on('shown.bs.modal', function() { @@ -646,10 +679,18 @@ }); book.on("renderer:chapterDisplayed", function() { - $("#reader").hide(); - apply_theme(); - apply_styles(); + // variables defined above after reading from localforage + + $("#reader iframe").contents().find("p") + .css("background", "") + .css("color", "") + .css("background-color", "") + .css("font-family", fontFamily) + .css("font-size", fontSize) + .css("line-height", lineHeight) + .css("text-align", "justify"); + }); book.on("renderer:keydown", hotkey_handler); diff --git a/themes/mocca.css b/themes/mocca.css index 42e88c6..fd27f9c 100644 --- a/themes/mocca.css +++ b/themes/mocca.css @@ -1,4 +1,4 @@ -body { +body, .loading { background : #3B3228; color : #D0C8C6; } diff --git a/themes/night.css b/themes/night.css index 782300b..12c6d87 100644 --- a/themes/night.css +++ b/themes/night.css @@ -1,4 +1,5 @@ -body { +body, .loading { background : black; color : #ccc; } + @@ -20,6 +20,7 @@ self.addEventListener('install', function(event) { 'themes/default.css', 'themes/mocca.css', 'themes/night.css', + 'themes/plan9.css', 'lib/promise.js', 'lib/fetch.js', 'lib/zip.min.js', |