@cocreate/elements 1.10.0 → 1.11.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.10.0",
+  "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",

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,15 +79,12 @@ 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) {
 			let value;
 			let valueType = el.getAttribute('value-type');
@@ -98,8 +95,9 @@ function setData(elements, data) {
 				value = JSON.stringify(data.data[name])
 				value = decodeURIComponent(value)
             } else
-				value = encodeData[name];
-			setValue(el, value);
+				value = crud.getObjectValueByPath(data.data, name);
+
+				setValue(el, value);
 
 			isRendered = true;
 		}
@@ -122,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() {
@@ -145,14 +140,6 @@ function __initEvents(el) {
 				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

@@ -3,7 +3,7 @@ import crud from '@cocreate/crud-client';
 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 = queryDocumentSelectorAll(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))
@@ -116,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;
@@ -215,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);
 	}