@cocreate/elements 1.8.4 → 1.11.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# [1.11.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.10.0...v1.11.0) (2022-07-25)
+
+
+### Bug Fixes
+
+* if mutation detected only get value for mutated element ([f0681e3](https://github.com/CoCreate-app/CoCreate-elements/commit/f0681e380f59870f0f8ad34eea9ee5b1c3fbde8c))
+* remved isFlat ([d85e120](https://github.com/CoCreate-app/CoCreate-elements/commit/d85e1204647b41efbe2755fd1bf1ade9926d670f))
+* supports getting a value from any element ([2ec2f51](https://github.com/CoCreate-app/CoCreate-elements/commit/2ec2f5156d7bcb15a091ea424c0ab7bb5de200eb))
+
+
+### Features
+
+* crud.getObjectValueByPath to return value using name containing a dotNotation string ([d158084](https://github.com/CoCreate-app/CoCreate-elements/commit/d15808445001609db85100a1389784739e6d891f))
+
+# [1.10.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.9.0...v1.10.0) (2022-07-08)
+
+
+### Features
+
+* value-type support and if element name attribute  = _id do not save ([164d12f](https://github.com/CoCreate-app/CoCreate-elements/commit/164d12f40a84d85d4114df3b8efe51b9cf6a4e11))
+
+# [1.9.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.8.4...v1.9.0) (2022-07-03)
+
+
+### Features
+
+* setValue can target element in iframe or parent of iframe using @cocreate/utils queryDocumentSelectorAll ([1447236](https://github.com/CoCreate-app/CoCreate-elements/commit/1447236b86507336a9c3db6452f0760790cabd59))
+* value-type attribute to define if value is an object ([9649b6a](https://github.com/CoCreate-app/CoCreate-elements/commit/9649b6acdbe5e97f5418df5244025a359433891c))
+
 ## [1.8.4](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.8.3...v1.8.4) (2022-06-18)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.8.4",
+  "version": "1.11.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",
@@ -64,6 +64,7 @@
     "@cocreate/actions": "^1.4.3",
     "@cocreate/crud-client": "^1.7.1",
     "@cocreate/docs": "^1.3.3",
-    "@cocreate/observer": "^1.5.3"
+    "@cocreate/observer": "^1.5.3",
+    "@cocreate/utils": "^1.8.1"
   }
 }

package/src/getValue.js

@@ -4,7 +4,7 @@ import { setValue } from './setValue';
 const valueEls = new Map();
 
 function initGetValues() {
-	var elements = document.querySelectorAll('[get-value]');
+	var elements = document.querySelectorAll('[get-value], [get-value-closest]');
 	initElements(elements);
 }
 
@@ -15,15 +15,19 @@ function initElements(elements) {
 		setValueByFind(valueEl);
 }
 
-function initElement(element) {
-    let selector = element.getAttribute('get-value');
+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 = document.querySelector(selector);
+	let valueEl
+	if (element.hasAttribute('get-value-closest'))
+		valueEl = element.closest(selector);
+	else
+		valueEl = document.querySelector(selector);
 	if(!valueEl) return;
 
-	initEvents(valueEl, element);
+	initEvents(valueEl, element, mutation);
 
 	element.dispatchEvent(new Event("input", {
 		"bubbles": true
@@ -31,7 +35,7 @@ function initElement(element) {
 
 }
 
-function initEvents(valueEl, element){
+function initEvents(valueEl, element, mutation){
 	if (!valueEls.has(valueEl)) {
 		valueEls.set(valueEl, [element]);
 
@@ -41,17 +45,30 @@ function initEvents(valueEl, element){
 		
 		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) {
-	let value = valueEl.getValue(valueEl);
+function setValueByFind(valueEl, mutation) {
+	let value;
+	// todo can be removed if all elements have getValue using prototype
+	if (valueEl.hasAttribute('value'))
+		value = valueEl.getAttribute('value');
+	else if(valueEl.getValue)
+		value = valueEl.getValue(valueEl);
+	else
+		value = getValue(valueEl);
 	if (!value) return;
-	let elements = valueEls.get(valueEl);
+	let elements = mutation || valueEls.get(valueEl);
 	
+	if (elements)
 	for(let element of elements){
 		let key = element.getAttribute('get-value-key');
 		if (key){
@@ -121,6 +138,9 @@ var getValue = (element) => {
 	else if (element.tagName === 'IFRAME') {
 		value = element.srcdoc;
 	}
+	else if (element.hasAttribute('value')){
+		value = element.getAttribute('value');
+	}
 	else {
 		value = element.innerHTML;
 	}
@@ -138,9 +158,9 @@ function __encryptPassword(str) {
 observer.init({
 	name: 'get-value',
 	observe: ['addedNodes'],
-	target: '[get-value]',
+	target: '[get-value], [get-value-closest]',
 	callback: function(mutation) {
-		initElement(mutation.target);
+		initElement(mutation.target, true);
 	}
 });
 

package/src/index.js

@@ -79,18 +79,25 @@ function setData(elements, data) {
 		let selector = `[collection='${collection}'][document_id='${document_id}']:not(cocreate-select, link)`;
 		elements = document.querySelectorAll(selector);
 	}
-	let encodeData = crud.encodeObject(data.data);
 
 	elements.forEach((el) => {
 		const { collection, document_id, name, isRead, isUpdate, isCrdt } = crud.getAttr(el);
 		if (el.hasAttribute('actions')) return;
 		if (isRead == "false" || isUpdate == "false" || isCrdt == "true") return;
-		// let isEditable = el.getAttribute('contenteditable');
 		
-		// if (data['collection'] == collection && data['document_id'] == document_id && !isEditable) {
 		if (data['collection'] == collection && data['document_id'] == document_id) {
-			const value = encodeData[name];
-			setValue(el, value);
+			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.data[name])
+				value = decodeURIComponent(value)
+            } else
+				value = crud.getObjectValueByPath(data.data, name);
+
+				setValue(el, value);
 
 			isRendered = true;
 		}
@@ -113,10 +120,7 @@ function setData(elements, data) {
 
 async function save(element) {
 	let value = getValue(element);
-	let isFlat = false;
-	// if (element.tagName == "INPUT" && element.type === "checkbox" || element.tagName == "SELECT" && element.hasAttribute('multiple'))
-		// isFlat = true;
-	await crud.save(element, value, isFlat);
+	await crud.save(element, value);
 }
 
 function __initSocket() {
@@ -130,20 +134,12 @@ function __initEvents(el) {
 	if (!elementEvents.has(el)) {
 		if (el.tagName == 'INPUT' || el.tagName == 'TEXTAREA' || el.tagName == 'SELECT' || el.hasAttribute('contenteditable')) {
 			el.addEventListener('input', function(e) {
-				const {document_id, isRealtime, isCrdt} = crud.getAttr(el);
-				if (isCrdt == "true" && document_id || isRealtime == "false") return;
+				const {document_id, name, isRealtime, isCrdt} = crud.getAttr(el);
+				if (isCrdt == "true" && document_id || isRealtime == "false" || name == "_id") return;
 				if (document_id && e.detail && e.detail.skip == true) return;
 				save(el);
 			});
 
-			// el.addEventListener('change', function(e) {
-			// 	if (el.tagName == 'SELECT') {
-			// 		const {isRealtime, isSave, isUpdate} = crud.getAttr(el);
-			// 		if (isRealtime == "false" || isSave == "false" || isUpdate == "false")	return;
-			// 		if (e.detail && e.detail.skip == true) return;
-			// 		save(el);
-			// 	}
-			// });
 			elementEvents.set(el, true)
 		}
 	}

package/src/setValue.js

@@ -1,9 +1,9 @@
 import observer from '@cocreate/observer';
 import crud from '@cocreate/crud-client';
-import { getValue } from './getValue';
+import { queryDocumentSelectorAll } from '@cocreate/utils';
 
 function initSetValues() {
-	var elements = document.querySelectorAll('[set-value]');
+	var elements = document.querySelectorAll('[set-value], [set-value-closest]');
 	initElements(elements);
 }
 
@@ -24,6 +24,8 @@ function initEvents(element){
 	element.addEventListener('updated_by_fetch', (e) => {
 		setValueByFind(e.target);
 	});
+
+	setValueByFind(element);
 }
 
 const setValueMap = new Map();
@@ -31,12 +33,20 @@ function setValueByFind(element){
 	let key = element.getAttribute('set-value-key');
 	if (key)
 		key = `{{${key}}}`;
-	let value = element.getValue(element);
+	
+	let value
+	if(element.getValue)
+		value = element.getValue(element);
 	if (!value) return;
+
     let selector = element.getAttribute('set-value');
     if(!selector) return;
-	let elements = document.querySelectorAll(selector);
-	
+	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))
@@ -73,7 +83,8 @@ function setValueByFind(element){
 
 var setValue = (el, value) => {
 	if (value === null || value === undefined) return;
-	
+	let valueType = el.getAttribute('value-type');
+
 	if (el.tagName == 'INPUT' || el.tagName == 'TEXTAREA' || el.tagName == 'SELECT') {
 		const {isCrdt} = crud.getAttr(el);
 		if (isCrdt == "true" || el.type === 'file') return;
@@ -115,7 +126,7 @@ var setValue = (el, value) => {
 			el.setAttribute("value", value);
 		}
 
-		if (el.classList.contains('domEditor')) {
+		if (el.classList.contains('domEditor') || el.hasAttribute('get-value') || el.hasAttribute('get-value-closest')) {
 			if (el.getAttribute('data-domEditor') == "replace") {
 				let newElement = document.createElement("div");
 				newElement.innerHTML = value;
@@ -130,7 +141,10 @@ var setValue = (el, value) => {
 				}
 			}
 			else {
-				el.innerHTML = value;
+				if (valueType == 'string' || valueType == 'text')
+					el.textContent = value;
+				else
+					el.innerHTML = value;
 			}
 		}
 	}
@@ -140,8 +154,10 @@ var setValue = (el, value) => {
 	}
 	else {
 		if (el.hasAttribute('contenteditable') && el == document.activeElement) return;
-		
-		el.innerHTML = value;
+		if (valueType == 'string' || valueType == 'text')
+			el.textContent = value;
+		else
+			el.innerHTML = value;
 		if (el.hasAttribute("value")) {
 			el.setAttribute("value", value);
 		}
@@ -209,7 +225,7 @@ function dispatchEvents(el) {
 observer.init({
 	name: 'set-value',
 	observe: ['addedNodes'],
-	target: '[set-value]',
+	target: '[get-value], [get-value-closest]',
 	callback: function(mutation) {
 		initElement(mutation.target);
 	}