@cocreate/elements 1.17.33 → 1.19.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 +39 -0
- package/CoCreate.config.js +2 -2
- package/LICENSE +683 -21
- package/demo/index.html +185 -23
- package/docs/index.html +27 -27
- package/package.json +9 -9
- package/src/form.js +143 -0
- package/src/index.js +860 -129
- package/webpack.config.js +79 -73
package/demo/index.html
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
<title>
|
|
4
|
+
<title>Elements | CoCreateJS</title>
|
|
5
5
|
<!-- CoCreate Favicon -->
|
|
6
6
|
<link
|
|
7
7
|
rel="icon"
|
|
@@ -10,31 +10,193 @@
|
|
|
10
10
|
sizes="16x16" />
|
|
11
11
|
<link rel="manifest" href="/manifest.webmanifest" />
|
|
12
12
|
</head>
|
|
13
|
-
<body>
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
<
|
|
24
|
-
<h3 name="color" ></h3>
|
|
25
|
-
<h4 name="search"></h4>
|
|
26
|
-
<h5 name="date"></h5>
|
|
27
|
-
<h6 name="time"></h6>
|
|
28
|
-
<p name="date-time"></p>
|
|
29
|
-
<span name="date-time"></span>
|
|
30
|
-
<div name="text_area" classs="domeditor"></div>
|
|
31
|
-
<span name="personal_info.email"></span> -->
|
|
32
|
-
<button type="button" actions="save">save</button>
|
|
13
|
+
<body class="padding:20px">
|
|
14
|
+
<!-- Supports create and update of all crud types -->
|
|
15
|
+
<h2>Supports create and update of all crud types</h2>
|
|
16
|
+
<form realtime="false">
|
|
17
|
+
<input
|
|
18
|
+
placeholder="test"
|
|
19
|
+
array="test"
|
|
20
|
+
object="6465646af1e023c0aee760c2"
|
|
21
|
+
key="name" />
|
|
22
|
+
|
|
23
|
+
<a actions="save">Save</a>
|
|
33
24
|
</form>
|
|
25
|
+
<form realtime="false">
|
|
26
|
+
<!-- creates a database -->
|
|
27
|
+
<input database key="name" />
|
|
28
|
+
<!-- updates a database -->
|
|
29
|
+
<input database="test" key="name" />
|
|
30
|
+
<!-- deletes a database -->
|
|
31
|
+
<input database="test" key="name" value="$delete" />
|
|
34
32
|
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
<!-- creates an array -->
|
|
34
|
+
<input array key="name" />
|
|
35
|
+
<!-- updates an array -->
|
|
36
|
+
<input array="test" key="name" />
|
|
37
|
+
<!-- deletes an array -->
|
|
38
|
+
<input array="test" key="name" value="$delete" />
|
|
39
|
+
|
|
40
|
+
<!-- creates an index -->
|
|
41
|
+
<input array="test" index key="name" />
|
|
42
|
+
<!-- updates an index -->
|
|
43
|
+
<input array="test" index="test" key="name" />
|
|
44
|
+
<!-- deletes an index -->
|
|
45
|
+
<input array="test" index="test" key="name" value="$delete" />
|
|
46
|
+
|
|
47
|
+
<!-- creates an object with key name -->
|
|
48
|
+
<input array="test" object key="name" />
|
|
49
|
+
<!-- updates an object keys value -->
|
|
50
|
+
<input array="test" object="6465646af1e023c0aee760c2" key="name" />
|
|
51
|
+
<!-- deletes an object key if the object key is primary the object will be deleted -->
|
|
52
|
+
<input
|
|
53
|
+
array="test"
|
|
54
|
+
object="6465646af1e023c0aee760c2"
|
|
55
|
+
key="_id"
|
|
56
|
+
value="$delete" />
|
|
57
|
+
|
|
58
|
+
<!-- updates a key -->
|
|
59
|
+
<input
|
|
60
|
+
array="test"
|
|
61
|
+
object="6465646af1e023c0aee760c2"
|
|
62
|
+
key="name"
|
|
63
|
+
update />
|
|
64
|
+
|
|
65
|
+
<!-- updating the key name to a new key using value and/or value-prefix, value-suffix to generate a valid json sting {$update: value } -->
|
|
66
|
+
<input
|
|
67
|
+
array="test"
|
|
68
|
+
object="6465646af1e023c0aee760c2"
|
|
69
|
+
key="name"
|
|
70
|
+
value="{$update: firstName}" />
|
|
71
|
+
|
|
72
|
+
<br />
|
|
73
|
+
|
|
74
|
+
<a actions="save"></a>
|
|
75
|
+
</form>
|
|
76
|
+
|
|
77
|
+
<!-- Supports all data types -->
|
|
78
|
+
<h2>Supports updating arrays</h2>
|
|
79
|
+
<form>
|
|
80
|
+
<!-- inserts the value at the end of the array and returns index number. attribute "push" is optional, result is same -->
|
|
81
|
+
<input
|
|
82
|
+
array="test"
|
|
83
|
+
object="6465646af1e023c0aee760c2"
|
|
84
|
+
key="name[]"
|
|
85
|
+
push />
|
|
86
|
+
|
|
87
|
+
<!-- inserts the value at a specified index position of an array -->
|
|
88
|
+
<input
|
|
89
|
+
array="test"
|
|
90
|
+
object="6465646af1e023c0aee760c2"
|
|
91
|
+
key="name[3]"
|
|
92
|
+
splice />
|
|
37
93
|
|
|
94
|
+
<!-- updates the value at a specified index position of an array -->
|
|
95
|
+
<input
|
|
96
|
+
array="test"
|
|
97
|
+
object="6465646af1e023c0aee760c2"
|
|
98
|
+
key="name[0]" />
|
|
99
|
+
|
|
100
|
+
<!-- delete an item from the array by setting its value to "$delete" or "$slice" -->
|
|
101
|
+
<input
|
|
102
|
+
array="test"
|
|
103
|
+
object="6465646af1e023c0aee760c2"
|
|
104
|
+
key="name[0]"
|
|
105
|
+
value="$delete" />
|
|
106
|
+
|
|
107
|
+
<!-- delete the last item from the array by settting its value to "$delete" or "$slice" -->
|
|
108
|
+
<input
|
|
109
|
+
array="test"
|
|
110
|
+
object="6465646af1e023c0aee760c2"
|
|
111
|
+
key="name[]"
|
|
112
|
+
value="$delete" />
|
|
113
|
+
|
|
114
|
+
<!-- updating the key name will move the item to a new position -->
|
|
115
|
+
<input
|
|
116
|
+
array="test"
|
|
117
|
+
object="6465646af1e023c0aee760c2"
|
|
118
|
+
key="name[3]"
|
|
119
|
+
update />
|
|
120
|
+
|
|
121
|
+
<!-- updating the key name to a new key using value and/or value-prefix, value-suffix to generate a valid json sting {$update: value } -->
|
|
122
|
+
<input
|
|
123
|
+
array="test"
|
|
124
|
+
object="6465646af1e023c0aee760c2"
|
|
125
|
+
key="name[3]"
|
|
126
|
+
value="{$splice: name[1]}" />
|
|
127
|
+
</form>
|
|
128
|
+
|
|
129
|
+
<!-- Supports all input types -->
|
|
130
|
+
<h2>Supports all input types</h2>
|
|
131
|
+
<form array="apples" object="" realtime="false">
|
|
132
|
+
<input
|
|
133
|
+
type="text"
|
|
134
|
+
class="floating-label"
|
|
135
|
+
placeholder="Text"
|
|
136
|
+
key="name" />
|
|
137
|
+
<input
|
|
138
|
+
type="number"
|
|
139
|
+
class="floating-label"
|
|
140
|
+
placeholder="number"
|
|
141
|
+
key="number" />
|
|
142
|
+
<input
|
|
143
|
+
type="text"
|
|
144
|
+
class="floating-label"
|
|
145
|
+
placeholder="color"
|
|
146
|
+
key="color" />
|
|
147
|
+
<input
|
|
148
|
+
type="date"
|
|
149
|
+
class="floating-label"
|
|
150
|
+
placeholder="Date"
|
|
151
|
+
key="date" />
|
|
152
|
+
<input
|
|
153
|
+
type="time"
|
|
154
|
+
class="floating-label"
|
|
155
|
+
placeholder="Time"
|
|
156
|
+
key="time" />
|
|
157
|
+
<input
|
|
158
|
+
type="datetime-local"
|
|
159
|
+
class="floating-label"
|
|
160
|
+
placeholder="Date Time"
|
|
161
|
+
key="date-time" />
|
|
162
|
+
<textarea
|
|
163
|
+
class="floating-label"
|
|
164
|
+
placeholder="Text Area"
|
|
165
|
+
key="text_area"></textarea>
|
|
166
|
+
<!-- <cocreate-select
|
|
167
|
+
class="floating-label"
|
|
168
|
+
placeholder="Primary View"
|
|
169
|
+
key="navbar-menu-primary">
|
|
170
|
+
<input
|
|
171
|
+
placeholder="Search"
|
|
172
|
+
filter-next="[array]"
|
|
173
|
+
filter-search />
|
|
174
|
+
<cc-options
|
|
175
|
+
array="files"
|
|
176
|
+
render-selector="[template]"
|
|
177
|
+
class="overflow:auto">
|
|
178
|
+
<cc-option
|
|
179
|
+
template
|
|
180
|
+
value="{{object._id}}"
|
|
181
|
+
object="{{object._id}}"
|
|
182
|
+
render="object">
|
|
183
|
+
<h3>{{object.name}}</h3>
|
|
184
|
+
<h5>{{object._id}}</h5>
|
|
185
|
+
</cc-option>
|
|
186
|
+
</cc-options>
|
|
187
|
+
</cocreate-select> -->
|
|
188
|
+
|
|
189
|
+
<button
|
|
190
|
+
actions="save, reset"
|
|
191
|
+
class="position:fixed bottom:15px right:15px bg-blue grow-hover round">
|
|
192
|
+
<i
|
|
193
|
+
class="height:20px fill:#505050"
|
|
194
|
+
src="/assets/svg/save.svg"></i>
|
|
195
|
+
</button>
|
|
196
|
+
</form>
|
|
197
|
+
|
|
198
|
+
<!-- <script src="../dist/CoCreate-elements.js"></script> -->
|
|
199
|
+
<!-- <script src="../../../CoCreateJS/dist/CoCreate.js"></script> -->
|
|
38
200
|
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
|
|
39
201
|
</body>
|
|
40
202
|
</html>
|
package/docs/index.html
CHANGED
|
@@ -5,10 +5,10 @@
|
|
|
5
5
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
7
|
<meta
|
|
8
|
-
|
|
8
|
+
key="description"
|
|
9
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
10
|
<meta
|
|
11
|
-
|
|
11
|
+
key="keywords"
|
|
12
12
|
content="helper classes, utility classes, css framework, css library, inline style classes" />
|
|
13
13
|
<meta name="robots" content="index,follow" />
|
|
14
14
|
<meta
|
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
<link
|
|
27
27
|
rel="stylesheet"
|
|
28
28
|
href="/docs/index.css"
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
array="files"
|
|
30
|
+
object="60888216117c640e7596303f"
|
|
31
|
+
key="src"
|
|
32
32
|
type="text/css"
|
|
33
33
|
save="true" />
|
|
34
34
|
<link rel="manifest" href="/manifest.webmanifest" />
|
|
@@ -41,20 +41,20 @@
|
|
|
41
41
|
scroll="sticky-nav,hide-nav"
|
|
42
42
|
scroll-up="10"
|
|
43
43
|
scroll-down="10"
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
44
|
+
array="files"
|
|
45
|
+
object="60395ef42b3ac232657040fd"
|
|
46
|
+
key="src"></nav>
|
|
47
47
|
<sidenav
|
|
48
48
|
id="menuL"
|
|
49
49
|
class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
|
|
50
50
|
resizable
|
|
51
|
-
resize-
|
|
51
|
+
resize-selector="[content_id='content']"
|
|
52
52
|
resize-property="margin-left"
|
|
53
53
|
resize-value="width">
|
|
54
54
|
<menu
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
55
|
+
array="files"
|
|
56
|
+
object="603717b07de7fb350ae9fec8"
|
|
57
|
+
key="src"></menu>
|
|
58
58
|
<div resize="right"></div>
|
|
59
59
|
</sidenav>
|
|
60
60
|
<main
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
share-width="700"
|
|
78
78
|
share-media="https://cdn.cocreate.app/docs/elements.png"
|
|
79
79
|
hover="display:block!important"
|
|
80
|
-
hover-
|
|
80
|
+
hover-selector=".social-networks">
|
|
81
81
|
<div class="display:none social-networks">
|
|
82
82
|
<a
|
|
83
83
|
class="margin-right:15px"
|
|
@@ -138,11 +138,11 @@
|
|
|
138
138
|
class="border-bottom:1px_solid_lightgrey"
|
|
139
139
|
scroll
|
|
140
140
|
scroll-intersect="color:dodgerblue"
|
|
141
|
-
scroll-
|
|
141
|
+
scroll-selector="#elements-install-section">
|
|
142
142
|
<span
|
|
143
143
|
class="display:flex align-items:center width:fit-content"
|
|
144
144
|
hover="display:block!important"
|
|
145
|
-
hover-
|
|
145
|
+
hover-selector="[href='#elements-install']">
|
|
146
146
|
<h2 class="padding:5px_0px">Install</h2>
|
|
147
147
|
<a
|
|
148
148
|
class="margin-left:10px display:none"
|
|
@@ -164,11 +164,11 @@
|
|
|
164
164
|
class="margin-top:80px border-bottom:1px_solid_lightgrey"
|
|
165
165
|
scroll
|
|
166
166
|
scroll-intersect="color:dodgerblue"
|
|
167
|
-
scroll-
|
|
167
|
+
scroll-selector="#elements-usage-section">
|
|
168
168
|
<span
|
|
169
169
|
class="display:flex align-items:center width:fit-content"
|
|
170
170
|
hover="display:block!important"
|
|
171
|
-
hover-
|
|
171
|
+
hover-selector="[href='#elements-usage']">
|
|
172
172
|
<h2 class="padding:5px_0px">Usage</h2>
|
|
173
173
|
<a
|
|
174
174
|
class="margin-left:10px display:none"
|
|
@@ -199,11 +199,11 @@
|
|
|
199
199
|
class="margin-top:80px border-bottom:1px_solid_lightgrey"
|
|
200
200
|
scroll
|
|
201
201
|
scroll-intersect="color:dodgerblue"
|
|
202
|
-
scroll-
|
|
202
|
+
scroll-selector="#elements-attributes-section">
|
|
203
203
|
<span
|
|
204
204
|
class="display:flex align-items:center width:fit-content"
|
|
205
205
|
hover="display:block!important"
|
|
206
|
-
hover-
|
|
206
|
+
hover-selector="[href='#elements-attributes']">
|
|
207
207
|
<h2 class="padding:5px_0px">Attributes</h2>
|
|
208
208
|
<a
|
|
209
209
|
class="margin-left:10px display:none"
|
|
@@ -252,11 +252,11 @@
|
|
|
252
252
|
class="border-bottom:1px_solid_lightgrey"
|
|
253
253
|
scroll
|
|
254
254
|
scroll-intersect="color:dodgerblue"
|
|
255
|
-
scroll-
|
|
255
|
+
scroll-selector="#elements-demo-section">
|
|
256
256
|
<span
|
|
257
257
|
class="display:flex align-items:center width:fit-content"
|
|
258
258
|
hover="display:block!important"
|
|
259
|
-
hover-
|
|
259
|
+
hover-selector="[href='#elements-demo']">
|
|
260
260
|
<h2 class="padding:5px_0px">Demo</h2>
|
|
261
261
|
<a
|
|
262
262
|
class="margin-left:10px display:none"
|
|
@@ -280,9 +280,9 @@
|
|
|
280
280
|
<textarea
|
|
281
281
|
type="code"
|
|
282
282
|
lang="html"
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
283
|
+
array="demos"
|
|
284
|
+
object=""
|
|
285
|
+
key="demo"
|
|
286
286
|
save="false"
|
|
287
287
|
id="demo"
|
|
288
288
|
class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
|
|
@@ -305,7 +305,7 @@
|
|
|
305
305
|
show="#eye-slash"
|
|
306
306
|
hide="#eye, #demo-preview"
|
|
307
307
|
toggle="code-height"
|
|
308
|
-
toggle-
|
|
308
|
+
toggle-selector="#demo-code"
|
|
309
309
|
><i
|
|
310
310
|
class="height:18px fill:#505050"
|
|
311
311
|
src="/assets/svg/eye.svg"></i
|
|
@@ -317,7 +317,7 @@
|
|
|
317
317
|
show="#eye, #demo-preview"
|
|
318
318
|
hide="#eye-slash"
|
|
319
319
|
toggle="code-height"
|
|
320
|
-
toggle-
|
|
320
|
+
toggle-selector="#demo-code"
|
|
321
321
|
><i
|
|
322
322
|
class="height:20px fill:#505050"
|
|
323
323
|
src="/assets/svg/eye-slash.svg"></i
|
|
@@ -344,7 +344,7 @@
|
|
|
344
344
|
<a
|
|
345
345
|
class="margin-right:5px"
|
|
346
346
|
fullscreen
|
|
347
|
-
fullscreen-
|
|
347
|
+
fullscreen-selector="#playground"></a>
|
|
348
348
|
</div>
|
|
349
349
|
</div>
|
|
350
350
|
<!-- End SandBox -->
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocreate/elements",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.19.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",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
},
|
|
26
26
|
"scripts": {
|
|
27
27
|
"start": "npx webpack --config webpack.config.js",
|
|
28
|
-
"build": "
|
|
28
|
+
"build": "npx webpack --mode=production --config webpack.config.js",
|
|
29
29
|
"dev": "npx webpack --config webpack.config.js --watch",
|
|
30
30
|
"postinstall": "node -e \"const { execSync } = require('child_process'); try { execSync('coc --version', { stdio: 'ignore' }); } catch (error) { try { execSync('npm install -g @cocreate/cli', { stdio: 'inherit' }); console.log('Installed \"@cocreate/cli\" globally.'); } catch (error) { console.error('Failed to install \"@cocreate/cli\" globally:', error); } }\""
|
|
31
31
|
},
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"url": "git+https://github.com/CoCreate-app/CoCreate-elements.git"
|
|
35
35
|
},
|
|
36
36
|
"author": "CoCreate LLC",
|
|
37
|
-
"license": "
|
|
37
|
+
"license": "AGPL-3.0",
|
|
38
38
|
"bugs": {
|
|
39
39
|
"url": "https://github.com/CoCreate-app/CoCreate-elements/issues"
|
|
40
40
|
},
|
|
@@ -58,11 +58,11 @@
|
|
|
58
58
|
"webpack-log": "^3.0.1"
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
|
-
"@cocreate/actions": "^1.
|
|
62
|
-
"@cocreate/crud-client": "^1.
|
|
63
|
-
"@cocreate/element-prototype": "^1.
|
|
64
|
-
"@cocreate/filter": "^1.
|
|
65
|
-
"@cocreate/observer": "^1.
|
|
66
|
-
"@cocreate/utils": "^1.
|
|
61
|
+
"@cocreate/actions": "^1.9.0",
|
|
62
|
+
"@cocreate/crud-client": "^1.22.0",
|
|
63
|
+
"@cocreate/element-prototype": "^1.9.0",
|
|
64
|
+
"@cocreate/filter": "^1.20.0",
|
|
65
|
+
"@cocreate/observer": "^1.9.0",
|
|
66
|
+
"@cocreate/utils": "^1.22.0"
|
|
67
67
|
}
|
|
68
68
|
}
|
package/src/form.js
ADDED
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import Observer from '@cocreate/observer';
|
|
2
|
+
import { getAttributeNames, ObjectId } from '@cocreate/utils';
|
|
3
|
+
import Action from '@cocreate/actions';
|
|
4
|
+
import '@cocreate/element-prototype';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* @param elements
|
|
8
|
+
*/
|
|
9
|
+
function init(elements) {
|
|
10
|
+
// Returns an array of elements.
|
|
11
|
+
if (!elements)
|
|
12
|
+
elements = document.querySelectorAll('form');
|
|
13
|
+
// If elements is an array of elements returns an array of elements.
|
|
14
|
+
else if (!Array.isArray(elements))
|
|
15
|
+
elements = [elements]
|
|
16
|
+
for (let element of elements) {
|
|
17
|
+
runObjectId(element);
|
|
18
|
+
setAttribute(element);
|
|
19
|
+
disableAutoFill(element);
|
|
20
|
+
// element.setData = () => { }
|
|
21
|
+
// element.getData = () => getFormData(element)
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* @param form
|
|
27
|
+
*/
|
|
28
|
+
function runObjectId(form) {
|
|
29
|
+
let elements = form.querySelectorAll("[object='ObjectId()']")
|
|
30
|
+
let arrays = []
|
|
31
|
+
// Add a array to the array list
|
|
32
|
+
for (let i = 0; i < elements.length; i++) {
|
|
33
|
+
elements[i].setAttribute('object', '')
|
|
34
|
+
let array = elements[i].getAttribute('array')
|
|
35
|
+
// Add a array to the array list.
|
|
36
|
+
if (array && !arrays.includes(array))
|
|
37
|
+
arrays.push(array)
|
|
38
|
+
|
|
39
|
+
}
|
|
40
|
+
// Sets the object id for each array in the array.
|
|
41
|
+
for (let i = 0; i < arrays.length; i++) {
|
|
42
|
+
// TODO: needs access to setTypeValue
|
|
43
|
+
setTypeValue(form, { array: arrays[i], object: [{ _id: ObjectId() }] });
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* @param form
|
|
49
|
+
*/
|
|
50
|
+
function setAttribute(form) {
|
|
51
|
+
let elements = form.querySelectorAll('[key]');
|
|
52
|
+
|
|
53
|
+
for (let attribute of form.attributes) {
|
|
54
|
+
let variable = window.CoCreateConfig.attributes[attribute.name]
|
|
55
|
+
|
|
56
|
+
// Set the attribute of all elements in the variable
|
|
57
|
+
if (variable) {
|
|
58
|
+
for (let el of elements) {
|
|
59
|
+
// Set the value of the attribute.
|
|
60
|
+
if (!el.getAttribute(attribute.name)) {
|
|
61
|
+
el.setAttribute(attribute.name, attribute.value);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* @param element
|
|
70
|
+
*/
|
|
71
|
+
function disableAutoFill(element) {
|
|
72
|
+
// Clear the text area and set the autocomplete attribute to off.
|
|
73
|
+
if (element.tagName == "TEXTAREA") {
|
|
74
|
+
element.value = "";
|
|
75
|
+
element.setAttribute("autocomplete", "off");
|
|
76
|
+
}
|
|
77
|
+
// Set the autocomplete attribute to off.
|
|
78
|
+
if (!element.hasAttribute("autocomplete")) {
|
|
79
|
+
element.setAttribute('autocomplete', "off");
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* @param btn
|
|
85
|
+
*/
|
|
86
|
+
function reset(btn) {
|
|
87
|
+
const form = btn.closest("form");
|
|
88
|
+
let formElements = new Map();
|
|
89
|
+
for (let element of form) {
|
|
90
|
+
formElements.set(element, '')
|
|
91
|
+
// Set object attribute to object if it exists
|
|
92
|
+
if (element.hasAttribute('object'))
|
|
93
|
+
element.setAttribute('object', '');
|
|
94
|
+
// If the element is a button and has a button with the same key, set the value to the value of the button.
|
|
95
|
+
if (!['BUTTON'].includes(element.tagName))
|
|
96
|
+
element.setValue('')
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
let elements = form.querySelectorAll('[object], [key]');
|
|
100
|
+
for (let element of elements) {
|
|
101
|
+
// Set the object id attribute of the element to the object id if it has not yet been set.
|
|
102
|
+
if (!formElements.has(element)) {
|
|
103
|
+
// Set object attribute to object if it exists
|
|
104
|
+
if (element.hasAttribute('object'))
|
|
105
|
+
element.setAttribute('object', '');
|
|
106
|
+
element.setValue('')
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
form.reset();
|
|
111
|
+
// dispatch input event to rest filter??
|
|
112
|
+
document.dispatchEvent(new CustomEvent('reset', {
|
|
113
|
+
detail: {}
|
|
114
|
+
}));
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
Observer.init({
|
|
118
|
+
name: 'CoCreateForm',
|
|
119
|
+
observe: ['addedNodes'],
|
|
120
|
+
target: 'form',
|
|
121
|
+
callback: mutation => init(mutation.target)
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
Observer.init({
|
|
125
|
+
name: 'CoCreateForm',
|
|
126
|
+
observe: ['attributes'],
|
|
127
|
+
attributeName: getAttributeNames(['storage', 'database', 'array', 'object', 'index']),
|
|
128
|
+
target: 'form',
|
|
129
|
+
callback: mutation => mutation.target.tagName === "FORM" &&
|
|
130
|
+
setAttribute(mutation.target)
|
|
131
|
+
});
|
|
132
|
+
|
|
133
|
+
Action.init({
|
|
134
|
+
name: "reset",
|
|
135
|
+
endEvent: "reset",
|
|
136
|
+
callback: (action) => {
|
|
137
|
+
reset(action.element);
|
|
138
|
+
}
|
|
139
|
+
});
|
|
140
|
+
|
|
141
|
+
init();
|
|
142
|
+
|
|
143
|
+
export default { reset };
|