Issue #287 : Add forbidden keys & helptext

src/css/dialogs-cheatsheet.css

@@ -27,6 +27,7 @@
 .cheatsheet-container {
   box-sizing: border-box;
 
+  bottom: 70px;
   padding: 20px 3%;
   border-radius: 3px;
   background-color: rgba(0,0,0,0.9);
@@ -46,12 +47,18 @@
   display: inline-block;
   vertical-align: top;
   padding : 0 20px;
+  box-sizing: border-box;
+}
+
+@media (min-width: 1200px) {
+  .cheatsheet-section {
+    width: 33%;
+  }
 }
 
 .cheatsheet-shortcut {
   overflow: hidden;
   margin: 10px 0;
-  cursor : pointer;
 }
 
 .cheatsheet-icon.tool-icon {
@@ -79,14 +86,14 @@
   line-height: 26px;
   padding: 0 10px;
 
-  border : 2px solid gold;
+  border : 2px solid white;
   border-radius: 2px;
 
   text-align: center;
   font-family:Courier;
   font-weight: bold;
   font-size : 18px;
-  color: gold;
+  color: white;
 }
 
 .cheatsheet-shorcut-conflict .cheatsheet-key {
@@ -94,10 +101,50 @@
   color: red;
 }
 
-.cheatsheet-shortcut-editing .cheatsheet-key{
+.cheatsheet-shortcut-editable {
+  cursor : pointer;
+}
+
+.cheatsheet-shortcut-editable .cheatsheet-key {
+  border-color: gold;
+  color: gold;
+}
+
+.cheatsheet-shortcut-editing .cheatsheet-key {
   animation: fade .5s infinite;
 }
-.cheatsheet-shortcut-undefined .cheatsheet-key{
+
+.cheatsheet-shortcut-undefined .cheatsheet-key {
   border-color: red;
   color: red;
+}
+
+/*Cheatsheet actions*/
+
+.cheatsheet-actions {
+  position: absolute;
+  box-sizing: border-box;
+
+  bottom : 0;
+  left : 0;
+  right : 0;
+  height : 70px;
+
+  padding : 10px;
+  overflow: hidden;
+
+  background-color : gold;
+}
+
+.cheatsheet-helptext {
+  display: block;
+  font-size: 14px;
+  color: black;
+  padding-right: 150px;
+}
+
+.cheatsheet-button {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
 }

src/css/dialogs.css

@@ -44,10 +44,6 @@
   overflow: auto;
 }
 
-.animated #dialog-container {
-  transition:margin-top 0.2s;
-}
-
 .show #dialog-container {
   margin-top: 0;
 }

src/css/toolbox-palettes-list.css

@@ -32,7 +32,6 @@
     border-radius: 0 0 0 2px;
 }
 
-
 .palettes-list-color:nth-child(1):after {
     content: "1";
 }
@@ -64,6 +63,7 @@
 .palettes-list-color:nth-child(-n+5) {
     margin-top: 5px;
 }
+
 .palettes-list-color div {
     width: 32px;
     height: 32px;

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');
+    var shortcutId = shortcutEl.dataset.shortcutId;
-    this.eventTrapInput.focus();
+    var shortcut = pskl.service.keyboard.Shortcuts.getShortcutById(shortcutId);
-  };
-
-  ns.CheatsheetController.prototype.onEventTrapKeydown_ = function (evt) {
-    var editedShortcutEl = document.querySelector('.cheatsheet-shortcut-editing');
-    if (!editedShortcutEl) {
-      return;
-    }
-
     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(),
+      id : shortcut.getId(),
-      shortcutIcon : descriptor.iconClass,
+      title : title,
-      shortcutDescription : description,
+      icon : descriptor.iconClass,
-      shortcutKey : this.formatKey_(shortcut.getDisplayKey()),
+      description : description,
-      shortcutClass : shortcutClass
+      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);

src/piskel-style-list.js

@@ -15,12 +15,12 @@
   "css/settings-save.css",
   "css/tools.css",
   "css/icons.css",
-  "css/cheatsheet.css",
   "css/color-picker-slider.css",
   "css/dialogs.css",
-  "css/dialogs-import-image.css",
   "css/dialogs-browse-local.css",
+  "css/dialogs-cheatsheet.css",
   "css/dialogs-create-palette.css",
+  "css/dialogs-import-image.css",
   "css/notifications.css",
   "css/toolbox.css",
   "css/toolbox-layers-list.css",

src/templates/dialogs/cheatsheet.html

@@ -20,18 +20,22 @@
       <h3 class="cheatsheet-title">Storage shortcuts</h3>
       <ul class="cheatsheet-storage-shortcuts"></ul>
     </div>
-    <div class="cheatsheet-actions">
+  </div>
-      <button type="button" name="cheatsheet-restore-defaults" data-action="restore-defaults" class="button cheatsheet-restore-defaults">Restore default shortcuts</button>
+  <div class="cheatsheet-actions">
-    </div>
+    <span class="cheatsheet-helptext"><b>Change shortcuts</b> : Click on a shortcut to remap its key. When the shortcut blinks, press the key on your keyboard to assign it. Conflicts will be highlighted in red.</span>
-    <div style="position:relative;overflow:hidden; width:1px; height:1px">
+    <span class="cheatsheet-helptext">White-colored shortcuts can not be edited. You can click on 'Restore default shortcuts' to go back to the default Piskel shortcuts.</span>
-      <input type="text" id="cheatsheet-event-trap" style="position:absolute; top:-1000px;" />
+    <button type="button" name="cheatsheet-restore-defaults" data-action="restore-defaults" class="button cheatsheet-button cheatsheet-restore-defaults">Restore default shortcuts</button>
-    </div>
+  </div>
+
+  <!-- Event trap to capture keyboard remaps -->
+  <div style="position:relative; overflow:hidden; width:1px; height:1px;">
+    <input type="text" id="cheatsheetEventTrap" style="position:absolute; top:-1000px;" />
   </div>
 </div>
 <script type="text/template" id="cheatsheet-shortcut-template">
-  <li class="cheatsheet-shortcut {{shortcutClass}}" data-shortcut-id="{{shortcutId}}">
+  <li class="cheatsheet-shortcut {{className}}" data-shortcut-id="{{id}}">
-    <div class="cheatsheet-icon {{shortcutIcon}}"></div>
+    <div class="cheatsheet-icon {{icon}}"></div>
-    <span class="cheatsheet-key">{{shortcutKey}}</span>
+    <span class="cheatsheet-key" rel="tooltip" data-placement="top" title="{{title}}">{{key}}</span>
-    <span class="cheatsheet-description">{{shortcutDescription}}</span>
+    <span class="cheatsheet-description">{{description}}</span>
   </li>
 </script>