Commit 31384bec authored by Fred Chasen's avatar Fred Chasen

Add triggerSync for hooks, add onOverflow and onBreakToken hooks

parent bcdc3877
...@@ -127,6 +127,12 @@ onAtPage(atPageNode) ...@@ -127,6 +127,12 @@ onAtPage(atPageNode)
onRule(ruleNode) onRule(ruleNode)
onDeclaration(declarationNode, ruleNode) onDeclaration(declarationNode, ruleNode)
onContent(contentNode, declarationNode, ruleNode) onContent(contentNode, declarationNode, ruleNode)
// Layout
layoutNode(node)
renderNode(node, sourceNode)
onOverflow(overflow, rendered, bounds)
onBreakToken(breakToken, overflow, rendered)
``` ```
## Setup ## Setup
......
...@@ -10,7 +10,24 @@ ...@@ -10,7 +10,24 @@
<link rel="coverpage" href="images/cover.jpg" /> <link rel="coverpage" href="images/cover.jpg" />
<script src="../../../dist/paged.polyfill.js"></script> <script src="../../../dist/paged.polyfill.js"></script>
<script>
class TestHandler extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
onOverflow(overflow, rendered, bounds) {
console.log("overflow", overflow);
// return false;
}
onBreakToken(breakToken, overflow, rendered) {
console.log("breakToken", breakToken);
// return false;
}
}
Paged.registerHandlers(TestHandler);
</script>
<style> <style>
@page { @page {
size: 'letter'; size: 'letter';
......
...@@ -93,8 +93,8 @@ class Chunker { ...@@ -93,8 +93,8 @@ class Chunker {
this.hooks.layout = new Hook(this); this.hooks.layout = new Hook(this);
this.hooks.renderNode = new Hook(this); this.hooks.renderNode = new Hook(this);
this.hooks.layoutNode = new Hook(this); this.hooks.layoutNode = new Hook(this);
this.hooks.beforeOverflow = new Hook(this); this.hooks.onOverflow = new Hook(this);
this.hooks.overflow = new Hook(this); this.hooks.onBreakToken = new Hook();
this.hooks.afterPageLayout = new Hook(this); this.hooks.afterPageLayout = new Hook(this);
this.hooks.afterRendered = new Hook(this); this.hooks.afterRendered = new Hook(this);
...@@ -377,9 +377,8 @@ class Chunker { ...@@ -377,9 +377,8 @@ class Chunker {
if (!blank) { if (!blank) {
// Listen for page overflow // Listen for page overflow
page.onOverflow(async (overflowToken) => { page.onOverflow((overflowToken) => {
console.warn("overflow on", page.id, overflowToken); console.warn("overflow on", page.id, overflowToken);
await this.hooks.overflow.trigger(overflowToken, this);
// Only reflow while rendering // Only reflow while rendering
if (this.rendered) { if (this.rendered) {
......
...@@ -48,7 +48,8 @@ class Layout { ...@@ -48,7 +48,8 @@ class Layout {
this.hooks.renderNode = new Hook(); this.hooks.renderNode = new Hook();
this.hooks.layoutNode = new Hook(); this.hooks.layoutNode = new Hook();
this.hooks.beforeOverflow = new Hook(); this.hooks.beforeOverflow = new Hook();
this.hooks.overflow = new Hook(); this.hooks.onOverflow = new Hook();
this.hooks.onBreakToken = new Hook();
} }
this.maxChars = maxChars || MAX_CHARS_PER_BREAK; this.maxChars = maxChars || MAX_CHARS_PER_BREAK;
...@@ -210,7 +211,12 @@ class Layout { ...@@ -210,7 +211,12 @@ class Layout {
dest.appendChild(clone); dest.appendChild(clone);
} }
this.hooks && this.hooks.renderNode.trigger(clone); let nodeHooks = this.hooks.renderNode.triggerSync(clone, node);
nodeHooks.forEach((newNode) => {
if (typeof newNode != "undefined") {
clone = newNode;
}
});
return clone; return clone;
} }
...@@ -328,9 +334,24 @@ class Layout { ...@@ -328,9 +334,24 @@ class Layout {
let overflow = this.findOverflow(rendered, bounds); let overflow = this.findOverflow(rendered, bounds);
let breakToken; let breakToken;
let overflowHooks = this.hooks.onOverflow.triggerSync(overflow, rendered, bounds, this);
overflowHooks.forEach((newOverflow) => {
if (typeof newOverflow != "undefined") {
overflow = newOverflow;
}
});
if (overflow) { if (overflow) {
breakToken = this.createBreakToken(overflow, rendered, source); breakToken = this.createBreakToken(overflow, rendered, source);
let breakHooks = this.hooks.onBreakToken.triggerSync(breakToken, overflow, rendered, this);
breakHooks.forEach((newToken) => {
if (typeof newToken != "undefined") {
breakToken = newToken;
}
});
if (breakToken && breakToken.node && extract) { if (breakToken && breakToken.node && extract) {
this.removeOverflow(overflow); this.removeOverflow(overflow);
} }
......
...@@ -33,7 +33,7 @@ class Hook { ...@@ -33,7 +33,7 @@ class Hook {
/** /**
* Triggers a hook to run all functions * Triggers a hook to run all functions
* @example this.content.trigger(args).then(function(){...}); * @example this.content.trigger(args).then(function(){...});
* @return {undefined} void * @return {Promise} results
*/ */
trigger(){ trigger(){
var args = arguments; var args = arguments;
...@@ -47,13 +47,36 @@ class Hook { ...@@ -47,13 +47,36 @@ class Hook {
// Task is a function that returns a promise // Task is a function that returns a promise
promises.push(executing); promises.push(executing);
} }
// Otherwise Task resolves immediately, continue // Otherwise Task resolves immediately, add resolved promise with result
promises.push(new Promise((resolve, reject) => {
resolve(executing);
}));
}); });
return Promise.all(promises); return Promise.all(promises);
} }
/**
* Triggers a hook to run all functions synchronously
* @example this.content.trigger(args).then(function(){...});
* @return {Array} results
*/
triggerSync(){
var args = arguments;
var context = this.context;
var results = [];
this.hooks.forEach(function(task) {
var executing = task.apply(context, args);
results.push(executing);
});
return results;
}
// Adds a function to be run before a hook completes // Adds a function to be run before a hook completes
list(){ list(){
return this.hooks; return this.hooks;
......
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