GUI -- ButtonService - Fixed radio buttons selection bug.
Change-Id: Ibdf77e231ce58d4863b11daecb0b8106f8e979a6
diff --git a/web/gui/src/main/webapp/app/fw/widget/button.css b/web/gui/src/main/webapp/app/fw/widget/button.css
index f14e1f7..4ae4954 100644
--- a/web/gui/src/main/webapp/app/fw/widget/button.css
+++ b/web/gui/src/main/webapp/app/fw/widget/button.css
@@ -28,54 +28,66 @@
.button,
.toggleButton,
.radioSet,
+.radioButton,
.separator {
display: inline-block;
}
.button,
-.toggleButton {
+.toggleButton,
+.radioSet {
padding: 0 4px 0 4px;
}
-.radioSet .toggleButton {
- padding: 0 0 0 4px;
+.radioButton {
+ padding: 0 4px 0 0;
}
.button svg.embeddedIcon,
-.toggleButton svg.embeddedIcon {
+.toggleButton svg.embeddedIcon,
+.radioButton svg.embeddedIcon {
cursor: pointer;
}
.button svg.embeddedIcon .icon rect,
-.toggleButton svg.embeddedIcon .icon rect {
+.toggleButton svg.embeddedIcon .icon rect,
+.radioButton svg.embeddedIcon .icon rect{
stroke: none;
}
/* Selected button color */
.light .button svg.embeddedIcon,
-.light .toggleButton.selected svg.embeddedIcon {
+.light .toggleButton.selected svg.embeddedIcon,
+.light .radioButton.selected svg.embeddedIcon {
fill: #838383;
}
.light .button svg.embeddedIcon .glyph,
-.light .toggleButton.selected svg.embeddedIcon .glyph {
+.light .toggleButton.selected svg.embeddedIcon .glyph,
+.light .radioButton.selected svg.embeddedIcon .glyph {
fill: white;
}
.dark .button svg.embeddedIcon,
-.dark .toggleButton.selected svg.embeddedIcon {
+.dark .toggleButton.selected svg.embeddedIcon,
+.dark .radioButton.selected svg.embeddedIcon{
fill: #151515;
}
.dark .button svg.embeddedIcon .glyph,
-.dark .toggleButton.selected svg.embeddedIcon .glyph {
+.dark .toggleButton.selected svg.embeddedIcon .glyph,
+.dark .radioButton.selected svg.embeddedIcon .glyph {
fill: #B2B2B2;
}
/* Unselected button color */
-.light .toggleButton svg.embeddedIcon {
+.light .toggleButton svg.embeddedIcon,
+.light .radioButton svg.embeddedIcon {
fill: #eee;
}
-.light .toggleButton svg.embeddedIcon .glyph {
+.light .toggleButton svg.embeddedIcon .glyph,
+.light .radioButton svg.embeddedIcon .glyph {
fill: #bbb;
}
-.dark .toggleButton svg.embeddedIcon {
+.dark .toggleButton svg.embeddedIcon,
+.dark .radioButton svg.embeddedIcon {
fill: #303030;
}
-.dark .toggleButton svg.embeddedIcon .glyph {
+.dark .toggleButton svg.embeddedIcon .glyph,
+.dark .radioButton svg.embeddedIcon .glyph {
fill: #565656;
}
diff --git a/web/gui/src/main/webapp/app/fw/widget/button.js b/web/gui/src/main/webapp/app/fw/widget/button.js
index 445c107..c735b64 100644
--- a/web/gui/src/main/webapp/app/fw/widget/button.js
+++ b/web/gui/src/main/webapp/app/fw/widget/button.js
@@ -85,7 +85,6 @@
}
}
- // TODO: fix radio button on click selecting functionality
function radioSet(div, id, rset) {
if (!div) {
$log.warn('Radio buttons cannot append to div');
@@ -100,34 +99,64 @@
return null;
}
var rDiv = div.append('div').classed('radioSet', true),
- sel = 0,
- rads = [];
+ rads = [],
+ sel;
+
+ function _selected() {
+ var curr = d3.select(this),
+ currId = curr.attr('id');
+
+ // I have it going by id's because I couldn't think of a way
+ // to get the radio button's index from the div element
+ // We could look at the end of the radio button id for its number
+ // but I didn't know how to get the end of the string's number
+ if (sel !== currId) {
+ var selIndex = _getIndex(),
+ currIndex = _getIndex(currId);
+ rads[selIndex].el.classed('selected', false);
+ curr.classed('selected', true);
+ rads[currIndex].cb();
+ sel = currId;
+ }
+ }
+
+ // given the id, will get the index of element
+ // without the id, will get the index of sel
+ function _getIndex(id) {
+ if (!id) {
+ for (var i = 0; i < rads.length; i++) {
+ if (rads[i].id === sel) { return i; }
+ }
+ } else {
+ for (var j = 0; j < rads.length; j++) {
+ if (rads[j].id === id) { return j; }
+ }
+ }
+ }
rset.forEach(function (btn, index) {
var rid = {id: id + '-' + index},
rbtn = angular.extend({}, btn, rid),
istate = (index === 0),
- rtog = toggle(rDiv, rbtn.id, rbtn.gid, istate,
- rbtn.cb, rbtn.tooltip);
+ rBtnDiv = createDiv(rDiv, 'radioButton', rbtn.id);
- rtog.el.classed('radioButton', true);
- rads.push(rtog);
+ if (istate) { rBtnDiv.classed('selected', true); }
+ is.loadIcon(rBtnDiv, rbtn.gid, btnSize, true);
+ rbtn.el = rBtnDiv;
+ rbtn.cb = fs.isF(rbtn.cb) || noop;
+
+ rBtnDiv.on('click', _selected);
+
+ rads.push(rbtn);
});
+ sel = rads[0].id;
+ rads[0].cb();
return {
rads: rads,
selected: function (i) {
- if (i === undefined) { return sel; }
- else if (i < 0 || i >= rads.length) {
- $log.error('Cannot select radio button of index ' + i);
- }
- else {
- if (i !== sel) {
- rads[sel].toggle(false);
- rads[i].toggle(true);
- sel = i;
- }
- }
+ if (i === undefined) { _getIndex(); }
+ else { _selected(); }
}
}
}