mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[IMP] support modifiers with t-on directive
Supported modifiers are stop, prevent and self. Closes #115.
This commit is contained in:
Aaron Bohy
committed by
Géry Debongnie
Géry Debongnie
parent
13b31458da
commit
8a32d823cd
+19
@@ -361,6 +361,25 @@ is what makes a template _alive_. There are two different use cases.
|
||||
The suffix (`click` in this example) is simply the name of the actual DOM
|
||||
event.
|
||||
|
||||
In order to remove the DOM event details from the event handlers (like calls
|
||||
to `event.preventDefault`) and let them focus on data logic, _modifiers_ can
|
||||
be specified as additional suffixes of the `t-on` directive.
|
||||
|
||||
| Modifier | Description |
|
||||
| ---------- | ----------------------------------------------------------------- |
|
||||
| `.stop` | calls `event.stopPropagation()` before calling the method |
|
||||
| `.prevent` | calls `event.preventDefault()` before calling the method |
|
||||
| `.self` | calls the method only if the `event.target` is the element itself |
|
||||
|
||||
```xml
|
||||
<button t-on-click.stop="someMethod">Do something</button>
|
||||
```
|
||||
|
||||
Note that modifiers can be combined (ex: `t-on-click.stop.prevent`), and that
|
||||
the order may matter. For instance `t-on-click.prevent.self` will prevent all
|
||||
clicks while `t-on-click.self.prevent` will only prevent clicks on the
|
||||
element itself.
|
||||
|
||||
2. Register an event handler on a component. This will not capture a DOM event,
|
||||
but rather a _business_ event:
|
||||
|
||||
|
||||
+35
-12
@@ -16,33 +16,56 @@ import { QWeb, UTILS } from "./qweb_core";
|
||||
//------------------------------------------------------------------------------
|
||||
// t-on
|
||||
//------------------------------------------------------------------------------
|
||||
// these are pieces of code that will be injected into the event handler if
|
||||
// modifiers are specified
|
||||
const MODS_CODE = {
|
||||
prevent: "e.preventDefault();",
|
||||
self: "if (e.target !== this.elm) {return}",
|
||||
stop: "e.stopPropagation();"
|
||||
};
|
||||
|
||||
QWeb.addDirective({
|
||||
name: "on",
|
||||
priority: 90,
|
||||
atNodeCreation({ ctx, fullName, value, nodeID }) {
|
||||
ctx.rootContext.shouldDefineOwner = true;
|
||||
const eventName = fullName.slice(5);
|
||||
const [eventName, ...mods] = fullName.slice(5).split(".");
|
||||
if (!eventName) {
|
||||
throw new Error("Missing event name with t-on directive");
|
||||
}
|
||||
let extraArgs;
|
||||
let handler = value.replace(/\(.*\)/, function(args) {
|
||||
let handlerName = value.replace(/\(.*\)/, function(args) {
|
||||
extraArgs = args.slice(1, -1);
|
||||
return "";
|
||||
});
|
||||
let error = `(function () {throw new Error('Missing handler \\'' + '${handler}' + \`\\' when evaluating template '${ctx.templateName.replace(
|
||||
/`/g,
|
||||
"'"
|
||||
)}'\`)})()`;
|
||||
ctx.addIf(`!context['${handlerName}']`);
|
||||
ctx.addLine(
|
||||
`throw new Error('Missing handler \\'' + '${handlerName}' + \`\\' when evaluating template '${ctx.templateName.replace(
|
||||
/`/g,
|
||||
"'"
|
||||
)}'\`)`
|
||||
);
|
||||
ctx.closeIf();
|
||||
let params = extraArgs
|
||||
? `owner, ${ctx.formatExpression(extraArgs)}`
|
||||
: "owner";
|
||||
let handler;
|
||||
if (mods.length > 0) {
|
||||
handler = `function (e) {`;
|
||||
handler += mods
|
||||
.map(function(mod) {
|
||||
return MODS_CODE[mod];
|
||||
})
|
||||
.join("");
|
||||
handler += `context['${handlerName}'].call(${params}, e);}`;
|
||||
} else {
|
||||
handler = `context['${handlerName}'].bind(${params})`;
|
||||
}
|
||||
if (extraArgs) {
|
||||
ctx.addLine(
|
||||
`p${nodeID}.on['${eventName}'] = (context['${handler}'] || ${error}).bind(owner, ${ctx.formatExpression(
|
||||
extraArgs
|
||||
)});`
|
||||
);
|
||||
ctx.addLine(`p${nodeID}.on['${eventName}'] = ${handler};`);
|
||||
} else {
|
||||
ctx.addLine(
|
||||
`extra.handlers['${eventName}' + ${nodeID}] = extra.handlers['${eventName}' + ${nodeID}] || (context['${handler}'] || ${error}).bind(owner);`
|
||||
`extra.handlers['${eventName}' + ${nodeID}] = extra.handlers['${eventName}' + ${nodeID}] || ${handler};`
|
||||
);
|
||||
ctx.addLine(
|
||||
`p${nodeID}.on['${eventName}'] = extra.handlers['${eventName}' + ${nodeID}];`
|
||||
|
||||
@@ -1154,7 +1154,10 @@ exports[`t-on can bind event handler 1`] = `
|
||||
var h = this.utils.h;
|
||||
let c1 = [], p1 = {key:1,on:{}};
|
||||
var vn1 = h('button', p1, c1);
|
||||
extra.handlers['click' + 1] = extra.handlers['click' + 1] || (context['add'] || (function () {throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner);
|
||||
if (!context['add']) {
|
||||
throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)
|
||||
}
|
||||
extra.handlers['click' + 1] = extra.handlers['click' + 1] || context['add'].bind(owner);
|
||||
p1.on['click'] = extra.handlers['click' + 1];
|
||||
c1.push({text: \`Click\`});
|
||||
return vn1;
|
||||
@@ -1168,7 +1171,10 @@ exports[`t-on can bind handlers with arguments 1`] = `
|
||||
var h = this.utils.h;
|
||||
let c1 = [], p1 = {key:1,on:{}};
|
||||
var vn1 = h('button', p1, c1);
|
||||
p1.on['click'] = (context['add'] || (function () {throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner, 5);
|
||||
if (!context['add']) {
|
||||
throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)
|
||||
}
|
||||
p1.on['click'] = context['add'].bind(owner, 5);
|
||||
c1.push({text: \`Click\`});
|
||||
return vn1;
|
||||
}"
|
||||
@@ -1181,7 +1187,10 @@ exports[`t-on can bind handlers with empty object (with non empty inner string 1
|
||||
var h = this.utils.h;
|
||||
let c1 = [], p1 = {key:1,on:{}};
|
||||
var vn1 = h('button', p1, c1);
|
||||
p1.on['click'] = (context['doSomething'] || (function () {throw new Error('Missing handler \\\\'' + 'doSomething' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner, {});
|
||||
if (!context['doSomething']) {
|
||||
throw new Error('Missing handler \\\\'' + 'doSomething' + \`\\\\' when evaluating template 'test'\`)
|
||||
}
|
||||
p1.on['click'] = context['doSomething'].bind(owner, {});
|
||||
c1.push({text: \`Click\`});
|
||||
return vn1;
|
||||
}"
|
||||
@@ -1194,7 +1203,10 @@ exports[`t-on can bind handlers with empty object 1`] = `
|
||||
var h = this.utils.h;
|
||||
let c1 = [], p1 = {key:1,on:{}};
|
||||
var vn1 = h('button', p1, c1);
|
||||
p1.on['click'] = (context['doSomething'] || (function () {throw new Error('Missing handler \\\\'' + 'doSomething' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner, {});
|
||||
if (!context['doSomething']) {
|
||||
throw new Error('Missing handler \\\\'' + 'doSomething' + \`\\\\' when evaluating template 'test'\`)
|
||||
}
|
||||
p1.on['click'] = context['doSomething'].bind(owner, {});
|
||||
c1.push({text: \`Click\`});
|
||||
return vn1;
|
||||
}"
|
||||
@@ -1226,7 +1238,10 @@ exports[`t-on can bind handlers with loop variable as argument 1`] = `
|
||||
let c6 = [], p6 = {key:6,on:{}};
|
||||
var vn6 = h('a', p6, c6);
|
||||
c5.push(vn6);
|
||||
p6.on['click'] = (context['activate'] || (function () {throw new Error('Missing handler \\\\'' + 'activate' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner, context['action']);
|
||||
if (!context['activate']) {
|
||||
throw new Error('Missing handler \\\\'' + 'activate' + \`\\\\' when evaluating template 'test'\`)
|
||||
}
|
||||
p6.on['click'] = context['activate'].bind(owner, context['action']);
|
||||
c6.push({text: \`link\`});
|
||||
}
|
||||
return vn1;
|
||||
@@ -1240,7 +1255,10 @@ exports[`t-on can bind handlers with object arguments 1`] = `
|
||||
var h = this.utils.h;
|
||||
let c1 = [], p1 = {key:1,on:{}};
|
||||
var vn1 = h('button', p1, c1);
|
||||
p1.on['click'] = (context['add'] || (function () {throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner, {val: 5});
|
||||
if (!context['add']) {
|
||||
throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)
|
||||
}
|
||||
p1.on['click'] = context['add'].bind(owner, {val: 5});
|
||||
c1.push({text: \`Click\`});
|
||||
return vn1;
|
||||
}"
|
||||
@@ -1253,9 +1271,15 @@ exports[`t-on can bind two event handlers 1`] = `
|
||||
var h = this.utils.h;
|
||||
let c1 = [], p1 = {key:1,on:{}};
|
||||
var vn1 = h('button', p1, c1);
|
||||
extra.handlers['click' + 1] = extra.handlers['click' + 1] || (context['handleClick'] || (function () {throw new Error('Missing handler \\\\'' + 'handleClick' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner);
|
||||
if (!context['handleClick']) {
|
||||
throw new Error('Missing handler \\\\'' + 'handleClick' + \`\\\\' when evaluating template 'test'\`)
|
||||
}
|
||||
extra.handlers['click' + 1] = extra.handlers['click' + 1] || context['handleClick'].bind(owner);
|
||||
p1.on['click'] = extra.handlers['click' + 1];
|
||||
extra.handlers['dblclick' + 1] = extra.handlers['dblclick' + 1] || (context['handleDblClick'] || (function () {throw new Error('Missing handler \\\\'' + 'handleDblClick' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner);
|
||||
if (!context['handleDblClick']) {
|
||||
throw new Error('Missing handler \\\\'' + 'handleDblClick' + \`\\\\' when evaluating template 'test'\`)
|
||||
}
|
||||
extra.handlers['dblclick' + 1] = extra.handlers['dblclick' + 1] || context['handleDblClick'].bind(owner);
|
||||
p1.on['dblclick'] = extra.handlers['dblclick' + 1];
|
||||
c1.push({text: \`Click\`});
|
||||
return vn1;
|
||||
@@ -1269,13 +1293,135 @@ exports[`t-on handler is bound to proper owner 1`] = `
|
||||
var h = this.utils.h;
|
||||
let c1 = [], p1 = {key:1,on:{}};
|
||||
var vn1 = h('button', p1, c1);
|
||||
extra.handlers['click' + 1] = extra.handlers['click' + 1] || (context['add'] || (function () {throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner);
|
||||
if (!context['add']) {
|
||||
throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)
|
||||
}
|
||||
extra.handlers['click' + 1] = extra.handlers['click' + 1] || context['add'].bind(owner);
|
||||
p1.on['click'] = extra.handlers['click' + 1];
|
||||
c1.push({text: \`Click\`});
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on t-on with prevent and self modifiers (order matters) 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
let owner = context;
|
||||
var h = this.utils.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
var vn1 = h('div', p1, c1);
|
||||
let c2 = [], p2 = {key:2,on:{}};
|
||||
var vn2 = h('button', p2, c2);
|
||||
c1.push(vn2);
|
||||
if (!context['onClick']) {
|
||||
throw new Error('Missing handler \\\\'' + 'onClick' + \`\\\\' when evaluating template 'test'\`)
|
||||
}
|
||||
extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {e.preventDefault();if (e.target !== this.elm) {return}context['onClick'].call(owner, e);};
|
||||
p2.on['click'] = extra.handlers['click' + 2];
|
||||
let c3 = [], p3 = {key:3};
|
||||
var vn3 = h('span', p3, c3);
|
||||
c2.push(vn3);
|
||||
c3.push({text: \`Button\`});
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on t-on with prevent and/or stop modifiers 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
let owner = context;
|
||||
var h = this.utils.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
var vn1 = h('div', p1, c1);
|
||||
let c2 = [], p2 = {key:2,on:{}};
|
||||
var vn2 = h('button', p2, c2);
|
||||
c1.push(vn2);
|
||||
if (!context['onClickPrevented']) {
|
||||
throw new Error('Missing handler \\\\'' + 'onClickPrevented' + \`\\\\' when evaluating template 'test'\`)
|
||||
}
|
||||
extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {e.preventDefault();context['onClickPrevented'].call(owner, e);};
|
||||
p2.on['click'] = extra.handlers['click' + 2];
|
||||
c2.push({text: \`Button 1\`});
|
||||
let c3 = [], p3 = {key:3,on:{}};
|
||||
var vn3 = h('button', p3, c3);
|
||||
c1.push(vn3);
|
||||
if (!context['onClickStopped']) {
|
||||
throw new Error('Missing handler \\\\'' + 'onClickStopped' + \`\\\\' when evaluating template 'test'\`)
|
||||
}
|
||||
extra.handlers['click' + 3] = extra.handlers['click' + 3] || function (e) {e.stopPropagation();context['onClickStopped'].call(owner, e);};
|
||||
p3.on['click'] = extra.handlers['click' + 3];
|
||||
c3.push({text: \`Button 2\`});
|
||||
let c4 = [], p4 = {key:4,on:{}};
|
||||
var vn4 = h('button', p4, c4);
|
||||
c1.push(vn4);
|
||||
if (!context['onClickPreventedAndStopped']) {
|
||||
throw new Error('Missing handler \\\\'' + 'onClickPreventedAndStopped' + \`\\\\' when evaluating template 'test'\`)
|
||||
}
|
||||
extra.handlers['click' + 4] = extra.handlers['click' + 4] || function (e) {e.preventDefault();e.stopPropagation();context['onClickPreventedAndStopped'].call(owner, e);};
|
||||
p4.on['click'] = extra.handlers['click' + 4];
|
||||
c4.push({text: \`Button 3\`});
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on t-on with self and prevent modifiers (order matters) 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
let owner = context;
|
||||
var h = this.utils.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
var vn1 = h('div', p1, c1);
|
||||
let c2 = [], p2 = {key:2,on:{}};
|
||||
var vn2 = h('button', p2, c2);
|
||||
c1.push(vn2);
|
||||
if (!context['onClick']) {
|
||||
throw new Error('Missing handler \\\\'' + 'onClick' + \`\\\\' when evaluating template 'test'\`)
|
||||
}
|
||||
extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {if (e.target !== this.elm) {return}e.preventDefault();context['onClick'].call(owner, e);};
|
||||
p2.on['click'] = extra.handlers['click' + 2];
|
||||
let c3 = [], p3 = {key:3};
|
||||
var vn3 = h('span', p3, c3);
|
||||
c2.push(vn3);
|
||||
c3.push({text: \`Button\`});
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on t-on with self modifier 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
let owner = context;
|
||||
var h = this.utils.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
var vn1 = h('div', p1, c1);
|
||||
let c2 = [], p2 = {key:2,on:{}};
|
||||
var vn2 = h('button', p2, c2);
|
||||
c1.push(vn2);
|
||||
if (!context['onClick']) {
|
||||
throw new Error('Missing handler \\\\'' + 'onClick' + \`\\\\' when evaluating template 'test'\`)
|
||||
}
|
||||
extra.handlers['click' + 2] = extra.handlers['click' + 2] || context['onClick'].bind(owner);
|
||||
p2.on['click'] = extra.handlers['click' + 2];
|
||||
let c3 = [], p3 = {key:3};
|
||||
var vn3 = h('span', p3, c3);
|
||||
c2.push(vn3);
|
||||
c3.push({text: \`Button\`});
|
||||
let c4 = [], p4 = {key:4,on:{}};
|
||||
var vn4 = h('button', p4, c4);
|
||||
c1.push(vn4);
|
||||
if (!context['onClickSelf']) {
|
||||
throw new Error('Missing handler \\\\'' + 'onClickSelf' + \`\\\\' when evaluating template 'test'\`)
|
||||
}
|
||||
extra.handlers['click' + 4] = extra.handlers['click' + 4] || function (e) {if (e.target !== this.elm) {return}context['onClickSelf'].call(owner, e);};
|
||||
p4.on['click'] = extra.handlers['click' + 4];
|
||||
let c5 = [], p5 = {key:5};
|
||||
var vn5 = h('span', p5, c5);
|
||||
c4.push(vn5);
|
||||
c5.push({text: \`Button\`});
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-raw literal 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
|
||||
@@ -969,6 +969,118 @@ describe("t-on", () => {
|
||||
const node = renderToDOM(qweb, "test", owner, { handlers: [] });
|
||||
(<HTMLElement>node).click();
|
||||
});
|
||||
|
||||
test("t-on with prevent and/or stop modifiers", async () => {
|
||||
expect.assertions(7);
|
||||
qweb.addTemplate(
|
||||
"test",
|
||||
`<div>
|
||||
<button t-on-click.prevent="onClickPrevented">Button 1</button>
|
||||
<button t-on-click.stop="onClickStopped">Button 2</button>
|
||||
<button t-on-click.prevent.stop="onClickPreventedAndStopped">Button 3</button>
|
||||
</div>`
|
||||
);
|
||||
let owner = {
|
||||
onClickPrevented(e) {
|
||||
expect(e.defaultPrevented).toBe(true);
|
||||
expect(e.cancelBubble).toBe(false);
|
||||
},
|
||||
onClickStopped(e) {
|
||||
expect(e.defaultPrevented).toBe(false);
|
||||
expect(e.cancelBubble).toBe(true);
|
||||
},
|
||||
onClickPreventedAndStopped(e) {
|
||||
expect(e.defaultPrevented).toBe(true);
|
||||
expect(e.cancelBubble).toBe(true);
|
||||
}
|
||||
};
|
||||
const node = renderToDOM(qweb, "test", owner, { handlers: [] });
|
||||
|
||||
const buttons = (<HTMLElement>node).getElementsByTagName("button");
|
||||
buttons[0].click();
|
||||
buttons[1].click();
|
||||
buttons[2].click();
|
||||
});
|
||||
|
||||
test("t-on with self modifier", async () => {
|
||||
expect.assertions(2);
|
||||
qweb.addTemplate(
|
||||
"test",
|
||||
`<div>
|
||||
<button t-on-click="onClick"><span>Button</span></button>
|
||||
<button t-on-click.self="onClickSelf"><span>Button</span></button>
|
||||
</div>`
|
||||
);
|
||||
let steps: string[] = [];
|
||||
let owner = {
|
||||
onClick(e) {
|
||||
steps.push("onClick");
|
||||
},
|
||||
onClickSelf(e) {
|
||||
steps.push("onClickSelf");
|
||||
}
|
||||
};
|
||||
const node = renderToDOM(qweb, "test", owner, { handlers: [] });
|
||||
|
||||
const buttons = (<HTMLElement>node).getElementsByTagName("button");
|
||||
const spans = (<HTMLElement>node).getElementsByTagName("span");
|
||||
spans[0].click();
|
||||
spans[1].click();
|
||||
buttons[0].click();
|
||||
buttons[1].click();
|
||||
|
||||
expect(steps).toEqual(["onClick", "onClick", "onClickSelf"]);
|
||||
});
|
||||
|
||||
test("t-on with self and prevent modifiers (order matters)", async () => {
|
||||
expect.assertions(2);
|
||||
qweb.addTemplate(
|
||||
"test",
|
||||
`<div>
|
||||
<button t-on-click.self.prevent="onClick"><span>Button</span></button>
|
||||
</div>`
|
||||
);
|
||||
let steps: boolean[] = [];
|
||||
let owner = {
|
||||
onClick() {}
|
||||
};
|
||||
const node = renderToDOM(qweb, "test", owner, { handlers: [] });
|
||||
(<HTMLElement>node).addEventListener("click", function(e) {
|
||||
steps.push(e.defaultPrevented);
|
||||
});
|
||||
|
||||
const button = (<HTMLElement>node).getElementsByTagName("button")[0];
|
||||
const span = (<HTMLElement>node).getElementsByTagName("span")[0];
|
||||
span.click();
|
||||
button.click();
|
||||
|
||||
expect(steps).toEqual([false, true]);
|
||||
});
|
||||
|
||||
test("t-on with prevent and self modifiers (order matters)", async () => {
|
||||
expect.assertions(2);
|
||||
qweb.addTemplate(
|
||||
"test",
|
||||
`<div>
|
||||
<button t-on-click.prevent.self="onClick"><span>Button</span></button>
|
||||
</div>`
|
||||
);
|
||||
let steps: boolean[] = [];
|
||||
let owner = {
|
||||
onClick() {}
|
||||
};
|
||||
const node = renderToDOM(qweb, "test", owner, { handlers: [] });
|
||||
(<HTMLElement>node).addEventListener("click", function(e) {
|
||||
steps.push(e.defaultPrevented);
|
||||
});
|
||||
|
||||
const button = (<HTMLElement>node).getElementsByTagName("button")[0];
|
||||
const span = (<HTMLElement>node).getElementsByTagName("span")[0];
|
||||
span.click();
|
||||
button.click();
|
||||
|
||||
expect(steps).toEqual([true, true]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("t-ref", () => {
|
||||
|
||||
Reference in New Issue
Block a user