Commit 458f4728 authored by Thomas Parisot's avatar Thomas Parisot

feat(polyfill): add a 'handlers' property to PagedConfig global object

Also, export the polyfill initializer to mesure side effects
parent f2fe80d2
Pipeline #268 failed with stage
in 3 minutes and 54 seconds
...@@ -47,6 +47,13 @@ However, you can add an async `before` function or return a Promise to delay the ...@@ -47,6 +47,13 @@ However, you can add an async `before` function or return a Promise to delay the
} }
}, },
after: (flow) => { console.log("after", flow) }, after: (flow) => { console.log("after", flow) },
handlers: [
{
afterPageLayout(pageFragment, page) {
console.log(pageFragment);
}
}
]
}; };
</script> </script>
``` ```
...@@ -95,16 +102,15 @@ New handlers can be registered from `import { registerHandlers } from 'pagedjs'` ...@@ -95,16 +102,15 @@ New handlers can be registered from `import { registerHandlers } from 'pagedjs'`
```html ```html
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script> <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<script> <script>
class MyHandler extends Paged.Handler { window.PagedConfig = {
constructor(chunker, polisher, caller) { handlers: [
super(chunker, polisher, caller); {
}
afterPageLayout(pageFragment, page) { afterPageLayout(pageFragment, page) {
console.log(pageFragment); console.log(pageFragment);
} }
} }
Paged.registerHandlers(MyHandler); ]
}
</script> </script>
``` ```
......
...@@ -16,31 +16,46 @@ let ready = new Promise(function(resolve, reject){ ...@@ -16,31 +16,46 @@ let ready = new Promise(function(resolve, reject){
}; };
}); });
let config = window.PagedConfig || { export let initialize = ({previewer}) => {
let config;
return Promise.resolve(global.PagedConfig)
.then((initialConfig) => {
// we defer the creation of the config object to when the page is loaded
// so as we can create a config object after loading the polyfill
config = Object.assign({
auto: true, auto: true,
before: undefined, before: undefined,
after: undefined, after: undefined,
handlers: [],
content: undefined, content: undefined,
stylesheets: undefined, stylesheets: undefined,
renderTo: undefined renderTo: undefined
}; }, initialConfig)
})
let previewer = new Previewer(); .then(() => {
if (Array.isArray(config.handlers)) {
ready.then(async function () { return previewer.registerHandlers(...config.handlers)
let done; }
})
.then(() => {
if (config.before) { if (config.before) {
await config.before(); return config.before();
} }
})
.then(() => {
if(config.auto !== false) { if(config.auto !== false) {
done = await previewer.preview(config.content, config.stylesheets, config.renderTo); return previewer.preview(config.content, config.stylesheets, config.renderTo);
} }
})
.then((previewResult) => {
if (config.after) { if (config.after) {
await config.after(done); return config.after(previewResult);
} }
}); });
};
let previewer = new Previewer();
ready.then(() => initialize({previewer}));
export default previewer; export default previewer;
import Polyfill, { initialize } from "./polyfill.js";
import Handler from "../modules/handler.js";
import {Handlers, registeredHandlers} from "../utils/handlers.js";
describe("Polyfill", () => {
class TestHandler extends Handler {
afterPageLayout(pageFragment, page) {
console.log(pageFragment);
}
}
afterEach(() => {
delete global.PagedConfig;
});
it("should construct with default options", () => {
expect(Polyfill.handlers).toBeInstanceOf(Handlers);
expect(Polyfill).toHaveProperty("hooks", {});
expect(registeredHandlers).not.toContain(TestHandler);
});
it("should register Handler-based handlers on DOMContentReady", async () => {
window.PagedConfig = {
handlers: [TestHandler]
};
await initialize({ previewer: Polyfill });
expect(registeredHandlers).toContain(TestHandler);
});
it("should register bare object handlers on DOMContentReady", async () => {
const afterPageLayout = jest.fn();
window.PagedConfig = {
handlers: [{ afterPageLayout }]
};
await initialize({ previewer: Polyfill });
expect(registeredHandlers).toContainEqual({ afterPageLayout });
});
});
...@@ -18,6 +18,9 @@ class Previewer { ...@@ -18,6 +18,9 @@ class Previewer {
// Hooks // Hooks
this.hooks = {}; this.hooks = {};
// Handlers
this.handlers = this.initializeHandlers();
// default size // default size
this.size = { this.size = {
width: { width: {
...@@ -126,8 +129,6 @@ class Previewer { ...@@ -126,8 +129,6 @@ class Previewer {
this.polisher.setup(); this.polisher.setup();
this.handlers = this.initializeHandlers();
await this.polisher.add(...stylesheets); await this.polisher.add(...stylesheets);
let startTime = performance.now(); let startTime = performance.now();
......
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