uiik 1.1.0 → 1.3.0-alpha

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.
Files changed (27) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +1 -0
  3. package/detector.d.ts +0 -19
  4. package/draggable.d.ts +1 -18
  5. package/droppable.d.ts +0 -21
  6. package/index.d.ts +2 -0
  7. package/index.esm.js +2582 -2
  8. package/index.js +2625 -2
  9. package/package.json +4 -7
  10. package/resizable.d.ts +3 -15
  11. package/rotatable.d.ts +3 -16
  12. package/selectable.d.ts +0 -20
  13. package/sortable.d.ts +0 -24
  14. package/splittable.d.ts +0 -17
  15. package/transform.d.ts +19 -0
  16. package/types.d.ts +39 -307
  17. package/utils.d.ts +41 -12
  18. package/detector.js +0 -128
  19. package/draggable.js +0 -530
  20. package/droppable.js +0 -160
  21. package/resizable.js +0 -308
  22. package/rotatable.js +0 -137
  23. package/selectable.js +0 -281
  24. package/sortable.js +0 -441
  25. package/splittable.js +0 -340
  26. package/types.js +0 -116
  27. package/utils.js +0 -58
package/detector.js DELETED
@@ -1,128 +0,0 @@
1
- var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
2
- if (kind === "m") throw new TypeError("Private method is not writable");
3
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
4
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
5
- return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
6
- };
7
- var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
8
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
9
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
10
- return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
- };
12
- var _CollisionDetector__targets;
13
- /* eslint-disable max-len */
14
- /**
15
- * CollisionDetector
16
- * @author holyhigh2
17
- */
18
- import { isElement, isFunction, isString } from "myfx/is";
19
- import { flatMap } from "myfx/collection";
20
- import { assign } from "myfx/object";
21
- import { getOffset } from "./utils";
22
- export class CollisionDetector {
23
- constructor(el, targets, opts) {
24
- _CollisionDetector__targets.set(this, void 0);
25
- __classPrivateFieldSet(this, _CollisionDetector__targets, targets, "f");
26
- this.opts = {
27
- container: document.body
28
- };
29
- this.opts = assign(this.opts, opts);
30
- const domEl = isString(el) ? document.querySelector(el) : el;
31
- if (!domEl) {
32
- console.error('Invalid selector "' + el + '"');
33
- return;
34
- }
35
- const ele = domEl;
36
- this.el = domEl;
37
- //el data
38
- const offset = getOffset(ele, this.opts.container);
39
- const rect = { x: offset.x, y: offset.y, width: ele.offsetWidth, height: ele.offsetHeight };
40
- this.elData = {
41
- x1: rect.x,
42
- y1: rect.y,
43
- x2: rect.x + rect.width,
44
- y2: rect.y + rect.height,
45
- };
46
- //targets data
47
- this.update();
48
- }
49
- /**
50
- * update targets data if them changed
51
- */
52
- update() {
53
- let targets;
54
- if (isFunction(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
55
- targets = __classPrivateFieldGet(this, _CollisionDetector__targets, "f").call(this);
56
- }
57
- else if (isString(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
58
- targets = this.opts.container.querySelectorAll(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"));
59
- }
60
- else if (isElement(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
61
- targets = [__classPrivateFieldGet(this, _CollisionDetector__targets, "f")];
62
- }
63
- else {
64
- targets = __classPrivateFieldGet(this, _CollisionDetector__targets, "f");
65
- }
66
- this.targetsData = flatMap(targets, t => {
67
- if (!t)
68
- return [];
69
- if (!isElement(t))
70
- return [];
71
- const offset = getOffset(t, this.opts.container);
72
- const rect = { x: offset.x, y: offset.y, width: t.offsetWidth, height: t.offsetHeight };
73
- return {
74
- x1: rect.x,
75
- y1: rect.y,
76
- x2: rect.x + rect.width,
77
- y2: rect.y + rect.height,
78
- el: t
79
- };
80
- });
81
- }
82
- getOverlaps(x1, y1, x2, y2) {
83
- let elData = this.elData;
84
- if (x1 && x2 && y1 && y2) {
85
- elData = {
86
- x1,
87
- y1,
88
- x2,
89
- y2,
90
- };
91
- }
92
- let overlaps = flatMap(this.targetsData, (td, i) => {
93
- if (elData.x2 < td.x1 || elData.x1 > td.x2 || elData.y2 < td.y1 || elData.y1 > td.y2)
94
- return [];
95
- return td.el;
96
- });
97
- return overlaps;
98
- }
99
- getInclusions(x1, y1, x2, y2) {
100
- let elData = this.elData;
101
- if (x1 && x2 && y1 && y2) {
102
- elData = {
103
- x1,
104
- y1,
105
- x2,
106
- y2,
107
- };
108
- }
109
- let contains = flatMap(this.targetsData, (td, i) => {
110
- if (elData.x2 >= td.x2 && elData.x1 <= td.x1 && elData.y2 >= td.y2 && elData.y1 <= td.y1)
111
- return td.el;
112
- return [];
113
- });
114
- return contains;
115
- }
116
- }
117
- _CollisionDetector__targets = new WeakMap();
118
- /**
119
- * create a detector for the el and return
120
- * @param el element to be detected
121
- * @param targets
122
- * @param opts CollisionDetectorOptions
123
- * @param opts.container a root element of targets
124
- * @returns
125
- */
126
- export function newCollisionDetector(el, targets, opts) {
127
- return new CollisionDetector(el, targets, opts);
128
- }
package/draggable.js DELETED
@@ -1,530 +0,0 @@
1
- var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
2
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
3
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
4
- return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
5
- };
6
- var _Draggable_handleMap;
7
- /* eslint-disable require-jsdoc */
8
- /* eslint-disable max-len */
9
- /**
10
- * dom dragger
11
- * @author holyhigh2
12
- */
13
- import { each, map, some, } from "myfx/collection";
14
- import { assign } from 'myfx/object';
15
- import { split } from 'myfx/string';
16
- import { closest } from 'myfx/tree';
17
- import { compact } from 'myfx/array';
18
- import { isString, isArrayLike, isFunction, isUndefined, isElement, isArray, isNumber, isDefined, } from 'myfx/is';
19
- import { Uii } from "./types";
20
- import { EDGE_THRESHOLD, getOffset, lockPage, restoreCursor, saveCursor, setCursor, unlockPage } from "./utils";
21
- const DRAGGER_GROUPS = {};
22
- const CLASS_DRAGGABLE = "uii-draggable";
23
- const CLASS_DRAGGABLE_HANDLE = "uii-draggable-handle";
24
- const CLASS_DRAGGABLE_ACTIVE = "uii-draggable-active";
25
- const CLASS_DRAGGABLE_GHOST = "uii-draggable-ghost";
26
- /**
27
- * 用于表示一个或多个可拖动元素的定义
28
- * > 可用CSS接口
29
- * - .uii-draggable
30
- * - .uii-draggable-handle
31
- * - .uii-draggable-active
32
- * - .uii-draggable-ghost
33
- * @public
34
- */
35
- export class Draggable extends Uii {
36
- constructor(els, opts) {
37
- super(els, assign({
38
- container: false,
39
- threshold: 0,
40
- ghost: false,
41
- direction: "",
42
- scroll: true,
43
- snapOptions: {
44
- tolerance: 10,
45
- }
46
- }, opts));
47
- _Draggable_handleMap.set(this, new WeakMap());
48
- if (this.opts.handle) {
49
- each(this.ele, (el) => {
50
- const h = el.querySelector(this.opts.handle);
51
- if (!h) {
52
- console.error('No handle found "' + this.opts.handle + '"');
53
- return false;
54
- }
55
- __classPrivateFieldGet(this, _Draggable_handleMap, "f").set(el, h);
56
- });
57
- }
58
- this.onOptionChanged(this.opts);
59
- //put into group
60
- if (this.opts.group) {
61
- if (!DRAGGER_GROUPS[this.opts.group]) {
62
- DRAGGER_GROUPS[this.opts.group] = [];
63
- }
64
- DRAGGER_GROUPS[this.opts.group].push(...this.ele);
65
- }
66
- each(this.ele, (el) => {
67
- bindEvent(this.registerEvent.bind(this), el, this.opts, __classPrivateFieldGet(this, _Draggable_handleMap, "f"));
68
- if (isDefined(this.opts.type))
69
- el.dataset.dropType = this.opts.type;
70
- el.classList.toggle(CLASS_DRAGGABLE, true);
71
- const ee = __classPrivateFieldGet(this, _Draggable_handleMap, "f").get(el) || el;
72
- ee.classList.toggle(CLASS_DRAGGABLE_HANDLE, true);
73
- if (isDefined(this.opts.cursor)) {
74
- el.style.cursor = this.opts.cursor.default || 'move';
75
- if (isDefined(this.opts.cursor.over)) {
76
- el.dataset.cursorOver = this.opts.cursor.over;
77
- el.dataset.cursorActive = this.opts.cursor.active || 'move';
78
- }
79
- }
80
- });
81
- }
82
- /**
83
- * @internal
84
- */
85
- onOptionChanged(opts) {
86
- const droppable = opts.droppable;
87
- if (!isFunction(droppable)) {
88
- if (isUndefined(droppable)) {
89
- opts.droppable = () => { };
90
- }
91
- else if (isString(droppable)) {
92
- opts.droppable = () => document.querySelectorAll(droppable);
93
- }
94
- else if (isArrayLike(droppable)) {
95
- opts.droppable = () => droppable;
96
- }
97
- else if (isElement(droppable)) {
98
- opts.droppable = () => [droppable];
99
- }
100
- }
101
- }
102
- }
103
- _Draggable_handleMap = new WeakMap();
104
- function bindEvent(registerEvent, el, opts, handleMap) {
105
- registerEvent(el, "mousedown", (e) => {
106
- var _a;
107
- // get options
108
- let dragDom = e.currentTarget;
109
- let t = e.target;
110
- if (!t)
111
- return;
112
- let handle = handleMap.get(dragDom);
113
- if (handle && !handle.contains(t)) {
114
- return;
115
- }
116
- const filter = opts.filter;
117
- //check filter
118
- if (filter) {
119
- if (some(el.querySelectorAll(filter), ele => ele.contains(t)))
120
- return;
121
- }
122
- const computedStyle = window.getComputedStyle(dragDom);
123
- const container = dragDom.offsetParent || document.body;
124
- const inContainer = opts.container;
125
- const threshold = opts.threshold || 0;
126
- const ghost = opts.ghost;
127
- const ghostClass = opts.ghostClass;
128
- const direction = opts.direction;
129
- const onStart = opts.onStart;
130
- const onDrag = opts.onDrag;
131
- const onEnd = opts.onEnd;
132
- const onClone = opts.onClone;
133
- const originalZIndex = computedStyle.zIndex;
134
- let zIndex = opts.zIndex || originalZIndex;
135
- const classes = opts.classes || '';
136
- const group = opts.group;
137
- if (group) {
138
- let i = -1;
139
- each(DRAGGER_GROUPS[group], el => {
140
- const z = parseInt(window.getComputedStyle(el).zIndex) || 0;
141
- if (z > i)
142
- i = z;
143
- });
144
- zIndex = i + 1;
145
- }
146
- const scroll = opts.scroll;
147
- const scrollSpeed = opts.scrollSpeed || 10;
148
- let gridX, gridY;
149
- const grid = opts.grid;
150
- if (isArray(grid)) {
151
- gridX = grid[0];
152
- gridY = grid[1];
153
- }
154
- else if (isNumber(grid)) {
155
- gridX = gridY = grid;
156
- }
157
- const snapOn = opts.snap;
158
- let snappable;
159
- const snapTolerance = ((_a = opts.snapOptions) === null || _a === void 0 ? void 0 : _a.tolerance) || 10;
160
- const onSnap = opts.onSnap;
161
- let lastSnapDirY = "", lastSnapDirX = "";
162
- let lastSnapping = "";
163
- let parentOffsetX = 0, parentOffsetY = 0;
164
- if (snapOn) {
165
- snappable = map(document.querySelectorAll(snapOn), (el) => {
166
- let offX = 0, offY = 0;
167
- closest(el, (el) => {
168
- offX += el.offsetLeft;
169
- offY += el.offsetTop;
170
- return false;
171
- }, "offsetParent");
172
- return {
173
- x1: offX,
174
- y1: offY,
175
- x2: offX + el.offsetWidth,
176
- y2: offY + el.offsetHeight,
177
- el: el,
178
- };
179
- });
180
- closest(dragDom, (el, times) => {
181
- if (times > 0) {
182
- parentOffsetX += el.offsetLeft;
183
- parentOffsetY += el.offsetTop;
184
- }
185
- return false;
186
- }, "offsetParent");
187
- }
188
- const originW = dragDom.offsetWidth + parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
189
- const originH = dragDom.offsetHeight + parseFloat(computedStyle.borderTopWidth) + parseFloat(computedStyle.borderBottomWidth);
190
- // boundary
191
- let minX = 0;
192
- let minY = 0;
193
- let maxX = 0;
194
- let maxY = 0;
195
- if (inContainer) {
196
- maxX = container.scrollWidth - originW;
197
- maxY = container.scrollHeight - originH;
198
- }
199
- if (maxX < 0)
200
- maxX = 0;
201
- if (maxY < 0)
202
- maxY = 0;
203
- //start point
204
- const rect = container.getBoundingClientRect();
205
- const offset = getOffset(t, container);
206
- const ox = e.offsetX || 0;
207
- const oy = e.offsetY || 0;
208
- let hitPosX = offset.x + ox + container.scrollLeft;
209
- let hitPosY = offset.y + oy + container.scrollTop;
210
- let cursorX = ox, cursorY = e.offsetY;
211
- if (e.target !== dragDom) {
212
- const offset = getOffset(t, dragDom);
213
- const style = window.getComputedStyle(t);
214
- cursorX = offset.x + ox + parseFloat(style.borderLeftWidth);
215
- cursorY = offset.y + oy + parseFloat(style.borderTopWidth);
216
- }
217
- const cursorAt = opts.cursorAt;
218
- if (cursorAt) {
219
- const l = cursorAt.left;
220
- const t = cursorAt.top;
221
- if (isString(l)) {
222
- cursorX = parseFloat(l) / 100 * dragDom.offsetWidth;
223
- }
224
- else {
225
- cursorX = l;
226
- }
227
- if (isString(t)) {
228
- cursorY = parseFloat(t) / 100 * dragDom.offsetWidth;
229
- }
230
- else {
231
- cursorY = t;
232
- }
233
- }
234
- const style = dragDom.style;
235
- let dragging = false;
236
- let copyNode;
237
- let timer = null;
238
- let toLeft = false;
239
- let toTop = false;
240
- let toRight = false;
241
- let toBottom = false;
242
- saveCursor();
243
- const dragListener = (ev) => {
244
- var _a;
245
- const newX = ev.clientX - rect.x + container.scrollLeft;
246
- const newY = ev.clientY - rect.y + container.scrollTop;
247
- let offsetx = newX - hitPosX;
248
- let offsety = newY - hitPosY;
249
- if (!dragging) {
250
- if (Math.abs(offsetx) > threshold || Math.abs(offsety) > threshold) {
251
- dragging = true;
252
- if (ghost) {
253
- if (isFunction(ghost)) {
254
- copyNode = ghost(dragDom);
255
- }
256
- else {
257
- copyNode = dragDom.cloneNode(true);
258
- copyNode.style.opacity = "0.3";
259
- copyNode.style.pointerEvents = "none";
260
- copyNode.style.position = "absolute";
261
- }
262
- copyNode.style.left = dragDom.style.left;
263
- copyNode.style.top = dragDom.style.top;
264
- copyNode.style.zIndex = zIndex + '';
265
- if (ghostClass) {
266
- copyNode.classList.add(...compact(split(ghostClass, ' ')));
267
- }
268
- copyNode.classList.add(...compact(split(classes, ' ')));
269
- copyNode.classList.toggle(CLASS_DRAGGABLE_GHOST, true);
270
- (_a = dragDom.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(copyNode);
271
- onClone && onClone({ clone: copyNode }, ev);
272
- }
273
- //apply classes
274
- dragDom.classList.add(...compact(split(classes, ' ')));
275
- if (!copyNode)
276
- dragDom.style.zIndex = zIndex + '';
277
- dragDom.classList.toggle(CLASS_DRAGGABLE_ACTIVE, true);
278
- onStart && onStart({ draggable: dragDom }, ev);
279
- lockPage();
280
- if (opts.cursor) {
281
- setCursor(opts.cursor.active || 'move');
282
- }
283
- //notify
284
- const customEv = new Event("uii-dragactive", { "bubbles": true, "cancelable": false });
285
- dragDom.dispatchEvent(customEv);
286
- }
287
- else {
288
- ev.preventDefault();
289
- return false;
290
- }
291
- }
292
- //edge detect
293
- if (scroll) {
294
- const ltX = ev.clientX - rect.x;
295
- const ltY = ev.clientY - rect.y;
296
- const rbX = rect.x + rect.width - ev.clientX;
297
- const rbY = rect.y + rect.height - ev.clientY;
298
- toLeft = ltX < EDGE_THRESHOLD;
299
- toTop = ltY < EDGE_THRESHOLD;
300
- toRight = rbX < EDGE_THRESHOLD;
301
- toBottom = rbY < EDGE_THRESHOLD;
302
- if (toLeft || toTop
303
- ||
304
- toRight || toBottom) {
305
- if (!timer) {
306
- timer = setInterval(() => {
307
- if (toLeft) {
308
- container.scrollLeft -= scrollSpeed;
309
- }
310
- else if (toRight) {
311
- container.scrollLeft += scrollSpeed;
312
- }
313
- if (toTop) {
314
- container.scrollTop -= scrollSpeed;
315
- }
316
- else if (toBottom) {
317
- container.scrollTop += scrollSpeed;
318
- }
319
- }, 20);
320
- }
321
- }
322
- else {
323
- if (timer) {
324
- clearInterval(timer);
325
- timer = null;
326
- }
327
- }
328
- }
329
- let x = newX - cursorX;
330
- let y = newY - cursorY;
331
- //grid
332
- if (isNumber(gridX) && isNumber(gridY)) {
333
- x = ((x / gridX) >> 0) * gridX;
334
- y = ((y / gridY) >> 0) * gridY;
335
- }
336
- if (inContainer) {
337
- if (x < minX)
338
- x = minX;
339
- if (y < minY)
340
- y = minY;
341
- if (x > maxX)
342
- x = maxX;
343
- if (y > maxY)
344
- y = maxY;
345
- }
346
- let canDrag = true;
347
- let emitSnap = false;
348
- if (snapOn) {
349
- const currPageX1 = parentOffsetX + x;
350
- const currPageY1 = parentOffsetY + y;
351
- const currPageX2 = currPageX1 + originW;
352
- const currPageY2 = currPageY1 + originH;
353
- //check snappable
354
- let snapX = NaN, snapY = NaN;
355
- let targetX, targetY;
356
- let snapDirX, snapDirY;
357
- if (!direction || direction === "v") {
358
- each(snappable, (data) => {
359
- if (Math.abs(data.y1 - currPageY1) <= snapTolerance) {
360
- //top parallel
361
- snapY = data.y1;
362
- snapDirY = "t2t";
363
- }
364
- else if (Math.abs(data.y2 - currPageY1) <= snapTolerance) {
365
- //b2t
366
- snapY = data.y2;
367
- snapDirY = "t2b";
368
- }
369
- else if (Math.abs(data.y1 - currPageY2) <= snapTolerance) {
370
- //t2b
371
- snapY = data.y1 - originH;
372
- snapDirY = "b2t";
373
- }
374
- else if (Math.abs(data.y2 - currPageY2) <= snapTolerance) {
375
- //bottom parallel
376
- snapY = data.y2 - originH;
377
- snapDirY = "b2b";
378
- }
379
- if (snapY) {
380
- lastSnapDirY = snapDirY;
381
- targetY = data.el;
382
- return false;
383
- }
384
- });
385
- }
386
- if (!direction || direction === "h") {
387
- each(snappable, (data) => {
388
- if (Math.abs(data.x1 - currPageX1) <= snapTolerance) {
389
- //left parallel
390
- snapX = data.x1;
391
- snapDirX = "l2l";
392
- }
393
- else if (Math.abs(data.x2 - currPageX1) <= snapTolerance) {
394
- //r2l
395
- snapX = data.x2;
396
- snapDirX = "l2r";
397
- }
398
- else if (Math.abs(data.x1 - currPageX2) <= snapTolerance) {
399
- //l2r
400
- snapX = data.x1 - originW;
401
- snapDirX = "r2l";
402
- }
403
- else if (Math.abs(data.x2 - currPageX2) <= snapTolerance) {
404
- //right parallel
405
- snapX = data.x2 - originW;
406
- snapDirX = "r2r";
407
- }
408
- if (snapX) {
409
- lastSnapDirX = snapDirX;
410
- targetX = data.el;
411
- return false;
412
- }
413
- });
414
- }
415
- if (snapX || snapY) {
416
- if (snapX) {
417
- x = snapX - parentOffsetX;
418
- }
419
- if (snapY) {
420
- y = snapY - parentOffsetY;
421
- }
422
- if (onSnap && lastSnapping !== lastSnapDirX + "" + lastSnapDirY) {
423
- setTimeout(() => {
424
- //emit after relocate
425
- onSnap({
426
- el: copyNode || dragDom,
427
- targetH: targetX,
428
- targetV: targetY,
429
- dirH: snapDirX,
430
- dirV: snapDirY,
431
- }, ev);
432
- }, 0);
433
- lastSnapping = lastSnapDirX + "" + lastSnapDirY;
434
- }
435
- emitSnap = true;
436
- }
437
- else {
438
- lastSnapDirX = lastSnapDirY = lastSnapping = "";
439
- }
440
- }
441
- if (onDrag && !emitSnap) {
442
- if (onDrag({
443
- draggable: dragDom,
444
- ox: offsetx,
445
- oy: offsety,
446
- x: x,
447
- y: y
448
- }, ev) === false) {
449
- canDrag = false;
450
- }
451
- }
452
- if (canDrag) {
453
- if (copyNode) {
454
- if (direction === "v") {
455
- copyNode.style.top = `${y}px`;
456
- }
457
- else if (direction === "h") {
458
- copyNode.style.left = `${x}px`;
459
- }
460
- else {
461
- copyNode.style.left = `${x}px`;
462
- copyNode.style.top = `${y}px`;
463
- }
464
- }
465
- else {
466
- if (direction === "v") {
467
- style.top = `${y}px`;
468
- }
469
- else if (direction === "h") {
470
- style.left = `${x}px`;
471
- }
472
- else {
473
- style.left = `${x}px`;
474
- style.top = `${y}px`;
475
- }
476
- }
477
- }
478
- ev.preventDefault();
479
- return false;
480
- };
481
- const dragEndListener = (ev) => {
482
- var _a, _b;
483
- document.removeEventListener("mousemove", dragListener);
484
- document.removeEventListener("mouseup", dragEndListener);
485
- window.removeEventListener("blur", dragEndListener);
486
- if (scroll) {
487
- if (timer) {
488
- clearInterval(timer);
489
- timer = null;
490
- }
491
- }
492
- //restore classes
493
- dragDom.classList.remove(...compact(split(classes, ' ')));
494
- dragDom.style.zIndex = originalZIndex;
495
- dragDom.classList.remove(CLASS_DRAGGABLE_ACTIVE);
496
- let moveToGhost = true;
497
- if (dragging && onEnd) {
498
- moveToGhost = onEnd({ draggable: dragDom }, ev) === false ? false : true;
499
- }
500
- //notify
501
- const customEv = new Event("uii-dragdeactive", { "bubbles": true, "cancelable": false });
502
- dragDom.dispatchEvent(customEv);
503
- if (dragging) {
504
- unlockPage();
505
- restoreCursor();
506
- if (ghost) {
507
- ((_a = dragDom.parentNode) === null || _a === void 0 ? void 0 : _a.contains(copyNode)) && ((_b = dragDom.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(copyNode));
508
- if (moveToGhost !== false) {
509
- style.left = copyNode.style.left;
510
- style.top = copyNode.style.top;
511
- }
512
- }
513
- }
514
- };
515
- document.addEventListener("mousemove", dragListener);
516
- document.addEventListener("mouseup", dragEndListener);
517
- window.addEventListener("blur", dragEndListener);
518
- e.preventDefault();
519
- return false;
520
- });
521
- }
522
- /**
523
- * create a draggable pattern for one or more elements with opts
524
- * @param els selector string / html element
525
- * @param opts
526
- * @returns Draggable instance
527
- */
528
- export function newDraggable(els, opts) {
529
- return new Draggable(els, opts);
530
- }