yellow team mailing list archive

[Thiago Veronezi <thiago@xxxxxxxxxxxx>]

Thiago Veronezi has proposed merging lp:~tveronezi/juju-gui/hotkeys into lp:juju-gui.

Requested reviews:
  Juju GUI Hackers (juju-gui)

For more details, see:
https://code.launchpad.net/~tveronezi/juju-gui/hotkeys/+merge/131382

application hotkeys

The user can hit alt+e to open the environment view and alt+s to focus the 
charm search field.
-- 
https://code.launchpad.net/~tveronezi/juju-gui/hotkeys/+merge/131382
Your team Juju GUI Hackers is requested to review the proposed merge of lp:~tveronezi/juju-gui/hotkeys into lp:juju-gui.

=== modified file 'app/app.js'
--- app/app.js	2012-10-19 01:44:45 +0000
+++ app/app.js	2012-10-25 11:48:26 +0000
@@ -92,6 +92,79 @@
       }
     },
 
+    activateHotkeys: function() {
+      var myWindow = Y.one(window);
+      myWindow.on('keydown', function(ev) {
+        var key = [],
+            keyStr = null,
+            data = {
+                  preventDefault: false
+            };
+        if (ev.altKey) {
+          key.push('alt');
+        } else if (ev.ctrlKey) {
+          key.push('ctrl');
+        } else if (ev.shiftKey) {
+          key.push('shift');
+        }
+        if (key.length === 0 &&
+            // F1...F12 or esc
+            !(ev.keyCode >= 112 && ev.keyCode <= 123 || ev.keyCode === 27)) {
+          return; //nothing to do
+        }
+        keyStr = keyCodeToString(ev.keyCode);
+        if (!keyStr) {
+          keyStr = ev.keyCode;
+        }
+        key.push(keyStr);
+        Y.fire('window-' + key.join('-') + '-pressed', data);
+        if (data.preventDefault) {
+          ev.preventDefault();
+        }
+      });
+
+      Y.detachAll('window-alt-E-pressed');
+      Y.on('window-alt-E-pressed', function(data) {
+        this.show_environment();
+        data.preventDefault = true;
+      }, this);
+
+      Y.detachAll('window-alt-S-pressed');
+      Y.on('window-alt-S-pressed', function(data) {
+        var field = Y.one('#charm-search-field');
+        if (field) {
+          field.focus();
+        }
+        data.preventDefault = true;
+      }, this);
+
+      // http://www.quirksmode.org/js/keys.html
+      function keyCodeToString(keyCode) {
+        if (keyCode === 16) {
+          return 'shift';
+        }
+        if (keyCode === 17) {
+          return 'control';
+        }
+        if (keyCode === 18) {
+          return 'alt';
+        }
+        if (keyCode === 27) {
+          return 'esc';
+        }
+        // Numbers or Letters
+        if (keyCode >= 48 && keyCode <= 57 || //Numbers
+            keyCode >= 65 && keyCode <= 90) { //Letters
+          return String.fromCharCode(keyCode);
+        }
+        //F1 -> F12
+        if (keyCode >= 112 && keyCode <= 123) {
+          return 'F' + (keyCode - 111);
+        }
+        return null;
+      }
+    },
+
     initializer: function() {
       // If this flag is true, start the application with the console activated
       if (this.get('consoleEnabled')) {
@@ -424,7 +497,9 @@
           }
         });
       }
-      next();
+      if (next) {
+        next();
+      }
     },
 
     // Model interactions -> move to db layer

=== modified file 'app/index.html'
--- app/index.html	2012-10-13 23:56:14 +0000
+++ app/index.html	2012-10-25 11:48:26 +0000
@@ -74,6 +74,9 @@
     <script>
       YUI(GlobalConfig).use(["juju-gui"], function(Y) {
         app = new Y.juju.App(juju_config);
+        // We need to activate the hotkeys when running the application
+        // in production. Unit tests should call it manually.
+        app.activateHotkeys();
       });
     </script>
   </body>

=== modified file 'test/index.html'
--- test/index.html	2012-10-19 01:44:45 +0000
+++ test/index.html	2012-10-25 11:48:26 +0000
@@ -32,6 +32,7 @@
   <script src="test_endpoints.js"></script>
   <script src="test_application_notifications.js"></script>
   <script src="test_charm_store.js"></script>
+  <script src="test_app_hotkeys.js"></script>
 
   <script>
   YUI().use('node', 'event', function(Y) {

=== added file 'test/test_app_hotkeys.js'
--- test/test_app_hotkeys.js	1970-01-01 00:00:00 +0000
+++ test/test_app_hotkeys.js	2012-10-25 11:48:26 +0000
@@ -0,0 +1,73 @@
+'use strict';
+
+describe('application console', function() {
+  var Y, app, container, env, conn, testUtils, windowNode, altEtriggered;
+
+  before(function() {
+    Y = YUI(GlobalConfig).use(
+        ['juju-gui', 'juju-tests-utils',
+          'node-event-simulate'], function(Y) {
+          windowNode = Y.one(window);
+
+          function TestApp(config) {
+            // Invoke Base constructor, passing through arguments
+            TestApp.superclass.constructor.apply(this, arguments);
+          }
+
+          // Mocking the "show_environment" function.
+          Y.extend(TestApp, Y.juju.App, {
+            show_environment: function() {
+              altEtriggered = true;
+            }
+          });
+
+          app = new TestApp({
+            env: env,
+            container: container,
+            viewContainer: container
+          });
+          app.activateHotkeys();
+
+          altEtriggered = false;
+        });
+  });
+
+  afterEach(function() {
+    container.remove(true);
+  });
+
+  beforeEach(function() {
+    container = Y.one('#main').appendChild(Y.Node.create('<div/>')).set('id',
+        'test-container').append(
+        Y.Node.create('<input />').set('id', 'charm-search-field'));
+    testUtils = Y.namespace('juju-tests.utils');
+    env = {
+      get: function() {
+      },
+      on: function() {
+      },
+      after: function() {
+      }
+    };
+  });
+
+  it('should listen for alt-S events', function() {
+    app.render();
+    windowNode.simulate('keydown', {
+      keyCode: 83, // "S" key
+      altKey: true
+    });
+    // Did charm-search-field get the focus?
+    assert.equal(Y.one('#charm-search-field'), Y.one(document.activeElement));
+  });
+
+  it('should listen for alt-E events', function() {
+    assert.isFalse(altEtriggered);
+    app.render();
+    windowNode.simulate('keydown', {
+      keyCode: 69, // "E" key
+      altKey: true
+    });
+    assert.isTrue(altEtriggered);
+  });
+});