mirrors/vector-im-hydrogen-web
1
0
Fork 0
mirror of https://github.com/vector-im/hydrogen-web.git synced 2024-12-23 03:25:12 +01:00
Code Issues Projects Releases Wiki Activity

support bindings for className object

Browse Source
This commit is contained in:
Bruno Windels 2019-06-14 23:08:41 +02:00
parent f9038e2af9
commit 0a6c50b3bb
1 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/ui/web/Template.js
View File

@ -1,5 +1,18 @@
import { setAttribute, text, TAG_NAMES } from "./html.js";
function classNames(obj, value) {
return Object.entries(obj).reduce((cn, [name, enabled]) => {
if (typeof enabled === "function") {
enabled = enabled(value);
}
if (enabled) {
return (cn.length ? " " : "") + name;
} else {
return cn;
}
}, "");
}
/*
supports
- event handlers (attribute fn value with name that starts with on)
@ -20,11 +33,6 @@ export default class Template {
this._attach();
}
// TODO: obj needs to support bindings
classes(obj) {
Object.entries(obj).filter(([, value]) => value).map(([key]) => key).join(" ");
}
root() {
return this._root;
}
@ -98,6 +106,10 @@ export default class Template {
binding();
}
_addClassNamesBinding(node, obj) {
this._addAttributeBinding(node, "className", value => classNames(obj, value));
}
_addTextBinding(fn) {
const initialValue = fn(this._value);
const node = text(initialValue);
@ -130,7 +142,10 @@ export default class Template {
if (attributes) {
for(let [key, value] of Object.entries(attributes)) {
const isFn = typeof value === "function";
if (key.startsWith("on") && key.length > 2 && isFn) {
// binding for className as object of className => enabled
if (key === "className" && typeof value === "object" && value !== null) {
this._addClassNamesBinding(node, value);
} else if (key.startsWith("on") && key.length > 2 && isFn) {
const eventName = key.substr(2, 1).toLowerCase() + key.substr(3);
const handler = value;
this._addEventListener(node, eventName, handler);
@ -204,6 +219,3 @@ for (const tag of TAG_NAMES) {
return this.el(tag, ... params);
};
}