From e3e96e95feae06835f6d9f18acc6bdf2fafddd9a Mon Sep 17 00:00:00 2001 From: Marcus Noble Date: Sat, 23 Aug 2025 06:55:26 +0100 Subject: [PATCH] Added configuration Signed-off-by: Marcus Noble --- src/BindIt.js | 67 +++++++++++++++---- src/index.html | 57 ++++++++-------- src/script.js | 172 +++++++++++++++++++++++++++++-------------------- src/style.css | 22 ++++++- 4 files changed, 206 insertions(+), 112 deletions(-) diff --git a/src/BindIt.js b/src/BindIt.js index 937ed59..4cf0799 100644 --- a/src/BindIt.js +++ b/src/BindIt.js @@ -1,8 +1,15 @@ -function bindIt(obj, base = '') { +function bindIt(obj, base = '', withFuncs = {}, onUpdate = ()=>{}) { + let arrayHandler = { + apply: function (fn, arr, argumentsList) { + obj[prop]._push(argumentsList); + triggerUpdate(bindKey, obj[prop]); + } + }; + for (let key in obj) { // Make sure all child objects are proxied too if (obj.hasOwnProperty(key) && Object.prototype.toString.call(obj[key]) === '[object Object]') { - obj[key] = bindIt(obj[key], `${base ? base + '.' : ''}${key}`); + obj[key] = bindIt(obj[key], `${base ? base + '.' : ''}${key}`, withFuncs, onUpdate); } // ...as well as arrays if (obj.hasOwnProperty(key) && Object.prototype.toString.call(obj[key]) === '[object Array]') { @@ -11,12 +18,6 @@ function bindIt(obj, base = '') { } function wrapArray(obj, prop, bindKey) { - let arrayHandler = { - apply: function (fn, arr, argumentsList) { - obj[prop]._push(argumentsList); - triggerUpdate(bindKey, obj[prop]); - } - }; if (Object.prototype.toString.call(obj[prop]) === '[object Array]') { obj[prop]._push = obj[prop].push; obj[prop].push = new Proxy(obj[prop].push, arrayHandler); @@ -32,16 +33,35 @@ function bindIt(obj, base = '') { case 'innerText': element.innerText = value; break; + case 'innerHTML': + element.innerHTML = value; + break; case 'value': element.value = value; break; + case 'checked': + element.checked = value; + break; + case 'visible': + if (value == false || value == "") { + element.style.display = 'none'; + } else { + element.style.display = ''; + } + break; default: - if (typeof window[bindType] === 'function') { + if (typeof withFuncs[bindType] === 'function') { + withFuncs[bindType].apply(element, [value]); + } else if (typeof window[bindType] === 'function') { window[bindType].apply(element, [value]); } break; } - + } + if (onUpdate !== undefined) { + requestAnimationFrame(() => { + onUpdate(); + }); } }); } @@ -50,7 +70,7 @@ function bindIt(obj, base = '') { get: function (obj, key) { if (typeof key === 'string') { // Ensure safe deep get/set (no need to set up the structute) - if (obj[key] === undefined) obj[key] = bindIt({}, `${base ? base + '.' : ''}${key}`); + if (obj[key] === undefined) obj[key] = bindIt({}, `${base ? base + '.' : ''}${key}`, withFuncs, onUpdate); return obj[key]; } }, @@ -83,10 +103,33 @@ function bindIt(obj, base = '') { } let twoWayElements = document.querySelectorAll(`[bind-it-two-way]`); + const setObjPath = (t, path, value) => { + if (typeof t != "object") throw Error("non-object") + if (path == "") throw Error("empty path") + const pos = path.indexOf(".") + return pos == -1 + ? (t[path] = value, value) + : setObjPath(t[path.slice(0, pos)], path.slice(pos + 1), value) + } for (let element of twoWayElements) { element.addEventListener('change', function () { let prop = this.getAttribute('bind-it-to'); - proxied[prop] = this.value + let bindType = this.getAttribute('bind-it-with') || 'value'; + + switch (bindType) { + case 'innerText': + setObjPath(proxied, prop, this.innerText); + break; + case 'innerHTML': + setObjPath(proxied, prop, this.innerHTML); + break; + case 'checked': + setObjPath(proxied, prop, this.checked); + break; + default: + setObjPath(proxied, prop, this.value); + break; + } }); } } diff --git a/src/index.html b/src/index.html index ab8159a..720dd96 100644 --- a/src/index.html +++ b/src/index.html @@ -38,33 +38,34 @@
-
- -
+
-
-
-
+
+
+
-
+
@@ -77,21 +78,21 @@
-
-
+
+
-
+
-
+
-
+
-
+
@@ -105,7 +106,7 @@
-
+
replies @@ -119,7 +120,9 @@ likes
-
+
+
+
@@ -127,7 +130,6 @@
-
@@ -139,17 +141,14 @@
- -
-
-
- Source code available on GitHub, GitLab, Bitbucket & my own Gitea server. -
-
-
+
+
+ Source code available on GitHub, GitLab, Bitbucket & my own Gitea server. +
+