@cocreate/elements 1.3.18 → 1.4.3

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [1.4.3](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.4.2...v1.4.3) (2021-11-26)
+
+
+### Bug Fixes
+
+* update dependencies ([f733f85](https://github.com/CoCreate-app/CoCreate-elements/commit/f733f85b60f867fd68a1f50974308f2117974c93))
+
+## [1.4.2](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.4.1...v1.4.2) (2021-11-23)
+
+
+### Bug Fixes
+
+* update dependencies ([e097490](https://github.com/CoCreate-app/CoCreate-elements/commit/e0974902933a9bb56903e2ba4ba906072d59f2b6))
+
+## [1.4.1](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.4.0...v1.4.1) (2021-11-23)
+
+
+### Bug Fixes
+
+* impoved the way checkbox and multiple select is handled. Commented change eventListener ([99b7160](https://github.com/CoCreate-app/CoCreate-elements/commit/99b71600a644eed41461b910e96bb6b053069dfe))
+
+# [1.4.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.3.18...v1.4.0) (2021-11-21)
+
+
+### Features
+
+* added attribute get-value to get a value from a target element ([d24b60c](https://github.com/CoCreate-app/CoCreate-elements/commit/d24b60cc7a00d3899311be4bf7ea2fc2c798c4a7))
+
 ## [1.3.18](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.3.17...v1.3.18) (2021-11-20)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.3.18",
+  "version": "1.4.3",
   "description": "Fetch content into any html element by using html5 attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags as changes are broadcasted in realtime",
   "keywords": [
     "elements",
@@ -61,9 +61,9 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/action": "^1.3.15",
-    "@cocreate/crud-client": "^1.4.29",
-    "@cocreate/docs": "^1.2.53",
-    "@cocreate/observer": "^1.3.45"
+    "@cocreate/action": "^1.3.18",
+    "@cocreate/crud-client": "^1.4.34",
+    "@cocreate/docs": "^1.2.56",
+    "@cocreate/observer": "^1.3.48"
   }
 }

package/src/getValue.js

@@ -1,3 +1,48 @@
+import observer from '@cocreate/observer';
+import {setValue} from './setValue';
+
+function initGetValues() {
+	var elements = document.querySelectorAll('[get-value]');
+	initElements(elements)
+}
+
+function initElements(elements) {
+	for (let element of elements)
+		initElement(element)
+}
+
+function initElement(element) {
+    let id = element.getAttribute('get-value')
+	let valueEl = document.getElementById(id);
+	if(!valueEl) return;
+	let value = getValue(valueEl)
+	setValue(element, value)
+	
+	if (['INPUT', 'TEXTAREA', 'SELECT'].includes(valueEl.tagName)  || valueEl.contentEditable)
+	
+	valueEl.addEventListener('input', (e) => {
+		setValueByFind(e.target)
+	})
+	
+	valueEl.addEventListener('updated_by_fetch', (e) => {
+		setValueByFind(e.target)
+	})
+
+	element.dispatchEvent(new Event("input", {
+		"bubbles": true
+	}));
+
+}
+
+function setValueByFind(valueEl){
+	let value = getValue(valueEl)
+    let id = valueEl.getAttribute('id')
+    if(!id) return;
+	var elements = document.querySelectorAll('[get-value="' + id + '"]');
+	for(let element of elements)
+		setValue(element, value)
+}
+
 var getValue = (element) => {
 	let value = element.value;
 	let prefix = element.getAttribute('value-prefix') || "";
@@ -49,4 +94,14 @@ function __encryptPassword(str) {
 	return encodedString;
 }
 
+observer.init({
+	name: 'CoCreateLogic',
+	observe: ['addedNodes'],
+	target: '[get-value]',
+	callback: function(mutation) {
+		CoCreateLogic.getValues.initElement(mutation.target);
+	}
+});
+
+initGetValues();
 export {getValue};

package/src/index.js

@@ -102,8 +102,8 @@ function setData(elements, data) {
 async function save(element) {
 	let value = getValue(element);
 	let isFlat = false;
-	if (element.tagName == "INPUT" && element.type === "checkbox" || element.tagName == "SELECT" && element.hasAttribute('multiple'))
-		isFlat = true;
+	// if (element.tagName == "INPUT" && element.type === "checkbox" || element.tagName == "SELECT" && element.hasAttribute('multiple'))
+		// isFlat = true;
 	await crud.save(element, value, isFlat);
 }
 
@@ -115,7 +115,6 @@ function __initSocket() {
 	
 function __initEvents(el) {
 	if (el.tagName == 'INPUT' || el.tagName == 'TEXTAREA' || el.tagName == 'SELECT' || el.hasAttribute('contenteditable')) {
-
 		el.addEventListener('input', function(e) {
 			const {document_id, isRealtime, isCrdt} = crud.getAttr(el);
 			if (isCrdt == "true" && document_id || isRealtime == "false") return;
@@ -123,14 +122,14 @@ function __initEvents(el) {
 			save(el);
 		});
 
-		el.addEventListener('change', function(e) {
-			if (el.tagName == 'SELECT') {
-				const {isRealtime, isSave, isUpdate} = crud.getAttr(el);
-				if (isRealtime == "false" || isSave == "false" || isUpdate == "false")	return;
-				if (e.detail && e.detail.skip == true) return;
-				save(el);
-			}
-		});
+		// el.addEventListener('change', function(e) {
+		// 	if (el.tagName == 'SELECT') {
+		// 		const {isRealtime, isSave, isUpdate} = crud.getAttr(el);
+		// 		if (isRealtime == "false" || isSave == "false" || isUpdate == "false")	return;
+		// 		if (e.detail && e.detail.skip == true) return;
+		// 		save(el);
+		// 	}
+		// });
 	}
 }