GUI -- ButtonService - modified IconService to load glyphs without icon mapping
- created button and toggle functions in ButtonService with unit tests
Change-Id: If4d35e3ed7df8c1b8f7355f63f39d0c5d84db753
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.js b/web/gui/src/main/webapp/app/fw/svg/icon.js
index 52ed46d..400b7aa 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.js
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.js
@@ -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,
diff --git a/web/gui/src/main/webapp/app/fw/widget/button.js b/web/gui/src/main/webapp/app/fw/widget/button.js
new file mode 100644
index 0000000..4530bb6
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/widget/button.js
@@ -0,0 +1,102 @@
+/*
+ * 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
diff --git a/web/gui/src/main/webapp/app/fw/widget/toolbar.js b/web/gui/src/main/webapp/app/fw/widget/toolbar.js
index 86309c8..682a5ae 100644
--- a/web/gui/src/main/webapp/app/fw/widget/toolbar.js
+++ b/web/gui/src/main/webapp/app/fw/widget/toolbar.js
@@ -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 {
diff --git a/web/gui/src/main/webapp/app/index.html b/web/gui/src/main/webapp/app/index.html
index 43578ea..53bb8d3 100644
--- a/web/gui/src/main/webapp/app/index.html
+++ b/web/gui/src/main/webapp/app/index.html
@@ -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>
diff --git a/web/gui/src/main/webapp/tests/app/fw/svg/icon-spec.js b/web/gui/src/main/webapp/tests/app/fw/svg/icon-spec.js
index c887c79..cebd61e 100644
--- a/web/gui/src/main/webapp/tests/app/fw/svg/icon-spec.js
+++ b/web/gui/src/main/webapp/tests/app/fw/svg/icon-spec.js
@@ -75,31 +75,31 @@
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');
});
diff --git a/web/gui/src/main/webapp/tests/app/fw/widget/button-spec.js b/web/gui/src/main/webapp/tests/app/fw/widget/button-spec.js
new file mode 100644
index 0000000..f07664c
--- /dev/null
+++ b/web/gui/src/main/webapp/tests/app/fw/widget/button-spec.js
@@ -0,0 +1,125 @@
+/*
+ * 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');
+ });
+
+});