@cocreate/elements 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [1.6.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.5.0...v1.6.0) (2022-01-01)
+
+
+### Bug Fixes
+
+* ability to use key as innerHTML ([ca76c3c](https://github.com/CoCreate-app/CoCreate-elements/commit/ca76c3ce1f4f28fc86ec47f808a1f21546159bb3))
+* get-value attribute value now supports a selector added # to all values currently in get-value attributes ([dd4c9e3](https://github.com/CoCreate-app/CoCreate-elements/commit/dd4c9e327029d5bd7774695541c8c46cb05e88fe))
+
+
+### Features
+
+* getValue now has support for get-value-key ([951e027](https://github.com/CoCreate-app/CoCreate-elements/commit/951e02725b5a50852e9e3838a2f16e4cf230ebec))
+
 # [1.5.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.4.12...v1.5.0) (2021-12-27)
 
 

package/demo/get-value.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Value | CoCreateJS</title>
+  
+  <!-- CoCreate Favicon -->
+  <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
+  <!-- CoCreate CSS CDN -->
+  <link rel="stylesheet" href="https://cdn.cocreate.app/logic/latest/CoCreate-logic.min.css" type="text/css"/>
+</head>
+<body>
+	<!-- windows -->
+  <!--<ul get-value="##a123"> </ul>-->
+  <!--<ul id="a123"> hello </ul>-->
+  
+  <input id="testing" value="new">
+  <h1 get-value="#testing" get-value-key="ty" class="{{ty}}" test="{{ty}}">{{ty}}</h1>
+
+
+
+<hr/>
+
+  <input id="testing1" value="new1" />
+  <input get-value="#testing1" />
+  <input get-value="#testing1" />
+    
+    <!--<script src="../dist/CoCreate-form.js"></script>-->
+    <script src="../../../CoCreateJS/dist/CoCreate.js" ></script>
+</body>
+</html>

package/docs/index.html

@@ -114,7 +114,7 @@
 									<div class="svSplitter svHorizontal"> </div>
 	
 									<div class="svPanel">
-										<iframe get-value="demo" frameBorder="0" height="100%" width="100%" class="min-width:300px"></iframe>
+										<iframe get-value="#demo" frameBorder="0" height="100%" width="100%" class="min-width:300px"></iframe>
 									</div>
 	
 								</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.5.0",
+  "version": "1.6.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,35 +1,32 @@
 import observer from '@cocreate/observer';
-import {setValue} from './setValue';
+import { setValue } from './setValue';
+
+const valueEls = new Map();
 
 function initGetValues() {
 	var elements = document.querySelectorAll('[get-value]');
-	initElements(elements)
+	initElements(elements);
 }
 
 function initElements(elements) {
 	for (let element of elements)
-		initElement(element)
+		initElement(element);
+	for(let valueEl of valueEls.keys())
+		setValueByFind(valueEl);
 }
 
 function initElement(element) {
-    let id = element.getAttribute('get-value')
-	let valueEl = document.getElementById(id);
-	if(!valueEl) return;
-	let value = getValue(valueEl)
-	if (value)
-	setValue(element, value)
+    let selector = element.getAttribute('get-value');
+    if(!selector) return;
 	
-	// if (['INPUT', 'TEXTAREA', 'SELECT'].includes(valueEl.tagName)  || valueEl.contentEditable)
-	
-	// valueEl.addEventListener('input', (e) => {
-	// 	setValueByFind(e.target)
-	// })
+	let valueEl = document.querySelector(selector);
+	if(!valueEl) return;
 	
-	// valueEl.addEventListener('updated_by_fetch', (e) => {
-	// 	setValueByFind(e.target)
-	// })
+	// let value = getValue(valueEl);
+	// if (value)
+	// 	setValue(element, value);
 	
-	initEvents(valueEl);
+	initEvents(valueEl, element);
 
 	element.dispatchEvent(new Event("input", {
 		"bubbles": true
@@ -37,28 +34,57 @@ function initElement(element) {
 
 }
 
-const valueEls = new Map();
-function initEvents(valueEl){
-	if (!valueEls.has(valueEl)) {
-		valueEls.set(valueEl);
+function initEvents(valueEl, element){
+	if (!valueEls.has(valueEl)) 
+		valueEls.set(valueEl, [element]);
+	else {
+		valueEls.get(valueEl).push(element);
 		if (['INPUT', 'TEXTAREA', 'SELECT'].includes(valueEl.tagName)  || valueEl.contentEditable)
 			valueEl.addEventListener('input', (e) => {
-				setValueByFind(e.target)
-			})
+				setValueByFind(e.target);
+			});
 		
 		valueEl.addEventListener('updated_by_fetch', (e) => {
-			setValueByFind(e.target)
-		})
+			setValueByFind(e.target);
+		});
 	}
 }
 
-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)
+function setValueByFind(valueEl) {
+	let value = getValue(valueEl);
+	if (!value) return;
+	let elements = valueEls.get(valueEl);
+	
+	for(let element of elements){
+		let key = element.getAttribute('get-value-key');
+		if (key){
+			key = `{{${key}}}`;
+			const regex = new RegExp(key, "g");
+			for (let attribute of element.attributes){
+				let attrName = attribute.name;
+				let attrValue = attribute.value;
+				let setAttr = false;
+				if (attrValue.includes(key)){
+					attrValue = attrValue.replace(regex, value);
+					setAttr = true;
+				}
+				if (attrName.includes(key)){
+					element.removeAttribute(key);
+					attrName = attrName.replace(regex, value);
+					setAttr = true;
+				}
+				if(setAttr)
+					element.setAttribute(attrName, attrValue);
+			}
+			let html = element.innerHTML;
+			if (html.indexOf(key) !== -1){
+				html = html.replace(regex, value);
+				element.innerHTML = html;
+			}
+		}
+		else
+			setValue(element, value);
+	}
 }
 
 var getValue = (element) => {
@@ -121,5 +147,5 @@ observer.init({
 	}
 });
 
-initGetValues();
-export {getValue};
+// initGetValues();
+export { initGetValues, getValue };

package/src/index.js

@@ -1,8 +1,8 @@
 import observer from '@cocreate/observer';
 import action from '@cocreate/actions';
 import crud from '@cocreate/crud-client';
-import {setValue} from './setValue';
-import {getValue} from './getValue';
+import { initSetValues, setValue } from './setValue';
+import { initGetValues, getValue } from './getValue';
 
 const selector = "[collection][document_id][name]:not(cocreate-select, link), input, textarea, select, [contenteditable]";
 
@@ -164,5 +164,8 @@ action.init({
 });
 
 init();
+initGetValues();
+initSetValues();
+
 
 export default {initElements, initElement, save, getValue, setValue};

package/src/setValue.js

@@ -1,6 +1,6 @@
 import observer from '@cocreate/observer';
 import crud from '@cocreate/crud-client';
-import {getValue} from './getValue';
+import { getValue } from './getValue';
 
 function initSetValues() {
 	var elements = document.querySelectorAll('[set-value]');
@@ -58,7 +58,7 @@ function setValueByFind(element){
 			}
 			let html = element.innerHTML;
 			if (html.indexOf(key) !== -1){
-				html.replace(regex, value);
+				html = html.replace(regex, value);
 				element.innerHTML = html;
 			}
 		}
@@ -221,7 +221,4 @@ observer.init({
 	}
 });
 
-
-initSetValues();
-
-export {setValue};
+export { initSetValues, setValue };