Commit 0c1bac76 authored by Fred Chasen's avatar Fred Chasen

Add viewer example

parent 88443eec
Pipeline #77 passed with stage
in 3 minutes and 5 seconds
<!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>
{
"name": "pagedjs",
"version": "0.1.10",
"version": "0.1.13",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
......
......@@ -18,8 +18,6 @@ class Previewer {
// Hooks
this.hooks = {};
this.hooks.beforePolishing = new Hook(this);
this.hooks.beforeChunking = new Hook(this);
// default size
this.size = {
......@@ -116,6 +114,7 @@ class Previewer {
}
async preview(content, stylesheets, renderTo) {
if (!content) {
content = this.wrapContent();
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment