@cocreate/elements 1.3.18 → 1.4.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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.0",
   "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",

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};