https://www.rbresort.com/plugins/bstreeview/bstreeview.js?v=1

1/*! @preserve
2 * bstreeview.js
3 * Version: 1.2.0
4 * Authors: Sami CHNITER <[email protected]>
5 * Copyright 2020
6 * License: Apache License 2.0
7 *
8 * Project: https://github.com/chniter/bstreeview
9 */
10; (function ($, window, document, undefined) {
11    "use strict";
12    /**
13     * Default bstreeview  options.
14     */
15    var pluginName = "bstreeview",
16        defaults = {
17            expandIcon: 'fa fa-angle-down fa-fw',
18            collapseIcon: 'fa fa-angle-right fa-fw',
19            indent: 1.25,
20            parentsMarginLeft: '1.25rem',
21            openNodeLinkOnNewTab: true
22
23        };
24    /**
25     * bstreeview HTML templates.
26     */
27    var templates = {
28        treeview: '<div class="bstreeview"></div>',
29        treeviewItem: '<div role="treeitem" class="list-group-item" data-toggle="collapse"></div>',
30        treeviewGroupItem: '<div role="group" class="list-group collapse" id="itemid"></div>',
31        treeviewItemStateIcon: '<i class="state-icon"></i>',
32        treeviewItemIcon: '<i class="item-icon"></i>'
33    };
34    /**
35     * BsTreeview Plugin constructor.
36     * @param {*} element 
37     * @param {*} options 
38     */
39    function bstreeView(element, options) {
40        this.element = element;
41        this.itemIdPrefix = element.id + "-item-";
42        this.settings = $.extend({}, defaults, options);
43        this.init();
44    }
45    /**
46     * Avoid plugin conflict.
47     */
48    $.extend(bstreeView.prototype, {
49        /**
50         * bstreeview intialize.
51         */
52        init: function () {
53            this.tree = [];
54            this.nodes = [];
55            // Retrieve bstreeview Json Data.
56            if (this.settings.data) {
57                if (this.settings.data.isPrototypeOf(String)) {
58                    this.settings.data = $.parseJSON(this.settings.data);
59                }
60                this.tree = $.extend(true, [], this.settings.data);
61                delete this.settings.data;
62            }
63            // Set main bstreeview class to element.
64            $(this.element).addClass('bstreeview');
65
66            this.initData({ nodes: this.tree });
67            var _this = this;
68            this.build($(this.element), this.tree, 0);
69            // Update angle icon on collapse
70            $(this.element).on('click', '.list-group-item', function (e) {
71                $('.state-icon', this)
72                    .toggleClass(_this.settings.expandIcon)
73                    .toggleClass(_this.settings.collapseIcon);
74                // navigate to href if present
75                if (e.target.hasAttribute('href')) {
76                    if (_this.settings.openNodeLinkOnNewTab) {
77                        window.open(e.target.getAttribute('href'), '_blank');
78                    }
79                    else {
80                        window.location = e.target.getAttribute('href');
81                    }
82                }
83            });
84        },
85        /**
86         * Initialize treeview Data.
87         * @param {*} node 
88         */
89        initData: function (node) {
90            if (!node.nodes) return;
91            var parent = node;
92            var _this = this;
93            $.each(node.nodes, function checkStates(index, node) {
94
95                node.nodeId = _this.nodes.length;
96                node.parentId = parent.nodeId;
97                _this.nodes.push(node);
98
99                if (node.nodes) {
100                    _this.initData(node);
101                }
102            });
103        },
104        /**
105         * Build treeview.
106         * @param {*} parentElement 
107         * @param {*} nodes 
108         * @param {*} depth 
109         */
110        build: function (parentElement, nodes, depth) {
111            var _this = this;
112            // Calculate item padding.
113            var leftPadding = _this.settings.parentsMarginLeft;
114
115            if (depth > 0) {
116                leftPadding = (_this.settings.indent + depth * _this.settings.indent).toString() + "rem;";
117            }
118            depth += 1;
119            // Add each node and sub-nodes.
120            $.each(nodes, function addNodes(id, node) {
121                // Main node element.
122                var treeItem = $(templates.treeviewItem)
123                    .attr('data-target', "#" + _this.itemIdPrefix + n

123ode.nodeId)
124                    .attr('style', 'padding-left:' + leftPadding)
125                    .attr('aria-level', depth);
126                // Set node Text.
127                treeItem.append(node.text);
128                // Set Expand and Collapse icones.
129                if (node.nodes) {
130                    var treeItemStateIcon = $(templates.treeviewItemStateIcon)
131                        .addClass(_this.settings.collapseIcon);
132                    treeItem.append(treeItemStateIcon);
133                }
134                // set node icon if exist.
135                if (node.icon) {
136                    var treeItemIcon = $(templates.treeviewItemIcon)
137                        .addClass(node.icon);
138                    treeItem.append(treeItemIcon);
139                }
140                // Reset node href if present
141                if (node.href) {
142                    treeItem.attr('href', node.href);
143                }
144                // Add class to node if present
145                if (node.class) {
146                    treeItem.addClass(node.class);
147                }
148                // Add custom id to node if present
149                if (node.id) {
150                    treeItem.attr('id', node.id);
151                }
152                // Attach node to parent.
153                parentElement.append(treeItem);
154                // Build child nodes.
155                if (node.nodes) {
156                    // Node group item.
157                    var treeGroup = $(templates.treeviewGroupItem)
158                        .attr('id', _this.itemIdPrefix + node.nodeId);
159                    parentElement.append(treeGroup);
160                    _this.build(treeGroup, node.nodes, depth);
161                }
162            });
163        }
164    });
165
166    // A really lightweight plugin wrapper around the constructor,
167    // preventing against multiple instantiations
168    $.fn[pluginName] = function (options) {
169        return this.each(function () {
170            if (!$.data(this, "plugin_" + pluginName)) {
171                $.data(this, "plugin_" +
172                    pluginName, new bstreeView(this, options));
173            }
174        });
175    };
176})(jQuery, window, document);