Fixes to examples, and lint errors per pr #230 (by pmstss)

2025-10-05 15:32:55 +02:00 · 2015-06-30 22:50:06 -04:00 · 2015-06-30 22:50:06 -04:00 · d7371a619d
commit d7371a619d
parent 2e2d7dfb43
9 changed files with 21 additions and 142 deletions
--- a/examples/renderless.html
+++ b/examples/renderless.html
@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>EPUB.js Basic Example</title>
+
+  <script src="../dist/epub.js"></script>
+
+
+  <style type="text/css">
+    body {
+      margin: 0;
+      height: 100%;
+    }
+
+    #viewer {
+      display: block;
+      margin: 5% auto;
+      width: 80%;
+      height: 80%;
+      border: none;
+    }
+
+    #prev {
+      left: 40px;
+    }
+
+    #next {
+      right: 40px;
+    }
+
+    .arrow {
+      position: absolute;
+      top: 50%;
+      margin-top: -32px;
+      font-size: 64px;
+      color: #E2E2E2;
+      font-family: arial, sans-serif;
+      font-weight: bold;
+      cursor: pointer;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      user-select: none;
+    }
+
+    .arrow:hover {
+      color: #777;
+    }
+
+    .arrow:active {
+      color: #000;
+    }
+
+    #toc {
+      display: block;
+      margin: 10px auto;
+    }
+
+  </style>
+</head>
+<body>
+  <select id="toc"></select>
+  <!-- <iframe id="viewer"></iframe> -->
+  <div id="viewer"></div>
+  <div id="prev" class="arrow">‹</div>
+  <div id="next" class="arrow">›</div>
+
+  <script>
+    var $viewer = document.getElementById("viewer");
+    var $next = document.getElementById("next");
+    var $prev = document.getElementById("prev");
+    var currentSection;
+    var currentSectionIndex = 6;
+
+    var book = ePub("../books/moby-dick/OPS/package.opf");
+    book.loaded.navigation.then(function(toc){
+      var $select = document.getElementById("toc"),
+          docfrag = document.createDocumentFragment();
+
+      toc.forEach(function(chapter) {
+        var option = document.createElement("option");
+        option.textContent = chapter.label;
+        option.ref = chapter.href;
+
+        docfrag.appendChild(option);
+      });
+
+      $select.appendChild(docfrag);
+
+      $select.onchange = function(){
+          var index = $select.selectedIndex,
+              url = $select.options[index].ref;
+          display(url);
+          return false;
+      };
+
+      book.opened.then(function(){
+        display(currentSectionIndex);
+      });
+
+      $next.addEventListener("click", function(){
+        var displayed = display(currentSectionIndex+1);
+        if(displayed) currentSectionIndex++;
+      }, false);
+
+      $prev.addEventListener("click", function(){
+        var displayed = display(currentSectionIndex-1);
+        if(displayed) currentSectionIndex--;
+      }, false);
+
+      function display(item){
+        var section = book.spine.get(item);
+        if(section) {
+          currentSection = section;
+          section.render().then(function(html){
+            // $viewer.srcdoc = html;
+            $viewer.innerHTML = html;
+          });
+        }
+        return section;
+      }
+
+    });
+  </script>
+
+</body>
+</html>