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 : Edit shortcuts from cheatsheet window (WIP)

Browse Source
This commit is contained in:
jdescottes
2015-10-11 23:51:50 +02:00
parent 2e3558ef08
commit 676cbd17ea
16 changed files with 331 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/js/controller/dialogs/CheatsheetController.js
View File

@ -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.cheatsheetEl = document.getElementById('cheatsheetContainer');
if (!this.cheatsheetEl) {
throw 'cheatsheetEl DOM element could not be retrieved';
}
this.superclass.init.call(this);
this.cheatsheetEl = document.getElementById('cheatsheetContainer');
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;
}
shortcutEl.classList.add('cheatsheet-shortcut-editing');
this.eventTrapInput.focus();
};
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);
var newKeys = window.prompt('Please enter the new key', shortcut.getKeys().join(', '));
shortcut.updateKeys(newKeys);
pskl.service.keyboard.Shortcuts.updateShortcut(shortcut, shortcutKeyString);
this.eventTrapInput.blur();
evt.preventDefault();
};
ns.CheatsheetController.prototype.initMarkup_ = function () {
this.initMarkupForTools_();
this.initMarkupForMisc_();
this.initMarkupForColors_();
this.initMarkupForSelection_();
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.initMarkupForTools_ = function () {
var descriptors = this.createShortcutDescriptors_(this.shortcuts.TOOL, this.getToolShortcutClassname_);
this.initMarkupForDescriptors_(descriptors, '.cheatsheet-tool-shortcuts');
};
ns.CheatsheetController.prototype.getToolShortcutClassname_ = function (shortcut) {
ns.CheatsheetController.prototype.getToolIconClass_ = 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.initMarkupForCategory_ = function (category, container, iconClassProvider) {
var shortcutMap = pskl.service.keyboard.Shortcuts[category];
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, classname);
var descriptors = Object.keys(shortcutMap).map(function (shortcutKey) {
return this.toDescriptor_(shortcutMap[shortcutKey], iconClassProvider);
}.bind(this));
this.initMarkupForDescriptors_(descriptors, container);
};
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', '￪');
key = key.replace('down', '￬');
key = key.replace(/>/g, '>');
key = key.replace(/</g, '&lt;');
key = key.replace(/^(.*[^ ])\+([^ ].*)$/g, '$1 + $2');
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;
};
})();