@cocreate/elements 1.37.0 → 1.38.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 +29 -0
- package/docs/index.html +330 -328
- package/package.json +1 -1
- package/prettier.config.js +16 -0
- package/src/fetchSrc.js +4 -3
- package/src/form.js +37 -24
- package/src/index.js +16 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,32 @@
|
|
|
1
|
+
# [1.38.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.37.1...v1.38.0) (2024-11-04)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* pretier.config.js and file formating ([644eec6](https://github.com/CoCreate-app/CoCreate-elements/commit/644eec6bb63cd484b871cb203a45435654e23da9))
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* add prettier.config.js and format files ([f14df0e](https://github.com/CoCreate-app/CoCreate-elements/commit/f14df0e3d9630a3b20eeeb65574c2d6af5902a85))
|
|
12
|
+
* add prettier.config.js and format files ([e24974a](https://github.com/CoCreate-app/CoCreate-elements/commit/e24974a35c72c384f10d9edc36d8d89390ba1235))
|
|
13
|
+
|
|
14
|
+
## [1.37.1](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.37.0...v1.37.1) (2024-11-02)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* checkValue(key) prior to excutuing element.setValue() ([8234c96](https://github.com/CoCreate-app/CoCreate-elements/commit/8234c96ff445b7a9bbc4d7171c07ae1b189fb9ee))
|
|
20
|
+
* element.getValue() ([7009f70](https://github.com/CoCreate-app/CoCreate-elements/commit/7009f70d7a18d0e79100da8c25788db1a1c4c2e2))
|
|
21
|
+
* handling contenteditable iframes ([11b6819](https://github.com/CoCreate-app/CoCreate-elements/commit/11b6819089e2b3ab2bbbcb47aa4f6134a036ad92))
|
|
22
|
+
* if form has attribute object set as empty on reset ([29c1b6d](https://github.com/CoCreate-app/CoCreate-elements/commit/29c1b6d469afbaecd8e760288961726a2d9cd49b))
|
|
23
|
+
* init if observer ol attribute value not the same as new ([456913c](https://github.com/CoCreate-app/CoCreate-elements/commit/456913c6d4a13279aad08a40732efd91e272add0))
|
|
24
|
+
* observer taget has been renamed to selector ([239974c](https://github.com/CoCreate-app/CoCreate-elements/commit/239974ca9316607f28ce9fa1440b18b4e60735a0))
|
|
25
|
+
* removed comsole.log ([d0b6fe3](https://github.com/CoCreate-app/CoCreate-elements/commit/d0b6fe314ab9532df479e955d243d3ef242bbc89))
|
|
26
|
+
* removed dead code ([3929b76](https://github.com/CoCreate-app/CoCreate-elements/commit/3929b76d6a7d5bd71b5973f3ff4b2a8061954d7a))
|
|
27
|
+
* removed test console.log ([4fea18d](https://github.com/CoCreate-app/CoCreate-elements/commit/4fea18d4f32c604b2666d92a384dce6bfe53dfc7))
|
|
28
|
+
* resetType support ([2ce141e](https://github.com/CoCreate-app/CoCreate-elements/commit/2ce141e832f97c8df7a68a7bdfc5206d98cf66da))
|
|
29
|
+
|
|
1
30
|
# [1.37.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.36.2...v1.37.0) (2024-09-21)
|
|
2
31
|
|
|
3
32
|
|
package/docs/index.html
CHANGED
|
@@ -1,342 +1,344 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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
|
+
<meta
|
|
8
|
+
name="description"
|
|
9
|
+
content="Fetch content into any html element by using attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags"
|
|
10
|
+
/>
|
|
11
|
+
<meta
|
|
12
|
+
name="keywords"
|
|
13
|
+
content="helper classes, utility classes, css framework, css library, inline style classes"
|
|
14
|
+
/>
|
|
15
|
+
<meta name="robots" content="index,follow" />
|
|
16
|
+
<meta
|
|
17
|
+
property="og:image"
|
|
18
|
+
content="https://cdn.cocreate.app/docs/elements.png"
|
|
19
|
+
/>
|
|
17
20
|
|
|
18
|
-
|
|
21
|
+
<title>CoCreate-elements Documentation | CoCreateJS</title>
|
|
19
22
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
23
|
+
<!-- CoCreate Favicon -->
|
|
24
|
+
<link
|
|
25
|
+
rel="icon"
|
|
26
|
+
type="image/png"
|
|
27
|
+
sizes="32x32"
|
|
28
|
+
href="https://cocreate.app/images/favicon.ico"
|
|
29
|
+
/>
|
|
30
|
+
<link
|
|
31
|
+
rel="stylesheet"
|
|
32
|
+
href="../index.css"
|
|
33
|
+
array="files"
|
|
34
|
+
object="60888216117c640e7596303f"
|
|
35
|
+
key="src"
|
|
36
|
+
type="text/css"
|
|
37
|
+
save="true"
|
|
38
|
+
/>
|
|
39
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
40
|
+
</head>
|
|
36
41
|
|
|
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
|
-
|
|
102
|
-
|
|
103
|
-
share-network="share"
|
|
104
|
-
title="Share on share"
|
|
105
|
-
><i src="/assets/svg/share-alt.svg"></i
|
|
106
|
-
></a>
|
|
107
|
-
</div>
|
|
108
|
-
<a
|
|
109
|
-
href="https://github.com/CoCreate-app/CoCreate-elements"
|
|
110
|
-
target="_blank"
|
|
111
|
-
class="margin-right:15px"
|
|
112
|
-
><i src="/assets/svg/github.svg"></i
|
|
113
|
-
></a>
|
|
114
|
-
</div>
|
|
42
|
+
<body>
|
|
43
|
+
<!-- Navbar -->
|
|
44
|
+
<nav
|
|
45
|
+
class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px"
|
|
46
|
+
content_id="content"
|
|
47
|
+
scroll="sticky-nav,"
|
|
48
|
+
scroll-up="5"
|
|
49
|
+
scroll-down="5"
|
|
50
|
+
path="../"
|
|
51
|
+
src="../components/navbar.html"
|
|
52
|
+
></nav>
|
|
53
|
+
<sidenav
|
|
54
|
+
id="menuL"
|
|
55
|
+
class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
|
|
56
|
+
resizable
|
|
57
|
+
resize-selector="[content_id='content']"
|
|
58
|
+
resize-property="margin-left"
|
|
59
|
+
resize-value="width"
|
|
60
|
+
>
|
|
61
|
+
<menu array="files" object="603717b07de7fb350ae9fec8" key="src"></menu>
|
|
62
|
+
<div resize="right"></div>
|
|
63
|
+
</sidenav>
|
|
64
|
+
<main
|
|
65
|
+
class="padding-top:15px padding:15px@lg@xl"
|
|
66
|
+
content_id="content"
|
|
67
|
+
id="cocreate-elements"
|
|
68
|
+
>
|
|
69
|
+
<div
|
|
70
|
+
class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px"
|
|
71
|
+
>
|
|
72
|
+
<div class="display:flex align-items:center">
|
|
73
|
+
<h2>CoCreate-elements</h2>
|
|
74
|
+
</div>
|
|
75
|
+
<div
|
|
76
|
+
class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white"
|
|
77
|
+
>
|
|
78
|
+
<div
|
|
79
|
+
class="display:flex align-items:center transition:0.3s padding-left:10px"
|
|
80
|
+
share-network="true"
|
|
81
|
+
share-text="Fetch content into any html element by using attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags"
|
|
82
|
+
share-title="CoCreate elements"
|
|
83
|
+
share-height="600"
|
|
84
|
+
share-width="700"
|
|
85
|
+
share-media="https://cdn.cocreate.app/docs/elements.png"
|
|
86
|
+
hover="display:block!important"
|
|
87
|
+
hover-selector=".social-networks"
|
|
88
|
+
>
|
|
89
|
+
<div class="display:none social-networks">
|
|
90
|
+
<a
|
|
91
|
+
class="margin-right:15px"
|
|
92
|
+
share-network="twitter"
|
|
93
|
+
title="Share on twitter"
|
|
94
|
+
><i src="/assets/svg/twitter.svg"></i
|
|
95
|
+
></a>
|
|
96
|
+
<a
|
|
97
|
+
class="margin-right:15px"
|
|
98
|
+
share-network="facebook"
|
|
99
|
+
title="Share on Facebook"
|
|
100
|
+
><i src="/assets/svg/facebook.svg"></i
|
|
101
|
+
></a>
|
|
102
|
+
<a
|
|
103
|
+
class="margin-right:15px"
|
|
104
|
+
share-network="instagram"
|
|
105
|
+
title="Share on instagram"
|
|
106
|
+
><i src="/assets/svg/instagram.svg"></i
|
|
107
|
+
></a>
|
|
115
108
|
</div>
|
|
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
|
-
|
|
148
|
-
|
|
109
|
+
<a
|
|
110
|
+
class="margin-right:15px"
|
|
111
|
+
share-network="share"
|
|
112
|
+
title="Share on share"
|
|
113
|
+
><i src="/assets/svg/share-alt.svg"></i
|
|
114
|
+
></a>
|
|
115
|
+
</div>
|
|
116
|
+
<a
|
|
117
|
+
href="https://github.com/CoCreate-app/CoCreate-elements"
|
|
118
|
+
target="_blank"
|
|
119
|
+
class="margin-right:15px"
|
|
120
|
+
><i src="/assets/svg/github.svg"></i
|
|
121
|
+
></a>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
<h1
|
|
125
|
+
class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100"
|
|
126
|
+
>
|
|
127
|
+
Fetch content into any html element by using html5 attributes to query
|
|
128
|
+
data stored in CoCreate headless CMS. If data is changed it will
|
|
129
|
+
instantly reflect in html tags as changes are broadcasted in realtime
|
|
130
|
+
</h1>
|
|
131
|
+
<div id="elements-section" class="display:flex flex-wrap:wrap">
|
|
132
|
+
<div
|
|
133
|
+
class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px"
|
|
134
|
+
>
|
|
135
|
+
<div
|
|
136
|
+
id="elements-install"
|
|
137
|
+
class="border-bottom:1px_solid_lightgrey"
|
|
138
|
+
scroll
|
|
139
|
+
scroll-intersect="color:dodgerblue"
|
|
140
|
+
scroll-selector="#elements-install-section"
|
|
141
|
+
>
|
|
142
|
+
<span
|
|
143
|
+
class="display:flex align-items:center width:fit-content"
|
|
144
|
+
hover="display:block!important"
|
|
145
|
+
hover-selector="[href='#elements-install']"
|
|
146
|
+
>
|
|
147
|
+
<h2 class="padding:5px_0px">Install</h2>
|
|
148
|
+
<a class="margin-left:10px display:none" href="#elements-install"
|
|
149
|
+
><i src="/assets/svg/link.svg"></i
|
|
150
|
+
></a>
|
|
151
|
+
</span>
|
|
152
|
+
</div>
|
|
153
|
+
<pre><code class="language-bash">npm i @cocreate/elements</code></pre>
|
|
154
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
155
|
+
Or you can use cdn link:
|
|
156
|
+
</p>
|
|
157
|
+
<pre><code class="language-html"><script>https://cdn.cocreate.app/elements/latest/CoCreate-elements.min.js</script></code></pre>
|
|
149
158
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
159
|
+
<div
|
|
160
|
+
id="elements-usage"
|
|
161
|
+
class="margin-top:80px border-bottom:1px_solid_lightgrey"
|
|
162
|
+
scroll
|
|
163
|
+
scroll-intersect="color:dodgerblue"
|
|
164
|
+
scroll-selector="#elements-usage-section"
|
|
165
|
+
>
|
|
166
|
+
<span
|
|
167
|
+
class="display:flex align-items:center width:fit-content"
|
|
168
|
+
hover="display:block!important"
|
|
169
|
+
hover-selector="[href='#elements-usage']"
|
|
170
|
+
>
|
|
171
|
+
<h2 class="padding:5px_0px">Usage</h2>
|
|
172
|
+
<a class="margin-left:10px display:none" href="#elements-usage"
|
|
173
|
+
><i src="/assets/svg/link.svg"></i
|
|
174
|
+
></a>
|
|
175
|
+
</span>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="">
|
|
178
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
179
|
+
This is elements usage
|
|
180
|
+
</p>
|
|
172
181
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
<span class="cocreate-badge warning"
|
|
223
|
-
>optional</span
|
|
224
|
-
>
|
|
225
|
-
</h4>
|
|
226
|
-
<p>elements-attribute</p>
|
|
227
|
-
</li>
|
|
228
|
-
</ul>
|
|
229
|
-
</div>
|
|
182
|
+
<div class="flex-grow:1 min-width:300px width:100%">
|
|
183
|
+
<pre><code class="language-html"><div></div></code></pre>
|
|
184
|
+
</div>
|
|
185
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
186
|
+
This is elements usage
|
|
187
|
+
</p>
|
|
188
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
189
|
+
This is elements usage
|
|
190
|
+
</p>
|
|
191
|
+
</div>
|
|
192
|
+
<div
|
|
193
|
+
id="elements-attributes"
|
|
194
|
+
class="margin-top:80px border-bottom:1px_solid_lightgrey"
|
|
195
|
+
scroll
|
|
196
|
+
scroll-intersect="color:dodgerblue"
|
|
197
|
+
scroll-selector="#elements-attributes-section"
|
|
198
|
+
>
|
|
199
|
+
<span
|
|
200
|
+
class="display:flex align-items:center width:fit-content"
|
|
201
|
+
hover="display:block!important"
|
|
202
|
+
hover-selector="[href='#elements-attributes']"
|
|
203
|
+
>
|
|
204
|
+
<h2 class="padding:5px_0px">Attributes</h2>
|
|
205
|
+
<a
|
|
206
|
+
class="margin-left:10px display:none"
|
|
207
|
+
href="#elements-attributes"
|
|
208
|
+
><i src="/assets/svg/link.svg"></i
|
|
209
|
+
></a>
|
|
210
|
+
</span>
|
|
211
|
+
</div>
|
|
212
|
+
<ul class="list-style-type:none">
|
|
213
|
+
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
214
|
+
<h4>
|
|
215
|
+
<span>elements</span>
|
|
216
|
+
<span class="cocreate-badge success">string</span>
|
|
217
|
+
<span class="cocreate-badge warning">optional</span>
|
|
218
|
+
</h4>
|
|
219
|
+
<p>elements-attribute</p>
|
|
220
|
+
</li>
|
|
221
|
+
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
222
|
+
<h4>
|
|
223
|
+
<span>elements</span>
|
|
224
|
+
<span class="cocreate-badge success">string</span>
|
|
225
|
+
<span class="cocreate-badge warning">optional</span>
|
|
226
|
+
</h4>
|
|
227
|
+
<p>elements-attribute</p>
|
|
228
|
+
</li>
|
|
229
|
+
</ul>
|
|
230
|
+
</div>
|
|
230
231
|
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
232
|
+
<div
|
|
233
|
+
class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey"
|
|
234
|
+
>
|
|
235
|
+
<!-- SandBox -->
|
|
236
|
+
<div
|
|
237
|
+
id="elements-demo"
|
|
238
|
+
class="border-bottom:1px_solid_lightgrey"
|
|
239
|
+
scroll
|
|
240
|
+
scroll-intersect="color:dodgerblue"
|
|
241
|
+
scroll-selector="#elements-demo-section"
|
|
242
|
+
>
|
|
243
|
+
<span
|
|
244
|
+
class="display:flex align-items:center width:fit-content"
|
|
245
|
+
hover="display:block!important"
|
|
246
|
+
hover-selector="[href='#elements-demo']"
|
|
247
|
+
>
|
|
248
|
+
<h2 class="padding:5px_0px">Demo</h2>
|
|
249
|
+
<a class="margin-left:10px display:none" href="#elements-demo"
|
|
250
|
+
><i src="/assets/svg/link.svg"></i
|
|
251
|
+
></a>
|
|
252
|
+
</span>
|
|
253
|
+
</div>
|
|
254
|
+
<div class="position:sticky top:0 padding:15px_0px height:100vh">
|
|
255
|
+
<!-- SandBox -->
|
|
256
|
+
<div
|
|
257
|
+
class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
|
|
258
|
+
id="playground"
|
|
259
|
+
>
|
|
260
|
+
<div
|
|
261
|
+
id="demo-code"
|
|
262
|
+
resizable
|
|
263
|
+
class="position:relative height:50%"
|
|
264
|
+
>
|
|
265
|
+
<textarea
|
|
266
|
+
type="code"
|
|
267
|
+
lang="html"
|
|
268
|
+
array="demos"
|
|
269
|
+
object=""
|
|
270
|
+
key="demo"
|
|
271
|
+
save="false"
|
|
272
|
+
id="demo"
|
|
273
|
+
class="height:100% width:100% outline:none border:none resize:none padding:5px"
|
|
274
|
+
></textarea>
|
|
275
|
+
<div resize="bottom" class="background:lightgrey"></div>
|
|
276
|
+
</div>
|
|
275
277
|
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
278
|
+
<div
|
|
279
|
+
id="demo-preview"
|
|
280
|
+
class="position:relative overflow:auto background-color:white"
|
|
281
|
+
>
|
|
282
|
+
<div class="demopreview padding:20px"></div>
|
|
283
|
+
</div>
|
|
281
284
|
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
fullscreen-selector="#playground"></a>
|
|
326
|
-
</div>
|
|
327
|
-
</div>
|
|
328
|
-
<!-- End SandBox -->
|
|
329
|
-
</div>
|
|
330
|
-
</div>
|
|
285
|
+
<div
|
|
286
|
+
class="font-size:20px position:absolute top:10px right:10px opacity:0.6"
|
|
287
|
+
>
|
|
288
|
+
<a
|
|
289
|
+
class="margin-right:10px"
|
|
290
|
+
id="eye"
|
|
291
|
+
show="#eye-slash"
|
|
292
|
+
hide="#eye, #demo-preview"
|
|
293
|
+
toggle="code-height"
|
|
294
|
+
toggle-selector="#demo-code"
|
|
295
|
+
><i class="height:18px" src="/assets/svg/eye.svg"></i
|
|
296
|
+
></a>
|
|
297
|
+
<a
|
|
298
|
+
class="margin-right:10px"
|
|
299
|
+
hidden
|
|
300
|
+
id="eye-slash"
|
|
301
|
+
show="#eye, #demo-preview"
|
|
302
|
+
hide="#eye-slash"
|
|
303
|
+
toggle="code-height"
|
|
304
|
+
toggle-selector="#demo-code"
|
|
305
|
+
><i src="/assets/svg/eye-slash.svg"></i
|
|
306
|
+
></a>
|
|
307
|
+
<a
|
|
308
|
+
class="margin-right:10px"
|
|
309
|
+
id="code"
|
|
310
|
+
show="#code-slash"
|
|
311
|
+
hide="#code, #demo-code"
|
|
312
|
+
><i src="/assets/svg/code.svg"></i
|
|
313
|
+
></a>
|
|
314
|
+
<a
|
|
315
|
+
class="margin-right:10px"
|
|
316
|
+
hidden
|
|
317
|
+
id="code-slash"
|
|
318
|
+
show="#code, #demo-code"
|
|
319
|
+
hide="#code-slash"
|
|
320
|
+
><i class="height:18px" src="/assets/svg/code.svg"></i
|
|
321
|
+
></a>
|
|
322
|
+
<a
|
|
323
|
+
class="margin-right:5px"
|
|
324
|
+
fullscreen
|
|
325
|
+
fullscreen-selector="#playground"
|
|
326
|
+
></a>
|
|
327
|
+
</div>
|
|
331
328
|
</div>
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
329
|
+
<!-- End SandBox -->
|
|
330
|
+
</div>
|
|
331
|
+
</div>
|
|
332
|
+
</div>
|
|
333
|
+
<button
|
|
334
|
+
href="https://github.com/CoCreate-app/CoCreate-elements/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
|
|
335
|
+
target="_blank"
|
|
336
|
+
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)"
|
|
337
|
+
>
|
|
338
|
+
<i src="../assets/svg/pencil-alt.svg"></i>
|
|
339
|
+
</button>
|
|
340
|
+
</main>
|
|
339
341
|
|
|
340
|
-
|
|
341
|
-
|
|
342
|
+
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
|
|
343
|
+
</body>
|
|
342
344
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocreate/elements",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.38.0",
|
|
4
4
|
"description": "Fetch content into any html element by using html5 attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags as changes are broadcasted in realtime",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"elements",
|
package/src/fetchSrc.js
CHANGED
|
@@ -208,7 +208,7 @@ function base64ToArrayBuffer(base64) {
|
|
|
208
208
|
observer.init({
|
|
209
209
|
name: 'CoCreateSrc',
|
|
210
210
|
observe: ['addedNodes'],
|
|
211
|
-
|
|
211
|
+
selector: selector,
|
|
212
212
|
callback: function (mutation) {
|
|
213
213
|
init(mutation.target);
|
|
214
214
|
}
|
|
@@ -218,9 +218,10 @@ observer.init({
|
|
|
218
218
|
name: 'CoCreateSrcAttributes',
|
|
219
219
|
observe: ['attributes'],
|
|
220
220
|
attributeName: ['src'],
|
|
221
|
-
|
|
221
|
+
selector: selector,
|
|
222
222
|
callback: function (mutation) {
|
|
223
|
-
|
|
223
|
+
if (mutation.oldValue !== mutation.target.getAttribute(mutation.attributeName))
|
|
224
|
+
init(mutation.target);
|
|
224
225
|
}
|
|
225
226
|
});
|
|
226
227
|
|
package/src/form.js
CHANGED
|
@@ -23,7 +23,7 @@ function init(elements) {
|
|
|
23
23
|
Observer.init({
|
|
24
24
|
name: 'CoCreateFormElements',
|
|
25
25
|
observe: ['addedNodes'],
|
|
26
|
-
|
|
26
|
+
selector: '[storage], [database], [array], [index], [object], [key]',
|
|
27
27
|
callback: function (mutation) {
|
|
28
28
|
if (element == mutation.target.form)
|
|
29
29
|
setAttribute(element, [mutation.target])
|
|
@@ -74,8 +74,9 @@ function setAttribute(form, elements) {
|
|
|
74
74
|
if (variable) {
|
|
75
75
|
for (let el of elements) {
|
|
76
76
|
// Set the value of the attribute.
|
|
77
|
+
// TODO: skip-attribute naming convention, perhaps skip by defualt if storage, database, array not the same and use attribute to apply for cases where one _id will be used across 2 arrays
|
|
77
78
|
if (!el.getAttribute(attribute.name) && !el.hasAttribute('skip-attribute')) {
|
|
78
|
-
el.setAttribute(attribute.name,
|
|
79
|
+
el.setAttribute(attribute.name, attribute.value);
|
|
79
80
|
}
|
|
80
81
|
}
|
|
81
82
|
}
|
|
@@ -101,32 +102,44 @@ function disableAutoFill(element) {
|
|
|
101
102
|
* @param form
|
|
102
103
|
*/
|
|
103
104
|
function reset(form) {
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
for
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
105
|
+
// Convert the form elements collection to an array
|
|
106
|
+
const formElementsArray = Array.from(form.elements);
|
|
107
|
+
|
|
108
|
+
// Query for additional elements with [object] or [key] attributes that are not already part of form controls
|
|
109
|
+
const customElements = Array.from(form.querySelectorAll('[object], [key]:not(input):not(select):not(textarea):not(button)'));
|
|
110
|
+
|
|
111
|
+
// Merge form elements and custom elements using the spread operator
|
|
112
|
+
const allElements = [...formElementsArray, ...customElements];
|
|
113
|
+
|
|
114
|
+
// Store the elements and their values in a map for restoration
|
|
115
|
+
const elementStates = new Map();
|
|
116
|
+
|
|
117
|
+
// Iterate over all elements and store their current state based on the 'reset' attribute
|
|
118
|
+
for (const element of allElements) {
|
|
119
|
+
if (['BUTTON', 'FIELDSET'].includes(element.tagName))
|
|
120
|
+
continue
|
|
121
|
+
// Get the reset attribute value, if any
|
|
122
|
+
const resetType = element.getAttribute('reset');
|
|
123
|
+
if (element.hasAttribute('object') && (!resetType || resetType === 'object'))
|
|
111
124
|
element.setAttribute('object', '');
|
|
112
|
-
|
|
113
|
-
|
|
125
|
+
if (resetType === 'false' || resetType === 'object')
|
|
126
|
+
elementStates.set(element, element.getValue() || element.value || element.getAttribute('value'));
|
|
127
|
+
if (!resetType || resetType !== 'object')
|
|
114
128
|
element.setValue('')
|
|
115
129
|
}
|
|
116
130
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
// Set the object id attribute of the element to the object id if it has not yet been set.
|
|
120
|
-
if (!formElements.has(element)) {
|
|
121
|
-
// Set object attribute to object if it exists
|
|
122
|
-
if (element.hasAttribute('object'))
|
|
123
|
-
element.setAttribute('object', '');
|
|
124
|
-
element.setValue('')
|
|
125
|
-
}
|
|
126
|
-
}
|
|
131
|
+
if (form.hasAttribute('object'))
|
|
132
|
+
form.setAttribute('object', '');
|
|
127
133
|
|
|
134
|
+
// Perform the default form reset
|
|
128
135
|
form.reset();
|
|
129
|
-
|
|
136
|
+
|
|
137
|
+
// Restore values based on the 'reset' attribute
|
|
138
|
+
elementStates.forEach((value, element) => {
|
|
139
|
+
element.setValue(value)
|
|
140
|
+
});
|
|
141
|
+
|
|
142
|
+
// Dispatch a custom reset event
|
|
130
143
|
document.dispatchEvent(new CustomEvent('reset', {
|
|
131
144
|
detail: {}
|
|
132
145
|
}));
|
|
@@ -152,7 +165,7 @@ function setValue(form) {
|
|
|
152
165
|
Observer.init({
|
|
153
166
|
name: 'CoCreateForm',
|
|
154
167
|
observe: ['addedNodes'],
|
|
155
|
-
|
|
168
|
+
selector: 'form',
|
|
156
169
|
callback: mutation => init(mutation.target)
|
|
157
170
|
});
|
|
158
171
|
|
|
@@ -160,7 +173,7 @@ Observer.init({
|
|
|
160
173
|
name: 'CoCreateForm',
|
|
161
174
|
observe: ['attributes'],
|
|
162
175
|
attributeName: getAttributeNames(['storage', 'database', 'array', 'object', 'index']),
|
|
163
|
-
|
|
176
|
+
selector: 'form',
|
|
164
177
|
callback: mutation => mutation.target.tagName === "FORM" &&
|
|
165
178
|
setAttribute(mutation.target)
|
|
166
179
|
});
|
package/src/index.js
CHANGED
|
@@ -85,8 +85,6 @@ async function init(element) {
|
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
async function initElement(el) {
|
|
88
|
-
// if (el.closest('.template')) return;
|
|
89
|
-
|
|
90
88
|
let data = getObject(el);
|
|
91
89
|
if (!data || !data.type)
|
|
92
90
|
return
|
|
@@ -97,14 +95,20 @@ async function initElement(el) {
|
|
|
97
95
|
if (!elements.has(el)) {
|
|
98
96
|
elements.set(el, '')
|
|
99
97
|
|
|
100
|
-
if (el.tagName === "EDITOR")
|
|
101
|
-
console.log('editor event added')
|
|
102
98
|
if (!el.elementsInputEvent) {
|
|
103
99
|
el.elementsInputEvent = true;
|
|
104
100
|
|
|
105
101
|
if (['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName)
|
|
106
102
|
|| (el.hasAttribute('contenteditable') && el.getAttribute('contenteditable') !== 'false')
|
|
107
103
|
|| el.contenteditable) {
|
|
104
|
+
|
|
105
|
+
if (el.tagName == 'IFRAME') {
|
|
106
|
+
// ToDo: saving on contenteditable elements when an objectId does not exist in order to crud or crdt
|
|
107
|
+
el = el.contentDocument.documentElement
|
|
108
|
+
el.setAttribute('contenteditable', 'true')
|
|
109
|
+
|
|
110
|
+
}
|
|
111
|
+
|
|
108
112
|
el.addEventListener('input', function (e) {
|
|
109
113
|
if (el.pendingObject) return
|
|
110
114
|
|
|
@@ -121,6 +125,7 @@ async function initElement(el) {
|
|
|
121
125
|
}
|
|
122
126
|
// let attributes = ['filter-key', 'filter-search', 'filter-sort-key', 'filter-on', 'filter-limit']
|
|
123
127
|
// if (el.getFilter || attributes.some(attr => el.hasAttribute(attr))) {
|
|
128
|
+
|
|
124
129
|
await filter.init()
|
|
125
130
|
if (el.getFilter) {
|
|
126
131
|
data.$filter = await el.getFilter();
|
|
@@ -380,7 +385,7 @@ async function setData(element, data) {
|
|
|
380
385
|
if (!data[type] || !data[type].length)
|
|
381
386
|
continue;
|
|
382
387
|
|
|
383
|
-
if (key) {
|
|
388
|
+
if (key && checkValue(key)) {
|
|
384
389
|
let value
|
|
385
390
|
if (key.includes('$length')) {
|
|
386
391
|
value = CRUD.getValueFromObject(data[type][0], key.replace(/\.\$length$/, ''))
|
|
@@ -402,7 +407,6 @@ async function setData(element, data) {
|
|
|
402
407
|
if (isUpdate === "false" || isListen === "false" && !data.method.endsWith('.read')) continue;
|
|
403
408
|
// TODO: object.update data returned from server will not include $operator
|
|
404
409
|
el.setValue(value);
|
|
405
|
-
|
|
406
410
|
}
|
|
407
411
|
}
|
|
408
412
|
}
|
|
@@ -411,8 +415,7 @@ async function setData(element, data) {
|
|
|
411
415
|
async function filterData(element, data, type, key) {
|
|
412
416
|
let operator = '', value
|
|
413
417
|
|
|
414
|
-
|
|
415
|
-
if (key && !key.includes('$length')) {
|
|
418
|
+
if (key && !key.includes('$length') && key !== '{}') {
|
|
416
419
|
if (!data || !type) return
|
|
417
420
|
|
|
418
421
|
if (key.startsWith('$')) {
|
|
@@ -465,7 +468,6 @@ async function filterData(element, data, type, key) {
|
|
|
465
468
|
}
|
|
466
469
|
|
|
467
470
|
let isRendered = element.querySelector('[render-clone]');
|
|
468
|
-
|
|
469
471
|
if (operator) {
|
|
470
472
|
element.setValue(value);
|
|
471
473
|
} else if (element.renderValue && data.method && data.method.endsWith('.read') && data.$filter && (data.$filter.overwrite || !isRendered)) {
|
|
@@ -481,6 +483,8 @@ async function filterData(element, data, type, key) {
|
|
|
481
483
|
} else if (key && key.includes('$length')) {
|
|
482
484
|
let value = CRUD.getValueFromObject(data[type][0], key.replace(/\.\$length$/, ''))
|
|
483
485
|
element.setValue(value.length);
|
|
486
|
+
} else if (key === '{}') {
|
|
487
|
+
element.setValue(data[type])
|
|
484
488
|
} else if (data)
|
|
485
489
|
element.setValue(data)
|
|
486
490
|
|
|
@@ -1177,7 +1181,7 @@ function initSocket() {
|
|
|
1177
1181
|
Observer.init({
|
|
1178
1182
|
name: 'render',
|
|
1179
1183
|
observe: ['addedNodes'],
|
|
1180
|
-
|
|
1184
|
+
selector: '[render-clone]',
|
|
1181
1185
|
callback: function (mutation) {
|
|
1182
1186
|
if (!mutation.parentElement.hasAttribute('dnd'))
|
|
1183
1187
|
return
|
|
@@ -1327,7 +1331,7 @@ function dndCrudSend(data, crudType) {
|
|
|
1327
1331
|
Observer.init({
|
|
1328
1332
|
name: 'CoCreateElementsChildList',
|
|
1329
1333
|
observe: ['childList'],
|
|
1330
|
-
|
|
1334
|
+
selector: selector,
|
|
1331
1335
|
callback: function (mutation) {
|
|
1332
1336
|
init(mutation.addedNodes);
|
|
1333
1337
|
}
|
|
@@ -1336,7 +1340,7 @@ Observer.init({
|
|
|
1336
1340
|
Observer.init({
|
|
1337
1341
|
name: 'CoCreateElementsRemovedNodes',
|
|
1338
1342
|
observe: ['removedNodes'],
|
|
1339
|
-
|
|
1343
|
+
selector: selector,
|
|
1340
1344
|
callback: function (mutation) {
|
|
1341
1345
|
// if (mutation.target.parentElement) return
|
|
1342
1346
|
// if (mutation.target.parentElement) {
|