mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Issue #287 : Move CheatsheetService to CheatsheetController + DialogsController

Browse Source
This commit is contained in:
jdescottes
2015-10-10 22:53:48 +02:00
parent 5cda3e57b4
commit b5234089cd
12 changed files with 192 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/js/controller/dialogs/CheatsheetController.js Normal file
View File

@ -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);
};
})();

119
src/js/controller/dialogs/DialogsController.js
View File

@ -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);
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);
}
}
this.showDialog(args.dialogId, args.initArgs);
};
ns.DialogsController.prototype.onDialogHideEvent_ = function () {
this.hideDialog();
};
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.currentDialog_ = {
id : dialogId,
controller : controller
};
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;
};
})();