Added style and class hook support for object values

interaapps · Mar 9, 2024 · 2f47e06 · 2f47e06
1 parent edbc285
commit 2f47e06
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/dist/jdom.js b/dist/jdom.js
diff --git a/src/template/TemplateDOMAdapter.js b/src/template/TemplateDOMAdapter.js
@@ -89,6 +89,14 @@ export default class TemplateDOMAdapter {
                         if (typeof value === 'object') {
                             elem.style = ''
                             Object.entries(value).forEach(([key, value]) => {
+                                if (value instanceof Hook) {
+                                    const hook = value
+                                    const listener = v => el.style[key] = v
+                                    el.addEventListener(':detached', () => hook.removeListener(listener))
+                                    el.addEventListener(':attached', () => hook.addListener(listener))
+
+                                    value = hook.value
+                                }
                                 elem.style[key] = value
                             })
                             return
@@ -101,6 +109,19 @@ export default class TemplateDOMAdapter {
                                 classes = value
                             } else if (typeof value === 'object') {
                                 Object.entries(value).forEach(([key, value]) => {
+                                    if (value instanceof Hook) {
+                                        const hook = value
+                                        const listener = v => {
+                                            if (v && !el.classList.contains(key)) {
+                                                el.classList.add(key)
+                                            } else if (!v && el.classList.contains(key)) {
+                                                el.classList.remove(key)
+                                            }
+                                        }
+                                        el.addEventListener(':detached', () => hook.removeListener(listener))
+                                        el.addEventListener(':attached', () => hook.addListener(listener))
+                                        value = hook.value
+                                    }
                                     if (value) {
                                         classes.push(key)
                                     }