@cocreate/elements 1.4.10 → 1.6.0

package/CHANGELOG.md

@@ -1,3 +1,37 @@
+# [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)
+
+
+### Bug Fixes
+
+* get-value observer typo ([1ab5e84](https://github.com/CoCreate-app/CoCreate-elements/commit/1ab5e84428a680bd0e4a1c62091fd55edf22f69d))
+
+## [1.4.11](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.4.10...v1.4.11) (2021-12-23)
+
+
+### Bug Fixes
+
+* renamed filter-value_type to filter-value-type ([5ec9280](https://github.com/CoCreate-app/CoCreate-elements/commit/5ec928076ba52fe83f526208091778eb00a81a03))
+
 ## [1.4.10](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.4.9...v1.4.10) (2021-12-20)
 
 

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/demo/input-and-fetch.html

@@ -50,13 +50,13 @@
 			<!--<table class="width:100% border-collapse:collapse">-->
 			<!--	<tr class="border-bottom:1px_solid_darkgray">-->
 			<!--		<td class="position:sticky top:0 background:white padding-top:0 padding:10px ">-->
-			<!--			<input type="text" class="floating-label" filter-name="name" filter-value_type="string" filter-operator="" template_id="datatable" placeholder="Name">-->
+			<!--			<input type="text" class="floating-label" filter-name="name" template_id="datatable" placeholder="Name">-->
 			<!--			<span class="position:absolute bottom:18px right:20px float:right font-size:18px z-index:6">-->
 			<!--				<a order-by="name" toggle-order="asc" template_id="datatable"></a>-->
 			<!--			</span>-->
 			<!--		</td>-->
 			<!--		<td class="position:sticky top:0 background:white padding:10px padding-top:0">-->
-			<!--			<input type="text" class="floating-label" filter-name="Document Id" filter-value_type="string" template_id="datatable" placeholder="Type" />-->
+			<!--			<input type="text" class="floating-label" filter-name="Document Id" template_id="datatable" placeholder="Type" />-->
 			<!--			<span class="position:absolute bottom:18px right:20px float:right font-size:18px z-index:6">-->
 			<!--				<a order-by="_id" toggle-order="asc" template_id="datatable"></a>-->
 			<!--			</span>-->

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.10",
+  "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,34 +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)
-	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
@@ -36,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) => {
@@ -112,13 +139,13 @@ function __encryptPassword(str) {
 }
 
 observer.init({
-	name: 'CoCreateLogic',
+	name: 'get-value',
 	observe: ['addedNodes'],
 	target: '[get-value]',
 	callback: function(mutation) {
-		CoCreateLogic.getValues.initElement(mutation.target);
+		initElement(mutation.target);
 	}
 });
 
-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,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 };