Refactoring axo element handling

modules/ppcp-axo/resources/js/Components/FormFieldGroup.js

@@ -0,0 +1,98 @@
+
+class MockData {
+
+    constructor(config) {
+        this.data = {};
+
+        this.baseSelector = config.baseSelector;
+        this.contentSelector = config.contentSelector;
+        this.fields = config.fields || {};
+        this.template = config.template;
+
+        this.active = false;
+    }
+
+    setData(data) {
+        this.data = data;
+        this.refresh();
+    }
+
+    getDataValue(path) {
+        if (!path) {
+            return '';
+        }
+        const value = path.split('.').reduce((acc, key) => (acc && acc[key] !== undefined) ? acc[key] : undefined, this.data);
+        return value ? value : '';
+    }
+
+    activate() {
+        this.active = true;
+        this.refresh();
+    }
+
+    deactivate() {
+        this.active = false;
+        this.refresh();
+    }
+
+    toggle() {
+        this.active ? this.deactivate() : this.activate();
+    }
+
+    refresh() {
+        let content = document.querySelector(this.contentSelector);
+
+        if (!content) {
+            return;
+        }
+
+        content.innerHTML = '';
+
+        Object.keys(this.fields).forEach((key) => {
+            const field = this.fields[key];
+
+            if (this.active) {
+                this.hideField(field.selector);
+                //this.showField(this.contentSelector);
+            } else {
+                this.showField(field.selector);
+                //this.hideField(this.contentSelector);
+            }
+
+            if (typeof this.template === 'function') {
+                content.innerHTML = this.template({
+                    value: (valueKey) => {
+                        return this.getDataValue(this.fields[valueKey].valuePath);
+                    },
+                    isEmpty: () => {
+                        let isEmpty = true;
+                        Object.values(this.fields).forEach((valueField) => {
+                            if (this.getDataValue(valueField.valuePath)) {
+                                isEmpty = false;
+                                return false;
+                            }
+                        });
+                        return isEmpty;
+                    }
+                });
+            }
+
+        });
+    }
+
+    showField(selector) {
+        const field = document.querySelector(this.baseSelector + ' ' + selector);
+        if (field) {
+            field.classList.remove('ppcp-axo-field-hidden');
+        }
+    }
+
+    hideField(selector) {
+        const field = document.querySelector(this.baseSelector + ' ' + selector);
+        if (field) {
+            field.classList.add('ppcp-axo-field-hidden');
+        }
+    }
+}
+
+export default MockData;