Skip to content
This repository has been archived by the owner on Jun 27, 2020. It is now read-only.

Commit

Permalink
Improved ePubViewer UI and fixed sidebar bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@pgaskin
pgaskin committed Jul 25, 2017
1 parent 4d9cf6d commit 8f463fd
Show file tree
Hide file tree
Showing 3 changed files with 235 additions and 137 deletions.
238 changes: 126 additions & 112 deletions static/reader/epub/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,143 +44,146 @@
</div>
<div class="main">
<div class="sidebar">
<div class="toc-sidebar" data-sidebar="toc">
<div class="toc-sidebar sidebar-inner" data-sidebar="toc">
<div class="sidebar-header">Table of Contents
<a href="javascript:ePubViewer.actions.closeSidebars();" class="x">
<span class="material-icons">close</span>
</a>
</div>
<div class="toc">

<div class="sidebar-contents">
<div class="toc"></div>
</div>
</div>
<div class="info-sidebar" data-sidebar="info">
<div class="info-sidebar sidebar-inner" data-sidebar="info">
<div class="sidebar-header">Info
<a href="javascript:ePubViewer.actions.closeSidebars();" class="x">
<span class="material-icons">close</span>
</a>
</div>
<div>
<div class="book-info">
<div class="cover">
<img src="" alt="cover" data-src="cover-url" data-if="cover-url">
<div class="sidebar-contents">
<div>
<div class="book-info">
<div class="cover">
<img src="" alt="cover" data-src="cover-url" data-if="cover-url">
</div>
<div class="meta">
<div class="book-title" data-text="book-title"></div>
<div class="book-author" data-text="book-author"></div>
</div>
</div>
<div class="meta">
<div class="book-title" data-text="book-title"></div>
<div class="book-author" data-text="book-author"></div>
</div>
</div>
<div class="progress-info">
<div class="percent-read" data-if="percent-read">
<span data-text="percent-read" data-if="percent-read"></span><span class="percent">% read</span>
</div>
<div class="pages" data-if="total-pages">
<span class="page">Page</span>
<span data-text="current-page"></span>
<span class="of"> of </span>
<span data-text="total-pages"></span>
<div class="progress-info">
<div class="percent-read" data-if="percent-read">
<span data-text="percent-read" data-if="percent-read"></span><span class="percent">% read</span>
</div>
<div class="pages" data-if="total-pages">
<span class="page">Page</span>
<span data-text="current-page"></span>
<span class="of"> of </span>
<span data-text="total-pages"></span>
</div>
</div>
</div>
</div>
</div>
<div class="settings-sidebar" data-sidebar="settings">
<div class="settings-sidebar sidebar-inner" data-sidebar="settings">
<div class="sidebar-header">Settings
<a href="javascript:ePubViewer.actions.closeSidebars();" class="x">
<span class="material-icons">close</span>
</a>
</div>
<div>
<div class="control">
<div class="label">Font</div>
<select autocomplete="off" data-setting="font" onchange="ePubViewer.functions.updateSettingsFromSelectors()">
<option value="OpenSans" selected>Open Sans</option>
<option value="ArbutusSlab">Arbutus Slab</option>
<option value="DroidSerif">Droid Serif</option>
<option value="SourceCodePro">Source Code Pro</option>
<option value="SourceSansPro">Source Sans Pro</option>
</select>
</div>
<div class="control">
<div class="label">Theme</div>
<select autocomplete="off" data-setting="theme" onchange="ePubViewer.functions.updateSettingsFromSelectors()">
<option value="SepiaLight">Sepia</option>
<option value="SepiaDark">Sepia Dark</option>
<option value="White" selected>White</option>
<option value="Black">Black</option>
<option value="Gray" selected>Gray</option>
<option value="Dark">Dark</option>
<option value="SolarizedLight">Solarized Light</option>
<option value="SolarizedDark">Solarized Dark</option>
</select>
</div>
<div class="control">
<div class="label">Line Spacing</div>
<select autocomplete="off" data-setting="line-height" onchange="ePubViewer.functions.updateSettingsFromSelectors()">
<option value="1">1</option>
<option value="1.1">1.1</option>
<option value="1.2">1.2</option>
<option value="1.3">1.3</option>
<option value="1.4">1.4</option>
<option value="1.5" selected>1.5</option>
<option value="1.6">1.6</option>
<option value="1.7">1.7</option>
<option value="1.8">1.8</option>
<option value="1.9">1.9</option>
<option value="2">2</option>
<option value="2.2">2.2</option>
<option value="2.4">2.4</option>
<option value="2.6">2.6</option>
<option value="2.8">2.8</option>
<option value="3">3</option>
</select>
</div>
<div class="control">
<div class="label">Font Size</div>
<select autocomplete="off" data-setting="font-size" onchange="ePubViewer.functions.updateSettingsFromSelectors()">
<option value="9pt">9</option>
<option value="10pt">10</option>
<option value="11pt" selected>11</option>
<option value="12pt">12</option>
<option value="13pt">13</option>
<option value="14pt">14</option>
<option value="15pt">15</option>
<option value="16pt">16</option>
<option value="17pt">17</option>
<option value="18pt">18</option>
</select>
</div>
<div class="control">
<div class="label">Margin</div>
<select autocomplete="off" data-setting="margin" onchange="ePubViewer.functions.updateSettingsFromSelectors()">
<option value="1%">1%</option>
<option value="2%">2%</option>
<option value="3%">3%</option>
<option value="4%">4%</option>
<option value="5%" selected>5%</option>
<option value="6%">6%</option>
<option value="7%">7%</option>
<option value="8%">8%</option>
<option value="9%">9%</option>
<option value="10%">10%</option>
</select>
<div class="sidebar-contents">
<div>
<div class="control">
<div class="label">Font</div>
<select autocomplete="off" data-setting="font" onchange="ePubViewer.functions.updateSettingsFromSelectors()">
<option value="OpenSans" selected>Open Sans</option>
<option value="ArbutusSlab">Arbutus Slab</option>
<option value="DroidSerif">Droid Serif</option>
<option value="SourceCodePro">Source Code Pro</option>
<option value="SourceSansPro">Source Sans Pro</option>
</select>
</div>
<div class="control">
<div class="label">Theme</div>
<select autocomplete="off" data-setting="theme" onchange="ePubViewer.functions.updateSettingsFromSelectors()">
<option value="SepiaLight">Sepia</option>
<option value="White" selected>White</option>
<option value="Black">Black</option>
<option value="Gray" selected>Gray</option>
<option value="Dark">Dark</option>
<option value="SolarizedLight">Solarized Light</option>
<option value="SolarizedDark">Solarized Dark</option>
</select>
</div>
<div class="control">
<div class="label">Line Spacing</div>
<select autocomplete="off" data-setting="line-height" onchange="ePubViewer.functions.updateSettingsFromSelectors()">
<option value="1">1</option>
<option value="1.1">1.1</option>
<option value="1.2">1.2</option>
<option value="1.3">1.3</option>
<option value="1.4">1.4</option>
<option value="1.5" selected>1.5</option>
<option value="1.6">1.6</option>
<option value="1.7">1.7</option>
<option value="1.8">1.8</option>
<option value="1.9">1.9</option>
<option value="2">2</option>
<option value="2.2">2.2</option>
<option value="2.4">2.4</option>
<option value="2.6">2.6</option>
<option value="2.8">2.8</option>
<option value="3">3</option>
</select>
</div>
<div class="control">
<div class="label">Font Size</div>
<select autocomplete="off" data-setting="font-size" onchange="ePubViewer.functions.updateSettingsFromSelectors()">
<option value="9pt">9</option>
<option value="10pt">10</option>
<option value="11pt" selected>11</option>
<option value="12pt">12</option>
<option value="13pt">13</option>
<option value="14pt">14</option>
<option value="15pt">15</option>
<option value="16pt">16</option>
<option value="17pt">17</option>
<option value="18pt">18</option>
</select>
</div>
<div class="control">
<div class="label">Margin</div>
<select autocomplete="off" data-setting="margin" onchange="ePubViewer.functions.updateSettingsFromSelectors()">
<option value="1%">1%</option>
<option value="2%">2%</option>
<option value="3%">3%</option>
<option value="4%">4%</option>
<option value="5%" selected>5%</option>
<option value="6%">6%</option>
<option value="7%">7%</option>
<option value="8%">8%</option>
<option value="9%">9%</option>
<option value="10%">10%</option>
</select>
</div>
<div class="control">
<div class="label">Fullscreen</div>
<button onclick="ePubViewer.actions.fullScreen()">Fullscreen</button>
</div>
</div>
<div class="control">
<div class="label">Fullscreen</div>
<button onclick="ePubViewer.actions.fullScreen()">Fullscreen</button>
<div class="about">
<br>
<small>
<a href="javascript:ePubViewer.actions.settingsReset();">Reset Settings</a><br>
<a href="javascript:ePubViewer.actions.allReset();">Reset All</a>
</small>
<br><br>
<small>
<a href="http://github.com/geek1011/ePubViewer/issues" target="_blank">Report a bug</a><br><br>
<a href="https://github.com/geek1011/ePubViewer">ePubViewer</a> Copyright 2017 <a href="https://geek1011.github.io">Patrick G</a>
</small>
</div>
</div>
<div class="about">
<br>
<small>
<a href="javascript:ePubViewer.actions.settingsReset();">Reset Settings</a><br>
<a href="javascript:ePubViewer.actions.allReset();">Reset All</a>
</small>
<br><br>
<small>
<a href="http://github.com/geek1011/ePubViewer/issues" target="_blank">Report a bug</a><br><br>
<a href="https://github.com/geek1011/ePubViewer">ePubViewer</a> Copyright 2017 <a href="https://geek1011.github.io">Patrick G</a>
</small>
</div>
</div>
</div>
<div class="content">
Expand Down Expand Up @@ -218,6 +221,17 @@
</div>
</div>
</div>
<div class="error banner load-error">
Unknown error loading ePubViewer. Please try using a different browser. If the issue still persists, please <a href="https://github.com/geek1011/ePubViewer/issues">open an issue</a>.
</div>
<div class="error banner incompatible-browser">
Your browser does not support ePubViewer. Please <a href="https://browsehappy.com">upgrade</a> to a modern browser and try again.
</div>
<script>
ePubViewerLoadError = window.setTimeout(function() {
document.body.parentElement.className = document.body.parentElement.className + " load-error";
}, 2000);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="epubjs/libs/localforage.min.js"></script>
Expand Down
49 changes: 38 additions & 11 deletions static/reader/epub/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
(function(d){
var c = " ", f = "flex", fw = "-webkit-"+f, e = d.createElement('b');
try {
e.style.display = fw;
e.style.display = f;
c += (e.style.display == f || e.style.display == fw) ? f : "no-"+f;
} catch(e) {
c += "no-"+f;
}
d.documentElement.className += c;
})(document);

ePubViewer = {};
ePubViewer.state = {
"loaded": false,
Expand All @@ -16,35 +28,38 @@ ePubViewer.state = {
ePubViewer.themes = {
"SepiaLight": {
"background-color": "#FBF0D9",
"color": "#704214"
},
"SepiaDark": {
"color": "#FBF0D9",
"background-color": "#704214"
"color": "#704214",
"light": true
},
"White": {
"color": "#000000",
"background-color": "#FFFFFF"
"background-color": "#FFFFFF",
"light": true
},
"Black": {
"background-color": "#000000",
"color": "#FFFFFF"
"color": "#FFFFFF",
"light": false
},
"Gray": {
"background-color": "#333333",
"color": "#EEEEEE"
"color": "#EEEEEE",
"light": false
},
"Dark": {
"background-color": "#262c2e",
"color": "#f0f2f3"
"color": "#f0f2f3",
"light": false
},
"SolarizedLight": {
"background-color": "#fdf6e3",
"color": "#657b83"
"color": "#657b83",
"light": true
},
"SolarizedDark": {
"color": "#839496",
"background-color": "#002b36"
"background-color": "#002b36",
"light": false
},
};
ePubViewer.fonts = {
Expand Down Expand Up @@ -241,6 +256,16 @@ ePubViewer.functions.applySettings = function () {
var font = ePubViewer.fonts[ePubViewer.settings.font] || ePubViewer.fonts.ArbutusSlab;
var theme = ePubViewer.themes[ePubViewer.settings.theme] || ePubViewer.themes.SepiaLight;

try {
if (theme["light"]) {
document.body.classList.remove("dark");
document.body.classList.add("light");
} else {
document.body.classList.add("dark");
document.body.classList.remove("light");
}
} catch (ex) {}

try {
var doc = ePubViewer.state.book.renderer.doc;
if (doc.getElementById("ePubViewerSettings") === null) {
Expand Down Expand Up @@ -638,5 +663,7 @@ ePubViewer.init = function () {
});
}
})();
window.clearTimeout(ePubViewerLoadError);
document.body.parentElement.classList.remove("load-error");
};
ePubViewer.init();
Loading

0 comments on commit 8f463fd

Please sign in to comment.