@cocreate/elements 1.4.12 → 1.6.2

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+## [1.6.2](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.6.1...v1.6.2) (2022-01-11)
+
+
+### Bug Fixes
+
+* if crdt = true but document_id is empty save ([cd69a43](https://github.com/CoCreate-app/CoCreate-elements/commit/cd69a434ec33ac7f32ded29f715154f22a1bd4e8))
+
+## [1.6.1](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.6.0...v1.6.1) (2022-01-02)
+
+
+### Bug Fixes
+
+* add input event listener to valueEl ([ea77493](https://github.com/CoCreate-app/CoCreate-elements/commit/ea77493fed7401b2ccd3d825b73198daf03f836c))
+* check if document_id is a valid id if not return ([220151f](https://github.com/CoCreate-app/CoCreate-elements/commit/220151f9ee0b2c9ff8e4afc06cc24ad5b891b161))
+
+# [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)
+
+
+### Features
+
+* set-value and set-value-key attribute to add placeholders that can be replaced by value onChange ([266cf5f](https://github.com/CoCreate-app/CoCreate-elements/commit/266cf5f7f72869a9a390889d24ddab2fed038c26))
+
 ## [1.4.12](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.4.11...v1.4.12) (2021-12-24)
 
 

package/demo/get-value.html

@@ -0,0 +1,32 @@
+<!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="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
+    <!--<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.4.12",
+  "version": "1.6.2",
   "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,34 +1,29 @@
 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)
-	setValue(element, value)
-	
-	// if (['INPUT', 'TEXTAREA', 'SELECT'].includes(valueEl.tagName)  || valueEl.contentEditable)
+    let selector = element.getAttribute('get-value');
+    if(!selector) return;
+	if(/{{\s*([\w\W]+)\s*}}/g.test(selector)) return;
 	
-	// valueEl.addEventListener('input', (e) => {
-	// 	setValueByFind(e.target)
-	// })
-	
-	// valueEl.addEventListener('updated_by_fetch', (e) => {
-	// 	setValueByFind(e.target)
-	// })
-	
-	initEvents(valueEl);
+	let valueEl = document.querySelector(selector);
+	if(!valueEl) return;
+
+	initEvents(valueEl, element);
 
 	element.dispatchEvent(new Event("input", {
 		"bubbles": true
@@ -36,28 +31,57 @@ function initElement(element) {
 
 }
 
-const valueEls = new Map();
-function initEvents(valueEl){
+function initEvents(valueEl, element){
 	if (!valueEls.has(valueEl)) {
-		valueEls.set(valueEl);
+		valueEls.set(valueEl, [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);
+		});	
 	}
+	else 
+		valueEls.get(valueEl).push(element);
 }
 
-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) => {
@@ -120,5 +144,4 @@ observer.init({
 	}
 });
 
-initGetValues();
-export {getValue};
+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]";
 
@@ -39,10 +39,11 @@ function initElement(el) {
 	if (el.closest('.template')) return;
 
 	const { collection, document_id, name, isRead } = crud.getAttr(el);
+	__initEvents(el);
 	if (!collection || !name) return;
+	if (!document_id.match(/^[0-9a-fA-F]{24}$/)) return; 
 	if (!crud.checkAttrValue(collection) || !crud.checkAttrValue(name)) return;
 	 
-	__initEvents(el);
 	if (isRead == 'false') return;
 	return {collection, document_id};
 }
@@ -118,7 +119,7 @@ function __initEvents(el) {
 		el.addEventListener('input', function(e) {
 			const {document_id, isRealtime, isCrdt} = crud.getAttr(el);
 			if (isCrdt == "true" && document_id || isRealtime == "false") return;
-			if (e.detail && e.detail.skip == true) return;
+			if (document_id && e.detail && e.detail.skip == true) return;
 			save(el);
 		});
 
@@ -164,5 +165,8 @@ action.init({
 });
 
 init();
+initGetValues();
+initSetValues();
+
 
 export default {initElements, initElement, save, getValue, setValue};

package/src/setValue.js

@@ -1,4 +1,72 @@
+import observer from '@cocreate/observer';
 import crud from '@cocreate/crud-client';
+import { getValue } from './getValue';
+
+function initSetValues() {
+	var elements = document.querySelectorAll('[set-value]');
+	initElements(elements);
+}
+
+function initElements(elements) {
+	for (let element of elements)
+		initElement(element);
+}
+
+function initElement(element) {
+	initEvents(element);
+}
+
+function initEvents(element){
+	if (['INPUT', 'TEXTAREA', 'SELECT'].includes(element.tagName)  || element.contentEditable)
+		element.addEventListener('input', (e) => {
+			setValueByFind(e.target);
+		});
+	
+	element.addEventListener('updated_by_fetch', (e) => {
+		setValueByFind(e.target);
+	});
+}
+
+function setValueByFind(element){
+	let key = element.getAttribute('set-value-key');
+	if (key)
+		key = `{{${key}}}`;
+	let value = getValue(element);
+	if (!value) return;
+    let selector = element.getAttribute('set-value');
+    if(!selector) return;
+	let elements = document.querySelectorAll(selector);
+	
+	for(let element of elements){
+		if (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 setValue = (el, value) => {
 	if (value === null || value === undefined) return;
@@ -144,4 +212,13 @@ function dispatchEvents(el) {
 	el.dispatchEvent(changeEvent);
 }
 
-export {setValue};
+observer.init({
+	name: 'set-value',
+	observe: ['addedNodes'],
+	target: '[set-value]',
+	callback: function(mutation) {
+		initElement(mutation.target);
+	}
+});
+
+export { initSetValues, setValue };