mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Issue #287 : Add forbidden keys & helptext
This commit is contained in:
parent
676cbd17ea
commit
0b439e1b00
|
@ -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;
|
||||
}
|
|
@ -44,10 +44,6 @@
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
.animated #dialog-container {
|
||||
transition:margin-top 0.2s;
|
||||
}
|
||||
|
||||
.show #dialog-container {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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');
|
||||
this.eventTrapInput.focus();
|
||||
};
|
||||
|
||||
ns.CheatsheetController.prototype.onEventTrapKeydown_ = function (evt) {
|
||||
var editedShortcutEl = document.querySelector('.cheatsheet-shortcut-editing');
|
||||
if (!editedShortcutEl) {
|
||||
return;
|
||||
}
|
||||
|
||||
var shortcutId = shortcutEl.dataset.shortcutId;
|
||||
var shortcut = pskl.service.keyboard.Shortcuts.getShortcutById(shortcutId);
|
||||
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(),
|
||||
shortcutIcon : descriptor.iconClass,
|
||||
shortcutDescription : description,
|
||||
shortcutKey : this.formatKey_(shortcut.getDisplayKey()),
|
||||
shortcutClass : shortcutClass
|
||||
id : shortcut.getId(),
|
||||
title : title,
|
||||
icon : descriptor.iconClass,
|
||||
description : description,
|
||||
key : this.formatKey_(shortcut.getDisplayKey()),
|
||||
className : shortcutClasses.join(' ')
|
||||
});
|
||||
|
||||
return markup;
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -20,18 +20,22 @@
|
|||
<h3 class="cheatsheet-title">Storage shortcuts</h3>
|
||||
<ul class="cheatsheet-storage-shortcuts"></ul>
|
||||
</div>
|
||||
<div class="cheatsheet-actions">
|
||||
<button type="button" name="cheatsheet-restore-defaults" data-action="restore-defaults" class="button cheatsheet-restore-defaults">Restore default shortcuts</button>
|
||||
</div>
|
||||
<div style="position:relative;overflow:hidden; width:1px; height:1px">
|
||||
<input type="text" id="cheatsheet-event-trap" style="position:absolute; top:-1000px;" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="cheatsheet-actions">
|
||||
<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>
|
||||
<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>
|
||||
<button type="button" name="cheatsheet-restore-defaults" data-action="restore-defaults" class="button cheatsheet-button cheatsheet-restore-defaults">Restore default shortcuts</button>
|
||||
</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}}">
|
||||
<div class="cheatsheet-icon {{shortcutIcon}}"></div>
|
||||
<span class="cheatsheet-key">{{shortcutKey}}</span>
|
||||
<span class="cheatsheet-description">{{shortcutDescription}}</span>
|
||||
<li class="cheatsheet-shortcut {{className}}" data-shortcut-id="{{id}}">
|
||||
<div class="cheatsheet-icon {{icon}}"></div>
|
||||
<span class="cheatsheet-key" rel="tooltip" data-placement="top" title="{{title}}">{{key}}</span>
|
||||
<span class="cheatsheet-description">{{description}}</span>
|
||||
</li>
|
||||
</script>
|
Loading…
Reference in New Issue
Block a user