@cocreate/position 1.14.0 → 2.0.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/.github/FUNDING.yml +1 -1
- package/.github/workflows/automated.yml +18 -7
- package/CHANGELOG.md +309 -275
- package/CONTRIBUTING.md +6 -6
- package/README.md +210 -85
- package/demo/index.html +474 -46
- package/docs/index.html +7 -7
- package/package.json +23 -17
- package/src/autoScroll.js +213 -0
- package/src/draggable/engine.js +698 -0
- package/src/draggable.js +64 -0
- package/src/eventOperator.js +15 -0
- package/src/helpers/events.js +34 -0
- package/src/index.css +19 -0
- package/src/index.js +232 -38
- package/src/position.js +443 -349
- package/src/snappable.js +572 -0
- package/test/auto-scroll.browser.cjs +307 -0
- package/webpack.config.js +1 -0
package/demo/index.html
CHANGED
|
@@ -1,46 +1,474 @@
|
|
|
1
|
-
<!
|
|
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
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>CoCreate Position | Demo</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/CoCreate-position.css" />
|
|
8
|
+
<style>
|
|
9
|
+
:root {
|
|
10
|
+
font-family: system-ui, sans-serif;
|
|
11
|
+
color: #202938;
|
|
12
|
+
background: #f4f6f8;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
body {
|
|
16
|
+
max-width: 1100px;
|
|
17
|
+
margin: 0 auto;
|
|
18
|
+
padding: 32px 20px 64px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
h1,
|
|
22
|
+
h2,
|
|
23
|
+
p {
|
|
24
|
+
margin-top: 0;
|
|
25
|
+
}
|
|
26
|
+
h1 {
|
|
27
|
+
margin-bottom: 8px;
|
|
28
|
+
}
|
|
29
|
+
.muted {
|
|
30
|
+
color: #5d6878;
|
|
31
|
+
}
|
|
32
|
+
.demo-section {
|
|
33
|
+
margin-top: 28px;
|
|
34
|
+
padding: 22px;
|
|
35
|
+
border: 1px solid #d9dee5;
|
|
36
|
+
border-radius: 10px;
|
|
37
|
+
background: white;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.floating-panel {
|
|
41
|
+
position: fixed;
|
|
42
|
+
top: 20px;
|
|
43
|
+
right: 20px;
|
|
44
|
+
z-index: 2;
|
|
45
|
+
width: 220px;
|
|
46
|
+
min-height: 110px;
|
|
47
|
+
padding: 14px;
|
|
48
|
+
border-radius: 8px;
|
|
49
|
+
background: #e8eefc;
|
|
50
|
+
box-shadow: 0 6px 24px #1c2c441f;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.snap-zones {
|
|
54
|
+
display: grid;
|
|
55
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
56
|
+
gap: 12px;
|
|
57
|
+
min-height: 240px;
|
|
58
|
+
margin-top: 24px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.snap-area {
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: stretch;
|
|
64
|
+
min-height: 240px;
|
|
65
|
+
padding: 12px;
|
|
66
|
+
border: 2px dashed #bdc7d4;
|
|
67
|
+
border-radius: 8px;
|
|
68
|
+
background: #fafbfd;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.snap-area:empty::before {
|
|
72
|
+
content: attr(data-label);
|
|
73
|
+
color: #7a8492;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.snap-area .floating-panel {
|
|
77
|
+
position: relative;
|
|
78
|
+
inset: auto;
|
|
79
|
+
z-index: auto;
|
|
80
|
+
box-sizing: border-box;
|
|
81
|
+
width: 100%;
|
|
82
|
+
min-height: 100%;
|
|
83
|
+
margin: 0;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
[droppable].snap-area {
|
|
87
|
+
outline: 3px solid #77a8f7;
|
|
88
|
+
outline-offset: 2px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
[drag-handle] {
|
|
92
|
+
margin: -14px -14px 12px;
|
|
93
|
+
padding: 10px 14px;
|
|
94
|
+
border-radius: 8px 8px 0 0;
|
|
95
|
+
background: #d4def4;
|
|
96
|
+
cursor: move;
|
|
97
|
+
user-select: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.anchor-row {
|
|
101
|
+
display: flex;
|
|
102
|
+
gap: 12px;
|
|
103
|
+
align-items: center;
|
|
104
|
+
}
|
|
105
|
+
button {
|
|
106
|
+
padding: 9px 13px;
|
|
107
|
+
cursor: pointer;
|
|
108
|
+
}
|
|
109
|
+
#anchored-panel {
|
|
110
|
+
position: fixed;
|
|
111
|
+
z-index: 3;
|
|
112
|
+
box-sizing: border-box;
|
|
113
|
+
border: 1px solid #93a6ca;
|
|
114
|
+
pointer-events: none;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.hover-demo-grid {
|
|
118
|
+
display: grid;
|
|
119
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
120
|
+
gap: 16px;
|
|
121
|
+
}
|
|
122
|
+
.hover-editor-card {
|
|
123
|
+
min-height: 290px;
|
|
124
|
+
padding: 18px;
|
|
125
|
+
border: 1px solid #d9dee5;
|
|
126
|
+
border-radius: 9px;
|
|
127
|
+
background: #fff;
|
|
128
|
+
}
|
|
129
|
+
.hover-editor-card h1,
|
|
130
|
+
.hover-editor-card h2 {
|
|
131
|
+
margin: 0 0 10px;
|
|
132
|
+
}
|
|
133
|
+
.hover-editor-card p {
|
|
134
|
+
color: #596273;
|
|
135
|
+
}
|
|
136
|
+
.hover-editor-card blockquote {
|
|
137
|
+
margin: 14px 0;
|
|
138
|
+
padding-left: 12px;
|
|
139
|
+
border-left: 3px solid #aab8d0;
|
|
140
|
+
color: #596273;
|
|
141
|
+
}
|
|
142
|
+
.hover-demo-frame {
|
|
143
|
+
display: block;
|
|
144
|
+
width: 100%;
|
|
145
|
+
height: 328px;
|
|
146
|
+
border: 1px solid #d9dee5;
|
|
147
|
+
border-radius: 9px;
|
|
148
|
+
background: white;
|
|
149
|
+
}
|
|
150
|
+
.hover-position-toolbar {
|
|
151
|
+
position: fixed;
|
|
152
|
+
z-index: 20;
|
|
153
|
+
display: block;
|
|
154
|
+
box-sizing: border-box;
|
|
155
|
+
pointer-events: none;
|
|
156
|
+
}
|
|
157
|
+
.hover-position-toolbar[hidden] {
|
|
158
|
+
display: none !important;
|
|
159
|
+
}
|
|
160
|
+
.hover-position-tools {
|
|
161
|
+
position: absolute;
|
|
162
|
+
top: 0;
|
|
163
|
+
left: 0;
|
|
164
|
+
display: flex;
|
|
165
|
+
gap: 4px;
|
|
166
|
+
padding: 5px;
|
|
167
|
+
transform: translateY(-100%);
|
|
168
|
+
border: 1px solid #bfc7d4;
|
|
169
|
+
border-radius: 8px 8px 0 0;
|
|
170
|
+
background: #202938;
|
|
171
|
+
box-shadow: 0 5px 18px #17203344;
|
|
172
|
+
pointer-events: auto;
|
|
173
|
+
}
|
|
174
|
+
.hover-position-outline {
|
|
175
|
+
width: 100%;
|
|
176
|
+
height: 100%;
|
|
177
|
+
border: 1px solid #557fd0;
|
|
178
|
+
pointer-events: none;
|
|
179
|
+
}
|
|
180
|
+
.hover-position-tools button {
|
|
181
|
+
min-width: 34px;
|
|
182
|
+
padding: 5px 8px;
|
|
183
|
+
border: 0;
|
|
184
|
+
border-radius: 4px;
|
|
185
|
+
color: white;
|
|
186
|
+
background: transparent;
|
|
187
|
+
}
|
|
188
|
+
.hover-position-tools button:hover {
|
|
189
|
+
background: #ffffff26;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.boards {
|
|
193
|
+
display: grid;
|
|
194
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
195
|
+
gap: 16px;
|
|
196
|
+
}
|
|
197
|
+
.board-group + .board-group {
|
|
198
|
+
margin-top: 24px;
|
|
199
|
+
}
|
|
200
|
+
.board-group > h3 {
|
|
201
|
+
margin: 0 0 12px;
|
|
202
|
+
font-size: 16px;
|
|
203
|
+
}
|
|
204
|
+
.board-column h3 {
|
|
205
|
+
margin: 0 0 10px;
|
|
206
|
+
font-size: 15px;
|
|
207
|
+
}
|
|
208
|
+
.drop-zone {
|
|
209
|
+
min-height: 240px;
|
|
210
|
+
padding: 12px;
|
|
211
|
+
border: 2px dashed #bdc7d4;
|
|
212
|
+
border-radius: 8px;
|
|
213
|
+
background: #fafbfd;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.drop-zone:empty::after {
|
|
217
|
+
content: "Drop a card here";
|
|
218
|
+
color: #7a8492;
|
|
219
|
+
}
|
|
220
|
+
.board-frame {
|
|
221
|
+
display: block;
|
|
222
|
+
width: 100%;
|
|
223
|
+
height: 240px;
|
|
224
|
+
border: 0;
|
|
225
|
+
border-radius: 6px;
|
|
226
|
+
background: #fafbfd;
|
|
227
|
+
}
|
|
228
|
+
.board-frame.drop-zone-frame {
|
|
229
|
+
box-sizing: border-box;
|
|
230
|
+
border: 2px dashed #bdc7d4;
|
|
231
|
+
border-radius: 8px;
|
|
232
|
+
}
|
|
233
|
+
.drop-item,
|
|
234
|
+
.copy-item {
|
|
235
|
+
position: relative;
|
|
236
|
+
margin: 0 0 10px;
|
|
237
|
+
padding: 12px;
|
|
238
|
+
border: 1px solid #d3dae3;
|
|
239
|
+
border-radius: 6px;
|
|
240
|
+
background: #fff;
|
|
241
|
+
cursor: grab;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.drop-item:active,
|
|
245
|
+
.copy-item:active {
|
|
246
|
+
cursor: grabbing;
|
|
247
|
+
}
|
|
248
|
+
[droppable] {
|
|
249
|
+
outline: 3px solid #77a8f7;
|
|
250
|
+
outline-offset: 2px;
|
|
251
|
+
}
|
|
252
|
+
[position-marker] {
|
|
253
|
+
margin: 0 0 10px;
|
|
254
|
+
border: 2px dashed #4384e8;
|
|
255
|
+
border-radius: 6px;
|
|
256
|
+
background: #eaf2ff;
|
|
257
|
+
opacity: 0.8;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
code {
|
|
261
|
+
padding: 2px 5px;
|
|
262
|
+
border-radius: 4px;
|
|
263
|
+
background: #eef1f5;
|
|
264
|
+
}
|
|
265
|
+
pre {
|
|
266
|
+
overflow: auto;
|
|
267
|
+
padding: 14px;
|
|
268
|
+
border-radius: 7px;
|
|
269
|
+
background: #f2f4f7;
|
|
270
|
+
}
|
|
271
|
+
@media (max-width: 760px) {
|
|
272
|
+
.boards {
|
|
273
|
+
grid-template-columns: 1fr;
|
|
274
|
+
}
|
|
275
|
+
.floating-panel {
|
|
276
|
+
position: relative;
|
|
277
|
+
top: auto;
|
|
278
|
+
right: auto;
|
|
279
|
+
margin: 16px 0;
|
|
280
|
+
}
|
|
281
|
+
.hover-demo-grid {
|
|
282
|
+
grid-template-columns: 1fr;
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
</style>
|
|
286
|
+
</head>
|
|
287
|
+
<body>
|
|
288
|
+
<h1>CoCreate Position</h1>
|
|
289
|
+
<p class="muted">
|
|
290
|
+
A small interactive guide to positioning, queries, and insertion
|
|
291
|
+
references.
|
|
292
|
+
</p>
|
|
293
|
+
|
|
294
|
+
<section class="demo-section">
|
|
295
|
+
<h2>Move an element</h2>
|
|
296
|
+
<p class="muted">
|
|
297
|
+
Drag the panel by its header into the left or right snap area.
|
|
298
|
+
The panel uses <code>snappable-query</code> to select its snap
|
|
299
|
+
containers.
|
|
300
|
+
</p>
|
|
301
|
+
<div
|
|
302
|
+
class="floating-panel"
|
|
303
|
+
draggable
|
|
304
|
+
snappable-query="$top .snap-area[]">
|
|
305
|
+
<div drag-handle>Drag this panel</div>
|
|
306
|
+
Its position can be controlled with CSS and the Position events.
|
|
307
|
+
</div>
|
|
308
|
+
<div class="snap-zones">
|
|
309
|
+
<div class="snap-area" data-label="Left snap area"></div>
|
|
310
|
+
<div class="snap-area" data-label="Right snap area"></div>
|
|
311
|
+
</div>
|
|
312
|
+
<pre><code><div draggable snappable-query="$top .snap-area[]">...</div></code></pre>
|
|
313
|
+
</section>
|
|
314
|
+
|
|
315
|
+
<section class="demo-section">
|
|
316
|
+
<h2>Overlay a box with position-query</h2>
|
|
317
|
+
<p class="muted">
|
|
318
|
+
Click the trigger to show a box that matches its margins and size.
|
|
319
|
+
</p>
|
|
320
|
+
<div class="anchor-row">
|
|
321
|
+
<button
|
|
322
|
+
id="placement-anchor"
|
|
323
|
+
type="button"
|
|
324
|
+
position-events="click"
|
|
325
|
+
position-query="$this"
|
|
326
|
+
position-element="$top #anchored-panel">
|
|
327
|
+
Show target box
|
|
328
|
+
</button>
|
|
329
|
+
<div id="anchored-panel" hidden></div>
|
|
330
|
+
</div>
|
|
331
|
+
<pre><code><button position-events="click" position-query="$this" position-element="$top #target-box">Show target box</button>
|
|
332
|
+
<div id="target-box" hidden></div></code></pre>
|
|
333
|
+
</section>
|
|
334
|
+
|
|
335
|
+
<section class="demo-section">
|
|
336
|
+
<h2>Follow hovered content in a page and an iframe</h2>
|
|
337
|
+
<p class="muted">
|
|
338
|
+
Hover headings, paragraphs, or inline content in either editor.
|
|
339
|
+
The outline follows the hovered text while the toolbar controls sit
|
|
340
|
+
just above its bounds.
|
|
341
|
+
</p>
|
|
342
|
+
<div class="hover-demo-grid">
|
|
343
|
+
<div
|
|
344
|
+
class="hover-editor-card"
|
|
345
|
+
position-events="hover"
|
|
346
|
+
position-query="*:hover[]"
|
|
347
|
+
position-element="$top #hover-format-toolbar"
|
|
348
|
+
position-box="text"
|
|
349
|
+
contenteditable="true">
|
|
350
|
+
<h1>Page editor</h1>
|
|
351
|
+
<h2>Hover a heading</h2>
|
|
352
|
+
<p>
|
|
353
|
+
Move across this rich text sample to see the toolbar
|
|
354
|
+
follow each element.
|
|
355
|
+
</p>
|
|
356
|
+
<blockquote>
|
|
357
|
+
Nested content gives the hover query several matching
|
|
358
|
+
ancestors.
|
|
359
|
+
</blockquote>
|
|
360
|
+
<p>
|
|
361
|
+
<strong>Bold text</strong> and <em>italic text</em> are
|
|
362
|
+
separate hover targets.
|
|
363
|
+
</p>
|
|
364
|
+
</div>
|
|
365
|
+
<iframe
|
|
366
|
+
class="hover-demo-frame"
|
|
367
|
+
title="Rich text editor inside an iframe"
|
|
368
|
+
position-events="hover"
|
|
369
|
+
position-query="$contentDocument *:hover[]"
|
|
370
|
+
position-element="$top #hover-format-toolbar"
|
|
371
|
+
position-box="text"
|
|
372
|
+
srcdoc='<!doctype html><html><head><meta charset="utf-8"><style>html,body{box-sizing:border-box;min-height:100%;margin:0}body{padding:18px;font:16px/1.5 system-ui,sans-serif;color:#202938}h1,h2{margin:0 0 10px}p{color:#596273}blockquote{margin:14px 0;padding-left:12px;border-left:3px solid #aab8d0;color:#596273}</style></head><body contenteditable="true"><h1>Iframe editor</h1><h2>Hover a heading</h2><p>Hover inside the frame. Its document tracks the pointer and the parent positions the toolbar.</p><blockquote>This nested quote is another target.</blockquote><p><strong>Bold text</strong> and <em>italic text</em> are separate hover targets.</p></body></html>'></iframe>
|
|
373
|
+
</div>
|
|
374
|
+
<div
|
|
375
|
+
id="hover-format-toolbar"
|
|
376
|
+
class="hover-position-toolbar"
|
|
377
|
+
hidden
|
|
378
|
+
aria-label="Formatting toolbar">
|
|
379
|
+
<div class="hover-position-tools">
|
|
380
|
+
<button type="button" aria-label="Heading 1">
|
|
381
|
+
<strong>H1</strong>
|
|
382
|
+
</button>
|
|
383
|
+
<button type="button" aria-label="Heading 2">
|
|
384
|
+
<strong>H2</strong>
|
|
385
|
+
</button>
|
|
386
|
+
<button type="button" aria-label="Bold">
|
|
387
|
+
<strong>B</strong>
|
|
388
|
+
</button>
|
|
389
|
+
<button type="button" aria-label="Italic"><em>I</em></button>
|
|
390
|
+
<button type="button" aria-label="Link">↗</button>
|
|
391
|
+
</div>
|
|
392
|
+
<div class="hover-position-outline"></div>
|
|
393
|
+
</div>
|
|
394
|
+
<pre><code><div position-events="hover" position-query="*:hover[]" position-element="$top #hover-format-toolbar" position-box="text">...</div>
|
|
395
|
+
<iframe position-events="hover" position-query="$contentDocument *:hover[]" position-element="$top #hover-format-toolbar" position-box="text">...</iframe>
|
|
396
|
+
<div id="hover-format-toolbar" class="hover-position-toolbar" hidden>
|
|
397
|
+
<div class="hover-position-tools">...toolbar controls...</div>
|
|
398
|
+
<div class="hover-position-outline"></div>
|
|
399
|
+
</div></code></pre>
|
|
400
|
+
</section>
|
|
401
|
+
|
|
402
|
+
<section class="demo-section">
|
|
403
|
+
<h2>Container query and insertion marker</h2>
|
|
404
|
+
<p class="muted">
|
|
405
|
+
Each row compares two regular drop zones with an iframe used as the
|
|
406
|
+
drop zone and an iframe containing a drop zone.
|
|
407
|
+
</p>
|
|
408
|
+
<div class="board-group">
|
|
409
|
+
<h3>Move cards</h3>
|
|
410
|
+
<div
|
|
411
|
+
class="boards"
|
|
412
|
+
draggable-query="$top #move-board-one .drop-item[], $top #move-board-two .drop-item[], $top #move-board-three-frame $contentDocument .drop-item[], $top #move-board-four-frame $contentDocument .drop-item[]"
|
|
413
|
+
droppable-query="$top #move-board-one, $top #move-board-two, $top #move-board-three-frame $contentDocument body, $top #move-board-four-frame $contentDocument .drop-zone">
|
|
414
|
+
<div class="board-column">
|
|
415
|
+
<h3>Board one</h3>
|
|
416
|
+
<div class="drop-zone" id="move-board-one">
|
|
417
|
+
<div class="drop-item">Move card A</div>
|
|
418
|
+
</div>
|
|
419
|
+
</div>
|
|
420
|
+
<div class="board-column">
|
|
421
|
+
<h3>Board two</h3>
|
|
422
|
+
<div class="drop-zone" id="move-board-two">
|
|
423
|
+
<div class="drop-item">Move card B</div>
|
|
424
|
+
</div>
|
|
425
|
+
</div>
|
|
426
|
+
<div class="board-column">
|
|
427
|
+
<h3>Board three (iframe surface)</h3>
|
|
428
|
+
<iframe
|
|
429
|
+
class="board-frame drop-zone-frame"
|
|
430
|
+
id="move-board-three-frame"
|
|
431
|
+
title="Move card to iframe surface"
|
|
432
|
+
srcdoc='<!doctype html><html><head><meta charset="utf-8"><style>html,body{box-sizing:border-box;width:100%;height:100%;margin:0;background:#fafbfd}</style></head><body></body></html>'></iframe>
|
|
433
|
+
</div>
|
|
434
|
+
<div class="board-column">
|
|
435
|
+
<h3>Board four (drop zone in iframe)</h3>
|
|
436
|
+
<iframe class="board-frame" id="move-board-four-frame" title="Move card into iframe drop zone"
|
|
437
|
+
srcdoc='<!doctype html><html><head><meta charset="utf-8"><style>body{margin:0;padding:10px;font:14px system-ui,sans-serif}.drop-zone{box-sizing:border-box;min-height:218px;padding:12px;border:2px dashed #bdc7d4;border-radius:8px;background:#fafbfd}.drop-item{padding:10px;border:1px solid #bdc7d4;border-radius:6px;background:#eaf2ff;cursor:grab;user-select:none}.drop-zone:empty:before{content:"Drop inside this iframe";color:#7a8492}</style></head><body><div class="drop-zone"><div class="drop-item">Move card from iframe</div></div></body></html>'></iframe>
|
|
438
|
+
</div>
|
|
439
|
+
</div>
|
|
440
|
+
</div>
|
|
441
|
+
<div class="board-group">
|
|
442
|
+
<h3>Clone cards</h3>
|
|
443
|
+
<div
|
|
444
|
+
class="boards"
|
|
445
|
+
clonable-query="$top #clone-board-one .copy-item[], $top #clone-board-two .copy-item[], $top #clone-board-three-frame $contentDocument .copy-item[], $top #clone-board-four-frame $contentDocument .copy-item[]"
|
|
446
|
+
droppable-query="$top #clone-board-one, $top #clone-board-two, $top #clone-board-three-frame $contentDocument body, $top #clone-board-four-frame $contentDocument .drop-zone">
|
|
447
|
+
<div class="board-column">
|
|
448
|
+
<h3>Board one</h3>
|
|
449
|
+
<div class="drop-zone" id="clone-board-one"><div class="copy-item">Clone card C</div></div>
|
|
450
|
+
</div>
|
|
451
|
+
<div class="board-column">
|
|
452
|
+
<h3>Board two</h3>
|
|
453
|
+
<div class="drop-zone" id="clone-board-two"></div>
|
|
454
|
+
</div>
|
|
455
|
+
<div class="board-column">
|
|
456
|
+
<h3>Board three (iframe surface)</h3>
|
|
457
|
+
<iframe class="board-frame drop-zone-frame" id="clone-board-three-frame" title="Clone card to iframe surface"
|
|
458
|
+
srcdoc='<!doctype html><html><head><meta charset="utf-8"><style>html,body{box-sizing:border-box;width:100%;height:100%;margin:0;background:#fafbfd}</style></head><body></body></html>'></iframe>
|
|
459
|
+
</div>
|
|
460
|
+
<div class="board-column">
|
|
461
|
+
<h3>Board four (drop zone in iframe)</h3>
|
|
462
|
+
<iframe class="board-frame" id="clone-board-four-frame" title="Clone card into iframe drop zone"
|
|
463
|
+
srcdoc='<!doctype html><html><head><meta charset="utf-8"><style>body{margin:0;padding:10px;font:14px system-ui,sans-serif}.drop-zone{box-sizing:border-box;min-height:218px;padding:12px;border:2px dashed #bdc7d4;border-radius:8px;background:#fafbfd}.copy-item{padding:10px;border:1px solid #bdc7d4;border-radius:6px;background:#eaf2ff;cursor:grab;user-select:none}.drop-zone:empty:before{content:"Drop inside this iframe";color:#7a8492}</style></head><body><div class="drop-zone"><div class="copy-item">Clone card from iframe</div></div></body></html>'></iframe>
|
|
464
|
+
</div>
|
|
465
|
+
</div>
|
|
466
|
+
</div>
|
|
467
|
+
<pre><code>draggable-query="$top #board-one .drop-item[], $top #frame $contentDocument .drop-item[]"
|
|
468
|
+
droppable-query="$top #board-one, $top #frame $contentDocument body"
|
|
469
|
+
clonable-query="$top #board-one .copy-item[], $top #frame $contentDocument .copy-item[]"</code></pre>
|
|
470
|
+
</section>
|
|
471
|
+
|
|
472
|
+
<script src="../dist/CoCreate-position.min.js"></script>
|
|
473
|
+
</body>
|
|
474
|
+
</html>
|
package/docs/index.html
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
rel="icon"
|
|
10
10
|
type="image/png"
|
|
11
11
|
sizes="32x32"
|
|
12
|
-
href="https://
|
|
12
|
+
href="https://CoCreateJS.com/images/favicon.ico" />
|
|
13
13
|
<meta
|
|
14
14
|
name="description"
|
|
15
15
|
content="A draggable, customizable Pop up that toggle hiddent content via attributes. Great for multitasking and showing multiple views." />
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
<meta name="robots" content="index,follow" />
|
|
20
20
|
<meta
|
|
21
21
|
property="og:image"
|
|
22
|
-
content="https://cdn.
|
|
22
|
+
content="https://cdn.CoCreateJS.com/docs/position.png" />
|
|
23
23
|
|
|
24
24
|
<link
|
|
25
25
|
rel="stylesheet"
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
share-title="CoCreate-position"
|
|
74
74
|
share-height="600"
|
|
75
75
|
share-width="700"
|
|
76
|
-
share-media="https://cdn.
|
|
76
|
+
share-media="https://cdn.CoCreateJS.com/docs/position.png"
|
|
77
77
|
hover="display:block!important"
|
|
78
78
|
hover-query=".social-networks">
|
|
79
79
|
<div class="display:none social-networks">
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
></a>
|
|
105
105
|
</div>
|
|
106
106
|
<a
|
|
107
|
-
href="https://github.com/
|
|
107
|
+
href="https://github.com/CoCreateJS/CoCreate-position"
|
|
108
108
|
target="_blank"
|
|
109
109
|
class="margin-right:15px"
|
|
110
110
|
><i src="/assets/svg/github.svg"></i
|
|
@@ -150,7 +150,7 @@
|
|
|
150
150
|
<pre>
|
|
151
151
|
<code class="language-html">
|
|
152
152
|
<button>
|
|
153
|
-
<a target="position" href="https://server.
|
|
153
|
+
<a target="position" href="https://server.CoCreateJS.com/CoCreate-adminUI/module_datatable.html"
|
|
154
154
|
position-ajax="false"
|
|
155
155
|
position-width="520px"
|
|
156
156
|
position-height="100%"
|
|
@@ -432,13 +432,13 @@
|
|
|
432
432
|
</div>
|
|
433
433
|
</div>
|
|
434
434
|
<button
|
|
435
|
-
href="https://github.com/
|
|
435
|
+
href="https://github.com/CoCreateJS/CoCreate-position/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
|
|
436
436
|
target="_blank"
|
|
437
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
438
|
<i src="../assets/svg/pencil-alt.svg"></i>
|
|
439
439
|
</button>
|
|
440
440
|
</main>
|
|
441
441
|
|
|
442
|
-
<script src="https://
|
|
442
|
+
<script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
|
|
443
443
|
</body>
|
|
444
444
|
</html>
|
package/package.json
CHANGED
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocreate/position",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
|
+
"description": "Declarative DOM positioning, dragging, snapping, and drag-and-drop for web interfaces.",
|
|
5
5
|
"keywords": [
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
6
|
+
"positioning",
|
|
7
|
+
"drag-and-drop",
|
|
8
|
+
"draggable",
|
|
9
|
+
"snapping",
|
|
10
|
+
"floating-ui",
|
|
11
|
+
"popover",
|
|
12
|
+
"tooltip",
|
|
13
|
+
"iframe",
|
|
14
|
+
"declarative",
|
|
15
|
+
"dom",
|
|
16
|
+
"cocreate"
|
|
14
17
|
],
|
|
15
18
|
"publishConfig": {
|
|
16
19
|
"access": "public"
|
|
@@ -18,28 +21,31 @@
|
|
|
18
21
|
"scripts": {
|
|
19
22
|
"start": "webpack --config webpack.config.js",
|
|
20
23
|
"build": "webpack --mode=production --config webpack.config.js",
|
|
21
|
-
"dev": "webpack --config webpack.config.js --watch"
|
|
24
|
+
"dev": "webpack --config webpack.config.js --watch",
|
|
25
|
+
"test": "node --test test/*.cjs"
|
|
22
26
|
},
|
|
23
27
|
"repository": {
|
|
24
28
|
"type": "git",
|
|
25
|
-
"url": "git+https://github.com/
|
|
29
|
+
"url": "git+https://github.com/CoCreateJS/position.git"
|
|
26
30
|
},
|
|
27
31
|
"author": "CoCreate LLC",
|
|
28
32
|
"license": "MIT",
|
|
29
33
|
"bugs": {
|
|
30
|
-
"url": "https://github.com/
|
|
34
|
+
"url": "https://github.com/CoCreateJS/position/issues"
|
|
31
35
|
},
|
|
32
|
-
"homepage": "https://
|
|
36
|
+
"homepage": "https://CoCreateJS.com/docs/position",
|
|
33
37
|
"funding": {
|
|
34
38
|
"type": "GitHub Sponsors ❤",
|
|
35
|
-
"url": "https://github.com/sponsors/
|
|
39
|
+
"url": "https://github.com/sponsors/CoCreateJS"
|
|
36
40
|
},
|
|
37
41
|
"main": "./src/index.js",
|
|
38
42
|
"dependencies": {
|
|
39
|
-
"@cocreate/observer": "^1.
|
|
43
|
+
"@cocreate/observer": "^1.23.0",
|
|
44
|
+
"@cocreate/utils": "^1.54.0"
|
|
40
45
|
},
|
|
41
46
|
"devDependencies": {
|
|
42
|
-
"@cocreate/webpack": "^1.
|
|
47
|
+
"@cocreate/webpack": "^1.9.0",
|
|
48
|
+
"playwright-core": "^1.64.1"
|
|
43
49
|
},
|
|
44
50
|
"allowScripts": {
|
|
45
51
|
"@cocreate/observer@1.19.0": true,
|