Skip to content

Master public widgets ged #3465

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 31, 2024
Merged

Master public widgets ged #3465

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
73d86cd
implement plausible_push
ged-odoo Oct 31, 2024
dba4cd9
implement postlink
ged-odoo Oct 31, 2024
9e0215d
add support in owl for nested dynamic content syntax
ged-odoo Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
183 changes: 94 additions & 89 deletions addons/web/static/lib/owl/owl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2957,6 +2957,97 @@
return replaceDynamicParts(s, compileExpr);
}

function* generateEntries(content) {
for (let key in content) {
const value = content[key];
if (typeof value === "string") {
const [selector, directive] = key.split(":");
yield [selector, directive, value];
}
else {
for (let directive in value) {
yield [key, directive, value[directive]];
}
}
}
}
function applyDynamicContent(node, el, dynamicContent, ctx) {
const attrs = [];
const handlers = [];
const tOuts = [];
const cleanups = [];
for (let [selector, directive, value] of generateEntries(dynamicContent)) {
if (directive.startsWith("t-att-")) {
const attr = directive.slice(6);
const fn = new Function("ctx", `return ${compileExpr(value)};`);
attrs.push({ selector, attr, fn });
}
if (directive.startsWith("t-on-")) {
const event = directive.slice(5);
// const fn = new Function("ctx", "ev", `${compileExpr(value)}(ev);`);
const fn = (ev) => node.component[value](ev);
handlers.push({ selector, event, fn });
}
if (directive === "t-out") {
const fn = new Function("ctx", `return ${compileExpr(value)};`);
tOuts.push({ selector, fn });
}
}
const handleAttrs = () => {
for (let attr of attrs) {
const val = attr.fn.call(node.component, ctx);
// todo: cache the queryselector result?
const target = attr.selector === "root" ? el : el.querySelector(attr.selector);
if (target) {
target.setAttribute(attr.attr, val);
}
}
};
const handleEvents = () => {
for (let handler of handlers) {
// const val = attr.fn.call(node.component, ctx);
// todo: cache the queryselector result?
const target = handler.selector === "root" ? el : el.querySelector(handler.selector);
if (target) {
const fn = handler.fn;
target.addEventListener(handler.event, fn);
cleanups.push(() => target.removeEventListener(handler.event, fn));
}
}
};
const handleTOuts = () => {
for (let tOut of tOuts) {
const val = tOut.fn.call(node.component, ctx);
// todo: cache the queryselector result?
const target = tOut.selector === "root" ? el : el.querySelector(tOut.selector);
if (target) {
if (val instanceof Markup) {
target.innerHTML = val;
}
else {
target.textContent = val;
}
}
}
};
if (attrs.length) {
node.mounted.push(handleAttrs);
node.patched.push(handleAttrs);
}
if (handlers.length) {
node.mounted.push(handleEvents);
}
if (tOuts.length) {
node.mounted.push(handleTOuts);
node.patched.push(handleTOuts);
}
node.willUnmount.push(() => {
for (let cleanup of cleanups) {
cleanup();
}
});
}

let currentNode = null;
function saveCurrent() {
let n = currentNode;
Expand Down Expand Up @@ -3051,98 +3142,12 @@
// component will be attached
this.renderFn = app.getTemplate(xml ``).bind(this.component, ctx, this);
if (C.dynamicContent) {
this.applyDynamicContent(app._lastRootEl, C.dynamicContent, ctx);
applyDynamicContent(this, app._lastRootEl, C.dynamicContent, ctx);
}
}
this.component.setup();
currentNode = null;
}
applyDynamicContent(el, dynamicContent, ctx) {
const attrs = [];
const handlers = [];
const tOuts = [];
const cleanups = [];
for (let key in dynamicContent) {
const value = dynamicContent[key];
const parts = key.split(":");
if (parts[1].startsWith("t-att-")) {
const attr = parts[1].slice(6);
const fn = new Function("ctx", `return ${compileExpr(value)};`);
attrs.push({
selector: parts[0],
attr,
fn,
});
}
if (parts[1].startsWith("t-on-")) {
const event = parts[1].slice(5);
// const fn = new Function("ctx", "ev", `${compileExpr(value)}(ev);`);
const fn = (ev) => this.component[value](ev);
handlers.push({
selector: parts[0],
event,
fn,
});
}
if (parts[1] === "t-out") {
const fn = new Function("ctx", `return ${compileExpr(value)};`);
tOuts.push({ selector: parts[0], fn });
}
}
const handleAttrs = () => {
for (let attr of attrs) {
const val = attr.fn.call(this.component, ctx);
// todo: cache the queryselector result?
const target = attr.selector === "root" ? el : el.querySelector(attr.selector);
if (target) {
target.setAttribute(attr.attr, val);
}
}
};
const handleEvents = () => {
for (let handler of handlers) {
// const val = attr.fn.call(this.component, ctx);
// todo: cache the queryselector result?
const target = handler.selector === "root" ? el : el.querySelector(handler.selector);
if (target) {
const fn = handler.fn;
target.addEventListener(handler.event, fn);
cleanups.push(() => target.removeEventListener(handler.event, fn));
}
}
};
const handleTOuts = () => {
for (let tOut of tOuts) {
const val = tOut.fn.call(this.component, ctx);
// todo: cache the queryselector result?
const target = tOut.selector === "root" ? el : el.querySelector(tOut.selector);
if (target) {
if (val instanceof Markup) {
target.innerHTML = val;
}
else {
target.textContent = val;
}
}
}
};
if (attrs.length) {
this.mounted.push(handleAttrs);
this.patched.push(handleAttrs);
}
if (handlers.length) {
this.mounted.push(handleEvents);
}
if (tOuts.length) {
this.mounted.push(handleTOuts);
this.patched.push(handleTOuts);
}
this.willUnmount.push(() => {
for (let cleanup of cleanups) {
cleanup();
}
});
}
mountComponent(target, options) {
const fiber = new MountFiber(this, target, options);
this.app.scheduler.addFiber(fiber);
Expand Down Expand Up @@ -6204,8 +6209,8 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
Object.defineProperty(exports, '__esModule', { value: true });


__info__.date = '2024-10-31T09:01:01.443Z';
__info__.hash = '6dafe23';
__info__.date = '2024-10-31T13:49:40.891Z';
__info__.hash = '71760c8';
__info__.url = 'https://github.com/odoo/owl';


Expand Down
2 changes: 0 additions & 2 deletions addons/website/__manifest__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,8 +207,6 @@
'website/static/src/js/content/menu.js',
'website/static/src/js/content/snippets.animation.js',
'website/static/src/js/show_password.js',
'website/static/src/js/post_link.js',
'website/static/src/js/plausible.js',
'website/static/src/js/website_controller_page_listing_layout.js',
'website/static/src/js/user_custom_javascript.js',
'website/static/src/js/http_cookie.js',
Expand Down
18 changes: 18 additions & 0 deletions addons/website/static/src/active_elements/plausible_push.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Component, useAttachedEl } from "@odoo/owl";
import { registry } from "@web/core/registry";

class PlausiblePush extends Component {
static selector = ".js_plausible_push";

setup() {
const el = useAttachedEl();
const {eventName, eventParams} = el.dataset;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Original code did default eventParams to {}. Could it be that JQ's .data() did parse the dataset entry into JSON ?


window.plausible = window.plausible || function () {
(window.plausible.q = window.plausible.q || []).push(arguments);
};
window.plausible(eventName, {props: eventParams || {}});
}
}

registry.category("website.active_elements").add("website.plausible_push", PlausiblePush);
33 changes: 33 additions & 0 deletions addons/website/static/src/active_elements/post_link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { Component, onWillDestroy, useAttachedEl } from "@odoo/owl";
import { registry } from "@web/core/registry";
import { sendRequest } from "@website/js/utils";

class PostLink extends Component {
static selector = ".post_link";
static dynamicContent = {
"root:t-on-click": "onClickPost"
}

setup() {
this.el = useAttachedEl();
// Allows the link to be interacted with only when Javascript is loaded.
this.el.classList.add("o_post_link_js_loaded");
onWillDestroy(() => {
this.el.classList.remove("o_post_link_js_loaded");
});
}

onClickPost(ev) {
ev.preventDefault();
const url = this.el.dataset.post || this.el.href;
let data = {};
for (let [key, value] of Object.entries(this.el.dataset)) {
if (key.startsWith('post_')) {
data[key.slice(5)] = value;
}
}
sendRequest(url, data);
}
}

registry.category("website.active_elements").add("website.post_link", PostLink);
32 changes: 0 additions & 32 deletions addons/website/static/src/js/plausible.js
View file
Open in desktop

This file was deleted.

43 changes: 0 additions & 43 deletions addons/website/static/src/js/post_link.js
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion addons/website/static/src/js/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ function isHTTPSorNakedDomainRedirection(url1, url2) {
url1.replace(/^www\./, '') === url2.replace(/^www\./, '');
}

function sendRequest(route, params) {
export function sendRequest(route, params) {
function _addInput(form, name, value) {
let param = document.createElement('input');
param.setAttribute('type', 'hidden');
Expand Down