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(); }
}
}
}
diff --git a/web/gui/src/main/webapp/app/view/sample/sample.js b/web/gui/src/main/webapp/app/view/sample/sample.js
index d169a7c..21985ee 100644
--- a/web/gui/src/main/webapp/app/view/sample/sample.js
+++ b/web/gui/src/main/webapp/app/view/sample/sample.js
@@ -21,14 +21,26 @@
(function () {
'use strict';
var $log, tbs, flash,
- sampleDiv;
+ togFnDiv, radFnP;
function btnFn() {
flash.flash('Hi there friends!');
}
function togFn(display) {
- if (display) { sampleDiv.style('display', 'block'); }
- else { sampleDiv.style('display', 'none'); }
+ if (display) { togFnDiv.style('display', 'block'); }
+ else { togFnDiv.style('display', 'none'); }
+ }
+ function checkFn() {
+ radFnP.text('Checkmark radio button active.')
+ .style('color', 'green');
+ }
+ function xMarkFn() {
+ radFnP.text('Xmark radio button active.')
+ .style('color', 'red');
+ }
+ function birdFn() {
+ radFnP.text('Bird radio button active.')
+ .style('color', '#369');
}
angular.module('ovSample', ['onosUtil'])
@@ -41,7 +53,7 @@
self.message = 'Hey there folks!';
- sampleDiv = d3.select('#ov-sample')
+ togFnDiv = d3.select('#ov-sample')
.append('div')
.text('Look at me!')
.style({
@@ -49,14 +61,19 @@
'color': 'rgb(204, 89, 81)',
'font-size': '20pt'
});
+ radFnP = d3.select('#ov-sample')
+ .append('p')
+ .style('font-size', '16pt');
var toolbar = tbs.createToolbar('sample'),
- rset = [{ gid: 'switch', cb: function () {}},
- { gid: 'bird', cb: function () {}}];
- toolbar.addButton('hello-btn', 'crown', btnFn);
- toolbar.addToggle('sample-tog', 'chain', false, togFn);
+ rset = [{ gid: 'checkMark', cb: checkFn },
+ { gid: 'xMark', cb: xMarkFn },
+ { gid: 'bird', cb: birdFn }
+ ];
+ toolbar.addButton('hello-button', 'crown', btnFn);
+ toolbar.addToggle('look-toggle', 'chain', false, togFn);
toolbar.addSeparator();
- toolbar.addRadioSet('some-rad', rset);
+ toolbar.addRadioSet('something-radio', rset);
toolbar.hide();
$log.log('OvSampleCtrl has been created');