@cocreate/resize 1.11.2 → 1.12.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 +15 -0
- package/docs/index.html +327 -327
- package/package.json +1 -1
- package/prettier.config.js +16 -0
- package/src/index.js +70 -69
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,18 @@
|
|
|
1
|
+
# [1.12.0](https://github.com/CoCreate-app/CoCreate-resize/compare/v1.11.2...v1.12.0) (2024-11-04)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* nested find html[contenteditable] ([19ca15d](https://github.com/CoCreate-app/CoCreate-resize/commit/19ca15d92dbf75bef926dbeaffd8639b505fd2f1))
|
|
7
|
+
* pretier.config.js and file formating ([12245ee](https://github.com/CoCreate-app/CoCreate-resize/commit/12245ee48c2c8812c8295c4997b2ceb68e76c771))
|
|
8
|
+
* replaced startLeft With startRight when resizing left ([e8dd32f](https://github.com/CoCreate-app/CoCreate-resize/commit/e8dd32f51edad4859cae1a5f2798bfa9dbf47587))
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* add prettier.config.js and format files ([c7f023d](https://github.com/CoCreate-app/CoCreate-resize/commit/c7f023d0d1b203a9629104e7cadc9dbe4502a6f0))
|
|
14
|
+
* add prettier.config.js and format files ([653bad3](https://github.com/CoCreate-app/CoCreate-resize/commit/653bad30911ff4c2091fa64dece719a85451b697))
|
|
15
|
+
|
|
1
16
|
## [1.11.2](https://github.com/CoCreate-app/CoCreate-resize/compare/v1.11.1...v1.11.2) (2024-06-12)
|
|
2
17
|
|
|
3
18
|
|
package/docs/index.html
CHANGED
|
@@ -1,341 +1,341 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<title>CoCreate-resize Documentation | CoCreateJS</title>
|
|
8
|
+
<link
|
|
9
|
+
rel="icon"
|
|
10
|
+
type="image/png"
|
|
11
|
+
sizes="32x32"
|
|
12
|
+
href="https://cocreate.app/images/favicon.ico"
|
|
13
|
+
/>
|
|
14
|
+
<meta
|
|
15
|
+
name="description"
|
|
16
|
+
content="A light weight resize handler make any element resizable by adding data attributes or usinng init object. Great for Customized text box or text area."
|
|
17
|
+
/>
|
|
18
|
+
<meta
|
|
19
|
+
name="keywords"
|
|
20
|
+
content="helper classes, utility classes, css framework, css library, inline style classes"
|
|
21
|
+
/>
|
|
22
|
+
<meta name="robots" content="index,follow" />
|
|
23
|
+
<meta
|
|
24
|
+
property="og:image"
|
|
25
|
+
content="https://cdn.cocreate.app/docs/resize.png"
|
|
26
|
+
/>
|
|
23
27
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
28
|
+
<link
|
|
29
|
+
rel="stylesheet"
|
|
30
|
+
href="../index.css"
|
|
31
|
+
array="files"
|
|
32
|
+
object="60888216117c640e7596303f"
|
|
33
|
+
key="src"
|
|
34
|
+
type="text/css"
|
|
35
|
+
save="true"
|
|
36
|
+
/>
|
|
37
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
38
|
+
</head>
|
|
34
39
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
share-network="share"
|
|
102
|
-
title="Share on share"
|
|
103
|
-
><i src="/assets/svg/share-alt.svg"></i
|
|
104
|
-
></a>
|
|
105
|
-
</div>
|
|
106
|
-
<a
|
|
107
|
-
href="https://github.com/CoCreate-app/CoCreate-resize"
|
|
108
|
-
target="_blank"
|
|
109
|
-
class="margin-right:15px"
|
|
110
|
-
><i src="/assets/svg/github.svg"></i
|
|
111
|
-
></a>
|
|
112
|
-
</div>
|
|
40
|
+
<body>
|
|
41
|
+
<!-- Navbar -->
|
|
42
|
+
<nav
|
|
43
|
+
class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px"
|
|
44
|
+
content_id="content"
|
|
45
|
+
scroll="sticky-nav,"
|
|
46
|
+
scroll-up="5"
|
|
47
|
+
scroll-down="5"
|
|
48
|
+
path="../"
|
|
49
|
+
src="../components/navbar.html"
|
|
50
|
+
></nav>
|
|
51
|
+
<sidenav
|
|
52
|
+
id="menuL"
|
|
53
|
+
class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
|
|
54
|
+
resizable
|
|
55
|
+
resize-selector="[content_id='content']"
|
|
56
|
+
resize-property="margin-left"
|
|
57
|
+
resize-value="width"
|
|
58
|
+
>
|
|
59
|
+
<menu array="files" object="603717b07de7fb350ae9fec8" key="src"></menu>
|
|
60
|
+
<div resize="right"></div>
|
|
61
|
+
</sidenav>
|
|
62
|
+
<main
|
|
63
|
+
class="padding-top:15px padding:15px@lg@xl"
|
|
64
|
+
content_id="content"
|
|
65
|
+
id="cocreate-resize"
|
|
66
|
+
>
|
|
67
|
+
<div
|
|
68
|
+
class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px"
|
|
69
|
+
>
|
|
70
|
+
<div class="display:flex align-items:center">
|
|
71
|
+
<h2>CoCreate-resize</h2>
|
|
72
|
+
</div>
|
|
73
|
+
<div
|
|
74
|
+
class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white"
|
|
75
|
+
>
|
|
76
|
+
<div
|
|
77
|
+
class="display:flex align-items:center transition:0.3s padding-left:10px"
|
|
78
|
+
share-network="true"
|
|
79
|
+
share-text="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."
|
|
80
|
+
share-title="CoCreate-resize"
|
|
81
|
+
share-height="600"
|
|
82
|
+
share-width="700"
|
|
83
|
+
share-media="https://cdn.cocreate.app/docs/resize.png"
|
|
84
|
+
hover="display:block!important"
|
|
85
|
+
hover-selector=".social-networks"
|
|
86
|
+
>
|
|
87
|
+
<div class="display:none social-networks">
|
|
88
|
+
<a
|
|
89
|
+
class="margin-right:15px"
|
|
90
|
+
share-network="twitter"
|
|
91
|
+
title="Share on twitter"
|
|
92
|
+
><i src="/assets/svg/twitter.svg"></i
|
|
93
|
+
></a>
|
|
94
|
+
<a
|
|
95
|
+
class="margin-right:15px"
|
|
96
|
+
share-network="facebook"
|
|
97
|
+
title="Share on Facebook"
|
|
98
|
+
><i src="/assets/svg/facebook.svg"></i
|
|
99
|
+
></a>
|
|
100
|
+
<a
|
|
101
|
+
class="margin-right:15px"
|
|
102
|
+
share-network="instagram"
|
|
103
|
+
title="Share on instagram"
|
|
104
|
+
><i src="/assets/svg/instagram.svg"></i
|
|
105
|
+
></a>
|
|
113
106
|
</div>
|
|
114
|
-
<
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
107
|
+
<a
|
|
108
|
+
class="margin-right:15px"
|
|
109
|
+
share-network="share"
|
|
110
|
+
title="Share on share"
|
|
111
|
+
><i src="/assets/svg/share-alt.svg"></i
|
|
112
|
+
></a>
|
|
113
|
+
</div>
|
|
114
|
+
<a
|
|
115
|
+
href="https://github.com/CoCreate-app/CoCreate-resize"
|
|
116
|
+
target="_blank"
|
|
117
|
+
class="margin-right:15px"
|
|
118
|
+
><i src="/assets/svg/github.svg"></i
|
|
119
|
+
></a>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
<h1
|
|
123
|
+
class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100"
|
|
124
|
+
>
|
|
125
|
+
A light weight resize handler make any element resizable by adding data
|
|
126
|
+
attributes or usinng init object. Great for Customized text box or text
|
|
127
|
+
area.
|
|
128
|
+
</h1>
|
|
129
|
+
<div id="resize-section" class="display:flex flex-wrap:wrap">
|
|
130
|
+
<div
|
|
131
|
+
class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px"
|
|
132
|
+
>
|
|
133
|
+
<div
|
|
134
|
+
id="resize-install"
|
|
135
|
+
class="border-bottom:1px_solid_lightgrey"
|
|
136
|
+
scroll
|
|
137
|
+
scroll-intersect="color:dodgerblue"
|
|
138
|
+
scroll-selector="#resize-install-section"
|
|
139
|
+
>
|
|
140
|
+
<span
|
|
141
|
+
class="display:flex align-items:center width:fit-content"
|
|
142
|
+
hover="display:block!important"
|
|
143
|
+
hover-selector="[href='#resize-install']"
|
|
144
|
+
>
|
|
145
|
+
<h2 class="padding:5px_0px">Install</h2>
|
|
146
|
+
<a class="margin-left:10px display:none" href="#resize-install"
|
|
147
|
+
><i src="/assets/svg/link.svg"></i
|
|
148
|
+
></a>
|
|
149
|
+
</span>
|
|
150
|
+
</div>
|
|
151
|
+
<pre
|
|
152
|
+
class="margin-top:15px"
|
|
153
|
+
><code class="language-bash">npm i @cocreate/resize</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/resize/latest/CoCreate-resize.min.js</script></code></pre>
|
|
147
158
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
</p>
|
|
151
|
-
<pre><code class="language-html"><div></div></code></pre>
|
|
159
|
+
<p class="padding:10px_0px line-height:1.5">resize usage content</p>
|
|
160
|
+
<pre><code class="language-html"><div></div></code></pre>
|
|
152
161
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
162
|
+
<div
|
|
163
|
+
id="resize-usage"
|
|
164
|
+
class="margin-top:80px border-bottom:1px_solid_lightgrey"
|
|
165
|
+
scroll
|
|
166
|
+
scroll-intersect="color:dodgerblue"
|
|
167
|
+
scroll-selector="#resize-usage-section"
|
|
168
|
+
>
|
|
169
|
+
<span
|
|
170
|
+
class="display:flex align-items:center width:fit-content"
|
|
171
|
+
hover="display:block!important"
|
|
172
|
+
hover-selector="[href='#resize-usage']"
|
|
173
|
+
>
|
|
174
|
+
<h2 class="padding:5px_0px">Usage</h2>
|
|
175
|
+
<a class="margin-left:10px display:none" href="#resize-usage"
|
|
176
|
+
><i src="/assets/svg/link.svg"></i
|
|
177
|
+
></a>
|
|
178
|
+
</span>
|
|
179
|
+
</div>
|
|
180
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
181
|
+
This is resize usage content
|
|
182
|
+
</p>
|
|
183
|
+
<pre><code class="language-javascript"><div></div></code></pre>
|
|
184
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
185
|
+
This is resize usage content
|
|
186
|
+
</p>
|
|
178
187
|
|
|
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
|
-
>string</span
|
|
217
|
-
>
|
|
218
|
-
<span class="cocreate-badge warning"
|
|
219
|
-
>optional</span
|
|
220
|
-
>
|
|
221
|
-
</h4>
|
|
222
|
-
<p>resize-attribute</p>
|
|
223
|
-
</li>
|
|
224
|
-
</ul>
|
|
225
|
-
</div>
|
|
188
|
+
<div
|
|
189
|
+
id="resize-attributes"
|
|
190
|
+
class="margin-top:80px border-bottom:1px_solid_lightgrey"
|
|
191
|
+
scroll
|
|
192
|
+
scroll-intersect="color:dodgerblue"
|
|
193
|
+
scroll-selector="#resize-attributes-section"
|
|
194
|
+
>
|
|
195
|
+
<span
|
|
196
|
+
class="display:flex align-items:center width:fit-content"
|
|
197
|
+
hover="display:block!important"
|
|
198
|
+
hover-selector="[href='#resize-attributes']"
|
|
199
|
+
>
|
|
200
|
+
<h2 class="padding:5px_0px">Attributes</h2>
|
|
201
|
+
<a class="margin-left:10px display:none" href="#resize-attributes"
|
|
202
|
+
><i src="/assets/svg/link.svg"></i
|
|
203
|
+
></a>
|
|
204
|
+
</span>
|
|
205
|
+
</div>
|
|
206
|
+
<ul class="list-style-type:none">
|
|
207
|
+
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
208
|
+
<h4>
|
|
209
|
+
<span>resize</span>
|
|
210
|
+
<span class="cocreate-badge success">string</span>
|
|
211
|
+
<span class="cocreate-badge warning">optional</span>
|
|
212
|
+
</h4>
|
|
213
|
+
<p>resize-attribute</p>
|
|
214
|
+
</li>
|
|
215
|
+
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
216
|
+
<h4>
|
|
217
|
+
<span>resize</span>
|
|
218
|
+
<span class="cocreate-badge success">string</span>
|
|
219
|
+
<span class="cocreate-badge warning">optional</span>
|
|
220
|
+
</h4>
|
|
221
|
+
<p>resize-attribute</p>
|
|
222
|
+
</li>
|
|
223
|
+
</ul>
|
|
224
|
+
</div>
|
|
226
225
|
|
|
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
|
-
|
|
226
|
+
<div
|
|
227
|
+
class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey"
|
|
228
|
+
>
|
|
229
|
+
<!-- SandBox -->
|
|
230
|
+
<div
|
|
231
|
+
id="resize-demo"
|
|
232
|
+
class="border-bottom:1px_solid_lightgrey"
|
|
233
|
+
scroll
|
|
234
|
+
scroll-intersect="color:dodgerblue"
|
|
235
|
+
scroll-selector="#resize-demo-section"
|
|
236
|
+
>
|
|
237
|
+
<span
|
|
238
|
+
class="display:flex align-items:center width:fit-content"
|
|
239
|
+
hover="display:block!important"
|
|
240
|
+
hover-selector="[href='#resize-demo']"
|
|
241
|
+
>
|
|
242
|
+
<h2 class="padding:5px_0px">Demo</h2>
|
|
243
|
+
<a class="margin-left:10px display:none" href="#resize-demo"
|
|
244
|
+
><i src="/assets/svg/link.svg"></i
|
|
245
|
+
></a>
|
|
246
|
+
</span>
|
|
247
|
+
</div>
|
|
248
|
+
<div class="position:sticky top:0 padding:10px_0px height:100vh">
|
|
249
|
+
<!-- SandBox -->
|
|
250
|
+
<div
|
|
251
|
+
class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
|
|
252
|
+
id="playground"
|
|
253
|
+
>
|
|
254
|
+
<div
|
|
255
|
+
id="demo-code"
|
|
256
|
+
resizable
|
|
257
|
+
class="position:relative height:50%"
|
|
258
|
+
>
|
|
259
|
+
<textarea
|
|
260
|
+
type="code"
|
|
261
|
+
lang="html"
|
|
262
|
+
array="demos"
|
|
263
|
+
object=""
|
|
264
|
+
key="demo"
|
|
265
|
+
save="false"
|
|
266
|
+
id="demo"
|
|
267
|
+
input-selector=".demopreview"
|
|
268
|
+
input-attribute="value"
|
|
269
|
+
input-events="input, onload"
|
|
270
|
+
class="height:100% width:100% outline:none border:none resize:none padding:5px"
|
|
271
|
+
></textarea>
|
|
272
|
+
<div resize="bottom" class="background:lightgrey"></div>
|
|
273
|
+
</div>
|
|
274
274
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
275
|
+
<div
|
|
276
|
+
id="demo-preview"
|
|
277
|
+
class="position:relative overflow:auto background-color:white"
|
|
278
|
+
>
|
|
279
|
+
<div class="demopreview padding:20px"></div>
|
|
280
|
+
</div>
|
|
280
281
|
|
|
281
|
-
|
|
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
|
-
fullscreen-selector="#playground"></a>
|
|
325
|
-
</div>
|
|
326
|
-
</div>
|
|
327
|
-
<!-- End SandBox -->
|
|
328
|
-
</div>
|
|
329
|
-
</div>
|
|
282
|
+
<div
|
|
283
|
+
class="font-size:20px position:absolute top:10px right:10px opacity:0.6"
|
|
284
|
+
>
|
|
285
|
+
<a
|
|
286
|
+
class="margin-right:10px"
|
|
287
|
+
id="eye"
|
|
288
|
+
show="#eye-slash"
|
|
289
|
+
hide="#eye, #demo-preview"
|
|
290
|
+
toggle="code-height"
|
|
291
|
+
toggle-selector="#demo-code"
|
|
292
|
+
><i class="height:18px" src="/assets/svg/eye.svg"></i
|
|
293
|
+
></a>
|
|
294
|
+
<a
|
|
295
|
+
class="margin-right:10px"
|
|
296
|
+
hidden
|
|
297
|
+
id="eye-slash"
|
|
298
|
+
show="#eye, #demo-preview"
|
|
299
|
+
hide="#eye-slash"
|
|
300
|
+
toggle="code-height"
|
|
301
|
+
toggle-selector="#demo-code"
|
|
302
|
+
><i src="/assets/svg/eye-slash.svg"></i
|
|
303
|
+
></a>
|
|
304
|
+
<a
|
|
305
|
+
class="margin-right:10px"
|
|
306
|
+
id="code"
|
|
307
|
+
show="#code-slash"
|
|
308
|
+
hide="#code, #demo-code"
|
|
309
|
+
><i src="/assets/svg/code.svg"></i
|
|
310
|
+
></a>
|
|
311
|
+
<a
|
|
312
|
+
class="margin-right:10px"
|
|
313
|
+
hidden
|
|
314
|
+
id="code-slash"
|
|
315
|
+
show="#code, #demo-code"
|
|
316
|
+
hide="#code-slash"
|
|
317
|
+
><i class="height:18px" src="/assets/svg/code.svg"></i
|
|
318
|
+
></a>
|
|
319
|
+
<a
|
|
320
|
+
class="margin-right:5px"
|
|
321
|
+
fullscreen
|
|
322
|
+
fullscreen-selector="#playground"
|
|
323
|
+
></a>
|
|
324
|
+
</div>
|
|
330
325
|
</div>
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
326
|
+
<!-- End SandBox -->
|
|
327
|
+
</div>
|
|
328
|
+
</div>
|
|
329
|
+
</div>
|
|
330
|
+
<button
|
|
331
|
+
href="https://github.com/CoCreate-app/CoCreate-resize/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
|
|
332
|
+
target="_blank"
|
|
333
|
+
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)"
|
|
334
|
+
>
|
|
335
|
+
<i src="../assets/svg/pencil-alt.svg"></i>
|
|
336
|
+
</button>
|
|
337
|
+
</main>
|
|
338
338
|
|
|
339
|
-
|
|
340
|
-
|
|
339
|
+
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
|
|
340
|
+
</body>
|
|
341
341
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocreate/resize",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.12.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
|
@@ -15,20 +15,20 @@ const coCreateResize = {
|
|
|
15
15
|
resizers: [],
|
|
16
16
|
resizeWidgets: [],
|
|
17
17
|
|
|
18
|
-
init: function(handleObj) {
|
|
18
|
+
init: function (handleObj) {
|
|
19
19
|
for (var handleKey in handleObj)
|
|
20
20
|
if (handleObj.hasOwnProperty(handleKey) && handleKey == 'selector')
|
|
21
21
|
this.selector = handleObj[handleKey];
|
|
22
22
|
|
|
23
23
|
this.resizers = document.querySelectorAll(this.selector);
|
|
24
24
|
var _this = this;
|
|
25
|
-
this.resizers.forEach(function(resize, idx) {
|
|
25
|
+
this.resizers.forEach(function (resize, idx) {
|
|
26
26
|
let resizeWidget = new CoCreateResize(resize, handleObj);
|
|
27
27
|
_this.resizeWidgets[idx] = resizeWidget;
|
|
28
28
|
});
|
|
29
29
|
},
|
|
30
30
|
|
|
31
|
-
initElement: function(target) {
|
|
31
|
+
initElement: function (target) {
|
|
32
32
|
let resizeWidget = new CoCreateResize(target, {
|
|
33
33
|
dragLeft: "[resize='left']",
|
|
34
34
|
dragRight: "[resize='right']",
|
|
@@ -46,13 +46,13 @@ function CoCreateResize(resizer, options) {
|
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
CoCreateResize.prototype = {
|
|
49
|
-
init: function(handleObj) {
|
|
49
|
+
init: function (handleObj) {
|
|
50
50
|
if (this.resizeWidget) {
|
|
51
51
|
this.initDrags = [];
|
|
52
52
|
this.checkCorners = [];
|
|
53
53
|
this.doDrags = [];
|
|
54
54
|
this.Drags = [];
|
|
55
|
-
|
|
55
|
+
|
|
56
56
|
//this is for grid
|
|
57
57
|
this.isGrid = this.detectGrid();
|
|
58
58
|
this.gridWidth = 0;
|
|
@@ -75,12 +75,12 @@ CoCreateResize.prototype = {
|
|
|
75
75
|
}
|
|
76
76
|
},
|
|
77
77
|
|
|
78
|
-
getGridProperty: function() {
|
|
78
|
+
getGridProperty: function () {
|
|
79
79
|
if (!this.resizeWidget.parentNode) return;
|
|
80
80
|
let compStyles = window.getComputedStyle(this.resizeWidget.parentNode);
|
|
81
81
|
let gridColumns = compStyles.gridTemplateColumns;
|
|
82
82
|
let height = compStyles.gridAutoRows;
|
|
83
|
-
|
|
83
|
+
|
|
84
84
|
if (gridColumns !== 'none') {
|
|
85
85
|
let width = gridColumns.split(' ');
|
|
86
86
|
this.limitSpan = width.length;
|
|
@@ -91,27 +91,25 @@ CoCreateResize.prototype = {
|
|
|
91
91
|
}
|
|
92
92
|
},
|
|
93
93
|
|
|
94
|
-
checkGridColumns: function() {
|
|
95
|
-
if (typeof this.resizeWidget !== 'undefined' && this.resizeWidget.parentNode)
|
|
96
|
-
{
|
|
94
|
+
checkGridColumns: function () {
|
|
95
|
+
if (typeof this.resizeWidget !== 'undefined' && this.resizeWidget.parentNode) {
|
|
97
96
|
let compStylesOfParent = window.getComputedStyle(this.resizeWidget.parentNode);
|
|
98
97
|
let spans = 0;
|
|
99
98
|
let gridColumns = compStylesOfParent.gridTemplateColumns.split(' ');
|
|
100
99
|
let temp = gridColumns[0];
|
|
101
100
|
gridColumns.map(v => {
|
|
102
|
-
if (v == temp)
|
|
101
|
+
if (v == temp) spans++;
|
|
103
102
|
});
|
|
104
103
|
this.limitSpan = spans;
|
|
105
|
-
if (this.resizeWidget.style['grid-column-end'])
|
|
106
|
-
{
|
|
104
|
+
if (this.resizeWidget.style['grid-column-end']) {
|
|
107
105
|
let curClassAttributes = this.resizeWidget.getAttribute('class').split(' ');
|
|
108
106
|
let prevColumnState = curClassAttributes[curClassAttributes.length - 1].split('_');
|
|
109
107
|
let prevSpan = Number.parseInt(prevColumnState[1]);
|
|
110
108
|
let curColumnState = this.resizeWidget.style['grid-column-end'].split(' ');
|
|
111
109
|
let curSpan = Number.parseInt(curColumnState[1]);
|
|
112
|
-
|
|
110
|
+
|
|
113
111
|
let span = 0;
|
|
114
|
-
if (this.limitSpan >= prevSpan)
|
|
112
|
+
if (this.limitSpan >= prevSpan) span = prevSpan;
|
|
115
113
|
else if (prevSpan > this.limitSpan) span = this.limitSpan;
|
|
116
114
|
else span = Math.min(curSpan, this.limitSpan);
|
|
117
115
|
|
|
@@ -120,14 +118,14 @@ CoCreateResize.prototype = {
|
|
|
120
118
|
}
|
|
121
119
|
},
|
|
122
120
|
|
|
123
|
-
initResize: function() {
|
|
124
|
-
DIRECTIONS.map(d => {
|
|
125
|
-
if (this.Drags[d])
|
|
126
|
-
this.addListenerMulti(this.Drags[d], EVENTS[0], this.checkCorners[d]);
|
|
121
|
+
initResize: function () {
|
|
122
|
+
DIRECTIONS.map(d => {
|
|
123
|
+
if (this.Drags[d])
|
|
124
|
+
this.addListenerMulti(this.Drags[d], EVENTS[0], this.checkCorners[d]);
|
|
127
125
|
});
|
|
128
126
|
},
|
|
129
127
|
|
|
130
|
-
checkDragImplementation: function(e, from, to, offset, fcur, scur) {
|
|
128
|
+
checkDragImplementation: function (e, from, to, offset, fcur, scur) {
|
|
131
129
|
if (e.touches)
|
|
132
130
|
e = e.touches[0];
|
|
133
131
|
let other;
|
|
@@ -153,10 +151,10 @@ CoCreateResize.prototype = {
|
|
|
153
151
|
}
|
|
154
152
|
},
|
|
155
153
|
|
|
156
|
-
initDrag: function(e, idx) {
|
|
154
|
+
initDrag: function (e, idx) {
|
|
157
155
|
e.preventDefault();
|
|
158
156
|
|
|
159
|
-
if (!this.resizeWidget.hasAttribute('resizing')){
|
|
157
|
+
if (!this.resizeWidget.hasAttribute('resizing')) {
|
|
160
158
|
this.resizeWidget.setAttribute('resizing', '')
|
|
161
159
|
}
|
|
162
160
|
|
|
@@ -174,6 +172,7 @@ CoCreateResize.prototype = {
|
|
|
174
172
|
}
|
|
175
173
|
else {
|
|
176
174
|
this.startLeft = parseInt(selector.left, 10);
|
|
175
|
+
this.startRight = parseInt(selector.right, 10);
|
|
177
176
|
this.startWidth = parseInt(selector.width, 10);
|
|
178
177
|
|
|
179
178
|
if (e.touches)
|
|
@@ -186,30 +185,30 @@ CoCreateResize.prototype = {
|
|
|
186
185
|
this.addListenerMulti(document.documentElement, EVENTS[2], this.stopDrag);
|
|
187
186
|
},
|
|
188
187
|
|
|
189
|
-
initTopDrag: function(e) {
|
|
188
|
+
initTopDrag: function (e) {
|
|
190
189
|
this.initDrag(e, 'top');
|
|
191
190
|
},
|
|
192
|
-
initBottomDrag: function(e) {
|
|
191
|
+
initBottomDrag: function (e) {
|
|
193
192
|
this.initDrag(e, 'bottom');
|
|
194
193
|
},
|
|
195
|
-
initLeftDrag: function(e) {
|
|
194
|
+
initLeftDrag: function (e) {
|
|
196
195
|
this.initDrag(e, 'left');
|
|
197
196
|
|
|
198
197
|
},
|
|
199
|
-
initRightDrag: function(e) {
|
|
198
|
+
initRightDrag: function (e) {
|
|
200
199
|
this.initDrag(e, 'right');
|
|
201
200
|
},
|
|
202
201
|
|
|
203
202
|
//this is just for grid system
|
|
204
|
-
setRowEnd: function(height) {
|
|
203
|
+
setRowEnd: function (height) {
|
|
205
204
|
if (this.gridHeight) {
|
|
206
|
-
this.heightSpan = Math.ceil((height - (this.heightSpan - 1) * this.gridRowGap) / this.gridHeight
|
|
205
|
+
this.heightSpan = Math.ceil((height - (this.heightSpan - 1) * this.gridRowGap) / this.gridHeight);
|
|
207
206
|
this.resizeWidget.style['grid-row-end'] = 'span ' + this.heightSpan;
|
|
208
|
-
this.collaborate({rowEnd: this.heightSpan})
|
|
207
|
+
this.collaborate({ rowEnd: this.heightSpan })
|
|
209
208
|
}
|
|
210
209
|
},
|
|
211
210
|
|
|
212
|
-
doTopDrag: function(e) {
|
|
211
|
+
doTopDrag: function (e) {
|
|
213
212
|
let top, height;
|
|
214
213
|
|
|
215
214
|
if (e.touches)
|
|
@@ -221,14 +220,14 @@ CoCreateResize.prototype = {
|
|
|
221
220
|
return;
|
|
222
221
|
if (!this.isGrid) {
|
|
223
222
|
this.resizeWidget.style.top = top + 'px';
|
|
224
|
-
this.collaborate({top, height})
|
|
223
|
+
this.collaborate({ top, height })
|
|
225
224
|
}
|
|
226
225
|
this.resizeWidget.style.height = height + 'px';
|
|
227
226
|
this.setRowEnd(height);
|
|
228
227
|
},
|
|
229
228
|
|
|
230
229
|
|
|
231
|
-
doBottomDrag: function(e) {
|
|
230
|
+
doBottomDrag: function (e) {
|
|
232
231
|
let height;
|
|
233
232
|
|
|
234
233
|
if (e.touches)
|
|
@@ -239,34 +238,36 @@ CoCreateResize.prototype = {
|
|
|
239
238
|
if (height < 10)
|
|
240
239
|
return;
|
|
241
240
|
if (!this.isGrid)
|
|
242
|
-
this.collaborate({height})
|
|
243
|
-
|
|
241
|
+
this.collaborate({ height })
|
|
242
|
+
|
|
244
243
|
this.resizeWidget.style.height = height + 'px';
|
|
245
244
|
this.setRowEnd(height);
|
|
246
245
|
},
|
|
247
246
|
|
|
248
247
|
//this is just for grid system
|
|
249
|
-
setColumnEnd: function(width) {
|
|
248
|
+
setColumnEnd: function (width) {
|
|
250
249
|
if (this.gridWidth) {
|
|
251
250
|
let spans = Math.ceil((width - (this.widthSpan - 1) * this.gridColumnGap) / this.gridWidth);
|
|
252
251
|
this.widthSpan = (spans > this.limitSpan) ? this.limitSpan : spans;
|
|
253
252
|
this.resizeWidget.style['grid-column-end'] = 'span ' + this.widthSpan;
|
|
254
|
-
this.collaborate({columnEnd: this.widthSpan})
|
|
253
|
+
this.collaborate({ columnEnd: this.widthSpan })
|
|
255
254
|
}
|
|
256
255
|
},
|
|
257
256
|
|
|
258
|
-
doLeftDrag: function(e) {
|
|
259
|
-
let left, width;
|
|
257
|
+
doLeftDrag: function (e) {
|
|
258
|
+
let left, right, width;
|
|
260
259
|
if (e.touches)
|
|
261
260
|
e = e.touches[0];
|
|
262
261
|
left = this.startLeft + e.clientX - this.startX;
|
|
262
|
+
right = this.startRight;
|
|
263
263
|
width = this.startWidth - e.clientX + this.startX;
|
|
264
264
|
|
|
265
265
|
if (width < 10)
|
|
266
266
|
return;
|
|
267
267
|
if (!this.isGrid) {
|
|
268
|
-
this.resizeWidget.style.left =
|
|
269
|
-
this.
|
|
268
|
+
this.resizeWidget.style.left = '';
|
|
269
|
+
this.resizeWidget.style.right = right + 'px';
|
|
270
|
+
this.collaborate({ left, width })
|
|
270
271
|
}
|
|
271
272
|
|
|
272
273
|
this.resizeWidget.style.width = width + 'px';
|
|
@@ -274,7 +275,7 @@ CoCreateResize.prototype = {
|
|
|
274
275
|
},
|
|
275
276
|
|
|
276
277
|
|
|
277
|
-
doRightDrag: function(e) {
|
|
278
|
+
doRightDrag: function (e) {
|
|
278
279
|
let width;
|
|
279
280
|
if (e.touches)
|
|
280
281
|
e = e.touches[0];
|
|
@@ -283,13 +284,13 @@ CoCreateResize.prototype = {
|
|
|
283
284
|
return;
|
|
284
285
|
|
|
285
286
|
if (!this.isGrid)
|
|
286
|
-
this.collaborate({width})
|
|
287
|
-
|
|
287
|
+
this.collaborate({ width })
|
|
288
|
+
|
|
288
289
|
this.resizeWidget.style.width = width + 'px';
|
|
289
290
|
this.setColumnEnd(width);
|
|
290
291
|
},
|
|
291
292
|
|
|
292
|
-
detectGrid: function() {
|
|
293
|
+
detectGrid: function () {
|
|
293
294
|
let isGrid = false;
|
|
294
295
|
if (this.resizeWidget.parentNode) {
|
|
295
296
|
let compStyles = window.getComputedStyle(this.resizeWidget.parentNode);
|
|
@@ -299,9 +300,9 @@ CoCreateResize.prototype = {
|
|
|
299
300
|
return isGrid;
|
|
300
301
|
},
|
|
301
302
|
|
|
302
|
-
stopDrag: function(e) {
|
|
303
|
+
stopDrag: function (e) {
|
|
303
304
|
styleSheet.deleteRule(0)
|
|
304
|
-
if (this.resizeWidget.hasAttribute('resizing')){
|
|
305
|
+
if (this.resizeWidget.hasAttribute('resizing')) {
|
|
305
306
|
this.resizeWidget.removeAttribute('resizing', '')
|
|
306
307
|
}
|
|
307
308
|
|
|
@@ -312,14 +313,14 @@ CoCreateResize.prototype = {
|
|
|
312
313
|
this.resizeWidget.style.left = null;
|
|
313
314
|
this.resizeWidget.style.top = null;
|
|
314
315
|
|
|
315
|
-
if (this.widthSpan)
|
|
316
|
+
if (this.widthSpan) this.resizeWidget.setAttribute('class', this.originClassAttribute + ' grid-column-end:span_' + this.widthSpan);
|
|
316
317
|
if (this.heightSpan) this.resizeWidget.setAttribute('class', this.originClassAttribute + ' grid-row-end:span_' + this.heightSpan);
|
|
317
318
|
}
|
|
318
319
|
|
|
319
320
|
DIRECTIONS.map(d => { this.removeListenerMulti(document.documentElement, EVENTS[0], this.doDrags[d]) });
|
|
320
321
|
this.removeListenerMulti(document.documentElement, EVENTS[2], this.stopDrag);
|
|
321
322
|
},
|
|
322
|
-
checkLeftCorners: function(e) {
|
|
323
|
+
checkLeftCorners: function (e) {
|
|
323
324
|
let offset = e.clientY - this.getDistance(this.Drags['left'], true) + document.documentElement.scrollTop;
|
|
324
325
|
if (offset > 10) {
|
|
325
326
|
offset = this.getDistance(this.Drags['left'], true) + this.Drags['left'].clientHeight - e.clientY - document.documentElement.scrollTop;
|
|
@@ -328,7 +329,7 @@ CoCreateResize.prototype = {
|
|
|
328
329
|
this.checkDragImplementation(e, 'left', 'top', offset, 'se-resize', 'e-resize');
|
|
329
330
|
}
|
|
330
331
|
},
|
|
331
|
-
checkTopCorners: function(e) {
|
|
332
|
+
checkTopCorners: function (e) {
|
|
332
333
|
let offset = e.clientX - this.getDistance(this.Drags['top'], false) + document.documentElement.scrollTop;
|
|
333
334
|
if (offset > 10) {
|
|
334
335
|
offset = this.getDistance(this.Drags['top'], false) + this.Drags['top'].clientWidth - e.clientX - document.documentElement.scrollLeft;
|
|
@@ -337,7 +338,7 @@ CoCreateResize.prototype = {
|
|
|
337
338
|
this.checkDragImplementation(e, 'top', 'left', offset, 'se-resize', 's-resize');
|
|
338
339
|
}
|
|
339
340
|
},
|
|
340
|
-
checkBottomCorners: function(e) {
|
|
341
|
+
checkBottomCorners: function (e) {
|
|
341
342
|
let offset = e.clientX - this.getDistance(this.Drags['bottom'], false) + document.documentElement.scrollTop;
|
|
342
343
|
if (offset > 10) {
|
|
343
344
|
offset = this.getDistance(this.Drags['bottom'], false) + this.Drags['bottom'].clientWidth - e.clientX - document.documentElement.scrollLeft;
|
|
@@ -346,7 +347,7 @@ CoCreateResize.prototype = {
|
|
|
346
347
|
this.checkDragImplementation(e, 'bottom', 'left', offset, 'ne-resize', 's-resize');
|
|
347
348
|
}
|
|
348
349
|
},
|
|
349
|
-
checkRightCorners: function(e) {
|
|
350
|
+
checkRightCorners: function (e) {
|
|
350
351
|
let offset = e.clientY - this.getDistance(this.Drags['right'], true) + document.documentElement.scrollTop;
|
|
351
352
|
if (offset > 10) {
|
|
352
353
|
offset = this.getDistance(this.Drags['right'], true) + this.Drags['right'].clientHeight - e.clientY - document.documentElement.scrollTop;
|
|
@@ -356,7 +357,7 @@ CoCreateResize.prototype = {
|
|
|
356
357
|
}
|
|
357
358
|
},
|
|
358
359
|
|
|
359
|
-
bindListeners: function() {
|
|
360
|
+
bindListeners: function () {
|
|
360
361
|
this.doDrags['left'] = this.doLeftDrag.bind(this);
|
|
361
362
|
this.doDrags['top'] = this.doTopDrag.bind(this);
|
|
362
363
|
this.doDrags['right'] = this.doRightDrag.bind(this);
|
|
@@ -375,7 +376,7 @@ CoCreateResize.prototype = {
|
|
|
375
376
|
this.initDrags['right'] = this.initRightDrag.bind(this);
|
|
376
377
|
},
|
|
377
378
|
|
|
378
|
-
getDistance: function(elem, flag) {
|
|
379
|
+
getDistance: function (elem, flag) {
|
|
379
380
|
var location = 0;
|
|
380
381
|
if (!elem) return;
|
|
381
382
|
if (elem.offsetParent) {
|
|
@@ -388,7 +389,7 @@ CoCreateResize.prototype = {
|
|
|
388
389
|
},
|
|
389
390
|
|
|
390
391
|
// Bind multiiple events to a listener
|
|
391
|
-
addListenerMulti: function(element, eventNames, listener) {
|
|
392
|
+
addListenerMulti: function (element, eventNames, listener) {
|
|
392
393
|
var events = eventNames.split(' ');
|
|
393
394
|
for (var i = 0, iLen = events.length; i < iLen; i++) {
|
|
394
395
|
element.addEventListener(events[i], listener, { passive: false });
|
|
@@ -396,40 +397,40 @@ CoCreateResize.prototype = {
|
|
|
396
397
|
},
|
|
397
398
|
|
|
398
399
|
// Remove multiiple events from a listener
|
|
399
|
-
removeListenerMulti: function(element, eventNames, listener) {
|
|
400
|
+
removeListenerMulti: function (element, eventNames, listener) {
|
|
400
401
|
var events = eventNames.split(' ');
|
|
401
402
|
for (var i = 0, iLen = events.length; i < iLen; i++) {
|
|
402
403
|
element.removeEventListener(events[i], listener, { passive: false });
|
|
403
404
|
}
|
|
404
405
|
},
|
|
405
406
|
|
|
406
|
-
collaborate: function({left, top, width, height, rowEnd, columnEnd}) {
|
|
407
|
+
collaborate: function ({ left, top, width, height, rowEnd, columnEnd }) {
|
|
407
408
|
if (window.CoCreate && window.CoCreate.text) {
|
|
408
409
|
let domTextEditor = this.resizeWidget.closest('[contenteditable]');
|
|
409
410
|
if (domTextEditor) {
|
|
410
411
|
if (left)
|
|
411
|
-
CoCreate.text.setStyle({
|
|
412
|
-
domTextEditor, target: this.resizeWidget, property: 'left', value: left + 'px'
|
|
412
|
+
CoCreate.text.setStyle({
|
|
413
|
+
domTextEditor, target: this.resizeWidget, property: 'left', value: left + 'px'
|
|
413
414
|
})
|
|
414
415
|
if (top)
|
|
415
|
-
CoCreate.text.setStyle({
|
|
416
|
-
domTextEditor, target: this.resizeWidget, property: 'top', value: top + 'px'
|
|
416
|
+
CoCreate.text.setStyle({
|
|
417
|
+
domTextEditor, target: this.resizeWidget, property: 'top', value: top + 'px'
|
|
417
418
|
})
|
|
418
419
|
if (width)
|
|
419
|
-
CoCreate.text.setStyle({
|
|
420
|
-
domTextEditor, target: this.resizeWidget, property: 'width', value: width + 'px'
|
|
420
|
+
CoCreate.text.setStyle({
|
|
421
|
+
domTextEditor, target: this.resizeWidget, property: 'width', value: width + 'px'
|
|
421
422
|
})
|
|
422
423
|
if (height)
|
|
423
|
-
CoCreate.text.setStyle({
|
|
424
|
-
domTextEditor, target: this.resizeWidget, property: 'height', value: height + 'px'
|
|
424
|
+
CoCreate.text.setStyle({
|
|
425
|
+
domTextEditor, target: this.resizeWidget, property: 'height', value: height + 'px'
|
|
425
426
|
})
|
|
426
427
|
if (rowEnd)
|
|
427
|
-
CoCreate.text.setStyle({
|
|
428
|
-
domTextEditor, target: this.resizeWidget, property: 'grid-row-end', value: 'span ' + rowEnd
|
|
428
|
+
CoCreate.text.setStyle({
|
|
429
|
+
domTextEditor, target: this.resizeWidget, property: 'grid-row-end', value: 'span ' + rowEnd
|
|
429
430
|
})
|
|
430
431
|
if (columnEnd)
|
|
431
|
-
CoCreate.text.setStyle({
|
|
432
|
-
domTextEditor, target: this.resizeWidget, property: 'grid-column-end', value: 'span ' + columnEnd
|
|
432
|
+
CoCreate.text.setStyle({
|
|
433
|
+
domTextEditor, target: this.resizeWidget, property: 'grid-column-end', value: 'span ' + columnEnd
|
|
433
434
|
})
|
|
434
435
|
}
|
|
435
436
|
}
|
|
@@ -440,7 +441,7 @@ observer.init({
|
|
|
440
441
|
name: 'CoCreateResize',
|
|
441
442
|
observe: ['addedNodes'],
|
|
442
443
|
selector: "[resizable]:not([resizable='false'])",
|
|
443
|
-
callback: function(mutation) {
|
|
444
|
+
callback: function (mutation) {
|
|
444
445
|
coCreateResize.initElement(mutation.target);
|
|
445
446
|
|
|
446
447
|
}
|