helper overlay for h-key

src/allplatforms/classes/Keyboard.js

@@ -2,6 +2,11 @@ SC.loadPackage({ 'Keyboard': {
 
     comment: 'I am a controller for keyboard commands.',
 
+    properties: {
+
+        helperOverlay: { comment: 'I store the helper overlay DOM node.' }
+
+    },
     
     methods: {
 
@@ -11,10 +16,33 @@ SC.loadPackage({ 'Keyboard': {
 
                 var self = this;
 
+
                 document.addEventListener('keydown', function(evt){
                     self.do('processKeyEvent', evt);
                 }, false);
 
+
+
+                var helperOverlay = document.createElement('div');
+                    helperOverlay.setAttribute('id', 'sg-editing-helperOverlay');
+                this.set({ helperOverlay: helperOverlay })
+
+                document.addEventListener('keydown', function(evt){
+                    if(evt.keyCode === 72){
+                        var helperOverlay = self.get('helperOverlay');
+                        helperOverlay.style.width  = window.innerWidth + 'px';
+                        helperOverlay.style.height = window.innerHeight + 'px';
+                        document.body.appendChild(helperOverlay);
+                    }
+                }, false);
+
+                document.addEventListener('keyup', function(evt){
+                    if(evt.keyCode === 72){
+                        document.body.removeChild(self.get('helperOverlay'));
+                    }
+                }, false);
+
+
             }
         },
 
@@ -23,8 +51,8 @@ SC.loadPackage({ 'Keyboard': {
             comment: 'I process key events.',
             code: function(evt){
 
-                var self       = this,
-                    irrelevant = false;
+                var self      = this,
+                    relevant  = true;
 
                 if(evt.ctrlKey){
 
@@ -95,7 +123,7 @@ SC.loadPackage({ 'Keyboard': {
                             break;
 
                         default:
-                            irrelevant = true;
+                            relevant = false;
                             break;
 
                     }
@@ -138,13 +166,8 @@ SC.loadPackage({ 'Keyboard': {
                             
                             break;
 
-                        case 72:
-                            // H (Help)
-                            
-                            break;
-
                         default:
-                            irrelevant = true;
+                            relevant = false;
                             break;
 
                     }
@@ -152,7 +175,7 @@ SC.loadPackage({ 'Keyboard': {
 
                 }
 
-                if(!irrelevant){
+                if(relevant){
                     evt.stopPropagation();
                     evt.preventDefault();
                 }

src/allplatforms/css/Keyboard.css

@@ -0,0 +1,16 @@
+#sg-editing-helperOverlay {
+
+    position:   fixed;
+    top:        0px;
+    left:       0px;
+    z-index:    900;
+
+    background-color:       rgba(92, 13, 14, 0.7);
+    background-image:       url(img/help.png);
+    background-repeat:      no-repeat;
+    background-position:    center;
+    background-size:        60%;
+
+    pointer-events:         none;
+
+}

src/chromium/content_probeForSG.js

@@ -95,6 +95,7 @@
         'css/FileManagerWindow.css',
         'css/Grid.css',
         'css/HTMLEditor.css',
+        'css/Keyboard.css',
         'css/MenuItem.css',
         'css/MenuItemBackgroundColor.css',
         'css/MenuItemBackgroundImg.css',

src/firefox/data/content_probeForSG.js

@@ -95,6 +95,7 @@
         'css/FileManagerWindow.css',
         'css/Grid.css',
         'css/HTMLEditor.css',
+        'css/Keyboard.css',
         'css/MenuItem.css',
         'css/MenuItemBackgroundColor.css',
         'css/MenuItemBackgroundImg.css',