summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAndrew Dolgov <[email protected]>2018-02-01 21:33:49 +0300
committerAndrew Dolgov <[email protected]>2018-02-01 21:33:49 +0300
commitf7f56cc0c0307bbf7f01d2375f916e976be49cdb (patch)
treeba4d74f6a4219777124c7df560baa0aaa410f89d
parent67f4fd61b82226721ad8fd08fc4b6c8614f78668 (diff)
exp: themes
Diffstat
-rw-r--r--js/read.js76
-rw-r--r--read.html63
-rw-r--r--themes/default.css0
-rw-r--r--themes/mocca.css28
-rw-r--r--themes/night.css4
-rw-r--r--worker.js3
6 files changed, 110 insertions, 64 deletions
diff --git a/js/read.js b/js/read.js
index e096379..9d74792 100644
--- a/js/read.js
+++ b/js/read.js
@@ -109,26 +109,53 @@ function init_taps() {
function apply_line_height(elem) {
var height = elem[elem.selectedIndex].value;
- localforage.setItem("epube.lineHeight", height);
-
- window.book.setStyle("lineHeight", height + "%");
-
+ localforage.setItem("epube.lineHeight", height).then(function() {
+ apply_styles();
+ });
}
function apply_font(elem) {
var font = elem[elem.selectedIndex].value;
- localforage.setItem("epube.fontFamily", font);
-
- window.book.setStyle("fontFamily", font);
+ localforage.setItem("epube.fontFamily", font).then(function() {
+ apply_styles();
+ });
}
function apply_font_size(elem) {
var size = elem[elem.selectedIndex].value;
- localforage.setItem("epube.fontSize", size);
- window.book.setStyle("fontSize", size + "px");
+ localforage.setItem("epube.fontSize", size).then(function() {
+ apply_styles();
+ });
+}
+
+function apply_styles() {
+
+ Promise.all([
+ localforage.getItem("epube.fontSize"),
+ localforage.getItem("epube.fontFamily"),
+ localforage.getItem("epube.lineHeight"),
+ localforage.getItem("epube.theme")
+ ]).then(function(res) {
+ var fontSize = res[0] ? res[0] + "px" : DEFAULT_FONT_SIZE + "px";
+ var fontFamily = res[1] ? res[1] : DEFAULT_FONT_FAMILY;
+ var lineHeight = res[2] ? res[2] + "%" : DEFAULT_LINE_HEIGHT + "%";
+ var themeName = res[3] ? res[3] : false;
+
+ $("#reader iframe").contents().find("*")
+ .css("background", "")
+ .css("color", "")
+ .css("background-color", "")
+ .css("font-family", fontFamily)
+ .css("font-size", fontSize)
+ .css("line-height", lineHeight)
+ .css("text-align", "justify");
+
+ $("#reader").show();
+
+ });
}
@@ -183,33 +210,26 @@ function save_and_close() {
}
}
-function toggle_night_mode() {
- localforage.getItem("epube.night_mode").then(function(night) {
- night = !night;
-
- localforage.setItem("epube.night_mode", night).then(function() {
- apply_night_mode();
- });
-
+function change_theme(elem) {
+ var theme = $(elem).val();
+ localforage.setItem("epube.theme", theme).then(function() {
+ apply_theme();
});
}
-function apply_night_mode() {
- localforage.getItem("epube.night_mode").then(function(night) {
- if (night) {
+function apply_theme() {
+ localforage.getItem("epube.theme").then(function(theme) {
+ console.log('theme', theme);
- window.book.setStyle("background", "black");
- window.book.setStyle("color", "#ccc");
+ var baseUrl = window.location.href.match(/^.*\//)[0];
- $("body").addClass("night");
+ if (!theme) theme = 'default';
- } else {
+ var themeUrl = baseUrl + "/themes/" + theme + ".css";
- window.book.setStyle("background", "white");
- window.book.setStyle("color", "black");
+ $("#theme_css").attr("href", themeUrl);
+ $(book.renderer.doc).find("#theme_css").attr('href', themeUrl);
- $("body").removeClass("night");
- }
});
}
diff --git a/read.html b/read.html
index cfe096d..dab5767 100644
--- a/read.html
+++ b/read.html
@@ -20,6 +20,8 @@
<link id="favicon" rel="shortcut icon" type="image/png" href="img/favicon.png" />
<link type="text/css" rel="stylesheet" media="screen" href="css/read.css" />
+
+ <link type="text/css" rel="stylesheet" media="screen" href="themes/default.css" id="theme_css" />
</head>
<body>
@@ -40,6 +42,7 @@
<option>Arial</option>
<option>Times New Roman</option>
<option>Georgia</option>
+ <option>Courier New</option>
</select>
</div>
</div>
@@ -59,6 +62,17 @@
</div>
<div class="form-group">
+ <label class="col-sm-3 control-label">Theme</label>
+ <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>
+ </select>
+ </div>
+ </div>
+
+ <div class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<div class="text-muted">Options take effect after reload:</div>
@@ -179,6 +193,7 @@
</div>
</div>
+<div class="container">
<div class="header">
<span>
<a href="#" onclick="save_and_close()">&laquo;&nbsp;Exit</a>
@@ -196,10 +211,6 @@
<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
</button>
- <button class="btn btn-default btn-xs" onclick="toggle_night_mode()">
- <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
- </button>
-
<button class="btn btn-default btn-xs"
data-toggle="modal" data-target="#search-modal">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
@@ -231,6 +242,7 @@
Opening book...
</div>
</div>
+</div>
<script>
var _pagination_stored = 0;
@@ -247,8 +259,6 @@
}
$(document).ready(function() {
- apply_night_mode();
-
$(window).on('online', function() {
console.log("we're online, storing lastread");
@@ -352,6 +362,7 @@
});
init_taps();
+ apply_theme();
document.onkeydown = hotkey_handler;
localforage.getItem("epube.enable-fullscreen").then(function(enable) {
@@ -368,6 +379,9 @@
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) {
@@ -411,27 +425,6 @@
});
}
- var fontSize;
- var fontFamily;
- var lineHeight;
-
- Promise.all([
- localforage.getItem("epube.fontSize"),
- localforage.getItem("epube.fontFamily"),
- localforage.getItem("epube.lineHeight")
- ]).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 + "%";
-
- book.setStyle("fontSize", fontSize);
- book.setStyle("fontFamily", fontFamily);
- book.setStyle("lineHeight", lineHeight);
-
- book.setStyle("textAlign", "justify");
-
- });
-
window.book = book;
var rendered = book.renderTo("reader");
@@ -472,6 +465,10 @@
$(".font_family").val(font);
});
+ localforage.getItem("epube.theme").then(function(theme) {
+ $(".theme_name").val(theme);
+ });
+
localforage.getItem("epube.fontSize").then(function(size) {
if (!size) size = DEFAULT_FONT_SIZE;
@@ -649,16 +646,10 @@
});
book.on("renderer:chapterDisplayed", function() {
+ $("#reader").hide();
- // cleanup possibly interfering styles
- // variables defined above after reading from localforage
-
- $("#reader iframe").contents().find("*")
- .css("font-family", fontFamily)
- .css("font-size", fontSize)
- .css("line-height", lineHeight)
- .css("text-align", "justify");
-
+ apply_theme();
+ apply_styles();
});
book.on("renderer:keydown", hotkey_handler);
diff --git a/themes/default.css b/themes/default.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/themes/default.css
diff --git a/themes/mocca.css b/themes/mocca.css
new file mode 100644
index 0000000..42e88c6
--- /dev/null
+++ b/themes/mocca.css
@@ -0,0 +1,28 @@
+body {
+ background : #3B3228;
+ color : #D0C8C6;
+}
+
+body a {
+ color : #8AB3B5;
+}
+
+body a:hover {
+ color : #7BBDA4;
+}
+
+body .header,
+body .footer {
+ color : #F4BC87;
+}
+
+body .footer .location {
+ color : #BEB55B;
+}
+
+body .header button.btn {
+ background : #BB9584;
+ color : #534636;
+ text-shadow : #534636 0px 0px;
+ border-color : #534636;
+}
diff --git a/themes/night.css b/themes/night.css
new file mode 100644
index 0000000..782300b
--- /dev/null
+++ b/themes/night.css
@@ -0,0 +1,4 @@
+body {
+ background : black;
+ color : #ccc;
+}
diff --git a/worker.js b/worker.js
index dc77d67..abca0b4 100644
--- a/worker.js
+++ b/worker.js
@@ -17,6 +17,9 @@ self.addEventListener('install', function(event) {
'css/index.css',
'css/transitions.css',
'offline.html',
+ 'themes/default.css',
+ 'themes/mocca.css',
+ 'themes/night.css',
'lib/promise.js',
'lib/fetch.js',
'lib/zip.min.js',
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-05 16:03:32 +0000