jqtree 1.8.11 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bower.json +1 -1
- package/eslint.config.mjs +21 -7
- package/package.json +40 -46
- package/pnpm-workspace.yaml +4 -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 +30 -22
- package/src/nodeElement/ghostDropHint.ts +24 -24
- package/src/nodeElement/index.ts +13 -12
- package/src/positionUtils.ts +18 -0
- package/src/saveStateHandler.ts +56 -55
- package/src/scrollHandler/containerScrollParent.ts +17 -15
- package/src/scrollHandler/documentScrollParent.ts +23 -22
- package/src/scrollHandler.ts +23 -22
- package/src/selectNodeHandler.ts +28 -28
- package/src/tree.jquery.ts +251 -269
- package/src/util.ts +0 -14
- package/src/version.ts +1 -1
- package/tree.jquery.debug.js +873 -734
- package/tree.jquery.debug.js.map +1 -1
- package/tree.jquery.js +2 -2
- package/tree.jquery.js.map +1 -1
package/tree.jquery.debug.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
JqTree 1.
|
|
2
|
+
JqTree 1.9.0
|
|
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,39 +1879,44 @@ 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
1918
|
if (this.mustShowBorderDropHint(position)) {
|
|
1849
|
-
return new BorderDropHint(this.element, this.
|
|
1919
|
+
return new BorderDropHint(this.element, this._getScrollLeft());
|
|
1850
1920
|
} else {
|
|
1851
1921
|
return new GhostDropHint(this.node, this.element, position);
|
|
1852
1922
|
}
|
|
@@ -1860,13 +1930,13 @@ var jqtree = (function (exports) {
|
|
|
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
1938
|
const titleSpan = this.getTitleSpan();
|
|
1869
|
-
const tabIndex = this.
|
|
1939
|
+
const tabIndex = this._tabIndex;
|
|
1870
1940
|
|
|
1871
1941
|
// Check for null or undefined
|
|
1872
1942
|
if (tabIndex != null) {
|
|
@@ -1888,7 +1958,47 @@ var jqtree = (function (exports) {
|
|
|
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,19 +2014,19 @@ 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);
|
|
@@ -1925,14 +2035,15 @@ var jqtree = (function (exports) {
|
|
|
1925
2035
|
this.element.classList.add("jqtree-closed");
|
|
1926
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,10 +2052,10 @@ 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);
|
|
@@ -1956,26 +2067,37 @@ var jqtree = (function (exports) {
|
|
|
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,6 +2286,12 @@ 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
|
|
@@ -2235,6 +2363,8 @@ var jqtree = (function (exports) {
|
|
|
2235
2363
|
}
|
|
2236
2364
|
|
|
2237
2365
|
class ContainerScrollParent extends ScrollParent {
|
|
2366
|
+
_scrollParentBottom;
|
|
2367
|
+
_scrollParentTop;
|
|
2238
2368
|
stopScrolling() {
|
|
2239
2369
|
super.stopScrolling();
|
|
2240
2370
|
this.horizontalScrollDirection = undefined;
|
|
@@ -2255,28 +2385,31 @@ var jqtree = (function (exports) {
|
|
|
2255
2385
|
return undefined;
|
|
2256
2386
|
}
|
|
2257
2387
|
getNewVerticalScrollDirection(pageY) {
|
|
2258
|
-
if (pageY < this.
|
|
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.
|
|
2396
|
+
_getScrollParentBottom() {
|
|
2397
|
+
if (this._scrollParentBottom == null) {
|
|
2268
2398
|
const containerHeight = this.container.getBoundingClientRect().height;
|
|
2269
|
-
this.
|
|
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
2432
|
getNewHorizontalScrollDirection(pageX) {
|
|
2300
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) {
|
|
@@ -2316,26 +2449,26 @@ var jqtree = (function (exports) {
|
|
|
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.container.scrollTop + this.container.clientHeight < this.
|
|
2457
|
+
_canScrollDown() {
|
|
2458
|
+
return this.container.scrollTop + this.container.clientHeight < this._getDocumentScrollHeight();
|
|
2326
2459
|
}
|
|
2327
|
-
|
|
2328
|
-
return this.container.scrollLeft + this.container.clientWidth < 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
|
});
|
|
@@ -2567,6 +2706,8 @@ var jqtree = (function (exports) {
|
|
|
2567
2706
|
};
|
|
2568
2707
|
class SimpleWidget {
|
|
2569
2708
|
static defaults = {};
|
|
2709
|
+
$el;
|
|
2710
|
+
options;
|
|
2570
2711
|
constructor(el, options) {
|
|
2571
2712
|
this.$el = jQuery(el);
|
|
2572
2713
|
|
|
@@ -2591,7 +2732,7 @@ var jqtree = (function (exports) {
|
|
|
2591
2732
|
}
|
|
2592
2733
|
}
|
|
2593
2734
|
|
|
2594
|
-
const version = "1.
|
|
2735
|
+
const version = "1.9.0";
|
|
2595
2736
|
|
|
2596
2737
|
const NODE_PARAM_IS_EMPTY = "Node parameter is empty";
|
|
2597
2738
|
const PARAM_IS_EMPTY = "Parameter is empty: ";
|
|
@@ -2642,10 +2783,22 @@ var jqtree = (function (exports) {
|
|
|
2642
2783
|
tabIndex: 0,
|
|
2643
2784
|
useContextMenu: true
|
|
2644
2785
|
};
|
|
2786
|
+
_dataLoader;
|
|
2787
|
+
_dndHandler;
|
|
2788
|
+
_element;
|
|
2789
|
+
_htmlElement;
|
|
2790
|
+
_isInitialized;
|
|
2791
|
+
_keyHandler;
|
|
2792
|
+
_mouseHandler;
|
|
2793
|
+
_renderer;
|
|
2794
|
+
_saveStateHandler;
|
|
2795
|
+
_scrollHandler;
|
|
2796
|
+
_selectNodeHandler;
|
|
2797
|
+
_tree;
|
|
2645
2798
|
addNodeAfter(newNodeInfo, existingNode) {
|
|
2646
2799
|
const newNode = existingNode.addAfter(newNodeInfo);
|
|
2647
2800
|
if (newNode) {
|
|
2648
|
-
this.
|
|
2801
|
+
this._refreshElements(existingNode.parent);
|
|
2649
2802
|
}
|
|
2650
2803
|
return newNode;
|
|
2651
2804
|
}
|
|
@@ -2655,7 +2808,7 @@ var jqtree = (function (exports) {
|
|
|
2655
2808
|
}
|
|
2656
2809
|
const newNode = existingNode.addBefore(newNodeInfo);
|
|
2657
2810
|
if (newNode) {
|
|
2658
|
-
this.
|
|
2811
|
+
this._refreshElements(existingNode.parent);
|
|
2659
2812
|
}
|
|
2660
2813
|
return newNode;
|
|
2661
2814
|
}
|
|
@@ -2665,7 +2818,7 @@ var jqtree = (function (exports) {
|
|
|
2665
2818
|
}
|
|
2666
2819
|
const newNode = existingNode.addParent(newNodeInfo);
|
|
2667
2820
|
if (newNode) {
|
|
2668
|
-
this.
|
|
2821
|
+
this._refreshElements(newNode.parent);
|
|
2669
2822
|
}
|
|
2670
2823
|
return newNode;
|
|
2671
2824
|
}
|
|
@@ -2673,16 +2826,16 @@ var jqtree = (function (exports) {
|
|
|
2673
2826
|
if (!node) {
|
|
2674
2827
|
throw Error(NODE_PARAM_IS_EMPTY);
|
|
2675
2828
|
}
|
|
2676
|
-
this.
|
|
2677
|
-
this.
|
|
2678
|
-
this.
|
|
2679
|
-
this.
|
|
2680
|
-
return this.
|
|
2829
|
+
this._selectNodeHandler.addToSelection(node);
|
|
2830
|
+
this._openParents(node);
|
|
2831
|
+
this._getNodeElementForNode(node).select(mustSetFocus ?? true);
|
|
2832
|
+
this._saveState();
|
|
2833
|
+
return this._element;
|
|
2681
2834
|
}
|
|
2682
2835
|
appendNode(newNodeInfo, parentNodeParam) {
|
|
2683
|
-
const parentNode = parentNodeParam ?? this.
|
|
2836
|
+
const parentNode = parentNodeParam ?? this._tree;
|
|
2684
2837
|
const node = parentNode.append(newNodeInfo);
|
|
2685
|
-
this.
|
|
2838
|
+
this._refreshElements(parentNode);
|
|
2686
2839
|
return node;
|
|
2687
2840
|
}
|
|
2688
2841
|
closeNode(node, slideParam) {
|
|
@@ -2691,80 +2844,83 @@ var jqtree = (function (exports) {
|
|
|
2691
2844
|
}
|
|
2692
2845
|
const slide = slideParam ?? this.options.slide;
|
|
2693
2846
|
if (node.isFolder() || node.isEmptyFolder) {
|
|
2694
|
-
this.
|
|
2695
|
-
this.
|
|
2847
|
+
this._createFolderElement(node).close(slide, this.options.animationSpeed);
|
|
2848
|
+
this._saveState();
|
|
2696
2849
|
}
|
|
2697
|
-
return this.
|
|
2850
|
+
return this._element;
|
|
2698
2851
|
}
|
|
2699
2852
|
deinit() {
|
|
2700
|
-
this.
|
|
2701
|
-
this.
|
|
2702
|
-
this.
|
|
2703
|
-
this.
|
|
2704
|
-
this.
|
|
2853
|
+
this._htmlElement.textContent = "";
|
|
2854
|
+
this._element.off();
|
|
2855
|
+
this._keyHandler.deinit();
|
|
2856
|
+
this._mouseHandler.deinit();
|
|
2857
|
+
this._tree = new Node({}, true);
|
|
2705
2858
|
super.deinit();
|
|
2706
2859
|
}
|
|
2707
2860
|
getNodeByCallback(callback) {
|
|
2708
|
-
return this.
|
|
2861
|
+
return this._tree.getNodeByCallback(callback);
|
|
2709
2862
|
}
|
|
2710
2863
|
getNodeByHtmlElement(inputElement) {
|
|
2711
2864
|
const element = inputElement instanceof HTMLElement ? inputElement : inputElement.get(0);
|
|
2712
2865
|
if (!element) {
|
|
2713
2866
|
return null;
|
|
2714
2867
|
}
|
|
2715
|
-
return this.
|
|
2868
|
+
return this._getNode(element);
|
|
2716
2869
|
}
|
|
2717
2870
|
getNodeById(nodeId) {
|
|
2718
|
-
return this.
|
|
2871
|
+
return this._tree.getNodeById(nodeId);
|
|
2719
2872
|
}
|
|
2720
2873
|
getNodeByName(name) {
|
|
2721
|
-
return this.
|
|
2874
|
+
return this._tree.getNodeByName(name);
|
|
2722
2875
|
}
|
|
2723
2876
|
getNodeByNameMustExist(name) {
|
|
2724
|
-
return this.
|
|
2877
|
+
return this._tree.getNodeByNameMustExist(name);
|
|
2725
2878
|
}
|
|
2726
2879
|
getNodesByProperty(key, value) {
|
|
2727
|
-
return this.
|
|
2880
|
+
return this._tree.getNodesByProperty(key, value);
|
|
2728
2881
|
}
|
|
2729
2882
|
getSelectedNode() {
|
|
2730
|
-
return this.
|
|
2883
|
+
return this._selectNodeHandler.getSelectedNode();
|
|
2731
2884
|
}
|
|
2732
2885
|
getSelectedNodes() {
|
|
2733
|
-
return this.
|
|
2886
|
+
return this._selectNodeHandler.getSelectedNodes();
|
|
2734
2887
|
}
|
|
2735
2888
|
getState() {
|
|
2736
|
-
return this.
|
|
2889
|
+
return this._saveStateHandler.getState();
|
|
2737
2890
|
}
|
|
2738
2891
|
getStateFromStorage() {
|
|
2739
|
-
return this.
|
|
2892
|
+
return this._saveStateHandler.getStateFromStorage();
|
|
2740
2893
|
}
|
|
2741
2894
|
getTree() {
|
|
2742
|
-
return this.
|
|
2895
|
+
return this._tree;
|
|
2743
2896
|
}
|
|
2744
2897
|
getVersion() {
|
|
2745
2898
|
return version;
|
|
2746
2899
|
}
|
|
2747
2900
|
init() {
|
|
2748
2901
|
super.init();
|
|
2749
|
-
this.
|
|
2750
|
-
this.
|
|
2751
|
-
this.
|
|
2752
|
-
this.options.
|
|
2753
|
-
this.
|
|
2754
|
-
this.
|
|
2902
|
+
this._element = this.$el;
|
|
2903
|
+
this._htmlElement = this._element.get(0);
|
|
2904
|
+
this._isInitialized = false;
|
|
2905
|
+
this.options.dataUrl ??= this._element.data("url");
|
|
2906
|
+
const dataRtl = this._element.data("rtl");
|
|
2907
|
+
this.options.rtl ??= dataRtl === '' ? true : Boolean(dataRtl);
|
|
2908
|
+
this.options.closedIcon ??= this._getDefaultClosedIcon();
|
|
2909
|
+
this._connectHandlers();
|
|
2910
|
+
this._initData();
|
|
2755
2911
|
}
|
|
2756
2912
|
isDragging() {
|
|
2757
|
-
return this.
|
|
2913
|
+
return this._dndHandler.isDragging;
|
|
2758
2914
|
}
|
|
2759
2915
|
isNodeSelected(node) {
|
|
2760
2916
|
if (!node) {
|
|
2761
2917
|
throw Error(NODE_PARAM_IS_EMPTY);
|
|
2762
2918
|
}
|
|
2763
|
-
return this.
|
|
2919
|
+
return this._selectNodeHandler.isNodeSelected(node);
|
|
2764
2920
|
}
|
|
2765
2921
|
loadData(data, parentNode) {
|
|
2766
|
-
this.
|
|
2767
|
-
return this.
|
|
2922
|
+
this._doLoadData(data, parentNode);
|
|
2923
|
+
return this._element;
|
|
2768
2924
|
}
|
|
2769
2925
|
|
|
2770
2926
|
/*
|
|
@@ -2783,19 +2939,19 @@ var jqtree = (function (exports) {
|
|
|
2783
2939
|
loadDataFromUrl(param1, param2, param3) {
|
|
2784
2940
|
if (typeof param1 === "string") {
|
|
2785
2941
|
// first parameter is url
|
|
2786
|
-
this.
|
|
2942
|
+
this._doLoadDataFromUrl(param1, param2, param3 ?? null);
|
|
2787
2943
|
} else {
|
|
2788
2944
|
// first parameter is not url
|
|
2789
|
-
this.
|
|
2945
|
+
this._doLoadDataFromUrl(null, param1, param2);
|
|
2790
2946
|
}
|
|
2791
|
-
return this.
|
|
2947
|
+
return this._element;
|
|
2792
2948
|
}
|
|
2793
2949
|
moveDown() {
|
|
2794
2950
|
const selectedNode = this.getSelectedNode();
|
|
2795
2951
|
if (selectedNode) {
|
|
2796
|
-
this.
|
|
2952
|
+
this._keyHandler.moveDown(selectedNode);
|
|
2797
2953
|
}
|
|
2798
|
-
return this.
|
|
2954
|
+
return this._element;
|
|
2799
2955
|
}
|
|
2800
2956
|
moveNode(node, targetNode, position) {
|
|
2801
2957
|
if (!node) {
|
|
@@ -2807,16 +2963,16 @@ var jqtree = (function (exports) {
|
|
|
2807
2963
|
if (!position) {
|
|
2808
2964
|
throw Error(PARAM_IS_EMPTY + "position");
|
|
2809
2965
|
}
|
|
2810
|
-
this.
|
|
2811
|
-
this.
|
|
2812
|
-
return this.
|
|
2966
|
+
this._tree.moveNode(node, targetNode, position);
|
|
2967
|
+
this._refreshElements(null);
|
|
2968
|
+
return this._element;
|
|
2813
2969
|
}
|
|
2814
2970
|
moveUp() {
|
|
2815
2971
|
const selectedNode = this.getSelectedNode();
|
|
2816
2972
|
if (selectedNode) {
|
|
2817
|
-
this.
|
|
2973
|
+
this._keyHandler.moveUp(selectedNode);
|
|
2818
2974
|
}
|
|
2819
|
-
return this.
|
|
2975
|
+
return this._element;
|
|
2820
2976
|
}
|
|
2821
2977
|
openNode(node, param1, param2) {
|
|
2822
2978
|
if (!node) {
|
|
@@ -2825,7 +2981,7 @@ var jqtree = (function (exports) {
|
|
|
2825
2981
|
const parseParams = () => {
|
|
2826
2982
|
let onFinished;
|
|
2827
2983
|
let slide;
|
|
2828
|
-
if (
|
|
2984
|
+
if (typeof param1 === "function") {
|
|
2829
2985
|
onFinished = param1;
|
|
2830
2986
|
slide = null;
|
|
2831
2987
|
} else {
|
|
@@ -2836,35 +2992,31 @@ var jqtree = (function (exports) {
|
|
|
2836
2992
|
return [slide, onFinished];
|
|
2837
2993
|
};
|
|
2838
2994
|
const [slide, onFinished] = parseParams();
|
|
2839
|
-
this.
|
|
2840
|
-
return this.
|
|
2995
|
+
this._openNodeInternal(node, slide, onFinished);
|
|
2996
|
+
return this._element;
|
|
2841
2997
|
}
|
|
2842
2998
|
prependNode(newNodeInfo, parentNodeParam) {
|
|
2843
|
-
const parentNode = parentNodeParam ?? this.
|
|
2999
|
+
const parentNode = parentNodeParam ?? this._tree;
|
|
2844
3000
|
const node = parentNode.prepend(newNodeInfo);
|
|
2845
|
-
this.
|
|
3001
|
+
this._refreshElements(parentNode);
|
|
2846
3002
|
return node;
|
|
2847
3003
|
}
|
|
2848
3004
|
refresh() {
|
|
2849
|
-
this.
|
|
2850
|
-
return this.
|
|
2851
|
-
}
|
|
2852
|
-
refreshHitAreas() {
|
|
2853
|
-
this.dndHandler.refresh();
|
|
2854
|
-
return this.element;
|
|
3005
|
+
this._refreshElements(null);
|
|
3006
|
+
return this._element;
|
|
2855
3007
|
}
|
|
2856
3008
|
reload(onFinished) {
|
|
2857
|
-
this.
|
|
2858
|
-
return this.
|
|
3009
|
+
this._doLoadDataFromUrl(null, null, onFinished);
|
|
3010
|
+
return this._element;
|
|
2859
3011
|
}
|
|
2860
3012
|
removeFromSelection(node) {
|
|
2861
3013
|
if (!node) {
|
|
2862
3014
|
throw Error(NODE_PARAM_IS_EMPTY);
|
|
2863
3015
|
}
|
|
2864
|
-
this.
|
|
2865
|
-
this.
|
|
2866
|
-
this.
|
|
2867
|
-
return this.
|
|
3016
|
+
this._selectNodeHandler.removeFromSelection(node);
|
|
3017
|
+
this._getNodeElementForNode(node).deselect();
|
|
3018
|
+
this._saveState();
|
|
3019
|
+
return this._element;
|
|
2868
3020
|
}
|
|
2869
3021
|
removeNode(node) {
|
|
2870
3022
|
if (!node) {
|
|
@@ -2873,38 +3025,38 @@ var jqtree = (function (exports) {
|
|
|
2873
3025
|
if (!node.parent) {
|
|
2874
3026
|
throw Error("Node has no parent");
|
|
2875
3027
|
}
|
|
2876
|
-
this.
|
|
3028
|
+
this._selectNodeHandler.removeFromSelection(node, true); // including children
|
|
2877
3029
|
|
|
2878
3030
|
const parent = node.parent;
|
|
2879
3031
|
node.remove();
|
|
2880
|
-
this.
|
|
2881
|
-
return this.
|
|
3032
|
+
this._refreshElements(parent);
|
|
3033
|
+
return this._element;
|
|
2882
3034
|
}
|
|
2883
3035
|
scrollToNode(node) {
|
|
2884
3036
|
if (!node) {
|
|
2885
3037
|
throw Error(NODE_PARAM_IS_EMPTY);
|
|
2886
3038
|
}
|
|
2887
3039
|
if (!node.element) {
|
|
2888
|
-
return this.
|
|
3040
|
+
return this._element;
|
|
2889
3041
|
}
|
|
2890
|
-
const top = getOffsetTop(node.element) - getOffsetTop(this
|
|
2891
|
-
this.
|
|
2892
|
-
return this.
|
|
3042
|
+
const top = getOffsetTop(node.element) - getOffsetTop(this._htmlElement);
|
|
3043
|
+
this._scrollHandler.scrollToY(top);
|
|
3044
|
+
return this._element;
|
|
2893
3045
|
}
|
|
2894
3046
|
selectNode(node, optionsParam) {
|
|
2895
|
-
this.
|
|
2896
|
-
return this.
|
|
3047
|
+
this._doSelectNode(node, optionsParam);
|
|
3048
|
+
return this._element;
|
|
2897
3049
|
}
|
|
2898
3050
|
setOption(option, value) {
|
|
2899
3051
|
this.options[option] = value;
|
|
2900
|
-
return this.
|
|
3052
|
+
return this._element;
|
|
2901
3053
|
}
|
|
2902
3054
|
setState(state) {
|
|
2903
3055
|
if (state) {
|
|
2904
|
-
this.
|
|
2905
|
-
this.
|
|
3056
|
+
this._saveStateHandler.setInitialState(state);
|
|
3057
|
+
this._refreshElements(null);
|
|
2906
3058
|
}
|
|
2907
|
-
return this.
|
|
3059
|
+
return this._element;
|
|
2908
3060
|
}
|
|
2909
3061
|
toggle(node, slideParam = null) {
|
|
2910
3062
|
if (!node) {
|
|
@@ -2916,25 +3068,25 @@ var jqtree = (function (exports) {
|
|
|
2916
3068
|
} else {
|
|
2917
3069
|
this.openNode(node, slide);
|
|
2918
3070
|
}
|
|
2919
|
-
return this.
|
|
3071
|
+
return this._element;
|
|
2920
3072
|
}
|
|
2921
3073
|
toJson() {
|
|
2922
|
-
return JSON.stringify(this.
|
|
3074
|
+
return JSON.stringify(this._tree.getData());
|
|
2923
3075
|
}
|
|
2924
3076
|
updateNode(node, data) {
|
|
2925
3077
|
if (!node) {
|
|
2926
3078
|
throw Error(NODE_PARAM_IS_EMPTY);
|
|
2927
3079
|
}
|
|
2928
3080
|
if (!data) {
|
|
2929
|
-
return this.
|
|
3081
|
+
return this._element;
|
|
2930
3082
|
}
|
|
2931
3083
|
const idIsChanged = typeof data === "object" && data.id && data.id !== node.id;
|
|
2932
3084
|
if (idIsChanged) {
|
|
2933
|
-
this.
|
|
3085
|
+
this._tree.removeNodeFromIndex(node);
|
|
2934
3086
|
}
|
|
2935
3087
|
node.setData(data);
|
|
2936
3088
|
if (idIsChanged) {
|
|
2937
|
-
this.
|
|
3089
|
+
this._tree.addNodeToIndex(node);
|
|
2938
3090
|
}
|
|
2939
3091
|
if (typeof data === "object" && data.children && data.children instanceof Array) {
|
|
2940
3092
|
node.removeChildren();
|
|
@@ -2942,10 +3094,10 @@ var jqtree = (function (exports) {
|
|
|
2942
3094
|
node.loadFromData(data.children);
|
|
2943
3095
|
}
|
|
2944
3096
|
}
|
|
2945
|
-
this.
|
|
2946
|
-
return this.
|
|
3097
|
+
this._refreshElements(node);
|
|
3098
|
+
return this._element;
|
|
2947
3099
|
}
|
|
2948
|
-
|
|
3100
|
+
_connectHandlers() {
|
|
2949
3101
|
const {
|
|
2950
3102
|
autoEscape,
|
|
2951
3103
|
buttonLeft,
|
|
@@ -2972,20 +3124,18 @@ var jqtree = (function (exports) {
|
|
|
2972
3124
|
tabIndex
|
|
2973
3125
|
} = this.options;
|
|
2974
3126
|
const closeNode = this.closeNode.bind(this);
|
|
2975
|
-
const getNodeElement = this.
|
|
2976
|
-
const getNodeElementForNode = this.
|
|
3127
|
+
const getNodeElement = this._getNodeElement.bind(this);
|
|
3128
|
+
const getNodeElementForNode = this._getNodeElementForNode.bind(this);
|
|
2977
3129
|
const getNodeById = this.getNodeById.bind(this);
|
|
2978
3130
|
const getSelectedNode = this.getSelectedNode.bind(this);
|
|
2979
3131
|
const getTree = this.getTree.bind(this);
|
|
2980
|
-
const isFocusOnTree = this.
|
|
3132
|
+
const isFocusOnTree = this._isFocusOnTree.bind(this);
|
|
2981
3133
|
const loadData = this.loadData.bind(this);
|
|
2982
|
-
const openNode = this.
|
|
2983
|
-
const refreshElements = this.
|
|
2984
|
-
const refreshHitAreas = this.refreshHitAreas.bind(this);
|
|
3134
|
+
const openNode = this._openNodeInternal.bind(this);
|
|
3135
|
+
const refreshElements = this._refreshElements.bind(this);
|
|
2985
3136
|
const selectNode = this.selectNode.bind(this);
|
|
2986
|
-
const
|
|
2987
|
-
const
|
|
2988
|
-
const triggerEvent = this.triggerEvent.bind(this);
|
|
3137
|
+
const treeElement = this._htmlElement;
|
|
3138
|
+
const triggerEvent = this._triggerEvent.bind(this);
|
|
2989
3139
|
const selectNodeHandler = new SelectNodeHandler({
|
|
2990
3140
|
getNodeById
|
|
2991
3141
|
});
|
|
@@ -2994,6 +3144,9 @@ var jqtree = (function (exports) {
|
|
|
2994
3144
|
const isNodeSelected = selectNodeHandler.isNodeSelected.bind(selectNodeHandler);
|
|
2995
3145
|
const removeFromSelection = selectNodeHandler.removeFromSelection.bind(selectNodeHandler);
|
|
2996
3146
|
const getMouseDelay = () => this.options.startDndDelay ?? 0;
|
|
3147
|
+
const refreshHitAreas = () => {
|
|
3148
|
+
dndHandler.refresh();
|
|
3149
|
+
};
|
|
2997
3150
|
const dataLoader = new DataLoader({
|
|
2998
3151
|
dataFilter,
|
|
2999
3152
|
loadData,
|
|
@@ -3046,12 +3199,12 @@ var jqtree = (function (exports) {
|
|
|
3046
3199
|
selectNode
|
|
3047
3200
|
});
|
|
3048
3201
|
const renderer = new ElementsRenderer({
|
|
3049
|
-
$element: $treeElement,
|
|
3050
3202
|
autoEscape,
|
|
3051
3203
|
buttonLeft,
|
|
3052
3204
|
closedIcon,
|
|
3053
3205
|
dragAndDrop,
|
|
3054
3206
|
getTree,
|
|
3207
|
+
htmlElement: treeElement,
|
|
3055
3208
|
isNodeSelected,
|
|
3056
3209
|
onCreateLi,
|
|
3057
3210
|
openedIcon,
|
|
@@ -3059,17 +3212,17 @@ var jqtree = (function (exports) {
|
|
|
3059
3212
|
showEmptyFolder,
|
|
3060
3213
|
tabIndex
|
|
3061
3214
|
});
|
|
3062
|
-
const getNode = this.
|
|
3063
|
-
const onMouseCapture = this.
|
|
3064
|
-
const onMouseDrag = this.
|
|
3065
|
-
const onMouseStart = this.
|
|
3066
|
-
const onMouseStop = this.
|
|
3215
|
+
const getNode = this._getNode.bind(this);
|
|
3216
|
+
const onMouseCapture = this._mouseCapture.bind(this);
|
|
3217
|
+
const onMouseDrag = this._mouseDrag.bind(this);
|
|
3218
|
+
const onMouseStart = this._mouseStart.bind(this);
|
|
3219
|
+
const onMouseStop = this._mouseStop.bind(this);
|
|
3067
3220
|
const mouseHandler = new MouseHandler({
|
|
3068
3221
|
element: treeElement,
|
|
3069
3222
|
getMouseDelay,
|
|
3070
3223
|
getNode,
|
|
3071
3224
|
onClickButton: this.toggle.bind(this),
|
|
3072
|
-
onClickTitle: this.
|
|
3225
|
+
onClickTitle: this._doSelectNode.bind(this),
|
|
3073
3226
|
onMouseCapture,
|
|
3074
3227
|
onMouseDrag,
|
|
3075
3228
|
onMouseStart,
|
|
@@ -3077,89 +3230,87 @@ var jqtree = (function (exports) {
|
|
|
3077
3230
|
triggerEvent,
|
|
3078
3231
|
useContextMenu: this.options.useContextMenu
|
|
3079
3232
|
});
|
|
3080
|
-
this.
|
|
3081
|
-
this.
|
|
3082
|
-
this.
|
|
3083
|
-
this.
|
|
3084
|
-
this.
|
|
3085
|
-
this.
|
|
3086
|
-
this.
|
|
3087
|
-
this.
|
|
3088
|
-
}
|
|
3089
|
-
|
|
3090
|
-
const node = this.
|
|
3091
|
-
return node?.tree === this.
|
|
3092
|
-
}
|
|
3093
|
-
|
|
3094
|
-
const closedIconElement = this.
|
|
3095
|
-
const getScrollLeft = this.
|
|
3096
|
-
const openedIconElement = this.
|
|
3233
|
+
this._dataLoader = dataLoader;
|
|
3234
|
+
this._dndHandler = dndHandler;
|
|
3235
|
+
this._keyHandler = keyHandler;
|
|
3236
|
+
this._mouseHandler = mouseHandler;
|
|
3237
|
+
this._renderer = renderer;
|
|
3238
|
+
this._saveStateHandler = saveStateHandler;
|
|
3239
|
+
this._scrollHandler = scrollHandler;
|
|
3240
|
+
this._selectNodeHandler = selectNodeHandler;
|
|
3241
|
+
}
|
|
3242
|
+
_containsElement(element) {
|
|
3243
|
+
const node = this._getNode(element);
|
|
3244
|
+
return node?.tree === this._tree;
|
|
3245
|
+
}
|
|
3246
|
+
_createFolderElement(node) {
|
|
3247
|
+
const closedIconElement = this._renderer.closedIconElement;
|
|
3248
|
+
const getScrollLeft = this._scrollHandler.getScrollLeft.bind(this._scrollHandler);
|
|
3249
|
+
const openedIconElement = this._renderer.openedIconElement;
|
|
3097
3250
|
const tabIndex = this.options.tabIndex;
|
|
3098
|
-
const
|
|
3099
|
-
const triggerEvent = this.triggerEvent.bind(this);
|
|
3251
|
+
const triggerEvent = this._triggerEvent.bind(this);
|
|
3100
3252
|
return new FolderElement({
|
|
3101
3253
|
closedIconElement,
|
|
3102
3254
|
getScrollLeft,
|
|
3103
3255
|
node,
|
|
3104
3256
|
openedIconElement,
|
|
3105
3257
|
tabIndex,
|
|
3106
|
-
treeElement,
|
|
3258
|
+
treeElement: this._htmlElement,
|
|
3107
3259
|
triggerEvent
|
|
3108
3260
|
});
|
|
3109
3261
|
}
|
|
3110
|
-
|
|
3111
|
-
const getScrollLeft = this.
|
|
3262
|
+
_createNodeElement(node) {
|
|
3263
|
+
const getScrollLeft = this._scrollHandler.getScrollLeft.bind(this._scrollHandler);
|
|
3112
3264
|
const tabIndex = this.options.tabIndex;
|
|
3113
|
-
const treeElement = this.element.get(0);
|
|
3114
3265
|
return new NodeElement({
|
|
3115
3266
|
getScrollLeft,
|
|
3116
3267
|
node,
|
|
3117
3268
|
tabIndex,
|
|
3118
|
-
treeElement
|
|
3269
|
+
treeElement: this._htmlElement
|
|
3119
3270
|
});
|
|
3120
3271
|
}
|
|
3121
|
-
|
|
3272
|
+
_deselectCurrentNode() {
|
|
3122
3273
|
const node = this.getSelectedNode();
|
|
3123
3274
|
if (node) {
|
|
3124
3275
|
this.removeFromSelection(node);
|
|
3125
3276
|
}
|
|
3126
3277
|
}
|
|
3127
|
-
|
|
3128
|
-
const selectedNodesUnderParent = this.
|
|
3278
|
+
_deselectNodes(parentNode) {
|
|
3279
|
+
const selectedNodesUnderParent = this._selectNodeHandler.getSelectedNodesUnder(parentNode);
|
|
3129
3280
|
for (const n of selectedNodesUnderParent) {
|
|
3130
|
-
this.
|
|
3281
|
+
this._selectNodeHandler.removeFromSelection(n);
|
|
3131
3282
|
}
|
|
3132
3283
|
}
|
|
3133
|
-
|
|
3284
|
+
_doLoadData(data, parentNode) {
|
|
3134
3285
|
if (data) {
|
|
3135
3286
|
if (parentNode) {
|
|
3136
|
-
this.
|
|
3137
|
-
this.
|
|
3287
|
+
this._deselectNodes(parentNode);
|
|
3288
|
+
this._loadSubtree(data, parentNode);
|
|
3138
3289
|
} else {
|
|
3139
|
-
this.
|
|
3290
|
+
this._initTree(data);
|
|
3140
3291
|
}
|
|
3141
3292
|
if (this.isDragging()) {
|
|
3142
|
-
this.
|
|
3293
|
+
this._dndHandler.refresh();
|
|
3143
3294
|
}
|
|
3144
3295
|
}
|
|
3145
|
-
this.
|
|
3296
|
+
this._triggerEvent("tree.load_data", {
|
|
3146
3297
|
parent_node: parentNode,
|
|
3147
3298
|
tree_data: data
|
|
3148
3299
|
});
|
|
3149
3300
|
}
|
|
3150
|
-
|
|
3151
|
-
const urlInfo = urlInfoParam ?? this.
|
|
3152
|
-
this.
|
|
3301
|
+
_doLoadDataFromUrl(urlInfoParam, parentNode, onFinished) {
|
|
3302
|
+
const urlInfo = urlInfoParam ?? this._getDataUrlInfo(parentNode);
|
|
3303
|
+
this._dataLoader.loadFromUrl(urlInfo, parentNode, onFinished);
|
|
3153
3304
|
}
|
|
3154
|
-
|
|
3305
|
+
_doSelectNode(node, optionsParam) {
|
|
3155
3306
|
const saveState = () => {
|
|
3156
3307
|
if (this.options.saveState) {
|
|
3157
|
-
this.
|
|
3308
|
+
this._saveStateHandler.saveState();
|
|
3158
3309
|
}
|
|
3159
3310
|
};
|
|
3160
3311
|
if (!node) {
|
|
3161
3312
|
// Called with empty node -> deselect current node
|
|
3162
|
-
this.
|
|
3313
|
+
this._deselectCurrentNode();
|
|
3163
3314
|
saveState();
|
|
3164
3315
|
return;
|
|
3165
3316
|
}
|
|
@@ -3181,27 +3332,27 @@ var jqtree = (function (exports) {
|
|
|
3181
3332
|
if (!canSelect()) {
|
|
3182
3333
|
return;
|
|
3183
3334
|
}
|
|
3184
|
-
if (this.
|
|
3335
|
+
if (this._selectNodeHandler.isNodeSelected(node)) {
|
|
3185
3336
|
if (selectOptions.mustToggle) {
|
|
3186
|
-
this.
|
|
3187
|
-
this.
|
|
3337
|
+
this._deselectCurrentNode();
|
|
3338
|
+
this._triggerEvent("tree.select", {
|
|
3188
3339
|
node: null,
|
|
3189
3340
|
previous_node: node
|
|
3190
3341
|
});
|
|
3191
3342
|
}
|
|
3192
3343
|
} else {
|
|
3193
3344
|
const deselectedNode = this.getSelectedNode() || null;
|
|
3194
|
-
this.
|
|
3345
|
+
this._deselectCurrentNode();
|
|
3195
3346
|
this.addToSelection(node, selectOptions.mustSetFocus);
|
|
3196
|
-
this.
|
|
3347
|
+
this._triggerEvent("tree.select", {
|
|
3197
3348
|
deselected_node: deselectedNode,
|
|
3198
3349
|
node
|
|
3199
3350
|
});
|
|
3200
|
-
this.
|
|
3351
|
+
this._openParents(node);
|
|
3201
3352
|
}
|
|
3202
3353
|
saveState();
|
|
3203
3354
|
}
|
|
3204
|
-
|
|
3355
|
+
_getAutoOpenMaxLevel() {
|
|
3205
3356
|
if (this.options.autoOpen === true) {
|
|
3206
3357
|
return -1;
|
|
3207
3358
|
} else if (typeof this.options.autoOpen === "number") {
|
|
@@ -3212,8 +3363,7 @@ var jqtree = (function (exports) {
|
|
|
3212
3363
|
return 0;
|
|
3213
3364
|
}
|
|
3214
3365
|
}
|
|
3215
|
-
|
|
3216
|
-
const dataUrl = this.options.dataUrl ?? this.element.data("url");
|
|
3366
|
+
_getDataUrlInfo(node) {
|
|
3217
3367
|
const getUrlFromString = url => {
|
|
3218
3368
|
const urlInfo = {
|
|
3219
3369
|
url
|
|
@@ -3230,7 +3380,7 @@ var jqtree = (function (exports) {
|
|
|
3230
3380
|
urlInfo.data = data;
|
|
3231
3381
|
} else {
|
|
3232
3382
|
// Add selected_node parameter
|
|
3233
|
-
const selectedNodeId = this.
|
|
3383
|
+
const selectedNodeId = this._getNodeIdToBeSelected();
|
|
3234
3384
|
if (selectedNodeId) {
|
|
3235
3385
|
const data = {
|
|
3236
3386
|
selected_node: selectedNodeId
|
|
@@ -3239,6 +3389,7 @@ var jqtree = (function (exports) {
|
|
|
3239
3389
|
}
|
|
3240
3390
|
}
|
|
3241
3391
|
};
|
|
3392
|
+
const dataUrl = this.options.dataUrl;
|
|
3242
3393
|
if (typeof dataUrl === "function") {
|
|
3243
3394
|
return dataUrl(node);
|
|
3244
3395
|
} else if (typeof dataUrl === "string") {
|
|
@@ -3250,7 +3401,7 @@ var jqtree = (function (exports) {
|
|
|
3250
3401
|
return null;
|
|
3251
3402
|
}
|
|
3252
3403
|
}
|
|
3253
|
-
|
|
3404
|
+
_getDefaultClosedIcon() {
|
|
3254
3405
|
if (this.options.rtl) {
|
|
3255
3406
|
// triangle to the left
|
|
3256
3407
|
return "◀";
|
|
@@ -3259,7 +3410,7 @@ var jqtree = (function (exports) {
|
|
|
3259
3410
|
return "►";
|
|
3260
3411
|
}
|
|
3261
3412
|
}
|
|
3262
|
-
|
|
3413
|
+
_getNode(element) {
|
|
3263
3414
|
const liElement = element.closest("li.jqtree_common");
|
|
3264
3415
|
if (liElement) {
|
|
3265
3416
|
return jQuery(liElement).data("node");
|
|
@@ -3267,76 +3418,64 @@ var jqtree = (function (exports) {
|
|
|
3267
3418
|
return null;
|
|
3268
3419
|
}
|
|
3269
3420
|
}
|
|
3270
|
-
|
|
3271
|
-
const node = this.
|
|
3421
|
+
_getNodeElement(element) {
|
|
3422
|
+
const node = this._getNode(element);
|
|
3272
3423
|
if (node) {
|
|
3273
|
-
return this.
|
|
3424
|
+
return this._getNodeElementForNode(node);
|
|
3274
3425
|
} else {
|
|
3275
3426
|
return null;
|
|
3276
3427
|
}
|
|
3277
3428
|
}
|
|
3278
|
-
|
|
3429
|
+
_getNodeElementForNode(node) {
|
|
3279
3430
|
if (node.isFolder()) {
|
|
3280
|
-
return this.
|
|
3431
|
+
return this._createFolderElement(node);
|
|
3281
3432
|
} else {
|
|
3282
|
-
return this.
|
|
3433
|
+
return this._createNodeElement(node);
|
|
3283
3434
|
}
|
|
3284
3435
|
}
|
|
3285
|
-
|
|
3436
|
+
_getNodeIdToBeSelected() {
|
|
3286
3437
|
if (this.options.saveState) {
|
|
3287
|
-
return this.
|
|
3438
|
+
return this._saveStateHandler.getNodeIdToBeSelected();
|
|
3288
3439
|
} else {
|
|
3289
3440
|
return null;
|
|
3290
3441
|
}
|
|
3291
3442
|
}
|
|
3292
|
-
|
|
3293
|
-
if (this.options.rtl != null) {
|
|
3294
|
-
return this.options.rtl;
|
|
3295
|
-
} else {
|
|
3296
|
-
const dataRtl = this.element.data("rtl");
|
|
3297
|
-
if (dataRtl !== null && dataRtl !== false && dataRtl !== undefined) {
|
|
3298
|
-
return true;
|
|
3299
|
-
} else {
|
|
3300
|
-
return false;
|
|
3301
|
-
}
|
|
3302
|
-
}
|
|
3303
|
-
}
|
|
3304
|
-
initData() {
|
|
3443
|
+
_initData() {
|
|
3305
3444
|
if (this.options.data) {
|
|
3306
|
-
this.
|
|
3445
|
+
this._doLoadData(this.options.data, null);
|
|
3307
3446
|
} else {
|
|
3308
|
-
const dataUrl = this.
|
|
3447
|
+
const dataUrl = this._getDataUrlInfo(null);
|
|
3309
3448
|
if (dataUrl) {
|
|
3310
|
-
this.
|
|
3449
|
+
this._doLoadDataFromUrl(null, null, null);
|
|
3311
3450
|
} else {
|
|
3312
|
-
this.
|
|
3451
|
+
this._doLoadData([], null);
|
|
3313
3452
|
}
|
|
3314
3453
|
}
|
|
3315
3454
|
}
|
|
3316
|
-
|
|
3455
|
+
_initTree(data) {
|
|
3317
3456
|
const doInit = () => {
|
|
3318
|
-
if (!this.
|
|
3319
|
-
this.
|
|
3320
|
-
this.
|
|
3457
|
+
if (!this._isInitialized) {
|
|
3458
|
+
this._isInitialized = true;
|
|
3459
|
+
this._triggerEvent("tree.init");
|
|
3321
3460
|
}
|
|
3322
3461
|
};
|
|
3323
|
-
this.
|
|
3324
|
-
this.
|
|
3325
|
-
this.
|
|
3326
|
-
const mustLoadOnDemand = this.
|
|
3327
|
-
this.
|
|
3462
|
+
this._tree = new this.options.nodeClass(null, true, this.options.nodeClass);
|
|
3463
|
+
this._selectNodeHandler.clear();
|
|
3464
|
+
this._tree.loadFromData(data);
|
|
3465
|
+
const mustLoadOnDemand = this._setInitialState();
|
|
3466
|
+
this._refreshElements(null);
|
|
3328
3467
|
if (!mustLoadOnDemand) {
|
|
3329
3468
|
doInit();
|
|
3330
3469
|
} else {
|
|
3331
3470
|
// Load data on demand and then init the tree
|
|
3332
|
-
this.
|
|
3471
|
+
this._setInitialStateOnDemand(doInit);
|
|
3333
3472
|
}
|
|
3334
3473
|
}
|
|
3335
|
-
|
|
3474
|
+
_isFocusOnTree() {
|
|
3336
3475
|
const activeElement = document.activeElement;
|
|
3337
|
-
return activeElement?.tagName === "SPAN" && this.
|
|
3476
|
+
return activeElement?.tagName === "SPAN" && this._containsElement(activeElement);
|
|
3338
3477
|
}
|
|
3339
|
-
|
|
3478
|
+
_isSelectedNodeInSubtree(subtree) {
|
|
3340
3479
|
const selectedNode = this.getSelectedNode();
|
|
3341
3480
|
if (!selectedNode) {
|
|
3342
3481
|
return false;
|
|
@@ -3344,60 +3483,60 @@ var jqtree = (function (exports) {
|
|
|
3344
3483
|
return subtree === selectedNode || subtree.isParentOf(selectedNode);
|
|
3345
3484
|
}
|
|
3346
3485
|
}
|
|
3347
|
-
|
|
3486
|
+
_loadFolderOnDemand(node, slide = true, onFinished) {
|
|
3348
3487
|
node.is_loading = true;
|
|
3349
|
-
this.
|
|
3350
|
-
this.
|
|
3488
|
+
this._doLoadDataFromUrl(null, node, () => {
|
|
3489
|
+
this._openNodeInternal(node, slide, onFinished);
|
|
3351
3490
|
});
|
|
3352
3491
|
}
|
|
3353
|
-
|
|
3492
|
+
_loadSubtree(data, parentNode) {
|
|
3354
3493
|
parentNode.loadFromData(data);
|
|
3355
3494
|
parentNode.load_on_demand = false;
|
|
3356
3495
|
parentNode.is_loading = false;
|
|
3357
|
-
this.
|
|
3496
|
+
this._refreshElements(parentNode);
|
|
3358
3497
|
}
|
|
3359
|
-
|
|
3498
|
+
_mouseCapture(positionInfo) {
|
|
3360
3499
|
if (this.options.dragAndDrop) {
|
|
3361
|
-
return this.
|
|
3500
|
+
return this._dndHandler.mouseCapture(positionInfo);
|
|
3362
3501
|
} else {
|
|
3363
3502
|
return false;
|
|
3364
3503
|
}
|
|
3365
3504
|
}
|
|
3366
|
-
|
|
3505
|
+
_mouseDrag(positionInfo) {
|
|
3367
3506
|
if (this.options.dragAndDrop) {
|
|
3368
|
-
const result = this.
|
|
3369
|
-
this.
|
|
3507
|
+
const result = this._dndHandler.mouseDrag(positionInfo);
|
|
3508
|
+
this._scrollHandler.checkScrolling(positionInfo);
|
|
3370
3509
|
return result;
|
|
3371
3510
|
} else {
|
|
3372
3511
|
return false;
|
|
3373
3512
|
}
|
|
3374
3513
|
}
|
|
3375
|
-
|
|
3514
|
+
_mouseStart(positionInfo) {
|
|
3376
3515
|
if (this.options.dragAndDrop) {
|
|
3377
|
-
return this.
|
|
3516
|
+
return this._dndHandler.mouseStart(positionInfo);
|
|
3378
3517
|
} else {
|
|
3379
3518
|
return false;
|
|
3380
3519
|
}
|
|
3381
3520
|
}
|
|
3382
|
-
|
|
3521
|
+
_mouseStop(positionInfo) {
|
|
3383
3522
|
if (this.options.dragAndDrop) {
|
|
3384
|
-
this.
|
|
3385
|
-
return this.
|
|
3523
|
+
this._scrollHandler.stopScrolling();
|
|
3524
|
+
return this._dndHandler.mouseStop(positionInfo);
|
|
3386
3525
|
} else {
|
|
3387
3526
|
return false;
|
|
3388
3527
|
}
|
|
3389
3528
|
}
|
|
3390
|
-
|
|
3529
|
+
_openNodeInternal(node, slide = true, onFinished) {
|
|
3391
3530
|
const doOpenNode = (_node, _slide, _onFinished) => {
|
|
3392
3531
|
if (!node.children.length) {
|
|
3393
3532
|
return;
|
|
3394
3533
|
}
|
|
3395
|
-
const folderElement = this.
|
|
3534
|
+
const folderElement = this._createFolderElement(_node);
|
|
3396
3535
|
folderElement.open(_onFinished, _slide, this.options.animationSpeed);
|
|
3397
3536
|
};
|
|
3398
3537
|
if (node.isFolder() || node.isEmptyFolder) {
|
|
3399
3538
|
if (node.load_on_demand) {
|
|
3400
|
-
this.
|
|
3539
|
+
this._loadFolderOnDemand(node, slide, onFinished);
|
|
3401
3540
|
} else {
|
|
3402
3541
|
let parent = node.parent;
|
|
3403
3542
|
while (parent) {
|
|
@@ -3408,11 +3547,11 @@ var jqtree = (function (exports) {
|
|
|
3408
3547
|
parent = parent.parent;
|
|
3409
3548
|
}
|
|
3410
3549
|
doOpenNode(node, slide, onFinished);
|
|
3411
|
-
this.
|
|
3550
|
+
this._saveState();
|
|
3412
3551
|
}
|
|
3413
3552
|
}
|
|
3414
3553
|
}
|
|
3415
|
-
|
|
3554
|
+
_openParents(node) {
|
|
3416
3555
|
const parent = node.parent;
|
|
3417
3556
|
if (parent?.parent && !parent.is_open) {
|
|
3418
3557
|
this.openNode(parent, false);
|
|
@@ -3423,41 +3562,41 @@ var jqtree = (function (exports) {
|
|
|
3423
3562
|
Redraw the tree or part of the tree.
|
|
3424
3563
|
from_node: redraw this subtree
|
|
3425
3564
|
*/
|
|
3426
|
-
|
|
3427
|
-
const mustSetFocus = this.
|
|
3428
|
-
const mustSelect = fromNode ? this.
|
|
3429
|
-
this.
|
|
3565
|
+
_refreshElements(fromNode) {
|
|
3566
|
+
const mustSetFocus = this._isFocusOnTree();
|
|
3567
|
+
const mustSelect = fromNode ? this._isSelectedNodeInSubtree(fromNode) : false;
|
|
3568
|
+
this._renderer.render(fromNode);
|
|
3430
3569
|
if (mustSelect) {
|
|
3431
|
-
this.
|
|
3570
|
+
this._selectCurrentNode(mustSetFocus);
|
|
3432
3571
|
}
|
|
3433
|
-
this.
|
|
3572
|
+
this._triggerEvent("tree.refresh");
|
|
3434
3573
|
}
|
|
3435
|
-
|
|
3574
|
+
_saveState() {
|
|
3436
3575
|
if (this.options.saveState) {
|
|
3437
|
-
this.
|
|
3576
|
+
this._saveStateHandler.saveState();
|
|
3438
3577
|
}
|
|
3439
3578
|
}
|
|
3440
|
-
|
|
3579
|
+
_selectCurrentNode(mustSetFocus) {
|
|
3441
3580
|
const node = this.getSelectedNode();
|
|
3442
3581
|
if (node) {
|
|
3443
|
-
const nodeElement = this.
|
|
3582
|
+
const nodeElement = this._getNodeElementForNode(node);
|
|
3444
3583
|
nodeElement.select(mustSetFocus);
|
|
3445
3584
|
}
|
|
3446
3585
|
}
|
|
3447
3586
|
|
|
3448
3587
|
// Set initial state, either by restoring the state or auto-opening nodes
|
|
3449
3588
|
// result: must load nodes on demand?
|
|
3450
|
-
|
|
3589
|
+
_setInitialState() {
|
|
3451
3590
|
const restoreState = () => {
|
|
3452
3591
|
// result: is state restored, must load on demand?
|
|
3453
3592
|
if (!this.options.saveState) {
|
|
3454
3593
|
return [false, false];
|
|
3455
3594
|
} else {
|
|
3456
|
-
const state = this.
|
|
3595
|
+
const state = this._saveStateHandler.getStateFromStorage();
|
|
3457
3596
|
if (!state) {
|
|
3458
3597
|
return [false, false];
|
|
3459
3598
|
} else {
|
|
3460
|
-
const mustLoadOnDemand = this.
|
|
3599
|
+
const mustLoadOnDemand = this._saveStateHandler.setInitialState(state);
|
|
3461
3600
|
|
|
3462
3601
|
// return true: the state is restored
|
|
3463
3602
|
return [true, mustLoadOnDemand];
|
|
@@ -3469,9 +3608,9 @@ var jqtree = (function (exports) {
|
|
|
3469
3608
|
if (this.options.autoOpen === false) {
|
|
3470
3609
|
return false;
|
|
3471
3610
|
}
|
|
3472
|
-
const maxLevel = this.
|
|
3611
|
+
const maxLevel = this._getAutoOpenMaxLevel();
|
|
3473
3612
|
let mustLoadOnDemand = false;
|
|
3474
|
-
this.
|
|
3613
|
+
this._tree.iterate((node, level) => {
|
|
3475
3614
|
if (node.load_on_demand) {
|
|
3476
3615
|
mustLoadOnDemand = true;
|
|
3477
3616
|
return false;
|
|
@@ -3494,39 +3633,39 @@ var jqtree = (function (exports) {
|
|
|
3494
3633
|
|
|
3495
3634
|
// Set the initial state for nodes that are loaded on demand
|
|
3496
3635
|
// Call cb_finished when done
|
|
3497
|
-
|
|
3636
|
+
_setInitialStateOnDemand(cbFinished) {
|
|
3498
3637
|
const restoreState = () => {
|
|
3499
3638
|
if (!this.options.saveState) {
|
|
3500
3639
|
return false;
|
|
3501
3640
|
} else {
|
|
3502
|
-
const state = this.
|
|
3641
|
+
const state = this._saveStateHandler.getStateFromStorage();
|
|
3503
3642
|
if (!state) {
|
|
3504
3643
|
return false;
|
|
3505
3644
|
} else {
|
|
3506
|
-
this.
|
|
3645
|
+
this._saveStateHandler.setInitialStateOnDemand(state, cbFinished);
|
|
3507
3646
|
return true;
|
|
3508
3647
|
}
|
|
3509
3648
|
}
|
|
3510
3649
|
};
|
|
3511
3650
|
const autoOpenNodes = () => {
|
|
3512
|
-
const maxLevel = this.
|
|
3651
|
+
const maxLevel = this._getAutoOpenMaxLevel();
|
|
3513
3652
|
let loadingCount = 0;
|
|
3514
3653
|
const loadAndOpenNode = node => {
|
|
3515
3654
|
loadingCount += 1;
|
|
3516
|
-
this.
|
|
3655
|
+
this._openNodeInternal(node, false, () => {
|
|
3517
3656
|
loadingCount -= 1;
|
|
3518
3657
|
openNodes();
|
|
3519
3658
|
});
|
|
3520
3659
|
};
|
|
3521
3660
|
const openNodes = () => {
|
|
3522
|
-
this.
|
|
3661
|
+
this._tree.iterate((node, level) => {
|
|
3523
3662
|
if (node.load_on_demand) {
|
|
3524
3663
|
if (!node.is_loading) {
|
|
3525
3664
|
loadAndOpenNode(node);
|
|
3526
3665
|
}
|
|
3527
3666
|
return false;
|
|
3528
3667
|
} else {
|
|
3529
|
-
this.
|
|
3668
|
+
this._openNodeInternal(node, false);
|
|
3530
3669
|
return level !== maxLevel;
|
|
3531
3670
|
}
|
|
3532
3671
|
});
|
|
@@ -3540,10 +3679,10 @@ var jqtree = (function (exports) {
|
|
|
3540
3679
|
autoOpenNodes();
|
|
3541
3680
|
}
|
|
3542
3681
|
}
|
|
3543
|
-
|
|
3682
|
+
_triggerEvent(eventName, values) {
|
|
3544
3683
|
const event = jQuery.Event(eventName, values);
|
|
3545
|
-
this.
|
|
3546
|
-
return event;
|
|
3684
|
+
this._element.trigger(event);
|
|
3685
|
+
return !event.isDefaultPrevented();
|
|
3547
3686
|
}
|
|
3548
3687
|
}
|
|
3549
3688
|
SimpleWidget.register(JqTreeWidget, "tree");
|