@cocreate/position 1.9.2 → 1.10.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 CHANGED
@@ -1,3 +1,24 @@
1
+ # [1.10.0](https://github.com/CoCreate-app/CoCreate-position/compare/v1.9.3...v1.10.0) (2024-11-04)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * observer taget has been renamed to selector ([cfa9028](https://github.com/CoCreate-app/CoCreate-position/commit/cfa9028e6031f68b6f851e91cd0335124e2283f9))
7
+ * pretier.config.js and file formating ([421b2a9](https://github.com/CoCreate-app/CoCreate-position/commit/421b2a94cf6d0fcf1b5b18b12b5d05d08739464d))
8
+
9
+
10
+ ### Features
11
+
12
+ * add prettier.config.js and format files ([48274b4](https://github.com/CoCreate-app/CoCreate-position/commit/48274b4ffbf93870ae3fa3911f0198db1f590a74))
13
+ * add prettier.config.js and format files ([a87c444](https://github.com/CoCreate-app/CoCreate-position/commit/a87c4444953ab1c084512707b8d6f90e74edcf58))
14
+
15
+ ## [1.9.3](https://github.com/CoCreate-app/CoCreate-position/compare/v1.9.2...v1.9.3) (2024-09-21)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * comment postion.js script ([7a22366](https://github.com/CoCreate-app/CoCreate-position/commit/7a223667236511f5bcfd265503b9b68d5e3b6ca5))
21
+
1
22
  ## [1.9.2](https://github.com/CoCreate-app/CoCreate-position/compare/v1.9.1...v1.9.2) (2024-06-12)
2
23
 
3
24
 
package/demo/index.html CHANGED
@@ -40,7 +40,7 @@
40
40
  <div drag-handle></div>
41
41
  </div>
42
42
 
43
- <script src="../dist/CoCreate-position.js"></script>
43
+ <!-- <script src="../dist/CoCreate-position.js"></script> -->
44
44
  <script src="https://CoCreate.app/dist/CoCreate.js"></script>
45
45
  </body>
46
46
  </html>
package/docs/index.html CHANGED
@@ -1,153 +1,162 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1" />
7
- <title>CoCreate-position Documentation | CoCreateJS</title>
8
- <link
9
- rel="icon"
10
- type="image/png"
11
- sizes="32x32"
12
- href="https://cocreate.app/images/favicon.ico" />
13
- <meta
14
- name="description"
15
- content="A draggable, customizable Pop up that toggle hiddent content via attributes. Great for multitasking and showing multiple views." />
16
- <meta
17
- name="keywords"
18
- content="helper classes, utility classes, css framework, css library, inline style classes" />
19
- <meta name="robots" content="index,follow" />
20
- <meta
21
- property="og:image"
22
- content="https://cdn.cocreate.app/docs/position.png" />
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-position 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 draggable, customizable Pop up that toggle hiddent content via attributes. Great for multitasking and showing multiple views."
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/position.png"
26
+ />
23
27
 
24
- <link
25
- rel="stylesheet"
26
- href="../index.css"
27
- array="files"
28
- object="60888216117c640e7596303f"
29
- key="src"
30
- type="text/css"
31
- save="true" />
32
- <link rel="manifest" href="/manifest.webmanifest" />
33
- </head>
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
- <body>
36
- <!-- Navbar -->
37
- <nav
38
- class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px"
39
- content_id="content"
40
- scroll="sticky-nav,"
41
- scroll-up="5"
42
- scroll-down="5"
43
- path="../"
44
- src="../components/navbar.html"></nav>
45
- <sidenav
46
- id="menuL"
47
- class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
48
- resizable
49
- resize-selector="[content_id='content']"
50
- resize-property="margin-left"
51
- resize-value="width">
52
- <menu
53
- array="files"
54
- object="603717b07de7fb350ae9fec8"
55
- key="src"></menu>
56
- <div resize="right"></div>
57
- </sidenav>
58
- <main
59
- class="padding-top:15px padding:15px@lg@xl"
60
- content_id="content"
61
- id="CoCreate-position">
62
- <div
63
- class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
64
- <div class="display:flex align-items:center">
65
- <h2>CoCreate-position</h2>
66
- </div>
67
- <div
68
- class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
69
- <div
70
- class="display:flex align-items:center transition:0.3s padding-left:10px"
71
- share-network="true"
72
- share-text="A draggable, customizable Pop up that toggle hiddent content via attributes. Great for multitasking and showing multiple views."
73
- share-title="CoCreate-position"
74
- share-height="600"
75
- share-width="700"
76
- share-media="https://cdn.cocreate.app/docs/position.png"
77
- hover="display:block!important"
78
- hover-selector=".social-networks">
79
- <div class="display:none social-networks">
80
- <a
81
- class="margin-right:15px"
82
- share-network="twitter"
83
- title="Share on twitter"
84
- ><i src="/assets/svg/twitter.svg"></i
85
- ></a>
86
- <a
87
- class="margin-right:15px"
88
- share-network="facebook"
89
- title="Share on Facebook"
90
- ><i src="/assets/svg/facebook.svg"></i
91
- ></a>
92
- <a
93
- class="margin-right:15px"
94
- share-network="instagram"
95
- title="Share on instagram"
96
- ><i src="/assets/svg/instagram.svg"></i
97
- ></a>
98
- </div>
99
- <a
100
- class="margin-right:15px"
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-position"
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-position"
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-position</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 draggable, customizable Pop up that toggle hiddent content via attributes. Great for multitasking and showing multiple views."
80
+ share-title="CoCreate-position"
81
+ share-height="600"
82
+ share-width="700"
83
+ share-media="https://cdn.cocreate.app/docs/position.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
- <h1
115
- class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">
116
- A draggable, customizable Pop up that toggle hiddent content via
117
- attributes. Great for multitasking and showing multiple views.
118
- </h1>
119
- <div id="xxxxx-section" class="display:flex flex-wrap:wrap">
120
- <div
121
- class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
122
- <div
123
- id="position-usage"
124
- class="margin-top:80px border-bottom:1px_solid_lightgrey"
125
- scroll
126
- scroll-intersect="color:dodgerblue"
127
- scroll-selector="#position-usage-section">
128
- <span
129
- class="display:flex align-items:center width:fit-content"
130
- hover="display:block!important"
131
- hover-selector="[href='#position-usage']">
132
- <h2 class="padding:5px_0px">Usage</h2>
133
- <a
134
- class="margin-left:10px display:none"
135
- href="#position-usage"
136
- ><i src="/assets/svg/link.svg"></i
137
- ></a>
138
- </span>
139
- </div>
140
- <div class="">
141
- <p class="padding-top:15px">
142
- CoCreate-position uses &lt;a&gt; tag.
143
- </p>
144
- <p class="padding-top:15px">
145
- When you click &lt;a&gt; tag, position comes to the
146
- surface.
147
- </p>
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-position"
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 draggable, customizable Pop up that toggle hiddent content via
126
+ attributes. Great for multitasking and showing multiple views.
127
+ </h1>
128
+ <div id="xxxxx-section" class="display:flex flex-wrap:wrap">
129
+ <div
130
+ class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px"
131
+ >
132
+ <div
133
+ id="position-usage"
134
+ class="margin-top:80px border-bottom:1px_solid_lightgrey"
135
+ scroll
136
+ scroll-intersect="color:dodgerblue"
137
+ scroll-selector="#position-usage-section"
138
+ >
139
+ <span
140
+ class="display:flex align-items:center width:fit-content"
141
+ hover="display:block!important"
142
+ hover-selector="[href='#position-usage']"
143
+ >
144
+ <h2 class="padding:5px_0px">Usage</h2>
145
+ <a class="margin-left:10px display:none" href="#position-usage"
146
+ ><i src="/assets/svg/link.svg"></i
147
+ ></a>
148
+ </span>
149
+ </div>
150
+ <div class="">
151
+ <p class="padding-top:15px">
152
+ CoCreate-position uses &lt;a&gt; tag.
153
+ </p>
154
+ <p class="padding-top:15px">
155
+ When you click &lt;a&gt; tag, position comes to the surface.
156
+ </p>
148
157
 
149
- <div class="flex-grow:1 min-width:300px width:100%">
150
- <pre>
158
+ <div class="flex-grow:1 min-width:300px width:100%">
159
+ <pre>
151
160
  <code class="language-html">
152
161
  &lt;button&gt;
153
162
  &lt;a target="position" href="https://server.cocreate.app/CoCreate-adminUI/module_datatable.html"
@@ -164,281 +173,225 @@
164
173
  &lt;/button&gt;
165
174
  </code>
166
175
  </pre>
167
- </div>
168
- </div>
169
- <div
170
- id="position-attributes"
171
- class="margin-top:80px border-bottom:1px_solid_lightgrey"
172
- scroll
173
- scroll-intersect="color:dodgerblue"
174
- scroll-selector="#position-attributes-section">
175
- <span
176
- class="display:flex align-items:center width:fit-content"
177
- hover="display:block!important"
178
- hover-selector="[href='#position-attributes']">
179
- <h2 class="padding:5px_0px">Attributes</h2>
180
- <a
181
- class="margin-left:10px display:none"
182
- href="#position-attributes"
183
- ><i src="/assets/svg/link.svg"></i
184
- ></a>
185
- </span>
186
- </div>
187
- <ul class="list-style-type:none">
188
- <li
189
- class="padding:15px_0px border-bottom:1px_solid_lightgrey">
190
- <h4>
191
- <span>target</span>
192
- <span class="cocreate-badge success"
193
- >string</span
194
- >
195
- <span class="cocreate-badge danger"
196
- >required</span
197
- >
198
- </h4>
199
- <p>Target must be "position".</p>
200
- </li>
201
- <li
202
- class="padding:15px_0px border-bottom:1px_solid_lightgrey">
203
- <h4>
204
- <span>href</span>
205
- <span class="cocreate-badge success"
206
- >string</span
207
- >
208
- <span class="cocreate-badge danger"
209
- >required</span
210
- >
211
- </h4>
212
- <p>
213
- Href attribute indicates html file to set in
214
- position.
215
- </p>
216
- </li>
217
- <li
218
- class="padding:15px_0px border-bottom:1px_solid_lightgrey">
219
- <h4>
220
- <span>position-ajax</span>
221
- <span class="cocreate-badge success"
222
- >boolean</span
223
- >
224
- <span class="cocreate-badge warning"
225
- >optional</span
226
- >
227
- </h4>
228
- <p>Attribute whether to use ajax or not.</p>
229
- </li>
230
- <li
231
- class="padding:15px_0px border-bottom:1px_solid_lightgrey">
232
- <h4>
233
- <span>position-width</span>
234
- <span class="cocreate-badge success"
235
- >string</span
236
- >
237
- <span class="cocreate-badge warning"
238
- >optional</span
239
- >
240
- </h4>
241
- <p>
242
- Width of position. Unit can be pixel or percent.
243
- </p>
244
- </li>
245
- <li
246
- class="padding:15px_0px border-bottom:1px_solid_lightgrey">
247
- <h4>
248
- <span>position-height</span>
249
- <span class="cocreate-badge success"
250
- >string</span
251
- >
252
- <span class="cocreate-badge warning"
253
- >optional</span
254
- >
255
- </h4>
256
- <p>
257
- Height of position. Unit can be pixel or
258
- percent.
259
- </p>
260
- </li>
261
- <li
262
- class="padding:15px_0px border-bottom:1px_solid_lightgrey">
263
- <h4>
264
- <span>position-color</span>
265
- <span class="cocreate-badge success"
266
- >color</span
267
- >
268
- <span class="cocreate-badge warning"
269
- >optional</span
270
- >
271
- </h4>
272
- <p>Color of position border.</p>
273
- </li>
274
- <li
275
- class="padding:15px_0px border-bottom:1px_solid_lightgrey">
276
- <h4>
277
- <span>position-header</span>
278
- <span class="cocreate-badge success"
279
- >boolean</span
280
- >
281
- <span class="cocreate-badge warning"
282
- >optional</span
283
- >
284
- </h4>
285
- <p>Attribute whether to show header or not.</p>
286
- </li>
287
- <li
288
- class="padding:15px_0px border-bottom:1px_solid_lightgrey">
289
- <h4>
290
- <span>position-x</span>
291
- <span class="cocreate-badge success"
292
- >string</span
293
- >
294
- <span class="cocreate-badge warning"
295
- >optional</span
296
- >
297
- </h4>
298
- <p>Position X of position.</p>
299
- </li>
300
- <li
301
- class="padding:15px_0px border-bottom:1px_solid_lightgrey">
302
- <h4>
303
- <span>position-y</span>
304
- <span class="cocreate-badge success"
305
- >string</span
306
- >
307
- <span class="cocreate-badge warning"
308
- >optional</span
309
- >
310
- </h4>
311
- <p>Position Y of position.</p>
312
- </li>
313
- <li
314
- class="padding:15px_0px border-bottom:1px_solid_lightgrey">
315
- <h4>
316
- <span>open_in</span>
317
- <span class="cocreate-badge success"
318
- >string</span
319
- >
320
- <span class="cocreate-badge warning"
321
- >optional</span
322
- >
323
- </h4>
324
- <p>
325
- Attribute where to show position in. "page" for
326
- current page. "parent" for parent page. "root"
327
- for root page.
328
- </p>
329
- </li>
330
- </ul>
331
- </div>
176
+ </div>
177
+ </div>
178
+ <div
179
+ id="position-attributes"
180
+ class="margin-top:80px border-bottom:1px_solid_lightgrey"
181
+ scroll
182
+ scroll-intersect="color:dodgerblue"
183
+ scroll-selector="#position-attributes-section"
184
+ >
185
+ <span
186
+ class="display:flex align-items:center width:fit-content"
187
+ hover="display:block!important"
188
+ hover-selector="[href='#position-attributes']"
189
+ >
190
+ <h2 class="padding:5px_0px">Attributes</h2>
191
+ <a
192
+ class="margin-left:10px display:none"
193
+ href="#position-attributes"
194
+ ><i src="/assets/svg/link.svg"></i
195
+ ></a>
196
+ </span>
197
+ </div>
198
+ <ul class="list-style-type:none">
199
+ <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
200
+ <h4>
201
+ <span>target</span>
202
+ <span class="cocreate-badge success">string</span>
203
+ <span class="cocreate-badge danger">required</span>
204
+ </h4>
205
+ <p>Target must be "position".</p>
206
+ </li>
207
+ <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
208
+ <h4>
209
+ <span>href</span>
210
+ <span class="cocreate-badge success">string</span>
211
+ <span class="cocreate-badge danger">required</span>
212
+ </h4>
213
+ <p>Href attribute indicates html file to set in position.</p>
214
+ </li>
215
+ <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
216
+ <h4>
217
+ <span>position-ajax</span>
218
+ <span class="cocreate-badge success">boolean</span>
219
+ <span class="cocreate-badge warning">optional</span>
220
+ </h4>
221
+ <p>Attribute whether to use ajax or not.</p>
222
+ </li>
223
+ <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
224
+ <h4>
225
+ <span>position-width</span>
226
+ <span class="cocreate-badge success">string</span>
227
+ <span class="cocreate-badge warning">optional</span>
228
+ </h4>
229
+ <p>Width of position. Unit can be pixel or percent.</p>
230
+ </li>
231
+ <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
232
+ <h4>
233
+ <span>position-height</span>
234
+ <span class="cocreate-badge success">string</span>
235
+ <span class="cocreate-badge warning">optional</span>
236
+ </h4>
237
+ <p>Height of position. Unit can be pixel or percent.</p>
238
+ </li>
239
+ <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
240
+ <h4>
241
+ <span>position-color</span>
242
+ <span class="cocreate-badge success">color</span>
243
+ <span class="cocreate-badge warning">optional</span>
244
+ </h4>
245
+ <p>Color of position border.</p>
246
+ </li>
247
+ <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
248
+ <h4>
249
+ <span>position-header</span>
250
+ <span class="cocreate-badge success">boolean</span>
251
+ <span class="cocreate-badge warning">optional</span>
252
+ </h4>
253
+ <p>Attribute whether to show header or not.</p>
254
+ </li>
255
+ <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
256
+ <h4>
257
+ <span>position-x</span>
258
+ <span class="cocreate-badge success">string</span>
259
+ <span class="cocreate-badge warning">optional</span>
260
+ </h4>
261
+ <p>Position X of position.</p>
262
+ </li>
263
+ <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
264
+ <h4>
265
+ <span>position-y</span>
266
+ <span class="cocreate-badge success">string</span>
267
+ <span class="cocreate-badge warning">optional</span>
268
+ </h4>
269
+ <p>Position Y of position.</p>
270
+ </li>
271
+ <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
272
+ <h4>
273
+ <span>open_in</span>
274
+ <span class="cocreate-badge success">string</span>
275
+ <span class="cocreate-badge warning">optional</span>
276
+ </h4>
277
+ <p>
278
+ Attribute where to show position in. "page" for current page.
279
+ "parent" for parent page. "root" for root page.
280
+ </p>
281
+ </li>
282
+ </ul>
283
+ </div>
332
284
 
333
- <div
334
- class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
335
- <!-- SandBox -->
336
- <div
337
- id="position-demo"
338
- class="border-bottom:1px_solid_lightgrey"
339
- scroll
340
- scroll-intersect="color:dodgerblue"
341
- scroll-selector="#position-demo-section">
342
- <span
343
- class="display:flex align-items:center width:fit-content"
344
- hover="display:block!important"
345
- hover-selector="[href='#position-demo']">
346
- <h2 class="padding:5px_0px">Demo</h2>
347
- <a
348
- class="margin-left:10px display:none"
349
- href="#position-demo"
350
- ><i src="/assets/svg/link.svg"></i
351
- ></a>
352
- </span>
353
- </div>
354
- <div
355
- class="position:sticky top:0 padding:15px_0px height:100vh">
356
- <!-- SandBox -->
357
- <div
358
- class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
359
- id="playground">
360
- <div
361
- id="demo-code"
362
- resizable
363
- class="position:relative height:50%">
364
- <textarea
365
- type="code"
366
- lang="html"
367
- array="demos"
368
- object=""
369
- key="demo"
370
- save="false"
371
- id="demo"
372
- class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
373
- <div
374
- resize="bottom"
375
- class="background:lightgrey"></div>
376
- </div>
285
+ <div
286
+ class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey"
287
+ >
288
+ <!-- SandBox -->
289
+ <div
290
+ id="position-demo"
291
+ class="border-bottom:1px_solid_lightgrey"
292
+ scroll
293
+ scroll-intersect="color:dodgerblue"
294
+ scroll-selector="#position-demo-section"
295
+ >
296
+ <span
297
+ class="display:flex align-items:center width:fit-content"
298
+ hover="display:block!important"
299
+ hover-selector="[href='#position-demo']"
300
+ >
301
+ <h2 class="padding:5px_0px">Demo</h2>
302
+ <a class="margin-left:10px display:none" href="#position-demo"
303
+ ><i src="/assets/svg/link.svg"></i
304
+ ></a>
305
+ </span>
306
+ </div>
307
+ <div class="position:sticky top:0 padding:15px_0px height:100vh">
308
+ <!-- SandBox -->
309
+ <div
310
+ class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
311
+ id="playground"
312
+ >
313
+ <div
314
+ id="demo-code"
315
+ resizable
316
+ class="position:relative height:50%"
317
+ >
318
+ <textarea
319
+ type="code"
320
+ lang="html"
321
+ array="demos"
322
+ object=""
323
+ key="demo"
324
+ save="false"
325
+ id="demo"
326
+ class="height:100% width:100% outline:none border:none resize:none padding:5px"
327
+ ></textarea>
328
+ <div resize="bottom" class="background:lightgrey"></div>
329
+ </div>
377
330
 
378
- <div
379
- id="demo-preview"
380
- class="position:relative overflow:auto background-color:white">
381
- <div class="demopreview padding:20px"></div>
382
- </div>
331
+ <div
332
+ id="demo-preview"
333
+ class="position:relative overflow:auto background-color:white"
334
+ >
335
+ <div class="demopreview padding:20px"></div>
336
+ </div>
383
337
 
384
- <div
385
- class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
386
- <a
387
- class="margin-right:10px"
388
- id="eye"
389
- show="#eye-slash"
390
- hide="#eye, #demo-preview"
391
- toggle="code-height"
392
- toggle-selector="#demo-code"
393
- ><i
394
- class="height:18px"
395
- src="/assets/svg/eye.svg"></i
396
- ></a>
397
- <a
398
- class="margin-right:10px"
399
- hidden
400
- id="eye-slash"
401
- show="#eye, #demo-preview"
402
- hide="#eye-slash"
403
- toggle="code-height"
404
- toggle-selector="#demo-code"
405
- ><i src="/assets/svg/eye-slash.svg"></i
406
- ></a>
407
- <a
408
- class="margin-right:10px"
409
- id="code"
410
- show="#code-slash"
411
- hide="#code, #demo-code"
412
- ><i src="/assets/svg/code.svg"></i
413
- ></a>
414
- <a
415
- class="margin-right:10px"
416
- hidden
417
- id="code-slash"
418
- show="#code, #demo-code"
419
- hide="#code-slash"
420
- ><i
421
- class="height:18px"
422
- src="/assets/svg/code.svg"></i
423
- ></a>
424
- <a
425
- class="margin-right:5px"
426
- fullscreen
427
- fullscreen-selector="#playground"></a>
428
- </div>
429
- </div>
430
- <!-- End SandBox -->
431
- </div>
432
- </div>
338
+ <div
339
+ class="font-size:20px position:absolute top:10px right:10px opacity:0.6"
340
+ >
341
+ <a
342
+ class="margin-right:10px"
343
+ id="eye"
344
+ show="#eye-slash"
345
+ hide="#eye, #demo-preview"
346
+ toggle="code-height"
347
+ toggle-selector="#demo-code"
348
+ ><i class="height:18px" src="/assets/svg/eye.svg"></i
349
+ ></a>
350
+ <a
351
+ class="margin-right:10px"
352
+ hidden
353
+ id="eye-slash"
354
+ show="#eye, #demo-preview"
355
+ hide="#eye-slash"
356
+ toggle="code-height"
357
+ toggle-selector="#demo-code"
358
+ ><i src="/assets/svg/eye-slash.svg"></i
359
+ ></a>
360
+ <a
361
+ class="margin-right:10px"
362
+ id="code"
363
+ show="#code-slash"
364
+ hide="#code, #demo-code"
365
+ ><i src="/assets/svg/code.svg"></i
366
+ ></a>
367
+ <a
368
+ class="margin-right:10px"
369
+ hidden
370
+ id="code-slash"
371
+ show="#code, #demo-code"
372
+ hide="#code-slash"
373
+ ><i class="height:18px" src="/assets/svg/code.svg"></i
374
+ ></a>
375
+ <a
376
+ class="margin-right:5px"
377
+ fullscreen
378
+ fullscreen-selector="#playground"
379
+ ></a>
380
+ </div>
433
381
  </div>
434
- <button
435
- href="https://github.com/CoCreate-app/CoCreate-position/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
436
- target="_blank"
437
- 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)">
438
- <i class="height:20px" src="../assets/svg/pencil-alt.svg"></i>
439
- </button>
440
- </main>
382
+ <!-- End SandBox -->
383
+ </div>
384
+ </div>
385
+ </div>
386
+ <button
387
+ href="https://github.com/CoCreate-app/CoCreate-position/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
388
+ target="_blank"
389
+ 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)"
390
+ >
391
+ <i src="../assets/svg/pencil-alt.svg"></i>
392
+ </button>
393
+ </main>
441
394
 
442
- <script src="https://CoCreate.app/dist/CoCreate.js"></script>
443
- </body>
395
+ <script src="https://CoCreate.app/dist/CoCreate.js"></script>
396
+ </body>
444
397
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/position",
3
- "version": "1.9.2",
3
+ "version": "1.10.0",
4
4
  "description": "Make any element draggable and movable. Customizable via attributes, great for popups, alerts, multitasking and displaying multiple views.",
5
5
  "keywords": [
6
6
  "position",
@@ -0,0 +1,16 @@
1
+ module.exports = {
2
+ tabWidth: 4,
3
+ semi: true,
4
+ trailingComma: "none",
5
+ bracketSameLine: true,
6
+ useTabs: true,
7
+ overrides: [
8
+ {
9
+ files: ["*.json", "*.yml", "*.yaml"],
10
+ options: {
11
+ tabWidth: 2,
12
+ useTabs: false
13
+ },
14
+ }
15
+ ],
16
+ };
package/src/index.js CHANGED
@@ -2,7 +2,7 @@ import observer from '@cocreate/observer';
2
2
  import position from './position'
3
3
  import './index.css'
4
4
 
5
- function init(){
5
+ function init() {
6
6
  let elements = document.querySelectorAll('[moveable], [positionable]');
7
7
  initElements(elements)
8
8
  }
@@ -11,27 +11,27 @@ function initElements(elements) {
11
11
  for (let element of elements)
12
12
  initElement(element)
13
13
  }
14
-
14
+
15
15
  function initElement(element) {
16
- element.position = new position(element, element.parentElement);
16
+ element.position = new position(element, element.parentElement);
17
17
  }
18
18
 
19
19
  observer.init({
20
- name: "positionAddedNodes",
21
- observe: ['addedNodes'],
22
- target: '[moveable], [positionable]',
23
- callback: mutation => {
24
- initElement(mutation.target);
25
- }
20
+ name: "positionAddedNodes",
21
+ observe: ['addedNodes'],
22
+ selector: '[moveable], [positionable]',
23
+ callback: mutation => {
24
+ initElement(mutation.target);
25
+ }
26
26
  });
27
27
 
28
28
  observer.init({
29
- name: "positionAttributes",
30
- observe: ['attributes'],
31
- attributeName: ['moveable', 'positionable'],
32
- callback: mutation => {
33
- initElement(mutation.target);
34
- }
29
+ name: "positionAttributes",
30
+ observe: ['attributes'],
31
+ attributeName: ['moveable', 'positionable'],
32
+ callback: mutation => {
33
+ initElement(mutation.target);
34
+ }
35
35
  });
36
36
 
37
37
  init()