From 664d4702ad166a85676168dbffb42a8ba5b79f1b Mon Sep 17 00:00:00 2001 From: Bri Prebilic Cole Date: Wed, 25 Feb 2015 12:16:14 -0800 Subject: [PATCH] GUI -- ButtonService - Fixed radio buttons selection bug. Change-Id: Ibdf77e231ce58d4863b11daecb0b8106f8e979a6 --- .../src/main/webapp/app/fw/widget/button.css | 38 +++++++---- .../src/main/webapp/app/fw/widget/button.js | 65 ++++++++++++++----- .../src/main/webapp/app/view/sample/sample.js | 35 +++++++--- 3 files changed, 98 insertions(+), 40 deletions(-) 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 f14e1f7732..4ae4954502 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 445c1075b1..c735b644b1 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 d169a7cbef..21985ee53a 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');