Commit fb83fbcc authored by Thomas Parisot's avatar Thomas Parisot

Alternativelly, do not run the polyfill automatically to rely on ESM module async loading to do so

parent 6dcff7dc
Pipeline #221 failed with stage
in 7 seconds
......@@ -26,38 +26,35 @@ $ npm install pagedjs
## Polyfill
The polyfill is the easiest way to replace all `@page` css. It renders the html page according to the [CSS Paged Media][] spec.
The polyfill runs automatically as soon as the DOM is ready.
```html
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<script type="module">
import {Polyfill} from 'https://unpkg.com/pagedjs/dist/paged.polyfill.esm.js';
// whenever the document content is ready
Polyfill.preview();
</script>
```
See it in action with the [Aurorae book](https://s3.amazonaws.com/pagedmedia/pagedjs/examples/polyfill.html).
Use the `auto` configuration property of the `PagedConfig` object to render only when `PagedPolyfill.preview()` is called.
Use `auto: true` in the `PagedConfig` object to render when the script is loaded:
```html
<script>
// disable the polyfill before loading its script
window.PagedConfig = {
auto: false
auto: true
};
</script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<script>
// do something else
// ...
// then runs the pollyfill manually
PagedPolyfill.preview();
</script>
```
Alternativelly, delay the rendering until the `before` configuration property of the `PagedConfig` object is resolved.
Execute code `before` or `after` the polyfill is applied:
```html
<script>
window.PagedConfig = {
auto: true,
before: () => {
return new Promise(resolve) {
// do something before the rendering
......@@ -66,29 +63,13 @@ Alternativelly, delay the rendering until the `before` configuration property of
// then runs the polyfill
resolve();
}
}
},
after: () => { ... }
};
</script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
```
### ECMAScript Module
```html
<script>
window.PagedConfig = {
auto: false
};
</script>
<script>
import PagedPolyfill from 'https://unpkg.com/pagedjs/dist/paged.polyfill.esm.js';
// ...
PagedPolyfill.preview();
</script>
```
## Previewer
```js
......
import Previewer from "./previewer";
import * as Paged from "../index";
window.Paged = Paged;
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);
}
};
});
let config = window.PagedConfig || {
auto: true,
auto: false,
before: undefined,
after: undefined,
content: undefined,
......@@ -27,21 +12,23 @@ let config = window.PagedConfig || {
let previewer = new Previewer(config.content, config.stylesheets, config.renderTo);
export {Polyfill: previewer, Paged};
ready.then(async function () {
let done;
if (config.before) {
await config.before();
}
if(config.auto !== false) {
done = await previewer.preview();
}
if (config.auto === true) {
const ready = new Promise((resolve) => {
if (document.readyState === "interactive" || document.readyState === "complete") {
resolve();
}
if (config.after) {
await config.after(done);
}
});
document.onreadystatechange = function ($) {
if (document.readyState === "interactive") {
resolve();
}
}
});
export default previewer;
ready
.then(() => config.before ? config.before() : null)
.then(() => previewer.preview())
.then(() => config.after ? config.after() : null);
}
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