viewer.html 2.16 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
<!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
45
      let hrefs = previewer.removeStyles(html);
Fred Chasen's avatar
Fred Chasen committed
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

      // 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;
74
        margin: 10px auto;
Fred Chasen's avatar
Fred Chasen committed
75 76 77 78 79 80 81 82 83 84 85 86 87
        flex: none;
        box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
      }

    }
  </style>
</head>

<body>

</body>

</html>