Skip to content

Commit

Permalink
Initial idea prototyped.
Browse files Browse the repository at this point in the history 
- Using glyphicons for checked, unchecked state rather than an actual checkbox.  Glyphicons scale and fit better with the bootstrap theme.
- Tweaked css and icon classses used for better formatting.
  • Loading branch information
@jonmiles
jonmiles committed May 2, 2015
1 parent 8219ac2 commit bdb8194
Show file tree
Hide file tree
Showing 9 changed files with 213 additions and 57 deletions.
2 changes: 1 addition & 1 deletion dist/bootstrap-treeview.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/bootstrap-treeview.min.js
View file

Large diffs are not rendered by default.

7 changes: 1 addition & 6 deletions public/css/bootstrap-treeview.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,7 @@
margin-right: 10px;
}

.treeview span.expand-collapse {
width: 1rem;
height: 1rem;
}

.treeview span.icon {
margin-left: 10px;
width: 12px;
margin-right: 5px;
}
79 changes: 68 additions & 11 deletions public/js/bootstrap-treeview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@
emptyIcon: 'glyphicon',
nodeIcon: 'glyphicon glyphicon-stop',
selectedIcon: 'glyphicon glyphicon-stop',
checkedIcon: 'glyphicon glyphicon-check',
uncheckedIcon: 'glyphicon glyphicon-unchecked',

color: undefined, // '#000000',
backColor: undefined, // '#FFFFFF',
Expand Down Expand Up @@ -246,7 +248,7 @@
node.selectable = true;
}

// where provided we shouuld preserve states
// where provided we should preserve states
node.state = node.state || {};

// set expanded state; if not provided based on levels
Expand All @@ -266,6 +268,11 @@
node.state.selected = false;
}

// set checked state; unless set always false
if (!node.state.hasOwnProperty('checked')) {
node.state.checked = false;
}

// index nodes in a flattened structure for use later
_this.nodes.push(node);

Expand All @@ -284,10 +291,14 @@
var classList = target.attr('class') ? target.attr('class').split(' ') : [];
var node = this.findNode(target);

if ((classList.indexOf('click-expand') != -1) ||
(classList.indexOf('click-collapse') != -1)) {
if ((classList.indexOf('click-expand') !== -1) ||
(classList.indexOf('click-collapse') !== -1)) {
this.toggleExpandedState(node, _default.options);
}
else if ((classList.indexOf('node-checked') !== -1) ||
(classList.indexOf('node-unchecked') !== -1)) {
this.toggleCheckedState(node, _default.options);
}
else if (node) {
if (node.selectable) {
this.toggleSelectedState(node, _default.options);
Expand Down Expand Up @@ -380,6 +391,34 @@
}
};

Tree.prototype.toggleCheckedState = function (node, options) {
if (!node) return;
this.setCheckedState(node, !node.state.checked, options);
this.render();
};

Tree.prototype.setCheckedState = function (node, state, options) {

if (state === node.state.checked) return;

if (state) {

// Check node
node.state.checked = true;
// if (!options.silent) {
// this.$element.trigger('nodeChecked', $.extend(true, {}, node) );
// }
}
else {

// Uncheck node
node.state.checked = false;
// if (!options.silent) {
// this.$element.trigger('nodeUnchecked', $.extend(true, {}, node) );
// }
}
};

Tree.prototype.render = function () {

if (!this.initialized) {
Expand Down Expand Up @@ -412,7 +451,8 @@
var treeItem = $(_this.template.item)
.addClass('node-' + _this.elementId)
.addClass(node.state.selected ? 'node-selected' : '')
.addClass(node.searchResult ? 'search-result' : '')
.addClass(node.state.checked ? 'node-checked' : '')
.addClass(node.searchResult ? 'search-result' : '')
.attr('data-nodeid', node.nodeId)
.attr('style', _this.buildStyleOverride(node));

Expand All @@ -425,22 +465,22 @@
if (node.nodes) {
if (!node.state.expanded) {
treeItem
.append($(_this.template.expandCollapseIcon)
.addClass('click-expand')
.append($(_this.template.icon)
.addClass('expand-collapse-icon click-expand')
.addClass(_this.options.expandIcon)
);
}
else {
treeItem
.append($(_this.template.expandCollapseIcon)
.addClass('click-collapse')
.append($(_this.template.icon)
.addClass('expand-collapse-icon click-collapse')
.addClass(_this.options.collapseIcon)
);
}
}
else {
treeItem
.append($(_this.template.expandCollapseIcon)
.append($(_this.template.icon)
.addClass(_this.options.emptyIcon)
);
}
Expand All @@ -449,16 +489,34 @@
if (node.state.selected) {
treeItem
.append($(_this.template.icon)
.addClass('node-icon')
.addClass(node.selectedIcon || _this.options.selectedIcon)
);
}
else {
treeItem
.append($(_this.template.icon)
.addClass('node-icon')
.addClass(node.icon || _this.options.nodeIcon)
);
}

// Add check / unchecked icon
if (node.state.checked) {
treeItem
.append($(_this.template.icon)
.addClass('checked-icon node-checked')
.addClass(_this.options.checkedIcon)
);
}
else {
treeItem
.append($(_this.template.icon)
.addClass('checked-icon node-unchecked')
.addClass(_this.options.uncheckedIcon)
);
}

// Add text
if (_this.options.enableLinks) {
// Add hyperlink
Expand Down Expand Up @@ -566,13 +624,12 @@
list: '<ul class="list-group"></ul>',
item: '<li class="list-group-item"></li>',
indent: '<span class="indent"></span>',
expandCollapseIcon: '<span class="expand-collapse"></span>',
icon: '<span class="icon"></span>',
link: '<a href="#" style="color:inherit;"></a>',
badge: '<span class="badge"></span>'
};

Tree.prototype.css = '.treeview .list-group-item{cursor:pointer}.treeview span.indent{margin-left:10px;margin-right:10px}.treeview span.expand-collapse{width:1rem;height:1rem}.treeview span.icon{margin-left:10px;margin-right:5px}'
Tree.prototype.css = '.treeview .list-group-item{cursor:pointer}.treeview span.indent{margin-left:10px;margin-right:10px}.treeview span.icon{width:12px;margin-right:5px}'


/**
Expand Down
7 changes: 1 addition & 6 deletions src/css/bootstrap-treeview.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,7 @@
margin-right: 10px;
}

.treeview span.expand-collapse {
width: 1rem;
height: 1rem;
}

.treeview span.icon {
margin-left: 10px;
width: 12px;
margin-right: 5px;
}
79 changes: 68 additions & 11 deletions src/js/bootstrap-treeview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@
emptyIcon: 'glyphicon',
nodeIcon: 'glyphicon glyphicon-stop',
selectedIcon: 'glyphicon glyphicon-stop',
checkedIcon: 'glyphicon glyphicon-check',
uncheckedIcon: 'glyphicon glyphicon-unchecked',

color: undefined, // '#000000',
backColor: undefined, // '#FFFFFF',
Expand Down Expand Up @@ -246,7 +248,7 @@
node.selectable = true;
}

// where provided we shouuld preserve states
// where provided we should preserve states
node.state = node.state || {};

// set expanded state; if not provided based on levels
Expand All @@ -266,6 +268,11 @@
node.state.selected = false;
}

// set checked state; unless set always false
if (!node.state.hasOwnProperty('checked')) {
node.state.checked = false;
}

// index nodes in a flattened structure for use later
_this.nodes.push(node);

Expand All @@ -284,10 +291,14 @@
var classList = target.attr('class') ? target.attr('class').split(' ') : [];
var node = this.findNode(target);

if ((classList.indexOf('click-expand') != -1) ||
(classList.indexOf('click-collapse') != -1)) {
if ((classList.indexOf('click-expand') !== -1) ||
(classList.indexOf('click-collapse') !== -1)) {
this.toggleExpandedState(node, _default.options);
}
else if ((classList.indexOf('node-checked') !== -1) ||
(classList.indexOf('node-unchecked') !== -1)) {
this.toggleCheckedState(node, _default.options);
}
else if (node) {
if (node.selectable) {
this.toggleSelectedState(node, _default.options);
Expand Down Expand Up @@ -380,6 +391,34 @@
}
};

Tree.prototype.toggleCheckedState = function (node, options) {
if (!node) return;
this.setCheckedState(node, !node.state.checked, options);
this.render();
};

Tree.prototype.setCheckedState = function (node, state, options) {

if (state === node.state.checked) return;

if (state) {

// Check node
node.state.checked = true;
// if (!options.silent) {
// this.$element.trigger('nodeChecked', $.extend(true, {}, node) );
// }
}
else {

// Uncheck node
node.state.checked = false;
// if (!options.silent) {
// this.$element.trigger('nodeUnchecked', $.extend(true, {}, node) );
// }
}
};

Tree.prototype.render = function () {

if (!this.initialized) {
Expand Down Expand Up @@ -412,7 +451,8 @@
var treeItem = $(_this.template.item)
.addClass('node-' + _this.elementId)
.addClass(node.state.selected ? 'node-selected' : '')
.addClass(node.searchResult ? 'search-result' : '')
.addClass(node.state.checked ? 'node-checked' : '')
.addClass(node.searchResult ? 'search-result' : '')
.attr('data-nodeid', node.nodeId)
.attr('style', _this.buildStyleOverride(node));

Expand All @@ -425,22 +465,22 @@
if (node.nodes) {
if (!node.state.expanded) {
treeItem
.append($(_this.template.expandCollapseIcon)
.addClass('click-expand')
.append($(_this.template.icon)
.addClass('expand-collapse-icon click-expand')
.addClass(_this.options.expandIcon)
);
}
else {
treeItem
.append($(_this.template.expandCollapseIcon)
.addClass('click-collapse')
.append($(_this.template.icon)
.addClass('expand-collapse-icon click-collapse')
.addClass(_this.options.collapseIcon)
);
}
}
else {
treeItem
.append($(_this.template.expandCollapseIcon)
.append($(_this.template.icon)
.addClass(_this.options.emptyIcon)
);
}
Expand All @@ -449,16 +489,34 @@
if (node.state.selected) {
treeItem
.append($(_this.template.icon)
.addClass('node-icon')
.addClass(node.selectedIcon || _this.options.selectedIcon)
);
}
else {
treeItem
.append($(_this.template.icon)
.addClass('node-icon')
.addClass(node.icon || _this.options.nodeIcon)
);
}

// Add check / unchecked icon
if (node.state.checked) {
treeItem
.append($(_this.template.icon)
.addClass('checked-icon node-checked')
.addClass(_this.options.checkedIcon)
);
}
else {
treeItem
.append($(_this.template.icon)
.addClass('checked-icon node-unchecked')
.addClass(_this.options.uncheckedIcon)
);
}

// Add text
if (_this.options.enableLinks) {
// Add hyperlink
Expand Down Expand Up @@ -566,13 +624,12 @@
list: '<ul class="list-group"></ul>',
item: '<li class="list-group-item"></li>',
indent: '<span class="indent"></span>',
expandCollapseIcon: '<span class="expand-collapse"></span>',
icon: '<span class="icon"></span>',
link: '<a href="#" style="color:inherit;"></a>',
badge: '<span class="badge"></span>'
};

Tree.prototype.css = '.treeview .list-group-item{cursor:pointer}.treeview span.indent{margin-left:10px;margin-right:10px}.treeview span.expand-collapse{width:1rem;height:1rem}.treeview span.icon{margin-left:10px;margin-right:5px}'
Tree.prototype.css = '.treeview .list-group-item{cursor:pointer}.treeview span.indent{margin-left:10px;margin-right:10px}.treeview span.icon{width:12px;margin-right:5px}'


/**
Expand Down
7 changes: 1 addition & 6 deletions tests/lib/bootstrap-treeview.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,7 @@
margin-right: 10px;
}

.treeview span.expand-collapse {
width: 1rem;
height: 1rem;
}

.treeview span.icon {
margin-left: 10px;
width: 12px;
margin-right: 5px;
}
Loading

0 comments on commit bdb8194

Please sign in to comment.