@cocreate/render 1.8.4 → 1.9.2

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [1.9.2](https://github.com/CoCreate-app/CoCreate-render/compare/v1.9.1...v1.9.2) (2022-07-10)
+
+
+### Bug Fixes
+
+* use dataOriginal if path includes collection ([e6b9288](https://github.com/CoCreate-app/CoCreate-render/commit/e6b92886bad560fa64e487609c69f37268d87587))
+
+## [1.9.1](https://github.com/CoCreate-app/CoCreate-render/compare/v1.9.0...v1.9.1) (2022-07-08)
+
+
+### Bug Fixes
+
+* remove test console.log ([e70647f](https://github.com/CoCreate-app/CoCreate-render/commit/e70647f9aaedfab5ecdc4f38e755eb7cf7c564fe))
+* store original data while rendering to have access to root fields eg. collection ([c769747](https://github.com/CoCreate-app/CoCreate-render/commit/c76974721597e1c8d3d8b531a81bf9216b40c731))
+
+# [1.9.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.8.4...v1.9.0) (2022-07-03)
+
+
+### Features
+
+* added @cocreate/utils queryDocumentSelector to return an element from ann irframe or parent of iframe ([b9bb90f](https://github.com/CoCreate-app/CoCreate-render/commit/b9bb90f9ab72fc24fc71e64a37bcfee73a0c0c9c))
+* support for value-type attribute to define if render will be a string, text, innerHTML. Defaults to innerHTML ([a14fcc2](https://github.com/CoCreate-app/CoCreate-render/commit/a14fcc2ff886df7207c537cca67c3343be2da997))
+
 ## [1.8.4](https://github.com/CoCreate-app/CoCreate-render/compare/v1.8.3...v1.8.4) (2022-06-19)
 
 

package/demo/render.array.html

@@ -19,8 +19,8 @@
                 </cc-options>
 
             <div class="template" template_id="abc1">
-                <div class="template" render-array="data.current_org" render-key="current_org"  value="{{current_org}}">
-                    <h3>{{current_org}}</h3>
+                <div class="template" render-array="data.current" render-key="current_org"  value="{{current_org.name}}">
+                    <h3>{{current_org.name}}</h3>
                 </div>
             </div>
      
@@ -34,7 +34,8 @@
                     collection : 'dededede',
                     data: [{
                          _id : '123kijfhgfkel45',
-                         current_org: ['test1', 'test2', 'test31', 'test3']
+                         current_org: ['test1', 'test2', 'test31', 'test3'],
+                         current: [{name: 'test1w'}, {name: 'test2'}, {name: 'test31'}, {name: 'test3'}]
                      }]
                 }
                 

package/demo/render.object.html

@@ -11,8 +11,8 @@
     <body>
         
         <div class="template" template_id="abc1">
-            <div>{{data}}</div>
-            <h1> {{data.collection}} {{data._id}}</h1>
+            <!-- <div>{{data}}</div>
+            <h1> {{data.collection}} {{data._id}}</h1> -->
             <div class="template" render-object="" render-key="one">
                 <h5>{{one.key}}: {{one.value}}</h5>
             </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/render",
-  "version": "1.8.4",
+  "version": "1.9.2",
   "description": "A simple render component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "render",
@@ -63,6 +63,7 @@
   "dependencies": {
     "@cocreate/actions": "^1.4.3",
     "@cocreate/api": "^1.3.3",
-    "@cocreate/docs": "^1.3.3"
+    "@cocreate/docs": "^1.3.3",
+    "@cocreate/utils": "^1.8.1"
   }
 }

package/src/index.js

@@ -1,5 +1,7 @@
 /*globals CustomEvent*/
 import action from '@cocreate/actions';
+import { queryDocumentSelector } from '@cocreate/utils';
+// import { getValue } from '../../CoCreate-elements/src/getValue';
 // import api from '@cocreate/api';
 
 const CoCreateRender = {
@@ -8,6 +10,8 @@ const CoCreateRender = {
 		try {
 			if(typeof json == 'undefined' || !path)
 				return false;
+			if (path.indexOf('.') == -1 && path.includes('collection'))
+				json = this.dataOriginal
 			let jsonData = json, subpath = path.split('.');
 			
 			for (let i = 0; i < subpath.length; i++) {
@@ -55,18 +59,14 @@ const CoCreateRender = {
 		let variables = inputValue.match(/{{([A-Za-z0-9_.,\[\]\- ]*)}}/g);
 		if (variables) {
 			variables.forEach((attr) => {
+				if (attr.includes(`collection`))
+					if( this.dataOriginal[renderKey] && this.dataOriginal[renderKey]['collection'] && attr.includes(`{{${renderKey}.`))
+						data[renderKey]['collection'] = this.dataOriginal[renderKey]['collection']
+
 				let value = self.__getValue(data, attr);
-				// if (value) {
-				// if (value && typeof(value) !== "object") {
-				if (value && !Array.isArray(value)) {
-					// converts object to string
-					// if (!Array.isArray(value) && typeof(value) == "object") {
+				if (value) {
 					if (typeof(value) == "object") {
-						let str = '';
-						for (const [key, val] of Object.entries(value)) {
-							str += `${key}: ${val}\n`;
-						}
-						value = str	
+						value = this.generateString(value)	
 					}	
 					isPass = true;
 					inputValue = inputValue.replace(attr, value);
@@ -82,28 +82,36 @@ const CoCreateRender = {
 		}
 		return resultValue;
 	},
+
+	generateString: function(value, str = ''){
+		// let str = '';
+		// do {
+			let flag = true;
+			if (str)
+				flag = false;
+			for (const [key, val] of Object.entries(value)) {
+				if (typeof(val) == "object") {
+					str += `${key}: \n`;
+					this.generateString(val, str)
+				}
+				else
+					str += `${key}: ${val}\n`;
+			}
+		// } while()
+		if (flag)
+			return str
+	},
 	
 	render: function(template, data) {
 		let type = template.getAttribute('render-array') || "data";
 		const renderKey = template.getAttribute('render-key') || type;
 		const self = this;
 
-		// const arrayData = this.__getValueFromObject(data, type);
 		let arrayData = data;
 
 		const isRenderObject = template.hasAttribute('render-object');
 		if (isRenderObject){
-			const renderObject = template.getAttribute('render-object');
-			if (renderObject)
-				arrayData = data[renderObject];
-			
-			let array = []
-			for (const [key, value] of Object.entries(arrayData)) {
-				array.push({key: key, value: value})
-			}
-			if (array.length > 0)
-				arrayData = array
-			
+			const renderObject = template.getAttribute('render-object');			
 			type = renderObject || 'data'
 		}
 
@@ -114,29 +122,52 @@ const CoCreateRender = {
 				arrayData = data[renderArray];
 			type = renderArray || 'data';
 		}
+		if (isRenderObject && type) {
+			let r_data = self.isRenderObject(arrayData[type], renderKey)
+			for (let sdata of r_data) {
+				let cloneEl = this.cloneEl(template);
+				cloneEl.classList.add('clone_' + type);	
+				self.setValue([cloneEl], sdata, renderKey);
+				template.insertAdjacentHTML('beforebegin', cloneEl.outerHTML);
+			}
+		} else {
 
-		if (!Array.isArray(arrayData))
-			arrayData = this.__getValueFromObject(data, type);
-
-		if (!arrayData) {
-			let cloneEl = this.cloneEl(template);
-			cloneEl.classList.add('cloned');
-			self.setValue([cloneEl], data, renderKey);
-			template.insertAdjacentHTML('beforebegin', cloneEl.outerHTML);
-		}
+			if (!Array.isArray(arrayData))
+				arrayData = this.__getValueFromObject(data, type);
 
-		if (type && Array.isArray(arrayData)) {
-			arrayData.forEach((item) => {
+			if (!arrayData) {
 				let cloneEl = this.cloneEl(template);
-				cloneEl.classList.add('clone_' + type);
-				let r_data = self.__createObject(item, renderKey);
-
-				self.setValue([cloneEl], r_data, renderKey);
+				cloneEl.classList.add('cloned');
+				self.setValue([cloneEl], data, renderKey);
 				template.insertAdjacentHTML('beforebegin', cloneEl.outerHTML);
-			});
+			}
+
+			if(type && Array.isArray(arrayData)) {
+				arrayData.forEach((item) => {
+					let cloneEl = this.cloneEl(template);
+					cloneEl.classList.add('clone_' + type);
+					let r_data = self.__createObject(item, renderKey);
+					self.setValue([cloneEl], r_data, renderKey);
+					template.insertAdjacentHTML('beforebegin', cloneEl.outerHTML);
+				});
+			}
 		}
 	},
 	
+	isRenderObject: function(data, renderKey) {	
+		let array = []
+		for (const [key, value] of Object.entries(data)) {
+			let type = 'string';
+			if (typeof(value) == "object")
+				if (Array.isArray(value))
+					type = 'array'
+				else
+					type = 'object'
+			array.push({[renderKey]: {key, value, type}})
+		}
+		return array
+	},
+
 	cloneEl: function(template) {
 		let cloneEl = template.cloneNode(true);
 		cloneEl.classList.remove('template');
@@ -145,8 +176,8 @@ const CoCreateRender = {
 		cloneEl.setAttribute('templateId', templateId);
 		return cloneEl;
 	},
- 
-	setValue:function(els, data, renderKey){
+
+	setValue: function(els, data, renderKey){
 		if (!data) return;
 		const that = this;
 		Array.from(els).forEach(el => {
@@ -164,27 +195,34 @@ const CoCreateRender = {
 				if(el.childNodes.length > 0) {
 					that.setValue(el.childNodes, data, renderKey);
 				}
-				if (el.classList.contains('template')) {
+				if (el.classList.contains('template') && !el.hasAttribute('template_id')) {
 					that.render(el, data);
 				} 
 			}
 			
 			if (el.nodeType == 3) {
+				let valueType = el.parentElement.getAttribute('value-type')
 				let textContent = el.textContent;
 				let text = that.__replaceValue(data, textContent, renderKey);
 				if (text || text == "") {
-					const newNode = document.createElement('div');
-					newNode.innerHTML = text;
-					el.replaceWith(...newNode.childNodes)
+					if (valueType == 'text' || valueType == 'string'){
+						el.textContent = text;
+					} else {
+						const newNode = document.createElement('div');
+						newNode.innerHTML = text;
+						el.replaceWith(...newNode.childNodes)
+					}
 				}
 			}
 
 		});
 	},
 	
+	dataOriginal: {},
 	data: function({selector, data, elements}) {
+		this.dataOriginal = data;
 		if (selector) {
-			let template = document.querySelector(selector);
+			let template = queryDocumentSelector(selector);
 			if (!template) return;
 			if (template.classList.contains('template')) {
 				this.render(template, data);
@@ -192,7 +230,10 @@ const CoCreateRender = {
 			else
 				this.setValue([template], data);
 		} else if (elements) {
-			this.setValue(elements, data);
+			if (elements.length == 1 && elements[0].classList.contains('template'))
+				this.render(elements[0], data);
+			else
+				this.setValue(elements, data);
 		}
 		
 	}