From 14f4878d8ec11cc837e492e880fba5f7d38b9c61 Mon Sep 17 00:00:00 2001 From: Anuj Mishra Date: Sat, 24 May 2025 16:55:17 +0530 Subject: [PATCH 1/2] Added Buttons Added button, values for which are taken from action key in the tree json --- dist/js/bstreeview.min.js | 21 ++++++++++---------- src/js/bstreeview.js | 42 +++++++++++++++++++++++++++++---------- 2 files changed, 42 insertions(+), 21 deletions(-) mode change 100644 => 100755 dist/js/bstreeview.min.js mode change 100644 => 100755 src/js/bstreeview.js diff --git a/dist/js/bstreeview.min.js b/dist/js/bstreeview.min.js old mode 100644 new mode 100755 index 2af8ea1..c72fcc4 --- a/dist/js/bstreeview.min.js +++ b/dist/js/bstreeview.min.js @@ -1,10 +1,11 @@ -/* - @preserve - bstreeview.js - Version: 1.2.0 - Authors: Sami CHNITER - Copyright 2020 - License: Apache License 2.0 - Project: https://github.com/chniter/bstreeview -*/ -!function (t, e, i, s) { "use strict"; var n = { expandIcon: "fa fa-angle-down fa-fw", collapseIcon: "fa fa-angle-right fa-fw", indent: 1.25, parentsMarginLeft: "1.25rem", openNodeLinkOnNewTab: !0 }, a = '
', d = '
', o = '', r = ''; function l(e, i) { this.element = e, this.itemIdPrefix = e.id + "-item-", this.settings = t.extend({}, n, i), this.init() } t.extend(l.prototype, { init: function () { this.tree = [], this.nodes = [], this.settings.data && (this.settings.data.isPrototypeOf(String) && (this.settings.data = t.parseJSON(this.settings.data)), this.tree = t.extend(!0, [], this.settings.data), delete this.settings.data), t(this.element).addClass("bstreeview"), this.initData({ nodes: this.tree }); var i = this; this.build(t(this.element), this.tree, 0), t(this.element).on("click", ".list-group-item", function (s) { t(".state-icon", this).toggleClass(i.settings.expandIcon).toggleClass(i.settings.collapseIcon), s.target.hasAttribute("href") && (i.settings.openNodeLinkOnNewTab ? e.open(s.target.getAttribute("href"), "_blank") : e.location = s.target.getAttribute("href")) }) }, initData: function (e) { if (e.nodes) { var i = e, s = this; t.each(e.nodes, function (t, e) { e.nodeId = s.nodes.length, e.parentId = i.nodeId, s.nodes.push(e), e.nodes && s.initData(e) }) } }, build: function (e, i, s) { var n = this, l = n.settings.parentsMarginLeft; s > 0 && (l = (n.settings.indent + s * n.settings.indent).toString() + "rem;"), s += 1, t.each(i, function (i, g) { var h = t(a).attr("data-target", "#" + n.itemIdPrefix + g.nodeId).attr("style", "padding-left:" + l).attr("aria-level", s); if (g.nodes) { var c = t(o).addClass(n.settings.collapseIcon); h.append(c) } if (g.icon) { var f = t(r).addClass(g.icon); h.append(f) } if (h.append(g.text), g.href && h.attr("href", g.href), g.class && h.addClass(g.class), g.id && h.attr("id", g.id), e.append(h), g.nodes) { var p = t(d).attr("id", n.itemIdPrefix + g.nodeId); e.append(p), n.build(p, g.nodes, s) } }) } }), t.fn.bstreeview = function (e) { return this.each(function () { t.data(this, "plugin_bstreeview") || t.data(this, "plugin_bstreeview", new l(this, e)) }) } }(jQuery, window, document); \ No newline at end of file +/*! @preserve + * bstreeview.js + * Version: 1.2.2 + * Authors: Sami CHNITER + * Copyright 2020 + * License: Apache License 2.0 + * + * Project: https://github.com/chniter/bstreeview + * Project: https://github.com/nhmvienna/bs5treeview (bootstrap 5) + */ +!function(t,e,i,s){"use strict";var n="bstreeview",a={expandIcon:"fa fa-angle-down fa-fw",collapseIcon:"fa fa-angle-right fa-fw",expandClass:"show",indent:1.25,parentsMarginLeft:"1.25rem",openNodeLinkOnNewTab:!0},d='
',o='
',r='
',l='
',c='',p='';function g(e,i){this.element=e,this.itemIdPrefix=e.id+"-item-",this.settings=t.extend({},a,i),this.init()}t.extend(g.prototype,{init:function(){this.tree=[],this.nodes=[],this.settings.data&&(this.settings.data.isPrototypeOf(String)&&(this.settings.data=t.parseJSON(this.settings.data)),this.tree=t.extend(!0,[],this.settings.data),delete this.settings.data),t(this.element).addClass("bstreeview"),this.initData({nodes:this.tree});var i=this;this.build(t(this.element),this.tree,0),t(this.element).on("click",".list-group-item",(function(s){t(".state-icon",this).toggleClass(i.settings.expandIcon).toggleClass(i.settings.collapseIcon),s.target.hasAttribute("href")?i.settings.openNodeLinkOnNewTab?e.open(s.target.getAttribute("href"),"_blank"):e.location=s.target.getAttribute("href"):t(t(this).attr("data-bs-target")).collapse("toggle")}))},initData:function(e){if(e.nodes){var i=e,s=this;t.each(e.nodes,(function(t,e){e.nodeId=s.nodes.length,e.parentId=i.nodeId,s.nodes.push(e),e.nodes&&s.initData(e)}))}},build:function(e,i,s){var n=this,a=n.settings.parentsMarginLeft;s>0&&(a=(n.settings.indent+s*n.settings.indent).toString()+"rem;"),s+=1,t.each(i,(function(i,g){var h=t(d),f=t(r);g.action&&f.append(g.action);var u=t(o).attr("data-bs-target","#"+n.itemIdPrefix+g.nodeId).attr("style","padding-left:"+a).attr("aria-level",s);if(g.nodes){var v=t(c).addClass(g.expanded?n.settings.expandIcon:n.settings.collapseIcon);u.append(v)}if(g.icon){var m=t(p).addClass(g.icon);u.append(m)}if(u.append(g.text),g.href&&u.attr("href",g.href),g.class&&u.addClass(g.class),g.id&&u.attr("id",g.id),h.append(u),h.append(f),e.append(h),g.nodes){var b=t(l).attr("id",n.itemIdPrefix+g.nodeId);e.append(b),n.build(b,g.nodes,s),g.expanded&&b.addClass(n.settings.expandClass)}}))}}),t.fn[n]=function(e){return this.each((function(){t.data(this,"plugin_"+n)||t.data(this,"plugin_"+n,new g(this,e))}))}}(jQuery,window,document); \ No newline at end of file diff --git a/src/js/bstreeview.js b/src/js/bstreeview.js old mode 100644 new mode 100755 index ad3a088..ded3f33 --- a/src/js/bstreeview.js +++ b/src/js/bstreeview.js @@ -1,11 +1,12 @@ /*! @preserve * bstreeview.js - * Version: 1.2.0 + * Version: 1.2.2 * Authors: Sami CHNITER * Copyright 2020 * License: Apache License 2.0 * * Project: https://github.com/chniter/bstreeview + * Project: https://github.com/nhmvienna/bs5treeview (bootstrap 5) */ ; (function ($, window, document, undefined) { "use strict"; @@ -16,6 +17,7 @@ defaults = { expandIcon: 'fa fa-angle-down fa-fw', collapseIcon: 'fa fa-angle-right fa-fw', + expandClass: 'show', indent: 1.25, parentsMarginLeft: '1.25rem', openNodeLinkOnNewTab: true @@ -26,15 +28,17 @@ */ var templates = { treeview: '
', - treeviewItem: '
', + treeviewHeader: '
', + treeviewItem: '
', + treeviewAction: '
', treeviewGroupItem: '
', treeviewItemStateIcon: '', treeviewItemIcon: '' }; /** * BsTreeview Plugin constructor. - * @param {*} element - * @param {*} options + * @param {*} element + * @param {*} options */ function bstreeView(element, options) { this.element = element; @@ -80,11 +84,16 @@ window.location = e.target.getAttribute('href'); } } + else + { + // Toggle the data-bs-target. Issue with Bootstrap toggle and dynamic code + $($(this).attr("data-bs-target")).collapse('toggle'); + } }); }, /** * Initialize treeview Data. - * @param {*} node + * @param {*} node */ initData: function (node) { if (!node.nodes) return; @@ -103,9 +112,9 @@ }, /** * Build treeview. - * @param {*} parentElement - * @param {*} nodes - * @param {*} depth + * @param {*} parentElement + * @param {*} nodes + * @param {*} depth */ build: function (parentElement, nodes, depth) { var _this = this; @@ -118,15 +127,21 @@ depth += 1; // Add each node and sub-nodes. $.each(nodes, function addNodes(id, node) { + //Node Header and Actions + var treeItemHeader = $(templates.treeviewHeader); + var treeItemAction = $(templates.treeviewAction); + if(node.action) { + treeItemAction.append(node.action); + } // Main node element. var treeItem = $(templates.treeviewItem) - .attr('data-target', "#" + _this.itemIdPrefix + node.nodeId) + .attr('data-bs-target', "#" + _this.itemIdPrefix + node.nodeId) .attr('style', 'padding-left:' + leftPadding) .attr('aria-level', depth); // Set Expand and Collapse icones. if (node.nodes) { var treeItemStateIcon = $(templates.treeviewItemStateIcon) - .addClass(_this.settings.collapseIcon); + .addClass((node.expanded)?_this.settings.expandIcon:_this.settings.collapseIcon); treeItem.append(treeItemStateIcon); } // set node icon if exist. @@ -150,7 +165,9 @@ treeItem.attr('id', node.id); } // Attach node to parent. - parentElement.append(treeItem); + treeItemHeader.append(treeItem); + treeItemHeader.append(treeItemAction); + parentElement.append(treeItemHeader); // Build child nodes. if (node.nodes) { // Node group item. @@ -158,6 +175,9 @@ .attr('id', _this.itemIdPrefix + node.nodeId); parentElement.append(treeGroup); _this.build(treeGroup, node.nodes, depth); + if (node.expanded) { + treeGroup.addClass(_this.settings.expandClass); + } } }); } From bad3963710a5a2dbb2b84107b15430270d18d9ef Mon Sep 17 00:00:00 2001 From: Anuj Mishra Date: Sat, 24 May 2025 16:59:02 +0530 Subject: [PATCH 2/2] Added sample for buttons and actions --- src/index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/index.html b/src/index.html index 79f418f..f869947 100644 --- a/src/index.html +++ b/src/index.html @@ -38,17 +38,21 @@ { text: "Inbox", icon: "fa fa-inbox fa-fw", + action: "", nodes: [ { text: "Office", icon: "fa fa-inbox fa-fw", + action: "", nodes: [ { icon: "fa fa-inbox fa-fw", + action: "", text: "Customers" }, { icon: "fa fa-inbox fa-fw", + action: "", text: "Co-Workers" } ]