Updated ePubViewer with search feature and improved TOC

pgaskin · Aug 10, 2017 · 8dfbb5d · 8dfbb5d
1 parent 26188eb
commit 8dfbb5d
Show file tree

Hide file tree

Showing 4 changed files with 265 additions and 65 deletions.
diff --git a/README.md b/README.md
@@ -24,6 +24,7 @@ A easy-to-use tool to generate a web-based ePub and PDF ebook browser. All you n
 - Web based reader
     - Custom fonts, colors, sizing, spacing
     - Remembers your position
+    - Book search
     - And more
 - Search
 - And more

diff --git a/static/reader/epub/index.html b/static/reader/epub/index.html
@@ -25,6 +25,9 @@
                 <a href="javascript:ePubViewer.actions.showSidebar('info');" class="item info-button" data-if="loaded">
                     <span class="material-icons">info</span>
                 </a>
+                <a href="javascript:ePubViewer.actions.showSidebar('search');" class="item search-button" data-if="loaded">
+                    <span class="material-icons">search</span>
+                </a>
             </div>
             <div class="center">
                 <span class="nomobile">
@@ -185,6 +188,20 @@
                         </div>
                     </div>
                 </div>
+                <div class="search-sidebar sidebar-inner" data-sidebar="search">
+                    <div class="sidebar-header">Search
+                        <a href="javascript:ePubViewer.actions.closeSidebars();" class="x">
+                            <span class="material-icons">close</span>
+                        </a>
+                    </div>
+                    <div class="sidebar-contents">
+                        <form class="search-bar" onsubmit="ePubViewer.actions.handleSearch();return false;">
+                            <input type="text" class="search-box" placeholder="Search..." autocomplete="off" onkeydown="ePubViewer.actions.clearSearch();" />
+                            <button type="submit"><span class="material-icons">search</span></button>
+                        </form>
+                        <div class="search-results"></div>
+                    </div>
+                </div>
             </div>
             <div class="content">
                 <div class="welcome">