Issue #287 : Edit shortcuts from the Cheatsheet dialog (WIP)

src/js/Events.js

@@ -27,6 +27,7 @@ var Events = {
    *   2nd argument: New value
    */
   USER_SETTINGS_CHANGED: 'USER_SETTINGS_CHANGED',
+  SHORTCUTS_CHANGED: 'SHORTCUTS_CHANGED',
 
   CLOSE_SETTINGS_DRAWER : 'CLOSE_SETTINGS_DRAWER',
 

src/js/controller/dialogs/CheatsheetController.js

@@ -12,10 +12,28 @@
     if (!this.cheatsheetEl) {
       throw 'cheatsheetEl DOM element could not be retrieved';
     }
-    console.log('>>>>>> CheatsheetController INIT');
+
+    pskl.utils.Event.addEventListener(this.cheatsheetEl, 'click', this.onCheatsheetClick_, this);
+    $.subscribe(Events.SHORTCUTS_CHANGED, this.onShortcutsChanged_.bind(this));
+
+    this.initMarkup_();
+  };
+
+  ns.CheatsheetController.prototype.onShortcutsChanged_ = function () {
     this.initMarkup_();
   };
 
+  ns.CheatsheetController.prototype.onCheatsheetClick_ = function (evt) {
+    var shortcutId = pskl.utils.Dom.getData(evt.target, 'shortcutId');
+    if (!shortcutId) {
+      return;
+    }
+
+    var shortcut = pskl.service.keyboard.Shortcuts.getShortcutById(shortcutId);
+    var newKeys = window.prompt('Please enter the new key', shortcut.getKeys().join(', '));
+    shortcut.updateKeys(newKeys);
+  };
+
   ns.CheatsheetController.prototype.initMarkup_ = function () {
     this.initMarkupForTools_();
     this.initMarkupForMisc_();
@@ -51,11 +69,12 @@
     return Object.keys(shortcutMap).map(function (shortcutKey) {
       var shortcut = shortcutMap[shortcutKey];
       var classname = typeof classnameProvider == 'function' ? classnameProvider(shortcut) : '';
-      return this.toDescriptor_(shortcut.getKey(), shortcut.getDescription(), classname);
+      return this.toDescriptor_(shortcut, classname);
     }.bind(this));
   };
 
-  ns.CheatsheetController.prototype.toDescriptor_ = function (key, description, icon) {
+  ns.CheatsheetController.prototype.toDescriptor_ = function (shortcut, icon) {
+    var key = shortcut.getKey();
     if (pskl.utils.UserAgent.isMac) {
       key = key.replace('ctrl', 'cmd');
     }
@@ -67,27 +86,30 @@
 
     return {
       'key' : key,
-      'description' : description,
+      'id' : shortcut.getId(),
+      'description' : shortcut.getDescription(),
       'icon' : icon
     };
   };
 
   ns.CheatsheetController.prototype.initMarkupForDescriptors_ = function (descriptors, containerSelector) {
     var container = document.querySelector(containerSelector);
-    descriptors.forEach(function (descriptor) {
-      var shortcut = this.getDomFromDescriptor_(descriptor);
-      container.appendChild(shortcut);
-    }.bind(this));
+    if (!container) {
+      return;
+    }
+    var markupArray = descriptors.map(this.getMarkupForDescriptor_);
+    container.innerHTML = markupArray.join('');
   };
 
-  ns.CheatsheetController.prototype.getDomFromDescriptor_ = function (descriptor) {
+  ns.CheatsheetController.prototype.getMarkupForDescriptor_ = function (descriptor) {
     var shortcutTemplate = pskl.utils.Template.get('cheatsheet-shortcut-template');
     var markup = pskl.utils.Template.replace(shortcutTemplate, {
+      shortcutId : descriptor.id,
       shortcutIcon : descriptor.icon,
       shortcutDescription : descriptor.description,
       shortcutKey : descriptor.key
     });
 
-    return pskl.utils.Template.createFromHTML(markup);
+    return markup;
   };
 })();

src/js/service/keyboard/Shortcut.js

@@ -32,7 +32,7 @@
    * @return {Array<String>} array of keys
    */
   ns.Shortcut.prototype.getKeys = function () {
-    var keys = pskl.UserSettings.get(ns.Shortcut.USER_SETTINGS_PREFIX + this.id_) || this.defaultKey_;
+    var keys = pskl.UserSettings.get(this.getLocalStorageKey_()) || this.defaultKey_;
     if (typeof keys === 'string') {
       keys = [keys];
     }
@@ -57,4 +57,12 @@
     return '';
   };
 
+  ns.Shortcut.prototype.updateKeys = function (keys) {
+    pskl.UserSettings.set(this.getLocalStorageKey_(), keys.split(', '));
+    $.publish(Events.SHORTCUTS_CHANGED);
+  };
+
+  ns.Shortcut.prototype.getLocalStorageKey_ = function () {
+    return ns.Shortcut.USER_SETTINGS_PREFIX + this.id_;
+  };
 })();

src/js/service/keyboard/Shortcuts.js

@@ -65,6 +65,23 @@
       NEXT_COLOR : createShortcut('next-color', 'Select the next color in the current palette', '>'),
       SELECT_COLOR : createShortcut('select-color', 'Select a palette color in the current palette',
         '123456789'.split(''), '1 to 9')
+    },
+
+    CATEGORIES : ['TOOL', 'SELECTION', 'MISC', 'STORAGE', 'COLOR'],
+
+    getShortcutById : function (id) {
+      var shortcut = null;
+      ns.Shortcuts.CATEGORIES.forEach(function (category) {
+        var shortcuts = ns.Shortcuts[category];
+        Object.keys(shortcuts).forEach(function (shortcutKey) {
+          if (shortcuts[shortcutKey].getId() === id) {
+            shortcut = shortcuts[shortcutKey];
+          }
+        });
+      });
+
+      return shortcut;
     }
+
   };
 })();

src/js/utils/Dom.js

@@ -26,14 +26,21 @@
       return false;
     },
 
-    getParentWithData : function (node, data) {
+    getParentWithData : function (node, dataName) {
       while (node) {
-        if (node.dataset && typeof node.dataset[data] !== 'undefined') {
+        if (node.dataset && typeof node.dataset[dataName] !== 'undefined') {
           return node;
         }
         node = node.parentNode;
       }
       return null;
+    },
+
+    getData : function (node, dataName) {
+      var parent = ns.Dom.getParentWithData(node, dataName);
+      if (parent !== null) {
+        return parent.dataset[dataName];
+      }
     }
   };
 })();

src/templates/dialogs/cheatsheet.html

@@ -21,7 +21,7 @@ <h3 class="cheatsheet-title">Color shortcuts</h3>
   </div>
 </div>
 <script type="text/template" id="cheatsheet-shortcut-template">
-  <li class="cheatsheet-shortcut">
+  <li class="cheatsheet-shortcut" data-shortcut-id="{{shortcutId}}">
     <div class="cheatsheet-icon {{shortcutIcon}}"></div>
     <span class="cheatsheet-key">{{shortcutKey}}</span>
     <span class="cheatsheet-description">{{shortcutDescription}}</span>