@cocreate/elements 1.15.9 → 1.16.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.16.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.15.10...v1.16.0) (2023-03-16)
+
+
+### Features
+
+* replaced get-value and set-value with a super charged version of CoCreate-events ([7a12d60](https://github.com/CoCreate-app/CoCreate-elements/commit/7a12d603f4881aa9b16710513155243d8f7cea70))
+
+## [1.15.10](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.15.9...v1.15.10) (2023-02-19)
+
+
+### Bug Fixes
+
+* setData valueType handeled by setValue ([34d196f](https://github.com/CoCreate-app/CoCreate-elements/commit/34d196ffe6e477f8d9e499e9c32e86532c632cd7))
+
 ## [1.15.9](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.15.8...v1.15.9) (2023-02-01)
 
 

package/docs/index.html

@@ -106,7 +106,7 @@
                             </div>
         
                             <div id="demo-preview" class="position:relative overflow:auto background-color:white">
-                                <div get-value="#demo" class="padding:20px"></div>
+                                <div class="demopreview" class="padding:20px"></div>
                             </div>
                             
                             <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.15.9",
+  "version": "1.16.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/index.js

@@ -3,8 +3,6 @@ import action from '@cocreate/actions';
 import crud from '@cocreate/crud-client';
 import ccfilter from '@cocreate/filter';
 import '@cocreate/element-prototype';
-import { initSetValues} from './setValue';
-import { initGetValues} from './getValue';
 import './fetchSrc';
 
 
@@ -103,17 +101,10 @@ async function read(documents) {
 }
 	
 function setData(elements, data) {
-	let isRendered = false;
 	if (!data.document || !data.document[0]) return;
 	let key = getKey(data)
-
 	if (!elements) {
-		// ToDo: handle db and database, create key and get elements by key		
 		elements = els.get(key)
-		// let collection = data.document[0].collection;
-		// let document_id = data.document[0]._id;
-		// let selector = `[collection='${collection}'][document_id='${document_id}']:not(cocreate-select, link)`;
-		// elements = document.querySelectorAll(selector);
 	} else {
 		let eles = els.get(key)
 		if (eles && eles.length)
@@ -126,41 +117,15 @@ function setData(elements, data) {
 	
 	for (let el of elements) {
 		const { collection, document_id, name, isRead, isUpdate, isCrdt } = crud.getAttributes(el);
-		if (el.hasAttribute('actions')) continue;
-		if (isRead == "false" || isUpdate == "false" || isCrdt == "true") continue;
+		
+		if (el.hasAttribute('actions') || el.tagName === 'DIV' && !el.classList.contains('domEditor')) continue;
+		if (!name || isRead == "false" || isUpdate == "false" || isCrdt == "true") continue;
 		
 		if (data.document[0]['collection'] == collection && data.document[0]['_id'] == document_id) {
-			let value;
-			let valueType = el.getAttribute('value-type');
-            if (valueType == 'object' || valueType == 'json'){
-				// if (name == 'data')
-				// 	value = JSON.stringify(data[name])
-				// else
-				value = JSON.stringify(data.document[0][name])
-				value = decodeURIComponent(value)
-            } else {
-				value = crud.getValueFromObject(data.document[0], name);
-			}
-			
+			let value = crud.getValueFromObject(data.document[0], name);
 			el.setValue(value);
-			isRendered = true;
+			initializing.delete(el)
 		}
-
-		initializing.delete(el)
-
-	}
-
-
-	if (isRendered) {
-		// ToDo: Replace with custom event
-		const event = new CustomEvent('CoCreateElements-rendered', {
-			eventType: 'rendered',
-			detail: {
-				data
-			}
-		});
-
-		document.dispatchEvent(event);
 	}
 }
 
@@ -237,8 +202,5 @@ action.init({
 });
 
 init();
-initGetValues();
-initSetValues();
-
 
 export default {initElements, initElement, save};

package/demo/get-value.html

@@ -1,26 +0,0 @@
-<!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>
-
-        <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>-->
-        
-    </body>
-</html>

package/demo/set-value.html

@@ -1,41 +0,0 @@
-<!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>-->
-  
-  <cocreate-select class="floating-label" id="collection" placeholder="collection:" set-value="#document_id" set-value-key="setcollection" active>
-    <ul fetch-collection template_id="collection" class="options z-index:7 margin-top:5px">
-      <cc-option class="option template" template_id="collection" value="{{collection.name}}">
-        <span>{{collection.name}}</span>
-      </cc-option>
-    </ul>
-  </cocreate-select>
-
-  <cocreate-select class="floating-label" id="document_id" placeholder="document_id:" active>
-    <ul fetch-collection="{{setcollection}}" template_id="document_id" class="options z-index:7 margin-top:5px">
-			<cc-option class="option template" template_id="document_id" value="{{document._id}}">
-			    <span>{{document._id}}</span>
-			</cc-option>
-    </ul>
-  </cocreate-select>
-  
-  <input value="new" set-value="#testing" set-value-key="ty">
-  <h1 id="testing" class="{{ty}}" test="{{ty}}">{{ty}}</h1>
-
-
-
-    <!--<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>-->
-    <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
-
-</body>
-</html>

package/src/getValue.js

@@ -1,109 +0,0 @@
-import observer from '@cocreate/observer';
-import '@cocreate/element-prototype';
-
-// ToDo: actions="getValue", get-value-target, attribute get-value= selector or value compare to event components like toggle 
-
-const valueEls = new Map();
-
-function initGetValues() {
-	var elements = document.querySelectorAll('[get-value], [get-value-closest]');
-	initElements(elements);
-}
-
-function initElements(elements) {
-	for (let element of elements)
-		initElement(element);
-	for(let valueEl of valueEls.keys())
-		setValueByFind(valueEl);
-}
-
-function initElement(element, mutation) {
-    let selector = element.getAttribute('get-value') || element.getAttribute('get-value-closest');
-    if (!selector) return;
-	if (/{{\s*([\w\W]+)\s*}}/g.test(selector)) return;
-	
-	let valueEl
-	if (element.hasAttribute('get-value-closest'))
-		valueEl = element.closest(selector);
-	else
-		valueEl = document.querySelector(selector);
-	if (!valueEl) return;
-
-	initEvents(valueEl, element, mutation);
-
-	element.dispatchEvent(new Event("input", {
-		"bubbles": true
-	}));
-
-}
-
-function initEvents(valueEl, element, mutation){
-	if (!valueEls.has(valueEl)) {
-		valueEls.set(valueEl, [element]);
-
-		valueEl.addEventListener('input', (e) => {
-			setValueByFind(e.target);
-		});
-		
-		valueEl.addEventListener('updated_by_fetch', (e) => {
-			setValueByFind(e.target);
-		});
-	}
-	else 
-		valueEls.get(valueEl).push(element);
-
-	// ToDo: check to see if creates any loops or un wanted save by input event
-	if (mutation)
-		mutation = [element]
-	setValueByFind(valueEl, mutation)
-}
-
-function setValueByFind(valueEl, mutation) {
-	let value = valueEl.getValue();
-	if (!value) return;
-
-	let elements = mutation || valueEls.get(valueEl);
-	if (elements) {
-		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
-				element.setValue(value);
-		}
-	}
-}
-
-observer.init({
-	name: 'get-value',
-	observe: ['addedNodes'],
-	target: '[get-value], [get-value-closest]',
-	callback: function(mutation) {
-		initElement(mutation.target, true);
-	}
-});
-
-export { initGetValues };

package/src/setValue.js

@@ -1,94 +0,0 @@
-import observer from '@cocreate/observer';
-import crud from '@cocreate/crud-client';
-import { queryDocumentSelectorAll } from '@cocreate/utils';
-import '@cocreate/element-prototype';
-
-// ToDo: actions="setValue", set-value-target, attribute set-value= selector or value compare to event components like toggle
- 
-function initSetValues() {
-	var elements = document.querySelectorAll('[set-value], [set-value-closest]');
-	initElements(elements);
-}
-
-function initElements(elements) {
-	for (let element of elements)
-		initElement(element);
-}
-
-function initElement(element) {
-	initEvents(element);
-}
-
-function initEvents(element){
-	element.addEventListener('input', (e) => {
-		setValueByFind(e.target);
-	});
-		
-	element.addEventListener('updated_by_fetch', (e) => {
-		setValueByFind(e.target);
-	});
-
-	setValueByFind(element);
-}
-
-const setValueMap = new Map();
-function setValueByFind(element){
-	let key = element.getAttribute('set-value-key');
-	if (key)
-		key = `{{${key}}}`;
-	
-	let value = element.getValue();
-	if (!value) return;
-
-    let selector = element.getAttribute('set-value');
-    if (!selector) return;
-	let elements;
-	if (element.hasAttribute('set-value-closest'))
-		elements = [element.closest(selector)];
-	else
-		elements = queryDocumentSelectorAll(selector);
-
-	for(let element of elements){
-		if (key){
-			if (setValueMap.has(element))
-				key = setValueMap.get(element);
-			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;
-			}
-			setValueMap.set(element, value)
-		}
-		else
-			element.setValue(value);
-	}
-		
-}
-
-observer.init({
-	name: 'set-value',
-	observe: ['addedNodes'],
-	target: '[set-value], [set-value-closest]',
-	callback: function(mutation) {
-		initElement(mutation.target);
-	}
-});
-
-export { initSetValues };