@cocreate/render 1.42.0 → 1.43.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.
- package/CHANGELOG.md +21 -0
- package/docs/index.html +441 -462
- package/package.json +1 -1
- package/prettier.config.js +16 -0
- package/src/index.js +12 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,24 @@
|
|
|
1
|
+
# [1.43.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.42.1...v1.43.0) (2024-11-04)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* pretier.config.js and file formating ([872da61](https://github.com/CoCreate-app/CoCreate-render/commit/872da6113cb60f39c027d5432d1024544cd87230))
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* add prettier.config.js and format files ([92854be](https://github.com/CoCreate-app/CoCreate-render/commit/92854be03cc487261f3c90d0211ca823e56002e7))
|
|
12
|
+
* add prettier.config.js and format files ([131011c](https://github.com/CoCreate-app/CoCreate-render/commit/131011ca9605fef656d8c52075e1c47a94cb8ccd))
|
|
13
|
+
|
|
14
|
+
## [1.42.1](https://github.com/CoCreate-app/CoCreate-render/compare/v1.42.0...v1.42.1) (2024-11-02)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* handeling of render-as $auto ([017dd71](https://github.com/CoCreate-app/CoCreate-render/commit/017dd71b400ed202aacd425eb63d76fdb7f9a968))
|
|
20
|
+
* observer taget has been renamed to selector ([adbd2c9](https://github.com/CoCreate-app/CoCreate-render/commit/adbd2c9768f439189da40ae1fcdaa333fff2f2da))
|
|
21
|
+
|
|
1
22
|
# [1.42.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.41.5...v1.42.0) (2024-09-21)
|
|
2
23
|
|
|
3
24
|
|
package/docs/index.html
CHANGED
|
@@ -1,186 +1,195 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<title>CoCreate-render Documentation | CoCreateJS</title>
|
|
8
|
+
<link
|
|
9
|
+
rel="icon"
|
|
10
|
+
type="image/png"
|
|
11
|
+
sizes="32x32"
|
|
12
|
+
href="https://cocreate.app/images/favicon.ico"
|
|
13
|
+
/>
|
|
14
|
+
<meta
|
|
15
|
+
name="description"
|
|
16
|
+
content="A simple yet powerful drag-and-drop solution powered by javascript."
|
|
17
|
+
/>
|
|
18
|
+
<meta
|
|
19
|
+
name="keywords"
|
|
20
|
+
content="drag and drop, colaboration, dnd utility, drag and drop utility"
|
|
21
|
+
/>
|
|
22
|
+
<meta name="robots" content="index,follow" />
|
|
23
|
+
<meta
|
|
24
|
+
property="og:image"
|
|
25
|
+
content="https://cdn.cocreate.app/docs/render.png"
|
|
26
|
+
/>
|
|
23
27
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
28
|
+
<link
|
|
29
|
+
rel="stylesheet"
|
|
30
|
+
href="../index.css"
|
|
31
|
+
array="files"
|
|
32
|
+
object="60888216117c640e7596303f"
|
|
33
|
+
key="src"
|
|
34
|
+
type="text/css"
|
|
35
|
+
save="true"
|
|
36
|
+
/>
|
|
37
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
38
|
+
</head>
|
|
34
39
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
share-network="share"
|
|
102
|
-
title="Share on share"
|
|
103
|
-
><i src="/assets/svg/share-alt.svg"></i
|
|
104
|
-
></a>
|
|
105
|
-
</div>
|
|
106
|
-
<a
|
|
107
|
-
href="https://github.com/CoCreate-app/CoCreate-dnd"
|
|
108
|
-
target="_blank"
|
|
109
|
-
class=""
|
|
110
|
-
><i src="/assets/svg/github.svg"></i
|
|
111
|
-
></a>
|
|
112
|
-
</div>
|
|
40
|
+
<body>
|
|
41
|
+
<!-- Navbar -->
|
|
42
|
+
<nav
|
|
43
|
+
class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px"
|
|
44
|
+
content_id="content"
|
|
45
|
+
scroll="sticky-nav,"
|
|
46
|
+
scroll-up="5"
|
|
47
|
+
scroll-down="5"
|
|
48
|
+
path="../"
|
|
49
|
+
src="../components/navbar.html"
|
|
50
|
+
></nav>
|
|
51
|
+
<sidenav
|
|
52
|
+
id="menuL"
|
|
53
|
+
class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
|
|
54
|
+
resizable
|
|
55
|
+
resize-selector="[content_id='content']"
|
|
56
|
+
resize-property="margin-left"
|
|
57
|
+
resize-value="width"
|
|
58
|
+
>
|
|
59
|
+
<menu array="files" object="603717b07de7fb350ae9fec8" key="src"></menu>
|
|
60
|
+
<div resize="right"></div>
|
|
61
|
+
</sidenav>
|
|
62
|
+
<main
|
|
63
|
+
class="padding-top:15px padding:15px@lg@xl"
|
|
64
|
+
content_id="content"
|
|
65
|
+
id="CoCreate-render"
|
|
66
|
+
>
|
|
67
|
+
<div
|
|
68
|
+
class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px"
|
|
69
|
+
>
|
|
70
|
+
<div class="display:flex align-items:center">
|
|
71
|
+
<h2>CoCreate-render</h2>
|
|
72
|
+
</div>
|
|
73
|
+
<div
|
|
74
|
+
class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white"
|
|
75
|
+
>
|
|
76
|
+
<div
|
|
77
|
+
class="display:flex align-items:center transition:0.3s padding-left:10px"
|
|
78
|
+
share-network="true"
|
|
79
|
+
share-text="Enter decription here"
|
|
80
|
+
share-title="testing im a title"
|
|
81
|
+
share-height="600"
|
|
82
|
+
share-width="700"
|
|
83
|
+
share-media="https://cdn.cocreate.app/docs/render.png"
|
|
84
|
+
hover="display:block!important"
|
|
85
|
+
hover-selector=".social-networks"
|
|
86
|
+
>
|
|
87
|
+
<div class="display:none social-networks">
|
|
88
|
+
<a
|
|
89
|
+
class="margin-right:15px"
|
|
90
|
+
share-network="twitter"
|
|
91
|
+
title="Share on twitter"
|
|
92
|
+
><i src="/assets/svg/twitter.svg"></i
|
|
93
|
+
></a>
|
|
94
|
+
<a
|
|
95
|
+
class="margin-right:15px"
|
|
96
|
+
share-network="facebook"
|
|
97
|
+
title="Share on Facebook"
|
|
98
|
+
><i src="/assets/svg/facebook.svg"></i
|
|
99
|
+
></a>
|
|
100
|
+
<a
|
|
101
|
+
class="margin-right:15px"
|
|
102
|
+
share-network="instagram"
|
|
103
|
+
title="Share on instagram"
|
|
104
|
+
><i src="/assets/svg/instagram.svg"></i
|
|
105
|
+
></a>
|
|
113
106
|
</div>
|
|
114
|
-
<
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
107
|
+
<a
|
|
108
|
+
class="margin-right:15px"
|
|
109
|
+
share-network="share"
|
|
110
|
+
title="Share on share"
|
|
111
|
+
><i src="/assets/svg/share-alt.svg"></i
|
|
112
|
+
></a>
|
|
113
|
+
</div>
|
|
114
|
+
<a
|
|
115
|
+
href="https://github.com/CoCreate-app/CoCreate-dnd"
|
|
116
|
+
target="_blank"
|
|
117
|
+
class=""
|
|
118
|
+
><i src="/assets/svg/github.svg"></i
|
|
119
|
+
></a>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
<h1
|
|
123
|
+
class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100"
|
|
124
|
+
>
|
|
125
|
+
CoCreate-render javascript component. Easy configuration using HTML5
|
|
126
|
+
attributes or Javscript api and highly styleable.
|
|
127
|
+
</h1>
|
|
128
|
+
<div id="render-section" class="display:flex flex-wrap:wrap">
|
|
129
|
+
<div
|
|
130
|
+
class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px"
|
|
131
|
+
>
|
|
132
|
+
<div
|
|
133
|
+
id="render-install"
|
|
134
|
+
class="border-bottom:1px_solid_lightgrey"
|
|
135
|
+
scroll
|
|
136
|
+
scroll-intersect="color:dodgerblue"
|
|
137
|
+
scroll-selector="#render-install-section"
|
|
138
|
+
>
|
|
139
|
+
<span
|
|
140
|
+
class="display:flex align-items:center width:fit-content"
|
|
141
|
+
hover="display:block!important"
|
|
142
|
+
hover-selector="[href='#render-install']"
|
|
143
|
+
>
|
|
144
|
+
<h2 class="padding:5px_0px">Install</h2>
|
|
145
|
+
<a class="margin-left:10px display:none" href="#render-install"
|
|
146
|
+
><i src="/assets/svg/link.svg"></i
|
|
147
|
+
></a>
|
|
148
|
+
</span>
|
|
149
|
+
</div>
|
|
150
|
+
<pre><code class="language-bash">npm i @cocreate/render</code></pre>
|
|
151
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
152
|
+
Or you can use cdn link:
|
|
153
|
+
</p>
|
|
154
|
+
<pre><code class="language-html"><script>https://cdn.cocreate.app/render/latest/CoCreate-render.min.js</script></code></pre>
|
|
155
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
156
|
+
for styling please refer to #id-style
|
|
157
|
+
</p>
|
|
148
158
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
159
|
+
<div
|
|
160
|
+
id="render-usage"
|
|
161
|
+
class="margin-top:80px border-bottom:1px_solid_lightgrey"
|
|
162
|
+
scroll
|
|
163
|
+
scroll-intersect="color:dodgerblue"
|
|
164
|
+
scroll-selector="#render-usage-section"
|
|
165
|
+
>
|
|
166
|
+
<span
|
|
167
|
+
class="display:flex align-items:center width:fit-content"
|
|
168
|
+
hover="display:block!important"
|
|
169
|
+
hover-selector="[href='#render-usage']"
|
|
170
|
+
>
|
|
171
|
+
<h2 class="padding:5px_0px">Usage</h2>
|
|
172
|
+
<a class="margin-left:10px display:none" href="#render-usage"
|
|
173
|
+
><i src="/assets/svg/link.svg"></i
|
|
174
|
+
></a>
|
|
175
|
+
</span>
|
|
176
|
+
</div>
|
|
177
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
178
|
+
CoCreate-render would use that set attributes and renders the
|
|
179
|
+
elements based on html and json data.
|
|
180
|
+
</p>
|
|
171
181
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
182
|
+
<h3
|
|
183
|
+
class="border-bottom:1px_solid_lightgrey margin-top:40px padding:5px_0px"
|
|
184
|
+
>
|
|
185
|
+
Example
|
|
186
|
+
</h3>
|
|
187
|
+
<p class="padding:10px_0px line-height:1.5"></p>
|
|
177
188
|
|
|
178
|
-
|
|
179
|
-
HTML Template
|
|
180
|
-
</h4>
|
|
189
|
+
<h4 class="margin-top:20px padding:5px_0px">HTML Template</h4>
|
|
181
190
|
|
|
182
|
-
|
|
183
|
-
|
|
191
|
+
<div class="margin-top:10px">
|
|
192
|
+
<pre><code class="language-html">
|
|
184
193
|
<div template_id="abc1" array="render_test">
|
|
185
194
|
<div class="template card {{render2.array}} card margin:10px firstname"
|
|
186
195
|
value="{{render2.data._id}}"
|
|
@@ -214,13 +223,11 @@
|
|
|
214
223
|
</div>
|
|
215
224
|
</div>
|
|
216
225
|
</code></pre>
|
|
217
|
-
|
|
226
|
+
</div>
|
|
218
227
|
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
<p class="padding:10px_0px line-height:1.5">Description.</p>
|
|
223
|
-
<pre><code class="language-html">
|
|
228
|
+
<h4 class="margin-top:40px padding:5px_0px">CoCreate-render usage</h4>
|
|
229
|
+
<p class="padding:10px_0px line-height:1.5">Description.</p>
|
|
230
|
+
<pre><code class="language-html">
|
|
224
231
|
CoCreate.render.data({
|
|
225
232
|
selector: '[template=abc1]',
|
|
226
233
|
data: {
|
|
@@ -255,295 +262,267 @@
|
|
|
255
262
|
})
|
|
256
263
|
</code></pre>
|
|
257
264
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
><span class="cocreate-badge"
|
|
299
|
-
>Default: render's value</span
|
|
300
|
-
>
|
|
301
|
-
</h4>
|
|
302
|
-
<p>If render defined, this attribute can define</p>
|
|
303
|
-
<p>Default value is value of render</p>
|
|
304
|
-
</li>
|
|
305
|
-
</ul>
|
|
265
|
+
<div
|
|
266
|
+
id="render-attributes"
|
|
267
|
+
class="margin-top:80px border-bottom:1px_solid_lightgrey"
|
|
268
|
+
scroll
|
|
269
|
+
scroll-intersect="color:dodgerblue"
|
|
270
|
+
scroll-selector="#render-attributes-section"
|
|
271
|
+
>
|
|
272
|
+
<span
|
|
273
|
+
class="display:flex align-items:center width:fit-content"
|
|
274
|
+
hover="display:block!important"
|
|
275
|
+
hover-selector="[href='#render-attributes']"
|
|
276
|
+
>
|
|
277
|
+
<h2 class="padding:5px_0px">Attributes</h2>
|
|
278
|
+
<a class="margin-left:10px display:none" href="#render-attributes"
|
|
279
|
+
><i src="/assets/svg/link.svg"></i
|
|
280
|
+
></a>
|
|
281
|
+
</span>
|
|
282
|
+
</div>
|
|
283
|
+
<ul class="list-style-type:none">
|
|
284
|
+
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
285
|
+
<h4>
|
|
286
|
+
<span>render</span>
|
|
287
|
+
<span class="cocreate-badge warning">optional</span
|
|
288
|
+
><span class="cocreate-badge danger">required</span>
|
|
289
|
+
</h4>
|
|
290
|
+
<p>
|
|
291
|
+
To render the array data, this attribute should define by the
|
|
292
|
+
object selector path
|
|
293
|
+
</p>
|
|
294
|
+
</li>
|
|
295
|
+
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
296
|
+
<h4>
|
|
297
|
+
<span>render-as</span>
|
|
298
|
+
<span class="cocreate-badge warning">optional</span
|
|
299
|
+
><span class="cocreate-badge">Default: render's value</span>
|
|
300
|
+
</h4>
|
|
301
|
+
<p>If render defined, this attribute can define</p>
|
|
302
|
+
<p>Default value is value of render</p>
|
|
303
|
+
</li>
|
|
304
|
+
</ul>
|
|
306
305
|
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
<span class="cocreate-badge warning"
|
|
388
|
-
>Type:Node</span
|
|
389
|
-
><span class="cocreate-badge danager"
|
|
390
|
-
>required</span
|
|
391
|
-
>
|
|
392
|
-
</p>
|
|
393
|
-
<p>
|
|
394
|
-
Element to render the array. Geneeral it
|
|
395
|
-
will be template.
|
|
396
|
-
</p>
|
|
397
|
-
</div>
|
|
398
|
-
<div>
|
|
399
|
-
<p>
|
|
400
|
-
<strong>data</strong>
|
|
401
|
-
<span class="cocreate-badge warning"
|
|
402
|
-
>Type:object</span
|
|
403
|
-
><span class="cocreate-badge danager"
|
|
404
|
-
>required</span
|
|
405
|
-
>
|
|
406
|
-
</p>
|
|
407
|
-
<p>Data to render</p>
|
|
408
|
-
</div>
|
|
409
|
-
</li>
|
|
410
|
-
</ul>
|
|
306
|
+
<h4
|
|
307
|
+
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px"
|
|
308
|
+
>
|
|
309
|
+
Funcations
|
|
310
|
+
</h4>
|
|
311
|
+
<ul class="list-style-type:none">
|
|
312
|
+
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
313
|
+
<h4>
|
|
314
|
+
<span>setValue(elements, data, [stateTo])</span>
|
|
315
|
+
</h4>
|
|
316
|
+
<p>This is main function.</p>
|
|
317
|
+
<div>
|
|
318
|
+
<p>
|
|
319
|
+
<strong>elements</strong>
|
|
320
|
+
<span class="cocreate-badge warning">Type:NoteList</span
|
|
321
|
+
><span class="cocreate-badge danager">required</span>
|
|
322
|
+
</p>
|
|
323
|
+
<p>Dom elements for render</p>
|
|
324
|
+
</div>
|
|
325
|
+
<div>
|
|
326
|
+
<p>
|
|
327
|
+
<strong>data</strong>
|
|
328
|
+
<span class="cocreate-badge warning">Type:object</span
|
|
329
|
+
><span class="cocreate-badge danager">required</span>
|
|
330
|
+
</p>
|
|
331
|
+
<p>Data to render</p>
|
|
332
|
+
</div>
|
|
333
|
+
<div>
|
|
334
|
+
<p>
|
|
335
|
+
<strong>stateTo</strong
|
|
336
|
+
><span class="cocreate-badge warning">Type:string</span
|
|
337
|
+
><span class="cocreate-badge warning">optional</span>
|
|
338
|
+
</p>
|
|
339
|
+
</div>
|
|
340
|
+
</li>
|
|
341
|
+
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
342
|
+
<h4>
|
|
343
|
+
<span>render(selector, data)</span>
|
|
344
|
+
</h4>
|
|
345
|
+
<div>
|
|
346
|
+
<p>
|
|
347
|
+
<strong>selector</strong>
|
|
348
|
+
<span class="cocreate-badge warning">Type:String</span
|
|
349
|
+
><span class="cocreate-badge danager">required</span>
|
|
350
|
+
</p>
|
|
351
|
+
<p>The selector of element to render</p>
|
|
352
|
+
</div>
|
|
353
|
+
<div>
|
|
354
|
+
<p>
|
|
355
|
+
<strong>data</strong>
|
|
356
|
+
<span class="cocreate-badge warning">Type:object</span
|
|
357
|
+
><span class="cocreate-badge danager">required</span>
|
|
358
|
+
</p>
|
|
359
|
+
<p>Data to render</p>
|
|
360
|
+
</div>
|
|
361
|
+
</li>
|
|
362
|
+
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
363
|
+
<h4>
|
|
364
|
+
<span>setArray(element, data)</span>
|
|
365
|
+
</h4>
|
|
366
|
+
<div>
|
|
367
|
+
<p>
|
|
368
|
+
<strong>element</strong>
|
|
369
|
+
<span class="cocreate-badge warning">Type:Node</span
|
|
370
|
+
><span class="cocreate-badge danager">required</span>
|
|
371
|
+
</p>
|
|
372
|
+
<p>
|
|
373
|
+
Element to render the array. Geneeral it will be template.
|
|
374
|
+
</p>
|
|
375
|
+
</div>
|
|
376
|
+
<div>
|
|
377
|
+
<p>
|
|
378
|
+
<strong>data</strong>
|
|
379
|
+
<span class="cocreate-badge warning">Type:object</span
|
|
380
|
+
><span class="cocreate-badge danager">required</span>
|
|
381
|
+
</p>
|
|
382
|
+
<p>Data to render</p>
|
|
383
|
+
</div>
|
|
384
|
+
</li>
|
|
385
|
+
</ul>
|
|
411
386
|
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
387
|
+
<h2
|
|
388
|
+
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px"
|
|
389
|
+
>
|
|
390
|
+
How Does It Works
|
|
391
|
+
</h2>
|
|
392
|
+
<p>
|
|
393
|
+
CoCreate-render works based on attributes and template, The
|
|
394
|
+
attributes to render should be wrapper "{{ }}", and attributes can
|
|
395
|
+
include the combine "{{}}" wrapper.
|
|
396
|
+
</p>
|
|
421
397
|
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
398
|
+
<p>
|
|
399
|
+
To render the array data, Render need to define
|
|
400
|
+
<code class="language-js">class="template"</code>.
|
|
401
|
+
<code class="language-js">render</code>
|
|
402
|
+
</p>
|
|
427
403
|
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
404
|
+
<h2
|
|
405
|
+
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px"
|
|
406
|
+
>
|
|
407
|
+
Effects and Styles
|
|
408
|
+
</h2>
|
|
432
409
|
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
410
|
+
<h2
|
|
411
|
+
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px"
|
|
412
|
+
>
|
|
413
|
+
Events
|
|
414
|
+
</h2>
|
|
415
|
+
</div>
|
|
416
|
+
<div
|
|
417
|
+
class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey"
|
|
418
|
+
>
|
|
419
|
+
<!-- SandBox -->
|
|
420
|
+
<div
|
|
421
|
+
id="render-demo"
|
|
422
|
+
class="border-bottom:1px_solid_lightgrey"
|
|
423
|
+
scroll
|
|
424
|
+
scroll-intersect="color:dodgerblue"
|
|
425
|
+
scroll-selector="#render-demo-section"
|
|
426
|
+
>
|
|
427
|
+
<span
|
|
428
|
+
class="display:flex align-items:center width:fit-content"
|
|
429
|
+
hover="display:block!important"
|
|
430
|
+
hover-selector="[href='#render-demo']"
|
|
431
|
+
>
|
|
432
|
+
<h2 class="padding:5px_0px">Demo</h2>
|
|
433
|
+
<a class="margin-left:10px display:none" href="#render-demo"
|
|
434
|
+
><i src="/assets/svg/link.svg"></i
|
|
435
|
+
></a>
|
|
436
|
+
</span>
|
|
437
|
+
</div>
|
|
438
|
+
<div class="position:sticky top:0 padding:15px_0px height:100vh">
|
|
439
|
+
<!-- SandBox -->
|
|
440
|
+
<div
|
|
441
|
+
class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
|
|
442
|
+
id="playground"
|
|
443
|
+
>
|
|
444
|
+
<div
|
|
445
|
+
id="demo-code"
|
|
446
|
+
resizable
|
|
447
|
+
class="position:relative height:50%"
|
|
448
|
+
>
|
|
449
|
+
<textarea
|
|
450
|
+
type="code"
|
|
451
|
+
lang="html"
|
|
452
|
+
array="demos"
|
|
453
|
+
object=""
|
|
454
|
+
key="demo"
|
|
455
|
+
save="false"
|
|
456
|
+
id="demo"
|
|
457
|
+
class="height:100% width:100% outline:none border:none resize:none padding:5px"
|
|
458
|
+
></textarea>
|
|
459
|
+
<div resize="bottom" class="background:lightgrey"></div>
|
|
460
|
+
</div>
|
|
482
461
|
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
462
|
+
<div
|
|
463
|
+
id="demo-preview"
|
|
464
|
+
class="position:relative overflow:auto background-color:white"
|
|
465
|
+
>
|
|
466
|
+
<div class="demopreview padding:20px"></div>
|
|
467
|
+
</div>
|
|
488
468
|
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
fullscreen-selector="#playground"></a>
|
|
533
|
-
</div>
|
|
534
|
-
</div>
|
|
535
|
-
<!-- End SandBox -->
|
|
536
|
-
</div>
|
|
537
|
-
</div>
|
|
469
|
+
<div
|
|
470
|
+
class="font-size:20px position:absolute top:10px right:10px opacity:0.6"
|
|
471
|
+
>
|
|
472
|
+
<a
|
|
473
|
+
class="margin-right:10px"
|
|
474
|
+
id="eye"
|
|
475
|
+
show="#eye-slash"
|
|
476
|
+
hide="#eye, #demo-preview"
|
|
477
|
+
toggle="code-height"
|
|
478
|
+
toggle-selector="#demo-code"
|
|
479
|
+
><i class="height:18px" src="/assets/svg/eye.svg"></i
|
|
480
|
+
></a>
|
|
481
|
+
<a
|
|
482
|
+
class="margin-right:10px"
|
|
483
|
+
hidden
|
|
484
|
+
id="eye-slash"
|
|
485
|
+
show="#eye, #demo-preview"
|
|
486
|
+
hide="#eye-slash"
|
|
487
|
+
toggle="code-height"
|
|
488
|
+
toggle-selector="#demo-code"
|
|
489
|
+
><i src="/assets/svg/eye-slash.svg"></i
|
|
490
|
+
></a>
|
|
491
|
+
<a
|
|
492
|
+
class="margin-right:10px"
|
|
493
|
+
id="code"
|
|
494
|
+
show="#code-slash"
|
|
495
|
+
hide="#code, #demo-code"
|
|
496
|
+
><i src="/assets/svg/code.svg"></i
|
|
497
|
+
></a>
|
|
498
|
+
<a
|
|
499
|
+
class="margin-right:10px"
|
|
500
|
+
hidden
|
|
501
|
+
id="code-slash"
|
|
502
|
+
show="#code, #demo-code"
|
|
503
|
+
hide="#code-slash"
|
|
504
|
+
><i class="height:18px" src="/assets/svg/code.svg"></i
|
|
505
|
+
></a>
|
|
506
|
+
<a
|
|
507
|
+
class="margin-right:5px"
|
|
508
|
+
fullscreen
|
|
509
|
+
fullscreen-selector="#playground"
|
|
510
|
+
></a>
|
|
511
|
+
</div>
|
|
538
512
|
</div>
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
513
|
+
<!-- End SandBox -->
|
|
514
|
+
</div>
|
|
515
|
+
</div>
|
|
516
|
+
</div>
|
|
517
|
+
<button
|
|
518
|
+
href="https://github.com/CoCreate-app/CoCreate-render/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
|
|
519
|
+
target="_blank"
|
|
520
|
+
class="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)"
|
|
521
|
+
>
|
|
522
|
+
<i src="../assets/svg/pencil-alt.svg"></i>
|
|
523
|
+
</button>
|
|
524
|
+
</main>
|
|
546
525
|
|
|
547
|
-
|
|
548
|
-
|
|
526
|
+
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
|
|
527
|
+
</body>
|
|
549
528
|
</html>
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -349,6 +349,11 @@ async function renderTemplate(template, data, key, index, keyPath) {
|
|
|
349
349
|
|
|
350
350
|
for (let i = 0; i < renderData.length; i++) {
|
|
351
351
|
let clone = cloneTemplate(template);
|
|
352
|
+
|
|
353
|
+
let test = clone.element.getAttribute('render-as')
|
|
354
|
+
if (test)
|
|
355
|
+
renderAs = test
|
|
356
|
+
|
|
352
357
|
clone.keyPath = template.keyPath || '' + `[${i}]`
|
|
353
358
|
|
|
354
359
|
let object
|
|
@@ -386,7 +391,8 @@ function cloneTemplate(template) {
|
|
|
386
391
|
clone.setAttribute('render-clone', '');
|
|
387
392
|
|
|
388
393
|
let renderAs = clone.getAttribute('render-as')
|
|
389
|
-
if (renderAs) {
|
|
394
|
+
if (renderAs === '$auto') {
|
|
395
|
+
renderAs = uuid.generate(6)
|
|
390
396
|
clone = clone.outerHTML.replace(/\$auto/g, renderAs);
|
|
391
397
|
}
|
|
392
398
|
|
|
@@ -432,7 +438,7 @@ function insertElement(template, element, index, currentIndex, data, renderRever
|
|
|
432
438
|
item = clones.splice(currentIndex, 1)[0];
|
|
433
439
|
}
|
|
434
440
|
|
|
435
|
-
if (data.$filter && data.$filter.startingIndex)
|
|
441
|
+
if (data && data.$filter && data.$filter.startingIndex)
|
|
436
442
|
index += data.$filter.startingIndex
|
|
437
443
|
clones.splice(index, 0, item); // Insert item into clones at the specified index
|
|
438
444
|
|
|
@@ -880,7 +886,7 @@ Actions.init({
|
|
|
880
886
|
Observer.init({
|
|
881
887
|
name: 'render',
|
|
882
888
|
observe: ['addedNodes'],
|
|
883
|
-
|
|
889
|
+
selector: elementSelector,
|
|
884
890
|
callback: function (mutation) {
|
|
885
891
|
init(mutation.target)
|
|
886
892
|
}
|
|
@@ -901,7 +907,7 @@ Observer.init({
|
|
|
901
907
|
Observer.init({
|
|
902
908
|
name: 'render',
|
|
903
909
|
observe: ['addedNodes'],
|
|
904
|
-
|
|
910
|
+
selector: '[render]',
|
|
905
911
|
callback: function (mutation) {
|
|
906
912
|
if (mutation.target.hasAttribute('render-clone'))
|
|
907
913
|
return
|
|
@@ -923,7 +929,7 @@ Observer.init({
|
|
|
923
929
|
// Observer.init({
|
|
924
930
|
// name: 'render',
|
|
925
931
|
// observe: ['addedNodes'],
|
|
926
|
-
//
|
|
932
|
+
// selector: '[render-clone]',
|
|
927
933
|
// callback: function (mutation) {
|
|
928
934
|
// let renderedNode = renderedNodes.get(mutation.target)
|
|
929
935
|
// if (!renderedNode) return
|
|
@@ -956,7 +962,7 @@ Observer.init({
|
|
|
956
962
|
Observer.init({
|
|
957
963
|
name: 'renderNodesRemoved',
|
|
958
964
|
observe: ['removedNodes'],
|
|
959
|
-
|
|
965
|
+
selector: '[render-clone]',
|
|
960
966
|
callback: function (mutation) {
|
|
961
967
|
if (mutation.target.parentElement) return
|
|
962
968
|
let renderedNode = renderedNodes.get(mutation.target)
|