GUI -- Refactored Toolbar Service.

Change-Id: I758d0da30438eb7257350480024d3bd99624509c

@@ -18,16 +18,6 @@
  ONOS GUI -- Button Service -- CSS file
  */
 
-.tbarArrow {
-    padding: 0 10px 0 10px;
-}
-.light .tbarArrow svg.embeddedIcon .icon.tableColSortAsc .glyph {
-    fill: #838383;
-}
-.dark .tbarArrow svg.embeddedIcon .icon.tableColSortAsc .glyph {
-    fill: #B2B2B2;
-}
-
 .button,
 .toggleButton,
 .radioSet {

@@ -18,16 +18,35 @@
  ONOS GUI -- Toolbar Service -- CSS file
  */
 
+.light .tbarArrow svg.embeddedIcon .icon .glyph {
+    fill: #838383;
+}
+.dark .tbarArrow svg.embeddedIcon .icon .glyph {
+    fill: #B2B2B2;
+}
+
+
+.tbarArrow svg.embeddedIcon .icon rect {
+    stroke: none;
+}
+.light .tbarArrow svg.embeddedIcon .icon rect {
+    fill: none;
+}
+.dark .tbarArrow svg.embeddedIcon .icon rect {
+    fill: none;
+}
+
+
 .separator {
     border: 1px solid;
     margin: 0 4px 0 4px;
     display: inline-block;
+    height: 23px;
+    width: 0;
 }
 .light .separator {
     border-color: #ddd;
 }
-
 .dark .separator {
     border-color: #1A1A1A;
-
-}
\ No newline at end of file
+}

@@ -17,12 +17,18 @@
 /*
  ONOS GUI -- Widget -- Toolbar Service
  */
+// TODO: Augment service to allow toolbars to exist on right edge of screen
+
+
 (function () {
     'use strict';
 
+    // injected refs
     var $log, fs, ps, bns, is;
 
-    var ids = [],
+    // configuration
+    var arrowSize = 10,
+        sepWidth = 6,
         defaultSettings = {
             edge: 'left',
             width: 20,
@@ -31,122 +37,120 @@
             top: '80%',
             fade: false,
             shown: false
-        },
-        settings,
-        arrowSize = 10,
-        btnPadding = 4,
-        tbarId,
-        tbarPanel,
-        tbarDiv,
-        tbarArrowDiv;
-
-    // this function is only used in testing
-    function init() {
-        ids = [];
-    }
+        };
 
-    // === Helper functions --------------------------------------
+    // internal state
+    var tbars = {};
 
-    function validId(id, caller) {
-        if (fs.inArray(id, ids) !== -1) {
-            $log.warn(caller + ': ID already exists');
-            return false;
-        }
-        return true;
-    }
 
-    // TODO: Allow toolbar to be on right edge of screen
+    // === Helper functions --------------------------------------
+
     // translate uses 50 because the svg viewbox is 50
-    function rotateArrowLeft() {
-        tbarArrowDiv.select('g')
+    function rotateArrowLeft(adiv) {
+        adiv.select('g')
             .attr('transform', 'translate(0 50) rotate(-90)');
     }
-    function rotateArrowRight() {
-        tbarArrowDiv.select('g')
+    function rotateArrowRight(adiv) {
+        adiv.select('g')
             .attr('transform', 'translate(50 0) rotate(90)');
     }
-    function createArrow() {
-        tbarArrowDiv = tbarDiv.append('div')
+
+    function createArrow(panel) {
+        var arrowDiv = panel.append('div')
             .classed('tbarArrow', true)
-            .style({'position': 'absolute',
+            .style({
+                'position': 'absolute',
                 'top': '53%',
                 'left': '96%',
                 'margin-right': '-4%',
                 'transform': 'translate(-50%, -50%)',
-                'cursor': 'pointer'});
-        is.loadEmbeddedIcon(tbarArrowDiv, 'tableColSortAsc', arrowSize);
-
-        tbarArrowDiv.on('click', toggleTools);
+                'cursor': 'pointer'
+            });
+        is.loadIcon(arrowDiv, 'triangleUp', arrowSize, true);
+        return arrowDiv;
     }
 
-    // === Adding to toolbar functions ----------------------------
-
-    // TODO: these add functions look very similar -- combine them somehow?
-    function addButton(id, gid, cb, tooltip) {
-        var btnId = tbarId + '-' + id,
-            button;
-        if (!validId(btnId, 'addButton')) { return null; }
-        ids.push(btnId);
-        button =  bns.button(tbarDiv, btnId, gid, cb, tooltip);
-        if (button) { addToWidth(button.width()); }
-        displayTools();
-        return button;
+    function warn(msg, id) {
+        $log.warn('createToolbar: ' + msg + ': [' + id + ']');
+        return null;
     }
 
-    function addToggle(id, gid, initState, cb, tooltip) {
-        var togId = tbarId + '-' + id,
-            toggle;
-        if (!validId(togId, 'addToggle')) { return null; }
-        ids.push(togId);
-        toggle =  bns.toggle(tbarDiv, togId, gid, initState, cb, tooltip);
-        if (toggle) { addToWidth(toggle.width()); }
-        displayTools();
-        return toggle;
-    }
 
-    function addRadioSet(id, rset) {
-        var radId = tbarId + '-' + id,
-            radios;
-        if (!validId(radId, 'addRadioSet')) { return null; }
-        ids.push(radId);
-        radios = bns.radioSet(tbarDiv, radId, rset);
-        if (radios) { addToWidth(radios.width()); }
-        displayTools();
-        return radios;
-    }
+    // ==================================
 
-    function addSeparator() {
-        if (!tbarDiv) {
-            $log.warn('Separator cannot append to div');
-            return null;
+    function createToolbar(id, opts) {
+        if (!id) return warn('no ID given', id);
+        if (tbars[id]) return warn('duplicate ID given', id);
+
+        var settings = angular.extend({}, defaultSettings, fs.isO(opts)),
+            tbid = 'toolbar-' + id,
+            panel = ps.createPanel(tbid, settings),
+            arrowDiv = createArrow(panel),
+            tbWidth = arrowSize + 2;    // empty toolbar width
+
+
+        arrowDiv.on('click', toggle);
+
+        // add a descriptor for this toolbar
+        tbars[id] = {
+            settings: settings,
+            panel: panel,
+            panelId: tbid
+        };
+
+        panel.classed('toolbar', true)
+            .style('top', settings.top);
+
+
+        // API functions
+
+        function addButton(id, gid, cb, tooltip) {
+            var bid = tbid + '-' + id,
+                btn = bns.button(panel, bid, gid, cb, tooltip);
+            tbWidth += btn.width();
+            panel.width(tbWidth);
+            return btn;
         }
-        addToWidth(2);
-        displayTools();
-        return tbarDiv.append('div')
-            .classed('separator', true)
-            .style({'height': '23px',
-                    'width': '0px'});
-    }
 
-    // === Main toolbar API functions ----------------------------
+        function addToggle(id, gid, initState, cb, tooltip) {
+            var tid = tbid + '-' + id,
+                tog = bns.toggle(panel, tid, gid, initState, cb, tooltip);
+            tbWidth += tog.width();
+            panel.width(tbWidth);
+            return tog;
+        }
 
-    function createToolbar(id, opts) {
-        if (!id) {
-            $log.warn('createToolbar: no ID given');
-            return null;
+        function addRadioSet(id, rset) {
+            var rid = tbid + '-' + id,
+                rad = bns.radioSet(panel, rid, rset);
+            tbWidth += rad.width();
+            panel.width(tbWidth);
+            return rad;
+        }
+
+        function addSeparator() {
+            panel.append('div')
+                .classed('separator', true);
+            tbWidth += sepWidth;
         }
-        tbarId = 'tbar-' + id;
-        settings = angular.extend({}, defaultSettings, fs.isO(opts));
 
-        if (!validId(tbarId, 'createToolbar')) { return null; }
-        ids.push(tbarId);
+        function show(cb) {
+            rotateArrowLeft(arrowDiv);
+            panel.show(cb);
+        }
 
-        tbarPanel = ps.createPanel(tbarId, settings);
-        tbarDiv = tbarPanel.classed('toolbar', true)
-            .style('top', settings.top);
+        function hide(cb) {
+            rotateArrowRight(arrowDiv);
+            panel.hide(cb);
+        }
 
-        createArrow();
-        displayTools();
+        function toggle(cb) {
+            if (panel.isVisible()) {
+                hide(cb);
+            } else {
+                show(cb);
+            }
+        }
 
         return {
             addButton: addButton,
@@ -156,49 +160,21 @@
 
             show: show,
             hide: hide,
-            toggleTools: toggleTools,
-
-            width: width
-        }
+            toggle: toggle
+        };
     }
 
     function destroyToolbar(id) {
-        ps.destroyPanel(id);
-        tbarDiv = null;
-    }
+        var tb = tbars[id];
+        delete tbars[id];
 
-    function show(cb) {
-        tbarPanel.show(cb);
-        rotateArrowLeft();
-    }
-
-    function hide(cb) {
-        tbarPanel.hide(cb);
-        rotateArrowRight();
-    }
-
-    function toggleTools(cb) {
-        if (tbarPanel.isVisible()) { hide(cb); }
-        else { show(cb) }
-    }
-
-    function displayTools() {
-        if (settings.shown) { show(); }
-        else { hide(); }
-    }
-
-    function width(w) {
-        if (w) { tbarPanel.width(w); }
-        return tbarPanel.width();
-    }
-
-    function addToWidth(size) {
-        if (!(settings.width > (fs.windowSize(0, 500).width))) {
-            settings.width = width() + size + btnPadding;
-            tbarPanel.width(settings.width);
+        if (tb) {
+            ps.destroyPanel(tb.panelId);
         }
     }
 
+    // === Module Definition ===
+
     angular.module('onosWidget')
     .factory('ToolbarService',
         ['$log', 'FnService', 'PanelService', 'ButtonService', 'IconService',
@@ -210,6 +186,11 @@
             bns = _bns_;
             is = _is_;
 
+            // this function is only used in testing
+            function init() {
+                tbars = {};
+            }
+
             return {
                 init: init,
                 createToolbar: createToolbar,

@@ -87,6 +87,9 @@
                 toolbar.addToggle('demo-toggle', 'chain', false, togFn);
                 toolbar.addSeparator();
                 toolbar.addRadioSet('demo-radio', rset);
+                toolbar.hide();
+
+                checkFn();
 
              $log.log('OvSampleCtrl has been created');
         }]);