@cocreate/resize 1.13.0 → 1.14.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 +19 -0
- package/demo/dashboard.html +451 -452
- package/package.json +1 -1
- package/src/index.js +48 -31
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,22 @@
|
|
|
1
|
+
# [1.14.0](https://github.com/CoCreate-app/CoCreate-resize/compare/v1.13.1...v1.14.0) (2025-04-11)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* update observer obseve param to type and and attributeName to attributeFilter ([1bb5e14](https://github.com/CoCreate-app/CoCreate-resize/commit/1bb5e14ae342a0e836bce36551bb4b80c4cd9cba))
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* auto height handling for select fields ([11a7bc9](https://github.com/CoCreate-app/CoCreate-resize/commit/11a7bc9b6832361dcc50910ee742693ef9606fbd))
|
|
12
|
+
|
|
13
|
+
## [1.13.1](https://github.com/CoCreate-app/CoCreate-resize/compare/v1.13.0...v1.13.1) (2025-01-18)
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
|
|
18
|
+
* update filter-query-key ([572a619](https://github.com/CoCreate-app/CoCreate-resize/commit/572a6194d8faaa45617dad046004e0a1139d0058))
|
|
19
|
+
|
|
1
20
|
# [1.13.0](https://github.com/CoCreate-app/CoCreate-resize/compare/v1.12.0...v1.13.0) (2024-12-14)
|
|
2
21
|
|
|
3
22
|
|
package/demo/dashboard.html
CHANGED
|
@@ -1,472 +1,471 @@
|
|
|
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
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
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
|
+
<link
|
|
8
|
+
rel="icon"
|
|
9
|
+
type="image/png"
|
|
10
|
+
sizes="32x32"
|
|
11
|
+
href="../assets/favicon.ico" />
|
|
12
|
+
<title>Dashboard | CoCreate</title>
|
|
13
|
+
<link
|
|
14
|
+
rel="stylesheet"
|
|
15
|
+
href="../index.css"
|
|
16
|
+
array="files"
|
|
17
|
+
object="637bc8fe91249e639db315d9"
|
|
18
|
+
key="src"
|
|
19
|
+
type="text/css" />
|
|
20
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
21
|
+
</head>
|
|
22
|
+
<style>
|
|
23
|
+
.progressbar {
|
|
24
|
+
flex-grow: 1;
|
|
25
|
+
height: 4px;
|
|
26
|
+
border: none;
|
|
27
|
+
position: relative;
|
|
28
|
+
background-color: rgb(194, 240, 253);
|
|
29
|
+
overflow: hidden;
|
|
30
|
+
}
|
|
31
31
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
32
|
+
.progressbar > div {
|
|
33
|
+
position: absolute;
|
|
34
|
+
top: 0;
|
|
35
|
+
left: 0;
|
|
36
|
+
width: 100%;
|
|
37
|
+
bottom: 0;
|
|
38
|
+
transform-origin: left;
|
|
39
|
+
transition: transform 0.4s linear;
|
|
40
|
+
background-color: #61dafb;
|
|
41
|
+
}
|
|
42
42
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
43
|
+
.floating-label {
|
|
44
|
+
margin-top: 0px !important;
|
|
45
|
+
margin-bottom: 0px !important;
|
|
46
|
+
}
|
|
47
47
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
.main-height {
|
|
49
|
+
height: calc(100vh - 30px);
|
|
50
|
+
}
|
|
51
51
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
52
|
+
.progressbar-text {
|
|
53
|
+
color: #121212;
|
|
54
|
+
font-weight: bolder;
|
|
55
|
+
}
|
|
56
|
+
</style>
|
|
57
57
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
<body>
|
|
59
|
+
<!-- Modal Viewport -->
|
|
60
|
+
<div id="modal-viewport" hidden></div>
|
|
61
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
|
-
|
|
62
|
+
<!-- Navbar -->
|
|
63
|
+
<nav
|
|
64
|
+
class="nav display:flex align-items:center background:whitesmoke"
|
|
65
|
+
content_id="content"
|
|
66
|
+
scroll="sticky-nav, hide-nav"
|
|
67
|
+
scroll-up="5"
|
|
68
|
+
scroll-down="5">
|
|
69
|
+
<!-- Horizontal Scroll Nav/Tabs -->
|
|
70
|
+
<ul
|
|
71
|
+
class="display:inline-flex direction:rtl overflow:auto font-size:20px align-items:center list-style-type:none width:100% height:50px">
|
|
72
|
+
<!-- Modal Controls -->
|
|
73
|
+
<li class="margin-right:15px">
|
|
74
|
+
<a actions="closeModal"
|
|
75
|
+
><i class="height:18px" src="/assets/svg/times.svg"></i
|
|
76
|
+
></a>
|
|
77
|
+
</li>
|
|
78
|
+
<li class="margin-right:15px">
|
|
79
|
+
<a actions="minMaxModal">
|
|
80
|
+
<i
|
|
81
|
+
toggle="/assets/svg/window-restore.svg, /assets/svg/window-maximize.svg"
|
|
82
|
+
toggle-attribute="src"
|
|
83
|
+
class="height:18px"
|
|
84
|
+
src="/assets/svg/window-maximize.svg"></i>
|
|
85
|
+
</a>
|
|
86
|
+
</li>
|
|
87
|
+
<li class="margin-right:15px">
|
|
88
|
+
<a actions="parkModal"
|
|
89
|
+
><i
|
|
90
|
+
class="height:18px"
|
|
91
|
+
src="/assets/svg/window-minimize.svg"></i
|
|
92
|
+
></a>
|
|
93
|
+
</li>
|
|
94
94
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
95
|
+
<!-- fullscreen toogle and icon transform-->
|
|
96
|
+
<li class="margin-right:15px">
|
|
97
|
+
<a fullscreen>
|
|
98
|
+
<i class="height:18px" src="/assets/svg/expand.svg"></i>
|
|
99
|
+
<i
|
|
100
|
+
class="height:18px"
|
|
101
|
+
src="/assets/svg/compress.svg"></i>
|
|
102
|
+
</a>
|
|
103
|
+
</li>
|
|
104
104
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
105
|
+
<!-- Render Module Form -->
|
|
106
|
+
<li class="margin-right:15px">
|
|
107
|
+
<a
|
|
108
|
+
actions="state, openModal"
|
|
109
|
+
modal-src="../modules/form.html"
|
|
110
|
+
modal-width="320px">
|
|
111
|
+
<i class="height:18px" src="/assets/svg/cog.svg"></i>
|
|
112
|
+
<div
|
|
113
|
+
state_id="module-form"
|
|
114
|
+
state-array="modules"
|
|
115
|
+
state-object=""
|
|
116
|
+
state_to="form-fields"></div>
|
|
117
|
+
<div
|
|
118
|
+
state_id="datatable"
|
|
119
|
+
state-filter-query-value=""
|
|
120
|
+
state_to="module_id"></div>
|
|
121
|
+
</a>
|
|
122
|
+
</li>
|
|
123
123
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
124
|
+
<!-- Render Code Editor -->
|
|
125
|
+
<li class="margin-right:15px">
|
|
126
|
+
<a
|
|
127
|
+
actions="state, openModal"
|
|
128
|
+
modal-src="../code-editor/index.html">
|
|
129
|
+
<i class="height:18px" src="/assets/svg/code.svg"></i>
|
|
130
|
+
<div
|
|
131
|
+
state_id="render"
|
|
132
|
+
state-array=""
|
|
133
|
+
state-object=""
|
|
134
|
+
state-key=""
|
|
135
|
+
state_to="code-editor"></div>
|
|
136
|
+
</a>
|
|
137
|
+
</li>
|
|
138
138
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
139
|
+
<!-- Render Builder -->
|
|
140
|
+
<li class="margin-right:15px">
|
|
141
|
+
<a
|
|
142
|
+
actions="state, openModal"
|
|
143
|
+
modal-src="../builder/index.html">
|
|
144
|
+
<i
|
|
145
|
+
class="height:18px"
|
|
146
|
+
src="/assets/svg/palette.svg"></i>
|
|
147
|
+
<div
|
|
148
|
+
state_id="render"
|
|
149
|
+
state-array=""
|
|
150
|
+
state-object=""
|
|
151
|
+
state-key=""
|
|
152
|
+
state_to="builder"></div>
|
|
153
|
+
</a>
|
|
154
|
+
</li>
|
|
155
155
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
156
|
+
<!-- deleteDocument-->
|
|
157
|
+
<li class="margin-right:15px">
|
|
158
|
+
<a
|
|
159
|
+
actions="deleteDocument, closeModal"
|
|
160
|
+
array=""
|
|
161
|
+
object=""
|
|
162
|
+
state_id="form-fields">
|
|
163
|
+
<i
|
|
164
|
+
class="height:18px"
|
|
165
|
+
src="/assets/svg/trash-alt.svg"></i>
|
|
166
|
+
</a>
|
|
167
|
+
</li>
|
|
168
|
+
</ul>
|
|
169
|
+
</nav>
|
|
170
170
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
171
|
+
<!-- SideNav -->
|
|
172
|
+
<sidenav
|
|
173
|
+
id="menuL"
|
|
174
|
+
class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:50px width:275px:hover width:0px@xs"
|
|
175
|
+
resizable
|
|
176
|
+
resize-selector="[content_id='content']"
|
|
177
|
+
resize-property="margin-left"
|
|
178
|
+
resize-value="width">
|
|
179
|
+
<!-- Search -->
|
|
180
|
+
<form class="padding:5px">
|
|
181
|
+
<input type="text" class="floating-label" state_to="results" />
|
|
182
|
+
<span
|
|
183
|
+
class="position:relative bottom:29px right:11px float:right font-size:18px">
|
|
184
|
+
<a
|
|
185
|
+
actions="state, openModal"
|
|
186
|
+
state_to="render"
|
|
187
|
+
array="website-pages"
|
|
188
|
+
object=""
|
|
189
|
+
state-key="src"
|
|
190
|
+
modal-width="900px"
|
|
191
|
+
modal-color="#229954">
|
|
192
|
+
<i src="/assets/svg/search.svg"></i>
|
|
193
|
+
</a>
|
|
194
|
+
</span>
|
|
195
|
+
</form>
|
|
196
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
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
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
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
</ul>
|
|
197
|
+
<div class="padding-right:5px padding-bottom:5px">
|
|
198
|
+
<!-- Fetch and Render-->
|
|
199
|
+
<ul
|
|
200
|
+
class="overflow:auto display:flex flex-direction:column width:100% height:calc(100vh_-_160px) bottom:10px margin-right:5px">
|
|
201
|
+
<div
|
|
202
|
+
array="modules"
|
|
203
|
+
filter-sort-key="main-menu-position"
|
|
204
|
+
filter-sort-direction="asc"
|
|
205
|
+
filter-query-key="main-menu-position"
|
|
206
|
+
filter-query-value="0"
|
|
207
|
+
filter-value-type="number"
|
|
208
|
+
render-selector="[template]">
|
|
209
|
+
<!-- Template -->
|
|
210
|
+
<li
|
|
211
|
+
template
|
|
212
|
+
class="line-height:40px height:40px overflow:hidden background:dodgerblue:hover"
|
|
213
|
+
object="{{object._id}}">
|
|
214
|
+
<input
|
|
215
|
+
type="hidden"
|
|
216
|
+
array="files"
|
|
217
|
+
object="{{object.main-menu-primary}}"
|
|
218
|
+
key="path"
|
|
219
|
+
input-selector="#a{{object._id}}"
|
|
220
|
+
input-key="primary-url" />
|
|
221
|
+
<a
|
|
222
|
+
actions="state, openModal"
|
|
223
|
+
id="a{{object._id}}"
|
|
224
|
+
href="..{{primary-url}}"
|
|
225
|
+
modal-width="{{object.main-modal-primary-width}}"
|
|
226
|
+
modal-color="{{object.main-modal-color}}"
|
|
227
|
+
class="display:inline-block">
|
|
228
|
+
<span
|
|
229
|
+
class="display:inline-block width:50px text-align:center"
|
|
230
|
+
object="{{object._id}}"
|
|
231
|
+
array="modules"
|
|
232
|
+
key="icon"
|
|
233
|
+
value="icon"></span>
|
|
234
|
+
<span
|
|
235
|
+
array="modules"
|
|
236
|
+
object="{{object._id}}"
|
|
237
|
+
key="name"></span>
|
|
238
|
+
<div
|
|
239
|
+
state-array="module_activities"
|
|
240
|
+
state-filter-query-key="module_id"
|
|
241
|
+
state-filter-value="{{object._id}}"
|
|
242
|
+
state_to="datatable"></div>
|
|
243
|
+
<div
|
|
244
|
+
state-array="module_activities"
|
|
245
|
+
state-value="{{object._id}}"
|
|
246
|
+
state_to="module_id"></div>
|
|
247
|
+
<div
|
|
248
|
+
state-array="files"
|
|
249
|
+
state-object="{{object.main-menu-secondary}}"
|
|
250
|
+
state-key="src"
|
|
251
|
+
state_to="form"></div>
|
|
252
|
+
<div
|
|
253
|
+
state-array="files"
|
|
254
|
+
state-object="{{object.main-menu-primary}}"
|
|
255
|
+
state-key="src"
|
|
256
|
+
state_to="render"></div>
|
|
257
|
+
<div
|
|
258
|
+
state-value="{{object._id}}"
|
|
259
|
+
state-filter-value="{{object._id}}"
|
|
260
|
+
state_to="module-form"></div>
|
|
261
|
+
</a>
|
|
262
|
+
<div
|
|
263
|
+
class="float:right width:50px text-align:center">
|
|
264
|
+
<input
|
|
265
|
+
type="hidden"
|
|
266
|
+
array="files"
|
|
267
|
+
object="{{object.main-menu-secondary}}"
|
|
268
|
+
key="path"
|
|
269
|
+
input-selector="#a{{object._id}}"
|
|
270
|
+
input-key="secondary-url" />
|
|
271
|
+
<a
|
|
272
|
+
actions="state, openModal"
|
|
273
|
+
id="a1{{object._id}}"
|
|
274
|
+
href="..{{secondary-url}}"
|
|
275
|
+
modal-width="{{object.main-menu-secondary-width}}"
|
|
276
|
+
modal-color="{{object.main-menu-secondary-color}}">
|
|
277
|
+
<i
|
|
278
|
+
class="height:16px"
|
|
279
|
+
src="/assets/svg/plus.svg"></i>
|
|
280
|
+
<div
|
|
281
|
+
state-value="{{object._id}}"
|
|
282
|
+
state-filter-value="{{object._id}}"
|
|
283
|
+
state_to="module_id"></div>
|
|
284
|
+
<div
|
|
285
|
+
state-array="files"
|
|
286
|
+
state-object="{{object.main-menu-secondary}}"
|
|
287
|
+
state-key="src"
|
|
288
|
+
state_to="render"></div>
|
|
289
|
+
<div
|
|
290
|
+
state-object="{{object._id}}"
|
|
291
|
+
state_to="module-form"></div>
|
|
292
|
+
<div
|
|
293
|
+
state_to="form-fields"
|
|
294
|
+
state-object=""></div>
|
|
295
|
+
</a>
|
|
296
|
+
</div>
|
|
297
|
+
</li>
|
|
298
|
+
</div>
|
|
299
|
+
</ul>
|
|
301
300
|
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
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
|
-
|
|
388
|
-
|
|
389
|
-
|
|
301
|
+
<!-- sidenav Footer -->
|
|
302
|
+
<div
|
|
303
|
+
class="display:flex justify-content:space-between flex-wrap:wrap position:absolute bottom:0px background:gainsboro line-height:40px height:40px width:100% overflow:hidden">
|
|
304
|
+
<a
|
|
305
|
+
actions="state, openModal"
|
|
306
|
+
modal-src="../admin/settings/index.html"
|
|
307
|
+
modal-width="275px"
|
|
308
|
+
modal-color="#229954"
|
|
309
|
+
modal-x="0"
|
|
310
|
+
modal-y="0"
|
|
311
|
+
class="width:50px text-align:center display:inline-block">
|
|
312
|
+
<span class="padding:10px width:50px text-align:center"
|
|
313
|
+
><i
|
|
314
|
+
class="height:16px"
|
|
315
|
+
src="/assets/svg/cogs.svg"></i
|
|
316
|
+
></span>
|
|
317
|
+
<div
|
|
318
|
+
state-array="files"
|
|
319
|
+
state-object="60ddfdc014b5ab0c2dd2fe18"
|
|
320
|
+
state-key="src"
|
|
321
|
+
state_to="render"></div>
|
|
322
|
+
</a>
|
|
323
|
+
<a
|
|
324
|
+
actions="state, openModal"
|
|
325
|
+
modal-src="../admin/modules/datatable.html"
|
|
326
|
+
modal-width="640px"
|
|
327
|
+
modal-color="#229954"
|
|
328
|
+
class="width:50px text-align:center display:inline-block">
|
|
329
|
+
<span class="padding:10px width:50px text-align:center"
|
|
330
|
+
><i
|
|
331
|
+
class="height:16px"
|
|
332
|
+
src="/assets/svg/project-diagram.svg"></i
|
|
333
|
+
></span>
|
|
334
|
+
<div
|
|
335
|
+
state-array="files"
|
|
336
|
+
state-object="60ddfdbf14b5ab0c2dd2fe08"
|
|
337
|
+
state-key="src"
|
|
338
|
+
state_to="render"></div>
|
|
339
|
+
</a>
|
|
340
|
+
<a
|
|
341
|
+
actions="state, openModal"
|
|
342
|
+
modal-src="../admin/module-views/datatable.html"
|
|
343
|
+
modal-width="640px"
|
|
344
|
+
modal-color="#229954"
|
|
345
|
+
class="width:50px text-align:center display:inline-block">
|
|
346
|
+
<span class="padding:10px width:50px text-align:center"
|
|
347
|
+
><i
|
|
348
|
+
class="height:16px"
|
|
349
|
+
src="/assets/svg/shapes.svg"></i
|
|
350
|
+
></span>
|
|
351
|
+
<div
|
|
352
|
+
state-array="files"
|
|
353
|
+
state-object="60ddfdc014b5ab0c2dd2fe0b"
|
|
354
|
+
state-key="src"
|
|
355
|
+
state_to="render"></div>
|
|
356
|
+
</a>
|
|
357
|
+
<a
|
|
358
|
+
actions="state, openModal"
|
|
359
|
+
modal-src="../admin/files/datatable.html"
|
|
360
|
+
modal-width="640px"
|
|
361
|
+
modal-color="#229954"
|
|
362
|
+
class="width:50px text-align:center display:inline-block">
|
|
363
|
+
<span class="padding:10px width:50px text-align:center"
|
|
364
|
+
><i
|
|
365
|
+
class="height:16px"
|
|
366
|
+
src="/assets/svg/folder.svg"></i
|
|
367
|
+
></span>
|
|
368
|
+
<div
|
|
369
|
+
state-array="files"
|
|
370
|
+
state-object="60ddfdc014b5ab0c2dd2fe15"
|
|
371
|
+
state-key="src"
|
|
372
|
+
state_to="render"></div>
|
|
373
|
+
</a>
|
|
374
|
+
<a
|
|
375
|
+
actions="logout"
|
|
376
|
+
href="./signin.html"
|
|
377
|
+
state_to
|
|
378
|
+
class="width:50px text-align:center display:inline-block">
|
|
379
|
+
<span class="padding:10px width:50px text-align:center"
|
|
380
|
+
><i
|
|
381
|
+
class="height:16px"
|
|
382
|
+
src="/assets/svg/sign-out-alt.svg"></i
|
|
383
|
+
></span>
|
|
384
|
+
</a>
|
|
385
|
+
</div>
|
|
386
|
+
</div>
|
|
387
|
+
<div resize="right"></div>
|
|
388
|
+
</sidenav>
|
|
390
389
|
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
390
|
+
<!-- Main Content -->
|
|
391
|
+
<main class="padding:10px" content_id="content">
|
|
392
|
+
<div
|
|
393
|
+
class="display:grid grid-auto-rows:50px gap:10px grid-template-columns:repeat(auto-fill,minmax(50px,1fr))"
|
|
394
|
+
dnd-group-key="dashboard"
|
|
395
|
+
array="files"
|
|
396
|
+
filter-limit="20"
|
|
397
|
+
render-selector="[template]"
|
|
398
|
+
droppable="true">
|
|
399
|
+
<div
|
|
400
|
+
template
|
|
401
|
+
class="card position:relative template display:flex padding:20px align-items:center grid-column-end:span_6 grid-row-end:span_2"
|
|
402
|
+
eid="id1"
|
|
403
|
+
draggable="tru"
|
|
404
|
+
resizable>
|
|
405
|
+
<!-- dashboard template-->
|
|
406
|
+
<div class="flex-grow:1 padding-right:20px">
|
|
407
|
+
<h2 key="name">Visits</h2>
|
|
408
|
+
<p key="description">Total visits today</p>
|
|
409
|
+
<div class="display:flex align-items:center">
|
|
410
|
+
<h2>
|
|
411
|
+
$<span
|
|
412
|
+
array=""
|
|
413
|
+
object
|
|
414
|
+
filter-query-key="total"
|
|
415
|
+
chart-operator="sum"
|
|
416
|
+
>4000</span
|
|
417
|
+
>
|
|
418
|
+
</h2>
|
|
419
|
+
<div
|
|
420
|
+
filter-query-key="status"
|
|
421
|
+
filter-query-value="completed"></div>
|
|
422
|
+
<!--<i class="fas fa-chart-line color:green font-size:16px padding:0px_15px"></i>-->
|
|
423
|
+
<span
|
|
424
|
+
class="cocreate-badge background:green round font-size:12px"
|
|
425
|
+
>7%</span
|
|
426
|
+
>
|
|
427
|
+
</div>
|
|
428
|
+
<a href="#">Detail</a>
|
|
429
|
+
</div>
|
|
430
|
+
<div class="width:120px">
|
|
431
|
+
<div
|
|
432
|
+
class="progressbar-circle text-align:center width:100%"
|
|
433
|
+
progressbar-color="#22CCE2"
|
|
434
|
+
percent-value="85"
|
|
435
|
+
percent-note="New Visits"></div>
|
|
436
|
+
</div>
|
|
437
|
+
<div resize="top" dnd-exclude></div>
|
|
438
|
+
<div resize="bottom" dnd-exclude></div>
|
|
439
|
+
<div resize="left" dnd-exclude></div>
|
|
440
|
+
<div resize="right" dnd-exclude></div>
|
|
441
|
+
</div>
|
|
442
|
+
</div>
|
|
444
443
|
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
444
|
+
<button
|
|
445
|
+
class="position:absolute bottom:15px right:15px line-height:50px width:50px 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)">
|
|
446
|
+
<a
|
|
447
|
+
actions="state, openModal"
|
|
448
|
+
modal-src="./form.html"
|
|
449
|
+
modal-width="320px"
|
|
450
|
+
modal-color="#229954">
|
|
451
|
+
<i src="/assets/svg/plus.svg"></i>
|
|
452
|
+
<div state_to="form-fields" state-object=""></div>
|
|
453
|
+
<div
|
|
454
|
+
state_id="module-form"
|
|
455
|
+
state-value=""
|
|
456
|
+
state-filter-query-value=""
|
|
457
|
+
state_to="module_id"></div>
|
|
458
|
+
<div
|
|
459
|
+
state_id="form"
|
|
460
|
+
state-array=""
|
|
461
|
+
state-object=""
|
|
462
|
+
state-key=""
|
|
463
|
+
state_to="render"></div>
|
|
464
|
+
</a>
|
|
465
|
+
</button>
|
|
466
|
+
</main>
|
|
468
467
|
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
468
|
+
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
|
|
469
|
+
<!-- <script src="https://CoCreate.app/dist/CoCreate.js"></script> -->
|
|
470
|
+
</body>
|
|
472
471
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocreate/resize",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.14.0",
|
|
4
4
|
"description": "A light weight resize handler make any element resizable by adding data attributes or usinng init object. Great for Customized text box or text area.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"resize",
|
package/src/index.js
CHANGED
|
@@ -599,19 +599,24 @@ CoCreateResize.prototype = {
|
|
|
599
599
|
|
|
600
600
|
// Function to auto-resize the element based on its content
|
|
601
601
|
function autoResizeElement(element) {
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
602
|
+
if (!element) return;
|
|
603
|
+
|
|
604
|
+
if (element.tagName === "TEXTAREA") {
|
|
605
|
+
element.style.height = "auto";
|
|
606
|
+
|
|
607
|
+
let scrollHeight;
|
|
608
|
+
if (element.contentDocument) {
|
|
609
|
+
scrollHeight = element.contentDocument.body.scrollHeight;
|
|
610
|
+
} else {
|
|
611
|
+
// For other elements, get scrollHeight directly
|
|
612
|
+
scrollHeight = element.scrollHeight;
|
|
613
|
+
}
|
|
612
614
|
|
|
613
|
-
|
|
614
|
-
|
|
615
|
+
// Set the height of the element to the calculated scrollHeight
|
|
616
|
+
element.style.height = scrollHeight + "px";
|
|
617
|
+
} else if (element.tagName === "SELECT" && element.multiple) {
|
|
618
|
+
element.size = Math.max(element.options.length, 1); // Ensure at least 1 visible option
|
|
619
|
+
}
|
|
615
620
|
}
|
|
616
621
|
|
|
617
622
|
// Observe the resize of the element
|
|
@@ -630,9 +635,9 @@ function initAutoHeight(element) {
|
|
|
630
635
|
!(element instanceof HTMLCollection) &&
|
|
631
636
|
!(element instanceof NodeList) &&
|
|
632
637
|
!Array.isArray(element)
|
|
633
|
-
)
|
|
638
|
+
) {
|
|
634
639
|
element = [element];
|
|
635
|
-
else if (!element) {
|
|
640
|
+
} else if (!element) {
|
|
636
641
|
element = document.querySelectorAll('[height="auto"]');
|
|
637
642
|
|
|
638
643
|
// Add event listener for iframes on load
|
|
@@ -647,25 +652,28 @@ function initAutoHeight(element) {
|
|
|
647
652
|
false
|
|
648
653
|
);
|
|
649
654
|
|
|
650
|
-
if (element.contentDocument) {
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
}
|
|
655
|
+
// if (element.contentDocument) {
|
|
656
|
+
// // Create a MutationObserver for changes within the iframe's body
|
|
657
|
+
// const observer = new MutationObserver(autoResizeElement);
|
|
658
|
+
// observer.observe(iframeDocument.body, {
|
|
659
|
+
// childList: true,
|
|
660
|
+
// subtree: true
|
|
661
|
+
// });
|
|
662
|
+
|
|
663
|
+
// // Handle iframe document changes (e.g., if src or srcdoc is modified)
|
|
664
|
+
// element.addEventListener("load", () => {
|
|
665
|
+
// observer.disconnect(); // Disconnect the previous observer
|
|
666
|
+
// observeIframeContent(); // Reinitialize the observer on new document
|
|
667
|
+
// });
|
|
668
|
+
// }
|
|
664
669
|
}
|
|
665
670
|
|
|
666
671
|
for (let i = 0; i < element.length; i++) {
|
|
672
|
+
if (element[i].tagName === "TEXTAREA") {
|
|
673
|
+
element[i].rows = 1;
|
|
674
|
+
}
|
|
667
675
|
autoResizeElement(element[i]);
|
|
668
|
-
observeElementResize(element[i]); // Observe resize changes
|
|
676
|
+
observeElementResize(element[i]); // Observe resize changes.
|
|
669
677
|
}
|
|
670
678
|
}
|
|
671
679
|
|
|
@@ -673,7 +681,7 @@ initAutoHeight();
|
|
|
673
681
|
|
|
674
682
|
observer.init({
|
|
675
683
|
name: "CoCreateResize",
|
|
676
|
-
|
|
684
|
+
types: ["addedNodes"],
|
|
677
685
|
selector: "[resizable]:not([resizable='false'])",
|
|
678
686
|
callback: function (mutation) {
|
|
679
687
|
coCreateResize.initElement(mutation.target);
|
|
@@ -682,13 +690,22 @@ observer.init({
|
|
|
682
690
|
|
|
683
691
|
observer.init({
|
|
684
692
|
name: "CoCreateResize",
|
|
685
|
-
|
|
693
|
+
types: ["addedNodes"],
|
|
686
694
|
selector: "[height='auto']",
|
|
687
695
|
callback: function (mutation) {
|
|
688
696
|
initAutoHeight(mutation.target);
|
|
689
697
|
}
|
|
690
698
|
});
|
|
691
699
|
|
|
700
|
+
observer.init({
|
|
701
|
+
name: "CoCreateResize",
|
|
702
|
+
types: ["addedNodes"],
|
|
703
|
+
selector: "[height='auto'] option",
|
|
704
|
+
callback: function (mutation) {
|
|
705
|
+
autoResizeElement(mutation.target.parentElement);
|
|
706
|
+
}
|
|
707
|
+
});
|
|
708
|
+
|
|
692
709
|
coCreateResize.init({
|
|
693
710
|
selector: "[resizable]:not([resizable='false'])",
|
|
694
711
|
dragLeft: "[resize='left']",
|