GUI -- Fixed topo toolbar button synchronization with keystroke commands.

- Added toggleNoCb to the toggle button widget.
- Added _keyListener property to keyBindings structure, and the invocation of it from keyIn().
- Added keyListener to topoToolbar to synchronize button state.

Change-Id: Iffb1dc5d38f2d9010f5e246cfb81a6b3db30d4af

@@ -76,6 +76,7 @@
             gk = kh.globalKeys[key],
             gcb = fs.isF(gk) || (fs.isA(gk) && fs.isF(gk[0])),
             vk = kh.viewKeys[key],
+            kl = fs.isF(kh.viewKeys._keyListener),
             vcb = fs.isF(vk) || (fs.isA(vk) && fs.isF(vk[0])) || fs.isF(kh.viewFn),
             token = getViewToken();
 
@@ -91,6 +92,9 @@
             if (vcb) {
                 vcb(token, key, keyCode, event);
             }
+            if (kl) {
+                kl(key);
+            }
         }
     }
 

@@ -92,10 +92,15 @@
         is.loadIcon(togDiv, gid, btnSize, true);
         togDiv.classed('selected', sel);
 
-        function _toggle(b) {
+        function _toggle(b, nocb) {
             sel = (b === undefined) ? !sel : !!b;
             togDiv.classed('selected', sel);
-            cbFnc(sel);
+            nocb || cbFnc(sel);
+        }
+
+        // toggle the button state without invoking the callback
+        function toggleNoCb() {
+            _toggle(undefined, true);
         }
 
         togDiv.on('click', _toggle);
@@ -104,7 +109,8 @@
             id: id,
             width: buttonWidth,
             selected: function () { return sel; },
-            toggle: _toggle
+            toggle: _toggle,
+            toggleNoCb: toggleNoCb
         }
     }
 

@@ -69,6 +69,8 @@
 
             esc: handleEscape,
 
+            _keyListener: ttbs.keyListener,
+
             _helpFormat: [
                 ['O', 'I', 'D', '-', 'H', 'M', 'P', 'B' ],
                 ['X', 'Z', 'L', 'U', 'R' ],

@@ -16,73 +16,79 @@
 
 /*
  ONOS GUI -- Topology Toolbar Module.
- Defines functions for manipulating the toolbar.
+ Functions for creating and interacting with the toolbar.
  */
 
 (function () {
 
     // injected references
-    var $log, tbs;
+    var $log, tbs, api;
 
-    var api, toolbar;
+    // internal state
+    var toolbar, keyData;
 
-    // buttons
-    var togSummary, togInstances, togDetails,
-        togHosts, togOffline, togPorts, togBackground;
+    // key to button mapping data
+    var k2b = {
+        O: { id: 'summary-tog', gid: 'unknown', isel: true},
+        I: { id: 'instance-tog', gid: 'uiAttached', isel: true },
+        D: { id: 'details-tog', gid: 'unknown', isel: true },
+
+        H: { id: 'hosts-tog', gid: 'endstation', isel: false },
+        M: { id: 'offline-tog', gid: 'switch', isel: true },
+        P: { id: 'ports-tog', gid: 'unknown', isel: true },
+        B: { id: 'bkgrnd-tog', gid: 'unknown', isel: true }
+    };
 
     function init(_api_) {
         api = _api_;
     }
 
-    // TODO: fix toggle and radio sets to be selected based on the current state
-    // current bug: first toggle button, then toggle with key, toggle button doesn't update appearance
-
-
-    function getActions() {
-        togSummary = api.getActionEntry('O');
-        togInstances = api.getActionEntry('I');
-        togDetails = api.getActionEntry('D');
-
-        togHosts = api.getActionEntry('H');
-        togOffline = api.getActionEntry('M');
-        togPorts = api.getActionEntry('P');
-        togBackground = api.getActionEntry('B');
-    }
-
-    function entryCallback(entry) {
-        return entry[0];
+    function initKeyData() {
+        keyData = d3.map(k2b);
+        keyData.forEach(function(key, value) {
+            var data = api.getActionEntry(key);
+            value.cb = data[0];     // on-click callback
+            value.tt = data[1];     // tooltip
+        });
     }
 
-    function entryToolTip(entry) {
-        return entry[1];
+    function addToggle(key) {
+        var v = keyData.get(key);
+        v.tog = toolbar.addToggle(v.id, v.gid, v.isel, v.cb, v.tt);
     }
 
     function addFirstRow() {
-        toolbar.addToggle('summary-tog', 'unknown', true,
-            entryCallback(togSummary), entryToolTip(togSummary));
-        toolbar.addToggle('instance-tog', 'uiAttached', true,
-            entryCallback(togInstances), entryToolTip(togInstances));
-        toolbar.addToggle('details-tog', 'unknown', true,
-            entryCallback(togDetails), entryToolTip(togDetails));
+        addToggle('O');
+        addToggle('I');
+        addToggle('D');
         toolbar.addSeparator();
 
-        toolbar.addToggle('hosts-tog', 'endstation', false,
-            entryCallback(togHosts), entryToolTip(togHosts));
-        toolbar.addToggle('offline-tog', 'switch', true,
-            entryCallback(togOffline), entryToolTip(togOffline));
-        toolbar.addToggle('ports-tog', 'unknown', true,
-            entryCallback(togPorts), entryToolTip(togPorts));
-        toolbar.addToggle('bkgrnd-tog', 'unknown', true,
-            entryCallback(togBackground), entryToolTip(togBackground));
+        addToggle('H');
+        addToggle('M');
+        addToggle('P');
+        addToggle('B');
     }
 
     function createToolbar() {
-        getActions();
+        initKeyData();
         toolbar = tbs.createToolbar('topo-tbar');
         addFirstRow();
         toolbar.show();
     }
 
+    // allows us to ensure the button states track key strokes
+    function keyListener(key) {
+        var v = keyData.get(key);
+
+        if (v) {
+            // we have a valid button mapping
+            if (v.tog) {
+                // it's a toggle button
+                v.tog.toggleNoCb();
+            }
+        }
+    }
+
     angular.module('ovTopo')
         .factory('TopoToolbarService', ['$log', 'ToolbarService',
 
@@ -92,7 +98,8 @@
 
             return {
                 init: init,
-                createToolbar: createToolbar
+                createToolbar: createToolbar,
+                keyListener: keyListener
             };
         }]);
 }());
\ No newline at end of file