@cocreate/elements 1.3.15 → 1.4.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [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)
+
+
+### Bug Fixes
+
+* remove cdn.CoCreate.min.css ([ace6aef](https://github.com/CoCreate-app/CoCreate-elements/commit/ace6aef4cf1c6e6cf07ed5ca3b8a8e8ea64780f9))
+
+## [1.3.17](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.3.16...v1.3.17) (2021-11-20)
+
+
+### Bug Fixes
+
+* updated script tags and link tags ([24d50f6](https://github.com/CoCreate-app/CoCreate-elements/commit/24d50f6ed23a841c94ac11ecb2897d3cb76d7595))
+
+## [1.3.16](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.3.15...v1.3.16) (2021-11-20)
+
+
+### Bug Fixes
+
+* update dependencies ([a1547ce](https://github.com/CoCreate-app/CoCreate-elements/commit/a1547ceb14a870bab9576e37cfed9e5613d0eab4))
+
 ## [1.3.15](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.3.14...v1.3.15) (2021-11-19)
 
 

package/demo/index.html

@@ -20,15 +20,6 @@
       <span collection="render_test" document_id="5f5aeb493a7246b7cf2e4005" name="personal_info.email"></span>
     </form>
 
-
-    <script>
-      var config = {
-        apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
-        organization_Id: '5de0387b12e200ea63204d6c',
-        host: 'ws.cocreate.app'
-      }
-    </script>
-    
     <!--<script src="../dist/CoCreate-elements.js"></script>-->
     <script src="../../../CoCreateJS/dist/CoCreate.js" ></script>
 

package/docs/index.html

@@ -14,9 +14,7 @@
 
     <!-- CoCreate Favicon -->
     <link rel="icon" type="image/png" sizes="32x32" href="https://cocreate.app/images/favicon.ico">
-    <!-- CoCreate CSS CDN -->
-    <link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css" />
-    <link rel="stylesheet" href="https://ws.cocreate.app/docs.css" collection="apples" document_id="6069ff5042ef8ff5175a5c8d" name="css" type="text/css" />
+    <link rel="stylesheet" href="/docs/index.css" collection="files" document_id="60888216117c640e7596303f" name="src" type="text/css" save="true" />
 </head>
 
 <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.3.15",
+  "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",
@@ -61,9 +61,9 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/action": "^1.3.14",
-    "@cocreate/crud-client": "^1.4.28",
-    "@cocreate/docs": "^1.2.52",
-    "@cocreate/observer": "^1.3.44"
+    "@cocreate/action": "^1.3.15",
+    "@cocreate/crud-client": "^1.4.29",
+    "@cocreate/docs": "^1.2.53",
+    "@cocreate/observer": "^1.3.45"
   }
 }

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