mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[IMP] qweb: handle t-on modifiers with t-widget
This commit is contained in:
Aaron Bohy
committed by
Géry Debongnie
Géry Debongnie
parent
2f9d7ea58f
commit
1c290c1172
+21
-4
@@ -182,6 +182,10 @@ QWeb.addDirective({
|
||||
// t-widget
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
const T_WIDGET_MODS_CODE = Object.assign({}, MODS_CODE, {
|
||||
self: "if (e.target !== vn.elm) {return}",
|
||||
});
|
||||
|
||||
/**
|
||||
* The t-widget directive is certainly a complicated and hard to maintain piece
|
||||
* of code. To help you, fellow developer, if you have to maintain it, I offer
|
||||
@@ -355,7 +359,7 @@ QWeb.addDirective({
|
||||
let keepAlive = node.getAttribute("t-keepalive") ? true : false;
|
||||
|
||||
// t-on- events and t-transition
|
||||
const events: [string, string][] = [];
|
||||
const events: [string, string[], string][] = [];
|
||||
let transition: string = "";
|
||||
const attributes = (<Element>node).attributes;
|
||||
const props: { [key: string]: string } = {};
|
||||
@@ -363,7 +367,8 @@ QWeb.addDirective({
|
||||
const name = attributes[i].name;
|
||||
const value = attributes[i].textContent!;
|
||||
if (name.startsWith("t-on-")) {
|
||||
events.push([name.slice(5), value]);
|
||||
const [eventName, ...mods] = name.slice(5).split(".");
|
||||
events.push([eventName, mods, value]);
|
||||
} else if (name === "t-transition") {
|
||||
transition = value;
|
||||
} else if (!name.startsWith("t-")) {
|
||||
@@ -457,8 +462,20 @@ QWeb.addDirective({
|
||||
updateClassCode = `let cl=w${widgetID}.el.classList;for (let k in ${attVar}) {if (${attVar}[k]) {cl.add(k)} else {cl.remove(k)}}`;
|
||||
}
|
||||
let eventsCode = events
|
||||
.map(function([eventName, handler]) {
|
||||
return `vn.elm.addEventListener('${eventName}', owner['${handler}'].bind(owner));`;
|
||||
.map(function([eventName, mods, handlerName]) {
|
||||
let handler;
|
||||
if (mods.length > 0) {
|
||||
handler = `function (e) {`;
|
||||
handler += mods
|
||||
.map(function(mod) {
|
||||
return T_WIDGET_MODS_CODE[mod];
|
||||
})
|
||||
.join("");
|
||||
handler += `owner['${handlerName}'].call(owner, e);}`;
|
||||
} else {
|
||||
handler = `owner['${handlerName}'].bind(owner)`;
|
||||
}
|
||||
return `vn.elm.addEventListener('${eventName}', ${handler});`;
|
||||
})
|
||||
.join("");
|
||||
const styleExpr = tattStyle || (styleAttr ? `'${styleAttr}'` : false);
|
||||
|
||||
@@ -222,6 +222,166 @@ exports[`composition t-widget with dynamic value 2 1`] = `
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`other directives with t-widget t-on with prevent and self modifiers (order matters) 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
let utils = this.utils;
|
||||
let QWeb = this.constructor;
|
||||
let owner = context;
|
||||
var h = this.utils.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
var vn1 = h('div', p1, c1);
|
||||
//WIDGET
|
||||
let _2_index = c1.length;
|
||||
c1.push(null);
|
||||
let def3;
|
||||
let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
|
||||
let props4 = {};
|
||||
if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
|
||||
if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
|
||||
def3 = w4.__owl__.renderPromise;
|
||||
} else {
|
||||
w4.destroy();
|
||||
w4 = false;
|
||||
}
|
||||
}
|
||||
if (!w4) {
|
||||
let widgetKey4 = \`child\`;
|
||||
let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
|
||||
if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
|
||||
w4 = new W4(owner, props4);
|
||||
context.__owl__.cmap[4] = w4.__owl__.id;
|
||||
def3 = w4._prepare();
|
||||
def3 = def3.then(vnode=>{vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {e.preventDefault();if (e.target !== vn.elm) {return}owner['onEv'].call(owner, e);});}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
|
||||
} else {
|
||||
def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
|
||||
def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
|
||||
}
|
||||
extra.promises.push(def3);
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`other directives with t-widget t-on with self and prevent modifiers (order matters) 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
let utils = this.utils;
|
||||
let QWeb = this.constructor;
|
||||
let owner = context;
|
||||
var h = this.utils.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
var vn1 = h('div', p1, c1);
|
||||
//WIDGET
|
||||
let _2_index = c1.length;
|
||||
c1.push(null);
|
||||
let def3;
|
||||
let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
|
||||
let props4 = {};
|
||||
if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
|
||||
if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
|
||||
def3 = w4.__owl__.renderPromise;
|
||||
} else {
|
||||
w4.destroy();
|
||||
w4 = false;
|
||||
}
|
||||
}
|
||||
if (!w4) {
|
||||
let widgetKey4 = \`child\`;
|
||||
let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
|
||||
if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
|
||||
w4 = new W4(owner, props4);
|
||||
context.__owl__.cmap[4] = w4.__owl__.id;
|
||||
def3 = w4._prepare();
|
||||
def3 = def3.then(vnode=>{vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (e.target !== vn.elm) {return}e.preventDefault();owner['onEv'].call(owner, e);});}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
|
||||
} else {
|
||||
def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
|
||||
def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
|
||||
}
|
||||
extra.promises.push(def3);
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`other directives with t-widget t-on with self modifier 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
let utils = this.utils;
|
||||
let QWeb = this.constructor;
|
||||
let owner = context;
|
||||
var h = this.utils.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
var vn1 = h('div', p1, c1);
|
||||
//WIDGET
|
||||
let _2_index = c1.length;
|
||||
c1.push(null);
|
||||
let def3;
|
||||
let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
|
||||
let props4 = {};
|
||||
if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
|
||||
if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
|
||||
def3 = w4.__owl__.renderPromise;
|
||||
} else {
|
||||
w4.destroy();
|
||||
w4 = false;
|
||||
}
|
||||
}
|
||||
if (!w4) {
|
||||
let widgetKey4 = \`child\`;
|
||||
let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
|
||||
if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
|
||||
w4 = new W4(owner, props4);
|
||||
context.__owl__.cmap[4] = w4.__owl__.id;
|
||||
def3 = w4._prepare();
|
||||
def3 = def3.then(vnode=>{vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', owner['onEv1'].bind(owner));vn.elm.addEventListener('ev-2', function (e) {if (e.target !== vn.elm) {return}owner['onEv2'].call(owner, e);});}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
|
||||
} else {
|
||||
def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
|
||||
def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
|
||||
}
|
||||
extra.promises.push(def3);
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`other directives with t-widget t-on with stop and/or prevent modifiers 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
let utils = this.utils;
|
||||
let QWeb = this.constructor;
|
||||
let owner = context;
|
||||
var h = this.utils.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
var vn1 = h('div', p1, c1);
|
||||
//WIDGET
|
||||
let _2_index = c1.length;
|
||||
c1.push(null);
|
||||
let def3;
|
||||
let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
|
||||
let props4 = {};
|
||||
if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
|
||||
if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
|
||||
def3 = w4.__owl__.renderPromise;
|
||||
} else {
|
||||
w4.destroy();
|
||||
w4 = false;
|
||||
}
|
||||
}
|
||||
if (!w4) {
|
||||
let widgetKey4 = \`child\`;
|
||||
let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
|
||||
if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
|
||||
w4 = new W4(owner, props4);
|
||||
context.__owl__.cmap[4] = w4.__owl__.id;
|
||||
def3 = w4._prepare();
|
||||
def3 = def3.then(vnode=>{vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {e.stopPropagation();owner['onEv1'].call(owner, e);});vn.elm.addEventListener('ev-2', function (e) {e.preventDefault();owner['onEv2'].call(owner, e);});vn.elm.addEventListener('ev-3', function (e) {e.stopPropagation();e.preventDefault();owner['onEv3'].call(owner, e);});}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
|
||||
} else {
|
||||
def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
|
||||
def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
|
||||
}
|
||||
extra.promises.push(def3);
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`random stuff/miscellaneous snapshotting compiled code 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
|
||||
+146
-8
@@ -1476,6 +1476,145 @@ describe("other directives with t-widget", () => {
|
||||
expect(widget.n).toBe(1);
|
||||
});
|
||||
|
||||
test("t-on with stop and/or prevent modifiers", async () => {
|
||||
expect.assertions(7);
|
||||
env.qweb.addTemplates(`
|
||||
<templates>
|
||||
<div t-name="ParentWidget">
|
||||
<t t-widget="child"
|
||||
t-on-ev-1.stop="onEv1"
|
||||
t-on-ev-2.prevent="onEv2"
|
||||
t-on-ev-3.stop.prevent="onEv3"/>
|
||||
</div>
|
||||
</templates>
|
||||
`);
|
||||
class ParentWidget extends Widget {
|
||||
widgets = { child: Child };
|
||||
onEv1(ev) {
|
||||
expect(ev.defaultPrevented).toBe(false);
|
||||
expect(ev.cancelBubble).toBe(true);
|
||||
}
|
||||
onEv2(ev) {
|
||||
expect(ev.defaultPrevented).toBe(true);
|
||||
expect(ev.cancelBubble).toBe(false);
|
||||
}
|
||||
onEv3(ev) {
|
||||
expect(ev.defaultPrevented).toBe(true);
|
||||
expect(ev.cancelBubble).toBe(true);
|
||||
}
|
||||
}
|
||||
class Child extends Widget {}
|
||||
const widget = new ParentWidget(env);
|
||||
await widget.mount(fixture);
|
||||
|
||||
const child = children(widget)[0];
|
||||
child.trigger("ev-1");
|
||||
child.trigger("ev-2");
|
||||
child.trigger("ev-3");
|
||||
expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test("t-on with self modifier", async () => {
|
||||
env.qweb.addTemplates(`
|
||||
<templates>
|
||||
<div t-name="ParentWidget">
|
||||
<t t-widget="child" t-on-ev-1="onEv1" t-on-ev-2.self="onEv2"/>
|
||||
</div>
|
||||
<div t-name="Child"><t t-widget="child"/></div>
|
||||
</templates>
|
||||
`);
|
||||
const steps: string[] = [];
|
||||
class ParentWidget extends Widget {
|
||||
widgets = { child: Child };
|
||||
onEv1(ev) {
|
||||
steps.push("onEv1");
|
||||
}
|
||||
onEv2(ev) {
|
||||
steps.push("onEv2");
|
||||
}
|
||||
}
|
||||
class Child extends Widget {
|
||||
widgets = { child: GrandChild };
|
||||
}
|
||||
class GrandChild extends Widget {}
|
||||
const widget = new ParentWidget(env);
|
||||
await widget.mount(fixture);
|
||||
|
||||
const child = children(widget)[0];
|
||||
const grandChild = children(child)[0];
|
||||
child.trigger("ev-1");
|
||||
child.trigger("ev-2");
|
||||
expect(steps).toEqual(["onEv1", "onEv2"]);
|
||||
grandChild.trigger("ev-1");
|
||||
grandChild.trigger("ev-2");
|
||||
expect(steps).toEqual(["onEv1", "onEv2", "onEv1"]);
|
||||
expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test("t-on with self and prevent modifiers (order matters)", async () => {
|
||||
env.qweb.addTemplates(`
|
||||
<templates>
|
||||
<div t-name="ParentWidget">
|
||||
<t t-widget="child" t-on-ev.self.prevent="onEv"/>
|
||||
</div>
|
||||
<div t-name="Child"><t t-widget="child"/></div>
|
||||
</templates>
|
||||
`);
|
||||
const steps: boolean[] = [];
|
||||
class ParentWidget extends Widget {
|
||||
widgets = { child: Child };
|
||||
onEv() {}
|
||||
}
|
||||
class Child extends Widget {
|
||||
widgets = { child: GrandChild };
|
||||
}
|
||||
class GrandChild extends Widget {}
|
||||
const widget = new ParentWidget(env);
|
||||
await widget.mount(fixture);
|
||||
(<HTMLElement>fixture).addEventListener("ev", function(e) {
|
||||
steps.push(e.defaultPrevented);
|
||||
});
|
||||
|
||||
const child = children(widget)[0];
|
||||
const grandChild = children(child)[0];
|
||||
child.trigger("ev");
|
||||
grandChild.trigger("ev");
|
||||
expect(steps).toEqual([true, false]);
|
||||
expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test("t-on with prevent and self modifiers (order matters)", async () => {
|
||||
env.qweb.addTemplates(`
|
||||
<templates>
|
||||
<div t-name="ParentWidget">
|
||||
<t t-widget="child" t-on-ev.prevent.self="onEv"/>
|
||||
</div>
|
||||
<div t-name="Child"><t t-widget="child"/></div>
|
||||
</templates>
|
||||
`);
|
||||
const steps: boolean[] = [];
|
||||
class ParentWidget extends Widget {
|
||||
widgets = { child: Child };
|
||||
onEv() {}
|
||||
}
|
||||
class Child extends Widget {
|
||||
widgets = { child: GrandChild };
|
||||
}
|
||||
class GrandChild extends Widget {}
|
||||
const widget = new ParentWidget(env);
|
||||
await widget.mount(fixture);
|
||||
(<HTMLElement>fixture).addEventListener("ev", function(e) {
|
||||
steps.push(e.defaultPrevented);
|
||||
});
|
||||
|
||||
const child = children(widget)[0];
|
||||
const grandChild = children(child)[0];
|
||||
child.trigger("ev");
|
||||
grandChild.trigger("ev");
|
||||
expect(steps).toEqual([true, true]);
|
||||
expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test("t-if works with t-widget", async () => {
|
||||
env.qweb.addTemplate(
|
||||
"ParentWidget",
|
||||
@@ -2065,15 +2204,15 @@ describe("async rendering", () => {
|
||||
|
||||
let destroyCount = 0;
|
||||
class ChildA extends Widget {
|
||||
destroy() {
|
||||
destroyCount++;
|
||||
super.destroy();
|
||||
}
|
||||
destroy() {
|
||||
destroyCount++;
|
||||
super.destroy();
|
||||
}
|
||||
}
|
||||
class ChildB extends Widget {
|
||||
willStart(): any {
|
||||
return new Promise(function () {});
|
||||
}
|
||||
willStart(): any {
|
||||
return new Promise(function() {});
|
||||
}
|
||||
}
|
||||
class Parent extends Widget {
|
||||
widgets = { ChildA, ChildB };
|
||||
@@ -2092,7 +2231,6 @@ describe("async rendering", () => {
|
||||
await nextTick();
|
||||
expect(destroyCount).toBe(0);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("updating environment", () => {
|
||||
|
||||
Reference in New Issue
Block a user