Skip to content

Instantly share code, notes, and snippets.

@bendavis78

bendavis78/index.html

Created January 20, 2020 23:08
Show Gist options
  • Save bendavis78/22b518d963c9e0e7b1ec3fd2cdb134ff to your computer and use it in GitHub Desktop.
Save bendavis78/22b518d963c9e0e7b1ec3fd2cdb134ff to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html>
<head>
<script src="load-pages.js"></script>
<script>window.PagedConfig = {auto: false};</script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
@media screen {
.pagedjs_sheet {
box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.15);
margin: 20px auto;
}
}
@page {
size: A4;
margin: .75in .75in .75in .75in;
}
@page cover {
size: A4;
margin: .01in;
@top-left{ content: none; }
@top-center{ content: none; }
@top-right{ content: none; }
@bottom-left{ content: none; }
background-color: darkblue;
color: white;
}
section.cover {
page: cover;
page-break-after: always;
margin-top: 10em;
font-size: 2em;
text-align:center;
}
</style>
</head>
<body>
<script>
loadPages().then(pages => {
return window.PagedPolyfill.preview();
}).then(() => {
console.log('preview loaded');
});
</script>
</body>
</html>
Raw
load-pages.js
/* Simulates loading pages asyncronously */
(function() {
function html(content) {
const template = document.createElement('template');
template.innerHTML = content;
return template;
}
const coverTemplate = html`
<section class="cover">
<h1>Cover</h1>
<p>Lorem ipsum dolor sit amet</p>
</section>
`;
const chapterTemplate = html`
<section class="chapter">
<h1>Chapter 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum at tempor commodo ullamcorper a. Leo duis ut diam quam nulla porttitor massa. Iaculis at erat pellentesque adipiscing. Facilisi nullam vehicula ipsum a arcu cursus. Leo a diam sollicitudin tempor id eu nisl nunc mi. Neque sodales ut etiam sit. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Nisl vel pretium lectus quam id leo in vitae turpis. Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Aliquet eget sit amet tellus. Venenatis tellus in metus vulputate eu scelerisque felis. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Aliquet bibendum enim facilisis gravida neque. Semper feugiat nibh sed pulvinar proin gravida. Non nisi est sit amet facilisis magna etiam tempor. Fames ac turpis egestas integer eget aliquet nibh praesent. Ornare suspendisse sed nisi lacus sed viverra tellus in hac.</p>
<p>In mollis nunc sed id semper risus. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Faucibus interdum posuere lorem ipsum dolor sit amet. Platea dictumst quisque sagittis purus sit amet volutpat consequat mauris. Senectus et netus et malesuada fames ac turpis. Leo vel fringilla est ullamcorper eget nulla facilisi etiam. Eu sem integer vitae justo eget magna fermentum iaculis. Lacus sed viverra tellus in hac. In egestas erat imperdiet sed. Amet porttitor eget dolor morbi non arcu risus. In nulla posuere sollicitudin aliquam. In metus vulputate eu scelerisque felis. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Senectus et netus et malesuada fames ac. Massa tincidunt dui ut ornare.</p>
<p>Sit amet venenatis urna cursus eget nunc scelerisque. Sed vulputate odio ut enim blandit volutpat maecenas. Sed sed risus pretium quam vulputate dignissim suspendisse in est. Integer vitae justo eget magna fermentum iaculis. Dictum fusce ut placerat orci nulla pellentesque dignissim. Ut sem viverra aliquet eget sit amet. Felis eget velit aliquet sagittis id. Eget felis eget nunc lobortis mattis. Purus non enim praesent elementum facilisis leo vel. Sed enim ut sem viverra aliquet eget sit amet tellus. Porta non pulvinar neque laoreet. Faucibus vitae aliquet nec ullamcorper sit amet. Tincidunt ornare massa eget egestas.</p>
<p>Tortor dignissim convallis aenean et tortor. Augue eget arcu dictum varius duis at. Blandit volutpat maecenas volutpat blandit aliquam etiam. Donec ac odio tempor orci dapibus ultrices in iaculis. Eget est lorem ipsum dolor sit. Congue quisque egestas diam in arcu cursus euismod quis. Vestibulum morbi blandit cursus risus. Hendrerit dolor magna eget est. Metus dictum at tempor commodo. At urna condimentum mattis pellentesque. Tortor id aliquet lectus proin nibh nisl condimentum. Senectus et netus et malesuada fames ac. Enim facilisis gravida neque convallis a cras. Pharetra vel turpis nunc eget lorem dolor sed. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet.</p>
<p>Non quam lacus suspendisse faucibus interdum posuere. Tristique senectus et netus et malesuada fames ac turpis egestas. Egestas diam in arcu cursus euismod quis viverra. Quam elementum pulvinar etiam non. Pellentesque habitant morbi tristique senectus et netus et malesuada. Amet justo donec enim diam. In fermentum posuere urna nec tincidunt praesent semper. Faucibus et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Pharetra vel turpis nunc eget lorem dolor sed. Nam aliquam sem et tortor consequat. Adipiscing tristique risus nec feugiat in fermentum posuere. Commodo nulla facilisi nullam vehicula ipsum a arcu. Morbi blandit cursus risus at ultrices mi tempus imperdiet. Sed faucibus turpis in eu. Dui ut ornare lectus sit amet est. Diam vulputate ut pharetra sit amet aliquam id. Turpis tincidunt id aliquet risus feugiat in ante metus dictum.</p>
</section>
`;
window.loadPages = function() {
return new Promise((resolve, reject) => {
//append new nodes directly to document.body
document.body.appendChild(coverTemplate.content.cloneNode(true));
document.body.appendChild(chapterTemplate.content.cloneNode(true));
resolve();
});
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment