JSFiddle - React, Tailwind, and code Playground

by Jitendra Pal

HTML

<script src="https://unpkg.com/[email protected]/build/libs/zip.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/epub.min.js"></script>
<div id="reader">
  <div id="toolbar">
    <div class="left">
      <span>Demo by <a href="http://github.com/geek1011" target="_blank">geek1011</a></span>
    
    </div>
    <div class="center">
      <input type="text" placeholder="Search...">
    </div>
    <div class="right">
      <button id="prev">&lt;</button>
      <button id="next">&gt;</button>
    </div>
  </div>
  <div class="main">
    <div id="sidebar">
      <form onsubmit="event.preventDefault(); window.doSearch(document.getElementById('search').value, document.getElementById('results'));">
        <input type="search" id="search" placeholder="Search..." autocomplete="off">
        <input type="submit" value="Search" id="searchbutton">
      </form>
      <div id="results">

      </div>
    </div>
    <div id="area">

    </div>
  </div>
</div>

CSS

html,
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

#reader {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: wheat;
  display: flex;
  flex-direction: column;
}

#reader #toolbar {
  flex: 0 1 auto;
  display: flex;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.05);
  padding: 10px;
}

#reader #toolbar .left {
  flex: 0 1 auto;
}

#reader #toolbar .center {
  flex: 0 1 auto;
}

#reader #toolbar .right {
  flex: 0 1 auto;
}

#reader .main {
  flex: 1 0 auto;
  display: flex;
  position: relative;
  flex-direction: row;
}

#reader .main #sidebar {
  flex: 1 1 auto;
  max-width: 15em;
  display: flex;
  flex-direction: column;
  justify-content: start;
  position: relative;
}

#reader .main #sidebar form {
  flex: 0 1 auto;
  display: flex;
}

#reader .main #sidebar form #search {
  flex: 1 0 auto;
}

#reader .main #sidebar form #searchbutton {
  flex: 0 1 auto;
}

#reader .main #sidebar #results {
  flex: 1 0 auto;
  overflow: auto;
  max-height: 85%;
}

#reader .main #area {
  flex: 1 0 auto;
  display: flex;
  position: relative;
}

#reader .main #area div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

JavaScript

book = ePub("https://s3.amazonaws.com/moby-dick/moby-dick.epub");
book.renderTo("area");
window.bookRef = book;
//console.log(book);
window.doSearch = function(q, r) {
  return new Promise(function(resolve, reject) {
  	r.innerHTML = "";
  
    var resultPromises = [];
    
    for (var i = 0; i < book.spine.length; i++) {
      var spineItem = book.spine[i];
      resultPromises.push(new Promise(function(resolve, reject) {
        new Promise(function(resolve, reject) {
          resolve(new EPUBJS.Chapter(spineItem, book.store, book.credentials));
        }).then(function(chapter) {
          return new Promise(function(resolve, reject) {
            chapter.load().then(function() {
              resolve(chapter);
            }).catch(reject);
          });
        }).then(function(chapter) {
          return Promise.resolve(chapter.find(q));
        }).then(function(result) {
          resolve(result);
        });
      }));
    }
    console.log(resultPromises);
    Promise.all(resultPromises).then(function(results) {
      return new Promise(function(resolve, reject) {
        console.log(results);
        r.innerText += JSON.stringify(results);
        resolve(results);
      });
    });
  });
}

document.getElementById("prev").onclick = function() {
  book.prevPage();
}

document.getElementById("next").onclick = function() {
  book.nextPage();
}