viewer.html 2.28 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
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <title>Pagedjs Viewer</title>
  <meta content="width=device-width, initial-scale=1" name="viewport">

  <script src="../dist/paged.js"></script>

  <script>
    let ready = new Promise(function(resolve, reject){
      if (document.readyState === "interactive" || document.readyState === "complete") {
        resolve(document.readyState);
        return;
      }

      document.onreadystatechange = function ($) {
        if (document.readyState === "interactive") {
          resolve(document.readyState);
        }
      }
    });

    ready.then(async function () {
      // Create a new Previewer
      let previewer = new Paged.Previewer();

      // Get the URL to load
      let params = URLSearchParams && new URLSearchParams(document.location.search.substring(1));
      let url = params && params.get("url") && decodeURIComponent(params.get("url"));

      if (!url) {
        console.error("No 'url' parameter given.");
        return;
      }

      // Fetch and Parse Contents
      let html = await fetch(url)
        .then(response => response.text())
        .then(str => (new DOMParser()).parseFromString(str, "text/html"))

      // Gather all stylesheets from html document
      let stylesheets = Array.from(html.querySelectorAll("link[rel='stylesheet']"));
      let hrefs = stylesheets.map((sheet) => {
        return sheet.href;
      });

      // Add a stylesheet url in params
      let stylesheet = params && params.get("stylesheet") && decodeURIComponent(params.get("stylesheet"));
      if (stylesheet) {
        hrefs.push(stylesheet);
      }

      // Push all body elements to a document fragment
      let content = html.querySelectorAll('body > *');
      let fragment = document.createDocumentFragment();
      for (let i = 0; i < content.length; i++) {
        fragment.appendChild(content[i]);
      }

      // Run the Paged Preview
      let done = await previewer.preview(fragment, hrefs, document.body);
    });
  </script>

  <style>
    @media screen {

      body {
        background-color: whitesmoke;
      }

      .pagedjs_page {
        background-color: #fdfdfd;
        margin-bottom: 20px;
        flex: none;
        box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
      }

    }
  </style>
</head>

<body>

</body>

</html>