@cocreate/render 1.5.9 → 1.6.0

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 +14 -0
  2. package/demo/fetch.html +1 -1
  3. package/demo/index.html +1 -1
  4. package/demo/render.array.html +32 -34
  5. package/demo/render.object.html +46 -0
  6. package/demo/suggestion.html +1 -1
  7. package/package.json +1 -1
  8. package/src/index.js +46 -20
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [1.6.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.5.9...v1.6.0) (2022-04-15)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * if array use template if object render as string. removed [] ([fa6abd5](https://github.com/CoCreate-app/CoCreate-render/commit/fa6abd529c63ed6db2ea0a6ace487bc59f38804c))
7
+ * isRenderArray ([7367578](https://github.com/CoCreate-app/CoCreate-render/commit/7367578d69d8f95f6f31b60abe9d22f6128fc660))
8
+
9
+
10
+ ### Features
11
+
12
+ * 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))
13
+ * 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))
14
+
1
15
  ## [1.5.9](https://github.com/CoCreate-app/CoCreate-render/compare/v1.5.8...v1.5.9) (2022-02-24)
2
16
 
3
17
 
package/demo/fetch.html CHANGED
@@ -31,7 +31,7 @@
31
31
  <h3 name="test"
32
32
  data-attribute="{{string_.--}}"
33
33
  class="{{string_.--}}"
34
- value="{{string_.--}}">{{string[]}}array</h3>
34
+ value="{{string_.--}}">{{string}}array</h3>
35
35
 
36
36
  </div>
37
37
 
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
 
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/suggestion.html CHANGED
@@ -14,7 +14,7 @@
14
14
  render-array="render2.data">
15
15
  <div class="card-body padding:15px" collection="{{render2.collection}}">
16
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>
17
+ <h3 name="test" data-attribute="{{lol}}" class="{{lol}}" value="{{lol}}"></h3>
18
18
  </div>
19
19
 
20
20
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/render",
3
- "version": "1.5.9",
3
+ "version": "1.6.0",
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",
package/src/index.js CHANGED
@@ -51,13 +51,22 @@ const CoCreateRender = {
51
51
  let isPass = false;
52
52
  let self = this;
53
53
  let resultValue = null;
54
- // let variables = inputValue.match(/{{\s*(\S+)\s*}}/g);
55
- // let variables = inputValue.match(/{{([A-Za-z0-9_.,\- ]*)}}/g);
56
54
  let variables = inputValue.match(/{{([A-Za-z0-9_.,\[\]\- ]*)}}/g);
57
55
  if (variables) {
58
56
  variables.forEach((attr) => {
59
57
  let value = self.__getValue(data, attr);
60
- if (value && typeof(value) !== "object") {
58
+ // if (value) {
59
+ // if (value && typeof(value) !== "object") {
60
+ if (value && !Array.isArray(value)) {
61
+ // converts object to string
62
+ // if (!Array.isArray(value) && typeof(value) == "object") {
63
+ if (typeof(value) == "object") {
64
+ let str = '';
65
+ for (const [key, val] of Object.entries(value)) {
66
+ str += `${key}: ${val}\n`;
67
+ }
68
+ value = str
69
+ }
61
70
  isPass = true;
62
71
  inputValue = inputValue.replace(attr, value);
63
72
  }
@@ -71,32 +80,52 @@ const CoCreateRender = {
71
80
  },
72
81
 
73
82
  render: function(template, data) {
74
- const type = template.getAttribute('render-array') || "data";
83
+ let type = template.getAttribute('render-array') || "data";
75
84
  const render_key = template.getAttribute('render-key') || type;
76
85
  const self = this;
77
86
 
78
87
  // const arrayData = this.__getValueFromObject(data, type);
79
88
  let arrayData = data;
80
- if (!Array.isArray(data))
89
+
90
+ const isRenderObject = template.hasAttribute('render-object');
91
+ if (isRenderObject){
92
+ const renderObject = template.getAttribute('render-object');
93
+ if (renderObject)
94
+ arrayData = data[renderObject];
95
+
96
+ let array = []
97
+ for (const [key, value] of Object.entries(arrayData)) {
98
+ array.push({key: key, value: value})
99
+ }
100
+ if (array.length > 0)
101
+ arrayData = array
102
+
103
+ type = renderObject || 'data'
104
+ }
105
+
106
+ const isRenderArray = template.hasAttribute('render-array');
107
+ if (isRenderArray){
108
+ const renderArray = template.getAttribute('render-array');
109
+ if (renderArray)
110
+ arrayData = data[renderArray];
111
+ type = renderArray || 'data';
112
+ }
113
+
114
+ if (!Array.isArray(arrayData))
81
115
  arrayData = this.__getValueFromObject(data, type);
82
- if (!arrayData){
116
+
117
+ if (!arrayData) {
83
118
  let cloneEl = this.cloneEl(template);
84
119
  cloneEl.classList.add('cloned');
85
120
  self.setValue([cloneEl], data);
86
121
  template.insertAdjacentHTML('beforebegin', cloneEl.outerHTML);
87
122
  }
123
+
88
124
  if (type && Array.isArray(arrayData)) {
89
- arrayData.forEach((item, index) => {
125
+ arrayData.forEach((item) => {
90
126
  let cloneEl = this.cloneEl(template);
91
127
  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);
128
+ let r_data = self.__createObject(item, render_key);
100
129
 
101
130
  self.setValue([cloneEl], r_data);
102
131
  template.insertAdjacentHTML('beforebegin', cloneEl.outerHTML);
@@ -117,9 +146,6 @@ const CoCreateRender = {
117
146
  if (!data) return;
118
147
  const that = this;
119
148
  Array.from(els).forEach(el => {
120
- // if (el.classList.contains('template')) {
121
- // el = this.cloneEl(el);
122
- // }
123
149
  Array.from(el.attributes).forEach(attr=>{
124
150
  let attr_name = attr.name.toLowerCase();
125
151
  let attrValue = attr.value;
@@ -130,8 +156,8 @@ const CoCreateRender = {
130
156
  }
131
157
  });
132
158
 
133
- if (el.children.length == 0 && el.textContent) {
134
- let textContent = el.textContent;
159
+ if (el.innerHTML) {
160
+ let textContent = el.innerHTML;
135
161
  textContent = that.__replaceValue(data, textContent);
136
162
  if (textContent) {
137
163
  el.innerHTML = textContent;