tree-element 0.1.0 → 0.2.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/README.md +49 -29
- package/lib/animation.js +5 -5
- package/lib/animation.js.map +1 -1
- package/lib/classNames.d.ts.map +1 -1
- package/lib/classNames.js +2 -2
- package/lib/classNames.js.map +1 -1
- package/lib/dataLoader.d.ts.map +1 -1
- package/lib/dataLoader.js +18 -21
- package/lib/dataLoader.js.map +1 -1
- package/lib/dragAndDropHandler/binarySearch.js +3 -3
- package/lib/dragAndDropHandler/binarySearch.js.map +1 -1
- package/lib/dragAndDropHandler/dragElement.d.ts.map +1 -1
- package/lib/dragAndDropHandler/dragElement.js +9 -12
- package/lib/dragAndDropHandler/dragElement.js.map +1 -1
- package/lib/dragAndDropHandler/generateHitAreas.d.ts.map +1 -1
- package/lib/dragAndDropHandler/generateHitAreas.js +25 -25
- package/lib/dragAndDropHandler/generateHitAreas.js.map +1 -1
- package/lib/dragAndDropHandler/index.d.ts.map +1 -1
- package/lib/dragAndDropHandler/index.js +90 -114
- package/lib/dragAndDropHandler/index.js.map +1 -1
- package/lib/dragAndDropHandler/iterateVisibleNodes.d.ts.map +1 -1
- package/lib/dragAndDropHandler/iterateVisibleNodes.js +10 -10
- package/lib/dragAndDropHandler/iterateVisibleNodes.js.map +1 -1
- package/lib/dragAndDropHandler/types.d.ts.map +1 -1
- package/lib/elementsRenderer.d.ts +15 -6
- package/lib/elementsRenderer.d.ts.map +1 -1
- package/lib/elementsRenderer.js +157 -121
- package/lib/elementsRenderer.js.map +1 -1
- package/lib/events.d.ts +11 -4
- package/lib/events.d.ts.map +1 -1
- package/lib/index.d.ts +5 -5
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +249 -252
- package/lib/index.js.map +1 -1
- package/lib/keyHandler.d.ts +2 -3
- package/lib/keyHandler.d.ts.map +1 -1
- package/lib/keyHandler.js +26 -25
- package/lib/keyHandler.js.map +1 -1
- package/lib/methodTypes.d.ts +1 -1
- package/lib/methodTypes.d.ts.map +1 -1
- package/lib/mouseHandler.d.ts.map +1 -1
- package/lib/mouseHandler.js +26 -42
- package/lib/mouseHandler.js.map +1 -1
- package/lib/mouseUtils.d.ts.map +1 -1
- package/lib/mouseUtils.js +2 -2
- package/lib/mouseUtils.js.map +1 -1
- package/lib/node.d.ts +2 -1
- package/lib/node.d.ts.map +1 -1
- package/lib/node.js +36 -35
- package/lib/node.js.map +1 -1
- package/lib/nodeElement/borderDropHint.d.ts.map +1 -1
- package/lib/nodeElement/borderDropHint.js +4 -5
- package/lib/nodeElement/borderDropHint.js.map +1 -1
- package/lib/nodeElement/folderElement.d.ts +7 -4
- package/lib/nodeElement/folderElement.d.ts.map +1 -1
- package/lib/nodeElement/folderElement.js +61 -42
- package/lib/nodeElement/folderElement.js.map +1 -1
- package/lib/nodeElement/ghostDropHint.d.ts.map +1 -1
- package/lib/nodeElement/ghostDropHint.js +5 -9
- package/lib/nodeElement/ghostDropHint.js.map +1 -1
- package/lib/nodeElement/index.d.ts +2 -1
- package/lib/nodeElement/index.d.ts.map +1 -1
- package/lib/nodeElement/index.js +34 -26
- package/lib/nodeElement/index.js.map +1 -1
- package/lib/nodeUtils.d.ts.map +1 -1
- package/lib/nodeUtils.js +1 -1
- package/lib/nodeUtils.js.map +1 -1
- package/lib/options.d.ts.map +1 -1
- package/lib/positionUtils.js +3 -3
- package/lib/positionUtils.js.map +1 -1
- package/lib/requestUrl.d.ts +1 -1
- package/lib/requestUrl.d.ts.map +1 -1
- package/lib/requestUrl.js +4 -6
- package/lib/requestUrl.js.map +1 -1
- package/lib/saveStateHandler.d.ts.map +1 -1
- package/lib/saveStateHandler.js +38 -48
- package/lib/saveStateHandler.js.map +1 -1
- package/lib/scrollHandler/containerScrollParent.d.ts.map +1 -1
- package/lib/scrollHandler/containerScrollParent.js +9 -11
- package/lib/scrollHandler/containerScrollParent.js.map +1 -1
- package/lib/scrollHandler/createScrollParent.d.ts.map +1 -1
- package/lib/scrollHandler/createScrollParent.js +10 -10
- package/lib/scrollHandler/createScrollParent.js.map +1 -1
- package/lib/scrollHandler/documentScrollParent.d.ts.map +1 -1
- package/lib/scrollHandler/documentScrollParent.js +16 -19
- package/lib/scrollHandler/documentScrollParent.js.map +1 -1
- package/lib/scrollHandler/scrollParent.d.ts.map +1 -1
- package/lib/scrollHandler/scrollParent.js +11 -17
- package/lib/scrollHandler/scrollParent.js.map +1 -1
- package/lib/scrollHandler.d.ts.map +1 -1
- package/lib/scrollHandler.js +11 -14
- package/lib/scrollHandler.js.map +1 -1
- package/lib/selectNodeHandler.d.ts +2 -2
- package/lib/selectNodeHandler.d.ts.map +1 -1
- package/lib/selectNodeHandler.js +45 -54
- package/lib/selectNodeHandler.js.map +1 -1
- package/lib/setDefaultOptions.d.ts.map +1 -1
- package/lib/setDefaultOptions.js +23 -28
- package/lib/setDefaultOptions.js.map +1 -1
- package/lib/triggerCustomEvent.d.ts.map +1 -1
- package/lib/triggerCustomEvent.js +2 -2
- package/lib/triggerCustomEvent.js.map +1 -1
- package/lib/util.d.ts.map +1 -1
- package/lib/util.js +2 -2
- package/lib/util.js.map +1 -1
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/lib/version.js.map +1 -1
- package/package.json +7 -3
- package/src/animation.ts +1 -1
- package/src/classNames.ts +52 -52
- package/src/dataLoader.ts +68 -70
- package/src/dragAndDropHandler/binarySearch.ts +17 -17
- package/src/dragAndDropHandler/dragElement.ts +50 -50
- package/src/dragAndDropHandler/generateHitAreas.ts +156 -161
- package/src/dragAndDropHandler/index.ts +342 -351
- package/src/dragAndDropHandler/iterateVisibleNodes.ts +59 -63
- package/src/dragAndDropHandler/types.ts +5 -5
- package/src/elementsRenderer.ts +351 -298
- package/src/events.ts +216 -209
- package/src/header.txt +1 -1
- package/src/index.ts +52 -82
- package/src/keyHandler.ts +125 -115
- package/src/methodTypes.ts +4 -7
- package/src/mouseHandler.ts +314 -317
- package/src/mouseUtils.ts +14 -14
- package/src/node.ts +761 -766
- package/src/nodeElement/borderDropHint.ts +25 -25
- package/src/nodeElement/folderElement.ts +135 -112
- package/src/nodeElement/ghostDropHint.ts +62 -62
- package/src/nodeElement/index.ts +88 -74
- package/src/nodeUtils.ts +5 -5
- package/src/options.ts +6 -2
- package/src/requestUrl.ts +3 -3
- package/src/saveStateHandler.ts +204 -206
- package/src/scrollHandler/containerScrollParent.ts +49 -52
- package/src/scrollHandler/createScrollParent.ts +27 -27
- package/src/scrollHandler/documentScrollParent.ts +70 -70
- package/src/scrollHandler/scrollParent.ts +98 -98
- package/src/scrollHandler.ts +45 -45
- package/src/selectNodeHandler.ts +176 -166
- package/src/setDefaultOptions.ts +25 -22
- package/src/triggerCustomEvent.ts +7 -3
- package/src/util.ts +2 -2
- package/src/version.ts +1 -1
- package/tree_element.debug.js +3770 -3799
- package/tree_element.debug.js.map +1 -1
- package/tree_element.js +2 -2
- package/tree_element.js.map +1 -1
package/lib/setDefaultOptions.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { DEFAULT_CLASS_PREFIX } from './classNames.js';
|
|
2
2
|
import { Node } from './node.js';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
let defaults = {
|
|
5
5
|
animationSpeed: "fast",
|
|
6
6
|
autoEscape: true,
|
|
7
7
|
autoOpen: false,
|
|
@@ -11,33 +11,29 @@ const defaults = {
|
|
|
11
11
|
// the prefix of all css classes
|
|
12
12
|
// The symbol to use for a closed node - ► BLACK RIGHT-POINTING POINTER
|
|
13
13
|
// http://www.fileformat.info/info/unicode/char/25ba/index.htm
|
|
14
|
-
closedIcon: undefined,
|
|
15
|
-
commonClassName: undefined,
|
|
16
|
-
//
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
dataUrl: undefined,
|
|
14
|
+
// closedIcon: undefined,
|
|
15
|
+
// commonClassName: undefined, // the class of every element; the default is "<classPrefix>-common"
|
|
16
|
+
// data: undefined,
|
|
17
|
+
// dataFilter: undefined,
|
|
18
|
+
// dataUrl: undefined,
|
|
20
19
|
dragAndDrop: false,
|
|
21
20
|
keyboardSupport: true,
|
|
22
21
|
nodeClass: Node,
|
|
23
|
-
onCanMove: undefined,
|
|
24
|
-
// Can this node be moved?
|
|
25
|
-
|
|
26
|
-
//
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
onSetStateFromStorage: undefined,
|
|
34
|
-
openedIcon: undefined,
|
|
22
|
+
// onCanMove: undefined, // Can this node be moved?
|
|
23
|
+
// onCanMoveTo: undefined, // Can this node be moved to this position? function(moved_node, target_node, position)
|
|
24
|
+
// onCanSelectNode: undefined,
|
|
25
|
+
// onCreateLi: undefined,
|
|
26
|
+
// onDragMove: undefined,
|
|
27
|
+
// onDragStop: undefined,
|
|
28
|
+
// onGetStateFromStorage: undefined,
|
|
29
|
+
// onIsMoveHandle: undefined,
|
|
30
|
+
// onSetStateFromStorage: undefined,
|
|
31
|
+
// openedIcon: undefined,
|
|
35
32
|
openFolderDelay: 500,
|
|
36
33
|
// The delay for opening a folder during drag and drop; the value is in milliseconds
|
|
37
34
|
// The symbol to use for an open node - ▼ BLACK DOWN-POINTING TRIANGLE
|
|
38
35
|
// http://www.fileformat.info/info/unicode/char/25bc/index.htm
|
|
39
|
-
rtl: undefined,
|
|
40
|
-
// right-to-left support; true / false (default)
|
|
36
|
+
// rtl: undefined, // right-to-left support; true / false (default)
|
|
41
37
|
saveState: false,
|
|
42
38
|
// true / false / string (local storage key; the default key is "tree")
|
|
43
39
|
selectable: true,
|
|
@@ -47,12 +43,11 @@ const defaults = {
|
|
|
47
43
|
startDndDelay: 300,
|
|
48
44
|
// The delay for starting dnd (in milliseconds)
|
|
49
45
|
tabIndex: 0,
|
|
50
|
-
treeClassName: undefined,
|
|
51
|
-
// the class of the root element; the default is classPrefix
|
|
46
|
+
// treeClassName: undefined, // the class of the root element; the default is classPrefix
|
|
52
47
|
useContextMenu: true
|
|
53
48
|
};
|
|
54
|
-
|
|
55
|
-
|
|
49
|
+
let setDefaultOptions = (htmlElement, inputOptions) => {
|
|
50
|
+
let options = {
|
|
56
51
|
...defaults,
|
|
57
52
|
...inputOptions
|
|
58
53
|
};
|
|
@@ -62,7 +57,7 @@ const setDefaultOptions = (htmlElement, inputOptions) => {
|
|
|
62
57
|
options.openedIcon ??= "▼";
|
|
63
58
|
return options;
|
|
64
59
|
};
|
|
65
|
-
|
|
60
|
+
let getDefaultClosedIcon = options => {
|
|
66
61
|
if (options.rtl) {
|
|
67
62
|
// triangle to the left
|
|
68
63
|
return "◀";
|
|
@@ -71,8 +66,8 @@ const getDefaultClosedIcon = options => {
|
|
|
71
66
|
return "►";
|
|
72
67
|
}
|
|
73
68
|
};
|
|
74
|
-
|
|
75
|
-
|
|
69
|
+
let getRtlOptionFromHTMLElement = htmlElement => {
|
|
70
|
+
let dataRtl = htmlElement.dataset.rtl;
|
|
76
71
|
if (dataRtl == "") {
|
|
77
72
|
return true;
|
|
78
73
|
} else if (dataRtl === "false") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"setDefaultOptions.js","sources":["../src/setDefaultOptions.ts"],"sourcesContent":["import type { TreeElementOptions } from \"./options\";\n\nimport { DEFAULT_CLASS_PREFIX } from \"./classNames\";\nimport { Node } from \"./node\";\n\nconst defaults: TreeElementOptions = {\n animationSpeed: \"fast\",\n autoEscape: true,\n autoOpen: false, // true / false / int (open n levels starting at 0)\n buttonLeft: true,\n classPrefix: DEFAULT_CLASS_PREFIX, // the prefix of all css classes\n // The symbol to use for a closed node - ► BLACK RIGHT-POINTING POINTER\n // http://www.fileformat.info/info/unicode/char/25ba/index.htm\n closedIcon: undefined,\n commonClassName: undefined, // the class of every element; the default is \"<classPrefix>-common\"\n data: undefined,\n dataFilter: undefined,\n dataUrl: undefined,\n dragAndDrop: false,\n keyboardSupport: true,\n nodeClass: Node,\n onCanMove: undefined, // Can this node be moved?\n onCanMoveTo: undefined, // Can this node be moved to this position? function(moved_node, target_node, position)\n onCanSelectNode: undefined,\n onCreateLi: undefined,\n onDragMove: undefined,\n onDragStop: undefined,\n onGetStateFromStorage: undefined,\n onIsMoveHandle: undefined,\n onSetStateFromStorage: undefined,\n openedIcon: undefined,\n openFolderDelay: 500, // The delay for opening a folder during drag and drop; the value is in milliseconds\n // The symbol to use for an open node - ▼ BLACK DOWN-POINTING TRIANGLE\n // http://www.fileformat.info/info/unicode/char/25bc/index.htm\n rtl: undefined, // right-to-left support; true / false (default)\n saveState: false, // true / false / string (local storage key; the default key is \"tree\")\n selectable: true,\n showEmptyFolder: false,\n slide: true, // must display slide animation?\n startDndDelay: 300, // The delay for starting dnd (in milliseconds)\n tabIndex: 0,\n treeClassName: undefined, // the class of the root element; the default is classPrefix\n useContextMenu: true,\n};\n\nconst setDefaultOptions = (htmlElement: HTMLElement
|
|
1
|
+
{"version":3,"file":"setDefaultOptions.js","sources":["../src/setDefaultOptions.ts"],"sourcesContent":["import type { TreeElementOptions } from \"./options\";\n\nimport { DEFAULT_CLASS_PREFIX } from \"./classNames\";\nimport { Node } from \"./node\";\n\nconst defaults: TreeElementOptions = {\n animationSpeed: \"fast\",\n autoEscape: true,\n autoOpen: false, // true / false / int (open n levels starting at 0)\n buttonLeft: true,\n classPrefix: DEFAULT_CLASS_PREFIX, // the prefix of all css classes\n // The symbol to use for a closed node - ► BLACK RIGHT-POINTING POINTER\n // http://www.fileformat.info/info/unicode/char/25ba/index.htm\n // closedIcon: undefined,\n // commonClassName: undefined, // the class of every element; the default is \"<classPrefix>-common\"\n // data: undefined,\n // dataFilter: undefined,\n // dataUrl: undefined,\n dragAndDrop: false,\n keyboardSupport: true,\n nodeClass: Node,\n // onCanMove: undefined, // Can this node be moved?\n // onCanMoveTo: undefined, // Can this node be moved to this position? function(moved_node, target_node, position)\n // onCanSelectNode: undefined,\n // onCreateLi: undefined,\n // onDragMove: undefined,\n // onDragStop: undefined,\n // onGetStateFromStorage: undefined,\n // onIsMoveHandle: undefined,\n // onSetStateFromStorage: undefined,\n // openedIcon: undefined,\n openFolderDelay: 500, // The delay for opening a folder during drag and drop; the value is in milliseconds\n // The symbol to use for an open node - ▼ BLACK DOWN-POINTING TRIANGLE\n // http://www.fileformat.info/info/unicode/char/25bc/index.htm\n // rtl: undefined, // right-to-left support; true / false (default)\n saveState: false, // true / false / string (local storage key; the default key is \"tree\")\n selectable: true,\n showEmptyFolder: false,\n slide: true, // must display slide animation?\n startDndDelay: 300, // The delay for starting dnd (in milliseconds)\n tabIndex: 0,\n // treeClassName: undefined, // the class of the root element; the default is classPrefix\n useContextMenu: true,\n};\n\nconst setDefaultOptions = (\n htmlElement: HTMLElement,\n inputOptions: Partial<TreeElementOptions>,\n): TreeElementOptions => {\n const options = { ...defaults, ...inputOptions };\n\n options.dataUrl ??= htmlElement.dataset.url;\n options.rtl ??= getRtlOptionFromHTMLElement(htmlElement);\n options.closedIcon ??= getDefaultClosedIcon(options);\n options.openedIcon ??= \"▼\";\n\n return options;\n};\n\nconst getDefaultClosedIcon = (options: TreeElementOptions): string => {\n if (options.rtl) {\n // triangle to the left\n return \"◀\";\n } else {\n // triangle to the right\n return \"►\";\n }\n};\n\nconst getRtlOptionFromHTMLElement = (htmlElement: HTMLElement): boolean => {\n const dataRtl = htmlElement.dataset.rtl;\n\n if (dataRtl == \"\") {\n return true;\n } else if (dataRtl === \"false\") {\n return false;\n } else {\n return Boolean(dataRtl);\n }\n};\n\nexport default setDefaultOptions;\n"],"names":[],"mappings":";;;AAKA,IAAM,QAA4B,GAAG;AACnC,EAAA,cAAc,EAAE,MAAM;AACtB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,QAAQ,EAAE,KAAK;AAAE;AACjB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,WAAW,EAAE,oBAAoB;AAAE;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,WAAW,EAAE,KAAK;AAClB,EAAA,eAAe,EAAE,IAAI;AACrB,EAAA,SAAS,EAAE,IAAI;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,eAAe,EAAE,GAAG;AAAE;AACtB;AACA;AACA;AACA,EAAA,SAAS,EAAE,KAAK;AAAE;AAClB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,eAAe,EAAE,KAAK;AACtB,EAAA,KAAK,EAAE,IAAI;AAAE;AACb,EAAA,aAAa,EAAE,GAAG;AAAE;AACpB,EAAA,QAAQ,EAAE,CAAC;AACX;AACA,EAAA,cAAc,EAAE;AAClB,CAAC;AAED,IAAM,iBAAiB,GAAG,CACxB,WAAwB,EACxB,YAAyC,KAClB;AACvB,EAAA,IAAM,OAAO,GAAG;AAAE,IAAA,GAAG,QAAQ;IAAE,GAAG;GAAc;AAEhD,EAAA,OAAO,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,CAAC,GAAG;AAC3C,EAAA,OAAO,CAAC,GAAG,KAAK,2BAA2B,CAAC,WAAW,CAAC;AACxD,EAAA,OAAO,CAAC,UAAU,KAAK,oBAAoB,CAAC,OAAO,CAAC;EACpD,OAAO,CAAC,UAAU,KAAK,UAAU;AAEjC,EAAA,OAAO,OAAO;AAChB;AAEA,IAAM,oBAAoB,GAAI,OAA2B,IAAa;EACpE,IAAI,OAAO,CAAC,GAAG,EAAE;AACf;AACA,IAAA,OAAO,UAAU;AACnB,EAAA,CAAC,MAAM;AACL;AACA,IAAA,OAAO,UAAU;AACnB,EAAA;AACF,CAAC;AAED,IAAM,2BAA2B,GAAI,WAAwB,IAAc;AACzE,EAAA,IAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,GAAG;EAEvC,IAAI,OAAO,IAAI,EAAE,EAAE;AACjB,IAAA,OAAO,IAAI;AACb,EAAA,CAAC,MAAM,IAAI,OAAO,KAAK,OAAO,EAAE;AAC9B,IAAA,OAAO,KAAK;AACd,EAAA,CAAC,MAAM;IACL,OAAO,OAAO,CAAC,OAAO,CAAC;AACzB,EAAA;AACF,CAAC;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"triggerCustomEvent.d.ts","sourceRoot":"","sources":["../src/triggerCustomEvent.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"triggerCustomEvent.d.ts","sourceRoot":"","sources":["../src/triggerCustomEvent.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,kBAAkB,GACtB,SAAS,WAAW,EACpB,WAAW,MAAM,EACjB,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC/B,OAUF,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// Trigger a CustomEvent. Return if the event is processed (true) or cancelled (false).
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
let triggerCustomEvent = (element, eventName, values) => {
|
|
3
|
+
let event = new CustomEvent(eventName, {
|
|
4
4
|
bubbles: true,
|
|
5
5
|
cancelable: true,
|
|
6
6
|
detail: values
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"triggerCustomEvent.js","sources":["../src/triggerCustomEvent.ts"],"sourcesContent":["// Trigger a CustomEvent. Return if the event is processed (true) or cancelled (false).\nconst triggerCustomEvent = (element: HTMLElement
|
|
1
|
+
{"version":3,"file":"triggerCustomEvent.js","sources":["../src/triggerCustomEvent.ts"],"sourcesContent":["// Trigger a CustomEvent. Return if the event is processed (true) or cancelled (false).\nconst triggerCustomEvent = (\n element: HTMLElement,\n eventName: string,\n values?: Record<string, unknown>,\n): boolean => {\n const event = new CustomEvent(eventName, {\n bubbles: true,\n cancelable: true,\n detail: values,\n });\n\n element.dispatchEvent(event);\n\n return !event.defaultPrevented;\n};\n\nexport default triggerCustomEvent;\n"],"names":[],"mappings":"AAAA;AACA,IAAM,kBAAkB,GAAG,CACzB,OAAoB,EACpB,SAAiB,EACjB,MAAgC,KACpB;AACZ,EAAA,IAAM,KAAK,GAAG,IAAI,WAAW,CAAC,SAAS,EAAE;AACvC,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,UAAU,EAAE,IAAI;AAChB,IAAA,MAAM,EAAE;AACV,GAAC,CAAC;AAEF,EAAA,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC;EAE5B,OAAO,CAAC,KAAK,CAAC,gBAAgB;AAChC;;"}
|
package/lib/util.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,GAAI,GAAG,OAAO,KAAG,
|
|
1
|
+
{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,GAAI,GAAG,OAAO,KAAG,OACG,CAAC;AAEvC,eAAO,MAAM,aAAa,GAAI,OAAO,OAAO,KAAG,MACrB,CAAC"}
|
package/lib/util.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
let isInt = n => typeof n === "number" && n % 1 === 0;
|
|
2
|
+
let getBoolString = value => value ? "true" : "false";
|
|
3
3
|
|
|
4
4
|
export { getBoolString, isInt };
|
|
5
5
|
//# sourceMappingURL=util.js.map
|
package/lib/util.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"util.js","sources":["../src/util.ts"],"sourcesContent":["export const isInt = (n: unknown): boolean =>\n
|
|
1
|
+
{"version":3,"file":"util.js","sources":["../src/util.ts"],"sourcesContent":["export const isInt = (n: unknown): boolean =>\n typeof n === \"number\" && n % 1 === 0;\n\nexport const getBoolString = (value: unknown): string =>\n value ? \"true\" : \"false\";\n"],"names":[],"mappings":"AAAO,IAAM,KAAK,GAAI,CAAU,IAC9B,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,GAAG,CAAC,KAAK;AAE9B,IAAM,aAAa,GAAI,KAAc,IAC1C,KAAK,GAAG,MAAM,GAAG;;"}
|
package/lib/version.d.ts
CHANGED
package/lib/version.js
CHANGED
package/lib/version.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["// Generated by config/generateVersion.mjs. Do not edit.\nconst version = \"0.
|
|
1
|
+
{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["// Generated by config/generateVersion.mjs. Do not edit.\nconst version = \"0.2.0\";\n\nexport default version;\n"],"names":[],"mappings":"AAAA;AACA,IAAM,OAAO,GAAG;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tree-element",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Tree widget in plain javascript",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"tree"
|
|
@@ -35,7 +35,8 @@
|
|
|
35
35
|
},
|
|
36
36
|
"scripts": {
|
|
37
37
|
"ci": "pnpm lint && pnpm tsc && pnpm docs-check && pnpm test",
|
|
38
|
-
"
|
|
38
|
+
"build-debug": "DEBUG_BUILD=true rollup --config config/rollup.config.mjs",
|
|
39
|
+
"vitest": "pnpm build-debug && vitest run --coverage --config test/vitest.config.mjs",
|
|
39
40
|
"vitest-watch": "vitest --config test/vitest.config.mjs",
|
|
40
41
|
"lint": "eslint config src playwright test",
|
|
41
42
|
"production": "./config/production",
|
|
@@ -46,9 +47,11 @@
|
|
|
46
47
|
"docs-preview": "vitepress preview docs",
|
|
47
48
|
"devserver-with-coverage": "COVERAGE=true SERVE=true rollup --config config/rollup.config.mjs",
|
|
48
49
|
"build-with-coverage": "COVERAGE=true rollup --config config/rollup.config.mjs",
|
|
49
|
-
"prettier": "prettier src
|
|
50
|
+
"prettier": "prettier src/**/*.ts test/**/*.ts --write --tab-width 2",
|
|
50
51
|
"tsc": "tsc --noEmit --project tsconfig.json",
|
|
51
52
|
"version": "node config/generateVersion.mjs && git add src/version.ts",
|
|
53
|
+
"prepublishOnly": "pnpm run production",
|
|
54
|
+
"release": "node config/release.mjs",
|
|
52
55
|
"playwright": "pnpm build-with-coverage && playwright test --config playwright/playwright.config.js",
|
|
53
56
|
"test": "pnpm vitest && pnpm playwright",
|
|
54
57
|
"docs-check": "kiira check"
|
|
@@ -74,6 +77,7 @@
|
|
|
74
77
|
"autoprefixer": "^10.5.4",
|
|
75
78
|
"axe-core": "^4.13.0",
|
|
76
79
|
"babel-plugin-istanbul": "^8.0.0",
|
|
80
|
+
"babel-plugin-prefix-private-members": "^0.2.0",
|
|
77
81
|
"eslint": "^10",
|
|
78
82
|
"eslint-import-resolver-typescript": "^4.4.5",
|
|
79
83
|
"eslint-plugin-import-x": "^4.17.1",
|
package/src/animation.ts
CHANGED
package/src/classNames.ts
CHANGED
|
@@ -1,33 +1,33 @@
|
|
|
1
1
|
export interface ClassNames {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
2
|
+
border: string;
|
|
3
|
+
circle: string;
|
|
4
|
+
closed: string;
|
|
5
|
+
common: string;
|
|
6
|
+
dnd: string;
|
|
7
|
+
dragging: string;
|
|
8
|
+
element: string;
|
|
9
|
+
folder: string;
|
|
10
|
+
ghost: string;
|
|
11
|
+
inside: string;
|
|
12
|
+
line: string;
|
|
13
|
+
loading: string;
|
|
14
|
+
moving: string;
|
|
15
|
+
rtl: string;
|
|
16
|
+
selected: string;
|
|
17
|
+
title: string;
|
|
18
|
+
titleButtonLeft: string;
|
|
19
|
+
titleButtonRight: string;
|
|
20
|
+
titleFolder: string;
|
|
21
|
+
toggler: string;
|
|
22
|
+
togglerLeft: string;
|
|
23
|
+
togglerRight: string;
|
|
24
|
+
tree: string;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
export interface ClassNamesOptions {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
classPrefix: string;
|
|
29
|
+
commonClassName?: string;
|
|
30
|
+
treeClassName?: string;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
export const DEFAULT_CLASS_PREFIX = "tree-element";
|
|
@@ -38,33 +38,33 @@ export const DEFAULT_CLASS_PREFIX = "tree-element";
|
|
|
38
38
|
* their own.
|
|
39
39
|
*/
|
|
40
40
|
const createClassNames = ({
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
classPrefix,
|
|
42
|
+
commonClassName,
|
|
43
|
+
treeClassName,
|
|
44
44
|
}: ClassNamesOptions): ClassNames => ({
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
45
|
+
border: `${classPrefix}-border`,
|
|
46
|
+
circle: `${classPrefix}-circle`,
|
|
47
|
+
closed: `${classPrefix}-closed`,
|
|
48
|
+
common: commonClassName ?? `${classPrefix}-common`,
|
|
49
|
+
dnd: `${classPrefix}-dnd`,
|
|
50
|
+
dragging: `${classPrefix}-dragging`,
|
|
51
|
+
element: `${classPrefix}-element`,
|
|
52
|
+
folder: `${classPrefix}-folder`,
|
|
53
|
+
ghost: `${classPrefix}-ghost`,
|
|
54
|
+
inside: `${classPrefix}-inside`,
|
|
55
|
+
line: `${classPrefix}-line`,
|
|
56
|
+
loading: `${classPrefix}-loading`,
|
|
57
|
+
moving: `${classPrefix}-moving`,
|
|
58
|
+
rtl: `${classPrefix}-rtl`,
|
|
59
|
+
selected: `${classPrefix}-selected`,
|
|
60
|
+
title: `${classPrefix}-title`,
|
|
61
|
+
titleButtonLeft: `${classPrefix}-title-button-left`,
|
|
62
|
+
titleButtonRight: `${classPrefix}-title-button-right`,
|
|
63
|
+
titleFolder: `${classPrefix}-title-folder`,
|
|
64
|
+
toggler: `${classPrefix}-toggler`,
|
|
65
|
+
togglerLeft: `${classPrefix}-toggler-left`,
|
|
66
|
+
togglerRight: `${classPrefix}-toggler-right`,
|
|
67
|
+
tree: treeClassName ?? classPrefix,
|
|
68
68
|
});
|
|
69
69
|
|
|
70
70
|
export default createClassNames;
|
package/src/dataLoader.ts
CHANGED
|
@@ -5,88 +5,86 @@ import type { DataFilter } from "./options";
|
|
|
5
5
|
import type RequestUrl from "./requestUrl";
|
|
6
6
|
|
|
7
7
|
interface DataLoaderParams {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
classNames: ClassNames;
|
|
9
|
+
dataFilter?: DataFilter;
|
|
10
|
+
loadData: LoadData;
|
|
11
|
+
treeElement: HTMLElement;
|
|
12
|
+
triggerEvent: TriggerEvent;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
export default class DataLoader {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
16
|
+
private abortController: AbortController;
|
|
17
|
+
private classNames: ClassNames;
|
|
18
|
+
private dataFilter?: DataFilter;
|
|
19
|
+
private loadData: LoadData;
|
|
20
|
+
private treeElement: HTMLElement;
|
|
21
|
+
private triggerEvent: TriggerEvent;
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
23
|
+
constructor({
|
|
24
|
+
classNames,
|
|
25
|
+
dataFilter,
|
|
26
|
+
loadData,
|
|
27
|
+
treeElement,
|
|
28
|
+
triggerEvent,
|
|
29
|
+
}: DataLoaderParams) {
|
|
30
|
+
this.abortController = new AbortController();
|
|
31
|
+
this.classNames = classNames;
|
|
32
|
+
this.dataFilter = dataFilter;
|
|
33
|
+
this.loadData = loadData;
|
|
34
|
+
this.treeElement = treeElement;
|
|
35
|
+
this.triggerEvent = triggerEvent;
|
|
36
|
+
}
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
public deinit(): void {
|
|
39
|
+
this.abortController.abort();
|
|
40
|
+
}
|
|
41
41
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
): Promise<void> {
|
|
46
|
-
const element = node?.element ?? this.treeElement;
|
|
47
|
-
element.classList.add(this.classNames.loading);
|
|
42
|
+
public async loadFromUrl(url: RequestUrl, node?: Node): Promise<void> {
|
|
43
|
+
const element = node?.element ?? this.treeElement;
|
|
44
|
+
element.classList.add(this.classNames.loading);
|
|
48
45
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
46
|
+
this.triggerEvent("tree.loading_data", {
|
|
47
|
+
element,
|
|
48
|
+
node,
|
|
49
|
+
});
|
|
53
50
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
51
|
+
const stopLoading = (): void => {
|
|
52
|
+
element.classList.remove(this.classNames.loading);
|
|
53
|
+
this.triggerEvent("tree.loaded_data", {
|
|
54
|
+
element,
|
|
55
|
+
node,
|
|
56
|
+
});
|
|
57
|
+
};
|
|
61
58
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
59
|
+
const handleResponse = async (response: Response): Promise<void> => {
|
|
60
|
+
if (response.ok) {
|
|
61
|
+
const data = (await response.json()) as NodeData[];
|
|
65
62
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
);
|
|
71
|
-
} else {
|
|
72
|
-
stopLoading();
|
|
63
|
+
stopLoading();
|
|
64
|
+
this.loadData(this.dataFilter ? this.dataFilter(data) : data, node);
|
|
65
|
+
} else {
|
|
66
|
+
stopLoading();
|
|
73
67
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
68
|
+
this.triggerEvent("tree.load_failed", { response });
|
|
69
|
+
}
|
|
70
|
+
};
|
|
77
71
|
|
|
78
|
-
|
|
79
|
-
|
|
72
|
+
const signal = this.abortController.signal;
|
|
73
|
+
url.setSearchParam("_", Date.now().toString());
|
|
80
74
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
75
|
+
return fetch(url.value(), {
|
|
76
|
+
headers: { "Content-Type": "application/json" },
|
|
77
|
+
signal,
|
|
78
|
+
})
|
|
79
|
+
.then(handleResponse)
|
|
80
|
+
.catch((error: unknown) => {
|
|
81
|
+
if (this.abortController.signal.aborted) {
|
|
82
|
+
// The request was aborted by deinit.
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
88
85
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
86
|
+
stopLoading();
|
|
87
|
+
this.triggerEvent("tree.load_failed", { error });
|
|
88
|
+
});
|
|
89
|
+
}
|
|
92
90
|
}
|
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
function binarySearch<T>(items: T[], compareFn: (a: T) => number): null | T {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
let low = 0;
|
|
3
|
+
let high = items.length;
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
while (low < high) {
|
|
6
|
+
const mid = (low + high) >> 1;
|
|
7
|
+
const item = items[mid];
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
if (item === undefined) {
|
|
10
|
+
return null;
|
|
11
|
+
}
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
const compareResult = compareFn(item);
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
15
|
+
if (compareResult > 0) {
|
|
16
|
+
high = mid;
|
|
17
|
+
} else if (compareResult < 0) {
|
|
18
|
+
low = mid + 1;
|
|
19
|
+
} else {
|
|
20
|
+
return item;
|
|
22
21
|
}
|
|
22
|
+
}
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
return null;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
export default binarySearch;
|