@cocreate/render 1.6.0 → 1.6.1

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 (8) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/demo/fetch.string.html +6 -9
  3. package/demo/index.html +0 -7
  4. package/demo/renderKey.html +30 -0
  5. package/package.json +2 -1
  6. package/src/index.js +30 -20
  7. package/demo/fetch.html +0 -101
  8. package/demo/suggestion.html +0 -57
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## [1.6.1](https://github.com/CoCreate-app/CoCreate-render/compare/v1.6.0...v1.6.1) (2022-05-03)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * iterate through childNodes and replace textContent of textNodes ([df1012a](https://github.com/CoCreate-app/CoCreate-render/commit/df1012abb99158050e5f6898e56006e676b6d54f))
7
+
1
8
  # [1.6.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.5.9...v1.6.0) (2022-04-15)
2
9
 
3
10
 
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
@@ -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/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.6.0",
3
+ "version": "1.6.1",
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
 
@@ -146,30 +147,39 @@ const CoCreateRender = {
146
147
  if (!data) return;
147
148
  const that = this;
148
149
  Array.from(els).forEach(el => {
149
- Array.from(el.attributes).forEach(attr=>{
150
- let attr_name = attr.name.toLowerCase();
151
- let attrValue = attr.value;
152
- attrValue = that.__replaceValue(data, attrValue);
153
-
154
- if (attrValue) {
155
- el.setAttribute(attr_name, attrValue);
156
- }
157
- });
158
-
159
- if (el.innerHTML) {
160
- let textContent = el.innerHTML;
161
- textContent = that.__replaceValue(data, textContent);
162
- if (textContent) {
163
- el.innerHTML = textContent;
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);
164
163
  }
164
+ if (el.classList.contains('template')) {
165
+ that.render(el, data);
166
+ }
165
167
  }
166
168
 
167
- if(el.children.length > 0) {
168
- that.setValue(el.children, data, template);
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) {
177
+ let textContent = el.textContent;
178
+ let text = that.__replaceValue(data, textContent);
179
+ if (text) {
180
+ el.textContent = text;
181
+ }
169
182
  }
170
- if (el.classList.contains('template')) {
171
- that.render(el, data);
172
- }
173
183
 
174
184
  });
175
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>