jqtree 1.8.11 → 1.9.1
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/bower.json +1 -1
- package/package.json +45 -51
- package/pnpm-workspace.yaml +5 -0
- package/src/animation.ts +48 -0
- package/src/dataLoader.ts +38 -48
- package/src/dragAndDropHandler/dragElement.ts +11 -11
- package/src/dragAndDropHandler/generateHitAreas.ts +4 -3
- package/src/dragAndDropHandler/index.ts +119 -120
- package/src/dragAndDropHandler/iterateVisibleNodes.ts +1 -1
- package/src/dragAndDropHandler/types.ts +1 -1
- package/src/elementsRenderer.ts +71 -78
- package/src/jqtreeMethodTypes.ts +2 -2
- package/src/jqtreeOptions.ts +3 -2
- package/src/keyHandler.ts +34 -34
- package/src/mouseHandler.ts +118 -119
- package/src/node.ts +22 -22
- package/src/nodeElement/borderDropHint.ts +6 -6
- package/src/nodeElement/folderElement.ts +33 -25
- package/src/nodeElement/ghostDropHint.ts +24 -24
- package/src/nodeElement/index.ts +19 -18
- package/src/positionUtils.ts +18 -0
- package/src/saveStateHandler.ts +56 -55
- package/src/scrollHandler/containerScrollParent.ts +24 -22
- package/src/scrollHandler/documentScrollParent.ts +29 -28
- package/src/scrollHandler/scrollParent.ts +41 -41
- package/src/scrollHandler.ts +23 -22
- package/src/selectNodeHandler.ts +28 -28
- package/src/tree.jquery.d.ts +3 -2
- package/src/tree.jquery.ts +456 -368
- package/src/util.ts +0 -14
- package/src/version.ts +1 -1
- package/tree.jquery.debug.js +1094 -973
- package/tree.jquery.debug.js.map +1 -1
- package/tree.jquery.js +2 -2
- package/tree.jquery.js.map +1 -1
- package/eslint.config.mjs +0 -98
- package/src/simple.widget.ts +0 -134
package/tree.jquery.debug.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
JqTree 1.
|
|
2
|
+
JqTree 1.9.1
|
|
3
3
|
|
|
4
4
|
Copyright 2026 Marco Braak
|
|
5
5
|
|
|
@@ -21,6 +21,12 @@ var jqtree = (function (exports) {
|
|
|
21
21
|
'use strict';
|
|
22
22
|
|
|
23
23
|
class DataLoader {
|
|
24
|
+
_dataFilter;
|
|
25
|
+
_loadData;
|
|
26
|
+
_onLoadFailed;
|
|
27
|
+
_onLoading;
|
|
28
|
+
_treeElement;
|
|
29
|
+
_triggerEvent;
|
|
24
30
|
constructor({
|
|
25
31
|
dataFilter,
|
|
26
32
|
loadData,
|
|
@@ -29,79 +35,71 @@ var jqtree = (function (exports) {
|
|
|
29
35
|
treeElement,
|
|
30
36
|
triggerEvent
|
|
31
37
|
}) {
|
|
32
|
-
this.
|
|
33
|
-
this.
|
|
34
|
-
this.
|
|
35
|
-
this.
|
|
36
|
-
this.
|
|
37
|
-
this.
|
|
38
|
+
this._dataFilter = dataFilter;
|
|
39
|
+
this._loadData = loadData;
|
|
40
|
+
this._onLoadFailed = onLoadFailed;
|
|
41
|
+
this._onLoading = onLoading;
|
|
42
|
+
this._treeElement = treeElement;
|
|
43
|
+
this._triggerEvent = triggerEvent;
|
|
38
44
|
}
|
|
39
45
|
loadFromUrl(urlInfo, parentNode, onFinished) {
|
|
40
46
|
if (!urlInfo) {
|
|
41
47
|
return;
|
|
42
48
|
}
|
|
43
|
-
const element = this.
|
|
44
|
-
this.
|
|
45
|
-
this.
|
|
49
|
+
const element = this._getDomElement(parentNode);
|
|
50
|
+
this._addLoadingClass(element);
|
|
51
|
+
this._notifyLoading(true, parentNode, element);
|
|
46
52
|
const stopLoading = () => {
|
|
47
|
-
this.
|
|
48
|
-
this.
|
|
53
|
+
this._removeLoadingClass(element);
|
|
54
|
+
this._notifyLoading(false, parentNode, element);
|
|
49
55
|
};
|
|
50
56
|
const handleSuccess = data => {
|
|
51
57
|
stopLoading();
|
|
52
|
-
this.
|
|
58
|
+
this._loadData(this._parseData(data), parentNode);
|
|
53
59
|
if (onFinished && typeof onFinished === "function") {
|
|
54
60
|
onFinished();
|
|
55
61
|
}
|
|
56
62
|
};
|
|
57
63
|
const handleError = jqXHR => {
|
|
58
64
|
stopLoading();
|
|
59
|
-
if (this.
|
|
60
|
-
this.
|
|
65
|
+
if (this._onLoadFailed) {
|
|
66
|
+
this._onLoadFailed(jqXHR);
|
|
61
67
|
}
|
|
62
68
|
};
|
|
63
|
-
this.
|
|
69
|
+
this._submitRequest(urlInfo, handleSuccess, handleError);
|
|
64
70
|
}
|
|
65
|
-
|
|
71
|
+
_addLoadingClass(element) {
|
|
66
72
|
element.classList.add("jqtree-loading");
|
|
67
73
|
}
|
|
68
|
-
|
|
74
|
+
_getDomElement(parentNode) {
|
|
69
75
|
if (parentNode?.element) {
|
|
70
76
|
return parentNode.element;
|
|
71
77
|
} else {
|
|
72
|
-
return this.
|
|
78
|
+
return this._treeElement;
|
|
73
79
|
}
|
|
74
80
|
}
|
|
75
|
-
|
|
81
|
+
_notifyLoading(isLoading, node, element) {
|
|
76
82
|
const $el = jQuery(element);
|
|
77
|
-
if (this.
|
|
78
|
-
this.
|
|
83
|
+
if (this._onLoading) {
|
|
84
|
+
this._onLoading(isLoading, node, $el);
|
|
79
85
|
}
|
|
80
|
-
this.
|
|
86
|
+
this._triggerEvent("tree.loading_data", {
|
|
81
87
|
$el,
|
|
82
88
|
isLoading,
|
|
83
89
|
node
|
|
84
90
|
});
|
|
85
91
|
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
return JSON.parse(data);
|
|
90
|
-
} else {
|
|
91
|
-
return data;
|
|
92
|
-
}
|
|
93
|
-
};
|
|
94
|
-
const parsedData = getParsedData();
|
|
95
|
-
if (this.dataFilter) {
|
|
96
|
-
return this.dataFilter(parsedData);
|
|
92
|
+
_parseData(data) {
|
|
93
|
+
if (this._dataFilter) {
|
|
94
|
+
return this._dataFilter(data);
|
|
97
95
|
} else {
|
|
98
|
-
return
|
|
96
|
+
return data;
|
|
99
97
|
}
|
|
100
98
|
}
|
|
101
|
-
|
|
99
|
+
_removeLoadingClass(element) {
|
|
102
100
|
element.classList.remove("jqtree-loading");
|
|
103
101
|
}
|
|
104
|
-
|
|
102
|
+
_submitRequest(urlInfoInput, handleSuccess, handleError) {
|
|
105
103
|
const urlInfo = typeof urlInfoInput === "string" ? {
|
|
106
104
|
url: urlInfoInput
|
|
107
105
|
} : urlInfoInput;
|
|
@@ -118,10 +116,10 @@ var jqtree = (function (exports) {
|
|
|
118
116
|
}
|
|
119
117
|
}
|
|
120
118
|
|
|
121
|
-
|
|
122
|
-
const isFunction = v => typeof v === "function";
|
|
123
|
-
const getBoolString = value => value ? "true" : "false";
|
|
119
|
+
// Get the top position of the HTML element.
|
|
124
120
|
const getOffsetTop = element => getElementPosition(element).top;
|
|
121
|
+
|
|
122
|
+
// Get the top left position of the HTML element.
|
|
125
123
|
const getElementPosition = element => {
|
|
126
124
|
const rect = element.getBoundingClientRect();
|
|
127
125
|
return {
|
|
@@ -152,6 +150,9 @@ var jqtree = (function (exports) {
|
|
|
152
150
|
}
|
|
153
151
|
|
|
154
152
|
class DragElement {
|
|
153
|
+
_element;
|
|
154
|
+
_offsetX;
|
|
155
|
+
_offsetY;
|
|
155
156
|
constructor({
|
|
156
157
|
autoEscape,
|
|
157
158
|
nodeName,
|
|
@@ -159,19 +160,19 @@ var jqtree = (function (exports) {
|
|
|
159
160
|
offsetY,
|
|
160
161
|
treeElement
|
|
161
162
|
}) {
|
|
162
|
-
this.
|
|
163
|
-
this.
|
|
164
|
-
this.
|
|
165
|
-
treeElement.appendChild(this.
|
|
163
|
+
this._offsetX = offsetX;
|
|
164
|
+
this._offsetY = offsetY;
|
|
165
|
+
this._element = this._createElement(nodeName, autoEscape);
|
|
166
|
+
treeElement.appendChild(this._element);
|
|
166
167
|
}
|
|
167
168
|
move(pageX, pageY) {
|
|
168
|
-
this.
|
|
169
|
-
this.
|
|
169
|
+
this._element.style.left = `${pageX - this._offsetX}px`;
|
|
170
|
+
this._element.style.top = `${pageY - this._offsetY}px`;
|
|
170
171
|
}
|
|
171
172
|
remove() {
|
|
172
|
-
this.
|
|
173
|
+
this._element.remove();
|
|
173
174
|
}
|
|
174
|
-
|
|
175
|
+
_createElement(nodeName, autoEscape) {
|
|
175
176
|
const element = document.createElement("span");
|
|
176
177
|
element.classList.add("jqtree-title", "jqtree-dragging");
|
|
177
178
|
if (autoEscape) {
|
|
@@ -362,6 +363,29 @@ var jqtree = (function (exports) {
|
|
|
362
363
|
const generateHitAreas = (tree, currentNode, treeBottom) => generateHitAreasFromPositions(generateHitPositions(tree, currentNode), treeBottom);
|
|
363
364
|
|
|
364
365
|
class DragAndDropHandler {
|
|
366
|
+
currentItem;
|
|
367
|
+
hitAreas;
|
|
368
|
+
hoveredArea;
|
|
369
|
+
isDragging;
|
|
370
|
+
_autoEscape;
|
|
371
|
+
_dragElement;
|
|
372
|
+
_getNodeElement;
|
|
373
|
+
_getNodeElementForNode;
|
|
374
|
+
_getScrollLeft;
|
|
375
|
+
_getTree;
|
|
376
|
+
_onCanMove;
|
|
377
|
+
_onCanMoveTo;
|
|
378
|
+
_onDragMove;
|
|
379
|
+
_onDragStop;
|
|
380
|
+
_onIsMoveHandle;
|
|
381
|
+
_openFolderDelay;
|
|
382
|
+
_openFolderTimer;
|
|
383
|
+
_openNode;
|
|
384
|
+
_previousGhost;
|
|
385
|
+
_refreshElements;
|
|
386
|
+
_slide;
|
|
387
|
+
_treeElement;
|
|
388
|
+
_triggerEvent;
|
|
365
389
|
constructor({
|
|
366
390
|
autoEscape,
|
|
367
391
|
getNodeElement,
|
|
@@ -380,22 +404,22 @@ var jqtree = (function (exports) {
|
|
|
380
404
|
treeElement,
|
|
381
405
|
triggerEvent
|
|
382
406
|
}) {
|
|
383
|
-
this.
|
|
384
|
-
this.
|
|
385
|
-
this.
|
|
386
|
-
this.
|
|
387
|
-
this.
|
|
388
|
-
this.
|
|
389
|
-
this.
|
|
390
|
-
this.
|
|
391
|
-
this.
|
|
392
|
-
this.
|
|
393
|
-
this.
|
|
394
|
-
this.
|
|
395
|
-
this.
|
|
396
|
-
this.
|
|
397
|
-
this.
|
|
398
|
-
this.
|
|
407
|
+
this._autoEscape = autoEscape;
|
|
408
|
+
this._getNodeElement = getNodeElement;
|
|
409
|
+
this._getNodeElementForNode = getNodeElementForNode;
|
|
410
|
+
this._getScrollLeft = getScrollLeft;
|
|
411
|
+
this._getTree = getTree;
|
|
412
|
+
this._onCanMove = onCanMove;
|
|
413
|
+
this._onCanMoveTo = onCanMoveTo;
|
|
414
|
+
this._onDragMove = onDragMove;
|
|
415
|
+
this._onDragStop = onDragStop;
|
|
416
|
+
this._onIsMoveHandle = onIsMoveHandle;
|
|
417
|
+
this._openFolderDelay = openFolderDelay;
|
|
418
|
+
this._openNode = openNode;
|
|
419
|
+
this._refreshElements = refreshElements;
|
|
420
|
+
this._slide = slide;
|
|
421
|
+
this._treeElement = treeElement;
|
|
422
|
+
this._triggerEvent = triggerEvent;
|
|
399
423
|
this.hoveredArea = null;
|
|
400
424
|
this.hitAreas = [];
|
|
401
425
|
this.isDragging = false;
|
|
@@ -403,15 +427,15 @@ var jqtree = (function (exports) {
|
|
|
403
427
|
}
|
|
404
428
|
mouseCapture(positionInfo) {
|
|
405
429
|
const element = positionInfo.target;
|
|
406
|
-
if (!this.
|
|
430
|
+
if (!this._mustCaptureElement(element)) {
|
|
407
431
|
return null;
|
|
408
432
|
}
|
|
409
|
-
if (this.
|
|
433
|
+
if (this._onIsMoveHandle && !this._onIsMoveHandle(jQuery(element))) {
|
|
410
434
|
return null;
|
|
411
435
|
}
|
|
412
|
-
let nodeElement = this.
|
|
413
|
-
if (nodeElement && this.
|
|
414
|
-
if (!this.
|
|
436
|
+
let nodeElement = this._getNodeElement(element);
|
|
437
|
+
if (nodeElement && this._onCanMove) {
|
|
438
|
+
if (!this._onCanMove(nodeElement.node)) {
|
|
415
439
|
nodeElement = null;
|
|
416
440
|
}
|
|
417
441
|
}
|
|
@@ -419,34 +443,34 @@ var jqtree = (function (exports) {
|
|
|
419
443
|
return this.currentItem != null;
|
|
420
444
|
}
|
|
421
445
|
mouseDrag(positionInfo) {
|
|
422
|
-
if (!this.currentItem || !this.
|
|
446
|
+
if (!this.currentItem || !this._dragElement) {
|
|
423
447
|
return false;
|
|
424
448
|
}
|
|
425
|
-
this.
|
|
426
|
-
const area = this.
|
|
427
|
-
if (area && this.
|
|
449
|
+
this._dragElement.move(positionInfo.pageX, positionInfo.pageY);
|
|
450
|
+
const area = this._findHoveredArea(positionInfo.pageX, positionInfo.pageY);
|
|
451
|
+
if (area && this._canMoveToArea(area, this.currentItem)) {
|
|
428
452
|
if (!area.node.isFolder()) {
|
|
429
|
-
this.
|
|
453
|
+
this._stopOpenFolderTimer();
|
|
430
454
|
}
|
|
431
455
|
if (this.hoveredArea !== area) {
|
|
432
456
|
this.hoveredArea = area;
|
|
433
457
|
|
|
434
458
|
// If this is a closed folder, start timer to open it
|
|
435
|
-
if (this.
|
|
436
|
-
this.
|
|
459
|
+
if (this._mustOpenFolderTimer(area)) {
|
|
460
|
+
this._startOpenFolderTimer(area.node);
|
|
437
461
|
} else {
|
|
438
|
-
this.
|
|
462
|
+
this._stopOpenFolderTimer();
|
|
439
463
|
}
|
|
440
|
-
this.
|
|
464
|
+
this._updateDropHint();
|
|
441
465
|
}
|
|
442
466
|
} else {
|
|
443
|
-
this.
|
|
444
|
-
this.
|
|
467
|
+
this._removeDropHint();
|
|
468
|
+
this._stopOpenFolderTimer();
|
|
445
469
|
this.hoveredArea = area;
|
|
446
470
|
}
|
|
447
471
|
if (!area) {
|
|
448
|
-
if (this.
|
|
449
|
-
this.
|
|
472
|
+
if (this._onDragMove) {
|
|
473
|
+
this._onDragMove(this.currentItem.node, positionInfo.originalEvent);
|
|
450
474
|
}
|
|
451
475
|
}
|
|
452
476
|
return true;
|
|
@@ -461,23 +485,23 @@ var jqtree = (function (exports) {
|
|
|
461
485
|
top
|
|
462
486
|
} = getElementPosition(positionInfo.target);
|
|
463
487
|
const node = this.currentItem.node;
|
|
464
|
-
this.
|
|
465
|
-
autoEscape: this.
|
|
488
|
+
this._dragElement = new DragElement({
|
|
489
|
+
autoEscape: this._autoEscape ?? true,
|
|
466
490
|
nodeName: node.name,
|
|
467
491
|
offsetX: positionInfo.pageX - left,
|
|
468
492
|
offsetY: positionInfo.pageY - top,
|
|
469
|
-
treeElement: this.
|
|
493
|
+
treeElement: this._treeElement
|
|
470
494
|
});
|
|
471
495
|
this.isDragging = true;
|
|
472
496
|
this.currentItem.element.classList.add("jqtree-moving");
|
|
473
497
|
return true;
|
|
474
498
|
}
|
|
475
499
|
mouseStop(positionInfo) {
|
|
476
|
-
this.
|
|
477
|
-
this.
|
|
478
|
-
this.
|
|
479
|
-
this.
|
|
480
|
-
this.
|
|
500
|
+
this._moveItem(positionInfo);
|
|
501
|
+
this._clear();
|
|
502
|
+
this._removeHover();
|
|
503
|
+
this._removeDropHint();
|
|
504
|
+
this._removeHitAreas();
|
|
481
505
|
const currentItem = this.currentItem;
|
|
482
506
|
if (this.currentItem) {
|
|
483
507
|
this.currentItem.element.classList.remove("jqtree-moving");
|
|
@@ -485,37 +509,37 @@ var jqtree = (function (exports) {
|
|
|
485
509
|
}
|
|
486
510
|
this.isDragging = false;
|
|
487
511
|
if (!this.hoveredArea && currentItem) {
|
|
488
|
-
if (this.
|
|
489
|
-
this.
|
|
512
|
+
if (this._onDragStop) {
|
|
513
|
+
this._onDragStop(currentItem.node, positionInfo.originalEvent);
|
|
490
514
|
}
|
|
491
515
|
}
|
|
492
516
|
return false;
|
|
493
517
|
}
|
|
494
518
|
refresh() {
|
|
495
|
-
this.
|
|
519
|
+
this._removeHitAreas();
|
|
496
520
|
if (this.currentItem) {
|
|
497
521
|
const currentNode = this.currentItem.node;
|
|
498
|
-
this.
|
|
499
|
-
this.currentItem = this.
|
|
522
|
+
this._generateHitAreas(currentNode);
|
|
523
|
+
this.currentItem = this._getNodeElementForNode(currentNode);
|
|
500
524
|
if (this.isDragging) {
|
|
501
525
|
this.currentItem.element.classList.add("jqtree-moving");
|
|
502
526
|
}
|
|
503
527
|
}
|
|
504
528
|
}
|
|
505
|
-
|
|
506
|
-
if (!this.
|
|
529
|
+
_canMoveToArea(area, currentItem) {
|
|
530
|
+
if (!this._onCanMoveTo) {
|
|
507
531
|
return true;
|
|
508
532
|
}
|
|
509
|
-
return this.
|
|
533
|
+
return this._onCanMoveTo(currentItem.node, area.node, area.position);
|
|
510
534
|
}
|
|
511
|
-
|
|
512
|
-
if (this.
|
|
513
|
-
this.
|
|
514
|
-
this.
|
|
535
|
+
_clear() {
|
|
536
|
+
if (this._dragElement) {
|
|
537
|
+
this._dragElement.remove();
|
|
538
|
+
this._dragElement = null;
|
|
515
539
|
}
|
|
516
540
|
}
|
|
517
|
-
|
|
518
|
-
const dimensions = this.
|
|
541
|
+
_findHoveredArea(x, y) {
|
|
542
|
+
const dimensions = this._getTreeDimensions();
|
|
519
543
|
if (x < dimensions.left || y < dimensions.top || x > dimensions.right || y > dimensions.bottom) {
|
|
520
544
|
return null;
|
|
521
545
|
}
|
|
@@ -529,31 +553,31 @@ var jqtree = (function (exports) {
|
|
|
529
553
|
}
|
|
530
554
|
});
|
|
531
555
|
}
|
|
532
|
-
|
|
533
|
-
const tree = this.
|
|
556
|
+
_generateHitAreas(currentNode) {
|
|
557
|
+
const tree = this._getTree();
|
|
534
558
|
if (!tree) {
|
|
535
559
|
this.hitAreas = [];
|
|
536
560
|
} else {
|
|
537
|
-
this.hitAreas = generateHitAreas(tree, currentNode, this.
|
|
561
|
+
this.hitAreas = generateHitAreas(tree, currentNode, this._getTreeDimensions().bottom);
|
|
538
562
|
}
|
|
539
563
|
}
|
|
540
|
-
|
|
564
|
+
_getTreeDimensions() {
|
|
541
565
|
// Return the dimensions of the tree. Add a margin to the bottom to allow
|
|
542
566
|
// to drag-and-drop after the last element.
|
|
543
|
-
const treePosition = getElementPosition(this.
|
|
544
|
-
const left = treePosition.left + this.
|
|
567
|
+
const treePosition = getElementPosition(this._treeElement);
|
|
568
|
+
const left = treePosition.left + this._getScrollLeft();
|
|
545
569
|
const top = treePosition.top;
|
|
546
570
|
return {
|
|
547
|
-
bottom: top + this.
|
|
571
|
+
bottom: top + this._treeElement.clientHeight + 16,
|
|
548
572
|
left,
|
|
549
|
-
right: left + this.
|
|
573
|
+
right: left + this._treeElement.clientWidth,
|
|
550
574
|
top
|
|
551
575
|
};
|
|
552
576
|
}
|
|
553
577
|
|
|
554
578
|
/* Move the dragged node to the selected position in the tree. */
|
|
555
|
-
|
|
556
|
-
if (this.currentItem && this.hoveredArea?.position && this.
|
|
579
|
+
_moveItem(positionInfo) {
|
|
580
|
+
if (this.currentItem && this.hoveredArea?.position && this._canMoveToArea(this.hoveredArea, this.currentItem)) {
|
|
557
581
|
const movedNode = this.currentItem.node;
|
|
558
582
|
const targetNode = this.hoveredArea.node;
|
|
559
583
|
const position = this.hoveredArea.position;
|
|
@@ -562,14 +586,14 @@ var jqtree = (function (exports) {
|
|
|
562
586
|
this.hoveredArea.node.is_open = true;
|
|
563
587
|
}
|
|
564
588
|
const doMove = () => {
|
|
565
|
-
const tree = this.
|
|
589
|
+
const tree = this._getTree();
|
|
566
590
|
if (tree) {
|
|
567
591
|
tree.moveNode(movedNode, targetNode, position);
|
|
568
|
-
this.
|
|
569
|
-
this.
|
|
592
|
+
this._treeElement.textContent = "";
|
|
593
|
+
this._refreshElements(null);
|
|
570
594
|
}
|
|
571
595
|
};
|
|
572
|
-
|
|
596
|
+
if (this._triggerEvent("tree.move", {
|
|
573
597
|
move_info: {
|
|
574
598
|
do_move: doMove,
|
|
575
599
|
moved_node: movedNode,
|
|
@@ -578,72 +602,86 @@ var jqtree = (function (exports) {
|
|
|
578
602
|
previous_parent: previousParent,
|
|
579
603
|
target_node: targetNode
|
|
580
604
|
}
|
|
581
|
-
})
|
|
582
|
-
if (!event.isDefaultPrevented()) {
|
|
605
|
+
})) {
|
|
583
606
|
doMove();
|
|
584
607
|
}
|
|
585
608
|
}
|
|
586
609
|
}
|
|
587
|
-
|
|
610
|
+
_mustCaptureElement(element) {
|
|
588
611
|
const nodeName = element.nodeName;
|
|
589
612
|
return nodeName !== "INPUT" && nodeName !== "SELECT" && nodeName !== "TEXTAREA";
|
|
590
613
|
}
|
|
591
|
-
|
|
614
|
+
_mustOpenFolderTimer(area) {
|
|
592
615
|
const node = area.node;
|
|
593
616
|
return node.isFolder() && !node.is_open && area.position === "inside";
|
|
594
617
|
}
|
|
595
|
-
|
|
596
|
-
if (this.
|
|
597
|
-
this.
|
|
618
|
+
_removeDropHint() {
|
|
619
|
+
if (this._previousGhost) {
|
|
620
|
+
this._previousGhost.remove();
|
|
598
621
|
}
|
|
599
622
|
}
|
|
600
|
-
|
|
623
|
+
_removeHitAreas() {
|
|
601
624
|
this.hitAreas = [];
|
|
602
625
|
}
|
|
603
|
-
|
|
626
|
+
_removeHover() {
|
|
604
627
|
this.hoveredArea = null;
|
|
605
628
|
}
|
|
606
|
-
|
|
629
|
+
_startOpenFolderTimer(folder) {
|
|
607
630
|
const openFolder = () => {
|
|
608
|
-
this.
|
|
631
|
+
this._openNode(folder, this._slide, () => {
|
|
609
632
|
this.refresh();
|
|
610
|
-
this.
|
|
633
|
+
this._updateDropHint();
|
|
611
634
|
});
|
|
612
635
|
};
|
|
613
|
-
this.
|
|
614
|
-
const openFolderDelay = this.
|
|
636
|
+
this._stopOpenFolderTimer();
|
|
637
|
+
const openFolderDelay = this._openFolderDelay;
|
|
615
638
|
if (openFolderDelay !== false) {
|
|
616
|
-
this.
|
|
639
|
+
this._openFolderTimer = window.setTimeout(openFolder, openFolderDelay);
|
|
617
640
|
}
|
|
618
641
|
}
|
|
619
|
-
|
|
620
|
-
if (this.
|
|
621
|
-
clearTimeout(this.
|
|
622
|
-
this.
|
|
642
|
+
_stopOpenFolderTimer() {
|
|
643
|
+
if (this._openFolderTimer) {
|
|
644
|
+
clearTimeout(this._openFolderTimer);
|
|
645
|
+
this._openFolderTimer = null;
|
|
623
646
|
}
|
|
624
647
|
}
|
|
625
|
-
|
|
648
|
+
_updateDropHint() {
|
|
626
649
|
if (!this.hoveredArea) {
|
|
627
650
|
return;
|
|
628
651
|
}
|
|
629
652
|
|
|
630
653
|
// remove previous drop hint
|
|
631
|
-
this.
|
|
654
|
+
this._removeDropHint();
|
|
632
655
|
|
|
633
656
|
// add new drop hint
|
|
634
|
-
const nodeElement = this.
|
|
635
|
-
this.
|
|
657
|
+
const nodeElement = this._getNodeElementForNode(this.hoveredArea.node);
|
|
658
|
+
this._previousGhost = nodeElement.addDropHint(this.hoveredArea.position);
|
|
636
659
|
}
|
|
637
660
|
}
|
|
638
661
|
|
|
662
|
+
const isInt = n => typeof n === "number" && n % 1 === 0;
|
|
663
|
+
const getBoolString = value => value ? "true" : "false";
|
|
664
|
+
|
|
639
665
|
class ElementsRenderer {
|
|
666
|
+
closedIconElement;
|
|
667
|
+
openedIconElement;
|
|
668
|
+
_autoEscape;
|
|
669
|
+
_buttonLeft;
|
|
670
|
+
_dragAndDrop;
|
|
671
|
+
_getTree;
|
|
672
|
+
_htmlElement;
|
|
673
|
+
_isNodeSelected;
|
|
674
|
+
_onCreateLi;
|
|
675
|
+
_rtl;
|
|
676
|
+
_showEmptyFolder;
|
|
677
|
+
_tabIndex;
|
|
640
678
|
constructor({
|
|
641
|
-
$element,
|
|
642
679
|
autoEscape,
|
|
643
680
|
buttonLeft,
|
|
644
681
|
closedIcon,
|
|
645
682
|
dragAndDrop,
|
|
646
683
|
getTree,
|
|
684
|
+
htmlElement,
|
|
647
685
|
isNodeSelected,
|
|
648
686
|
onCreateLi,
|
|
649
687
|
openedIcon,
|
|
@@ -651,18 +689,18 @@ var jqtree = (function (exports) {
|
|
|
651
689
|
showEmptyFolder,
|
|
652
690
|
tabIndex
|
|
653
691
|
}) {
|
|
654
|
-
this.
|
|
655
|
-
this.
|
|
656
|
-
this.
|
|
657
|
-
this
|
|
658
|
-
this.
|
|
659
|
-
this.
|
|
660
|
-
this.
|
|
661
|
-
this.
|
|
662
|
-
this.
|
|
663
|
-
this.
|
|
664
|
-
this.openedIconElement = this.
|
|
665
|
-
this.closedIconElement = this.
|
|
692
|
+
this._autoEscape = autoEscape;
|
|
693
|
+
this._buttonLeft = buttonLeft;
|
|
694
|
+
this._dragAndDrop = dragAndDrop;
|
|
695
|
+
this._getTree = getTree;
|
|
696
|
+
this._htmlElement = htmlElement;
|
|
697
|
+
this._isNodeSelected = isNodeSelected;
|
|
698
|
+
this._onCreateLi = onCreateLi;
|
|
699
|
+
this._rtl = rtl;
|
|
700
|
+
this._showEmptyFolder = showEmptyFolder;
|
|
701
|
+
this._tabIndex = tabIndex;
|
|
702
|
+
this.openedIconElement = this._createButtonElement(openedIcon ?? "+");
|
|
703
|
+
this.closedIconElement = this._createButtonElement(closedIcon ?? "-");
|
|
666
704
|
}
|
|
667
705
|
render(fromNode) {
|
|
668
706
|
if (fromNode?.parent) {
|
|
@@ -675,34 +713,25 @@ var jqtree = (function (exports) {
|
|
|
675
713
|
if (!node.element) {
|
|
676
714
|
return;
|
|
677
715
|
}
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
// create element
|
|
683
|
-
const li = this.createLi(node, node.getLevel());
|
|
684
|
-
|
|
685
|
-
// add element to dom
|
|
686
|
-
$previousLi.after(li);
|
|
687
|
-
|
|
688
|
-
// remove previous li
|
|
689
|
-
$previousLi.remove();
|
|
716
|
+
const currentLi = node.element;
|
|
717
|
+
const newLi = this._createLi(node, node.getLevel());
|
|
718
|
+
currentLi.replaceWith(newLi);
|
|
690
719
|
|
|
691
720
|
// create children
|
|
692
|
-
this.
|
|
721
|
+
this._createDomElements(newLi, node.children, false, node.getLevel() + 1);
|
|
693
722
|
}
|
|
694
723
|
renderFromRoot() {
|
|
695
|
-
this
|
|
696
|
-
const tree = this.
|
|
697
|
-
if (
|
|
698
|
-
this.
|
|
724
|
+
this._htmlElement.textContent = '';
|
|
725
|
+
const tree = this._getTree();
|
|
726
|
+
if (tree) {
|
|
727
|
+
this._createDomElements(this._htmlElement, tree.children, true, 1);
|
|
699
728
|
}
|
|
700
729
|
}
|
|
701
|
-
|
|
730
|
+
_attachNodeData(node, li) {
|
|
702
731
|
node.element = li;
|
|
703
732
|
jQuery(li).data("node", node);
|
|
704
733
|
}
|
|
705
|
-
|
|
734
|
+
_createButtonElement(value) {
|
|
706
735
|
if (typeof value === "string") {
|
|
707
736
|
// convert value to html
|
|
708
737
|
const div = document.createElement("div");
|
|
@@ -714,20 +743,20 @@ var jqtree = (function (exports) {
|
|
|
714
743
|
return jQuery(value)[0];
|
|
715
744
|
}
|
|
716
745
|
}
|
|
717
|
-
|
|
718
|
-
const ul = this.
|
|
746
|
+
_createDomElements(element, children, isRootNode, level) {
|
|
747
|
+
const ul = this._createUl(isRootNode);
|
|
719
748
|
element.appendChild(ul);
|
|
720
749
|
for (const child of children) {
|
|
721
|
-
const li = this.
|
|
750
|
+
const li = this._createLi(child, level);
|
|
722
751
|
ul.appendChild(li);
|
|
723
752
|
if (child.hasChildren()) {
|
|
724
|
-
this.
|
|
753
|
+
this._createDomElements(li, child.children, false, level + 1);
|
|
725
754
|
}
|
|
726
755
|
}
|
|
727
756
|
}
|
|
728
|
-
|
|
729
|
-
const buttonClasses = this.
|
|
730
|
-
const folderClasses = this.
|
|
757
|
+
_createFolderLi(node, level, isSelected) {
|
|
758
|
+
const buttonClasses = this._getButtonClasses(node);
|
|
759
|
+
const folderClasses = this._getFolderClasses(node, isSelected);
|
|
731
760
|
const iconElement = node.is_open ? this.openedIconElement : this.closedIconElement;
|
|
732
761
|
|
|
733
762
|
// li
|
|
@@ -747,15 +776,15 @@ var jqtree = (function (exports) {
|
|
|
747
776
|
if (iconElement) {
|
|
748
777
|
buttonLink.appendChild(iconElement.cloneNode(true));
|
|
749
778
|
}
|
|
750
|
-
if (this.
|
|
779
|
+
if (this._buttonLeft) {
|
|
751
780
|
div.appendChild(buttonLink);
|
|
752
781
|
}
|
|
753
782
|
|
|
754
783
|
// title span
|
|
755
|
-
const titleSpan = this.
|
|
784
|
+
const titleSpan = this._createTitleSpan(node.name, isSelected, true, level);
|
|
756
785
|
titleSpan.setAttribute("aria-expanded", getBoolString(node.is_open));
|
|
757
786
|
div.appendChild(titleSpan);
|
|
758
|
-
if (!this.
|
|
787
|
+
if (!this._buttonLeft) {
|
|
759
788
|
div.appendChild(buttonLink);
|
|
760
789
|
}
|
|
761
790
|
return li;
|
|
@@ -765,17 +794,17 @@ var jqtree = (function (exports) {
|
|
|
765
794
|
* Attach it to node.element.
|
|
766
795
|
* Call onCreateLi
|
|
767
796
|
*/
|
|
768
|
-
|
|
769
|
-
const isSelected = this.
|
|
770
|
-
const mustShowFolder = node.isFolder() || node.isEmptyFolder && this.
|
|
771
|
-
const li = mustShowFolder ? this.
|
|
772
|
-
this.
|
|
773
|
-
if (this.
|
|
774
|
-
this.
|
|
797
|
+
_createLi(node, level) {
|
|
798
|
+
const isSelected = this._isNodeSelected(node);
|
|
799
|
+
const mustShowFolder = node.isFolder() || node.isEmptyFolder && this._showEmptyFolder;
|
|
800
|
+
const li = mustShowFolder ? this._createFolderLi(node, level, isSelected) : this._createNodeLi(node, level, isSelected);
|
|
801
|
+
this._attachNodeData(node, li);
|
|
802
|
+
if (this._onCreateLi) {
|
|
803
|
+
this._onCreateLi(node, jQuery(li), isSelected);
|
|
775
804
|
}
|
|
776
805
|
return li;
|
|
777
806
|
}
|
|
778
|
-
|
|
807
|
+
_createNodeLi(node, level, isSelected) {
|
|
779
808
|
const liClasses = ["jqtree_common"];
|
|
780
809
|
if (isSelected) {
|
|
781
810
|
liClasses.push("jqtree-selected");
|
|
@@ -794,33 +823,33 @@ var jqtree = (function (exports) {
|
|
|
794
823
|
li.appendChild(div);
|
|
795
824
|
|
|
796
825
|
// title span
|
|
797
|
-
const titleSpan = this.
|
|
826
|
+
const titleSpan = this._createTitleSpan(node.name, isSelected, false, level);
|
|
798
827
|
div.appendChild(titleSpan);
|
|
799
828
|
return li;
|
|
800
829
|
}
|
|
801
|
-
|
|
830
|
+
_createTitleSpan(nodeName, isSelected, isFolder, level) {
|
|
802
831
|
const titleSpan = document.createElement("span");
|
|
803
832
|
let classes = "jqtree-title jqtree_common";
|
|
804
833
|
if (isFolder) {
|
|
805
834
|
classes += " jqtree-title-folder";
|
|
806
835
|
}
|
|
807
|
-
classes += ` jqtree-title-button-${this.
|
|
836
|
+
classes += ` jqtree-title-button-${this._buttonLeft ? "left" : "right"}`;
|
|
808
837
|
titleSpan.className = classes;
|
|
809
838
|
if (isSelected) {
|
|
810
|
-
const tabIndex = this.
|
|
839
|
+
const tabIndex = this._tabIndex;
|
|
811
840
|
if (tabIndex !== undefined) {
|
|
812
841
|
titleSpan.setAttribute("tabindex", `${tabIndex}`);
|
|
813
842
|
}
|
|
814
843
|
}
|
|
815
|
-
this.
|
|
816
|
-
if (this.
|
|
844
|
+
this._setTreeItemAriaAttributes(titleSpan, nodeName, level, isSelected);
|
|
845
|
+
if (this._autoEscape) {
|
|
817
846
|
titleSpan.textContent = nodeName;
|
|
818
847
|
} else {
|
|
819
848
|
titleSpan.innerHTML = nodeName;
|
|
820
849
|
}
|
|
821
850
|
return titleSpan;
|
|
822
851
|
}
|
|
823
|
-
|
|
852
|
+
_createUl(isRootNode) {
|
|
824
853
|
let classString;
|
|
825
854
|
let role;
|
|
826
855
|
if (!isRootNode) {
|
|
@@ -829,11 +858,11 @@ var jqtree = (function (exports) {
|
|
|
829
858
|
} else {
|
|
830
859
|
classString = "jqtree-tree";
|
|
831
860
|
role = "tree";
|
|
832
|
-
if (this.
|
|
861
|
+
if (this._rtl) {
|
|
833
862
|
classString += " jqtree-rtl";
|
|
834
863
|
}
|
|
835
864
|
}
|
|
836
|
-
if (this.
|
|
865
|
+
if (this._dragAndDrop) {
|
|
837
866
|
classString += " jqtree-dnd";
|
|
838
867
|
}
|
|
839
868
|
const ul = document.createElement("ul");
|
|
@@ -841,19 +870,19 @@ var jqtree = (function (exports) {
|
|
|
841
870
|
ul.setAttribute("role", role);
|
|
842
871
|
return ul;
|
|
843
872
|
}
|
|
844
|
-
|
|
873
|
+
_getButtonClasses(node) {
|
|
845
874
|
const classes = ["jqtree-toggler", "jqtree_common"];
|
|
846
875
|
if (!node.is_open) {
|
|
847
876
|
classes.push("jqtree-closed");
|
|
848
877
|
}
|
|
849
|
-
if (this.
|
|
878
|
+
if (this._buttonLeft) {
|
|
850
879
|
classes.push("jqtree-toggler-left");
|
|
851
880
|
} else {
|
|
852
881
|
classes.push("jqtree-toggler-right");
|
|
853
882
|
}
|
|
854
883
|
return classes.join(" ");
|
|
855
884
|
}
|
|
856
|
-
|
|
885
|
+
_getFolderClasses(node, isSelected) {
|
|
857
886
|
const classes = ["jqtree-folder"];
|
|
858
887
|
if (!node.is_open) {
|
|
859
888
|
classes.push("jqtree-closed");
|
|
@@ -866,7 +895,7 @@ var jqtree = (function (exports) {
|
|
|
866
895
|
}
|
|
867
896
|
return classes.join(" ");
|
|
868
897
|
}
|
|
869
|
-
|
|
898
|
+
_setTreeItemAriaAttributes(element, name, level, isSelected) {
|
|
870
899
|
element.setAttribute("aria-label", name);
|
|
871
900
|
element.setAttribute("aria-level", `${level}`);
|
|
872
901
|
element.setAttribute("aria-selected", getBoolString(isSelected));
|
|
@@ -875,6 +904,12 @@ var jqtree = (function (exports) {
|
|
|
875
904
|
}
|
|
876
905
|
|
|
877
906
|
class KeyHandler {
|
|
907
|
+
_closeNode;
|
|
908
|
+
_getSelectedNode;
|
|
909
|
+
_isFocusOnTree;
|
|
910
|
+
_keyboardSupport;
|
|
911
|
+
_openNode;
|
|
912
|
+
_originalSelectNode;
|
|
878
913
|
constructor({
|
|
879
914
|
closeNode,
|
|
880
915
|
getSelectedNode,
|
|
@@ -883,46 +918,46 @@ var jqtree = (function (exports) {
|
|
|
883
918
|
openNode,
|
|
884
919
|
selectNode
|
|
885
920
|
}) {
|
|
886
|
-
this.
|
|
887
|
-
this.
|
|
888
|
-
this.
|
|
889
|
-
this.
|
|
890
|
-
this.
|
|
891
|
-
this.
|
|
921
|
+
this._closeNode = closeNode;
|
|
922
|
+
this._getSelectedNode = getSelectedNode;
|
|
923
|
+
this._isFocusOnTree = isFocusOnTree;
|
|
924
|
+
this._keyboardSupport = keyboardSupport;
|
|
925
|
+
this._openNode = openNode;
|
|
926
|
+
this._originalSelectNode = selectNode;
|
|
892
927
|
if (keyboardSupport) {
|
|
893
|
-
document.addEventListener("keydown", this.
|
|
928
|
+
document.addEventListener("keydown", this._handleKeyDown);
|
|
894
929
|
}
|
|
895
930
|
}
|
|
896
931
|
deinit() {
|
|
897
|
-
if (this.
|
|
898
|
-
document.removeEventListener("keydown", this.
|
|
932
|
+
if (this._keyboardSupport) {
|
|
933
|
+
document.removeEventListener("keydown", this._handleKeyDown);
|
|
899
934
|
}
|
|
900
935
|
}
|
|
901
936
|
moveDown(selectedNode) {
|
|
902
|
-
return this.
|
|
937
|
+
return this._selectNode(selectedNode.getNextVisibleNode());
|
|
903
938
|
}
|
|
904
939
|
moveUp(selectedNode) {
|
|
905
|
-
return this.
|
|
940
|
+
return this._selectNode(selectedNode.getPreviousVisibleNode());
|
|
906
941
|
}
|
|
907
|
-
|
|
908
|
-
return this.
|
|
942
|
+
_canHandleKeyboard() {
|
|
943
|
+
return this._keyboardSupport && this._isFocusOnTree();
|
|
909
944
|
}
|
|
910
|
-
|
|
911
|
-
if (!this.
|
|
945
|
+
_handleKeyDown = e => {
|
|
946
|
+
if (!this._canHandleKeyboard()) {
|
|
912
947
|
return;
|
|
913
948
|
}
|
|
914
949
|
let isKeyHandled = false;
|
|
915
|
-
const selectedNode = this.
|
|
950
|
+
const selectedNode = this._getSelectedNode();
|
|
916
951
|
if (selectedNode) {
|
|
917
952
|
switch (e.key) {
|
|
918
953
|
case "ArrowDown":
|
|
919
954
|
isKeyHandled = this.moveDown(selectedNode);
|
|
920
955
|
break;
|
|
921
956
|
case "ArrowLeft":
|
|
922
|
-
isKeyHandled = this.
|
|
957
|
+
isKeyHandled = this._moveLeft(selectedNode);
|
|
923
958
|
break;
|
|
924
959
|
case "ArrowRight":
|
|
925
|
-
isKeyHandled = this.
|
|
960
|
+
isKeyHandled = this._moveRight(selectedNode);
|
|
926
961
|
break;
|
|
927
962
|
case "ArrowUp":
|
|
928
963
|
isKeyHandled = this.moveUp(selectedNode);
|
|
@@ -933,27 +968,27 @@ var jqtree = (function (exports) {
|
|
|
933
968
|
e.preventDefault();
|
|
934
969
|
}
|
|
935
970
|
};
|
|
936
|
-
|
|
971
|
+
_moveLeft(selectedNode) {
|
|
937
972
|
if (selectedNode.isFolder() && selectedNode.is_open) {
|
|
938
973
|
// Left on an open node closes the node
|
|
939
|
-
this.
|
|
974
|
+
this._closeNode(selectedNode);
|
|
940
975
|
return true;
|
|
941
976
|
} else {
|
|
942
977
|
// Left on a closed or end node moves focus to the node's parent
|
|
943
|
-
return this.
|
|
978
|
+
return this._selectNode(selectedNode.getParent());
|
|
944
979
|
}
|
|
945
980
|
}
|
|
946
|
-
|
|
981
|
+
_moveRight(selectedNode) {
|
|
947
982
|
if (!selectedNode.isFolder()) {
|
|
948
983
|
return false;
|
|
949
984
|
} else {
|
|
950
985
|
// folder node
|
|
951
986
|
if (selectedNode.is_open) {
|
|
952
987
|
// Right moves to the first child of an open node
|
|
953
|
-
return this.
|
|
988
|
+
return this._selectNode(selectedNode.getNextVisibleNode());
|
|
954
989
|
} else {
|
|
955
990
|
// Right expands a closed node
|
|
956
|
-
this.
|
|
991
|
+
this._openNode(selectedNode);
|
|
957
992
|
return true;
|
|
958
993
|
}
|
|
959
994
|
}
|
|
@@ -963,11 +998,11 @@ var jqtree = (function (exports) {
|
|
|
963
998
|
* Don't do anything if the node is null.
|
|
964
999
|
* Result: a different node was selected.
|
|
965
1000
|
*/
|
|
966
|
-
|
|
1001
|
+
_selectNode(node) {
|
|
967
1002
|
if (!node) {
|
|
968
1003
|
return false;
|
|
969
1004
|
} else {
|
|
970
|
-
this.
|
|
1005
|
+
this._originalSelectNode(node);
|
|
971
1006
|
return true;
|
|
972
1007
|
}
|
|
973
1008
|
}
|
|
@@ -987,6 +1022,21 @@ var jqtree = (function (exports) {
|
|
|
987
1022
|
});
|
|
988
1023
|
|
|
989
1024
|
class MouseHandler {
|
|
1025
|
+
_element;
|
|
1026
|
+
_getMouseDelay;
|
|
1027
|
+
_getNode;
|
|
1028
|
+
_isMouseDelayMet;
|
|
1029
|
+
_isMouseStarted;
|
|
1030
|
+
_mouseDelayTimer;
|
|
1031
|
+
_mouseDownInfo;
|
|
1032
|
+
_onClickButton;
|
|
1033
|
+
_onClickTitle;
|
|
1034
|
+
_onMouseCapture;
|
|
1035
|
+
_onMouseDrag;
|
|
1036
|
+
_onMouseStart;
|
|
1037
|
+
_onMouseStop;
|
|
1038
|
+
_triggerEvent;
|
|
1039
|
+
_useContextMenu;
|
|
990
1040
|
constructor({
|
|
991
1041
|
element,
|
|
992
1042
|
getMouseDelay,
|
|
@@ -1000,47 +1050,47 @@ var jqtree = (function (exports) {
|
|
|
1000
1050
|
triggerEvent,
|
|
1001
1051
|
useContextMenu
|
|
1002
1052
|
}) {
|
|
1003
|
-
this.
|
|
1004
|
-
this.
|
|
1005
|
-
this.
|
|
1006
|
-
this.
|
|
1007
|
-
this.
|
|
1008
|
-
this.
|
|
1009
|
-
this.
|
|
1010
|
-
this.
|
|
1011
|
-
this.
|
|
1012
|
-
this.
|
|
1013
|
-
this.
|
|
1014
|
-
element.addEventListener("click", this.
|
|
1015
|
-
element.addEventListener("dblclick", this.
|
|
1016
|
-
element.addEventListener("mousedown", this.
|
|
1053
|
+
this._element = element;
|
|
1054
|
+
this._getMouseDelay = getMouseDelay;
|
|
1055
|
+
this._getNode = getNode;
|
|
1056
|
+
this._onClickButton = onClickButton;
|
|
1057
|
+
this._onClickTitle = onClickTitle;
|
|
1058
|
+
this._onMouseCapture = onMouseCapture;
|
|
1059
|
+
this._onMouseDrag = onMouseDrag;
|
|
1060
|
+
this._onMouseStart = onMouseStart;
|
|
1061
|
+
this._onMouseStop = onMouseStop;
|
|
1062
|
+
this._triggerEvent = triggerEvent;
|
|
1063
|
+
this._useContextMenu = useContextMenu;
|
|
1064
|
+
element.addEventListener("click", this._handleClick);
|
|
1065
|
+
element.addEventListener("dblclick", this._handleDblclick);
|
|
1066
|
+
element.addEventListener("mousedown", this._mouseDown, {
|
|
1017
1067
|
passive: false
|
|
1018
1068
|
});
|
|
1019
|
-
element.addEventListener("touchstart", this.
|
|
1069
|
+
element.addEventListener("touchstart", this._touchStart, {
|
|
1020
1070
|
passive: false
|
|
1021
1071
|
});
|
|
1022
1072
|
if (useContextMenu) {
|
|
1023
|
-
element.addEventListener("contextmenu", this.
|
|
1073
|
+
element.addEventListener("contextmenu", this._handleContextmenu);
|
|
1024
1074
|
}
|
|
1025
|
-
this.
|
|
1026
|
-
this.
|
|
1027
|
-
this.
|
|
1028
|
-
this.
|
|
1075
|
+
this._isMouseStarted = false;
|
|
1076
|
+
this._mouseDelayTimer = null;
|
|
1077
|
+
this._isMouseDelayMet = false;
|
|
1078
|
+
this._mouseDownInfo = null;
|
|
1029
1079
|
}
|
|
1030
1080
|
deinit() {
|
|
1031
|
-
this.
|
|
1032
|
-
this.
|
|
1033
|
-
if (this.
|
|
1034
|
-
this.
|
|
1081
|
+
this._element.removeEventListener("click", this._handleClick);
|
|
1082
|
+
this._element.removeEventListener("dblclick", this._handleDblclick);
|
|
1083
|
+
if (this._useContextMenu) {
|
|
1084
|
+
this._element.removeEventListener("contextmenu", this._handleContextmenu);
|
|
1035
1085
|
}
|
|
1036
|
-
this.
|
|
1037
|
-
this.
|
|
1038
|
-
this.
|
|
1086
|
+
this._element.removeEventListener("mousedown", this._mouseDown);
|
|
1087
|
+
this._element.removeEventListener("touchstart", this._touchStart);
|
|
1088
|
+
this._removeMouseMoveEventListeners();
|
|
1039
1089
|
}
|
|
1040
|
-
|
|
1090
|
+
_getClickTarget(element) {
|
|
1041
1091
|
const button = element.closest(".jqtree-toggler");
|
|
1042
1092
|
if (button) {
|
|
1043
|
-
const node = this.
|
|
1093
|
+
const node = this._getNode(button);
|
|
1044
1094
|
if (node) {
|
|
1045
1095
|
return {
|
|
1046
1096
|
node,
|
|
@@ -1050,7 +1100,7 @@ var jqtree = (function (exports) {
|
|
|
1050
1100
|
} else {
|
|
1051
1101
|
const jqTreeElement = element.closest(".jqtree-element");
|
|
1052
1102
|
if (jqTreeElement) {
|
|
1053
|
-
const node = this.
|
|
1103
|
+
const node = this._getNode(jqTreeElement);
|
|
1054
1104
|
if (node) {
|
|
1055
1105
|
return {
|
|
1056
1106
|
node,
|
|
@@ -1061,44 +1111,43 @@ var jqtree = (function (exports) {
|
|
|
1061
1111
|
}
|
|
1062
1112
|
return null;
|
|
1063
1113
|
}
|
|
1064
|
-
|
|
1114
|
+
_handleClick = e => {
|
|
1065
1115
|
if (!e.target) {
|
|
1066
1116
|
return;
|
|
1067
1117
|
}
|
|
1068
|
-
const clickTarget = this.
|
|
1118
|
+
const clickTarget = this._getClickTarget(e.target);
|
|
1069
1119
|
if (!clickTarget) {
|
|
1070
1120
|
return;
|
|
1071
1121
|
}
|
|
1072
1122
|
switch (clickTarget.type) {
|
|
1073
1123
|
case "button":
|
|
1074
|
-
this.
|
|
1124
|
+
this._onClickButton(clickTarget.node);
|
|
1075
1125
|
e.preventDefault();
|
|
1076
1126
|
e.stopPropagation();
|
|
1077
1127
|
break;
|
|
1078
1128
|
case "label":
|
|
1079
1129
|
{
|
|
1080
|
-
|
|
1130
|
+
if (this._triggerEvent("tree.click", {
|
|
1081
1131
|
click_event: e,
|
|
1082
1132
|
node: clickTarget.node
|
|
1083
|
-
})
|
|
1084
|
-
|
|
1085
|
-
this.onClickTitle(clickTarget.node);
|
|
1133
|
+
})) {
|
|
1134
|
+
this._onClickTitle(clickTarget.node);
|
|
1086
1135
|
}
|
|
1087
1136
|
break;
|
|
1088
1137
|
}
|
|
1089
1138
|
}
|
|
1090
1139
|
};
|
|
1091
|
-
|
|
1140
|
+
_handleContextmenu = e => {
|
|
1092
1141
|
if (!e.target) {
|
|
1093
1142
|
return;
|
|
1094
1143
|
}
|
|
1095
1144
|
const div = e.target.closest("ul.jqtree-tree .jqtree-element");
|
|
1096
1145
|
if (div) {
|
|
1097
|
-
const node = this.
|
|
1146
|
+
const node = this._getNode(div);
|
|
1098
1147
|
if (node) {
|
|
1099
1148
|
e.preventDefault();
|
|
1100
1149
|
e.stopPropagation();
|
|
1101
|
-
this.
|
|
1150
|
+
this._triggerEvent("tree.contextmenu", {
|
|
1102
1151
|
click_event: e,
|
|
1103
1152
|
node
|
|
1104
1153
|
});
|
|
@@ -1107,116 +1156,116 @@ var jqtree = (function (exports) {
|
|
|
1107
1156
|
}
|
|
1108
1157
|
return null;
|
|
1109
1158
|
};
|
|
1110
|
-
|
|
1159
|
+
_handleDblclick = e => {
|
|
1111
1160
|
if (!e.target) {
|
|
1112
1161
|
return;
|
|
1113
1162
|
}
|
|
1114
|
-
const clickTarget = this.
|
|
1163
|
+
const clickTarget = this._getClickTarget(e.target);
|
|
1115
1164
|
if (clickTarget?.type === "label") {
|
|
1116
|
-
this.
|
|
1165
|
+
this._triggerEvent("tree.dblclick", {
|
|
1117
1166
|
click_event: e,
|
|
1118
1167
|
node: clickTarget.node
|
|
1119
1168
|
});
|
|
1120
1169
|
}
|
|
1121
1170
|
};
|
|
1122
|
-
|
|
1171
|
+
_handleMouseDown(positionInfo) {
|
|
1123
1172
|
// We may have missed mouseup (out of window)
|
|
1124
|
-
if (this.
|
|
1125
|
-
this.
|
|
1173
|
+
if (this._isMouseStarted) {
|
|
1174
|
+
this._handleMouseUp(positionInfo);
|
|
1126
1175
|
}
|
|
1127
|
-
this.
|
|
1128
|
-
if (!this.
|
|
1176
|
+
this._mouseDownInfo = positionInfo;
|
|
1177
|
+
if (!this._onMouseCapture(positionInfo)) {
|
|
1129
1178
|
return false;
|
|
1130
1179
|
}
|
|
1131
|
-
this.
|
|
1180
|
+
this._handleStartMouse();
|
|
1132
1181
|
return true;
|
|
1133
1182
|
}
|
|
1134
|
-
|
|
1135
|
-
if (this.
|
|
1136
|
-
this.
|
|
1183
|
+
_handleMouseMove(e, positionInfo) {
|
|
1184
|
+
if (this._isMouseStarted) {
|
|
1185
|
+
this._onMouseDrag(positionInfo);
|
|
1137
1186
|
if (e.cancelable) {
|
|
1138
1187
|
e.preventDefault();
|
|
1139
1188
|
}
|
|
1140
1189
|
return;
|
|
1141
1190
|
}
|
|
1142
|
-
if (!this.
|
|
1191
|
+
if (!this._isMouseDelayMet) {
|
|
1143
1192
|
return;
|
|
1144
1193
|
}
|
|
1145
|
-
if (this.
|
|
1146
|
-
this.
|
|
1194
|
+
if (this._mouseDownInfo) {
|
|
1195
|
+
this._isMouseStarted = this._onMouseStart(this._mouseDownInfo);
|
|
1147
1196
|
}
|
|
1148
|
-
if (this.
|
|
1149
|
-
this.
|
|
1197
|
+
if (this._isMouseStarted) {
|
|
1198
|
+
this._onMouseDrag(positionInfo);
|
|
1150
1199
|
if (e.cancelable) {
|
|
1151
1200
|
e.preventDefault();
|
|
1152
1201
|
}
|
|
1153
1202
|
} else {
|
|
1154
|
-
this.
|
|
1203
|
+
this._handleMouseUp(positionInfo);
|
|
1155
1204
|
}
|
|
1156
1205
|
}
|
|
1157
|
-
|
|
1158
|
-
this.
|
|
1159
|
-
this.
|
|
1160
|
-
this.
|
|
1161
|
-
if (this.
|
|
1162
|
-
this.
|
|
1163
|
-
this.
|
|
1206
|
+
_handleMouseUp(positionInfo) {
|
|
1207
|
+
this._removeMouseMoveEventListeners();
|
|
1208
|
+
this._isMouseDelayMet = false;
|
|
1209
|
+
this._mouseDownInfo = null;
|
|
1210
|
+
if (this._isMouseStarted) {
|
|
1211
|
+
this._isMouseStarted = false;
|
|
1212
|
+
this._onMouseStop(positionInfo);
|
|
1164
1213
|
}
|
|
1165
1214
|
}
|
|
1166
|
-
|
|
1167
|
-
document.addEventListener("mousemove", this.
|
|
1215
|
+
_handleStartMouse() {
|
|
1216
|
+
document.addEventListener("mousemove", this._mouseMove, {
|
|
1168
1217
|
passive: false
|
|
1169
1218
|
});
|
|
1170
|
-
document.addEventListener("touchmove", this.
|
|
1219
|
+
document.addEventListener("touchmove", this._touchMove, {
|
|
1171
1220
|
passive: false
|
|
1172
1221
|
});
|
|
1173
|
-
document.addEventListener("mouseup", this.
|
|
1222
|
+
document.addEventListener("mouseup", this._mouseUp, {
|
|
1174
1223
|
passive: false
|
|
1175
1224
|
});
|
|
1176
|
-
document.addEventListener("touchend", this.
|
|
1225
|
+
document.addEventListener("touchend", this._touchEnd, {
|
|
1177
1226
|
passive: false
|
|
1178
1227
|
});
|
|
1179
|
-
const mouseDelay = this.
|
|
1228
|
+
const mouseDelay = this._getMouseDelay();
|
|
1180
1229
|
if (mouseDelay) {
|
|
1181
|
-
this.
|
|
1230
|
+
this._startMouseDelayTimer(mouseDelay);
|
|
1182
1231
|
} else {
|
|
1183
|
-
this.
|
|
1232
|
+
this._isMouseDelayMet = true;
|
|
1184
1233
|
}
|
|
1185
1234
|
}
|
|
1186
|
-
|
|
1235
|
+
_mouseDown = e => {
|
|
1187
1236
|
// Left mouse button?
|
|
1188
1237
|
if (e.button !== 0) {
|
|
1189
1238
|
return;
|
|
1190
1239
|
}
|
|
1191
|
-
const result = this.
|
|
1240
|
+
const result = this._handleMouseDown(getPositionInfoFromMouseEvent(e));
|
|
1192
1241
|
if (result && e.cancelable) {
|
|
1193
1242
|
e.preventDefault();
|
|
1194
1243
|
}
|
|
1195
1244
|
};
|
|
1196
|
-
|
|
1197
|
-
this.
|
|
1245
|
+
_mouseMove = e => {
|
|
1246
|
+
this._handleMouseMove(e, getPositionInfoFromMouseEvent(e));
|
|
1198
1247
|
};
|
|
1199
|
-
|
|
1200
|
-
this.
|
|
1248
|
+
_mouseUp = e => {
|
|
1249
|
+
this._handleMouseUp(getPositionInfoFromMouseEvent(e));
|
|
1201
1250
|
};
|
|
1202
|
-
|
|
1203
|
-
document.removeEventListener("mousemove", this.
|
|
1204
|
-
document.removeEventListener("touchmove", this.
|
|
1205
|
-
document.removeEventListener("mouseup", this.
|
|
1206
|
-
document.removeEventListener("touchend", this.
|
|
1251
|
+
_removeMouseMoveEventListeners() {
|
|
1252
|
+
document.removeEventListener("mousemove", this._mouseMove);
|
|
1253
|
+
document.removeEventListener("touchmove", this._touchMove);
|
|
1254
|
+
document.removeEventListener("mouseup", this._mouseUp);
|
|
1255
|
+
document.removeEventListener("touchend", this._touchEnd);
|
|
1207
1256
|
}
|
|
1208
|
-
|
|
1209
|
-
if (this.
|
|
1210
|
-
clearTimeout(this.
|
|
1257
|
+
_startMouseDelayTimer(mouseDelay) {
|
|
1258
|
+
if (this._mouseDelayTimer) {
|
|
1259
|
+
clearTimeout(this._mouseDelayTimer);
|
|
1211
1260
|
}
|
|
1212
|
-
this.
|
|
1213
|
-
if (this.
|
|
1214
|
-
this.
|
|
1261
|
+
this._mouseDelayTimer = window.setTimeout(() => {
|
|
1262
|
+
if (this._mouseDownInfo) {
|
|
1263
|
+
this._isMouseDelayMet = true;
|
|
1215
1264
|
}
|
|
1216
1265
|
}, mouseDelay);
|
|
1217
|
-
this.
|
|
1266
|
+
this._isMouseDelayMet = false;
|
|
1218
1267
|
}
|
|
1219
|
-
|
|
1268
|
+
_touchEnd = e => {
|
|
1220
1269
|
if (e.touches.length > 1) {
|
|
1221
1270
|
return;
|
|
1222
1271
|
}
|
|
@@ -1224,9 +1273,9 @@ var jqtree = (function (exports) {
|
|
|
1224
1273
|
if (!touch) {
|
|
1225
1274
|
return;
|
|
1226
1275
|
}
|
|
1227
|
-
this.
|
|
1276
|
+
this._handleMouseUp(getPositionInfoFromTouch(touch, e));
|
|
1228
1277
|
};
|
|
1229
|
-
|
|
1278
|
+
_touchMove = e => {
|
|
1230
1279
|
if (e.touches.length > 1) {
|
|
1231
1280
|
return;
|
|
1232
1281
|
}
|
|
@@ -1234,9 +1283,9 @@ var jqtree = (function (exports) {
|
|
|
1234
1283
|
if (!touch) {
|
|
1235
1284
|
return;
|
|
1236
1285
|
}
|
|
1237
|
-
this.
|
|
1286
|
+
this._handleMouseMove(e, getPositionInfoFromTouch(touch, e));
|
|
1238
1287
|
};
|
|
1239
|
-
|
|
1288
|
+
_touchStart = e => {
|
|
1240
1289
|
if (e.touches.length > 1) {
|
|
1241
1290
|
return;
|
|
1242
1291
|
}
|
|
@@ -1244,13 +1293,25 @@ var jqtree = (function (exports) {
|
|
|
1244
1293
|
if (!touch) {
|
|
1245
1294
|
return;
|
|
1246
1295
|
}
|
|
1247
|
-
this.
|
|
1296
|
+
this._handleMouseDown(getPositionInfoFromTouch(touch, e));
|
|
1248
1297
|
};
|
|
1249
1298
|
}
|
|
1250
1299
|
|
|
1251
1300
|
const isNodeRecordWithChildren = data => typeof data === "object" && "children" in data && data.children instanceof Array;
|
|
1252
1301
|
|
|
1253
1302
|
class Node {
|
|
1303
|
+
children;
|
|
1304
|
+
element;
|
|
1305
|
+
id;
|
|
1306
|
+
idMapping;
|
|
1307
|
+
is_loading;
|
|
1308
|
+
is_open;
|
|
1309
|
+
isEmptyFolder;
|
|
1310
|
+
load_on_demand;
|
|
1311
|
+
name;
|
|
1312
|
+
nodeClass;
|
|
1313
|
+
parent;
|
|
1314
|
+
tree;
|
|
1254
1315
|
constructor(nodeData = null, isRoot = false, nodeClass = Node) {
|
|
1255
1316
|
this.name = "";
|
|
1256
1317
|
this.load_on_demand = false;
|
|
@@ -1268,10 +1329,10 @@ var jqtree = (function (exports) {
|
|
|
1268
1329
|
if (!this.parent) {
|
|
1269
1330
|
return null;
|
|
1270
1331
|
} else {
|
|
1271
|
-
const node = this.
|
|
1332
|
+
const node = this._createNode(nodeInfo);
|
|
1272
1333
|
const childIndex = this.parent.getChildIndex(this);
|
|
1273
1334
|
this.parent.addChildAtPosition(node, childIndex + 1);
|
|
1274
|
-
node.
|
|
1335
|
+
node._loadChildrenFromData(nodeInfo);
|
|
1275
1336
|
return node;
|
|
1276
1337
|
}
|
|
1277
1338
|
}
|
|
@@ -1279,10 +1340,10 @@ var jqtree = (function (exports) {
|
|
|
1279
1340
|
if (!this.parent) {
|
|
1280
1341
|
return null;
|
|
1281
1342
|
} else {
|
|
1282
|
-
const node = this.
|
|
1343
|
+
const node = this._createNode(nodeInfo);
|
|
1283
1344
|
const childIndex = this.parent.getChildIndex(this);
|
|
1284
1345
|
this.parent.addChildAtPosition(node, childIndex);
|
|
1285
|
-
node.
|
|
1346
|
+
node._loadChildrenFromData(nodeInfo);
|
|
1286
1347
|
return node;
|
|
1287
1348
|
}
|
|
1288
1349
|
}
|
|
@@ -1295,7 +1356,7 @@ var jqtree = (function (exports) {
|
|
|
1295
1356
|
*/
|
|
1296
1357
|
addChild(node) {
|
|
1297
1358
|
this.children.push(node);
|
|
1298
|
-
node.
|
|
1359
|
+
node._setParent(this);
|
|
1299
1360
|
}
|
|
1300
1361
|
|
|
1301
1362
|
/*
|
|
@@ -1307,7 +1368,7 @@ var jqtree = (function (exports) {
|
|
|
1307
1368
|
*/
|
|
1308
1369
|
addChildAtPosition(node, index) {
|
|
1309
1370
|
this.children.splice(index, 0, node);
|
|
1310
|
-
node.
|
|
1371
|
+
node._setParent(this);
|
|
1311
1372
|
}
|
|
1312
1373
|
addNodeToIndex(node) {
|
|
1313
1374
|
if (node.id != null) {
|
|
@@ -1318,9 +1379,9 @@ var jqtree = (function (exports) {
|
|
|
1318
1379
|
if (!this.parent) {
|
|
1319
1380
|
return null;
|
|
1320
1381
|
} else {
|
|
1321
|
-
const newParent = this.
|
|
1382
|
+
const newParent = this._createNode(nodeInfo);
|
|
1322
1383
|
if (this.tree) {
|
|
1323
|
-
newParent.
|
|
1384
|
+
newParent._setParent(this.tree);
|
|
1324
1385
|
}
|
|
1325
1386
|
const originalParent = this.parent;
|
|
1326
1387
|
for (const child of originalParent.children) {
|
|
@@ -1332,9 +1393,9 @@ var jqtree = (function (exports) {
|
|
|
1332
1393
|
}
|
|
1333
1394
|
}
|
|
1334
1395
|
append(nodeInfo) {
|
|
1335
|
-
const node = this.
|
|
1396
|
+
const node = this._createNode(nodeInfo);
|
|
1336
1397
|
this.addChild(node);
|
|
1337
|
-
node.
|
|
1398
|
+
node._loadChildrenFromData(nodeInfo);
|
|
1338
1399
|
return node;
|
|
1339
1400
|
}
|
|
1340
1401
|
filter(f) {
|
|
@@ -1552,7 +1613,7 @@ var jqtree = (function (exports) {
|
|
|
1552
1613
|
};
|
|
1553
1614
|
const addChildren = childrenData => {
|
|
1554
1615
|
for (const child of childrenData) {
|
|
1555
|
-
const node = this.
|
|
1616
|
+
const node = this._createNode();
|
|
1556
1617
|
node.initFromData(child);
|
|
1557
1618
|
this.addChild(node);
|
|
1558
1619
|
}
|
|
@@ -1616,7 +1677,7 @@ var jqtree = (function (exports) {
|
|
|
1616
1677
|
loadFromData(data) {
|
|
1617
1678
|
this.removeChildren();
|
|
1618
1679
|
for (const childData of data) {
|
|
1619
|
-
const node = this.
|
|
1680
|
+
const node = this._createNode(childData);
|
|
1620
1681
|
this.addChild(node);
|
|
1621
1682
|
if (isNodeRecordWithChildren(childData)) {
|
|
1622
1683
|
node.loadFromData(childData.children);
|
|
@@ -1637,7 +1698,7 @@ var jqtree = (function (exports) {
|
|
|
1637
1698
|
// - Or, parent is empty
|
|
1638
1699
|
return false;
|
|
1639
1700
|
} else {
|
|
1640
|
-
movedNode.parent.
|
|
1701
|
+
movedNode.parent._doRemoveChild(movedNode);
|
|
1641
1702
|
switch (position) {
|
|
1642
1703
|
case "after":
|
|
1643
1704
|
{
|
|
@@ -1665,9 +1726,9 @@ var jqtree = (function (exports) {
|
|
|
1665
1726
|
}
|
|
1666
1727
|
}
|
|
1667
1728
|
prepend(nodeInfo) {
|
|
1668
|
-
const node = this.
|
|
1729
|
+
const node = this._createNode(nodeInfo);
|
|
1669
1730
|
this.addChildAtPosition(node, 0);
|
|
1670
|
-
node.
|
|
1731
|
+
node._loadChildrenFromData(nodeInfo);
|
|
1671
1732
|
return node;
|
|
1672
1733
|
}
|
|
1673
1734
|
remove() {
|
|
@@ -1684,7 +1745,7 @@ var jqtree = (function (exports) {
|
|
|
1684
1745
|
removeChild(node) {
|
|
1685
1746
|
// remove children from the index
|
|
1686
1747
|
node.removeChildren();
|
|
1687
|
-
this.
|
|
1748
|
+
this._doRemoveChild(node);
|
|
1688
1749
|
}
|
|
1689
1750
|
removeChildren() {
|
|
1690
1751
|
this.iterate(child => {
|
|
@@ -1732,25 +1793,25 @@ var jqtree = (function (exports) {
|
|
|
1732
1793
|
}
|
|
1733
1794
|
}
|
|
1734
1795
|
}
|
|
1735
|
-
|
|
1736
|
-
const nodeClass = this.
|
|
1796
|
+
_createNode(nodeData) {
|
|
1797
|
+
const nodeClass = this._getNodeClass();
|
|
1737
1798
|
return new nodeClass(nodeData);
|
|
1738
1799
|
}
|
|
1739
|
-
|
|
1800
|
+
_doRemoveChild(node) {
|
|
1740
1801
|
this.children.splice(this.getChildIndex(node), 1);
|
|
1741
1802
|
this.tree?.removeNodeFromIndex(node);
|
|
1742
1803
|
}
|
|
1743
|
-
|
|
1804
|
+
_getNodeClass() {
|
|
1744
1805
|
return this.nodeClass ?? this.tree?.nodeClass ?? Node;
|
|
1745
1806
|
}
|
|
1746
1807
|
|
|
1747
1808
|
// Load children data from nodeInfo if it has children
|
|
1748
|
-
|
|
1809
|
+
_loadChildrenFromData(nodeInfo) {
|
|
1749
1810
|
if (isNodeRecordWithChildren(nodeInfo) && nodeInfo.children.length) {
|
|
1750
1811
|
this.loadFromData(nodeInfo.children);
|
|
1751
1812
|
}
|
|
1752
1813
|
}
|
|
1753
|
-
|
|
1814
|
+
_setParent(parent) {
|
|
1754
1815
|
this.parent = parent;
|
|
1755
1816
|
this.tree = parent.tree;
|
|
1756
1817
|
this.tree?.addNodeToIndex(this);
|
|
@@ -1758,10 +1819,11 @@ var jqtree = (function (exports) {
|
|
|
1758
1819
|
}
|
|
1759
1820
|
|
|
1760
1821
|
class BorderDropHint {
|
|
1822
|
+
_hint;
|
|
1761
1823
|
constructor(element, scrollLeft) {
|
|
1762
1824
|
const div = element.querySelector(":scope > .jqtree-element");
|
|
1763
1825
|
if (!div) {
|
|
1764
|
-
this.
|
|
1826
|
+
this._hint = undefined;
|
|
1765
1827
|
return;
|
|
1766
1828
|
}
|
|
1767
1829
|
const width = Math.max(element.offsetWidth + scrollLeft - 4, 0);
|
|
@@ -1770,40 +1832,43 @@ var jqtree = (function (exports) {
|
|
|
1770
1832
|
hint.className = "jqtree-border";
|
|
1771
1833
|
hint.style.width = `${width}px`;
|
|
1772
1834
|
hint.style.height = `${height}px`;
|
|
1773
|
-
this.
|
|
1774
|
-
div.append(this.
|
|
1835
|
+
this._hint = hint;
|
|
1836
|
+
div.append(this._hint);
|
|
1775
1837
|
}
|
|
1776
1838
|
remove() {
|
|
1777
|
-
this.
|
|
1839
|
+
this._hint?.remove();
|
|
1778
1840
|
}
|
|
1779
1841
|
}
|
|
1780
1842
|
|
|
1781
1843
|
class GhostDropHint {
|
|
1844
|
+
_element;
|
|
1845
|
+
_ghost;
|
|
1846
|
+
_node;
|
|
1782
1847
|
constructor(node, element, position) {
|
|
1783
|
-
this.
|
|
1784
|
-
this.
|
|
1785
|
-
this.
|
|
1848
|
+
this._element = element;
|
|
1849
|
+
this._node = node;
|
|
1850
|
+
this._ghost = this._createGhostElement();
|
|
1786
1851
|
switch (position) {
|
|
1787
1852
|
case "after":
|
|
1788
|
-
this.
|
|
1853
|
+
this._moveAfter();
|
|
1789
1854
|
break;
|
|
1790
1855
|
case "before":
|
|
1791
|
-
this.
|
|
1856
|
+
this._moveBefore();
|
|
1792
1857
|
break;
|
|
1793
1858
|
case "inside":
|
|
1794
1859
|
{
|
|
1795
1860
|
if (node.isFolder() && node.is_open) {
|
|
1796
|
-
this.
|
|
1861
|
+
this._moveInsideOpenFolder();
|
|
1797
1862
|
} else {
|
|
1798
|
-
this.
|
|
1863
|
+
this._moveInside();
|
|
1799
1864
|
}
|
|
1800
1865
|
}
|
|
1801
1866
|
}
|
|
1802
1867
|
}
|
|
1803
1868
|
remove() {
|
|
1804
|
-
this.
|
|
1869
|
+
this._ghost.remove();
|
|
1805
1870
|
}
|
|
1806
|
-
|
|
1871
|
+
_createGhostElement() {
|
|
1807
1872
|
const ghost = document.createElement("li");
|
|
1808
1873
|
ghost.className = "jqtree_common jqtree-ghost";
|
|
1809
1874
|
const circleSpan = document.createElement("span");
|
|
@@ -1814,59 +1879,64 @@ var jqtree = (function (exports) {
|
|
|
1814
1879
|
ghost.append(lineSpan);
|
|
1815
1880
|
return ghost;
|
|
1816
1881
|
}
|
|
1817
|
-
|
|
1818
|
-
this.
|
|
1882
|
+
_moveAfter() {
|
|
1883
|
+
this._element.after(this._ghost);
|
|
1819
1884
|
}
|
|
1820
|
-
|
|
1821
|
-
this.
|
|
1885
|
+
_moveBefore() {
|
|
1886
|
+
this._element.before(this._ghost);
|
|
1822
1887
|
}
|
|
1823
|
-
|
|
1824
|
-
this.
|
|
1825
|
-
this.
|
|
1888
|
+
_moveInside() {
|
|
1889
|
+
this._element.after(this._ghost);
|
|
1890
|
+
this._ghost.classList.add("jqtree-inside");
|
|
1826
1891
|
}
|
|
1827
|
-
|
|
1828
|
-
const childElement = this.
|
|
1892
|
+
_moveInsideOpenFolder() {
|
|
1893
|
+
const childElement = this._node.children[0]?.element;
|
|
1829
1894
|
if (childElement) {
|
|
1830
|
-
childElement.before(this.
|
|
1895
|
+
childElement.before(this._ghost);
|
|
1831
1896
|
}
|
|
1832
1897
|
}
|
|
1833
1898
|
}
|
|
1834
1899
|
|
|
1835
1900
|
class NodeElement {
|
|
1901
|
+
element;
|
|
1902
|
+
node;
|
|
1903
|
+
_getScrollLeft;
|
|
1904
|
+
_tabIndex;
|
|
1905
|
+
_treeElement;
|
|
1836
1906
|
constructor({
|
|
1837
1907
|
getScrollLeft,
|
|
1838
1908
|
node,
|
|
1839
1909
|
tabIndex,
|
|
1840
1910
|
treeElement
|
|
1841
1911
|
}) {
|
|
1842
|
-
this.
|
|
1843
|
-
this.
|
|
1844
|
-
this.
|
|
1912
|
+
this._getScrollLeft = getScrollLeft;
|
|
1913
|
+
this._tabIndex = tabIndex;
|
|
1914
|
+
this._treeElement = treeElement;
|
|
1845
1915
|
this.init(node);
|
|
1846
1916
|
}
|
|
1847
1917
|
addDropHint(position) {
|
|
1848
|
-
if (this.
|
|
1849
|
-
return new BorderDropHint(this.element, this.
|
|
1918
|
+
if (this._mustShowBorderDropHint(position)) {
|
|
1919
|
+
return new BorderDropHint(this.element, this._getScrollLeft());
|
|
1850
1920
|
} else {
|
|
1851
1921
|
return new GhostDropHint(this.node, this.element, position);
|
|
1852
1922
|
}
|
|
1853
1923
|
}
|
|
1854
1924
|
deselect() {
|
|
1855
1925
|
this.element.classList.remove("jqtree-selected");
|
|
1856
|
-
const titleSpan = this.
|
|
1926
|
+
const titleSpan = this._getTitleSpan();
|
|
1857
1927
|
titleSpan.removeAttribute("tabindex");
|
|
1858
1928
|
titleSpan.setAttribute("aria-selected", "false");
|
|
1859
1929
|
titleSpan.blur();
|
|
1860
1930
|
}
|
|
1861
1931
|
init(node) {
|
|
1862
1932
|
this.node = node;
|
|
1863
|
-
node.element ??= this.
|
|
1933
|
+
node.element ??= this._treeElement;
|
|
1864
1934
|
this.element = node.element;
|
|
1865
1935
|
}
|
|
1866
1936
|
select(mustSetFocus) {
|
|
1867
1937
|
this.element.classList.add("jqtree-selected");
|
|
1868
|
-
const titleSpan = this.
|
|
1869
|
-
const tabIndex = this.
|
|
1938
|
+
const titleSpan = this._getTitleSpan();
|
|
1939
|
+
const tabIndex = this._tabIndex;
|
|
1870
1940
|
|
|
1871
1941
|
// Check for null or undefined
|
|
1872
1942
|
if (tabIndex != null) {
|
|
@@ -1877,18 +1947,58 @@ var jqtree = (function (exports) {
|
|
|
1877
1947
|
titleSpan.focus();
|
|
1878
1948
|
}
|
|
1879
1949
|
}
|
|
1880
|
-
|
|
1950
|
+
_getTitleSpan() {
|
|
1881
1951
|
return this.element.querySelector(":scope > .jqtree-element > span.jqtree-title");
|
|
1882
1952
|
}
|
|
1883
|
-
|
|
1953
|
+
_getUl() {
|
|
1884
1954
|
return this.element.querySelector(":scope > ul");
|
|
1885
1955
|
}
|
|
1886
|
-
|
|
1956
|
+
_mustShowBorderDropHint(position) {
|
|
1887
1957
|
return position === "inside";
|
|
1888
1958
|
}
|
|
1889
1959
|
}
|
|
1890
1960
|
|
|
1961
|
+
const getAnimationDuration = duration => {
|
|
1962
|
+
if (typeof duration === "number") {
|
|
1963
|
+
return duration;
|
|
1964
|
+
}
|
|
1965
|
+
return duration === "slow" ? 600 : 200;
|
|
1966
|
+
};
|
|
1967
|
+
const slideDown = (element, animationSpeed, onFinished) => {
|
|
1968
|
+
element.style.display = "block";
|
|
1969
|
+
const animation = element.animate([{
|
|
1970
|
+
height: "0",
|
|
1971
|
+
overflow: "hidden"
|
|
1972
|
+
}, {
|
|
1973
|
+
height: `${element.scrollHeight}px`,
|
|
1974
|
+
overflow: "hidden"
|
|
1975
|
+
}], {
|
|
1976
|
+
duration: getAnimationDuration(animationSpeed)
|
|
1977
|
+
});
|
|
1978
|
+
animation.onfinish = () => {
|
|
1979
|
+
onFinished();
|
|
1980
|
+
};
|
|
1981
|
+
};
|
|
1982
|
+
const slideUp = (element, animationSpeed, onFinished) => {
|
|
1983
|
+
const animation = element.animate([{
|
|
1984
|
+
height: `${element.scrollHeight}px`,
|
|
1985
|
+
overflow: "hidden"
|
|
1986
|
+
}, {
|
|
1987
|
+
height: "0",
|
|
1988
|
+
overflow: "hidden"
|
|
1989
|
+
}], {
|
|
1990
|
+
duration: getAnimationDuration(animationSpeed)
|
|
1991
|
+
});
|
|
1992
|
+
animation.onfinish = () => {
|
|
1993
|
+
element.style.display = "none";
|
|
1994
|
+
onFinished();
|
|
1995
|
+
};
|
|
1996
|
+
};
|
|
1997
|
+
|
|
1891
1998
|
class FolderElement extends NodeElement {
|
|
1999
|
+
_closedIconElement;
|
|
2000
|
+
_openedIconElement;
|
|
2001
|
+
_triggerEvent;
|
|
1892
2002
|
constructor({
|
|
1893
2003
|
closedIconElement,
|
|
1894
2004
|
getScrollLeft,
|
|
@@ -1904,35 +2014,36 @@ var jqtree = (function (exports) {
|
|
|
1904
2014
|
tabIndex,
|
|
1905
2015
|
treeElement
|
|
1906
2016
|
});
|
|
1907
|
-
this.
|
|
1908
|
-
this.
|
|
1909
|
-
this.
|
|
2017
|
+
this._closedIconElement = closedIconElement;
|
|
2018
|
+
this._openedIconElement = openedIconElement;
|
|
2019
|
+
this._triggerEvent = triggerEvent;
|
|
1910
2020
|
}
|
|
1911
2021
|
close(slide, animationSpeed) {
|
|
1912
2022
|
if (!this.node.is_open) {
|
|
1913
2023
|
return;
|
|
1914
2024
|
}
|
|
1915
2025
|
this.node.is_open = false;
|
|
1916
|
-
const button = this.
|
|
2026
|
+
const button = this._getButton();
|
|
1917
2027
|
button.classList.add("jqtree-closed");
|
|
1918
2028
|
button.innerHTML = "";
|
|
1919
|
-
const closedIconElement = this.
|
|
2029
|
+
const closedIconElement = this._closedIconElement;
|
|
1920
2030
|
if (closedIconElement) {
|
|
1921
2031
|
const icon = closedIconElement.cloneNode(true);
|
|
1922
2032
|
button.appendChild(icon);
|
|
1923
2033
|
}
|
|
1924
2034
|
const doClose = () => {
|
|
1925
2035
|
this.element.classList.add("jqtree-closed");
|
|
1926
|
-
const titleSpan = this.
|
|
2036
|
+
const titleSpan = this._getTitleSpan();
|
|
1927
2037
|
titleSpan.setAttribute("aria-expanded", "false");
|
|
1928
|
-
this.
|
|
2038
|
+
this._triggerEvent("tree.close", {
|
|
1929
2039
|
node: this.node
|
|
1930
2040
|
});
|
|
1931
2041
|
};
|
|
2042
|
+
const ul = this._getUl();
|
|
1932
2043
|
if (slide) {
|
|
1933
|
-
|
|
2044
|
+
slideUp(ul, animationSpeed, doClose);
|
|
1934
2045
|
} else {
|
|
1935
|
-
|
|
2046
|
+
ul.style.display = "none";
|
|
1936
2047
|
doClose();
|
|
1937
2048
|
}
|
|
1938
2049
|
}
|
|
@@ -1941,41 +2052,52 @@ var jqtree = (function (exports) {
|
|
|
1941
2052
|
return;
|
|
1942
2053
|
}
|
|
1943
2054
|
this.node.is_open = true;
|
|
1944
|
-
const button = this.
|
|
2055
|
+
const button = this._getButton();
|
|
1945
2056
|
button.classList.remove("jqtree-closed");
|
|
1946
2057
|
button.innerHTML = "";
|
|
1947
|
-
const openedIconElement = this.
|
|
2058
|
+
const openedIconElement = this._openedIconElement;
|
|
1948
2059
|
if (openedIconElement) {
|
|
1949
2060
|
const icon = openedIconElement.cloneNode(true);
|
|
1950
2061
|
button.appendChild(icon);
|
|
1951
2062
|
}
|
|
1952
2063
|
const doOpen = () => {
|
|
1953
2064
|
this.element.classList.remove("jqtree-closed");
|
|
1954
|
-
const titleSpan = this.
|
|
2065
|
+
const titleSpan = this._getTitleSpan();
|
|
1955
2066
|
titleSpan.setAttribute("aria-expanded", "true");
|
|
1956
2067
|
if (onFinished) {
|
|
1957
2068
|
onFinished(this.node);
|
|
1958
2069
|
}
|
|
1959
|
-
this.
|
|
2070
|
+
this._triggerEvent("tree.open", {
|
|
1960
2071
|
node: this.node
|
|
1961
2072
|
});
|
|
1962
2073
|
};
|
|
2074
|
+
const ul = this._getUl();
|
|
1963
2075
|
if (slide) {
|
|
1964
|
-
|
|
2076
|
+
slideDown(ul, animationSpeed, doOpen);
|
|
1965
2077
|
} else {
|
|
1966
|
-
|
|
2078
|
+
ul.style.display = "block";
|
|
1967
2079
|
doOpen();
|
|
1968
2080
|
}
|
|
1969
2081
|
}
|
|
1970
|
-
|
|
2082
|
+
_mustShowBorderDropHint(position) {
|
|
1971
2083
|
return !this.node.is_open && position === "inside";
|
|
1972
2084
|
}
|
|
1973
|
-
|
|
2085
|
+
_getButton() {
|
|
1974
2086
|
return this.element.querySelector(":scope > .jqtree-element > a.jqtree-toggler");
|
|
1975
2087
|
}
|
|
1976
2088
|
}
|
|
1977
2089
|
|
|
1978
2090
|
class SaveStateHandler {
|
|
2091
|
+
_addToSelection;
|
|
2092
|
+
_getNodeById;
|
|
2093
|
+
_getSelectedNodes;
|
|
2094
|
+
_getTree;
|
|
2095
|
+
_onGetStateFromStorage;
|
|
2096
|
+
_onSetStateFromStorage;
|
|
2097
|
+
_openNode;
|
|
2098
|
+
_refreshElements;
|
|
2099
|
+
_removeFromSelection;
|
|
2100
|
+
_saveStateOption;
|
|
1979
2101
|
constructor({
|
|
1980
2102
|
addToSelection,
|
|
1981
2103
|
getNodeById,
|
|
@@ -1988,16 +2110,16 @@ var jqtree = (function (exports) {
|
|
|
1988
2110
|
removeFromSelection,
|
|
1989
2111
|
saveState
|
|
1990
2112
|
}) {
|
|
1991
|
-
this.
|
|
1992
|
-
this.
|
|
1993
|
-
this.
|
|
1994
|
-
this.
|
|
1995
|
-
this.
|
|
1996
|
-
this.
|
|
1997
|
-
this.
|
|
1998
|
-
this.
|
|
1999
|
-
this.
|
|
2000
|
-
this.
|
|
2113
|
+
this._addToSelection = addToSelection;
|
|
2114
|
+
this._getNodeById = getNodeById;
|
|
2115
|
+
this._getSelectedNodes = getSelectedNodes;
|
|
2116
|
+
this._getTree = getTree;
|
|
2117
|
+
this._onGetStateFromStorage = onGetStateFromStorage;
|
|
2118
|
+
this._onSetStateFromStorage = onSetStateFromStorage;
|
|
2119
|
+
this._openNode = openNode;
|
|
2120
|
+
this._refreshElements = refreshElements;
|
|
2121
|
+
this._removeFromSelection = removeFromSelection;
|
|
2122
|
+
this._saveStateOption = saveState;
|
|
2001
2123
|
}
|
|
2002
2124
|
getNodeIdToBeSelected() {
|
|
2003
2125
|
const state = this.getStateFromStorage();
|
|
@@ -2010,7 +2132,7 @@ var jqtree = (function (exports) {
|
|
|
2010
2132
|
getState() {
|
|
2011
2133
|
const getOpenNodeIds = () => {
|
|
2012
2134
|
const openNodes = [];
|
|
2013
|
-
this.
|
|
2135
|
+
this._getTree()?.iterate(node => {
|
|
2014
2136
|
if (node.is_open && node.id && node.hasChildren()) {
|
|
2015
2137
|
openNodes.push(node.id);
|
|
2016
2138
|
}
|
|
@@ -2020,7 +2142,7 @@ var jqtree = (function (exports) {
|
|
|
2020
2142
|
};
|
|
2021
2143
|
const getSelectedNodeIds = () => {
|
|
2022
2144
|
const selectedNodeIds = [];
|
|
2023
|
-
this.
|
|
2145
|
+
this._getSelectedNodes().forEach(node => {
|
|
2024
2146
|
if (node.id != null) {
|
|
2025
2147
|
selectedNodeIds.push(node.id);
|
|
2026
2148
|
}
|
|
@@ -2033,19 +2155,19 @@ var jqtree = (function (exports) {
|
|
|
2033
2155
|
};
|
|
2034
2156
|
}
|
|
2035
2157
|
getStateFromStorage() {
|
|
2036
|
-
const jsonData = this.
|
|
2158
|
+
const jsonData = this._loadFromStorage();
|
|
2037
2159
|
if (jsonData) {
|
|
2038
|
-
return this.
|
|
2160
|
+
return this._parseState(jsonData);
|
|
2039
2161
|
} else {
|
|
2040
2162
|
return null;
|
|
2041
2163
|
}
|
|
2042
2164
|
}
|
|
2043
2165
|
saveState() {
|
|
2044
2166
|
const state = JSON.stringify(this.getState());
|
|
2045
|
-
if (this.
|
|
2046
|
-
this.
|
|
2167
|
+
if (this._onSetStateFromStorage) {
|
|
2168
|
+
this._onSetStateFromStorage(state);
|
|
2047
2169
|
} else {
|
|
2048
|
-
localStorage.setItem(this.
|
|
2170
|
+
localStorage.setItem(this._getKeyName(), state);
|
|
2049
2171
|
}
|
|
2050
2172
|
}
|
|
2051
2173
|
|
|
@@ -2057,11 +2179,11 @@ var jqtree = (function (exports) {
|
|
|
2057
2179
|
setInitialState(state) {
|
|
2058
2180
|
let mustLoadOnDemand = false;
|
|
2059
2181
|
if (state.open_nodes) {
|
|
2060
|
-
mustLoadOnDemand = this.
|
|
2182
|
+
mustLoadOnDemand = this._openInitialNodes(state.open_nodes);
|
|
2061
2183
|
}
|
|
2062
|
-
this.
|
|
2184
|
+
this._resetSelection();
|
|
2063
2185
|
if (state.selected_node) {
|
|
2064
|
-
this.
|
|
2186
|
+
this._selectInitialNodes(state.selected_node);
|
|
2065
2187
|
}
|
|
2066
2188
|
return mustLoadOnDemand;
|
|
2067
2189
|
}
|
|
@@ -2074,7 +2196,7 @@ var jqtree = (function (exports) {
|
|
|
2074
2196
|
}
|
|
2075
2197
|
const newNodesIds = [];
|
|
2076
2198
|
for (const nodeId of nodeIds) {
|
|
2077
|
-
const node = this.
|
|
2199
|
+
const node = this._getNodeById(nodeId);
|
|
2078
2200
|
if (!node) {
|
|
2079
2201
|
newNodesIds.push(nodeId);
|
|
2080
2202
|
} else {
|
|
@@ -2082,15 +2204,15 @@ var jqtree = (function (exports) {
|
|
|
2082
2204
|
if (node.load_on_demand) {
|
|
2083
2205
|
loadAndOpenNode(node);
|
|
2084
2206
|
} else {
|
|
2085
|
-
this.
|
|
2207
|
+
this._openNode(node, false);
|
|
2086
2208
|
}
|
|
2087
2209
|
}
|
|
2088
2210
|
}
|
|
2089
2211
|
}
|
|
2090
2212
|
nodeIds = newNodesIds;
|
|
2091
2213
|
if (state.selected_node) {
|
|
2092
|
-
if (this.
|
|
2093
|
-
this.
|
|
2214
|
+
if (this._selectInitialNodes(state.selected_node)) {
|
|
2215
|
+
this._refreshElements(null);
|
|
2094
2216
|
}
|
|
2095
2217
|
}
|
|
2096
2218
|
if (loadingCount === 0) {
|
|
@@ -2099,31 +2221,31 @@ var jqtree = (function (exports) {
|
|
|
2099
2221
|
};
|
|
2100
2222
|
const loadAndOpenNode = node => {
|
|
2101
2223
|
loadingCount += 1;
|
|
2102
|
-
this.
|
|
2224
|
+
this._openNode(node, false, () => {
|
|
2103
2225
|
loadingCount -= 1;
|
|
2104
2226
|
openNodes();
|
|
2105
2227
|
});
|
|
2106
2228
|
};
|
|
2107
2229
|
openNodes();
|
|
2108
2230
|
}
|
|
2109
|
-
|
|
2110
|
-
if (typeof this.
|
|
2111
|
-
return this.
|
|
2231
|
+
_getKeyName() {
|
|
2232
|
+
if (typeof this._saveStateOption === "string") {
|
|
2233
|
+
return this._saveStateOption;
|
|
2112
2234
|
} else {
|
|
2113
2235
|
return "tree";
|
|
2114
2236
|
}
|
|
2115
2237
|
}
|
|
2116
|
-
|
|
2117
|
-
if (this.
|
|
2118
|
-
return this.
|
|
2238
|
+
_loadFromStorage() {
|
|
2239
|
+
if (this._onGetStateFromStorage) {
|
|
2240
|
+
return this._onGetStateFromStorage();
|
|
2119
2241
|
} else {
|
|
2120
|
-
return localStorage.getItem(this.
|
|
2242
|
+
return localStorage.getItem(this._getKeyName());
|
|
2121
2243
|
}
|
|
2122
2244
|
}
|
|
2123
|
-
|
|
2245
|
+
_openInitialNodes(nodeIds) {
|
|
2124
2246
|
let mustLoadOnDemand = false;
|
|
2125
2247
|
for (const nodeId of nodeIds) {
|
|
2126
|
-
const node = this.
|
|
2248
|
+
const node = this._getNodeById(nodeId);
|
|
2127
2249
|
if (node) {
|
|
2128
2250
|
if (!node.load_on_demand) {
|
|
2129
2251
|
node.is_open = true;
|
|
@@ -2134,7 +2256,7 @@ var jqtree = (function (exports) {
|
|
|
2134
2256
|
}
|
|
2135
2257
|
return mustLoadOnDemand;
|
|
2136
2258
|
}
|
|
2137
|
-
|
|
2259
|
+
_parseState(jsonData) {
|
|
2138
2260
|
const state = JSON.parse(jsonData);
|
|
2139
2261
|
|
|
2140
2262
|
// Check if selected_node is an int (instead of an array)
|
|
@@ -2144,19 +2266,19 @@ var jqtree = (function (exports) {
|
|
|
2144
2266
|
}
|
|
2145
2267
|
return state;
|
|
2146
2268
|
}
|
|
2147
|
-
|
|
2148
|
-
const selectedNodes = this.
|
|
2269
|
+
_resetSelection() {
|
|
2270
|
+
const selectedNodes = this._getSelectedNodes();
|
|
2149
2271
|
selectedNodes.forEach(node => {
|
|
2150
|
-
this.
|
|
2272
|
+
this._removeFromSelection(node);
|
|
2151
2273
|
});
|
|
2152
2274
|
}
|
|
2153
|
-
|
|
2275
|
+
_selectInitialNodes(nodeIds) {
|
|
2154
2276
|
let selectCount = 0;
|
|
2155
2277
|
for (const nodeId of nodeIds) {
|
|
2156
|
-
const node = this.
|
|
2278
|
+
const node = this._getNodeById(nodeId);
|
|
2157
2279
|
if (node) {
|
|
2158
2280
|
selectCount += 1;
|
|
2159
|
-
this.
|
|
2281
|
+
this._addToSelection(node);
|
|
2160
2282
|
}
|
|
2161
2283
|
}
|
|
2162
2284
|
return selectCount !== 0;
|
|
@@ -2164,85 +2286,93 @@ var jqtree = (function (exports) {
|
|
|
2164
2286
|
}
|
|
2165
2287
|
|
|
2166
2288
|
class ScrollParent {
|
|
2289
|
+
_container;
|
|
2290
|
+
_horizontalScrollDirection;
|
|
2291
|
+
_horizontalScrollTimeout;
|
|
2292
|
+
_refreshHitAreas;
|
|
2293
|
+
_verticalScrollDirection;
|
|
2294
|
+
_verticalScrollTimeout;
|
|
2167
2295
|
constructor({
|
|
2168
2296
|
container,
|
|
2169
2297
|
refreshHitAreas
|
|
2170
2298
|
}) {
|
|
2171
|
-
this.
|
|
2172
|
-
this.
|
|
2299
|
+
this._container = container;
|
|
2300
|
+
this._refreshHitAreas = refreshHitAreas;
|
|
2173
2301
|
}
|
|
2174
2302
|
checkHorizontalScrolling(pageX) {
|
|
2175
|
-
const newHorizontalScrollDirection = this.
|
|
2176
|
-
if (this.
|
|
2177
|
-
this.
|
|
2178
|
-
if (this.
|
|
2179
|
-
window.clearTimeout(this.
|
|
2303
|
+
const newHorizontalScrollDirection = this._getNewHorizontalScrollDirection(pageX);
|
|
2304
|
+
if (this._horizontalScrollDirection !== newHorizontalScrollDirection) {
|
|
2305
|
+
this._horizontalScrollDirection = newHorizontalScrollDirection;
|
|
2306
|
+
if (this._horizontalScrollTimeout != null) {
|
|
2307
|
+
window.clearTimeout(this._horizontalScrollTimeout);
|
|
2180
2308
|
}
|
|
2181
2309
|
if (newHorizontalScrollDirection) {
|
|
2182
|
-
this.
|
|
2310
|
+
this._horizontalScrollTimeout = window.setTimeout(this._scrollHorizontally.bind(this), 40);
|
|
2183
2311
|
}
|
|
2184
2312
|
}
|
|
2185
2313
|
}
|
|
2186
2314
|
checkVerticalScrolling(pageY) {
|
|
2187
|
-
const newVerticalScrollDirection = this.
|
|
2188
|
-
if (this.
|
|
2189
|
-
this.
|
|
2190
|
-
if (this.
|
|
2191
|
-
window.clearTimeout(this.
|
|
2192
|
-
this.
|
|
2315
|
+
const newVerticalScrollDirection = this._getNewVerticalScrollDirection(pageY);
|
|
2316
|
+
if (this._verticalScrollDirection !== newVerticalScrollDirection) {
|
|
2317
|
+
this._verticalScrollDirection = newVerticalScrollDirection;
|
|
2318
|
+
if (this._verticalScrollTimeout != null) {
|
|
2319
|
+
window.clearTimeout(this._verticalScrollTimeout);
|
|
2320
|
+
this._verticalScrollTimeout = undefined;
|
|
2193
2321
|
}
|
|
2194
2322
|
if (newVerticalScrollDirection) {
|
|
2195
|
-
this.
|
|
2323
|
+
this._verticalScrollTimeout = window.setTimeout(this._scrollVertically.bind(this), 40);
|
|
2196
2324
|
}
|
|
2197
2325
|
}
|
|
2198
2326
|
}
|
|
2199
2327
|
getScrollLeft() {
|
|
2200
|
-
return this.
|
|
2328
|
+
return this._container.scrollLeft;
|
|
2201
2329
|
}
|
|
2202
2330
|
scrollToY(top) {
|
|
2203
|
-
this.
|
|
2331
|
+
this._container.scrollTop = top;
|
|
2204
2332
|
}
|
|
2205
2333
|
stopScrolling() {
|
|
2206
|
-
this.
|
|
2207
|
-
this.
|
|
2334
|
+
this._horizontalScrollDirection = undefined;
|
|
2335
|
+
this._verticalScrollDirection = undefined;
|
|
2208
2336
|
}
|
|
2209
|
-
|
|
2210
|
-
if (!this.
|
|
2337
|
+
_scrollHorizontally() {
|
|
2338
|
+
if (!this._horizontalScrollDirection) {
|
|
2211
2339
|
return;
|
|
2212
2340
|
}
|
|
2213
|
-
const distance = this.
|
|
2214
|
-
this.
|
|
2341
|
+
const distance = this._horizontalScrollDirection === "left" ? -20 : 20;
|
|
2342
|
+
this._container.scrollBy({
|
|
2215
2343
|
behavior: "instant",
|
|
2216
2344
|
left: distance,
|
|
2217
2345
|
top: 0
|
|
2218
2346
|
});
|
|
2219
|
-
this.
|
|
2220
|
-
setTimeout(this.
|
|
2347
|
+
this._refreshHitAreas();
|
|
2348
|
+
setTimeout(this._scrollHorizontally.bind(this), 40);
|
|
2221
2349
|
}
|
|
2222
|
-
|
|
2223
|
-
if (!this.
|
|
2350
|
+
_scrollVertically() {
|
|
2351
|
+
if (!this._verticalScrollDirection) {
|
|
2224
2352
|
return;
|
|
2225
2353
|
}
|
|
2226
|
-
const distance = this.
|
|
2227
|
-
this.
|
|
2354
|
+
const distance = this._verticalScrollDirection === "top" ? -20 : 20;
|
|
2355
|
+
this._container.scrollBy({
|
|
2228
2356
|
behavior: "instant",
|
|
2229
2357
|
left: 0,
|
|
2230
2358
|
top: distance
|
|
2231
2359
|
});
|
|
2232
|
-
this.
|
|
2233
|
-
setTimeout(this.
|
|
2360
|
+
this._refreshHitAreas();
|
|
2361
|
+
setTimeout(this._scrollVertically.bind(this), 40);
|
|
2234
2362
|
}
|
|
2235
2363
|
}
|
|
2236
2364
|
|
|
2237
2365
|
class ContainerScrollParent extends ScrollParent {
|
|
2366
|
+
_scrollParentBottom;
|
|
2367
|
+
_scrollParentTop;
|
|
2238
2368
|
stopScrolling() {
|
|
2239
2369
|
super.stopScrolling();
|
|
2240
|
-
this.
|
|
2241
|
-
this.
|
|
2370
|
+
this._horizontalScrollDirection = undefined;
|
|
2371
|
+
this._verticalScrollDirection = undefined;
|
|
2242
2372
|
}
|
|
2243
|
-
|
|
2244
|
-
const scrollParentOffset = getElementPosition(this.
|
|
2245
|
-
const containerWidth = this.
|
|
2373
|
+
_getNewHorizontalScrollDirection(pageX) {
|
|
2374
|
+
const scrollParentOffset = getElementPosition(this._container);
|
|
2375
|
+
const containerWidth = this._container.getBoundingClientRect().width;
|
|
2246
2376
|
const rightEdge = scrollParentOffset.left + containerWidth;
|
|
2247
2377
|
const leftEdge = scrollParentOffset.left;
|
|
2248
2378
|
const isNearRightEdge = pageX > rightEdge - 20;
|
|
@@ -2254,29 +2384,32 @@ var jqtree = (function (exports) {
|
|
|
2254
2384
|
}
|
|
2255
2385
|
return undefined;
|
|
2256
2386
|
}
|
|
2257
|
-
|
|
2258
|
-
if (pageY < this.
|
|
2387
|
+
_getNewVerticalScrollDirection(pageY) {
|
|
2388
|
+
if (pageY < this._getScrollParentTop()) {
|
|
2259
2389
|
return "top";
|
|
2260
2390
|
}
|
|
2261
|
-
if (pageY > this.
|
|
2391
|
+
if (pageY > this._getScrollParentBottom()) {
|
|
2262
2392
|
return "bottom";
|
|
2263
2393
|
}
|
|
2264
2394
|
return undefined;
|
|
2265
2395
|
}
|
|
2266
|
-
|
|
2267
|
-
if (this.
|
|
2268
|
-
const containerHeight = this.
|
|
2269
|
-
this.
|
|
2396
|
+
_getScrollParentBottom() {
|
|
2397
|
+
if (this._scrollParentBottom == null) {
|
|
2398
|
+
const containerHeight = this._container.getBoundingClientRect().height;
|
|
2399
|
+
this._scrollParentBottom = this._getScrollParentTop() + containerHeight;
|
|
2270
2400
|
}
|
|
2271
|
-
return this.
|
|
2401
|
+
return this._scrollParentBottom;
|
|
2272
2402
|
}
|
|
2273
|
-
|
|
2274
|
-
this.
|
|
2275
|
-
return this.
|
|
2403
|
+
_getScrollParentTop() {
|
|
2404
|
+
this._scrollParentTop ??= getOffsetTop(this._container);
|
|
2405
|
+
return this._scrollParentTop;
|
|
2276
2406
|
}
|
|
2277
2407
|
}
|
|
2278
2408
|
|
|
2279
2409
|
class DocumentScrollParent extends ScrollParent {
|
|
2410
|
+
_documentScrollHeight;
|
|
2411
|
+
_documentScrollWidth;
|
|
2412
|
+
_treeElement;
|
|
2280
2413
|
constructor({
|
|
2281
2414
|
refreshHitAreas,
|
|
2282
2415
|
treeElement
|
|
@@ -2285,23 +2418,23 @@ var jqtree = (function (exports) {
|
|
|
2285
2418
|
container: document.documentElement,
|
|
2286
2419
|
refreshHitAreas
|
|
2287
2420
|
});
|
|
2288
|
-
this.
|
|
2421
|
+
this._treeElement = treeElement;
|
|
2289
2422
|
}
|
|
2290
2423
|
scrollToY(top) {
|
|
2291
|
-
const treeTop = getOffsetTop(this.
|
|
2424
|
+
const treeTop = getOffsetTop(this._treeElement);
|
|
2292
2425
|
super.scrollToY(top + treeTop);
|
|
2293
2426
|
}
|
|
2294
2427
|
stopScrolling() {
|
|
2295
2428
|
super.stopScrolling();
|
|
2296
|
-
this.
|
|
2297
|
-
this.
|
|
2429
|
+
this._documentScrollHeight = undefined;
|
|
2430
|
+
this._documentScrollWidth = undefined;
|
|
2298
2431
|
}
|
|
2299
|
-
|
|
2300
|
-
const scrollLeft = this.
|
|
2432
|
+
_getNewHorizontalScrollDirection(pageX) {
|
|
2433
|
+
const scrollLeft = this._container.scrollLeft;
|
|
2301
2434
|
const windowWidth = window.innerWidth;
|
|
2302
2435
|
const isNearRightEdge = pageX > windowWidth - 20;
|
|
2303
2436
|
const isNearLeftEdge = pageX - scrollLeft < 20;
|
|
2304
|
-
if (isNearRightEdge && this.
|
|
2437
|
+
if (isNearRightEdge && this._canScrollRight()) {
|
|
2305
2438
|
return "right";
|
|
2306
2439
|
}
|
|
2307
2440
|
if (isNearLeftEdge) {
|
|
@@ -2309,33 +2442,33 @@ var jqtree = (function (exports) {
|
|
|
2309
2442
|
}
|
|
2310
2443
|
return undefined;
|
|
2311
2444
|
}
|
|
2312
|
-
|
|
2313
|
-
const scrollTop = this.
|
|
2445
|
+
_getNewVerticalScrollDirection(pageY) {
|
|
2446
|
+
const scrollTop = this._container.scrollTop;
|
|
2314
2447
|
const distanceTop = pageY - scrollTop;
|
|
2315
2448
|
if (distanceTop < 20) {
|
|
2316
2449
|
return "top";
|
|
2317
2450
|
}
|
|
2318
2451
|
const windowHeight = window.innerHeight;
|
|
2319
|
-
if (windowHeight - (pageY - scrollTop) < 20 && this.
|
|
2452
|
+
if (windowHeight - (pageY - scrollTop) < 20 && this._canScrollDown()) {
|
|
2320
2453
|
return "bottom";
|
|
2321
2454
|
}
|
|
2322
2455
|
return undefined;
|
|
2323
2456
|
}
|
|
2324
|
-
|
|
2325
|
-
return this.
|
|
2457
|
+
_canScrollDown() {
|
|
2458
|
+
return this._container.scrollTop + this._container.clientHeight < this._getDocumentScrollHeight();
|
|
2326
2459
|
}
|
|
2327
|
-
|
|
2328
|
-
return this.
|
|
2460
|
+
_canScrollRight() {
|
|
2461
|
+
return this._container.scrollLeft + this._container.clientWidth < this._getDocumentScrollWidth();
|
|
2329
2462
|
}
|
|
2330
|
-
|
|
2463
|
+
_getDocumentScrollHeight() {
|
|
2331
2464
|
// Store the original scroll height because the scroll height can increase when the drag element is moved beyond the scroll height.
|
|
2332
|
-
this.
|
|
2333
|
-
return this.
|
|
2465
|
+
this._documentScrollHeight ??= this._container.scrollHeight;
|
|
2466
|
+
return this._documentScrollHeight;
|
|
2334
2467
|
}
|
|
2335
|
-
|
|
2468
|
+
_getDocumentScrollWidth() {
|
|
2336
2469
|
// Store the original scroll width because the scroll width can increase when the drag element is moved beyond the scroll width.
|
|
2337
|
-
this.
|
|
2338
|
-
return this.
|
|
2470
|
+
this._documentScrollWidth ??= this._container.scrollWidth;
|
|
2471
|
+
return this._documentScrollWidth;
|
|
2339
2472
|
}
|
|
2340
2473
|
}
|
|
2341
2474
|
|
|
@@ -2373,57 +2506,63 @@ var jqtree = (function (exports) {
|
|
|
2373
2506
|
};
|
|
2374
2507
|
|
|
2375
2508
|
class ScrollHandler {
|
|
2509
|
+
_refreshHitAreas;
|
|
2510
|
+
_scrollParent;
|
|
2511
|
+
_treeElement;
|
|
2376
2512
|
constructor({
|
|
2377
2513
|
refreshHitAreas,
|
|
2378
2514
|
treeElement
|
|
2379
2515
|
}) {
|
|
2380
|
-
this.
|
|
2381
|
-
this.
|
|
2382
|
-
this.
|
|
2516
|
+
this._refreshHitAreas = refreshHitAreas;
|
|
2517
|
+
this._scrollParent = undefined;
|
|
2518
|
+
this._treeElement = treeElement;
|
|
2383
2519
|
}
|
|
2384
2520
|
checkScrolling(positionInfo) {
|
|
2385
|
-
this.
|
|
2386
|
-
this.
|
|
2521
|
+
this._checkVerticalScrolling(positionInfo);
|
|
2522
|
+
this._checkHorizontalScrolling(positionInfo);
|
|
2387
2523
|
}
|
|
2388
2524
|
getScrollLeft() {
|
|
2389
|
-
return this.
|
|
2525
|
+
return this._getScrollParent().getScrollLeft();
|
|
2390
2526
|
}
|
|
2391
2527
|
scrollToY(top) {
|
|
2392
|
-
this.
|
|
2528
|
+
this._getScrollParent().scrollToY(top);
|
|
2393
2529
|
}
|
|
2394
2530
|
stopScrolling() {
|
|
2395
|
-
this.
|
|
2531
|
+
this._getScrollParent().stopScrolling();
|
|
2396
2532
|
}
|
|
2397
|
-
|
|
2398
|
-
this.
|
|
2533
|
+
_checkHorizontalScrolling(positionInfo) {
|
|
2534
|
+
this._getScrollParent().checkHorizontalScrolling(positionInfo.pageX);
|
|
2399
2535
|
}
|
|
2400
|
-
|
|
2401
|
-
this.
|
|
2536
|
+
_checkVerticalScrolling(positionInfo) {
|
|
2537
|
+
this._getScrollParent().checkVerticalScrolling(positionInfo.pageY);
|
|
2402
2538
|
}
|
|
2403
|
-
|
|
2404
|
-
this.
|
|
2405
|
-
return this.
|
|
2539
|
+
_getScrollParent() {
|
|
2540
|
+
this._scrollParent ??= createScrollParent(this._treeElement, this._refreshHitAreas);
|
|
2541
|
+
return this._scrollParent;
|
|
2406
2542
|
}
|
|
2407
2543
|
}
|
|
2408
2544
|
|
|
2409
2545
|
class SelectNodeHandler {
|
|
2546
|
+
_getNodeById;
|
|
2547
|
+
_selectedNodes;
|
|
2548
|
+
_selectedSingleNode;
|
|
2410
2549
|
constructor({
|
|
2411
2550
|
getNodeById
|
|
2412
2551
|
}) {
|
|
2413
|
-
this.
|
|
2414
|
-
this.
|
|
2552
|
+
this._getNodeById = getNodeById;
|
|
2553
|
+
this._selectedNodes = new Set();
|
|
2415
2554
|
this.clear();
|
|
2416
2555
|
}
|
|
2417
2556
|
addToSelection(node) {
|
|
2418
2557
|
if (node.id != null) {
|
|
2419
|
-
this.
|
|
2558
|
+
this._selectedNodes.add(node.id);
|
|
2420
2559
|
} else {
|
|
2421
|
-
this.
|
|
2560
|
+
this._selectedSingleNode = node;
|
|
2422
2561
|
}
|
|
2423
2562
|
}
|
|
2424
2563
|
clear() {
|
|
2425
|
-
this.
|
|
2426
|
-
this.
|
|
2564
|
+
this._selectedNodes.clear();
|
|
2565
|
+
this._selectedSingleNode = null;
|
|
2427
2566
|
}
|
|
2428
2567
|
getSelectedNode() {
|
|
2429
2568
|
const selectedNodes = this.getSelectedNodes();
|
|
@@ -2434,12 +2573,12 @@ var jqtree = (function (exports) {
|
|
|
2434
2573
|
}
|
|
2435
2574
|
}
|
|
2436
2575
|
getSelectedNodes() {
|
|
2437
|
-
if (this.
|
|
2438
|
-
return [this.
|
|
2576
|
+
if (this._selectedSingleNode) {
|
|
2577
|
+
return [this._selectedSingleNode];
|
|
2439
2578
|
} else {
|
|
2440
2579
|
const selectedNodes = [];
|
|
2441
|
-
this.
|
|
2442
|
-
const node = this.
|
|
2580
|
+
this._selectedNodes.forEach(id => {
|
|
2581
|
+
const node = this._getNodeById(id);
|
|
2443
2582
|
if (node) {
|
|
2444
2583
|
selectedNodes.push(node);
|
|
2445
2584
|
}
|
|
@@ -2448,16 +2587,16 @@ var jqtree = (function (exports) {
|
|
|
2448
2587
|
}
|
|
2449
2588
|
}
|
|
2450
2589
|
getSelectedNodesUnder(parent) {
|
|
2451
|
-
if (this.
|
|
2452
|
-
if (parent.isParentOf(this.
|
|
2453
|
-
return [this.
|
|
2590
|
+
if (this._selectedSingleNode) {
|
|
2591
|
+
if (parent.isParentOf(this._selectedSingleNode)) {
|
|
2592
|
+
return [this._selectedSingleNode];
|
|
2454
2593
|
} else {
|
|
2455
2594
|
return [];
|
|
2456
2595
|
}
|
|
2457
2596
|
} else {
|
|
2458
2597
|
const selectedNodes = [];
|
|
2459
|
-
this.
|
|
2460
|
-
const node = this.
|
|
2598
|
+
this._selectedNodes.forEach(id => {
|
|
2599
|
+
const node = this._getNodeById(id);
|
|
2461
2600
|
if (node && parent.isParentOf(node)) {
|
|
2462
2601
|
selectedNodes.push(node);
|
|
2463
2602
|
}
|
|
@@ -2467,24 +2606,24 @@ var jqtree = (function (exports) {
|
|
|
2467
2606
|
}
|
|
2468
2607
|
isNodeSelected(node) {
|
|
2469
2608
|
if (node.id != null) {
|
|
2470
|
-
return this.
|
|
2471
|
-
} else if (this.
|
|
2472
|
-
return this.
|
|
2609
|
+
return this._selectedNodes.has(node.id);
|
|
2610
|
+
} else if (this._selectedSingleNode) {
|
|
2611
|
+
return this._selectedSingleNode.element === node.element;
|
|
2473
2612
|
} else {
|
|
2474
2613
|
return false;
|
|
2475
2614
|
}
|
|
2476
2615
|
}
|
|
2477
2616
|
removeFromSelection(node, includeChildren = false) {
|
|
2478
2617
|
if (node.id == null) {
|
|
2479
|
-
if (this.
|
|
2480
|
-
this.
|
|
2618
|
+
if (this._selectedSingleNode && node.element === this._selectedSingleNode.element) {
|
|
2619
|
+
this._selectedSingleNode = null;
|
|
2481
2620
|
}
|
|
2482
2621
|
} else {
|
|
2483
|
-
this.
|
|
2622
|
+
this._selectedNodes.delete(node.id);
|
|
2484
2623
|
if (includeChildren) {
|
|
2485
2624
|
node.iterate(() => {
|
|
2486
2625
|
if (node.id != null) {
|
|
2487
|
-
this.
|
|
2626
|
+
this._selectedNodes.delete(node.id);
|
|
2488
2627
|
}
|
|
2489
2628
|
return true;
|
|
2490
2629
|
});
|
|
@@ -2493,159 +2632,82 @@ var jqtree = (function (exports) {
|
|
|
2493
2632
|
}
|
|
2494
2633
|
}
|
|
2495
2634
|
|
|
2496
|
-
const
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
|
|
2502
|
-
|
|
2503
|
-
|
|
2504
|
-
|
|
2505
|
-
|
|
2506
|
-
|
|
2507
|
-
|
|
2508
|
-
|
|
2509
|
-
|
|
2510
|
-
|
|
2511
|
-
|
|
2512
|
-
|
|
2513
|
-
|
|
2514
|
-
|
|
2515
|
-
|
|
2516
|
-
|
|
2517
|
-
|
|
2518
|
-
|
|
2519
|
-
|
|
2520
|
-
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2524
|
-
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
|
|
2538
|
-
|
|
2539
|
-
|
|
2540
|
-
|
|
2541
|
-
|
|
2542
|
-
|
|
2543
|
-
}
|
|
2544
|
-
}
|
|
2545
|
-
return result;
|
|
2546
|
-
};
|
|
2547
|
-
|
|
2548
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
2549
|
-
jQuery.fn[widgetName] = function (argument1, ...args) {
|
|
2550
|
-
if (!argument1) {
|
|
2551
|
-
return createWidget(this, null);
|
|
2552
|
-
} else if (typeof argument1 === "object") {
|
|
2553
|
-
const options = argument1;
|
|
2554
|
-
return createWidget(this, options);
|
|
2555
|
-
} else if (typeof argument1 === "string" && argument1[0] !== "_") {
|
|
2556
|
-
const functionName = argument1;
|
|
2557
|
-
if (argument1 === "destroy") {
|
|
2558
|
-
destroyWidget(this);
|
|
2559
|
-
return undefined;
|
|
2560
|
-
} else {
|
|
2561
|
-
return callFunction(this, functionName, args);
|
|
2562
|
-
}
|
|
2563
|
-
} else {
|
|
2564
|
-
return undefined;
|
|
2565
|
-
}
|
|
2566
|
-
};
|
|
2635
|
+
const version = "1.9.1";
|
|
2636
|
+
|
|
2637
|
+
const defaults = {
|
|
2638
|
+
animationSpeed: "fast",
|
|
2639
|
+
autoEscape: true,
|
|
2640
|
+
autoOpen: false,
|
|
2641
|
+
// true / false / int (open n levels starting at 0)
|
|
2642
|
+
buttonLeft: true,
|
|
2643
|
+
// The symbol to use for a closed node - ► BLACK RIGHT-POINTING POINTER
|
|
2644
|
+
// http://www.fileformat.info/info/unicode/char/25ba/index.htm
|
|
2645
|
+
closedIcon: undefined,
|
|
2646
|
+
data: undefined,
|
|
2647
|
+
dataFilter: undefined,
|
|
2648
|
+
dataUrl: undefined,
|
|
2649
|
+
dragAndDrop: false,
|
|
2650
|
+
keyboardSupport: true,
|
|
2651
|
+
nodeClass: Node,
|
|
2652
|
+
onCanMove: undefined,
|
|
2653
|
+
// Can this node be moved?
|
|
2654
|
+
onCanMoveTo: undefined,
|
|
2655
|
+
// Can this node be moved to this position? function(moved_node, target_node, position)
|
|
2656
|
+
onCanSelectNode: undefined,
|
|
2657
|
+
onCreateLi: undefined,
|
|
2658
|
+
onDragMove: undefined,
|
|
2659
|
+
onDragStop: undefined,
|
|
2660
|
+
onGetStateFromStorage: undefined,
|
|
2661
|
+
onIsMoveHandle: undefined,
|
|
2662
|
+
onLoadFailed: undefined,
|
|
2663
|
+
onLoading: undefined,
|
|
2664
|
+
onSetStateFromStorage: undefined,
|
|
2665
|
+
openedIcon: "▼",
|
|
2666
|
+
openFolderDelay: 500,
|
|
2667
|
+
// The delay for opening a folder during drag and drop; the value is in milliseconds
|
|
2668
|
+
// The symbol to use for an open node - ▼ BLACK DOWN-POINTING TRIANGLE
|
|
2669
|
+
// http://www.fileformat.info/info/unicode/char/25bc/index.htm
|
|
2670
|
+
rtl: undefined,
|
|
2671
|
+
// right-to-left support; true / false (default)
|
|
2672
|
+
saveState: false,
|
|
2673
|
+
// true / false / string (cookie name)
|
|
2674
|
+
selectable: true,
|
|
2675
|
+
showEmptyFolder: false,
|
|
2676
|
+
slide: true,
|
|
2677
|
+
// must display slide animation?
|
|
2678
|
+
startDndDelay: 300,
|
|
2679
|
+
// The delay for starting dnd (in milliseconds)
|
|
2680
|
+
tabIndex: 0,
|
|
2681
|
+
useContextMenu: true
|
|
2567
2682
|
};
|
|
2568
|
-
|
|
2569
|
-
|
|
2683
|
+
const NODE_PARAM_IS_EMPTY = "Node parameter is empty";
|
|
2684
|
+
const PARAM_IS_EMPTY = "Parameter is empty: ";
|
|
2685
|
+
class JqTreeWidget {
|
|
2686
|
+
_dataLoader;
|
|
2687
|
+
_dndHandler;
|
|
2688
|
+
_element;
|
|
2689
|
+
_htmlElement;
|
|
2690
|
+
_isInitialized;
|
|
2691
|
+
_keyHandler;
|
|
2692
|
+
_mouseHandler;
|
|
2693
|
+
_options;
|
|
2694
|
+
_renderer;
|
|
2695
|
+
_saveStateHandler;
|
|
2696
|
+
_scrollHandler;
|
|
2697
|
+
_selectNodeHandler;
|
|
2698
|
+
_tree;
|
|
2570
2699
|
constructor(el, options) {
|
|
2571
|
-
this
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
const defaults = this.constructor.defaults;
|
|
2575
|
-
this.options = {
|
|
2700
|
+
this._htmlElement = el;
|
|
2701
|
+
this._element = jQuery(el);
|
|
2702
|
+
this._options = {
|
|
2576
2703
|
...defaults,
|
|
2577
2704
|
...options
|
|
2578
2705
|
};
|
|
2579
2706
|
}
|
|
2580
|
-
static register(widgetClass, widgetName) {
|
|
2581
|
-
register(widgetClass, widgetName);
|
|
2582
|
-
}
|
|
2583
|
-
deinit() {
|
|
2584
|
-
//
|
|
2585
|
-
}
|
|
2586
|
-
destroy() {
|
|
2587
|
-
this.deinit();
|
|
2588
|
-
}
|
|
2589
|
-
init() {
|
|
2590
|
-
//
|
|
2591
|
-
}
|
|
2592
|
-
}
|
|
2593
|
-
|
|
2594
|
-
const version = "1.8.11";
|
|
2595
|
-
|
|
2596
|
-
const NODE_PARAM_IS_EMPTY = "Node parameter is empty";
|
|
2597
|
-
const PARAM_IS_EMPTY = "Parameter is empty: ";
|
|
2598
|
-
class JqTreeWidget extends SimpleWidget {
|
|
2599
|
-
static defaults = {
|
|
2600
|
-
animationSpeed: "fast",
|
|
2601
|
-
autoEscape: true,
|
|
2602
|
-
autoOpen: false,
|
|
2603
|
-
// true / false / int (open n levels starting at 0)
|
|
2604
|
-
buttonLeft: true,
|
|
2605
|
-
// The symbol to use for a closed node - ► BLACK RIGHT-POINTING POINTER
|
|
2606
|
-
// http://www.fileformat.info/info/unicode/char/25ba/index.htm
|
|
2607
|
-
closedIcon: undefined,
|
|
2608
|
-
data: undefined,
|
|
2609
|
-
dataFilter: undefined,
|
|
2610
|
-
dataUrl: undefined,
|
|
2611
|
-
dragAndDrop: false,
|
|
2612
|
-
keyboardSupport: true,
|
|
2613
|
-
nodeClass: Node,
|
|
2614
|
-
onCanMove: undefined,
|
|
2615
|
-
// Can this node be moved?
|
|
2616
|
-
onCanMoveTo: undefined,
|
|
2617
|
-
// Can this node be moved to this position? function(moved_node, target_node, position)
|
|
2618
|
-
onCanSelectNode: undefined,
|
|
2619
|
-
onCreateLi: undefined,
|
|
2620
|
-
onDragMove: undefined,
|
|
2621
|
-
onDragStop: undefined,
|
|
2622
|
-
onGetStateFromStorage: undefined,
|
|
2623
|
-
onIsMoveHandle: undefined,
|
|
2624
|
-
onLoadFailed: undefined,
|
|
2625
|
-
onLoading: undefined,
|
|
2626
|
-
onSetStateFromStorage: undefined,
|
|
2627
|
-
openedIcon: "▼",
|
|
2628
|
-
openFolderDelay: 500,
|
|
2629
|
-
// The delay for opening a folder during drag and drop; the value is in milliseconds
|
|
2630
|
-
// The symbol to use for an open node - ▼ BLACK DOWN-POINTING TRIANGLE
|
|
2631
|
-
// http://www.fileformat.info/info/unicode/char/25bc/index.htm
|
|
2632
|
-
rtl: undefined,
|
|
2633
|
-
// right-to-left support; true / false (default)
|
|
2634
|
-
saveState: false,
|
|
2635
|
-
// true / false / string (cookie name)
|
|
2636
|
-
selectable: true,
|
|
2637
|
-
showEmptyFolder: false,
|
|
2638
|
-
slide: true,
|
|
2639
|
-
// must display slide animation?
|
|
2640
|
-
startDndDelay: 300,
|
|
2641
|
-
// The delay for starting dnd (in milliseconds)
|
|
2642
|
-
tabIndex: 0,
|
|
2643
|
-
useContextMenu: true
|
|
2644
|
-
};
|
|
2645
2707
|
addNodeAfter(newNodeInfo, existingNode) {
|
|
2646
2708
|
const newNode = existingNode.addAfter(newNodeInfo);
|
|
2647
2709
|
if (newNode) {
|
|
2648
|
-
this.
|
|
2710
|
+
this._refreshElements(existingNode.parent);
|
|
2649
2711
|
}
|
|
2650
2712
|
return newNode;
|
|
2651
2713
|
}
|
|
@@ -2655,7 +2717,7 @@ var jqtree = (function (exports) {
|
|
|
2655
2717
|
}
|
|
2656
2718
|
const newNode = existingNode.addBefore(newNodeInfo);
|
|
2657
2719
|
if (newNode) {
|
|
2658
|
-
this.
|
|
2720
|
+
this._refreshElements(existingNode.parent);
|
|
2659
2721
|
}
|
|
2660
2722
|
return newNode;
|
|
2661
2723
|
}
|
|
@@ -2665,7 +2727,7 @@ var jqtree = (function (exports) {
|
|
|
2665
2727
|
}
|
|
2666
2728
|
const newNode = existingNode.addParent(newNodeInfo);
|
|
2667
2729
|
if (newNode) {
|
|
2668
|
-
this.
|
|
2730
|
+
this._refreshElements(newNode.parent);
|
|
2669
2731
|
}
|
|
2670
2732
|
return newNode;
|
|
2671
2733
|
}
|
|
@@ -2673,98 +2735,102 @@ var jqtree = (function (exports) {
|
|
|
2673
2735
|
if (!node) {
|
|
2674
2736
|
throw Error(NODE_PARAM_IS_EMPTY);
|
|
2675
2737
|
}
|
|
2676
|
-
this.
|
|
2677
|
-
this.
|
|
2678
|
-
this.
|
|
2679
|
-
this.
|
|
2680
|
-
return this.
|
|
2738
|
+
this._selectNodeHandler.addToSelection(node);
|
|
2739
|
+
this._openParents(node);
|
|
2740
|
+
this._getNodeElementForNode(node).select(mustSetFocus ?? true);
|
|
2741
|
+
this._saveState();
|
|
2742
|
+
return this._element;
|
|
2681
2743
|
}
|
|
2682
2744
|
appendNode(newNodeInfo, parentNodeParam) {
|
|
2683
|
-
const parentNode = parentNodeParam ?? this.
|
|
2745
|
+
const parentNode = parentNodeParam ?? this._tree;
|
|
2684
2746
|
const node = parentNode.append(newNodeInfo);
|
|
2685
|
-
this.
|
|
2747
|
+
this._refreshElements(parentNode);
|
|
2686
2748
|
return node;
|
|
2687
2749
|
}
|
|
2688
2750
|
closeNode(node, slideParam) {
|
|
2689
2751
|
if (!node) {
|
|
2690
2752
|
throw Error(NODE_PARAM_IS_EMPTY);
|
|
2691
2753
|
}
|
|
2692
|
-
const slide = slideParam ?? this.
|
|
2754
|
+
const slide = slideParam ?? this._options.slide;
|
|
2693
2755
|
if (node.isFolder() || node.isEmptyFolder) {
|
|
2694
|
-
this.
|
|
2695
|
-
this.
|
|
2756
|
+
this._createFolderElement(node).close(slide, this._options.animationSpeed);
|
|
2757
|
+
this._saveState();
|
|
2696
2758
|
}
|
|
2697
|
-
return this.
|
|
2759
|
+
return this._element;
|
|
2698
2760
|
}
|
|
2699
2761
|
deinit() {
|
|
2700
|
-
this.
|
|
2701
|
-
this.
|
|
2702
|
-
this.
|
|
2703
|
-
this.
|
|
2704
|
-
this.
|
|
2705
|
-
|
|
2762
|
+
this._htmlElement.textContent = "";
|
|
2763
|
+
this._element.off();
|
|
2764
|
+
this._keyHandler.deinit();
|
|
2765
|
+
this._mouseHandler.deinit();
|
|
2766
|
+
this._tree = new Node({}, true);
|
|
2767
|
+
}
|
|
2768
|
+
destroy() {
|
|
2769
|
+
this.deinit();
|
|
2706
2770
|
}
|
|
2707
2771
|
getNodeByCallback(callback) {
|
|
2708
|
-
return this.
|
|
2772
|
+
return this._tree.getNodeByCallback(callback);
|
|
2709
2773
|
}
|
|
2710
2774
|
getNodeByHtmlElement(inputElement) {
|
|
2711
2775
|
const element = inputElement instanceof HTMLElement ? inputElement : inputElement.get(0);
|
|
2712
2776
|
if (!element) {
|
|
2713
2777
|
return null;
|
|
2714
2778
|
}
|
|
2715
|
-
return this.
|
|
2779
|
+
return this._getNode(element);
|
|
2716
2780
|
}
|
|
2717
2781
|
getNodeById(nodeId) {
|
|
2718
|
-
return this.
|
|
2782
|
+
return this._tree.getNodeById(nodeId);
|
|
2719
2783
|
}
|
|
2720
2784
|
getNodeByName(name) {
|
|
2721
|
-
return this.
|
|
2785
|
+
return this._tree.getNodeByName(name);
|
|
2722
2786
|
}
|
|
2723
2787
|
getNodeByNameMustExist(name) {
|
|
2724
|
-
return this.
|
|
2788
|
+
return this._tree.getNodeByNameMustExist(name);
|
|
2725
2789
|
}
|
|
2726
2790
|
getNodesByProperty(key, value) {
|
|
2727
|
-
return this.
|
|
2791
|
+
return this._tree.getNodesByProperty(key, value);
|
|
2728
2792
|
}
|
|
2729
2793
|
getSelectedNode() {
|
|
2730
|
-
return this.
|
|
2794
|
+
return this._selectNodeHandler.getSelectedNode();
|
|
2731
2795
|
}
|
|
2732
2796
|
getSelectedNodes() {
|
|
2733
|
-
return this.
|
|
2797
|
+
return this._selectNodeHandler.getSelectedNodes();
|
|
2734
2798
|
}
|
|
2735
2799
|
getState() {
|
|
2736
|
-
return this.
|
|
2800
|
+
return this._saveStateHandler.getState();
|
|
2737
2801
|
}
|
|
2738
2802
|
getStateFromStorage() {
|
|
2739
|
-
return this.
|
|
2803
|
+
return this._saveStateHandler.getStateFromStorage();
|
|
2740
2804
|
}
|
|
2741
2805
|
getTree() {
|
|
2742
|
-
return this.
|
|
2806
|
+
return this._tree;
|
|
2743
2807
|
}
|
|
2744
2808
|
getVersion() {
|
|
2745
2809
|
return version;
|
|
2746
2810
|
}
|
|
2747
2811
|
init() {
|
|
2748
|
-
|
|
2749
|
-
this.
|
|
2750
|
-
this.
|
|
2751
|
-
this.
|
|
2752
|
-
|
|
2753
|
-
this.
|
|
2754
|
-
this.
|
|
2812
|
+
const htmlElement = this._element.get(0);
|
|
2813
|
+
this._htmlElement = htmlElement;
|
|
2814
|
+
this._isInitialized = false;
|
|
2815
|
+
this._options.dataUrl ??= this._element.data("url");
|
|
2816
|
+
const dataRtl = this._element.data("rtl");
|
|
2817
|
+
this._options.rtl ??= dataRtl === '' ? true : Boolean(dataRtl);
|
|
2818
|
+
this._options.closedIcon ??= this._getDefaultClosedIcon();
|
|
2819
|
+
this._connectHandlers();
|
|
2820
|
+
this._initData();
|
|
2755
2821
|
}
|
|
2756
2822
|
isDragging() {
|
|
2757
|
-
return this.
|
|
2823
|
+
return this._dndHandler.isDragging;
|
|
2758
2824
|
}
|
|
2759
2825
|
isNodeSelected(node) {
|
|
2760
2826
|
if (!node) {
|
|
2761
2827
|
throw Error(NODE_PARAM_IS_EMPTY);
|
|
2762
2828
|
}
|
|
2763
|
-
return this.
|
|
2829
|
+
return this._selectNodeHandler.isNodeSelected(node);
|
|
2764
2830
|
}
|
|
2765
2831
|
loadData(data, parentNode) {
|
|
2766
|
-
this.
|
|
2767
|
-
return this.
|
|
2832
|
+
this._doLoadData(data, parentNode);
|
|
2833
|
+
return this._element;
|
|
2768
2834
|
}
|
|
2769
2835
|
|
|
2770
2836
|
/*
|
|
@@ -2783,19 +2849,19 @@ var jqtree = (function (exports) {
|
|
|
2783
2849
|
loadDataFromUrl(param1, param2, param3) {
|
|
2784
2850
|
if (typeof param1 === "string") {
|
|
2785
2851
|
// first parameter is url
|
|
2786
|
-
this.
|
|
2852
|
+
this._doLoadDataFromUrl(param1, param2, param3 ?? null);
|
|
2787
2853
|
} else {
|
|
2788
2854
|
// first parameter is not url
|
|
2789
|
-
this.
|
|
2855
|
+
this._doLoadDataFromUrl(null, param1, param2);
|
|
2790
2856
|
}
|
|
2791
|
-
return this.
|
|
2857
|
+
return this._element;
|
|
2792
2858
|
}
|
|
2793
2859
|
moveDown() {
|
|
2794
2860
|
const selectedNode = this.getSelectedNode();
|
|
2795
2861
|
if (selectedNode) {
|
|
2796
|
-
this.
|
|
2862
|
+
this._keyHandler.moveDown(selectedNode);
|
|
2797
2863
|
}
|
|
2798
|
-
return this.
|
|
2864
|
+
return this._element;
|
|
2799
2865
|
}
|
|
2800
2866
|
moveNode(node, targetNode, position) {
|
|
2801
2867
|
if (!node) {
|
|
@@ -2807,16 +2873,16 @@ var jqtree = (function (exports) {
|
|
|
2807
2873
|
if (!position) {
|
|
2808
2874
|
throw Error(PARAM_IS_EMPTY + "position");
|
|
2809
2875
|
}
|
|
2810
|
-
this.
|
|
2811
|
-
this.
|
|
2812
|
-
return this.
|
|
2876
|
+
this._tree.moveNode(node, targetNode, position);
|
|
2877
|
+
this._refreshElements(null);
|
|
2878
|
+
return this._element;
|
|
2813
2879
|
}
|
|
2814
2880
|
moveUp() {
|
|
2815
2881
|
const selectedNode = this.getSelectedNode();
|
|
2816
2882
|
if (selectedNode) {
|
|
2817
|
-
this.
|
|
2883
|
+
this._keyHandler.moveUp(selectedNode);
|
|
2818
2884
|
}
|
|
2819
|
-
return this.
|
|
2885
|
+
return this._element;
|
|
2820
2886
|
}
|
|
2821
2887
|
openNode(node, param1, param2) {
|
|
2822
2888
|
if (!node) {
|
|
@@ -2825,46 +2891,42 @@ var jqtree = (function (exports) {
|
|
|
2825
2891
|
const parseParams = () => {
|
|
2826
2892
|
let onFinished;
|
|
2827
2893
|
let slide;
|
|
2828
|
-
if (
|
|
2894
|
+
if (typeof param1 === "function") {
|
|
2829
2895
|
onFinished = param1;
|
|
2830
2896
|
slide = null;
|
|
2831
2897
|
} else {
|
|
2832
2898
|
slide = param1;
|
|
2833
2899
|
onFinished = param2;
|
|
2834
2900
|
}
|
|
2835
|
-
slide ??= this.
|
|
2901
|
+
slide ??= this._options.slide;
|
|
2836
2902
|
return [slide, onFinished];
|
|
2837
2903
|
};
|
|
2838
2904
|
const [slide, onFinished] = parseParams();
|
|
2839
|
-
this.
|
|
2840
|
-
return this.
|
|
2905
|
+
this._openNodeInternal(node, slide, onFinished);
|
|
2906
|
+
return this._element;
|
|
2841
2907
|
}
|
|
2842
2908
|
prependNode(newNodeInfo, parentNodeParam) {
|
|
2843
|
-
const parentNode = parentNodeParam ?? this.
|
|
2909
|
+
const parentNode = parentNodeParam ?? this._tree;
|
|
2844
2910
|
const node = parentNode.prepend(newNodeInfo);
|
|
2845
|
-
this.
|
|
2911
|
+
this._refreshElements(parentNode);
|
|
2846
2912
|
return node;
|
|
2847
2913
|
}
|
|
2848
2914
|
refresh() {
|
|
2849
|
-
this.
|
|
2850
|
-
return this.
|
|
2851
|
-
}
|
|
2852
|
-
refreshHitAreas() {
|
|
2853
|
-
this.dndHandler.refresh();
|
|
2854
|
-
return this.element;
|
|
2915
|
+
this._refreshElements(null);
|
|
2916
|
+
return this._element;
|
|
2855
2917
|
}
|
|
2856
2918
|
reload(onFinished) {
|
|
2857
|
-
this.
|
|
2858
|
-
return this.
|
|
2919
|
+
this._doLoadDataFromUrl(null, null, onFinished);
|
|
2920
|
+
return this._element;
|
|
2859
2921
|
}
|
|
2860
2922
|
removeFromSelection(node) {
|
|
2861
2923
|
if (!node) {
|
|
2862
2924
|
throw Error(NODE_PARAM_IS_EMPTY);
|
|
2863
2925
|
}
|
|
2864
|
-
this.
|
|
2865
|
-
this.
|
|
2866
|
-
this.
|
|
2867
|
-
return this.
|
|
2926
|
+
this._selectNodeHandler.removeFromSelection(node);
|
|
2927
|
+
this._getNodeElementForNode(node).deselect();
|
|
2928
|
+
this._saveState();
|
|
2929
|
+
return this._element;
|
|
2868
2930
|
}
|
|
2869
2931
|
removeNode(node) {
|
|
2870
2932
|
if (!node) {
|
|
@@ -2873,68 +2935,68 @@ var jqtree = (function (exports) {
|
|
|
2873
2935
|
if (!node.parent) {
|
|
2874
2936
|
throw Error("Node has no parent");
|
|
2875
2937
|
}
|
|
2876
|
-
this.
|
|
2938
|
+
this._selectNodeHandler.removeFromSelection(node, true); // including children
|
|
2877
2939
|
|
|
2878
2940
|
const parent = node.parent;
|
|
2879
2941
|
node.remove();
|
|
2880
|
-
this.
|
|
2881
|
-
return this.
|
|
2942
|
+
this._refreshElements(parent);
|
|
2943
|
+
return this._element;
|
|
2882
2944
|
}
|
|
2883
2945
|
scrollToNode(node) {
|
|
2884
2946
|
if (!node) {
|
|
2885
2947
|
throw Error(NODE_PARAM_IS_EMPTY);
|
|
2886
2948
|
}
|
|
2887
2949
|
if (!node.element) {
|
|
2888
|
-
return this.
|
|
2950
|
+
return this._element;
|
|
2889
2951
|
}
|
|
2890
|
-
const top = getOffsetTop(node.element) - getOffsetTop(this
|
|
2891
|
-
this.
|
|
2892
|
-
return this.
|
|
2952
|
+
const top = getOffsetTop(node.element) - getOffsetTop(this._htmlElement);
|
|
2953
|
+
this._scrollHandler.scrollToY(top);
|
|
2954
|
+
return this._element;
|
|
2893
2955
|
}
|
|
2894
2956
|
selectNode(node, optionsParam) {
|
|
2895
|
-
this.
|
|
2896
|
-
return this.
|
|
2957
|
+
this._doSelectNode(node, optionsParam);
|
|
2958
|
+
return this._element;
|
|
2897
2959
|
}
|
|
2898
2960
|
setOption(option, value) {
|
|
2899
|
-
this.
|
|
2900
|
-
return this.
|
|
2961
|
+
this._options[option] = value;
|
|
2962
|
+
return this._element;
|
|
2901
2963
|
}
|
|
2902
2964
|
setState(state) {
|
|
2903
2965
|
if (state) {
|
|
2904
|
-
this.
|
|
2905
|
-
this.
|
|
2966
|
+
this._saveStateHandler.setInitialState(state);
|
|
2967
|
+
this._refreshElements(null);
|
|
2906
2968
|
}
|
|
2907
|
-
return this.
|
|
2969
|
+
return this._element;
|
|
2908
2970
|
}
|
|
2909
2971
|
toggle(node, slideParam = null) {
|
|
2910
2972
|
if (!node) {
|
|
2911
2973
|
throw Error(NODE_PARAM_IS_EMPTY);
|
|
2912
2974
|
}
|
|
2913
|
-
const slide = slideParam ?? this.
|
|
2975
|
+
const slide = slideParam ?? this._options.slide;
|
|
2914
2976
|
if (node.is_open) {
|
|
2915
2977
|
this.closeNode(node, slide);
|
|
2916
2978
|
} else {
|
|
2917
2979
|
this.openNode(node, slide);
|
|
2918
2980
|
}
|
|
2919
|
-
return this.
|
|
2981
|
+
return this._element;
|
|
2920
2982
|
}
|
|
2921
2983
|
toJson() {
|
|
2922
|
-
return JSON.stringify(this.
|
|
2984
|
+
return JSON.stringify(this._tree.getData());
|
|
2923
2985
|
}
|
|
2924
2986
|
updateNode(node, data) {
|
|
2925
2987
|
if (!node) {
|
|
2926
2988
|
throw Error(NODE_PARAM_IS_EMPTY);
|
|
2927
2989
|
}
|
|
2928
2990
|
if (!data) {
|
|
2929
|
-
return this.
|
|
2991
|
+
return this._element;
|
|
2930
2992
|
}
|
|
2931
2993
|
const idIsChanged = typeof data === "object" && data.id && data.id !== node.id;
|
|
2932
2994
|
if (idIsChanged) {
|
|
2933
|
-
this.
|
|
2995
|
+
this._tree.removeNodeFromIndex(node);
|
|
2934
2996
|
}
|
|
2935
2997
|
node.setData(data);
|
|
2936
2998
|
if (idIsChanged) {
|
|
2937
|
-
this.
|
|
2999
|
+
this._tree.addNodeToIndex(node);
|
|
2938
3000
|
}
|
|
2939
3001
|
if (typeof data === "object" && data.children && data.children instanceof Array) {
|
|
2940
3002
|
node.removeChildren();
|
|
@@ -2942,10 +3004,10 @@ var jqtree = (function (exports) {
|
|
|
2942
3004
|
node.loadFromData(data.children);
|
|
2943
3005
|
}
|
|
2944
3006
|
}
|
|
2945
|
-
this.
|
|
2946
|
-
return this.
|
|
3007
|
+
this._refreshElements(node);
|
|
3008
|
+
return this._element;
|
|
2947
3009
|
}
|
|
2948
|
-
|
|
3010
|
+
_connectHandlers() {
|
|
2949
3011
|
const {
|
|
2950
3012
|
autoEscape,
|
|
2951
3013
|
buttonLeft,
|
|
@@ -2970,22 +3032,20 @@ var jqtree = (function (exports) {
|
|
|
2970
3032
|
showEmptyFolder,
|
|
2971
3033
|
slide,
|
|
2972
3034
|
tabIndex
|
|
2973
|
-
} = this.
|
|
3035
|
+
} = this._options;
|
|
2974
3036
|
const closeNode = this.closeNode.bind(this);
|
|
2975
|
-
const getNodeElement = this.
|
|
2976
|
-
const getNodeElementForNode = this.
|
|
3037
|
+
const getNodeElement = this._getNodeElement.bind(this);
|
|
3038
|
+
const getNodeElementForNode = this._getNodeElementForNode.bind(this);
|
|
2977
3039
|
const getNodeById = this.getNodeById.bind(this);
|
|
2978
3040
|
const getSelectedNode = this.getSelectedNode.bind(this);
|
|
2979
3041
|
const getTree = this.getTree.bind(this);
|
|
2980
|
-
const isFocusOnTree = this.
|
|
3042
|
+
const isFocusOnTree = this._isFocusOnTree.bind(this);
|
|
2981
3043
|
const loadData = this.loadData.bind(this);
|
|
2982
|
-
const openNode = this.
|
|
2983
|
-
const refreshElements = this.
|
|
2984
|
-
const refreshHitAreas = this.refreshHitAreas.bind(this);
|
|
3044
|
+
const openNode = this._openNodeInternal.bind(this);
|
|
3045
|
+
const refreshElements = this._refreshElements.bind(this);
|
|
2985
3046
|
const selectNode = this.selectNode.bind(this);
|
|
2986
|
-
const
|
|
2987
|
-
const
|
|
2988
|
-
const triggerEvent = this.triggerEvent.bind(this);
|
|
3047
|
+
const treeElement = this._htmlElement;
|
|
3048
|
+
const triggerEvent = this._triggerEvent.bind(this);
|
|
2989
3049
|
const selectNodeHandler = new SelectNodeHandler({
|
|
2990
3050
|
getNodeById
|
|
2991
3051
|
});
|
|
@@ -2993,7 +3053,10 @@ var jqtree = (function (exports) {
|
|
|
2993
3053
|
const getSelectedNodes = selectNodeHandler.getSelectedNodes.bind(selectNodeHandler);
|
|
2994
3054
|
const isNodeSelected = selectNodeHandler.isNodeSelected.bind(selectNodeHandler);
|
|
2995
3055
|
const removeFromSelection = selectNodeHandler.removeFromSelection.bind(selectNodeHandler);
|
|
2996
|
-
const getMouseDelay = () => this.
|
|
3056
|
+
const getMouseDelay = () => this._options.startDndDelay ?? 0;
|
|
3057
|
+
const refreshHitAreas = () => {
|
|
3058
|
+
dndHandler.refresh();
|
|
3059
|
+
};
|
|
2997
3060
|
const dataLoader = new DataLoader({
|
|
2998
3061
|
dataFilter,
|
|
2999
3062
|
loadData,
|
|
@@ -3046,12 +3109,12 @@ var jqtree = (function (exports) {
|
|
|
3046
3109
|
selectNode
|
|
3047
3110
|
});
|
|
3048
3111
|
const renderer = new ElementsRenderer({
|
|
3049
|
-
$element: $treeElement,
|
|
3050
3112
|
autoEscape,
|
|
3051
3113
|
buttonLeft,
|
|
3052
3114
|
closedIcon,
|
|
3053
3115
|
dragAndDrop,
|
|
3054
3116
|
getTree,
|
|
3117
|
+
htmlElement: treeElement,
|
|
3055
3118
|
isNodeSelected,
|
|
3056
3119
|
onCreateLi,
|
|
3057
3120
|
openedIcon,
|
|
@@ -3059,107 +3122,101 @@ var jqtree = (function (exports) {
|
|
|
3059
3122
|
showEmptyFolder,
|
|
3060
3123
|
tabIndex
|
|
3061
3124
|
});
|
|
3062
|
-
const getNode = this.
|
|
3063
|
-
const onMouseCapture = this.
|
|
3064
|
-
const onMouseDrag = this.
|
|
3065
|
-
const onMouseStart = this.
|
|
3066
|
-
const onMouseStop = this.
|
|
3125
|
+
const getNode = this._getNode.bind(this);
|
|
3126
|
+
const onMouseCapture = this._mouseCapture.bind(this);
|
|
3127
|
+
const onMouseDrag = this._mouseDrag.bind(this);
|
|
3128
|
+
const onMouseStart = this._mouseStart.bind(this);
|
|
3129
|
+
const onMouseStop = this._mouseStop.bind(this);
|
|
3067
3130
|
const mouseHandler = new MouseHandler({
|
|
3068
3131
|
element: treeElement,
|
|
3069
3132
|
getMouseDelay,
|
|
3070
3133
|
getNode,
|
|
3071
3134
|
onClickButton: this.toggle.bind(this),
|
|
3072
|
-
onClickTitle: this.
|
|
3135
|
+
onClickTitle: this._doSelectNode.bind(this),
|
|
3073
3136
|
onMouseCapture,
|
|
3074
3137
|
onMouseDrag,
|
|
3075
3138
|
onMouseStart,
|
|
3076
3139
|
onMouseStop,
|
|
3077
3140
|
triggerEvent,
|
|
3078
|
-
useContextMenu: this.
|
|
3141
|
+
useContextMenu: this._options.useContextMenu
|
|
3079
3142
|
});
|
|
3080
|
-
this.
|
|
3081
|
-
this.
|
|
3082
|
-
this.
|
|
3083
|
-
this.
|
|
3084
|
-
this.
|
|
3085
|
-
this.
|
|
3086
|
-
this.
|
|
3087
|
-
this.
|
|
3088
|
-
}
|
|
3089
|
-
|
|
3090
|
-
const
|
|
3091
|
-
|
|
3092
|
-
|
|
3093
|
-
|
|
3094
|
-
const
|
|
3095
|
-
const getScrollLeft = this.scrollHandler.getScrollLeft.bind(this.scrollHandler);
|
|
3096
|
-
const openedIconElement = this.renderer.openedIconElement;
|
|
3097
|
-
const tabIndex = this.options.tabIndex;
|
|
3098
|
-
const treeElement = this.element.get(0);
|
|
3099
|
-
const triggerEvent = this.triggerEvent.bind(this);
|
|
3143
|
+
this._dataLoader = dataLoader;
|
|
3144
|
+
this._dndHandler = dndHandler;
|
|
3145
|
+
this._keyHandler = keyHandler;
|
|
3146
|
+
this._mouseHandler = mouseHandler;
|
|
3147
|
+
this._renderer = renderer;
|
|
3148
|
+
this._saveStateHandler = saveStateHandler;
|
|
3149
|
+
this._scrollHandler = scrollHandler;
|
|
3150
|
+
this._selectNodeHandler = selectNodeHandler;
|
|
3151
|
+
}
|
|
3152
|
+
_createFolderElement(node) {
|
|
3153
|
+
const closedIconElement = this._renderer.closedIconElement;
|
|
3154
|
+
const getScrollLeft = this._scrollHandler.getScrollLeft.bind(this._scrollHandler);
|
|
3155
|
+
const openedIconElement = this._renderer.openedIconElement;
|
|
3156
|
+
const tabIndex = this._options.tabIndex;
|
|
3157
|
+
const triggerEvent = this._triggerEvent.bind(this);
|
|
3100
3158
|
return new FolderElement({
|
|
3101
3159
|
closedIconElement,
|
|
3102
3160
|
getScrollLeft,
|
|
3103
3161
|
node,
|
|
3104
3162
|
openedIconElement,
|
|
3105
3163
|
tabIndex,
|
|
3106
|
-
treeElement,
|
|
3164
|
+
treeElement: this._htmlElement,
|
|
3107
3165
|
triggerEvent
|
|
3108
3166
|
});
|
|
3109
3167
|
}
|
|
3110
|
-
|
|
3111
|
-
const getScrollLeft = this.
|
|
3112
|
-
const tabIndex = this.
|
|
3113
|
-
const treeElement = this.element.get(0);
|
|
3168
|
+
_createNodeElement(node) {
|
|
3169
|
+
const getScrollLeft = this._scrollHandler.getScrollLeft.bind(this._scrollHandler);
|
|
3170
|
+
const tabIndex = this._options.tabIndex;
|
|
3114
3171
|
return new NodeElement({
|
|
3115
3172
|
getScrollLeft,
|
|
3116
3173
|
node,
|
|
3117
3174
|
tabIndex,
|
|
3118
|
-
treeElement
|
|
3175
|
+
treeElement: this._htmlElement
|
|
3119
3176
|
});
|
|
3120
3177
|
}
|
|
3121
|
-
|
|
3178
|
+
_deselectCurrentNode() {
|
|
3122
3179
|
const node = this.getSelectedNode();
|
|
3123
3180
|
if (node) {
|
|
3124
3181
|
this.removeFromSelection(node);
|
|
3125
3182
|
}
|
|
3126
3183
|
}
|
|
3127
|
-
|
|
3128
|
-
const selectedNodesUnderParent = this.
|
|
3184
|
+
_deselectNodes(parentNode) {
|
|
3185
|
+
const selectedNodesUnderParent = this._selectNodeHandler.getSelectedNodesUnder(parentNode);
|
|
3129
3186
|
for (const n of selectedNodesUnderParent) {
|
|
3130
|
-
this.
|
|
3187
|
+
this._selectNodeHandler.removeFromSelection(n);
|
|
3131
3188
|
}
|
|
3132
3189
|
}
|
|
3133
|
-
|
|
3190
|
+
_doLoadData(data, parentNode) {
|
|
3134
3191
|
if (data) {
|
|
3135
3192
|
if (parentNode) {
|
|
3136
|
-
this.
|
|
3137
|
-
this.
|
|
3193
|
+
this._deselectNodes(parentNode);
|
|
3194
|
+
this._loadSubtree(data, parentNode);
|
|
3138
3195
|
} else {
|
|
3139
|
-
this.
|
|
3196
|
+
this._initTree(data);
|
|
3140
3197
|
}
|
|
3141
3198
|
if (this.isDragging()) {
|
|
3142
|
-
this.
|
|
3199
|
+
this._dndHandler.refresh();
|
|
3143
3200
|
}
|
|
3144
3201
|
}
|
|
3145
|
-
this.
|
|
3202
|
+
this._triggerEvent("tree.load_data", {
|
|
3146
3203
|
parent_node: parentNode,
|
|
3147
3204
|
tree_data: data
|
|
3148
3205
|
});
|
|
3149
3206
|
}
|
|
3150
|
-
|
|
3151
|
-
const urlInfo = urlInfoParam ?? this.
|
|
3152
|
-
this.
|
|
3207
|
+
_doLoadDataFromUrl(urlInfoParam, parentNode, onFinished) {
|
|
3208
|
+
const urlInfo = urlInfoParam ?? this._getDataUrlInfo(parentNode);
|
|
3209
|
+
this._dataLoader.loadFromUrl(urlInfo, parentNode, onFinished);
|
|
3153
3210
|
}
|
|
3154
|
-
|
|
3211
|
+
_doSelectNode(node, optionsParam) {
|
|
3155
3212
|
const saveState = () => {
|
|
3156
|
-
if (this.
|
|
3157
|
-
this.
|
|
3213
|
+
if (this._options.saveState) {
|
|
3214
|
+
this._saveStateHandler.saveState();
|
|
3158
3215
|
}
|
|
3159
3216
|
};
|
|
3160
3217
|
if (!node) {
|
|
3161
3218
|
// Called with empty node -> deselect current node
|
|
3162
|
-
this.
|
|
3219
|
+
this._deselectCurrentNode();
|
|
3163
3220
|
saveState();
|
|
3164
3221
|
return;
|
|
3165
3222
|
}
|
|
@@ -3172,48 +3229,47 @@ var jqtree = (function (exports) {
|
|
|
3172
3229
|
...(optionsParam ?? {})
|
|
3173
3230
|
};
|
|
3174
3231
|
const canSelect = () => {
|
|
3175
|
-
if (this.
|
|
3176
|
-
return this.
|
|
3232
|
+
if (this._options.onCanSelectNode) {
|
|
3233
|
+
return this._options.selectable && this._options.onCanSelectNode(node);
|
|
3177
3234
|
} else {
|
|
3178
|
-
return this.
|
|
3235
|
+
return this._options.selectable;
|
|
3179
3236
|
}
|
|
3180
3237
|
};
|
|
3181
3238
|
if (!canSelect()) {
|
|
3182
3239
|
return;
|
|
3183
3240
|
}
|
|
3184
|
-
if (this.
|
|
3241
|
+
if (this._selectNodeHandler.isNodeSelected(node)) {
|
|
3185
3242
|
if (selectOptions.mustToggle) {
|
|
3186
|
-
this.
|
|
3187
|
-
this.
|
|
3243
|
+
this._deselectCurrentNode();
|
|
3244
|
+
this._triggerEvent("tree.select", {
|
|
3188
3245
|
node: null,
|
|
3189
3246
|
previous_node: node
|
|
3190
3247
|
});
|
|
3191
3248
|
}
|
|
3192
3249
|
} else {
|
|
3193
3250
|
const deselectedNode = this.getSelectedNode() || null;
|
|
3194
|
-
this.
|
|
3251
|
+
this._deselectCurrentNode();
|
|
3195
3252
|
this.addToSelection(node, selectOptions.mustSetFocus);
|
|
3196
|
-
this.
|
|
3253
|
+
this._triggerEvent("tree.select", {
|
|
3197
3254
|
deselected_node: deselectedNode,
|
|
3198
3255
|
node
|
|
3199
3256
|
});
|
|
3200
|
-
this.
|
|
3257
|
+
this._openParents(node);
|
|
3201
3258
|
}
|
|
3202
3259
|
saveState();
|
|
3203
3260
|
}
|
|
3204
|
-
|
|
3205
|
-
if (this.
|
|
3261
|
+
_getAutoOpenMaxLevel() {
|
|
3262
|
+
if (this._options.autoOpen === true) {
|
|
3206
3263
|
return -1;
|
|
3207
|
-
} else if (typeof this.
|
|
3208
|
-
return this.
|
|
3209
|
-
} else if (typeof this.
|
|
3210
|
-
return parseInt(this.
|
|
3264
|
+
} else if (typeof this._options.autoOpen === "number") {
|
|
3265
|
+
return this._options.autoOpen;
|
|
3266
|
+
} else if (typeof this._options.autoOpen === "string") {
|
|
3267
|
+
return parseInt(this._options.autoOpen, 10);
|
|
3211
3268
|
} else {
|
|
3212
3269
|
return 0;
|
|
3213
3270
|
}
|
|
3214
3271
|
}
|
|
3215
|
-
|
|
3216
|
-
const dataUrl = this.options.dataUrl ?? this.element.data("url");
|
|
3272
|
+
_getDataUrlInfo(node) {
|
|
3217
3273
|
const getUrlFromString = url => {
|
|
3218
3274
|
const urlInfo = {
|
|
3219
3275
|
url
|
|
@@ -3230,7 +3286,7 @@ var jqtree = (function (exports) {
|
|
|
3230
3286
|
urlInfo.data = data;
|
|
3231
3287
|
} else {
|
|
3232
3288
|
// Add selected_node parameter
|
|
3233
|
-
const selectedNodeId = this.
|
|
3289
|
+
const selectedNodeId = this._getNodeIdToBeSelected();
|
|
3234
3290
|
if (selectedNodeId) {
|
|
3235
3291
|
const data = {
|
|
3236
3292
|
selected_node: selectedNodeId
|
|
@@ -3239,6 +3295,7 @@ var jqtree = (function (exports) {
|
|
|
3239
3295
|
}
|
|
3240
3296
|
}
|
|
3241
3297
|
};
|
|
3298
|
+
const dataUrl = this._options.dataUrl;
|
|
3242
3299
|
if (typeof dataUrl === "function") {
|
|
3243
3300
|
return dataUrl(node);
|
|
3244
3301
|
} else if (typeof dataUrl === "string") {
|
|
@@ -3250,8 +3307,8 @@ var jqtree = (function (exports) {
|
|
|
3250
3307
|
return null;
|
|
3251
3308
|
}
|
|
3252
3309
|
}
|
|
3253
|
-
|
|
3254
|
-
if (this.
|
|
3310
|
+
_getDefaultClosedIcon() {
|
|
3311
|
+
if (this._options.rtl) {
|
|
3255
3312
|
// triangle to the left
|
|
3256
3313
|
return "◀";
|
|
3257
3314
|
} else {
|
|
@@ -3259,7 +3316,7 @@ var jqtree = (function (exports) {
|
|
|
3259
3316
|
return "►";
|
|
3260
3317
|
}
|
|
3261
3318
|
}
|
|
3262
|
-
|
|
3319
|
+
_getNode(element) {
|
|
3263
3320
|
const liElement = element.closest("li.jqtree_common");
|
|
3264
3321
|
if (liElement) {
|
|
3265
3322
|
return jQuery(liElement).data("node");
|
|
@@ -3267,76 +3324,78 @@ var jqtree = (function (exports) {
|
|
|
3267
3324
|
return null;
|
|
3268
3325
|
}
|
|
3269
3326
|
}
|
|
3270
|
-
|
|
3271
|
-
const node = this.
|
|
3327
|
+
_getNodeElement(element) {
|
|
3328
|
+
const node = this._getNode(element);
|
|
3272
3329
|
if (node) {
|
|
3273
|
-
return this.
|
|
3330
|
+
return this._getNodeElementForNode(node);
|
|
3274
3331
|
} else {
|
|
3275
3332
|
return null;
|
|
3276
3333
|
}
|
|
3277
3334
|
}
|
|
3278
|
-
|
|
3335
|
+
_getNodeElementForNode(node) {
|
|
3279
3336
|
if (node.isFolder()) {
|
|
3280
|
-
return this.
|
|
3337
|
+
return this._createFolderElement(node);
|
|
3281
3338
|
} else {
|
|
3282
|
-
return this.
|
|
3339
|
+
return this._createNodeElement(node);
|
|
3283
3340
|
}
|
|
3284
3341
|
}
|
|
3285
|
-
|
|
3286
|
-
if (this.
|
|
3287
|
-
return this.
|
|
3342
|
+
_getNodeIdToBeSelected() {
|
|
3343
|
+
if (this._options.saveState) {
|
|
3344
|
+
return this._saveStateHandler.getNodeIdToBeSelected();
|
|
3288
3345
|
} else {
|
|
3289
3346
|
return null;
|
|
3290
3347
|
}
|
|
3291
3348
|
}
|
|
3292
|
-
|
|
3293
|
-
if (this.
|
|
3294
|
-
|
|
3349
|
+
_initData() {
|
|
3350
|
+
if (this._options.data) {
|
|
3351
|
+
this._doLoadData(this._options.data, null);
|
|
3295
3352
|
} else {
|
|
3296
|
-
const
|
|
3297
|
-
if (dataRtl !== null && dataRtl !== false && dataRtl !== undefined) {
|
|
3298
|
-
return true;
|
|
3299
|
-
} else {
|
|
3300
|
-
return false;
|
|
3301
|
-
}
|
|
3302
|
-
}
|
|
3303
|
-
}
|
|
3304
|
-
initData() {
|
|
3305
|
-
if (this.options.data) {
|
|
3306
|
-
this.doLoadData(this.options.data, null);
|
|
3307
|
-
} else {
|
|
3308
|
-
const dataUrl = this.getDataUrlInfo(null);
|
|
3353
|
+
const dataUrl = this._getDataUrlInfo(null);
|
|
3309
3354
|
if (dataUrl) {
|
|
3310
|
-
this.
|
|
3355
|
+
this._doLoadDataFromUrl(null, null, null);
|
|
3311
3356
|
} else {
|
|
3312
|
-
this.
|
|
3357
|
+
this._doLoadData([], null);
|
|
3313
3358
|
}
|
|
3314
3359
|
}
|
|
3315
3360
|
}
|
|
3316
|
-
|
|
3361
|
+
_initTree(data) {
|
|
3317
3362
|
const doInit = () => {
|
|
3318
|
-
if (!this.
|
|
3319
|
-
this.
|
|
3320
|
-
this.
|
|
3363
|
+
if (!this._isInitialized) {
|
|
3364
|
+
this._isInitialized = true;
|
|
3365
|
+
this._triggerEvent("tree.init");
|
|
3321
3366
|
}
|
|
3322
3367
|
};
|
|
3323
|
-
this.
|
|
3324
|
-
this.
|
|
3325
|
-
this.
|
|
3326
|
-
const mustLoadOnDemand = this.
|
|
3327
|
-
this.
|
|
3328
|
-
if (
|
|
3329
|
-
doInit();
|
|
3330
|
-
} else {
|
|
3368
|
+
this._tree = new this._options.nodeClass(null, true, this._options.nodeClass);
|
|
3369
|
+
this._selectNodeHandler.clear();
|
|
3370
|
+
this._tree.loadFromData(data);
|
|
3371
|
+
const mustLoadOnDemand = this._setInitialState();
|
|
3372
|
+
this._refreshElements(null);
|
|
3373
|
+
if (mustLoadOnDemand) {
|
|
3331
3374
|
// Load data on demand and then init the tree
|
|
3332
|
-
this.
|
|
3375
|
+
this._setInitialStateOnDemand(doInit);
|
|
3376
|
+
} else {
|
|
3377
|
+
doInit();
|
|
3333
3378
|
}
|
|
3334
3379
|
}
|
|
3335
|
-
|
|
3380
|
+
|
|
3381
|
+
// Does an element in the tree have the focus?
|
|
3382
|
+
_isFocusOnTree() {
|
|
3336
3383
|
const activeElement = document.activeElement;
|
|
3337
|
-
|
|
3384
|
+
|
|
3385
|
+
/* istanbul ignore if */
|
|
3386
|
+
if (!activeElement) {
|
|
3387
|
+
return false;
|
|
3388
|
+
}
|
|
3389
|
+
|
|
3390
|
+
// The keyboard must still work for input elements.
|
|
3391
|
+
const tagName = activeElement.tagName;
|
|
3392
|
+
if (tagName !== "A" && tagName !== "SPAN") {
|
|
3393
|
+
return false;
|
|
3394
|
+
}
|
|
3395
|
+
const node = this._getNode(activeElement);
|
|
3396
|
+
return node?.tree === this._tree;
|
|
3338
3397
|
}
|
|
3339
|
-
|
|
3398
|
+
_isSelectedNodeInSubtree(subtree) {
|
|
3340
3399
|
const selectedNode = this.getSelectedNode();
|
|
3341
3400
|
if (!selectedNode) {
|
|
3342
3401
|
return false;
|
|
@@ -3344,60 +3403,59 @@ var jqtree = (function (exports) {
|
|
|
3344
3403
|
return subtree === selectedNode || subtree.isParentOf(selectedNode);
|
|
3345
3404
|
}
|
|
3346
3405
|
}
|
|
3347
|
-
|
|
3406
|
+
_loadFolderOnDemand(node, slide = true, onFinished) {
|
|
3348
3407
|
node.is_loading = true;
|
|
3349
|
-
this.
|
|
3350
|
-
this.
|
|
3408
|
+
this._doLoadDataFromUrl(null, node, () => {
|
|
3409
|
+
this._openNodeInternal(node, slide, onFinished);
|
|
3351
3410
|
});
|
|
3352
3411
|
}
|
|
3353
|
-
|
|
3412
|
+
_loadSubtree(data, parentNode) {
|
|
3354
3413
|
parentNode.loadFromData(data);
|
|
3355
3414
|
parentNode.load_on_demand = false;
|
|
3356
3415
|
parentNode.is_loading = false;
|
|
3357
|
-
this.
|
|
3416
|
+
this._refreshElements(parentNode);
|
|
3358
3417
|
}
|
|
3359
|
-
|
|
3360
|
-
if (this.
|
|
3361
|
-
return this.dndHandler.mouseCapture(positionInfo);
|
|
3362
|
-
} else {
|
|
3418
|
+
_mouseCapture(positionInfo) {
|
|
3419
|
+
if (!this._options.dragAndDrop) {
|
|
3363
3420
|
return false;
|
|
3364
3421
|
}
|
|
3422
|
+
return this._dndHandler.mouseCapture(positionInfo);
|
|
3365
3423
|
}
|
|
3366
|
-
|
|
3367
|
-
if
|
|
3368
|
-
|
|
3369
|
-
this.scrollHandler.checkScrolling(positionInfo);
|
|
3370
|
-
return result;
|
|
3371
|
-
} else {
|
|
3424
|
+
_mouseDrag(positionInfo) {
|
|
3425
|
+
/* istanbul ignore if */
|
|
3426
|
+
if (!this._options.dragAndDrop) {
|
|
3372
3427
|
return false;
|
|
3373
3428
|
}
|
|
3429
|
+
const result = this._dndHandler.mouseDrag(positionInfo);
|
|
3430
|
+
this._scrollHandler.checkScrolling(positionInfo);
|
|
3431
|
+
return result;
|
|
3374
3432
|
}
|
|
3375
|
-
|
|
3376
|
-
if
|
|
3377
|
-
|
|
3378
|
-
} else {
|
|
3433
|
+
_mouseStart(positionInfo) {
|
|
3434
|
+
/* istanbul ignore if */
|
|
3435
|
+
if (!this._options.dragAndDrop) {
|
|
3379
3436
|
return false;
|
|
3380
3437
|
}
|
|
3438
|
+
return this._dndHandler.mouseStart(positionInfo);
|
|
3381
3439
|
}
|
|
3382
|
-
|
|
3383
|
-
if
|
|
3384
|
-
|
|
3385
|
-
return this.dndHandler.mouseStop(positionInfo);
|
|
3386
|
-
} else {
|
|
3440
|
+
_mouseStop(positionInfo) {
|
|
3441
|
+
/* istanbul ignore if */
|
|
3442
|
+
if (!this._options.dragAndDrop) {
|
|
3387
3443
|
return false;
|
|
3388
3444
|
}
|
|
3445
|
+
this._scrollHandler.stopScrolling();
|
|
3446
|
+
return this._dndHandler.mouseStop(positionInfo);
|
|
3389
3447
|
}
|
|
3390
|
-
|
|
3448
|
+
_openNodeInternal(node, slide = true, onFinished) {
|
|
3391
3449
|
const doOpenNode = (_node, _slide, _onFinished) => {
|
|
3392
3450
|
if (!node.children.length) {
|
|
3393
3451
|
return;
|
|
3394
3452
|
}
|
|
3395
|
-
const folderElement = this.
|
|
3396
|
-
folderElement.open(_onFinished, _slide, this.
|
|
3453
|
+
const folderElement = this._createFolderElement(_node);
|
|
3454
|
+
folderElement.open(_onFinished, _slide, this._options.animationSpeed);
|
|
3397
3455
|
};
|
|
3398
3456
|
if (node.isFolder() || node.isEmptyFolder) {
|
|
3399
3457
|
if (node.load_on_demand) {
|
|
3400
|
-
this.
|
|
3458
|
+
this._loadFolderOnDemand(node, slide, onFinished);
|
|
3401
3459
|
} else {
|
|
3402
3460
|
let parent = node.parent;
|
|
3403
3461
|
while (parent) {
|
|
@@ -3408,11 +3466,11 @@ var jqtree = (function (exports) {
|
|
|
3408
3466
|
parent = parent.parent;
|
|
3409
3467
|
}
|
|
3410
3468
|
doOpenNode(node, slide, onFinished);
|
|
3411
|
-
this.
|
|
3469
|
+
this._saveState();
|
|
3412
3470
|
}
|
|
3413
3471
|
}
|
|
3414
3472
|
}
|
|
3415
|
-
|
|
3473
|
+
_openParents(node) {
|
|
3416
3474
|
const parent = node.parent;
|
|
3417
3475
|
if (parent?.parent && !parent.is_open) {
|
|
3418
3476
|
this.openNode(parent, false);
|
|
@@ -3423,41 +3481,41 @@ var jqtree = (function (exports) {
|
|
|
3423
3481
|
Redraw the tree or part of the tree.
|
|
3424
3482
|
from_node: redraw this subtree
|
|
3425
3483
|
*/
|
|
3426
|
-
|
|
3427
|
-
const mustSetFocus = this.
|
|
3428
|
-
const mustSelect = fromNode ? this.
|
|
3429
|
-
this.
|
|
3484
|
+
_refreshElements(fromNode) {
|
|
3485
|
+
const mustSetFocus = this._isFocusOnTree();
|
|
3486
|
+
const mustSelect = fromNode ? this._isSelectedNodeInSubtree(fromNode) : false;
|
|
3487
|
+
this._renderer.render(fromNode);
|
|
3430
3488
|
if (mustSelect) {
|
|
3431
|
-
this.
|
|
3489
|
+
this._selectCurrentNode(mustSetFocus);
|
|
3432
3490
|
}
|
|
3433
|
-
this.
|
|
3491
|
+
this._triggerEvent("tree.refresh");
|
|
3434
3492
|
}
|
|
3435
|
-
|
|
3436
|
-
if (this.
|
|
3437
|
-
this.
|
|
3493
|
+
_saveState() {
|
|
3494
|
+
if (this._options.saveState) {
|
|
3495
|
+
this._saveStateHandler.saveState();
|
|
3438
3496
|
}
|
|
3439
3497
|
}
|
|
3440
|
-
|
|
3498
|
+
_selectCurrentNode(mustSetFocus) {
|
|
3441
3499
|
const node = this.getSelectedNode();
|
|
3442
3500
|
if (node) {
|
|
3443
|
-
const nodeElement = this.
|
|
3501
|
+
const nodeElement = this._getNodeElementForNode(node);
|
|
3444
3502
|
nodeElement.select(mustSetFocus);
|
|
3445
3503
|
}
|
|
3446
3504
|
}
|
|
3447
3505
|
|
|
3448
3506
|
// Set initial state, either by restoring the state or auto-opening nodes
|
|
3449
3507
|
// result: must load nodes on demand?
|
|
3450
|
-
|
|
3508
|
+
_setInitialState() {
|
|
3451
3509
|
const restoreState = () => {
|
|
3452
3510
|
// result: is state restored, must load on demand?
|
|
3453
|
-
if (!this.
|
|
3511
|
+
if (!this._options.saveState) {
|
|
3454
3512
|
return [false, false];
|
|
3455
3513
|
} else {
|
|
3456
|
-
const state = this.
|
|
3514
|
+
const state = this._saveStateHandler.getStateFromStorage();
|
|
3457
3515
|
if (!state) {
|
|
3458
3516
|
return [false, false];
|
|
3459
3517
|
} else {
|
|
3460
|
-
const mustLoadOnDemand = this.
|
|
3518
|
+
const mustLoadOnDemand = this._saveStateHandler.setInitialState(state);
|
|
3461
3519
|
|
|
3462
3520
|
// return true: the state is restored
|
|
3463
3521
|
return [true, mustLoadOnDemand];
|
|
@@ -3466,12 +3524,12 @@ var jqtree = (function (exports) {
|
|
|
3466
3524
|
};
|
|
3467
3525
|
const autoOpenNodes = () => {
|
|
3468
3526
|
// result: must load on demand?
|
|
3469
|
-
if (this.
|
|
3527
|
+
if (this._options.autoOpen === false) {
|
|
3470
3528
|
return false;
|
|
3471
3529
|
}
|
|
3472
|
-
const maxLevel = this.
|
|
3530
|
+
const maxLevel = this._getAutoOpenMaxLevel();
|
|
3473
3531
|
let mustLoadOnDemand = false;
|
|
3474
|
-
this.
|
|
3532
|
+
this._tree.iterate((node, level) => {
|
|
3475
3533
|
if (node.load_on_demand) {
|
|
3476
3534
|
mustLoadOnDemand = true;
|
|
3477
3535
|
return false;
|
|
@@ -3494,39 +3552,35 @@ var jqtree = (function (exports) {
|
|
|
3494
3552
|
|
|
3495
3553
|
// Set the initial state for nodes that are loaded on demand
|
|
3496
3554
|
// Call cb_finished when done
|
|
3497
|
-
|
|
3555
|
+
_setInitialStateOnDemand(cbFinished) {
|
|
3498
3556
|
const restoreState = () => {
|
|
3499
|
-
|
|
3557
|
+
const state = this._saveStateHandler.getStateFromStorage();
|
|
3558
|
+
if (!state) {
|
|
3500
3559
|
return false;
|
|
3501
3560
|
} else {
|
|
3502
|
-
|
|
3503
|
-
|
|
3504
|
-
return false;
|
|
3505
|
-
} else {
|
|
3506
|
-
this.saveStateHandler.setInitialStateOnDemand(state, cbFinished);
|
|
3507
|
-
return true;
|
|
3508
|
-
}
|
|
3561
|
+
this._saveStateHandler.setInitialStateOnDemand(state, cbFinished);
|
|
3562
|
+
return true;
|
|
3509
3563
|
}
|
|
3510
3564
|
};
|
|
3511
3565
|
const autoOpenNodes = () => {
|
|
3512
|
-
const maxLevel = this.
|
|
3566
|
+
const maxLevel = this._getAutoOpenMaxLevel();
|
|
3513
3567
|
let loadingCount = 0;
|
|
3514
3568
|
const loadAndOpenNode = node => {
|
|
3515
3569
|
loadingCount += 1;
|
|
3516
|
-
this.
|
|
3570
|
+
this._openNodeInternal(node, false, () => {
|
|
3517
3571
|
loadingCount -= 1;
|
|
3518
3572
|
openNodes();
|
|
3519
3573
|
});
|
|
3520
3574
|
};
|
|
3521
3575
|
const openNodes = () => {
|
|
3522
|
-
this.
|
|
3576
|
+
this._tree.iterate((node, level) => {
|
|
3523
3577
|
if (node.load_on_demand) {
|
|
3524
3578
|
if (!node.is_loading) {
|
|
3525
3579
|
loadAndOpenNode(node);
|
|
3526
3580
|
}
|
|
3527
3581
|
return false;
|
|
3528
3582
|
} else {
|
|
3529
|
-
this.
|
|
3583
|
+
this._openNodeInternal(node, false);
|
|
3530
3584
|
return level !== maxLevel;
|
|
3531
3585
|
}
|
|
3532
3586
|
});
|
|
@@ -3540,13 +3594,80 @@ var jqtree = (function (exports) {
|
|
|
3540
3594
|
autoOpenNodes();
|
|
3541
3595
|
}
|
|
3542
3596
|
}
|
|
3543
|
-
|
|
3597
|
+
_triggerEvent(eventName, values) {
|
|
3544
3598
|
const event = jQuery.Event(eventName, values);
|
|
3545
|
-
this.
|
|
3546
|
-
return event;
|
|
3599
|
+
this._element.trigger(event);
|
|
3600
|
+
return !event.isDefaultPrevented();
|
|
3547
3601
|
}
|
|
3548
3602
|
}
|
|
3549
|
-
|
|
3603
|
+
const register = () => {
|
|
3604
|
+
const getWidgetData = (el, dataKey) => {
|
|
3605
|
+
const widget = jQuery.data(el, dataKey);
|
|
3606
|
+
if (widget && widget instanceof JqTreeWidget) {
|
|
3607
|
+
return widget;
|
|
3608
|
+
} else {
|
|
3609
|
+
return null;
|
|
3610
|
+
}
|
|
3611
|
+
};
|
|
3612
|
+
const createWidget = ($el, options) => {
|
|
3613
|
+
for (const el of $el.get()) {
|
|
3614
|
+
const existingWidget = getWidgetData(el, "jqtree");
|
|
3615
|
+
if (!existingWidget) {
|
|
3616
|
+
const widget = new JqTreeWidget(el, options ?? {});
|
|
3617
|
+
if (!jQuery.data(el, "jqtree")) {
|
|
3618
|
+
jQuery.data(el, "jqtree", widget);
|
|
3619
|
+
}
|
|
3620
|
+
|
|
3621
|
+
// Call init after setting data, so we can call methods
|
|
3622
|
+
widget.init();
|
|
3623
|
+
}
|
|
3624
|
+
}
|
|
3625
|
+
return $el;
|
|
3626
|
+
};
|
|
3627
|
+
const destroyWidget = $el => {
|
|
3628
|
+
for (const el of $el.get()) {
|
|
3629
|
+
const widget = getWidgetData(el, "jqtree");
|
|
3630
|
+
if (widget) {
|
|
3631
|
+
widget.destroy();
|
|
3632
|
+
}
|
|
3633
|
+
jQuery.removeData(el, "jqtree");
|
|
3634
|
+
}
|
|
3635
|
+
};
|
|
3636
|
+
const callFunction = ($el, functionName, args) => {
|
|
3637
|
+
let result = null;
|
|
3638
|
+
for (const el of $el.get()) {
|
|
3639
|
+
const widget = jQuery.data(el, "jqtree");
|
|
3640
|
+
if (widget && widget instanceof JqTreeWidget) {
|
|
3641
|
+
const widgetFunction = widget[functionName];
|
|
3642
|
+
if (widgetFunction && typeof widgetFunction === "function") {
|
|
3643
|
+
result = widgetFunction.apply(widget, args);
|
|
3644
|
+
}
|
|
3645
|
+
}
|
|
3646
|
+
}
|
|
3647
|
+
return result;
|
|
3648
|
+
};
|
|
3649
|
+
|
|
3650
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
3651
|
+
jQuery.fn.tree = function (argument1, ...args) {
|
|
3652
|
+
if (!argument1) {
|
|
3653
|
+
return createWidget(this, null);
|
|
3654
|
+
} else if (typeof argument1 === "object") {
|
|
3655
|
+
const options = argument1;
|
|
3656
|
+
return createWidget(this, options);
|
|
3657
|
+
} else if (typeof argument1 === "string" && argument1[0] !== "_") {
|
|
3658
|
+
const functionName = argument1;
|
|
3659
|
+
if (argument1 === "destroy") {
|
|
3660
|
+
destroyWidget(this);
|
|
3661
|
+
return undefined;
|
|
3662
|
+
} else {
|
|
3663
|
+
return callFunction(this, functionName, args);
|
|
3664
|
+
}
|
|
3665
|
+
} else {
|
|
3666
|
+
return undefined;
|
|
3667
|
+
}
|
|
3668
|
+
};
|
|
3669
|
+
};
|
|
3670
|
+
register();
|
|
3550
3671
|
|
|
3551
3672
|
exports.JqTreeWidget = JqTreeWidget;
|
|
3552
3673
|
|