Bri Prebilic Cole
Committed by Gerrit Code Review

GUI -- ButtonService - modified IconService to load glyphs without icon mapping

- created button and toggle functions in ButtonService with unit tests

Change-Id: If4d35e3ed7df8c1b8f7355f63f39d0c5d84db753
......@@ -52,16 +52,16 @@
}
// div is a D3 selection of the <DIV> element into which icon should load
// iconCls is the CSS class used to identify the icon
// glyphId identifies the glyph to use
// size is dimension of icon in pixels. Defaults to 20.
// installGlyph, if truthy, will cause the glyph to be added to
// well-known defs element. Defaults to false.
// svgClass is the CSS class used to identify the SVG layer.
// Defaults to 'embeddedIcon'.
function loadIcon(div, iconCls, size, installGlyph, svgClass) {
function loadIcon(div, glyphId, size, installGlyph, svgClass) {
var dim = size || 20,
svgCls = svgClass || 'embeddedIcon',
gid = glyphMapping[iconCls] || 'unknown',
gid = glyphId || 'unknown',
svg, g;
if (installGlyph) {
......@@ -76,7 +76,7 @@
});
g = svg.append('g').attr({
'class': 'icon ' + iconCls
'class': 'icon'
});
g.append('rect').attr({
......@@ -91,10 +91,22 @@
'class': 'glyph',
'xlink:href': '#' + gid
});
}
}
// div is a D3 selection of the <DIV> element into which icon should load
// iconCls is the CSS class used to identify the icon
// size is dimension of icon in pixels. Defaults to 20.
// installGlyph, if truthy, will cause the glyph to be added to
// well-known defs element. Defaults to false.
// svgClass is the CSS class used to identify the SVG layer.
// Defaults to 'embeddedIcon'.
function loadIconByClass(div, iconCls, size, installGlyph, svgClass) {
loadIcon(div, glyphMapping[iconCls], size, installGlyph, svgClass);
div.select('svg g').classed(iconCls, true);
}
function loadEmbeddedIcon(div, iconCls, size) {
loadIcon(div, iconCls, size, true);
loadIconByClass(div, iconCls, size, true);
}
......@@ -198,6 +210,7 @@
return {
loadIcon: loadIcon,
loadIconByClass: loadIconByClass,
loadEmbeddedIcon: loadEmbeddedIcon,
addDeviceIcon: addDeviceIcon,
addHostIcon: addHostIcon,
......
/*
* Copyright 2015 Open Networking Laboratory
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*
ONOS GUI -- Widget -- Button Service
*/
(function () {
'use strict';
var $log, fs, is;
var btnSize = 30;
function noop() {}
function createDiv(div, cls, id) {
return div.append('div')
.classed(cls, true)
.attr('id', id);
}
function button(div, id, gid, cb, tooltip) {
if (!div) {
$log.warn('Button cannot append to div');
return null;
}
var btnDiv = createDiv(div, 'btn', id),
svg = btnDiv.append('svg'),
cbFnc = fs.isF(cb) || noop;
is.loadIcon(btnDiv, gid, btnSize);
btnDiv.on('click', cbFnc);
return {
id: id,
click: cbFnc,
el: btnDiv
}
}
function toggle(div, id, gid, cb, tooltip) {
if (!div) {
$log.warn('Toggle cannot append to div');
return null;
}
var sel = false,
togDiv = createDiv(div, 'tog', id),
svg = togDiv.append('svg'),
cbFnc = fs.isF(cb) || noop;
is.loadIcon(togDiv, gid, btnSize);
return {
id: id,
el: togDiv,
selected: function () { return sel; },
toggle: function (b) {
if (b === undefined) {
sel = !sel;
} else {
sel = !!b;
}
cbFnc(sel);
}
}
}
function radioSet(div, id, rset) {
return {}
}
angular.module('onosWidget')
.factory('ButtonService', ['$log', 'FnService', 'IconService',
function (_$log_, _fs_, _is_) {
$log = _$log_;
fs = _fs_;
is = _is_;
return {
button: button,
toggle: toggle,
radioSet: radioSet
};
}]);
}());
\ No newline at end of file
......@@ -102,7 +102,7 @@
return null;
}
for(var i = 0; i < tools.length; i += 1) {
for (var i = 0; i < tools.length; i += 1) {
if (tools[i].t === 'rad' || tools[i].t === 'sep') {
continue;
} else {
......
......@@ -59,6 +59,7 @@
<script src="fw/widget/widget.js"></script>
<script src="fw/widget/table.js"></script>
<script src="fw/widget/toolbar.js"></script>
<script src="fw/widget/button.js"></script>
<script src="fw/layer/layer.js"></script>
<script src="fw/layer/panel.js"></script>
......
......@@ -75,31 +75,31 @@ describe('factory: fw/svg/icon.js', function() {
it('should load an icon into a div', function () {
expect(d3Elem.html()).toEqual('');
is.loadIcon(d3Elem, 'deviceOnline');
is.loadIconByClass(d3Elem, 'deviceOnline');
verifyIconStructure('deviceOnline', '#checkMark');
});
it('should allow us to specify the icon size', function () {
expect(d3Elem.html()).toEqual('');
is.loadIcon(d3Elem, 'deviceOffline', 32);
is.loadIconByClass(d3Elem, 'deviceOffline', 32);
verifyIconStructure('deviceOffline', '#xMark', '32');
});
it('should verify triangleUp icon', function () {
expect(d3Elem.html()).toEqual('');
is.loadIcon(d3Elem, 'tableColSortAsc', 10);
is.loadIconByClass(d3Elem, 'tableColSortAsc', 10);
verifyIconStructure('tableColSortAsc', '#triangleUp', '10');
});
it('should verify triangleDown icon', function () {
expect(d3Elem.html()).toEqual('');
is.loadIcon(d3Elem, 'tableColSortDesc', 10);
is.loadIconByClass(d3Elem, 'tableColSortDesc', 10);
verifyIconStructure('tableColSortDesc', '#triangleDown', '10');
});
it('should verify no icon is displayed', function () {
expect(d3Elem.html()).toEqual('');
is.loadIcon(d3Elem, 'tableColSortNone', 10);
is.loadIconByClass(d3Elem, 'tableColSortNone', 10);
verifyIconStructure('tableColSortNone', null, '10');
});
......
/*
* Copyright 2015 Open Networking Laboratory
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*
ONOS GUI -- Widget -- Button Service - Unit Tests
*/
describe('factory: fw/widget/button.js', function () {
var $log, fs, bns, gs,
d3Elem;
beforeEach(module('onosWidget', 'onosSvg'));
beforeEach(inject(function (_$log_, FnService,
ButtonService, GlyphService) {
$log = _$log_;
fs = FnService;
bns = ButtonService;
gs = GlyphService;
}));
beforeEach(function () {
gs.init();
d3Elem = d3.select('body').append('div').attr('id', 'testToolbar');
});
afterEach(function () {
d3.select('#testToolbar').remove();
});
it('should define ButtonService', function () {
expect(bns).toBeDefined();
});
it('should define api functions', function () {
expect(fs.areFunctions(bns, [
'button', 'toggle', 'radioSet'
])).toBeTruthy();
});
it('should verify button glyph', function () {
var btn = bns.button(d3Elem, 'tbar0-btn-0', 'crown', function () {});
expect((btn.el).classed('btn')).toBeTruthy();
expect((btn.el).attr('id')).toBe('tbar0-btn-0');
expect((btn.el).select('svg')).toBeTruthy();
expect((btn.el).select('use')).toBeTruthy();
expect((btn.el).select('use').classed('glyph')).toBeTruthy();
expect((btn.el).select('use').attr('xlink:href')).toBe('#crown');
});
it('should not append button to an undefined div', function () {
spyOn($log, 'warn');
expect(bns.button(undefined, 'id', 'gid', function () {})).toBeNull();
expect($log.warn).toHaveBeenCalledWith('Button cannot append to div');
});
it('should verify button callback', function () {
var count = 0;
function cb() { count++; }
var btn = bns.button(d3Elem, 'test', 'nothing', cb);
expect(count).toBe(0);
btn.click();
expect(count).toBe(1);
});
it('should ignore non-function callbacks button', function () {
var count = 0;
var btn = bns.button(d3Elem, 'test', 'nothing', 'foo');
expect(count).toBe(0);
btn.click();
expect(count).toBe(0);
});
it('should verify toggle glyph', function () {
var tog = bns.toggle(d3Elem, 'tbar0-tog-0', 'crown', function () {});
expect((tog.el).classed('tog')).toBeTruthy();
expect((tog.el).attr('id')).toBe('tbar0-tog-0');
expect((tog.el).select('svg')).toBeTruthy();
expect((tog.el).select('use')).toBeTruthy();
expect((tog.el).select('use').classed('glyph')).toBeTruthy();
expect((tog.el).select('use').attr('xlink:href')).toBe('#crown');
});
it('should toggle the selected state', function () {
var tog = bns.toggle(d3Elem, 'test', 'nothing');
expect(tog.selected()).toBe(false);
tog.toggle();
expect(tog.selected()).toBe(true);
tog.toggle();
expect(tog.selected()).toBe(false);
});
it('should set toggle state', function () {
var tog = bns.toggle(d3Elem, 'test', 'nothing');
tog.toggle(true);
expect(tog.selected()).toBe(true);
tog.toggle();
expect(tog.selected()).toBe(false);
tog.toggle('truthy string');
expect(tog.selected()).toBe(true);
tog.toggle(null);
expect(tog.selected()).toBe(false);
tog.toggle('');
expect(tog.selected()).toBe(false);
});
it('should not append toggle to an undefined div', function () {
spyOn($log, 'warn');
expect(bns.toggle(undefined, 'id', 'gid', function () {})).toBeNull();
expect($log.warn).toHaveBeenCalledWith('Toggle cannot append to div');
});
});