@cocreate/render 1.5.9 → 1.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/CoCreate.config.js +1 -1
  3. package/demo/fetch.string.html +6 -9
  4. package/demo/index.html +1 -8
  5. package/demo/render.array.html +32 -34
  6. package/demo/render.object.html +46 -0
  7. package/demo/renderKey.html +30 -0
  8. package/package.json +2 -1
  9. package/src/index.js +73 -37
  10. package/demo/fetch.html +0 -101
  11. package/demo/suggestion.html +0 -57
package/CHANGELOG.md CHANGED
@@ -1,3 +1,31 @@
1
+ ## [1.6.2](https://github.com/CoCreate-app/CoCreate-render/compare/v1.6.1...v1.6.2) (2022-05-06)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * update config organization_Id to organization_id ([a847750](https://github.com/CoCreate-app/CoCreate-render/commit/a84775051b71f0edd72c0bfa77c75f5d407378d0))
7
+
8
+ ## [1.6.1](https://github.com/CoCreate-app/CoCreate-render/compare/v1.6.0...v1.6.1) (2022-05-03)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * iterate through childNodes and replace textContent of textNodes ([df1012a](https://github.com/CoCreate-app/CoCreate-render/commit/df1012abb99158050e5f6898e56006e676b6d54f))
14
+
15
+ # [1.6.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.5.9...v1.6.0) (2022-04-15)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * if array use template if object render as string. removed [] ([fa6abd5](https://github.com/CoCreate-app/CoCreate-render/commit/fa6abd529c63ed6db2ea0a6ace487bc59f38804c))
21
+ * isRenderArray ([7367578](https://github.com/CoCreate-app/CoCreate-render/commit/7367578d69d8f95f6f31b60abe9d22f6128fc660))
22
+
23
+
24
+ ### Features
25
+
26
+ * attribute render-object to treat an object as an array and render the object key name ([3b61640](https://github.com/CoCreate-app/CoCreate-render/commit/3b61640a651b8c39709c975e1a7302066a32dfa6))
27
+ * supports rendering objects as key and value. If value is an object convert to string for rendering ([a4985b0](https://github.com/CoCreate-app/CoCreate-render/commit/a4985b09ef7512d608722a0ab11b971d6ffedcd2))
28
+
1
29
  ## [1.5.9](https://github.com/CoCreate-app/CoCreate-render/compare/v1.5.8...v1.5.9) (2022-02-24)
2
30
 
3
31
 
package/CoCreate.config.js CHANGED
@@ -1,7 +1,7 @@
1
1
  module.exports = {
2
2
  "config": {
3
3
  "apiKey": "2061acef-0451-4545-f754-60cf8160",
4
- "organization_Id": "5ff747727005da1c272740ab",
4
+ "organization_id": "5ff747727005da1c272740ab",
5
5
  "host": "general.cocreate.app"
6
6
  },
7
7
  "sources": [
package/demo/fetch.string.html CHANGED
@@ -35,15 +35,12 @@
35
35
 
36
36
  })
37
37
 
38
- </pre>
39
- <script>
40
- var config = {
41
- apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
42
- organization_Id: '5de0387b12e200ea63204d6c'
43
- }
44
- </script>
45
-
38
+ </pre>
39
+
46
40
  <!-- CoCreate JS CDN -->
47
- <script src="../dist/CoCreate-render.js" ></script>
41
+ <!--<script src="../dist/CoCreate-render-key.js"></script>-->
42
+ <script src="../../../CoCreateJS/dist/CoCreate.js"></script>
43
+ <!-- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script> -->
44
+
48
45
  </body>
49
46
  </html>
package/demo/index.html CHANGED
@@ -30,7 +30,7 @@
30
30
  </div>
31
31
  <div class="template card" render-array="render2.data.string_array" render-key="string">
32
32
  string - template
33
- <h3 name="test" data-attribute="{{string[]}}" class="{{string[]}}" value="{{string[]}}"></h3>
33
+ <h3 name="test" data-attribute="{{string}}" class="{{string}}" value="{{string}}"></h3>
34
34
 
35
35
  </div>
36
36
 
@@ -87,13 +87,6 @@
87
87
  })
88
88
 
89
89
  </pre>
90
- <script>
91
- var config = {
92
- apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
93
- organization_Id: '5de0387b12e200ea63204d6c',
94
- host: 'ws.cocreate.app'
95
- }
96
- </script>
97
90
 
98
91
  <!--<script src="../dist/CoCreate-render.js"></script>-->
99
92
  <script src="../../../CoCreateJS/dist/CoCreate.js" ></script>
package/demo/render.array.html CHANGED
@@ -10,40 +10,38 @@
10
10
  </style>
11
11
  <body>
12
12
 
13
- <cocreate-select name="current_org" template_id="abc1">
14
- <selected class="template" template_id="abc1" render-array="data">
15
- <cc-option class="template" render-array="data.current_org" render-key="current_org" value="{{current_org[]}}">
16
- <h3>{{current_org[]}}</h3>
17
- </cc-option>
18
- </selected>
19
- </cocreate-select>
13
+ <body>
14
+ <cc-options fetch-collection="organizations" fetch-document_id="5ff747727005da1c272740ab" fetch-name="domains" template_id="domains" class="overflow:auto">
15
+ <cc-option class="template display:flex" template_id="domains" value="{{domains}}">
16
+ <h4>{{domains}}</h4>
17
+ </cc-option>
18
+ </cc-options>
19
+
20
+ <div class="template" template_id="abc1">
21
+ <div class="template" render-array="data.current_org" render-key="current_org" value="{{current_org}}">
22
+ <h3>{{current_org}}</h3>
23
+ </div>
24
+ </div>
20
25
 
21
-
22
- <pre>
23
- <h1>Paste in your browser console</h1>
24
-
25
- /** Example **/
26
- CoCreate.render.data({
27
- selector: '[template_id=abc1]',
28
- data: {
29
- collection : 'dededede',
30
- data: [{
31
- _id : '123kijfhgfkel45',
32
- current_org: ['test1', 'test2', 'test31', 'test3']
33
- }]
34
- }
26
+ <pre>
27
+ <h1>Paste in your browser console</h1>
35
28
 
36
- })
29
+ /** Example **/
30
+ CoCreate.render.data({
31
+ selector: '[template_id=abc1]',
32
+ data: {
33
+ collection : 'dededede',
34
+ data: [{
35
+ _id : '123kijfhgfkel45',
36
+ current_org: ['test1', 'test2', 'test31', 'test3']
37
+ }]
38
+ }
39
+
40
+ })
41
+
42
+ </pre>
37
43
 
38
- </pre>
39
- <script>
40
- var config = {
41
- apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
42
- organization_Id: '5de0387b12e200ea63204d6c'
43
- }
44
- </script>
45
-
46
- <!-- CoCreate JS CDN -->
47
- <script src="../dist/CoCreate-render.js" ></script>
48
- </body>
49
- </html>
44
+ <!-- CoCreate JS CDN -->
45
+ <script src="../../../CoCreateJS/dist/CoCreate.js" ></script>
46
+ </body>
47
+ </html>
package/demo/render.object.html ADDED
@@ -0,0 +1,46 @@
1
+ <html>
2
+ <head>
3
+ <title>Render | CoCreateJS</title>
4
+
5
+ <!-- CoCreate Favicon -->
6
+ <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
7
+ </head>
8
+ <style>
9
+ .template{display:none}
10
+ </style>
11
+ <body>
12
+
13
+ <div class="template" template_id="abc1">
14
+ <div>{{data}}</div>
15
+ <h1> {{data.collection}} {{data._id}}</h1>
16
+ <div class="template" render-object="" render-key="one">
17
+ <h5>{{one.key}}: {{one.value}}</h5>
18
+ </div>
19
+ <div class="template" render-array="data.current_org" render-key="current_org" value="{{current_org}}">
20
+ <h3>{{current_org}}</h3>
21
+ </div>
22
+ </div>
23
+
24
+ <pre>
25
+ <h1>Paste in your browser console</h1>
26
+
27
+ /** Example **/
28
+ CoCreate.render.data({
29
+ selector: '[template_id=abc1]',
30
+ data: {
31
+ collection : 'dededede',
32
+ data: [{
33
+ collection : 'dededede',
34
+ _id : '123kijfhgfkel45',
35
+ current_org: ['test1', 'test2', 'test31', 'test3']
36
+ }]
37
+ }
38
+
39
+ })
40
+
41
+ </pre>
42
+
43
+ <!-- CoCreate JS CDN -->
44
+ <script src="../../../CoCreateJS/dist/CoCreate.js" ></script>
45
+ </body>
46
+ </html>
package/demo/renderKey.html ADDED
@@ -0,0 +1,30 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <title>Render-key | CoCreateJS</title>
6
+
7
+ <!-- CoCreate Favicon -->
8
+ <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
9
+ </head>
10
+
11
+ <body class="padding:20px">
12
+
13
+ <form>
14
+ <input render-key="renderKey.name">
15
+ <div template_id="renderKey">
16
+ <div>This is <b>{{renderKey.name}}</b></div>
17
+ <p>This {{renderKey.name}}</p>
18
+ <input value="{{renderKey.name}}">
19
+ <button actions='renderKey' href="https://{{renderKey.name}}/admin/signin.html">Create Form</button>
20
+ </div>
21
+
22
+ </form>
23
+
24
+ <!--<script src="../dist/CoCreate-render-key.js"></script>-->
25
+ <script src="../../../CoCreateJS/dist/CoCreate.js"></script>
26
+ <!-- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script> -->
27
+
28
+ </body>
29
+
30
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/render",
3
- "version": "1.5.9",
3
+ "version": "1.6.2",
4
4
  "description": "A simple render component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
5
5
  "keywords": [
6
6
  "render",
@@ -62,6 +62,7 @@
62
62
  },
63
63
  "dependencies": {
64
64
  "@cocreate/actions": "^1.3.33",
65
+ "@cocreate/api": "^1.2.32",
65
66
  "@cocreate/docs": "^1.2.69"
66
67
  }
67
68
  }
package/src/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  /*globals CustomEvent*/
2
2
  import action from '@cocreate/actions';
3
+ // import api from '@cocreate/api';
3
4
 
4
5
  const CoCreateRender = {
5
6
 
@@ -51,13 +52,22 @@ const CoCreateRender = {
51
52
  let isPass = false;
52
53
  let self = this;
53
54
  let resultValue = null;
54
- // let variables = inputValue.match(/{{\s*(\S+)\s*}}/g);
55
- // let variables = inputValue.match(/{{([A-Za-z0-9_.,\- ]*)}}/g);
56
55
  let variables = inputValue.match(/{{([A-Za-z0-9_.,\[\]\- ]*)}}/g);
57
56
  if (variables) {
58
57
  variables.forEach((attr) => {
59
58
  let value = self.__getValue(data, attr);
60
- if (value && typeof(value) !== "object") {
59
+ // if (value) {
60
+ // if (value && typeof(value) !== "object") {
61
+ if (value && !Array.isArray(value)) {
62
+ // converts object to string
63
+ // if (!Array.isArray(value) && typeof(value) == "object") {
64
+ if (typeof(value) == "object") {
65
+ let str = '';
66
+ for (const [key, val] of Object.entries(value)) {
67
+ str += `${key}: ${val}\n`;
68
+ }
69
+ value = str
70
+ }
61
71
  isPass = true;
62
72
  inputValue = inputValue.replace(attr, value);
63
73
  }
@@ -71,32 +81,52 @@ const CoCreateRender = {
71
81
  },
72
82
 
73
83
  render: function(template, data) {
74
- const type = template.getAttribute('render-array') || "data";
84
+ let type = template.getAttribute('render-array') || "data";
75
85
  const render_key = template.getAttribute('render-key') || type;
76
86
  const self = this;
77
87
 
78
88
  // const arrayData = this.__getValueFromObject(data, type);
79
89
  let arrayData = data;
80
- if (!Array.isArray(data))
90
+
91
+ const isRenderObject = template.hasAttribute('render-object');
92
+ if (isRenderObject){
93
+ const renderObject = template.getAttribute('render-object');
94
+ if (renderObject)
95
+ arrayData = data[renderObject];
96
+
97
+ let array = []
98
+ for (const [key, value] of Object.entries(arrayData)) {
99
+ array.push({key: key, value: value})
100
+ }
101
+ if (array.length > 0)
102
+ arrayData = array
103
+
104
+ type = renderObject || 'data'
105
+ }
106
+
107
+ const isRenderArray = template.hasAttribute('render-array');
108
+ if (isRenderArray){
109
+ const renderArray = template.getAttribute('render-array');
110
+ if (renderArray)
111
+ arrayData = data[renderArray];
112
+ type = renderArray || 'data';
113
+ }
114
+
115
+ if (!Array.isArray(arrayData))
81
116
  arrayData = this.__getValueFromObject(data, type);
82
- if (!arrayData){
117
+
118
+ if (!arrayData) {
83
119
  let cloneEl = this.cloneEl(template);
84
120
  cloneEl.classList.add('cloned');
85
121
  self.setValue([cloneEl], data);
86
122
  template.insertAdjacentHTML('beforebegin', cloneEl.outerHTML);
87
123
  }
124
+
88
125
  if (type && Array.isArray(arrayData)) {
89
- arrayData.forEach((item, index) => {
126
+ arrayData.forEach((item) => {
90
127
  let cloneEl = this.cloneEl(template);
91
128
  cloneEl.classList.add('clone_' + type);
92
- let new_key = render_key;
93
- if (typeof item !== 'object') {
94
- // item = {"--": item};
95
- new_key = new_key + "[]";
96
- } else {
97
- item['index'] = index;
98
- }
99
- let r_data = self.__createObject(item, new_key);
129
+ let r_data = self.__createObject(item, render_key);
100
130
 
101
131
  self.setValue([cloneEl], r_data);
102
132
  template.insertAdjacentHTML('beforebegin', cloneEl.outerHTML);
@@ -117,33 +147,39 @@ const CoCreateRender = {
117
147
  if (!data) return;
118
148
  const that = this;
119
149
  Array.from(els).forEach(el => {
120
- // if (el.classList.contains('template')) {
121
- // el = this.cloneEl(el);
122
- // }
123
- Array.from(el.attributes).forEach(attr=>{
124
- let attr_name = attr.name.toLowerCase();
125
- let attrValue = attr.value;
126
- attrValue = that.__replaceValue(data, attrValue);
127
-
128
- if (attrValue) {
129
- el.setAttribute(attr_name, attrValue);
150
+ if (el.nodeType == 1) {
151
+ Array.from(el.attributes).forEach(attr=>{
152
+ let attr_name = attr.name.toLowerCase();
153
+ let attrValue = attr.value;
154
+ attrValue = that.__replaceValue(data, attrValue);
155
+
156
+ if (attrValue) {
157
+ el.setAttribute(attr_name, attrValue);
158
+ }
159
+ });
160
+
161
+ if(el.childNodes.length > 0) {
162
+ that.setValue(el.childNodes, data, template);
130
163
  }
131
- });
164
+ if (el.classList.contains('template')) {
165
+ that.render(el, data);
166
+ }
167
+ }
132
168
 
133
- if (el.children.length == 0 && el.textContent) {
169
+ // if (el.innerHTML) {
170
+ // let textContent = el.innerHTML;
171
+ // textContent = that.__replaceValue(data, textContent);
172
+ // if (textContent) {
173
+ // el.innerHTML = textContent;
174
+ // }
175
+ // }
176
+ if (el.nodeType == 3) {
134
177
  let textContent = el.textContent;
135
- textContent = that.__replaceValue(data, textContent);
136
- if (textContent) {
137
- el.innerHTML = textContent;
178
+ let text = that.__replaceValue(data, textContent);
179
+ if (text) {
180
+ el.textContent = text;
138
181
  }
139
182
  }
140
-
141
- if(el.children.length > 0) {
142
- that.setValue(el.children, data, template);
143
- }
144
- if (el.classList.contains('template')) {
145
- that.render(el, data);
146
- }
147
183
 
148
184
  });
149
185
  },
package/demo/fetch.html DELETED
@@ -1,101 +0,0 @@
1
- <html>
2
- <head>
3
- <title>Render | CoCreateJS</title>
4
-
5
- <!-- CoCreate Favicon -->
6
- <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
7
- </head>
8
- <body>
9
-
10
- <div template_id="abc1">
11
- <div class="template card {{render2.collection}} card margin:10px"
12
- value="{{render2.data._id}}"
13
- template_id="abc1"
14
- render-array="render2.data">
15
- <div class="card-body padding:15px" collection="{{render2.collection}}">
16
- <h3 class="{{render2.data.firstname}} blue" value="{{render2.data.lastname}} - {{render2.data.firstname}}">--</h3>
17
- <h3 value="{{ render2.data.lastname }}" value="{{lastname}}"></h3>
18
- <input value="{{ render2.collection }}"/>
19
- <h3 class="email" value="{{render2.data.email}}">--</h3>
20
- <textarea value="{{render2.data.lastname}}"></textarea>
21
- <h3 data-attribute="{{render2.data.personal_info.email}}" name="email" value="{{render2.data.personal_info.email}}"></h3>
22
-
23
- <div class="template card" render-array="render2.data.testing_array">
24
- <h3 data-attribute="{{render2.data.testing_array.email}}" name="email" class="{{render2.data.testing_array.email}}" value="">{{render2.data.testing_array.email}}</h3>
25
- <h3 value="">{{render2.collection}}</h3>
26
- <h3 value="{{render2.data.personal_info.email}}">{{render2.collection}}</h3>
27
- <div>*******************************************</div>
28
- </div>
29
- <div class="template card" render-array="render2.data.string_array" render-key="string">
30
-
31
- <h3 name="test"
32
- data-attribute="{{string_.--}}"
33
- class="{{string_.--}}"
34
- value="{{string_.--}}">{{string[]}}array</h3>
35
-
36
- </div>
37
-
38
- </div>
39
- </div>
40
- </div>
41
-
42
-
43
- <pre>
44
- <h1>Paste in your browser console</h1>
45
-
46
- /** Example of array object from db -- render2 is an example of render_id**/
47
- CoCreate.render.data({
48
- selector: '[template_id=abc1]',
49
- data: {
50
- render2: {
51
- collection : 'dededede',
52
- data: [{
53
- _id : '123kijfhgfkel45',
54
- firstname : 'Jin',
55
- lastname : 'codingmachinine',
56
- personal_info : {email:'jeanmendozar@gmail.com','phone':'56666'},
57
- email: 'tesing@gamil.com',
58
- testing_array : [
59
- {email:'jeanmendozar@gmail.com','phone':'0','home':'home1'},
60
- {email:'frank@gmail.com','phone':'1','home':'home2'},
61
- {email:'jose@gmail.com','phone':'2','home':'home3'},
62
- {email:'juan@gmail.com','phone':'3','home':'home4'},
63
- {email:'kooo@gmail.com','phone':'4','home':'home5'},
64
- ],
65
- string_array: ['string1', 'string2', 1, 3]
66
- },{
67
- _id : '5678efe32qd2ol',
68
- firstname : 'jean',
69
- lastname : 'Mendoza',
70
- personal_info : {email:'jeanmendozar@gmail.com','phone':'56666'},
71
- email: 'tesing2@gamil.com',
72
- testing_array : [
73
- {email:'1jeanmendozar@gmail.com','phone':'10','home':'home11'},
74
- {email:'1frank@gmail.com','phone':'11','home':'home12'},
75
- {email:'1jose@gmail.com','phone':'12','home':'home13'},
76
- {email:'1juan@gmail.com','phone':'13','home':'home14'},
77
- {email:'1kooo@gmail.com','phone':'14','home':'home15'},
78
- {email:'1allask@gmail.com','phone':'15','home':'home16'},
79
- {email:'1ana@gmail.com','phone':'16','home':'home17'},
80
- {email:'1rosa@gmail.com','phone':'17','home':'home18'},
81
- {email:'1nuevo@gmail.com','phone':'18','home':'home19'}
82
- ],
83
- string_array: ['string1', 'string2', 1, 3]
84
- },
85
- ]
86
- }
87
- }
88
- })
89
-
90
- </pre>
91
- <script>
92
- var config = {
93
- apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
94
- organization_Id: '5de0387b12e200ea63204d6c'
95
- }
96
- </script>
97
-
98
- <!-- CoCreate JS CDN -->
99
- <script src="../dist/CoCreate-render.js" ></script>
100
- </body>
101
- </html>
package/demo/suggestion.html DELETED
@@ -1,57 +0,0 @@
1
- <html>
2
- <head>
3
- <title>Render | CoCreateJS</title>
4
-
5
- <!-- CoCreate Favicon -->
6
- <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
7
- </head>
8
- <body>
9
-
10
- <div template_id="abc1" fetch-collection="render_test">
11
- <div class="template card {{render2.collection}} card margin:10px firstname"
12
- value="{{render2.data._id}}"
13
- template_id="abc1"
14
- render-array="render2.data">
15
- <div class="card-body padding:15px" collection="{{render2.collection}}">
16
- <div class="template card" render-array="render2.data.string_array" render-key="lol">
17
- <h3 name="test" data-attribute="{{lol[]}}" class="{{lol[]}}" value="{{lol[]}}"></h3>
18
- </div>
19
-
20
- </div>
21
- </div>
22
- </div>
23
-
24
-
25
- <pre>
26
- <h1>Paste in your browser console</h1>
27
-
28
- /** Example of array object from db -- render2 is an example of render_id**/
29
- CoCreate.render.data({
30
- selector: '[template_id=abc1]',
31
- data: {
32
- render2: {
33
- collection : 'dededede',
34
- data: [{
35
- _id : '123kijfhgfkel45',
36
- string_array: ['string1', 'string2', 1, 3]
37
- },{
38
- _id : '5678efe32qd2ol',
39
- string_array: ['string1', 'string2', 1, 3]
40
- },
41
- ]
42
- }
43
- }
44
- })
45
-
46
- </pre>
47
- <script>
48
- var config = {
49
- apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
50
- organization_Id: '5de0387b12e200ea63204d6c'
51
- }
52
- </script>
53
-
54
- <!-- CoCreate JS CDN -->
55
- <script src="../dist/CoCreate-render.js" ></script>
56
- </body>
57
- </html>