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
     // 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.
     // size is dimension of icon in pixels. Defaults to 20.
     // installGlyph, if truthy, will cause the glyph to be added to
     // installGlyph, if truthy, will cause the glyph to be added to
     //      well-known defs element. Defaults to false.
     //      well-known defs element. Defaults to false.
     // svgClass is the CSS class used to identify the SVG layer.
     // svgClass is the CSS class used to identify the SVG layer.
     //      Defaults to 'embeddedIcon'.
     //      Defaults to 'embeddedIcon'.
-    function loadIcon(div, iconCls, size, installGlyph, svgClass) {
+    function loadIcon(div, glyphId, size, installGlyph, svgClass) {
         var dim = size || 20,
         var dim = size || 20,
             svgCls = svgClass || 'embeddedIcon',
             svgCls = svgClass || 'embeddedIcon',
-            gid = glyphMapping[iconCls] || 'unknown',
+            gid = glyphId || 'unknown',
             svg, g;
             svg, g;
 
 
         if (installGlyph) {
         if (installGlyph) {
@@ -76,7 +76,7 @@
         });
         });
 
 
         g = svg.append('g').attr({
         g = svg.append('g').attr({
-            'class': 'icon ' + iconCls
+            'class': 'icon'
         });
         });
 
 
         g.append('rect').attr({
         g.append('rect').attr({
@@ -91,10 +91,22 @@
             'class': 'glyph',
             'class': 'glyph',
             'xlink:href': '#' + gid
             '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) {
     function loadEmbeddedIcon(div, iconCls, size) {
-        loadIcon(div, iconCls, size, true);
+        loadIconByClass(div, iconCls, size, true);
     }
     }
 
 
 
 
@@ -198,6 +210,7 @@
 
 
             return {
             return {
                 loadIcon: loadIcon,
                 loadIcon: loadIcon,
+                loadIconByClass: loadIconByClass,
                 loadEmbeddedIcon: loadEmbeddedIcon,
                 loadEmbeddedIcon: loadEmbeddedIcon,
                 addDeviceIcon: addDeviceIcon,
                 addDeviceIcon: addDeviceIcon,
                 addHostIcon: addHostIcon,
                 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;
             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') {
             if (tools[i].t === 'rad' || tools[i].t === 'sep') {
                 continue;
                 continue;
             } else {
             } else {

@@ -59,6 +59,7 @@
     <script src="fw/widget/widget.js"></script>
     <script src="fw/widget/widget.js"></script>
     <script src="fw/widget/table.js"></script>
     <script src="fw/widget/table.js"></script>
     <script src="fw/widget/toolbar.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/layer.js"></script>
     <script src="fw/layer/panel.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 () {
     it('should load an icon into a div', function () {
         expect(d3Elem.html()).toEqual('');
         expect(d3Elem.html()).toEqual('');
-        is.loadIcon(d3Elem, 'deviceOnline');
+        is.loadIconByClass(d3Elem, 'deviceOnline');
         verifyIconStructure('deviceOnline', '#checkMark');
         verifyIconStructure('deviceOnline', '#checkMark');
     });
     });
 
 
     it('should allow us to specify the icon size', function () {
     it('should allow us to specify the icon size', function () {
         expect(d3Elem.html()).toEqual('');
         expect(d3Elem.html()).toEqual('');
-        is.loadIcon(d3Elem, 'deviceOffline', 32);
+        is.loadIconByClass(d3Elem, 'deviceOffline', 32);
         verifyIconStructure('deviceOffline', '#xMark', '32');
         verifyIconStructure('deviceOffline', '#xMark', '32');
     });
     });
 
 
     it('should verify triangleUp icon', function () {
     it('should verify triangleUp icon', function () {
         expect(d3Elem.html()).toEqual('');
         expect(d3Elem.html()).toEqual('');
-        is.loadIcon(d3Elem, 'tableColSortAsc', 10);
+        is.loadIconByClass(d3Elem, 'tableColSortAsc', 10);
         verifyIconStructure('tableColSortAsc', '#triangleUp', '10');
         verifyIconStructure('tableColSortAsc', '#triangleUp', '10');
     });
     });
 
 
     it('should verify triangleDown icon', function () {
     it('should verify triangleDown icon', function () {
         expect(d3Elem.html()).toEqual('');
         expect(d3Elem.html()).toEqual('');
-        is.loadIcon(d3Elem, 'tableColSortDesc', 10);
+        is.loadIconByClass(d3Elem, 'tableColSortDesc', 10);
         verifyIconStructure('tableColSortDesc', '#triangleDown', '10');
         verifyIconStructure('tableColSortDesc', '#triangleDown', '10');
     });
     });
 
 
     it('should verify no icon is displayed', function () {
     it('should verify no icon is displayed', function () {
         expect(d3Elem.html()).toEqual('');
         expect(d3Elem.html()).toEqual('');
-        is.loadIcon(d3Elem, 'tableColSortNone', 10);
+        is.loadIconByClass(d3Elem, 'tableColSortNone', 10);
         verifyIconStructure('tableColSortNone', null, '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');
+    });
+
+});