Added an basic implementation of bootstrap-treeview in typescript

assets/controllers/elements/tree_controller.js

@@ -1,7 +1,9 @@
 import {Controller} from "@hotwired/stimulus";
 
-import "patternfly-bootstrap-treeview/src/css/bootstrap-treeview.css"
+import "../../js/lib/bootstrap-treeview/src/css/bootstrap-treeview.css"
-import "patternfly-bootstrap-treeview";
+//import "../../js/lib/bootstrap-treeview/src/js/bootstrap-treeview.js"
+
+import BSTreeView from "../../ts_src/BSTreeView";
 
 export default class extends Controller {
     static targets = [ "tree" ];
@@ -27,9 +29,9 @@ export default class extends Controller {
         //Fetch data and initialize tree
         this._getData()
             .then(this._fillTree.bind(this))
-            .catch((err) => {
+            /*.catch((err) => {
                 console.error("Could not load the tree data: " + err);
-            });
+            });*/
     }
 
     setData(data) {
@@ -46,9 +48,7 @@ export default class extends Controller {
         //Get primary color from css variable
         const primary_color = getComputedStyle(document.documentElement).getPropertyValue('--bs-warning');
 
-        const tree = this.treeTarget;
+        const tree = new BSTreeView(this.treeTarget, {
-
-        $(tree).treeview({
             data: data,
             enableLinks: true,
             showIcon: false,
@@ -62,7 +62,7 @@ export default class extends Controller {
                     let a = document.createElement('a');
                     a.setAttribute('href', data.href);
                     a.innerHTML = "";
-                    $(tree).append(a);
+                    document.body.appendChild(a);
                     a.click();
                     a.remove();
                 }
@@ -71,13 +71,13 @@ export default class extends Controller {
             expandIcon: "fas fa-plus fa-fw fa-treeview",
             collapseIcon: "fas fa-minus fa-fw fa-treeview"
         })
-            .on('initialized', function () {
+            /*.on('initialized', function () {
                 //Collapse all nodes after init
                 $(this).treeview('collapseAll', {silent: true});
 
                 //Reveal the selected ones
                 $(this).treeview('revealNode', [$(this).treeview('getSelected')]);
-            });
+            });*/
     }
 
     collapseAll() {

assets/js/lib/bootstrap-treeview/src/css/bootstrap-treeview.css

@@ -0,0 +1,52 @@
+/* =========================================================
+ * patternfly-bootstrap-treeview.css v2.1.0
+ * =========================================================
+ * Copyright 2013 Jonathan Miles
+ * Project URL : http://www.jondmiles.com/bootstrap-treeview
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================= */
+
+.treeview .list-group-item {
+	cursor: pointer;
+}
+
+.treeview span.indent {
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
+.treeview span.icon {
+	width: 12px;
+	margin-right: 5px;
+}
+
+.treeview .node-disabled {
+	color: silver;
+	cursor: not-allowed;
+}
+
+.treeview .node-hidden {
+	display: none;
+}
+
+.treeview span.image {
+  display: inline-block;
+  width: 12px;
+  height: 1.19em;
+  vertical-align: middle;
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin-right: 5px;
+  line-height: 1em;
+}

assets/ts_src/BSTreeSearchOptions.ts

@@ -0,0 +1,7 @@
+import BSTreeViewEventOptions from "./BSTreeViewEventOptions";
+
+export default class BSTreeSearchOptions extends BSTreeViewEventOptions {
+    ignoreCase: boolean = true;
+    exactMatch: boolean = false;
+    revealResults: boolean = true;
+}

assets/ts_src/BSTreeViewDisableOptions.ts

@@ -0,0 +1,8 @@
+import BSTreeViewEventOptions from "./BSTreeViewEventOptions";
+
+
+export default class BSTreeViewDisableOptions extends BSTreeViewEventOptions
+{
+    unselecting: boolean;
+    keepState: boolean;
+}

assets/ts_src/BSTreeViewEventOptions.ts

@@ -0,0 +1,12 @@
+export default class BSTreeViewEventOptions {
+    silent: boolean = false;
+    ignoreChildren: boolean = false;
+
+    lazyLoad: boolean = false;
+
+    constructor(options: BSTreeViewEventOptions|object = null) {
+        if(options) {
+            Object.assign(this, options);
+        }
+    }
+}

assets/ts_src/BSTreeViewExpandOptions.ts

@@ -0,0 +1,7 @@
+import BSTreeViewEventOptions from "./BSTreeViewEventOptions";
+
+
+export default class BSTreeViewExpandOptions extends BSTreeViewEventOptions
+{
+    levels: number = 999;
+}

assets/ts_src/BSTreeViewNode.ts

@@ -0,0 +1,44 @@
+import BSTreeViewNodeState from "./BSTreeViewNodeState";
+import BSTreeViewOptions from "./BSTreeViewOptions";
+
+export default class BSTreeViewNode {
+    text: string;
+    icon: string;
+    image: string;
+    selectedIcon: string;
+    color: string;
+    backColor: string;
+    iconColor: string;
+    iconBackground: string;
+    selectable: boolean;
+    checkable: boolean;
+    state: BSTreeViewNodeState;
+    tags: string[];
+    dataAttr: object;
+    id: string;
+    class: string;
+    hideCheckbox: boolean;
+    nodes: BSTreeViewNode[];
+    tooltip: string;
+
+    lazyLoad: boolean;
+    tagsClass: string;
+
+
+    el: HTMLElement;
+
+    searchResult: boolean;
+
+
+    level: number;
+    index: number;
+    nodeId: string;
+    parentId: string
+
+    constructor(options: BSTreeViewNode|object = null) {
+        if(options) {
+            Object.assign(this, options);
+        }
+    }
+}
+

assets/ts_src/BSTreeViewNodeState.ts

@@ -0,0 +1,8 @@
+export default class BSTreeViewNodeState {
+    checked: boolean|null;
+    disabled: boolean = false;
+    expanded: boolean;
+    selected: boolean;
+
+    visible: boolean;
+}

assets/ts_src/BSTreeViewOptions.ts

@@ -0,0 +1,78 @@
+import BSTreeViewNode from "./BSTreeViewNode";
+
+export default class BSTreeViewOptions {
+    injectStyle: boolean = true;
+
+    levels: number = 2;
+
+    data: BSTreeViewNode[]|string = null;
+    ajaxURL: string = null;
+    ajaxConfig: RequestInit = {
+        method: "GET",
+    };
+
+    expandIcon: string = 'glyphicon glyphicon-plus';
+    collapseIcon: string = 'glyphicon glyphicon-minus';
+    loadingIcon: string = 'glyphicon glyphicon-hourglass';
+    emptyIcon: string = 'glyphicon';
+    nodeIcon: string = '';
+    selectedIcon: string = '';
+    checkedIcon: string = 'glyphicon glyphicon-check';
+    partiallyCheckedIcon: string = 'glyphicon glyphicon-expand';
+    uncheckedIcon: string = 'glyphicon glyphicon-unchecked';
+    tagsClass: string = 'badge';
+
+    color: string = undefined;
+    backColor: string = undefined;
+    borderColor: string = undefined;
+    changedNodeColor: string = '#39A5DC';
+    onhoverColor: string = '#F5F5F5';
+    selectedColor: string = '#FFFFFF';
+    selectedBackColor: string = '#428bca';
+    searchResultColor: string = '#D9534F';
+    searchResultBackColor: string = undefined;
+
+    highlightSelected: boolean = true;
+    highlightSearchResults: boolean = true;
+    showBorder: boolean = true;
+    showIcon: boolean = true;
+    showImage: boolean = false;
+    showCheckbox: boolean = false;
+    checkboxFirst: boolean = false;
+    highlightChanges: boolean = false;
+    showTags: boolean = false;
+    multiSelect: boolean = false;
+    preventUnselect: boolean = false;
+    allowReselect: boolean = false;
+    hierarchicalCheck: boolean = false;
+    propagateCheckEvent: boolean = false;
+    wrapNodeText: boolean = false;
+
+    // Event handlers
+    onLoading: (event: Event) => void = undefined;
+    onLoadingFailed: (event: Event) => void = undefined;
+    onInitialized: (event: Event) => void = undefined;
+    onNodeRendered: (event: Event) => void = undefined;
+    onRendered: (event: Event) => void = undefined;
+    onDestroyed: (event: Event) => void = undefined;
+
+    onNodeChecked: (event: Event) => void = undefined;
+    onNodeCollapsed: (event: Event) => void = undefined;
+    onNodeDisabled: (event: Event) => void = undefined;
+    onNodeEnabled: (event: Event) => void = undefined;
+    onNodeExpanded: (event: Event) => void = undefined;
+    onNodeSelected: (event: Event) => void = undefined;
+    onNodeUnchecked: (event: Event) => void = undefined;
+    onNodeUnselected: (event: Event) => void = undefined;
+
+    onSearchComplete: (event: Event) => void = undefined;
+    onSearchCleared: (event: Event) => void = undefined;
+
+    lazyLoad: (node: BSTreeViewNode, renderer: (nodes: BSTreeViewNode[]) => void) => void = undefined;
+
+    constructor(options: BSTreeViewOptions|object = null) {
+        if(options) {
+            Object.assign(this, options);
+        }
+    }
+}

assets/ts_src/BSTreeViewSelectOptions.ts

@@ -0,0 +1,7 @@
+import BSTreeViewEventOptions from "./BSTreeViewEventOptions";
+
+
+export default class BSTreeViewSelectOptions extends BSTreeViewEventOptions
+{
+    unselecting: boolean;
+}

assets/tsconfig.json

@@ -1,10 +1,10 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es5",
+    "target": "es6",
     "sourceMap": true,
     "typeRoots": ["../node_modules"],
-    "types": ["jquery", "bootstrap", "jquery.form", "bootstrap-treeview", "bootbox", "typeahead", "marked"]
+    "types": []
   },
   "exclude": [
     "node_modules"

webpack.config.js

@@ -100,7 +100,7 @@ Encore
     //.enableSassLoader()
 
     // uncomment if you use TypeScript
-    //.enableTypeScriptLoader()
+    .enableTypeScriptLoader()
 
     // uncomment if you use React
     //.enableReactPreset()