Skip to content

Commit a3f97e3

Browse files
jean1187jean1187
committed
clean tree
1 parent 4012ad1 commit a3f97e3

File tree

5 files changed

+73
-59
lines changed

5 files changed

+73
-59
lines changed

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
![GitHub file size in bytes](https://img.shields.io/github/size/CoCreate-app/CoCreate-boilerplate/dist/CoCreate-boilerplate.min.js?label=minified%20size)
2-
![GitHub package.json version](https://img.shields.io/github/package-json/v/CoCreate-app/CoCreate-boilerplate)
3-
![GitHub](https://img.shields.io/github/license/CoCreate-app/CoCreate-boilerplate)
4-
![GitHub labels](https://img.shields.io/github/labels/CoCreate-app/CoCreate-boilerplate/help%20wanted)
1+
![GitHub file size in bytes](https://img.shields.io/github/size/CoCreate-app/CoCreate-boilerplate/dist/CoCreate-boilerplate.min.js?label=minified%20size&style=for-the-badge)
2+
![GitHub package.json version](https://img.shields.io/github/package-json/v/CoCreate-app/CoCreate-boilerplate?style=for-the-badge)
3+
![GitHub](https://img.shields.io/github/license/CoCreate-app/CoCreate-boilerplate?style=for-the-badge)
4+
![GitHub labels](https://img.shields.io/github/labels/CoCreate-app/CoCreate-boilerplate/help%20wanted?style=for-the-badge)
55

66
# CoCreate-render
77
A simple HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable.

‎demo/render.html‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,10 @@
99
</style>
1010

1111
<div data-template_id="abc1" data-fetch_collection="render_test">
12-
1312
<div class="template card {{render2.collection}} card margin:10px firstname"
1413
data-value="{{render2.data._id}}"
1514
data-template_id="abc1"
1615
data-render_array="render2.data">
17-
1816
<div class="card-body padding:15px" data-collection="{{render2.collection}}">
1917
<h3 class="{{render2.data.firstname}} blue" value="{{render2.data.lastname}} - {{render2.data.firstname}}">--</h3>
2018
<h3 data-value="{{ render2.data.lastname }}" value="{{lastname}}"></h3>
@@ -31,9 +29,16 @@ <h3 value="{{render2.collection}}"></h3>
3129

3230
<h3 value="{{render2.data.personal_info.email}}"></h3>
3331
</div>
32+
<div class="template card "
33+
data-render_array="render2.data.string_array" data-render_key="string_">
34+
35+
<h3 name="test"
36+
data-attribute="{{string_.--}}"
37+
class="{{string_.--}}"
38+
value="{{string_.--}}"></h3>
39+
</div>
3440
</div>
3541
</div>
36-
3742
</div>
3843

3944

@@ -58,11 +63,8 @@ <h1>Paste in your browser console</h1>
5863
{email:'jose@gmail.com','phone':'2','home':'home3'},
5964
{email:'juan@gmail.com','phone':'3','home':'home4'},
6065
{email:'kooo@gmail.com','phone':'4','home':'home5'},
61-
{email:'allask@gmail.com','phone':'5','home':'home6'},
62-
{email:'ana@gmail.com','phone':'6','home':'home7'},
63-
{email:'rosa@gmail.com','phone':'7','home':'home8'},
64-
{email:'nuevo@gmail.com','phone':'8','home':'home9'}
6566
],
67+
string_array: ['string1', 'string2', 1, 3]
6668
},{
6769
_id : '5678efe32qd2ol',
6870
firstname : 'jean',
@@ -80,6 +82,7 @@ <h1>Paste in your browser console</h1>
8082
{email:'1rosa@gmail.com','phone':'17','home':'home18'},
8183
{email:'1nuevo@gmail.com','phone':'18','home':'home19'}
8284
],
85+
string_array: ['string1', 'string2', 1, 3]
8386
},
8487
]
8588
}

‎documentation/index.html‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="utf-8">
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1">
8-
<title>CoCreate-dnd Documentation | CoCreateJS </title>
8+
<title>CoCreate-render Documentation | CoCreateJS </title>
99
<link rel="icon" type="image/png" sizes="32x32" href="https://cocreate.app/images/favicon.ico">
1010
<meta name="description" content="A simple yet powerful drag-and-drop solution powered by javascript." />
1111
<meta name="keywords" content="drag and drop, colaboration, dnd utility, drag and drop utility" />
@@ -54,32 +54,43 @@ <h3 class="border-bottom:1px_solid_lightgrey margin-top:40px padding:5px_0px">Ex
5454
</p>
5555

5656
<h4 class="margin-top:20px padding:5px_0px">HTML Template</h4>
57+
5758
<div class="margin-top:10px">
58-
5959
<pre><code class="language-html">
60-
&lt;div data-template_id="abc1" data-fetch_collection="render_test"&gt;
61-
&lt;div class="template card {{render2.collection}} card margin:10px firstname"
62-
data-value="{{render2.data._id}}"
63-
data-template_id="abc1"
64-
data-render_array="render2.data"&gt;
65-
66-
&lt;div class="card-body padding:15px" data-collection="{{render2.collection}}"&gt;
67-
&lt;h3 class="{{render2.data.firstname}} blue" value="{{render2.data.lastname}} - {{render2.data.firstname}}"&gt;--&lt;/h3&gt;
68-
&lt;h3 data-value="{{ render2.data.lastname }}" value="{{lastname}}"&gt;&lt;/h3&gt;
69-
&lt;input value="{{ render2.collection }}"/&gt;
70-
&lt;h3 class="email" value="{{render2.data.email}}"&gt;&lt;/h3&gt;
71-
&lt;textarea value="{{render2.data.lastname}}"&gt;&lt;/textarea&gt;
72-
&lt;h3 data-attribute="{{render2.data.personal_info.email}}" name="email" value="{{render2.data.personal_info.email}}"&gt;&lt;/h3&gt;
73-
74-
&lt;div class="template card" data-render_array="render2.data.testing_array" data-render_key="temp2" &gt;
75-
&lt;h3 data-attribute="{{temp2.email}}" name="email" class="{{temp2.email}}" value="{{temp2.email}}"&gt;&lt;/h3&gt;
76-
&lt;h3 value="{{render2.collection}}"&gt;&lt;/h3&gt;
77-
&lt;h3 value="{{render2.data.personal_info.email}}"&gt;&lt;/h3&gt;
78-
&lt;/div&gt;
79-
&lt;/div&gt;
80-
&lt;/div&gt;
60+
&lt;div data-template_id=&quot;abc1&quot; data-fetch_collection=&quot;render_test&quot;&gt;
61+
&lt;div class=&quot;template card {{render2.collection}} card margin:10px firstname&quot;
62+
data-value=&quot;{{render2.data._id}}&quot;
63+
data-template_id=&quot;abc1&quot;
64+
data-render_array=&quot;render2.data&quot;&gt;
65+
&lt;div class=&quot;card-body padding:15px&quot; data-collection=&quot;{{render2.collection}}&quot;&gt;
66+
&lt;h3 class=&quot;{{render2.data.firstname}} blue&quot; value=&quot;{{render2.data.lastname}} - {{render2.data.firstname}}&quot;&gt;--&lt;/h3&gt;
67+
&lt;h3 data-value=&quot;{{ render2.data.lastname }}&quot; value=&quot;{{lastname}}&quot;&gt;&lt;/h3&gt;
68+
&lt;input value=&quot;{{ render2.collection }}&quot;/&gt;
69+
&lt;h3 class=&quot;email&quot; value=&quot;{{render2.data.email}}&quot;&gt;--&lt;/h3&gt;
70+
&lt;textarea value=&quot;{{render2.data.lastname}}&quot;&gt;&lt;/textarea&gt;
71+
&lt;h3 data-attribute=&quot;{{render2.data.personal_info.email}}&quot; name=&quot;email&quot; value=&quot;{{render2.data.personal_info.email}}&quot;&gt;&lt;/h3&gt;
72+
73+
&lt;div class=&quot;template card &quot;
74+
data-render_array=&quot;render2.data.testing_array&quot;&gt;
75+
76+
&lt;h3 data-attribute=&quot;{{render2.data.testing_array.email}}&quot; name=&quot;email&quot; class=&quot;{{render2.data.testing_array.email}}&quot; value=&quot;{{render2.data.testing_array.email}}&quot;&gt;&lt;/h3&gt;
77+
&lt;h3 value=&quot;{{render2.collection}}&quot;&gt;&lt;/h3&gt;
78+
79+
&lt;h3 value=&quot;{{render2.data.personal_info.email}}&quot;&gt;&lt;/h3&gt;
80+
&lt;/div&gt;
81+
&lt;div class=&quot;template card &quot;
82+
data-render_array=&quot;render2.data.string_array&quot; data-render_key=&quot;string_&quot;&gt;
83+
84+
&lt;h3 name=&quot;test&quot;
85+
data-attribute=&quot;{{string_.--}}&quot;
86+
class=&quot;{{string_.--}}&quot;
87+
value=&quot;{{string_.--}}&quot;&gt;&lt;/h3&gt;
88+
&lt;/div&gt;
89+
&lt;/div&gt;
90+
&lt;/div&gt;
8191
&lt;/div&gt;
82-
</code></pre> </div>
92+
</code></pre>
93+
</div>
8394

8495
<h4 class="margin-top:40px padding:5px_0px">CoCreate-render usage</h4>
8596
<p class="padding:10px_0px">Description.</p>
@@ -98,6 +109,7 @@ <h4 class="margin-top:40px padding:5px_0px">CoCreate-render usage</h4>
98109
{email:'frank@gmail.com','phone':'1','home':'home2'},
99110
{email:'jose@gmail.com','phone':'2','home':'home3'},
100111
],
112+
string_array: ['string1', 'string2', 1, 3]
101113
},{
102114
_id : '5678efe32qd2ol',
103115
firstname : 'jean',
@@ -109,6 +121,7 @@ <h4 class="margin-top:40px padding:5px_0px">CoCreate-render usage</h4>
109121
{email:'1rosa@gmail.com','phone':'17','home':'home18'},
110122
{email:'1nuevo@gmail.com','phone':'18','home':'home19'}
111123
],
124+
string_array: ['string1', 'string2', 1, 3]
112125
},
113126
]
114127
}
@@ -223,19 +236,6 @@ <h2 class="border-bottom:1px_solid_lightgrey padding:5px_0px">Demo</h2>
223236
<script type="text/javascript" src="https://server.cocreate.app/CoCreate-plugins/CoCreate-codemirror/dist/CoCreate-codemirror.js" async></script>
224237
<!-- Prism -->
225238
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/prism.min.js"></script>
226-
<script>
227-
// Prism.plugins.NormalizeWhitespace.setDefaults({
228-
// 'remove-trailing': true,
229-
// 'remove-indent': true,
230-
// 'left-trim': true,
231-
// 'right-trim': true,
232-
// /*'break-lines': 80,
233-
// 'indent': 2,
234-
// 'remove-initial-line-feed': false,
235-
// 'tabs-to-spaces': 4,
236-
// 'spaces-to-tabs': 4*/
237-
// });
238-
</script>
239239
</body>
240240

241241
</html>

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "CoCreate-render",
2+
"name": "@CoCreate/render",
33
"version": "1.0.0",
44
"description": "",
55
"main": "app.js",
@@ -11,8 +11,8 @@
1111
"type": "git",
1212
"url": "git+https://github.com/CoCreate-app/CoCreate-render.git"
1313
},
14-
"author": "Frank Pagan",
15-
"license": "ISC",
14+
"author": "CoCreate LLC",
15+
"license": "MIT",
1616
"bugs": {
1717
"url": "https://github.com/CoCreate-app/CoCreate-render/issues"
1818
},

‎src/CoCreate-render.js‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -53,16 +53,21 @@ const CoCreateRender = {
5353
const render_key = template.getAttribute('data-render_key') || type;
5454
const self = this;
5555
const arrayData = this.__getValueFromObject(data, type);
56+
5657
if (type && Array.isArray(arrayData)) {
57-
arrayData.forEach((item) => {
58+
arrayData.forEach((item, index) => {
5859

5960
let cloneEl = template.cloneNode(true);
6061
cloneEl.classList.remove('template');
6162
cloneEl.classList.add('clone_' + type);
62-
63+
if (typeof item !== 'object') {
64+
item = {"--": item};
65+
} else {
66+
item['index'] = index;
67+
}
6368
let r_data = self.__createObject(item, render_key);
6469

65-
self.setValue([cloneEl], r_data, cloneEl);
70+
self.setValue([cloneEl], r_data);
6671
template.insertAdjacentHTML('beforebegin', cloneEl.outerHTML);
6772
})
6873
}
@@ -98,21 +103,23 @@ const CoCreateRender = {
98103
switch (tag) {
99104
case 'input':
100105
e.setAttribute(attr_name, attrValue);
101-
break;
106+
break;
102107
case 'textarea':
103108
e.setAttribute(attr_name, attrValue);
104109
e.textContent = attrValue;
105-
break;
110+
break;
106111
default:
107-
e.innerHTML = attrValue;
112+
if (e.children.length === 0) {
113+
e.innerHTML = attrValue;
114+
}
108115
}
109116
}
110117
e.setAttribute(attr_name, attrValue);
111118
}
112119
});
113120

114121
if(e.children.length > 0) {
115-
that.setValue(e.children, data, e)
122+
that.setValue(e.children, data)
116123

117124
if (e.classList.contains('template')) {
118125
that.setArray(e, data);
@@ -123,6 +130,9 @@ const CoCreateRender = {
123130

124131
render : function(selector, dataResult) {
125132
let template_div = document.querySelector(selector)
133+
if (!template_div) {
134+
return;
135+
}
126136
if (Array.isArray(dataResult)) {
127137
template_div.setAttribute('data-render_array', 'test');
128138
this.setValue([template_div], {test: dataResult});
@@ -131,4 +141,5 @@ const CoCreateRender = {
131141
}
132142
}
133143

134-
}
144+
}
145+
export default CoCreateRender;

0 commit comments

Comments
 (0)