Issue #287 : Edit shortcuts from cheatsheet window (WIP)

piskelapp · Oct 11, 2015 · 09f33e8 · 09f33e8
1 parent cf5e1f1
commit 09f33e8
Show file tree

Hide file tree

Showing 16 changed files with 328 additions and 175 deletions.
diff --git a/src/css/animations.css b/src/css/animations.css
@@ -0,0 +1,3 @@
+@keyframes fade {
+  50% { opacity: 0.5; }
+}
diff --git a/src/css/cheatsheet.css b/src/css/cheatsheet.css
@@ -14,6 +14,7 @@
   background-image:url('../img/keyboard.png');
   background-size:35px 20px;
   background-repeat:no-repeat;
+
   opacity: 0.5;
   z-index: 11000;
   transition : opacity 0.3s;
@@ -25,68 +26,78 @@
 
 .cheatsheet-container {
   box-sizing: border-box;
-  -moz-box-sizing : border-box;
 
   padding: 20px 3%;
   border-radius: 3px;
-  background: rgba(0,0,0,0.9);
+  background-color: rgba(0,0,0,0.9);
   overflow: auto;
 }
 
 .cheatsheet-container .cheatsheet-title {
   font-size:24px;
-  margin-top: 0;
+  margin-top: 30px;
 }
 
-.cheatsheet-container .cheatsheet-title:nth-of-type(2) {
-  margin-top: 30px;
+.cheatsheet-container .cheatsheet-title:nth-of-type(1) {
+  margin-top: 0;
 }
 
 .cheatsheet-section {
-  float: left;
-  width : 33%;
+  display: inline-block;
+  vertical-align: top;
+  padding : 0 20px;
 }
 
 .cheatsheet-shortcut {
   overflow: hidden;
   margin: 10px 0;
+  cursor : pointer;
 }
 
 .cheatsheet-icon.tool-icon {
   float: left;
-  display: inline-block;
 
   height: 30px;
   width: 30px;
-  margin: 0 20px 0 0;
+  margin: 0 10px 0 0;
 
   background-size: 20px 20px;
   background-position: 5px 5px;
 }
 
 .cheatsheet-description {
-  font-family:Courier;
   color: white;
-  font-size : 13px;
-  margin-left: 20px;
+  font-size : 14px;
+  margin-left: 10px;
   line-height : 30px;
 }
 
 .cheatsheet-key {
+  box-sizing: border-box;
   display : inline-block;
   height: 30px;
-  line-height: 30px;
+  line-height: 26px;
   padding: 0 10px;
 
-  border : 1px solid gold;
+  border : 2px solid gold;
   border-radius: 2px;
 
-  box-sizing: border-box;
-  -moz-box-sizing : border-box;
-
   text-align: center;
   font-family:Courier;
   font-weight: bold;
   font-size : 18px;
   color: gold;
+}
+
+.cheatsheet-shorcut-conflict .cheatsheet-key {
+  border-color: red;
+  color: red;
+}
+
+.cheatsheet-shortcut-editing .cheatsheet-key{
+  animation: fade .5s infinite;
+}
+.cheatsheet-shortcut-undefined .cheatsheet-key{
+  border-color: red;
+  color: red;
 }
diff --git a/src/js/controller/ToolController.js b/src/js/controller/ToolController.js
@@ -38,6 +38,7 @@
     $('#tool-section').mousedown($.proxy(this.onToolIconClicked_, this));
 
     $.subscribe(Events.SELECT_TOOL, this.onSelectToolEvent_.bind(this));
+    $.subscribe(Events.SHORTCUTS_CHANGED, this.createToolsDom_.bind(this));
   };
 
   /**

diff --git a/src/js/controller/dialogs/CheatsheetController.js b/src/js/controller/dialogs/CheatsheetController.js
@@ -1,94 +1,96 @@
 (function () {
   var ns = $.namespace('pskl.controller.dialogs');
 
-  ns.CheatsheetController = function () {
-    this.shortcuts = pskl.service.keyboard.Shortcuts;
-  };
+  ns.CheatsheetController = function () {};
 
   pskl.utils.inherit(ns.CheatsheetController, ns.AbstractDialogController);
 
   ns.CheatsheetController.prototype.init = function () {
+    this.superclass.init.call(this);
+
     this.cheatsheetEl = document.getElementById('cheatsheetContainer');
-    if (!this.cheatsheetEl) {
-      throw 'cheatsheetEl DOM element could not be retrieved';
-    }
+    this.eventTrapInput = document.getElementById('cheatsheet-event-trap');
 
+    pskl.utils.Event.addEventListener('.cheatsheet-restore-defaults', 'click', this.onRestoreDefaultsClick_, this);
     pskl.utils.Event.addEventListener(this.cheatsheetEl, 'click', this.onCheatsheetClick_, this);
+    pskl.utils.Event.addEventListener(this.eventTrapInput, 'keydown', this.onEventTrapKeydown_, this);
+
     $.subscribe(Events.SHORTCUTS_CHANGED, this.onShortcutsChanged_.bind(this));
 
     this.initMarkup_();
   };
 
+  ns.CheatsheetController.prototype.destroy = function () {
+    this.eventTrapInput.blur();
+    pskl.utils.Event.removeAllEventListeners();
+    this.cheatsheetEl = null;
+  };
+
+  ns.CheatsheetController.prototype.onRestoreDefaultsClick_ = function () {
+    pskl.service.keyboard.Shortcuts.restoreDefaultShortcuts();
+  };
+
   ns.CheatsheetController.prototype.onShortcutsChanged_ = function () {
     this.initMarkup_();
   };
 
   ns.CheatsheetController.prototype.onCheatsheetClick_ = function (evt) {
-    var shortcutId = pskl.utils.Dom.getData(evt.target, 'shortcutId');
-    if (!shortcutId) {
+    pskl.utils.Dom.removeClass('cheatsheet-shortcut-editing');
+
+    var shortcutEl = pskl.utils.Dom.getParentWithData(evt.target, 'shortcutId');
+    if (!shortcutEl) {
       return;
     }
 
-    var shortcut = pskl.service.keyboard.Shortcuts.getShortcutById(shortcutId);
-    var newKeys = window.prompt('Please enter the new key', shortcut.getKeys().join(', '));
-    shortcut.updateKeys(newKeys);
+    shortcutEl.classList.add('cheatsheet-shortcut-editing');
+    this.eventTrapInput.focus();
   };
 
-  ns.CheatsheetController.prototype.initMarkup_ = function () {
-    this.initMarkupForTools_();
-    this.initMarkupForMisc_();
-    this.initMarkupForColors_();
-    this.initMarkupForSelection_();
-  };
+  ns.CheatsheetController.prototype.onEventTrapKeydown_ = function (evt) {
+    var editedShortcutEl = document.querySelector('.cheatsheet-shortcut-editing');
+    if (!editedShortcutEl) {
+      return;
+    }
 
-  ns.CheatsheetController.prototype.initMarkupForTools_ = function () {
-    var descriptors = this.createShortcutDescriptors_(this.shortcuts.TOOL, this.getToolShortcutClassname_);
-    this.initMarkupForDescriptors_(descriptors, '.cheatsheet-tool-shortcuts');
-  };
+    var shortcutKeyObject = pskl.service.keyboard.KeyUtils.createKeyFromEvent(evt);
+    var shortcutKeyString = pskl.service.keyboard.KeyUtils.stringify(shortcutKeyObject);
 
-  ns.CheatsheetController.prototype.getToolShortcutClassname_ = function (shortcut) {
-    return 'tool-icon ' + shortcut.getId();
-  };
+    var shortcutId = editedShortcutEl.dataset.shortcutId;
+    var shortcut = pskl.service.keyboard.Shortcuts.getShortcutById(shortcutId);
+    pskl.service.keyboard.Shortcuts.updateShortcut(shortcut, shortcutKeyString);
+
+    this.eventTrapInput.blur();
 
-  ns.CheatsheetController.prototype.initMarkupForMisc_ = function () {
-    var descriptors = this.createShortcutDescriptors_(this.shortcuts.MISC);
-    this.initMarkupForDescriptors_(descriptors, '.cheatsheet-misc-shortcuts');
+    evt.preventDefault();
   };
 
-  ns.CheatsheetController.prototype.initMarkupForColors_ = function () {
-    var descriptors = this.createShortcutDescriptors_(this.shortcuts.COLOR);
-    this.initMarkupForDescriptors_(descriptors, '.cheatsheet-colors-shortcuts');
+  ns.CheatsheetController.prototype.initMarkup_ = function () {
+    this.initMarkupForCategory_('TOOL', '.cheatsheet-tool-shortcuts', this.getToolIconClass_);
+    this.initMarkupForCategory_('MISC', '.cheatsheet-misc-shortcuts');
+    this.initMarkupForCategory_('COLOR', '.cheatsheet-color-shortcuts');
+    this.initMarkupForCategory_('SELECTION', '.cheatsheet-selection-shortcuts');
+    this.initMarkupForCategory_('STORAGE', '.cheatsheet-storage-shortcuts');
   };
 
-  ns.CheatsheetController.prototype.initMarkupForSelection_ = function () {
-    var descriptors = this.createShortcutDescriptors_(this.shortcuts.SELECTION);
-    this.initMarkupForDescriptors_(descriptors, '.cheatsheet-selection-shortcuts');
+  ns.CheatsheetController.prototype.getToolIconClass_ = function (shortcut) {
+    return 'tool-icon ' + shortcut.getId();
   };
 
-  ns.CheatsheetController.prototype.createShortcutDescriptors_ = function (shortcutMap, classnameProvider) {
-    return Object.keys(shortcutMap).map(function (shortcutKey) {
-      var shortcut = shortcutMap[shortcutKey];
-      var classname = typeof classnameProvider == 'function' ? classnameProvider(shortcut) : '';
-      return this.toDescriptor_(shortcut, classname);
+  ns.CheatsheetController.prototype.initMarkupForCategory_ = function (category, container, iconClassProvider) {
+    var shortcutMap = pskl.service.keyboard.Shortcuts[category];
+
+    var descriptors = Object.keys(shortcutMap).map(function (shortcutKey) {
+      return this.toDescriptor_(shortcutMap[shortcutKey], iconClassProvider);
     }.bind(this));
-  };
 
-  ns.CheatsheetController.prototype.toDescriptor_ = function (shortcut, icon) {
-    var key = shortcut.getKey();
-    if (pskl.utils.UserAgent.isMac) {
-      key = key.replace('ctrl', 'cmd');
-    }
-    key = key.replace('up', '&#65514;');
-    key = key.replace('down', '&#65516;');
-    key = key.replace(/>/g, '&gt;');
-    key = key.replace(/</g, '&lt;');
-    key = key.replace(/^(.*[^ ])\+([^ ].*)$/g, '$1 + $2');
+    this.initMarkupForDescriptors_(descriptors, container);
+  };
 
+  ns.CheatsheetController.prototype.toDescriptor_ = function (shortcut, iconClassProvider) {
+    var iconClass = typeof iconClassProvider == 'function' ? iconClassProvider(shortcut) : '';
     return {
-      'key' : key,
-      'id' : shortcut.getId(),
-      'description' : shortcut.getDescription(),
-      'icon' : icon
+      'shortcut' : shortcut,
+      'iconClass' : iconClass
     };
   };
 
@@ -97,19 +99,37 @@
     if (!container) {
       return;
     }
-    var markupArray = descriptors.map(this.getMarkupForDescriptor_);
+    var markupArray = descriptors.map(this.getMarkupForDescriptor_.bind(this));
     container.innerHTML = markupArray.join('');
   };
 
   ns.CheatsheetController.prototype.getMarkupForDescriptor_ = function (descriptor) {
     var shortcutTemplate = pskl.utils.Template.get('cheatsheet-shortcut-template');
+    var shortcut = descriptor.shortcut;
+    var description = shortcut.isCustom() ? shortcut.getDescription() + ' *' : shortcut.getDescription();
+
+    var shortcutClass = shortcut.isUndefined() ? 'cheatsheet-shortcut-undefined' : '';
     var markup = pskl.utils.Template.replace(shortcutTemplate, {
-      shortcutId : descriptor.id,
-      shortcutIcon : descriptor.icon,
-      shortcutDescription : descriptor.description,
-      shortcutKey : descriptor.key
+      shortcutId : shortcut.getId(),
+      shortcutIcon : descriptor.iconClass,
+      shortcutDescription : description,
+      shortcutKey : this.formatKey_(shortcut.getDisplayKey()),
+      shortcutClass : shortcutClass
     });
 
     return markup;
   };
+
+  ns.CheatsheetController.prototype.formatKey_ = function (key) {
+    if (pskl.utils.UserAgent.isMac) {
+      key = key.replace('ctrl', 'cmd');
+    }
+    key = key.replace(/up/i, '&#65514;');
+    key = key.replace(/down/i, '&#65516;');
+    key = key.replace(/>/g, '&gt;');
+    key = key.replace(/</g, '&lt;');
+    // add spaces around '+' delimiters
+    key = key.replace(/([^ ])\+([^ ])/g, '$1 + $2');
+    return key;
+  };
 })();
diff --git a/src/js/devtools/DrawingTestPlayer.js b/src/js/devtools/DrawingTestPlayer.js
@@ -129,7 +129,7 @@
     }
 
     event.preventDefault = function () {};
-    pskl.app.shortcutService.onKeyUp_(event);
+    pskl.app.shortcutService.onKeyDown_(event);
   };
 
   ns.DrawingTestPlayer.prototype.playColorEvent_ = function (recordEvent) {

diff --git a/src/js/service/keyboard/CheatsheetService.js b/src/js/service/keyboard/CheatsheetService.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,6 +38,7 @@ @@
         $('#tool-section').mousedown($.proxy(this.onToolIconClicked_, this));
         $.subscribe(Events.SELECT_TOOL, this.onSelectToolEvent_.bind(this));
+        $.subscribe(Events.SHORTCUTS_CHANGED, this.createToolsDom_.bind(this));
       };
       /**
@@ Expand Down @@