Skip to content

Fix collapse icon and add expand logic #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TheChrisTech wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix collapse icon and add expand logic #29

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c64f9f5
Fix expand/collapse icons being there if no child nodes.
TheChrisTech Apr 26, 2022
cec511e
Remove Edit and Delete images/logic.
TheChrisTech Apr 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 20 additions & 6 deletions src/js/bstreeview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
defaults = {
expandIcon: 'fa fa-angle-down fa-fw',
collapseIcon: 'fa fa-angle-right fa-fw',
blankIcon: 'fa fa-blank fa-fw',
indent: 1.25,
parentsMarginLeft: '1.25rem',
openNodeLinkOnNewTab: true
Expand Down Expand Up @@ -68,9 +69,12 @@
this.build($(this.element), this.tree, 0);
// Update angle icon on collapse
$(this.element).on('click', '.list-group-item', function (e) {
$('.state-icon', this)
.toggleClass(_this.settings.expandIcon)
.toggleClass(_this.settings.collapseIcon);
if (this.children[0] != _this.settings.blankIcon)
{
$('.state-icon', this)
.toggleClass(_this.settings.expandIcon)
.toggleClass(_this.settings.collapseIcon);
}
// navigate to href if present
if (e.target.hasAttribute('href')) {
if (_this.settings.openNodeLinkOnNewTab) {
Expand Down Expand Up @@ -123,10 +127,16 @@
.attr('data-target', "#" + _this.itemIdPrefix + node.nodeId)
.attr('style', 'padding-left:' + leftPadding)
.attr('aria-level', depth);

// Set Expand and Collapse icones.
if (node.nodes) {
if (node.nodes.length > 0) {
var treeItemStateIcon = $(templates.treeviewItemStateIcon)
.addClass(node.expanded ? _this.settings.expandIcon : _this.settings.collapseIcon);
treeItem.append(treeItemStateIcon);
}
else {
var treeItemStateIcon = $(templates.treeviewItemStateIcon)
.addClass(_this.settings.collapseIcon);
.addClass(_this.settings.blankIcon);
treeItem.append(treeItemStateIcon);
}
// set node icon if exist.
Expand Down Expand Up @@ -156,6 +166,10 @@
// Node group item.
var treeGroup = $(templates.treeviewGroupItem)
.attr('id', _this.itemIdPrefix + node.nodeId);
// Expand the node if requested.
if (node.expanded) {
treeGroup.addClass('show');
}
parentElement.append(treeGroup);
_this.build(treeGroup, node.nodes, depth);
}
Expand All @@ -173,4 +187,4 @@
}
});
};
})(jQuery, window, document);
})(jQuery, window, document);