uiik 1.0.3 → 1.0.4
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/index.esm.js +28 -16
- package/index.js +28 -16
- package/package.json +1 -1
- package/types/utils.d.ts +3 -0
package/index.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* uiik v1.0.
|
|
2
|
+
* uiik v1.0.4
|
|
3
3
|
* A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.
|
|
4
4
|
* https://github.com/holyhigh2/uiik
|
|
5
5
|
* c) 2021-2023 @holyhigh2 may be freely distributed under the MIT license
|
|
@@ -172,6 +172,18 @@ function getFirstSS() {
|
|
|
172
172
|
document.head.appendChild(document.createElement('style'));
|
|
173
173
|
}
|
|
174
174
|
return sheet || find(document.styleSheets, ss => !ss.href);
|
|
175
|
+
}
|
|
176
|
+
let cursor = { html: '', body: '' };
|
|
177
|
+
function saveCursor() {
|
|
178
|
+
cursor.body = document.body.style.cursor;
|
|
179
|
+
cursor.html = document.documentElement.style.cursor;
|
|
180
|
+
}
|
|
181
|
+
function setCursor(cursor) {
|
|
182
|
+
document.body.style.cursor = document.documentElement.style.cursor = cursor;
|
|
183
|
+
}
|
|
184
|
+
function restoreCursor() {
|
|
185
|
+
document.body.style.cursor = cursor.body;
|
|
186
|
+
document.documentElement.style.cursor = cursor.html;
|
|
175
187
|
}
|
|
176
188
|
|
|
177
189
|
var _Splittable_instances, _Splittable_checkDirection, _Splittable_bindHandle;
|
|
@@ -344,7 +356,7 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
|
|
|
344
356
|
sticked = 'end';
|
|
345
357
|
}
|
|
346
358
|
let dragging = false;
|
|
347
|
-
|
|
359
|
+
saveCursor();
|
|
348
360
|
let startPos = dir === 'v' ? dom1.offsetTop : dom1.offsetLeft;
|
|
349
361
|
let ds1, anotherSize;
|
|
350
362
|
const dragListener = (ev) => {
|
|
@@ -370,7 +382,7 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
|
|
|
370
382
|
}
|
|
371
383
|
}
|
|
372
384
|
lockPage();
|
|
373
|
-
|
|
385
|
+
setCursor((handle === null || handle === void 0 ? void 0 : handle.dataset.cursor) || '');
|
|
374
386
|
call(onStart, originSize, originSize1);
|
|
375
387
|
}
|
|
376
388
|
else {
|
|
@@ -478,7 +490,7 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
|
|
|
478
490
|
(_a = ghostNode.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(ghostNode);
|
|
479
491
|
}
|
|
480
492
|
unlockPage();
|
|
481
|
-
|
|
493
|
+
restoreCursor();
|
|
482
494
|
call(onEnd, originSize, originSize1);
|
|
483
495
|
}
|
|
484
496
|
};
|
|
@@ -615,7 +627,7 @@ function bindHandle$1(handle, dir, panel, opts) {
|
|
|
615
627
|
let currentW = originW;
|
|
616
628
|
let currentH = originH;
|
|
617
629
|
let dragging = false;
|
|
618
|
-
|
|
630
|
+
saveCursor();
|
|
619
631
|
const dragListener = (ev) => {
|
|
620
632
|
var _a;
|
|
621
633
|
const offsetx = ev.clientX - originPosX;
|
|
@@ -644,7 +656,7 @@ function bindHandle$1(handle, dir, panel, opts) {
|
|
|
644
656
|
style = ghostNode === null || ghostNode === void 0 ? void 0 : ghostNode.style;
|
|
645
657
|
}
|
|
646
658
|
lockPage();
|
|
647
|
-
|
|
659
|
+
setCursor(handle.dataset.cursor || '');
|
|
648
660
|
call(onStart, originW, originH);
|
|
649
661
|
}
|
|
650
662
|
else {
|
|
@@ -733,7 +745,7 @@ function bindHandle$1(handle, dir, panel, opts) {
|
|
|
733
745
|
}
|
|
734
746
|
handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
|
|
735
747
|
unlockPage();
|
|
736
|
-
|
|
748
|
+
restoreCursor();
|
|
737
749
|
call(onEnd, currentW, currentH);
|
|
738
750
|
};
|
|
739
751
|
document.addEventListener('mousemove', dragListener, false);
|
|
@@ -1018,7 +1030,7 @@ function bindEvent(registerEvent, el, opts, handleMap) {
|
|
|
1018
1030
|
let toTop = false;
|
|
1019
1031
|
let toRight = false;
|
|
1020
1032
|
let toBottom = false;
|
|
1021
|
-
|
|
1033
|
+
saveCursor();
|
|
1022
1034
|
const dragListener = (ev) => {
|
|
1023
1035
|
var _a;
|
|
1024
1036
|
const newX = ev.clientX - rect.x + container.scrollLeft;
|
|
@@ -1058,7 +1070,7 @@ function bindEvent(registerEvent, el, opts, handleMap) {
|
|
|
1058
1070
|
call(onStart, dragDom, ev);
|
|
1059
1071
|
lockPage();
|
|
1060
1072
|
if (isDefined(opts.cursor)) {
|
|
1061
|
-
|
|
1073
|
+
setCursor(opts.cursor.active || 'move');
|
|
1062
1074
|
}
|
|
1063
1075
|
//notify
|
|
1064
1076
|
const customEv = new Event("uii-dragactive", { "bubbles": true, "cancelable": false });
|
|
@@ -1270,7 +1282,7 @@ function bindEvent(registerEvent, el, opts, handleMap) {
|
|
|
1270
1282
|
dragDom.dispatchEvent(customEv);
|
|
1271
1283
|
if (dragging) {
|
|
1272
1284
|
unlockPage();
|
|
1273
|
-
|
|
1285
|
+
restoreCursor();
|
|
1274
1286
|
if (ghost) {
|
|
1275
1287
|
(_a = dragDom.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(copyNode);
|
|
1276
1288
|
if (moveToGhost !== false) {
|
|
@@ -1326,7 +1338,7 @@ class Droppable extends Uii {
|
|
|
1326
1338
|
});
|
|
1327
1339
|
}
|
|
1328
1340
|
if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
|
|
1329
|
-
|
|
1341
|
+
setCursor(__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver);
|
|
1330
1342
|
}
|
|
1331
1343
|
call(opts.onEnter, el, e);
|
|
1332
1344
|
});
|
|
@@ -1340,7 +1352,7 @@ class Droppable extends Uii {
|
|
|
1340
1352
|
});
|
|
1341
1353
|
}
|
|
1342
1354
|
if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
|
|
1343
|
-
|
|
1355
|
+
setCursor(__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorActive || '');
|
|
1344
1356
|
}
|
|
1345
1357
|
call(opts.onLeave, el, e);
|
|
1346
1358
|
});
|
|
@@ -1508,7 +1520,7 @@ function bindHandle(handle, el, opts) {
|
|
|
1508
1520
|
startDeg = 360 + startDeg;
|
|
1509
1521
|
const offsetDeg = startDeg - deg;
|
|
1510
1522
|
let dragging = false;
|
|
1511
|
-
|
|
1523
|
+
saveCursor();
|
|
1512
1524
|
const dragListener = (ev) => {
|
|
1513
1525
|
var _a;
|
|
1514
1526
|
const offsetx = ev.clientX - centerX;
|
|
@@ -1521,7 +1533,7 @@ function bindHandle(handle, el, opts) {
|
|
|
1521
1533
|
call(onStart, deg);
|
|
1522
1534
|
lockPage();
|
|
1523
1535
|
if (isDefined(opts.cursor)) {
|
|
1524
|
-
|
|
1536
|
+
setCursor(((_a = opts.cursor) === null || _a === void 0 ? void 0 : _a.active) || 'crosshair');
|
|
1525
1537
|
}
|
|
1526
1538
|
}
|
|
1527
1539
|
else {
|
|
@@ -1543,7 +1555,7 @@ function bindHandle(handle, el, opts) {
|
|
|
1543
1555
|
window.removeEventListener('blur', dragEndListener, false);
|
|
1544
1556
|
if (dragging) {
|
|
1545
1557
|
unlockPage();
|
|
1546
|
-
|
|
1558
|
+
restoreCursor();
|
|
1547
1559
|
el.classList.toggle(CLASS_ROTATABLE_ACTIVE, false);
|
|
1548
1560
|
call(onEnd, deg);
|
|
1549
1561
|
}
|
|
@@ -1936,7 +1948,7 @@ function newSelectable(container, opts) {
|
|
|
1936
1948
|
return new Selectable(container, opts);
|
|
1937
1949
|
}
|
|
1938
1950
|
|
|
1939
|
-
var version = "1.0.
|
|
1951
|
+
var version = "1.0.4";
|
|
1940
1952
|
var repository = {
|
|
1941
1953
|
type: "git",
|
|
1942
1954
|
url: "https://github.com/holyhigh2/uiik"
|
package/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* uiik v1.0.
|
|
2
|
+
* uiik v1.0.4
|
|
3
3
|
* A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.
|
|
4
4
|
* https://github.com/holyhigh2/uiik
|
|
5
5
|
* c) 2021-2023 @holyhigh2 may be freely distributed under the MIT license
|
|
@@ -176,6 +176,18 @@
|
|
|
176
176
|
document.head.appendChild(document.createElement('style'));
|
|
177
177
|
}
|
|
178
178
|
return sheet || func_js.find(document.styleSheets, ss => !ss.href);
|
|
179
|
+
}
|
|
180
|
+
let cursor = { html: '', body: '' };
|
|
181
|
+
function saveCursor() {
|
|
182
|
+
cursor.body = document.body.style.cursor;
|
|
183
|
+
cursor.html = document.documentElement.style.cursor;
|
|
184
|
+
}
|
|
185
|
+
function setCursor(cursor) {
|
|
186
|
+
document.body.style.cursor = document.documentElement.style.cursor = cursor;
|
|
187
|
+
}
|
|
188
|
+
function restoreCursor() {
|
|
189
|
+
document.body.style.cursor = cursor.body;
|
|
190
|
+
document.documentElement.style.cursor = cursor.html;
|
|
179
191
|
}
|
|
180
192
|
|
|
181
193
|
var _Splittable_instances, _Splittable_checkDirection, _Splittable_bindHandle;
|
|
@@ -348,7 +360,7 @@
|
|
|
348
360
|
sticked = 'end';
|
|
349
361
|
}
|
|
350
362
|
let dragging = false;
|
|
351
|
-
|
|
363
|
+
saveCursor();
|
|
352
364
|
let startPos = dir === 'v' ? dom1.offsetTop : dom1.offsetLeft;
|
|
353
365
|
let ds1, anotherSize;
|
|
354
366
|
const dragListener = (ev) => {
|
|
@@ -374,7 +386,7 @@
|
|
|
374
386
|
}
|
|
375
387
|
}
|
|
376
388
|
lockPage();
|
|
377
|
-
|
|
389
|
+
setCursor((handle === null || handle === void 0 ? void 0 : handle.dataset.cursor) || '');
|
|
378
390
|
func_js.call(onStart, originSize, originSize1);
|
|
379
391
|
}
|
|
380
392
|
else {
|
|
@@ -482,7 +494,7 @@
|
|
|
482
494
|
(_a = ghostNode.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(ghostNode);
|
|
483
495
|
}
|
|
484
496
|
unlockPage();
|
|
485
|
-
|
|
497
|
+
restoreCursor();
|
|
486
498
|
func_js.call(onEnd, originSize, originSize1);
|
|
487
499
|
}
|
|
488
500
|
};
|
|
@@ -619,7 +631,7 @@
|
|
|
619
631
|
let currentW = originW;
|
|
620
632
|
let currentH = originH;
|
|
621
633
|
let dragging = false;
|
|
622
|
-
|
|
634
|
+
saveCursor();
|
|
623
635
|
const dragListener = (ev) => {
|
|
624
636
|
var _a;
|
|
625
637
|
const offsetx = ev.clientX - originPosX;
|
|
@@ -648,7 +660,7 @@
|
|
|
648
660
|
style = ghostNode === null || ghostNode === void 0 ? void 0 : ghostNode.style;
|
|
649
661
|
}
|
|
650
662
|
lockPage();
|
|
651
|
-
|
|
663
|
+
setCursor(handle.dataset.cursor || '');
|
|
652
664
|
func_js.call(onStart, originW, originH);
|
|
653
665
|
}
|
|
654
666
|
else {
|
|
@@ -737,7 +749,7 @@
|
|
|
737
749
|
}
|
|
738
750
|
handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
|
|
739
751
|
unlockPage();
|
|
740
|
-
|
|
752
|
+
restoreCursor();
|
|
741
753
|
func_js.call(onEnd, currentW, currentH);
|
|
742
754
|
};
|
|
743
755
|
document.addEventListener('mousemove', dragListener, false);
|
|
@@ -1022,7 +1034,7 @@
|
|
|
1022
1034
|
let toTop = false;
|
|
1023
1035
|
let toRight = false;
|
|
1024
1036
|
let toBottom = false;
|
|
1025
|
-
|
|
1037
|
+
saveCursor();
|
|
1026
1038
|
const dragListener = (ev) => {
|
|
1027
1039
|
var _a;
|
|
1028
1040
|
const newX = ev.clientX - rect.x + container.scrollLeft;
|
|
@@ -1062,7 +1074,7 @@
|
|
|
1062
1074
|
func_js.call(onStart, dragDom, ev);
|
|
1063
1075
|
lockPage();
|
|
1064
1076
|
if (func_js.isDefined(opts.cursor)) {
|
|
1065
|
-
|
|
1077
|
+
setCursor(opts.cursor.active || 'move');
|
|
1066
1078
|
}
|
|
1067
1079
|
//notify
|
|
1068
1080
|
const customEv = new Event("uii-dragactive", { "bubbles": true, "cancelable": false });
|
|
@@ -1274,7 +1286,7 @@
|
|
|
1274
1286
|
dragDom.dispatchEvent(customEv);
|
|
1275
1287
|
if (dragging) {
|
|
1276
1288
|
unlockPage();
|
|
1277
|
-
|
|
1289
|
+
restoreCursor();
|
|
1278
1290
|
if (ghost) {
|
|
1279
1291
|
(_a = dragDom.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(copyNode);
|
|
1280
1292
|
if (moveToGhost !== false) {
|
|
@@ -1330,7 +1342,7 @@
|
|
|
1330
1342
|
});
|
|
1331
1343
|
}
|
|
1332
1344
|
if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
|
|
1333
|
-
|
|
1345
|
+
setCursor(__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver);
|
|
1334
1346
|
}
|
|
1335
1347
|
func_js.call(opts.onEnter, el, e);
|
|
1336
1348
|
});
|
|
@@ -1344,7 +1356,7 @@
|
|
|
1344
1356
|
});
|
|
1345
1357
|
}
|
|
1346
1358
|
if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
|
|
1347
|
-
|
|
1359
|
+
setCursor(__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorActive || '');
|
|
1348
1360
|
}
|
|
1349
1361
|
func_js.call(opts.onLeave, el, e);
|
|
1350
1362
|
});
|
|
@@ -1512,7 +1524,7 @@
|
|
|
1512
1524
|
startDeg = 360 + startDeg;
|
|
1513
1525
|
const offsetDeg = startDeg - deg;
|
|
1514
1526
|
let dragging = false;
|
|
1515
|
-
|
|
1527
|
+
saveCursor();
|
|
1516
1528
|
const dragListener = (ev) => {
|
|
1517
1529
|
var _a;
|
|
1518
1530
|
const offsetx = ev.clientX - centerX;
|
|
@@ -1525,7 +1537,7 @@
|
|
|
1525
1537
|
func_js.call(onStart, deg);
|
|
1526
1538
|
lockPage();
|
|
1527
1539
|
if (func_js.isDefined(opts.cursor)) {
|
|
1528
|
-
|
|
1540
|
+
setCursor(((_a = opts.cursor) === null || _a === void 0 ? void 0 : _a.active) || 'crosshair');
|
|
1529
1541
|
}
|
|
1530
1542
|
}
|
|
1531
1543
|
else {
|
|
@@ -1547,7 +1559,7 @@
|
|
|
1547
1559
|
window.removeEventListener('blur', dragEndListener, false);
|
|
1548
1560
|
if (dragging) {
|
|
1549
1561
|
unlockPage();
|
|
1550
|
-
|
|
1562
|
+
restoreCursor();
|
|
1551
1563
|
el.classList.toggle(CLASS_ROTATABLE_ACTIVE, false);
|
|
1552
1564
|
func_js.call(onEnd, deg);
|
|
1553
1565
|
}
|
|
@@ -1940,7 +1952,7 @@
|
|
|
1940
1952
|
return new Selectable(container, opts);
|
|
1941
1953
|
}
|
|
1942
1954
|
|
|
1943
|
-
var version = "1.0.
|
|
1955
|
+
var version = "1.0.4";
|
|
1944
1956
|
var repository = {
|
|
1945
1957
|
type: "git",
|
|
1946
1958
|
url: "https://github.com/holyhigh2/uiik"
|
package/package.json
CHANGED
package/types/utils.d.ts
CHANGED
|
@@ -17,3 +17,6 @@ export declare const EDGE_THRESHOLD = 5;
|
|
|
17
17
|
export declare const DRAGGING_RULE = "body * { pointer-events: none; }";
|
|
18
18
|
export declare function lockPage(): void;
|
|
19
19
|
export declare function unlockPage(): void;
|
|
20
|
+
export declare function saveCursor(): void;
|
|
21
|
+
export declare function setCursor(cursor: string): void;
|
|
22
|
+
export declare function restoreCursor(): void;
|