Issue #287 : Move CheatsheetService to CheatsheetController + DialogsController

src/css/cheatsheet.css

@@ -23,25 +23,7 @@
   opacity: 1;
 }
 
-#cheatsheet-wrapper {
-  position: absolute;
-  z-index: 10000;
-
-  top: 50px;
-  right: 50px;
-  bottom: 50px;
-  left: 50px;
-
-  box-sizing: border-box;
-  -moz-box-sizing : border-box;
-
-  color: white;
-}
-
 .cheatsheet-container {
-  width: 100%;
-  height:  100%;
-
   box-sizing: border-box;
   -moz-box-sizing : border-box;
 

src/css/dialogs.css

@@ -70,6 +70,14 @@
   position : relative;
 }
 
+.dialog-content {
+  position: absolute;
+  top: 45px;
+  bottom: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 .dialog-head {
   width: 100%;
   background: gold;
@@ -77,6 +85,7 @@
   padding: 10px;
   color: black;
   font-size: 1.8em;
+  height: 45px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
 }

src/index.html

@@ -90,13 +90,15 @@
       <iframe src="templates/dialogs/create-palette.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
       <iframe src="templates/dialogs/import-image.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
       <iframe src="templates/dialogs/browse-local.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+      <iframe src="templates/dialogs/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
     </div>
   </div>
 
-  <iframe src="templates/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
   <iframe src="templates/misc-templates.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
   <iframe src="templates/popup-preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
 
+  <span class="cheatsheet-link" rel="tooltip" data-placement="right" title="Keyboard shortcuts">&nbsp;</span>
+
   <script type="text/javascript" src="piskel-boot.js"></script>
   <!--body-main-end-->
   <!-- the comment above indicates the end of the markup reused by the editor integrated in piskelapp.com -->

src/js/app.js

@@ -127,9 +127,6 @@
       this.imageUploadService = new pskl.service.ImageUploadService();
       this.imageUploadService.init();
 
-      this.cheatsheetService = new pskl.service.keyboard.CheatsheetService();
-      this.cheatsheetService.init();
-
       this.savedStatusService = new pskl.service.SavedStatusService(this.piskelController);
       this.savedStatusService.init();
 

src/js/controller/PalettesListController.js

@@ -152,7 +152,9 @@
   };
 
   ns.PalettesListController.prototype.onCreatePaletteClick_ = function (evt) {
-    $.publish(Events.DIALOG_DISPLAY, 'create-palette');
+    $.publish(Events.DIALOG_DISPLAY, {
+      dialogId : 'create-palette'
+    });
   };
 
   ns.PalettesListController.prototype.onEditPaletteClick_ = function (evt) {

src/js/controller/dialogs/CheatsheetController.js

@@ -0,0 +1,93 @@
+(function () {
+  var ns = $.namespace('pskl.controller.dialogs');
+
+  ns.CheatsheetController = function () {
+    this.shortcuts = pskl.service.keyboard.Shortcuts;
+  };
+
+  pskl.utils.inherit(ns.CheatsheetController, ns.AbstractDialogController);
+
+  ns.CheatsheetController.prototype.init = function () {
+    this.cheatsheetEl = document.getElementById('cheatsheetContainer');
+    if (!this.cheatsheetEl) {
+      throw 'cheatsheetEl DOM element could not be retrieved';
+    }
+    console.log('>>>>>> CheatsheetController INIT');
+    this.initMarkup_();
+  };
+
+  ns.CheatsheetController.prototype.initMarkup_ = function () {
+    this.initMarkupForTools_();
+    this.initMarkupForMisc_();
+    this.initMarkupForColors_();
+    this.initMarkupForSelection_();
+  };
+
+  ns.CheatsheetController.prototype.initMarkupForTools_ = function () {
+    var descriptors = this.createShortcutDescriptors_(this.shortcuts.TOOL, this.getToolShortcutClassname_);
+    this.initMarkupForDescriptors_(descriptors, '.cheatsheet-tool-shortcuts');
+  };
+
+  ns.CheatsheetController.prototype.getToolShortcutClassname_ = function (shortcut) {
+    return 'tool-icon ' + shortcut.getId();
+  };
+
+  ns.CheatsheetController.prototype.initMarkupForMisc_ = function () {
+    var descriptors = this.createShortcutDescriptors_(this.shortcuts.MISC);
+    this.initMarkupForDescriptors_(descriptors, '.cheatsheet-misc-shortcuts');
+  };
+
+  ns.CheatsheetController.prototype.initMarkupForColors_ = function () {
+    var descriptors = this.createShortcutDescriptors_(this.shortcuts.COLOR);
+    this.initMarkupForDescriptors_(descriptors, '.cheatsheet-colors-shortcuts');
+  };
+
+  ns.CheatsheetController.prototype.initMarkupForSelection_ = function () {
+    var descriptors = this.createShortcutDescriptors_(this.shortcuts.SELECTION);
+    this.initMarkupForDescriptors_(descriptors, '.cheatsheet-selection-shortcuts');
+  };
+
+  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.getKey(), shortcut.getDescription(), classname);
+    }.bind(this));
+  };
+
+  ns.CheatsheetController.prototype.toDescriptor_ = function (key, description, icon) {
+    if (pskl.utils.UserAgent.isMac) {
+      key = key.replace('ctrl', 'cmd');
+    }
+    key = key.replace('up', '￪');
+    key = key.replace('down', '￬');
+    key = key.replace(/>/g, '>');
+    key = key.replace(/</g, '&lt;');
+    key = key.replace(/^(.*[^ ])\+([^ ].*)$/g, '$1 + $2');
+
+    return {
+      'key' : key,
+      'description' : description,
+      '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));
+  };
+
+  ns.CheatsheetController.prototype.getDomFromDescriptor_ = function (descriptor) {
+    var shortcutTemplate = pskl.utils.Template.get('cheatsheet-shortcut-template');
+    var markup = pskl.utils.Template.replace(shortcutTemplate, {
+      shortcutIcon : descriptor.icon,
+      shortcutDescription : descriptor.description,
+      shortcutKey : descriptor.key
+    });
+
+    return pskl.utils.Template.createFromHTML(markup);
+  };
+})();

src/js/controller/dialogs/DialogsController.js

@@ -2,6 +2,10 @@
   var ns = $.namespace('pskl.controller.dialogs');
 
   var dialogs = {
+    'cheatsheet' : {
+      template : 'templates/dialogs/cheatsheet.html',
+      controller : ns.CheatsheetController
+    },
     'create-palette' : {
       template : 'templates/dialogs/create-palette.html',
       controller : ns.CreatePaletteController
@@ -25,78 +29,101 @@
   ns.DialogsController.prototype.init = function () {
     this.dialogContainer_ = document.getElementById('dialog-container');
     this.dialogWrapper_ = document.getElementById('dialog-container-wrapper');
-    $.subscribe(Events.DIALOG_DISPLAY, this.onDialogDisplayEvent_.bind(this));
-    $.subscribe(Events.DIALOG_HIDE, this.onDialogHideEvent_.bind(this));
 
-    // TODO : JD : should be moved to a main controller
+    $.subscribe(Events.DIALOG_DISPLAY, this.onDialogDisplayEvent_.bind(this));
+    $.subscribe(Events.DIALOG_HIDE, this.hideDialog.bind(this));
+
     var createPaletteShortcut = pskl.service.keyboard.Shortcuts.COLOR.CREATE_PALETTE;
     pskl.app.shortcutService.registerShortcut(createPaletteShortcut, this.onCreatePaletteShortcut_.bind(this));
 
+    var cheatsheetShortcut = pskl.service.keyboard.Shortcuts.MISC.CHEATSHEET;
+    pskl.app.shortcutService.registerShortcut(cheatsheetShortcut, this.onCheatsheetShortcut_.bind(this));
+    pskl.utils.Event.addEventListener('.cheatsheet-link', 'click', this.onCheatsheetShortcut_, this);
+
+    // adding the .animated class here instead of in the markup to avoid an animation during app startup
     this.dialogWrapper_.classList.add('animated');
   };
 
   ns.DialogsController.prototype.onCreatePaletteShortcut_ = function () {
-    this.onDialogDisplayEvent_(null, 'create-palette');
+    this.toggleDialog_('create-palette');
+  };
+
+  ns.DialogsController.prototype.onCheatsheetShortcut_ = function () {
+    this.toggleDialog_('cheatsheet');
+  };
+
+  /**
+   * If no dialog is currently displayed, the dialog with the provided id will be displayed.
+   * If a dialog is displayed and has the same id as the provided id, hide it.
+   * Otherwise, no-op.
+   */
+  ns.DialogsController.prototype.toggleDialog_ = function (dialogId) {
+    if (!this.isDisplayingDialog_()) {
+      this.showDialog(dialogId);
+    } else if (this.getCurrentDialogId_() === dialogId) {
+      this.hideDialog();
+    }
   };
 
   ns.DialogsController.prototype.onDialogDisplayEvent_ = function (evt, args) {
-    var dialogId, initArgs;
-    if (typeof args === 'string') {
-      dialogId = args;
-    } else {
-      dialogId = args.dialogId;
-      initArgs = args.initArgs;
-    }
-    if (!this.isDisplayed()) {
-      var config = dialogs[dialogId];
-      if (config) {
-        this.dialogContainer_.classList.add(dialogId);
-        this.dialogContainer_.innerHTML = pskl.utils.Template.get(config.template);
+    this.showDialog(args.dialogId, args.initArgs);
+  };
 
+  ns.DialogsController.prototype.showDialog = function (dialogId, initArgs) {
+    if (this.isDisplayingDialog_()) {
+      return;
+    }
+
+    var config = dialogs[dialogId];
+    if (!config) {
+      console.error('Could not find dialog configuration for dialogId : ' + dialogId);
+      return;
+    }
+
+    this.dialogContainer_.classList.add(dialogId);
+
+    this.dialogContainer_.innerHTML = pskl.utils.Template.get(config.template);
     var controller = new config.controller(this.piskelController);
     controller.init(initArgs);
 
-        this.showDialogWrapper_();
     this.currentDialog_ = {
       id : dialogId,
       controller : controller
     };
-      } else {
-        console.error('Could not find dialog configuration for dialogId : ' + dialogId);
-      }
-    }
-  };
 
-  ns.DialogsController.prototype.onDialogHideEvent_ = function () {
-    this.hideDialog();
-  };
-
-  ns.DialogsController.prototype.showDialogWrapper_ = function () {
     pskl.app.shortcutService.registerShortcut(this.closePopupShortcut, this.hideDialog.bind(this));
     this.dialogWrapper_.classList.add('show');
   };
 
   ns.DialogsController.prototype.hideDialog = function () {
-    var currentDialog = this.currentDialog_;
-    if (currentDialog) {
-      currentDialog.controller.destroy();
-      var dialogId = this.currentDialog_.id;
-      window.setTimeout(function () {
-        this.dialogContainer_.classList.remove(dialogId);
-      }.bind(this), 800);
+    if (this.isHiding_ || !this.isDisplayingDialog_()) {
+      return;
     }
 
-    this.hideDialogWrapper_();
-    this.currentDialog_ = null;
-  };
-
-  ns.DialogsController.prototype.hideDialogWrapper_ = function () {
     pskl.app.shortcutService.unregisterShortcut(this.closePopupShortcut);
     this.dialogWrapper_.classList.remove('show');
+    window.setTimeout(this.cleanupDialogContainer_.bind(this), 500);
+    this.isHiding_ = true;
   };
 
-  ns.DialogsController.prototype.isDisplayed = function () {
+  ns.DialogsController.prototype.cleanupDialogContainer_ = function () {
+    this.dialogContainer_.classList.remove(this.currentDialog_.id);
+    this.currentDialog_.controller.destroy();
+    this.currentDialog_ = null;
+
+    this.dialogContainer_.innerHTML = '';
+    this.isHiding_ = false;
+  };
+
+  ns.DialogsController.prototype.isDisplayingDialog_ = function () {
     return this.currentDialog_ !== null;
   };
 
+  ns.DialogsController.prototype.getCurrentDialogId_ = function () {
+    if (this.currentDialog_) {
+      return this.currentDialog_.id;
+    }
+    return null;
+  };
+
 })();

src/js/controller/settings/ImportController.js

@@ -71,7 +71,9 @@
   };
 
   ns.ImportController.prototype.onBrowseLocalClick_ = function (evt) {
-    $.publish(Events.DIALOG_DISPLAY, 'browse-local');
+    $.publish(Events.DIALOG_DISPLAY, {
+      dialogId : 'browse-local'
+    });
     this.closeDrawer_();
   };
 

src/js/service/keyboard/CheatsheetService.js

@@ -1,142 +1 @@
-(function () {
-  var ns = $.namespace('pskl.service.keyboard');
 
-  /**
-   * TODO : JD : This is not a service, but a controller
-   * Moreover this should be handled by the DialogsController
-   */
-  ns.CheatsheetService = function () {
-    this.isDisplayed = false;
-    this.closePopupShortcut = pskl.service.keyboard.Shortcuts.MISC.CLOSE_POPUP;
-  };
-
-  ns.CheatsheetService.prototype.init = function () {
-    this.cheatsheetLinkEl = document.querySelector('.cheatsheet-link');
-    this.cheatsheetEl = document.getElementById('cheatsheet-wrapper');
-    if (!this.cheatsheetEl) {
-      throw 'cheatsheetEl DOM element could not be retrieved';
-    }
-
-    this.initMarkup_();
-
-    var cheatsheetShortcut = pskl.service.keyboard.Shortcuts.MISC.CHEATSHEET;
-    pskl.app.shortcutService.registerShortcut(cheatsheetShortcut, this.toggleCheatsheet_.bind(this));
-
-    pskl.utils.Event.addEventListener(document.body, 'click', this.onBodyClick_, this);
-
-    $.subscribe(Events.TOGGLE_HELP, this.toggleCheatsheet_.bind(this));
-    $.subscribe(Events.ESCAPE, this.onEscape_.bind(this));
-  };
-
-  ns.CheatsheetService.prototype.onBodyClick_ = function (evt) {
-    var isOnCheatsheet = this.cheatsheetEl.contains(evt.target);
-    var isOnLink = this.cheatsheetLinkEl.contains(evt.target);
-    if (isOnLink) {
-      this.toggleCheatsheet_();
-    } else if (!isOnCheatsheet) {
-      this.hideCheatsheet_();
-    }
-  };
-
-  ns.CheatsheetService.prototype.toggleCheatsheet_ = function () {
-    if (this.isDisplayed) {
-      this.hideCheatsheet_();
-    } else {
-      this.showCheatsheet_();
-    }
-  };
-
-  ns.CheatsheetService.prototype.onEscape_ = function () {
-    if (this.isDisplayed) {
-      this.hideCheatsheet_();
-    }
-  };
-
-  ns.CheatsheetService.prototype.showCheatsheet_ = function () {
-    pskl.app.shortcutService.registerShortcut(this.closePopupShortcut, this.hideCheatsheet_.bind(this));
-    this.cheatsheetEl.style.display = 'block';
-    this.isDisplayed = true;
-  };
-
-  ns.CheatsheetService.prototype.hideCheatsheet_ = function () {
-    pskl.app.shortcutService.unregisterShortcut(this.closePopupShortcut);
-    this.cheatsheetEl.style.display = 'none';
-    this.isDisplayed = false;
-  };
-
-  ns.CheatsheetService.prototype.initMarkup_ = function () {
-    this.initMarkupForTools_();
-    this.initMarkupForMisc_();
-    this.initMarkupForColors_();
-    this.initMarkupForSelection_();
-  };
-
-  ns.CheatsheetService.prototype.initMarkupForTools_ = function () {
-    var descriptors = this.createShortcutDescriptors_(ns.Shortcuts.TOOL, this.getToolShortcutClassname_);
-    this.initMarkupForDescriptors_(descriptors, '.cheatsheet-tool-shortcuts');
-  };
-
-  ns.CheatsheetService.prototype.getToolShortcutClassname_ = function (shortcut) {
-    return 'tool-icon ' + shortcut.getId();
-  };
-
-  ns.CheatsheetService.prototype.initMarkupForMisc_ = function () {
-    var descriptors = this.createShortcutDescriptors_(ns.Shortcuts.MISC);
-    this.initMarkupForDescriptors_(descriptors, '.cheatsheet-misc-shortcuts');
-  };
-
-  ns.CheatsheetService.prototype.initMarkupForColors_ = function () {
-    var descriptors = this.createShortcutDescriptors_(ns.Shortcuts.COLOR);
-    this.initMarkupForDescriptors_(descriptors, '.cheatsheet-colors-shortcuts');
-  };
-
-  ns.CheatsheetService.prototype.initMarkupForSelection_ = function () {
-    var descriptors = this.createShortcutDescriptors_(ns.Shortcuts.SELECTION);
-    this.initMarkupForDescriptors_(descriptors, '.cheatsheet-selection-shortcuts');
-  };
-
-  ns.CheatsheetService.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.getKey(), shortcut.getDescription(), classname);
-    }.bind(this));
-  };
-
-  ns.CheatsheetService.prototype.toDescriptor_ = function (key, description, icon) {
-    if (pskl.utils.UserAgent.isMac) {
-      key = key.replace('ctrl', 'cmd');
-    }
-    key = key.replace('up', '￪');
-    key = key.replace('down', '￬');
-    key = key.replace(/>/g, '>');
-    key = key.replace(/</g, '&lt;');
-    key = key.replace(/^(.*[^ ])\+([^ ].*)$/g, '$1 + $2');
-
-    return {
-      'key' : key,
-      'description' : description,
-      'icon' : icon
-    };
-  };
-
-  ns.CheatsheetService.prototype.initMarkupForDescriptors_ = function (descriptors, containerSelector) {
-    var container = this.cheatsheetEl.querySelector(containerSelector);
-    descriptors.forEach(function (descriptor) {
-      var shortcut = this.getDomFromDescriptor_(descriptor);
-      container.appendChild(shortcut);
-    }.bind(this));
-  };
-
-  ns.CheatsheetService.prototype.getDomFromDescriptor_ = function (descriptor) {
-    var shortcutTemplate = pskl.utils.Template.get('cheatsheet-shortcut-template');
-    var markup = pskl.utils.Template.replace(shortcutTemplate, {
-      shortcutIcon : descriptor.icon,
-      shortcutDescription : descriptor.description,
-      shortcutKey : descriptor.key
-    });
-
-    return pskl.utils.Template.createFromHTML(markup);
-  };
-
-})();

src/piskel-script-list.js

@@ -128,6 +128,7 @@
   "js/controller/dialogs/CreatePaletteController.js",
   "js/controller/dialogs/ImportImageController.js",
   "js/controller/dialogs/BrowseLocalController.js",
+  "js/controller/dialogs/CheatsheetController.js",
 
   // Dialogs controller
   "js/controller/dialogs/DialogsController.js",
@@ -161,7 +162,6 @@
   "js/service/keyboard/Shortcuts.js",
   "js/service/keyboard/ShortcutService.js",
   "js/service/keyboard/KeycodeTranslator.js",
-  "js/service/keyboard/CheatsheetService.js",
   "js/service/ImageUploadService.js",
   "js/service/CurrentColorsService.js",
   "js/service/FileDropperService.js",

src/templates/dialogs/browse-local.html

@@ -3,7 +3,7 @@
     Browse Local Piskels
     <span class="dialog-close">X</span>
   </h3>
-  <div style="padding:10px 20px; font-size:1.5em">
+  <div class="dialog-content" style="padding:10px 20px; font-size:1.5em; overflow: auto;">
     <table class="local-piskel-list">
       <thead>
         <tr class="local-piskel-list-head">

src/templates/dialogs/cheatsheet.html

@@ -1,5 +1,9 @@
-<div id="cheatsheet-wrapper" style="display:none">
-  <div class="cheatsheet-container">
+<div id="cheatsheetContainer" class="dialog-wrapper">
+  <h3 class="dialog-head">
+    <span class="dialog-title">Keyboard shortcuts</span>
+    <span class="dialog-close">X</span>
+  </h3>
+  <div class="cheatsheet-container dialog-content">
     <div class="cheatsheet-section">
       <h3 class="cheatsheet-title">Tool shortcuts</h3>
       <ul class="cheatsheet-tool-shortcuts"></ul>
@@ -16,9 +20,6 @@
     </div>
   </div>
 </div>
-<span
-  class="cheatsheet-link"
-  rel="tooltip" data-placement="right" title="Keyboard shortcuts">&nbsp;</span>
 <script type="text/template" id="cheatsheet-shortcut-template">
   <li class="cheatsheet-shortcut">
     <div class="cheatsheet-icon {{shortcutIcon}}"></div>