epub.html 4.58 KB
Newer Older
Fred Chasen's avatar
Fred Chasen committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Chunking Test - Epub Parser</title>
    <script>this.ready=new Promise(function($){document.addEventListener('DOMContentLoaded',$,{once:true})})</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.1/jszip.min.js"></script>
    <script src="https://unpkg.com/epubjs@0.4.2/dist/epub.min.js"></script>
    <script src="../dist/paged.js"></script>

    <link rel="stylesheet" type="text/css" href="assets/styles/index.css">
    <!-- <link rel="stylesheet" type="text/css" href="assets/styles/mody-dick.css"> -->
</head>
<body>
  <script>
    ready.then(async function () {
      let preview = true;
      let url = new URL(window.location);
      let params = new URLSearchParams(url.search);
      for(var pair of params.entries()) {
        if(pair[0] === "preview") {
          preview = (pair[1] === "true");
        }
      }

      let pages = document.querySelector(".pages");
      let scale = ((window.innerWidth * .9 ) / pages.offsetWidth);

      pages.style.transform = `scale(${scale}) translate(${(window.innerWidth / 2) - ((pages.offsetWidth * scale / 2) ) }px, 0)`;

      let inputElement = document.getElementById("input");

      inputElement.addEventListener('change', function (e) {
        var file = e.target.files[0];
        if (window.FileReader) {
          var reader = new FileReader();
          reader.onload = openBook;
          reader.readAsArrayBuffer(file);

          let pages = document.querySelectorAll(".section");
          for (var i = 0; i < pages.length; i++) {
            pages[i].remove();
          }
        }
      });

      async function sections(spine) {
        let text = "";
        let pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
        let links = /<link[^>]*rel\s*=\s*["']\s*stylesheet\s*["'][^>]*>/im;

        for (let section of spine) {
          let href = section.href;
          let styles = "";
          let html = await fetch(href)
            .then((response) => {
              return response.text();
            }).then((t) => {
              let matches = pattern.exec(t);
              styles = links.exec(t);
              return matches && matches.length && matches[1];
            });
          text += "<paged-body>";

          // if (styles) {
          //   for (let i = 0; i < styles.length; i++) {
          //     text += styles[i];
          //   }
          // }

          text += html + "</paged-body>";
        }
        return text;
      }

      function addStyles(resources) {
        let head = document.querySelector("head");
        let styles = resources.filter((r) => {
          return r.type === "text/css";
        });
        for (let style of styles) {
          let link = document.createElement("link");
          link.rel = "stylesheet";
          link.type = "text/css";
          link.href = style.href;
          head.appendChild(link);
        }
      }

      function openBook(e){
        var bookData = e.target.result;

        let epub = ePub(bookData, {replacements: true} ).then((book) => {
          this.book = book;

          addStyles(this.book.resources)

          return sections(this.book.spine);
        }).then((text) => {
          let t0 = performance.now();

          let flow = new Paged.Chunker(text, preview).then((flow) => {
            let t1 = performance.now();

            console.log("Rendering " + flow.total + " pages took " + (t1 - t0) + " milliseconds.");
          });

          epub = undefined;
        });
      }
    });
  </script>
<body>

  <div id="controls">
    <input type="file" id="input">
	</div>

  <div class="pages">
    <template id="page-template">
    <div class="page">
      <div class="top">
        <div class="top-left-corner"></div>
        <div class="top-left"></div>
        <div class="top-center"></div>
        <div class="top-right"></div>
        <div class="top-right-corner"></div>
      </div>
      <div class="right">
        <div class="right-top"></div>
        <div class="right-middle"></div>
        <div class="right-bottom"></div>
      </div>
      <div class="left">
        <div class="left-top"></div>
        <div class="left-middle"></div>
        <div class="left-bottom"></div>
      </div>
      <div class="bottom">
        <div class="bottom-left-corner"></div>
        <div class="bottom-left"></div>
        <div class="bottom-center"></div>
        <div class="bottom-right"></div>
        <div class="bottom-right-corner"></div>
      </div>
      <div class="area"></div>
    </div>
    </template>
  </div>
</body>
</html>