Issue #287 : Add forbidden keys & helptext

src/js/controller/NotificationController.js

@@ -25,9 +25,6 @@
     document.body.appendChild(message);
 
     message.querySelector('.close').addEventListener('click', this.removeMessage_.bind(this));
-    if (messageInfo.behavior) {
-      messageInfo.behavior(message);
-    }
 
     if (messageInfo.hideDelay) {
       window.setTimeout(this.removeMessage_.bind(this), messageInfo.hideDelay);

src/js/controller/dialogs/CheatsheetController.js

@@ -1,6 +1,8 @@
 (function () {
   var ns = $.namespace('pskl.controller.dialogs');
 
+  var SHORTCUT_EDITING_CLASSNAME = 'cheatsheet-shortcut-editing';
+
   ns.CheatsheetController = function () {};
 
   pskl.utils.inherit(ns.CheatsheetController, ns.AbstractDialogController);
@@ -9,7 +11,7 @@
     this.superclass.init.call(this);
 
     this.cheatsheetEl = document.getElementById('cheatsheetContainer');
-    this.eventTrapInput = document.getElementById('cheatsheet-event-trap');
+    this.eventTrapInput = document.getElementById('cheatsheetEventTrap');
 
     pskl.utils.Event.addEventListener('.cheatsheet-restore-defaults', 'click', this.onRestoreDefaultsClick_, this);
     pskl.utils.Event.addEventListener(this.cheatsheetEl, 'click', this.onCheatsheetClick_, this);
@@ -35,30 +37,38 @@
   };
 
   ns.CheatsheetController.prototype.onCheatsheetClick_ = function (evt) {
-    pskl.utils.Dom.removeClass('cheatsheet-shortcut-editing');
-
     var shortcutEl = pskl.utils.Dom.getParentWithData(evt.target, 'shortcutId');
+    if (!shortcutEl) {
+      pskl.utils.Dom.removeClass(SHORTCUT_EDITING_CLASSNAME);
+      return;
+    }
+
+    var shortcutId = shortcutEl.dataset.shortcutId;
+    var shortcut = pskl.service.keyboard.Shortcuts.getShortcutById(shortcutId);
+
+    if (shortcutEl.classList.contains(SHORTCUT_EDITING_CLASSNAME)) {
+      shortcutEl.classList.remove(SHORTCUT_EDITING_CLASSNAME);
+      this.eventTrapInput.blur();
+    } else if (shortcut.isEditable()) {
+      shortcutEl.classList.add(SHORTCUT_EDITING_CLASSNAME);
+      this.eventTrapInput.focus();
+    }
+  };
+
+  ns.CheatsheetController.prototype.onEventTrapKeydown_ = function (evt) {
+    var shortcutEl = document.querySelector('.' + SHORTCUT_EDITING_CLASSNAME);
     if (!shortcutEl) {
       return;
     }
 
-    shortcutEl.classList.add('cheatsheet-shortcut-editing');
-    this.eventTrapInput.focus();
-  };
-
-  ns.CheatsheetController.prototype.onEventTrapKeydown_ = function (evt) {
-    var editedShortcutEl = document.querySelector('.cheatsheet-shortcut-editing');
-    if (!editedShortcutEl) {
-      return;
-    }
-
+    var shortcutId = shortcutEl.dataset.shortcutId;
+    var shortcut = pskl.service.keyboard.Shortcuts.getShortcutById(shortcutId);
     var shortcutKeyObject = pskl.service.keyboard.KeyUtils.createKeyFromEvent(evt);
     var shortcutKeyString = pskl.service.keyboard.KeyUtils.stringify(shortcutKeyObject);
 
-    var shortcutId = editedShortcutEl.dataset.shortcutId;
-    var shortcut = pskl.service.keyboard.Shortcuts.getShortcutById(shortcutId);
     pskl.service.keyboard.Shortcuts.updateShortcut(shortcut, shortcutKeyString);
 
+    shortcutEl.classList.remove(SHORTCUT_EDITING_CLASSNAME);
     this.eventTrapInput.blur();
 
     evt.preventDefault();
@@ -108,13 +118,23 @@
     var shortcut = descriptor.shortcut;
     var description = shortcut.isCustom() ? shortcut.getDescription() + ' *' : shortcut.getDescription();
 
-    var shortcutClass = shortcut.isUndefined() ? 'cheatsheet-shortcut-undefined' : '';
+    var shortcutClasses = [];
+    if (shortcut.isUndefined()) {
+      shortcutClasses.push('cheatsheet-shortcut-undefined');
+    }
+    if (shortcut.isEditable()) {
+      shortcutClasses.push('cheatsheet-shortcut-editable');
+    }
+
+    var title = shortcut.isEditable() ? 'Click to edit the key' : 'Shortcut cannot be remapped';
+
     var markup = pskl.utils.Template.replace(shortcutTemplate, {
-      shortcutId : shortcut.getId(),
-      shortcutIcon : descriptor.iconClass,
-      shortcutDescription : description,
-      shortcutKey : this.formatKey_(shortcut.getDisplayKey()),
-      shortcutClass : shortcutClass
+      id : shortcut.getId(),
+      title : title,
+      icon : descriptor.iconClass,
+      description : description,
+      key : this.formatKey_(shortcut.getDisplayKey()),
+      className : shortcutClasses.join(' ')
     });
 
     return markup;

src/js/service/keyboard/Shortcut.js

@@ -48,6 +48,14 @@
     return keys;
   };
 
+  /**
+   * For now, only shortcuts with a single key mapped can be edited
+   * @return {Boolean} true if the shortcut can be updated
+   */
+  ns.Shortcut.prototype.isEditable = function () {
+    return this.getKeys().length < 2;
+  };
+
   ns.Shortcut.prototype.isCustom = function () {
     var keys = this.getKeys();
     if (keys.length !== this.defaultKeys_.length) {
@@ -92,6 +100,10 @@
   };
 
   ns.Shortcut.prototype.removeKeys = function (keysToRemove) {
+    if (!this.isEditable()) {
+      return;
+    }
+
     var keys = this.getKeys();
     var updatedKeys = keys.filter(function (key) {
       return !keysToRemove.some(function (keyToRemove) {

src/js/service/keyboard/Shortcuts.js

@@ -5,6 +5,13 @@
     return new ns.Shortcut(id, description, defaultKey, displayKey);
   };
 
+  /**
+   * List of keys that cannot be remapped. Either alternate keys, which are not displayed.
+   * Or really custom shortcuts such as the 1-9 for color palette shorctus
+   */
+  var FORBIDDEN_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '?', 'shift+?',
+    'del', 'back', 'ctrl+Y', 'ctrl+shift+Z'];
+
   ns.Shortcuts = {
     /**
      * Syntax : createShortcut(id, description, default key(s))
@@ -89,13 +96,31 @@
     updateShortcut : function (shortcut, keysString) {
       keysString = keysString.replace(/\s/g, '');
       var keys = keysString.split(',');
+
+      var hasForbiddenKey = FORBIDDEN_KEYS.some(function (forbiddenKey) {
+        return keys.some(function (key) {
+          return forbiddenKey == key;
+        });
+      });
+
+      if (hasForbiddenKey) {
+        $.publish(Events.SHOW_NOTIFICATION, [{
+          'content': 'Key cannot be remapped (' + keysString + ')',
+          'hideDelay' : 5000
+        }]);
+        return;
+      }
+
       ns.Shortcuts.getShortcuts().forEach(function (s) {
         if (s === shortcut) {
           return;
         }
 
         if (s.removeKeys(keys)) {
-          $.publish(Events.SHOW_NOTIFICATION, [{'content': 'Shortcut key removed for ' + s.getId()}]);
+          $.publish(Events.SHOW_NOTIFICATION, [{
+            'content': 'Shortcut key removed for ' + s.getId(),
+            'hideDelay' : 5000
+          }]);
         }
       });
       shortcut.updateKeys(keys);