@cocreate/render 1.24.13 → 1.24.15

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/docs/index.html CHANGED
@@ -1,270 +1,582 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="utf-8">
6
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
- <meta name="viewport" content="width=device-width, initial-scale=1">
8
- <title>CoCreate-render Documentation | CoCreateJS </title>
9
- <link rel="icon" type="image/png" sizes="32x32" href="https://cocreate.app/images/favicon.ico">
10
- <meta name="description" content="A simple yet powerful drag-and-drop solution powered by javascript." />
11
- <meta name="keywords" content="drag and drop, colaboration, dnd utility, drag and drop utility" />
12
- <meta name="robots" content="index,follow" />
13
- <meta property="og:image" content="https://cdn.cocreate.app/docs/render.png">
14
-
15
- <!-- CoCreate CSS -->
16
- <link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css" />
17
- <link rel="stylesheet" href="/docs/index.css" collection="files" document_id="60888216117c640e7596303f" name="src" type="text/css" save="true" />
18
- <link rel="manifest" href="/manifest.webmanifest">
19
- </head>
20
-
21
- <body>
22
-
23
- <nav class="nav display:flex align-items:center left:0px background:whitesmoke padding-top:10px padding-bottom:10px" content_id="content" scroll="sticky-nav,hide-nav" scroll-up="10" scroll-down="10" collection="files" document_id="60395ef42b3ac232657040fd" name="src">
24
- </nav>
25
- <sidenav id="menuL" class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl" resizable resize-target="[content_id='content']" resize-property="margin-left" resize-value="width">
26
- <menu collection="files" document_id="603717b07de7fb350ae9fec8" name="src"></menu>
27
- <div resize="right"></div>
28
- </sidenav>
29
- <main class="padding-top:15px padding:15px@lg@xl" content_id="content" id="CoCreate-render">
30
- <div class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
31
- <div class="display:flex align-items:center">
32
- <h2>CoCreate-render</h2>
33
- </div>
34
- <div class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
35
- <div class="display:flex align-items:center transition:0.3s padding-left:10px" share-network="true" share-text="Enter decription here" share-title="testing im a title" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/render.png"
36
- hover="display:block!important" hover-target=".social-networks">
37
- <div class="display:none social-networks">
38
- <a class="margin-right:15px" share-network='twitter' title="Share on twitter"><i class="height:20px fill:#505050" src="/assets/svg/twitter.svg"></i></a>
39
- <a class="margin-right:15px" share-network='facebook' title="Share on Facebook"><i class="height:20px fill:#505050" src="/assets/svg/facebook.svg"></i></a>
40
- <a class="margin-right:15px" share-network='instagram' title="Share on instagram"><i class="height:20px fill:#505050" src="/assets/svg/instagram.svg"></i></a>
41
- </div>
42
- <a class="margin-right:15px" share-network='share' title="Share on share"><i class="height:20px fill:#505050" src="/assets/svg/share-alt.svg"></i></a>
43
- </div>
44
- <a href="https://github.com/CoCreate-app/CoCreate-dnd" target="_blank" class=""><i class="height:20px fill:#505050" src="/assets/svg/github.svg"></i></a>
45
- </div>
46
- </div>
47
- <h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">CoCreate-render javascript component. Easy configuration using HTML5 attributes or Javscript api and highly styleable.</p>
48
- <div id="render-section" class="display:flex flex-wrap:wrap">
49
- <div class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
50
- <div id="render-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#render-install-section">
51
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#render-install"]'>
52
- <h2 class="padding:5px_0px">Install</h2>
53
- <a class="margin-left:10px display:none" href="#render-install"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
54
- </span>
55
- </div>
56
- <pre><code class="language-bash">npm i @cocreate/render</code></pre>
57
- <p class="padding:10px_0px line-height:1.5">Or you can use cdn link:</p>
58
- <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/render/latest/CoCreate-render.min.js&lt;/script&gt;</code></pre>
59
- <p class="padding:10px_0px line-height:1.5">for styling please refer to #id-style</p>
60
-
61
- <div id="render-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#render-usage-section">
62
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#render-usage"]'>
63
- <h2 class="padding:5px_0px">Usage</h2>
64
- <a class="margin-left:10px display:none" href="#render-usage"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
65
- </span>
66
- </div>
67
- <p class="padding:10px_0px line-height:1.5">
68
- CoCreate-render would use that set attributes and renders the elements based on html and json data.
69
- </p>
70
-
71
- <h3 class="border-bottom:1px_solid_lightgrey margin-top:40px padding:5px_0px">Example</h3>
72
- <p class="padding:10px_0px line-height:1.5">
73
- </p>
74
-
75
- <h4 class="margin-top:20px padding:5px_0px">HTML Template</h4>
76
-
77
- <div class="margin-top:10px">
78
- <pre><code class="language-html">
79
- &lt;div template_id=&quot;abc1&quot; fetch-collection=&quot;render_test&quot;&gt;
80
- &lt;div class=&quot;template card {{render2.collection}} card margin:10px firstname&quot;
81
- value=&quot;{{render2.data._id}}&quot;
82
- template_id=&quot;abc1&quot;
83
- render-array=&quot;render2.data&quot;&gt;
84
- &lt;div class=&quot;card-body padding:15px&quot; collection=&quot;{{render2.collection}}&quot;&gt;
85
- &lt;h3 class=&quot;{{render2.data.firstname}} blue&quot; value=&quot;{{render2.data.lastname}} - {{render2.data.firstname}}&quot;&gt;--&lt;/h3&gt;
86
- &lt;h3 value=&quot;{{ render2.data.lastname }}&quot; value=&quot;{{lastname}}&quot;&gt;&lt;/h3&gt;
87
- &lt;input value=&quot;{{ render2.collection }}&quot;/&gt;
88
- &lt;h3 class=&quot;email&quot; value=&quot;{{render2.data.email}}&quot;&gt;--&lt;/h3&gt;
89
- &lt;textarea value=&quot;{{render2.data.lastname}}&quot;&gt;&lt;/textarea&gt;
90
- &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;
91
-
92
- &lt;div class=&quot;template card &quot;
93
- render-array=&quot;render2.data.testing_array&quot;&gt;
94
-
95
- &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;
96
- &lt;h3 value=&quot;{{render2.collection}}&quot;&gt;&lt;/h3&gt;
97
-
98
- &lt;h3 value=&quot;{{render2.data.personal_info.email}}&quot;&gt;&lt;/h3&gt;
99
- &lt;/div&gt;
100
- &lt;div class=&quot;template card &quot;
101
- render-array=&quot;render2.data.string_array&quot; render-key=&quot;string_&quot;&gt;
102
-
103
- &lt;h3 name=&quot;test&quot;
104
- data-attribute=&quot;{{string_.--}}&quot;
105
- class=&quot;{{string_.--}}&quot;
106
- value=&quot;{{string_.--}}&quot;&gt;&lt;/h3&gt;
107
- &lt;/div&gt;
108
- &lt;/div&gt;
109
- &lt;/div&gt;
110
- &lt;/div&gt;
111
- </code></pre>
112
- </div>
113
-
114
- <h4 class="margin-top:40px padding:5px_0px">CoCreate-render usage</h4>
115
- <p class="padding:10px_0px line-height:1.5">Description.</p>
116
- <pre><code class="language-html">
117
- CoCreate.render.data({
118
- selector: '[template=abc1]',
119
- data: {
120
- render2: {
121
- collection : 'dededede',
122
- data: [{
123
- _id : '123kijfhgfkel45',
124
- firstname : 'Jin',
125
- lastname : 'codingmachinine',
126
- personal_info : {email:'jeanmendozar@gmail.com','phone':'56666'},
127
- email: 'tesing@gamil.com',
128
- testing_array : [
129
- {email:'jeanmendozar@gmail.com','phone':'0','home':'home1'},
130
- {email:'frank@gmail.com','phone':'1','home':'home2'},
131
- {email:'jose@gmail.com','phone':'2','home':'home3'},
132
- ],
133
- string_array: ['string1', 'string2', 1, 3]
134
- },{
135
- _id : '5678efe32qd2ol',
136
- firstname : 'jean',
137
- lastname : 'Mendoza',
138
- personal_info : {email:'jeanmendozar@gmail.com','phone':'56666'},
139
- email: 'tesing2@gamil.com',
140
- testing_array : [
141
- {email:'1ana@gmail.com','phone':'16','home':'home17'},
142
- {email:'1rosa@gmail.com','phone':'17','home':'home18'},
143
- {email:'1nuevo@gmail.com','phone':'18','home':'home19'}
144
- ],
145
- string_array: ['string1', 'string2', 1, 3]
146
- },
147
- ]}
148
- })
149
- </code></pre>
150
-
151
- <div id="render-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#render-attributes-section">
152
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#render-attributes"]'>
153
- <h2 class="padding:5px_0px">Attributes</h2>
154
- <a class="margin-left:10px display:none" href="#render-attributes"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
155
- </span>
156
- </div>
157
- <ul class="list-style-type:none ">
158
- <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
159
- <h4><span>render-array</span> <span class="cocreate-badge warning">optional</span><span class="cocreate-badge danger">required</span></h4>
160
- <p>To render the array data, this attribute should define by the object selector path</p>
161
- </li>
162
- <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
163
- <h4><span>render-key</span> <span class="cocreate-badge warning">optional</span><span class="cocreate-badge">Default: render-array's value</span></h4>
164
- <p>If render-array defined, this attribute can define</p>
165
- <p>Default value is value of render-array</p>
166
- </li>
167
- </ul>
168
-
169
- <h4 class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">Funcations</h4>
170
- <ul class="list-style-type:none ">
171
- <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
172
- <h4><span>setValue(elements, data, [passTo])</span></h4>
173
- <p>This is main function. </p>
174
- <div>
175
- <p><strong>elements</strong> <span class="cocreate-badge warning">Type:NoteList</span><span class="cocreate-badge danager">required</span></p>
176
- <p> Dom elements for render</p>
177
- </div>
178
- <div>
179
- <p><strong>data</strong> <span class="cocreate-badge warning">Type:object</span><span class="cocreate-badge danager">required</span></p>
180
- <p>Data to render</p>
181
- </div>
182
- <div>
183
- <p><strong>passTo</strong><span class="cocreate-badge warning">Type:string</span><span class="cocreate-badge warning">optional</span></p>
184
- </div>
185
- </li>
186
- <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
187
- <h4>
188
- <span>render(selector, data)</span>
189
- </h4>
190
- <div>
191
- <p><strong>selector</strong> <span class="cocreate-badge warning">Type:String</span><span class="cocreate-badge danager">required</span></p>
192
- <p>The selector of element to render</p>
193
- </div>
194
- <div>
195
- <p><strong>data</strong> <span class="cocreate-badge warning">Type:object</span><span class="cocreate-badge danager">required</span></p>
196
- <p>Data to render</p>
197
- </div>
198
- </li>
199
- <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
200
- <h4>
201
- <span>setArray(element, data)</span>
202
- </h4>
203
- <div>
204
- <p><strong>element</strong> <span class="cocreate-badge warning">Type:Node</span><span class="cocreate-badge danager">required</span></p>
205
- <p>Element to render the array. Geneeral it will be template.</p>
206
- </div>
207
- <div>
208
- <p><strong>data</strong> <span class="cocreate-badge warning">Type:object</span><span class="cocreate-badge danager">required</span></p>
209
- <p>Data to render</p>
210
- </div>
211
- </li>
212
-
213
- </ul>
214
-
215
-
216
- <h2 class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">How Does It Works</h2>
217
- <p>CoCreate-render works based on attributes and template, The attributes to render should be wrapper "{{ }}", and attributes can include the combine "{{}}" wrapper.</p>
218
-
219
- <p>To render the array data, Render need to define <code class="language-js">class="template"</code>. <code class="language-js">render-array</code></p>
220
-
221
- <h2 class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">Effects and Styles</h2>
222
-
223
- <h2 class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">Events</h2>
224
-
225
- </div>
226
- <div class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
227
- <!-- SandBox -->
228
- <div id="render-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#render-demo-section">
229
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#render-demo"]'>
230
- <h2 class="padding:5px_0px">Demo</h2>
231
- <a class="margin-left:10px display:none" href="#render-demo"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
232
- </span>
233
- </div>
234
- <div class="position:sticky top:0 padding:15px_0px height:100vh">
235
- <!-- SandBox -->
236
- <div class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px" id="playground">
237
-
238
- <div id="demo-code" resizable class="position:relative height:50%">
239
- <textarea type="code" lang="html" collection="demos" document_id="" name="demo" save="false" id="demo" class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
240
- <div resize="bottom" class="background:lightgrey"></div>
241
- </div>
242
-
243
- <div id="demo-preview" class="position:relative overflow:auto background-color:white">
244
- <div class="demopreview" class="padding:20px"></div>
245
- </div>
246
-
247
- <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
248
- <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-target="#demo-code"><i class="height:18px fill:#505050" src="/assets/svg/eye.svg"></i></a>
249
- <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-target="#demo-code"><i class="height:20px fill:#505050" src="/assets/svg/eye-slash.svg"></i></a>
250
- <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i class="height:20px fill:#505050" src="/assets/svg/code.svg"></i></a>
251
- <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="display:flex height:18px fill:#505050" src="/assets/svg/code.svg"></i></a>
252
- <a class="margin-right:5px" fullscreen fullscreen-target="#playground"></a>
253
- </div>
254
-
255
- </div>
256
- <!-- End SandBox -->
257
- </div>
258
- </div>
259
- </div>
260
- <button href="https://github.com/CoCreate-app/CoCreate-render/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..." target="_blank" class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
261
- <i class="height:20px fill:#505050" src="/assets/svg/pencil-alt.svg"></i>
262
- </button>
263
- </main>
264
-
265
- <script src="./apikey.js"></script>
266
- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
267
-
268
- </body>
269
-
270
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
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
+ <meta
14
+ name="description"
15
+ content="A simple yet powerful drag-and-drop solution powered by javascript." />
16
+ <meta
17
+ name="keywords"
18
+ content="drag and drop, colaboration, dnd utility, drag and drop utility" />
19
+ <meta name="robots" content="index,follow" />
20
+ <meta
21
+ property="og:image"
22
+ content="https://cdn.cocreate.app/docs/render.png" />
23
+
24
+ <!-- CoCreate CSS -->
25
+ <link
26
+ rel="stylesheet"
27
+ href="https://cdn.cocreate.app/latest/CoCreate.min.css"
28
+ type="text/css" />
29
+ <link
30
+ rel="stylesheet"
31
+ href="/docs/index.css"
32
+ collection="files"
33
+ document_id="60888216117c640e7596303f"
34
+ name="src"
35
+ type="text/css"
36
+ save="true" />
37
+ <link rel="manifest" href="/manifest.webmanifest" />
38
+ </head>
39
+
40
+ <body>
41
+ <nav
42
+ class="nav display:flex align-items:center left:0px background:whitesmoke padding-top:10px padding-bottom:10px"
43
+ content_id="content"
44
+ scroll="sticky-nav,hide-nav"
45
+ scroll-up="10"
46
+ scroll-down="10"
47
+ collection="files"
48
+ document_id="60395ef42b3ac232657040fd"
49
+ name="src"></nav>
50
+ <sidenav
51
+ id="menuL"
52
+ class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
53
+ resizable
54
+ resize-target="[content_id='content']"
55
+ resize-property="margin-left"
56
+ resize-value="width">
57
+ <menu
58
+ collection="files"
59
+ document_id="603717b07de7fb350ae9fec8"
60
+ name="src"></menu>
61
+ <div resize="right"></div>
62
+ </sidenav>
63
+ <main
64
+ class="padding-top:15px padding:15px@lg@xl"
65
+ content_id="content"
66
+ id="CoCreate-render">
67
+ <div
68
+ class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
69
+ <div class="display:flex align-items:center">
70
+ <h2>CoCreate-render</h2>
71
+ </div>
72
+ <div
73
+ class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
74
+ <div
75
+ class="display:flex align-items:center transition:0.3s padding-left:10px"
76
+ share-network="true"
77
+ share-text="Enter decription here"
78
+ share-title="testing im a title"
79
+ share-height="600"
80
+ share-width="700"
81
+ share-media="https://cdn.cocreate.app/docs/render.png"
82
+ hover="display:block!important"
83
+ hover-target=".social-networks">
84
+ <div class="display:none social-networks">
85
+ <a
86
+ class="margin-right:15px"
87
+ share-network="twitter"
88
+ title="Share on twitter"
89
+ ><i
90
+ class="height:20px fill:#505050"
91
+ src="/assets/svg/twitter.svg"></i
92
+ ></a>
93
+ <a
94
+ class="margin-right:15px"
95
+ share-network="facebook"
96
+ title="Share on Facebook"
97
+ ><i
98
+ class="height:20px fill:#505050"
99
+ src="/assets/svg/facebook.svg"></i
100
+ ></a>
101
+ <a
102
+ class="margin-right:15px"
103
+ share-network="instagram"
104
+ title="Share on instagram"
105
+ ><i
106
+ class="height:20px fill:#505050"
107
+ src="/assets/svg/instagram.svg"></i
108
+ ></a>
109
+ </div>
110
+ <a
111
+ class="margin-right:15px"
112
+ share-network="share"
113
+ title="Share on share"
114
+ ><i
115
+ class="height:20px fill:#505050"
116
+ src="/assets/svg/share-alt.svg"></i
117
+ ></a>
118
+ </div>
119
+ <a
120
+ href="https://github.com/CoCreate-app/CoCreate-dnd"
121
+ target="_blank"
122
+ class=""
123
+ ><i
124
+ class="height:20px fill:#505050"
125
+ src="/assets/svg/github.svg"></i
126
+ ></a>
127
+ </div>
128
+ </div>
129
+ <h1
130
+ class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">
131
+ CoCreate-render javascript component. Easy configuration using
132
+ HTML5 attributes or Javscript api and highly styleable.
133
+ </h1>
134
+ <div id="render-section" class="display:flex flex-wrap:wrap">
135
+ <div
136
+ class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
137
+ <div
138
+ id="render-install"
139
+ class="border-bottom:1px_solid_lightgrey"
140
+ scroll
141
+ scroll-intersect="color:dodgerblue"
142
+ scroll-target="#render-install-section">
143
+ <span
144
+ class="display:flex align-items:center width:fit-content"
145
+ hover="display:block!important"
146
+ hover-target="[href='#render-install']">
147
+ <h2 class="padding:5px_0px">Install</h2>
148
+ <a
149
+ class="margin-left:10px display:none"
150
+ href="#render-install"
151
+ ><i
152
+ class="height:20px fill:#505050"
153
+ src="/assets/svg/link.svg"></i
154
+ ></a>
155
+ </span>
156
+ </div>
157
+ <pre><code class="language-bash">npm i @cocreate/render</code></pre>
158
+ <p class="padding:10px_0px line-height:1.5">
159
+ Or you can use cdn link:
160
+ </p>
161
+ <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/render/latest/CoCreate-render.min.js&lt;/script&gt;</code></pre>
162
+ <p class="padding:10px_0px line-height:1.5">
163
+ for styling please refer to #id-style
164
+ </p>
165
+
166
+ <div
167
+ id="render-usage"
168
+ class="margin-top:80px border-bottom:1px_solid_lightgrey"
169
+ scroll
170
+ scroll-intersect="color:dodgerblue"
171
+ scroll-target="#render-usage-section">
172
+ <span
173
+ class="display:flex align-items:center width:fit-content"
174
+ hover="display:block!important"
175
+ hover-target="[href='#render-usage']">
176
+ <h2 class="padding:5px_0px">Usage</h2>
177
+ <a
178
+ class="margin-left:10px display:none"
179
+ href="#render-usage"
180
+ ><i
181
+ class="height:20px fill:#505050"
182
+ src="/assets/svg/link.svg"></i
183
+ ></a>
184
+ </span>
185
+ </div>
186
+ <p class="padding:10px_0px line-height:1.5">
187
+ CoCreate-render would use that set attributes and
188
+ renders the elements based on html and json data.
189
+ </p>
190
+
191
+ <h3
192
+ class="border-bottom:1px_solid_lightgrey margin-top:40px padding:5px_0px">
193
+ Example
194
+ </h3>
195
+ <p class="padding:10px_0px line-height:1.5"></p>
196
+
197
+ <h4 class="margin-top:20px padding:5px_0px">
198
+ HTML Template
199
+ </h4>
200
+
201
+ <div class="margin-top:10px">
202
+ <pre><code class="language-html">
203
+ &lt;div template_id=&quot;abc1&quot; fetch-collection=&quot;render_test&quot;&gt;
204
+ &lt;div class=&quot;template card {{render2.collection}} card margin:10px firstname&quot;
205
+ value=&quot;{{render2.data._id}}&quot;
206
+ template_id=&quot;abc1&quot;
207
+ render-array=&quot;render2.data&quot;&gt;
208
+ &lt;div class=&quot;card-body padding:15px&quot; collection=&quot;{{render2.collection}}&quot;&gt;
209
+ &lt;h3 class=&quot;{{render2.data.firstname}} blue&quot; value=&quot;{{render2.data.lastname}} - {{render2.data.firstname}}&quot;&gt;--&lt;/h3&gt;
210
+ &lt;h3 value=&quot;{{ render2.data.lastname }}&quot; value=&quot;{{lastname}}&quot;&gt;&lt;/h3&gt;
211
+ &lt;input value=&quot;{{ render2.collection }}&quot;/&gt;
212
+ &lt;h3 class=&quot;email&quot; value=&quot;{{render2.data.email}}&quot;&gt;--&lt;/h3&gt;
213
+ &lt;textarea value=&quot;{{render2.data.lastname}}&quot;&gt;&lt;/textarea&gt;
214
+ &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;
215
+
216
+ &lt;div class=&quot;template card &quot;
217
+ render-array=&quot;render2.data.testing_array&quot;&gt;
218
+
219
+ &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;
220
+ &lt;h3 value=&quot;{{render2.collection}}&quot;&gt;&lt;/h3&gt;
221
+
222
+ &lt;h3 value=&quot;{{render2.data.personal_info.email}}&quot;&gt;&lt;/h3&gt;
223
+ &lt;/div&gt;
224
+ &lt;div class=&quot;template card &quot;
225
+ render-array=&quot;render2.data.string_array&quot; render-key=&quot;string_&quot;&gt;
226
+
227
+ &lt;h3 name=&quot;test&quot;
228
+ data-attribute=&quot;{{string_.--}}&quot;
229
+ class=&quot;{{string_.--}}&quot;
230
+ value=&quot;{{string_.--}}&quot;&gt;&lt;/h3&gt;
231
+ &lt;/div&gt;
232
+ &lt;/div&gt;
233
+ &lt;/div&gt;
234
+ &lt;/div&gt;
235
+ </code></pre>
236
+ </div>
237
+
238
+ <h4 class="margin-top:40px padding:5px_0px">
239
+ CoCreate-render usage
240
+ </h4>
241
+ <p class="padding:10px_0px line-height:1.5">Description.</p>
242
+ <pre><code class="language-html">
243
+ CoCreate.render.data({
244
+ selector: '[template=abc1]',
245
+ data: {
246
+ render2: {
247
+ collection : 'dededede',
248
+ data: [{
249
+ _id : '123kijfhgfkel45',
250
+ firstname : 'Jin',
251
+ lastname : 'codingmachinine',
252
+ personal_info : {email:'jeanmendozar@gmail.com','phone':'56666'},
253
+ email: 'tesing@gamil.com',
254
+ testing_array : [
255
+ {email:'jeanmendozar@gmail.com','phone':'0','home':'home1'},
256
+ {email:'frank@gmail.com','phone':'1','home':'home2'},
257
+ {email:'jose@gmail.com','phone':'2','home':'home3'},
258
+ ],
259
+ string_array: ['string1', 'string2', 1, 3]
260
+ },{
261
+ _id : '5678efe32qd2ol',
262
+ firstname : 'jean',
263
+ lastname : 'Mendoza',
264
+ personal_info : {email:'jeanmendozar@gmail.com','phone':'56666'},
265
+ email: 'tesing2@gamil.com',
266
+ testing_array : [
267
+ {email:'1ana@gmail.com','phone':'16','home':'home17'},
268
+ {email:'1rosa@gmail.com','phone':'17','home':'home18'},
269
+ {email:'1nuevo@gmail.com','phone':'18','home':'home19'}
270
+ ],
271
+ string_array: ['string1', 'string2', 1, 3]
272
+ },
273
+ ]}
274
+ })
275
+ </code></pre>
276
+
277
+ <div
278
+ id="render-attributes"
279
+ class="margin-top:80px border-bottom:1px_solid_lightgrey"
280
+ scroll
281
+ scroll-intersect="color:dodgerblue"
282
+ scroll-target="#render-attributes-section">
283
+ <span
284
+ class="display:flex align-items:center width:fit-content"
285
+ hover="display:block!important"
286
+ hover-target="[href='#render-attributes']">
287
+ <h2 class="padding:5px_0px">Attributes</h2>
288
+ <a
289
+ class="margin-left:10px display:none"
290
+ href="#render-attributes"
291
+ ><i
292
+ class="height:20px fill:#505050"
293
+ src="/assets/svg/link.svg"></i
294
+ ></a>
295
+ </span>
296
+ </div>
297
+ <ul class="list-style-type:none">
298
+ <li
299
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
300
+ <h4>
301
+ <span>render-array</span>
302
+ <span class="cocreate-badge warning"
303
+ >optional</span
304
+ ><span class="cocreate-badge danger"
305
+ >required</span
306
+ >
307
+ </h4>
308
+ <p>
309
+ To render the array data, this attribute should
310
+ define by the object selector path
311
+ </p>
312
+ </li>
313
+ <li
314
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
315
+ <h4>
316
+ <span>render-key</span>
317
+ <span class="cocreate-badge warning"
318
+ >optional</span
319
+ ><span class="cocreate-badge"
320
+ >Default: render-array's value</span
321
+ >
322
+ </h4>
323
+ <p>
324
+ If render-array defined, this attribute can
325
+ define
326
+ </p>
327
+ <p>Default value is value of render-array</p>
328
+ </li>
329
+ </ul>
330
+
331
+ <h4
332
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
333
+ Funcations
334
+ </h4>
335
+ <ul class="list-style-type:none">
336
+ <li
337
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
338
+ <h4>
339
+ <span>setValue(elements, data, [passTo])</span>
340
+ </h4>
341
+ <p>This is main function.</p>
342
+ <div>
343
+ <p>
344
+ <strong>elements</strong>
345
+ <span class="cocreate-badge warning"
346
+ >Type:NoteList</span
347
+ ><span class="cocreate-badge danager"
348
+ >required</span
349
+ >
350
+ </p>
351
+ <p>Dom elements for render</p>
352
+ </div>
353
+ <div>
354
+ <p>
355
+ <strong>data</strong>
356
+ <span class="cocreate-badge warning"
357
+ >Type:object</span
358
+ ><span class="cocreate-badge danager"
359
+ >required</span
360
+ >
361
+ </p>
362
+ <p>Data to render</p>
363
+ </div>
364
+ <div>
365
+ <p>
366
+ <strong>passTo</strong
367
+ ><span class="cocreate-badge warning"
368
+ >Type:string</span
369
+ ><span class="cocreate-badge warning"
370
+ >optional</span
371
+ >
372
+ </p>
373
+ </div>
374
+ </li>
375
+ <li
376
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
377
+ <h4>
378
+ <span>render(selector, data)</span>
379
+ </h4>
380
+ <div>
381
+ <p>
382
+ <strong>selector</strong>
383
+ <span class="cocreate-badge warning"
384
+ >Type:String</span
385
+ ><span class="cocreate-badge danager"
386
+ >required</span
387
+ >
388
+ </p>
389
+ <p>The selector of element to render</p>
390
+ </div>
391
+ <div>
392
+ <p>
393
+ <strong>data</strong>
394
+ <span class="cocreate-badge warning"
395
+ >Type:object</span
396
+ ><span class="cocreate-badge danager"
397
+ >required</span
398
+ >
399
+ </p>
400
+ <p>Data to render</p>
401
+ </div>
402
+ </li>
403
+ <li
404
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
405
+ <h4>
406
+ <span>setArray(element, data)</span>
407
+ </h4>
408
+ <div>
409
+ <p>
410
+ <strong>element</strong>
411
+ <span class="cocreate-badge warning"
412
+ >Type:Node</span
413
+ ><span class="cocreate-badge danager"
414
+ >required</span
415
+ >
416
+ </p>
417
+ <p>
418
+ Element to render the array. Geneeral it
419
+ will be template.
420
+ </p>
421
+ </div>
422
+ <div>
423
+ <p>
424
+ <strong>data</strong>
425
+ <span class="cocreate-badge warning"
426
+ >Type:object</span
427
+ ><span class="cocreate-badge danager"
428
+ >required</span
429
+ >
430
+ </p>
431
+ <p>Data to render</p>
432
+ </div>
433
+ </li>
434
+ </ul>
435
+
436
+ <h2
437
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
438
+ How Does It Works
439
+ </h2>
440
+ <p>
441
+ CoCreate-render works based on attributes and template,
442
+ The attributes to render should be wrapper "{{ }}", and
443
+ attributes can include the combine "{{}}" wrapper.
444
+ </p>
445
+
446
+ <p>
447
+ To render the array data, Render need to define
448
+ <code class="language-js">class="template"</code>.
449
+ <code class="language-js">render-array</code>
450
+ </p>
451
+
452
+ <h2
453
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
454
+ Effects and Styles
455
+ </h2>
456
+
457
+ <h2
458
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
459
+ Events
460
+ </h2>
461
+ </div>
462
+ <div
463
+ class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
464
+ <!-- SandBox -->
465
+ <div
466
+ id="render-demo"
467
+ class="border-bottom:1px_solid_lightgrey"
468
+ scroll
469
+ scroll-intersect="color:dodgerblue"
470
+ scroll-target="#render-demo-section">
471
+ <span
472
+ class="display:flex align-items:center width:fit-content"
473
+ hover="display:block!important"
474
+ hover-target="[href='#render-demo']">
475
+ <h2 class="padding:5px_0px">Demo</h2>
476
+ <a
477
+ class="margin-left:10px display:none"
478
+ href="#render-demo"
479
+ ><i
480
+ class="height:20px fill:#505050"
481
+ src="/assets/svg/link.svg"></i
482
+ ></a>
483
+ </span>
484
+ </div>
485
+ <div
486
+ class="position:sticky top:0 padding:15px_0px height:100vh">
487
+ <!-- SandBox -->
488
+ <div
489
+ class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
490
+ id="playground">
491
+ <div
492
+ id="demo-code"
493
+ resizable
494
+ class="position:relative height:50%">
495
+ <textarea
496
+ type="code"
497
+ lang="html"
498
+ collection="demos"
499
+ document_id=""
500
+ name="demo"
501
+ save="false"
502
+ id="demo"
503
+ class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
504
+ <div
505
+ resize="bottom"
506
+ class="background:lightgrey"></div>
507
+ </div>
508
+
509
+ <div
510
+ id="demo-preview"
511
+ class="position:relative overflow:auto background-color:white">
512
+ <div class="demopreview padding:20px"></div>
513
+ </div>
514
+
515
+ <div
516
+ class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
517
+ <a
518
+ class="margin-right:10px"
519
+ id="eye"
520
+ show="#eye-slash"
521
+ hide="#eye, #demo-preview"
522
+ toggle="code-height"
523
+ toggle-target="#demo-code"
524
+ ><i
525
+ class="height:18px fill:#505050"
526
+ src="/assets/svg/eye.svg"></i
527
+ ></a>
528
+ <a
529
+ class="margin-right:10px"
530
+ hidden
531
+ id="eye-slash"
532
+ show="#eye, #demo-preview"
533
+ hide="#eye-slash"
534
+ toggle="code-height"
535
+ toggle-target="#demo-code"
536
+ ><i
537
+ class="height:20px fill:#505050"
538
+ src="/assets/svg/eye-slash.svg"></i
539
+ ></a>
540
+ <a
541
+ class="margin-right:10px"
542
+ id="code"
543
+ show="#code-slash"
544
+ hide="#code, #demo-code"
545
+ ><i
546
+ class="height:20px fill:#505050"
547
+ src="/assets/svg/code.svg"></i
548
+ ></a>
549
+ <a
550
+ class="margin-right:10px"
551
+ hidden
552
+ id="code-slash"
553
+ show="#code, #demo-code"
554
+ hide="#code-slash"
555
+ ><i
556
+ class="display:flex height:18px fill:#505050"
557
+ src="/assets/svg/code.svg"></i
558
+ ></a>
559
+ <a
560
+ class="margin-right:5px"
561
+ fullscreen
562
+ fullscreen-target="#playground"></a>
563
+ </div>
564
+ </div>
565
+ <!-- End SandBox -->
566
+ </div>
567
+ </div>
568
+ </div>
569
+ <button
570
+ href="https://github.com/CoCreate-app/CoCreate-render/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
571
+ target="_blank"
572
+ class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
573
+ <i
574
+ class="height:20px fill:#505050"
575
+ src="/assets/svg/pencil-alt.svg"></i>
576
+ </button>
577
+ </main>
578
+
579
+ <script src="./apikey.js"></script>
580
+ <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
581
+ </body>
582
+ </html>