@cocreate/elements 1.10.0 → 1.12.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [1.12.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.11.1...v1.12.0) (2022-08-31)
+
+
+### Features
+
+* add getValue() and setValue() to HTMLElement.prototype ([1fde509](https://github.com/CoCreate-app/CoCreate-elements/commit/1fde50918b279bb49103bf7bea1f24861615a0a9))
+
+## [1.11.1](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.11.0...v1.11.1) (2022-08-01)
+
+
+### Bug Fixes
+
+* fetchSrc - ignores link tags ([e266a95](https://github.com/CoCreate-app/CoCreate-elements/commit/e266a954ab15783e5feeff0f32045ff7b6c8ea91))
+
+# [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.12.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/HTMLElement.js

@@ -1,51 +1,30 @@
-	let v = el.getValue()
+import { setValue } from './setValue';
+import { getValue } from './getValue';
 
-	HTMLElement.prototype.getValue = function() {
-    	this.style.display = 'none';
-	};
-	
-	HTMLInputElement.prototype.getValue = function() {
-		let value = this.value;
+HTMLElement.prototype.getValue = function() {
+	let value = getValue(this)
+	return value;
+};
 
-		let prefix = this.getAttribute('value-prefix') || "";
-		let suffix = this.getAttribute('value-suffix') || "";
+HTMLElement.prototype.setValue = function(value) {
+	setValue(this, value)
+};
 
-		if (this.type === "checkbox") {
-			let el_name = this.getAttribute('name');
-			let checkboxs = document.querySelectorAll(`input[type=checkbox][name='${el_name}']`);
-			if (checkboxs.length > 1) {
-				value = [];
-				checkboxs.forEach(el => {
-					if (el.checked) value.push(el.value);
-				});
-			}
-			else {
-				value = this.checked;
-			}
-		}
-		else if (this.type === "number") {
-			value = Number(value);
-		}
-		else if (this.type === "password") {
-			value = this.__encryptPassword(value);
-		}
+HTMLInputElement.prototype.getValue = function() {
+	let value = getValue(this)
+	return value;
+};
 
-		if (typeof value == "string") {
-			value = prefix + value + suffix;
-		}
+HTMLInputElement.prototype.setValue = function(value) {
+	setValue(this, value)
+};
 
-		if (this.tagName == "SELECT" && this.hasAttribute('multiple')) {
-			let options = this.selectedOptions;
-			value = [];
-			for (let i = 0; i < options.length; i++) {
-				value.push(options[i].value);
-			}
-		}
+HTMLHeadingElement.prototype.getValue = function() {
+	let value = getValue(this)
+	return value;
+};
+
+HTMLHeadingElement.prototype.setValue = function(value) {
+	setValue(this, value)
+};
 
-		return value;
-	};
-	
-	HTMLHeadingElement.prototype.getValue = function() {
-    	this.style.display = 'none';
-	};
-	

package/src/fetchSrc.js

@@ -1,6 +1,6 @@
 import observer from '@cocreate/observer';
 
-const selector = '[src]:not(img, video, script, input, iframe, frame)'
+const selector = '[src]:not(img, video, script, input, iframe, frame, link)'
 const initializing = new Map();
 
 

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();
+	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

@@ -4,6 +4,7 @@ import crud from '@cocreate/crud-client';
 import { initSetValues, setValue } from './setValue';
 import { initGetValues, getValue } from './getValue';
 import './fetchSrc';
+import './HTMLElement';
 
 const selector = "[collection][document_id][name]:not(cocreate-select, link), input, textarea, select, [contenteditable]";
 const initializing = new Map();
@@ -33,11 +34,6 @@ function initElements(elements) {
 }
 	
 function initElement(el) {
-	if (el.tagName != 'DIV' || el.classList.contains('domEditor') || el.hasAttribute('contenteditable')){
-		el.getValue = getValue; 
-		el.setValue = setValue; 
-	}
-
 	__initEvents(el);
 
 	if (el.closest('.template')) return;
@@ -79,15 +75,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 +91,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);
+
+				el.setValue(value);
 
 			isRendered = true;
 		}
@@ -122,10 +116,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 +136,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();
 	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);
 	}