frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dynamically generate keyboard shortcut help dialog

Browse Source
This commit is contained in:
Nick O'Leary
2017-01-11 11:35:48 +00:00
parent a55027b838
commit b1684e82d8
8 changed files with 87 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
editor/js/ui/clipboard.js
View File

@@ -275,8 +275,8 @@ RED.clipboard = (function() {
}
});
RED.actions.add("core:export",exportNodes);
RED.actions.add("core:import",importNodes);
RED.actions.add("core:show-export-dialog",exportNodes);
RED.actions.add("core:show-import-dialog",importNodes);
$('#chart').on("dragenter",function(event) {

79
editor/js/ui/keyboard.js
View File

@@ -253,7 +253,7 @@ RED.keyboard = (function() {
delete slot.ondown;
}
var dialog = null;
var shortcutDialog = null;
var cmdCtrlKey = '<span class="help-key">'+(isMac?'&#8984;':'Ctrl')+'</span>';
@@ -261,51 +261,60 @@ RED.keyboard = (function() {
if (!RED.settings.theme("menu.menu-item-keyboard-shortcuts",true)) {
return;
}
if (!dialog) {
dialog = $('<div id="keyboard-help-dialog" class="hide">'+
'<div style="vertical-align: top;display:inline-block; box-sizing: border-box; width:50%; padding: 10px;">'+
'<table class="keyboard-shortcuts">'+
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">a</span></td><td>'+RED._("keyboard.selectAll")+'</td></tr>'+
'<tr><td><span class="help-key">Shift</span> + <span class="help-key">Click</span></td><td>'+RED._("keyboard.selectAllConnected")+'</td></tr>'+
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">Click</span></td><td>'+RED._("keyboard.addRemoveNode")+'</td></tr>'+
'<tr><td>&nbsp;</td><td></td></tr>'+
'<tr><td><span class="help-key">Enter</span></td><td>'+RED._("keyboard.editSelected")+'</td></tr>'+
'<tr><td><span class="help-key">Delete</span> / <span class="help-key">Backspace</span></td><td>'+RED._("keyboard.deleteSelected")+'</td></tr>'+
'<tr><td>&nbsp;</td><td></td></tr>'+
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">i</span></td><td>'+RED._("keyboard.importNode")+'</td></tr>'+
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">e</span></td><td>'+RED._("keyboard.exportNode")+'</td></tr>'+
'</table>'+
'</div>'+
'<div style="vertical-align: top;display:inline-block; box-sizing: border-box; width:50%; padding: 10px;">'+
'<table class="keyboard-shortcuts">'+
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">Space</span></td><td>'+RED._("keyboard.toggleSidebar")+'</td></tr>'+
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">f</span></td><td>'+RED._("keyboard.searchBox")+'</td></tr>'+
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">Shift</span> + <span class="help-key">p</span></td><td>'+RED._("keyboard.managePalette")+'</td></tr>'+
'<tr><td>&nbsp;</td><td></td></tr>'+
'<tr><td><span class="help-key">&#x2190</span> <span class="help-key">&#x2191;</span> <span class="help-key">&#x2192;</span> <span class="help-key">&#x2193;</span></td><td>'+RED._("keyboard.nudgeNode")+'</td></tr>'+
'<tr><td><span class="help-key">Shift</span> + <span class="help-key">&#x2190;</span> <span class="help-key">&#x2191;</span> <span class="help-key">&#x2192;</span> <span class="help-key">&#x2193;</span></td><td>'+RED._("keyboard.moveNode")+'</td></tr>'+
'<tr><td>&nbsp;</td><td></td></tr>'+
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">c</span></td><td>'+RED._("keyboard.copyNode")+'</td></tr>'+
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">x</span></td><td>'+RED._("keyboard.cutNode")+'</td></tr>'+
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">v</span></td><td>'+RED._("keyboard.pasteNode")+'</td></tr>'+
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">z</span></td><td>'+RED._("keyboard.undoChange")+'</td></tr>'+
'</table>'+
'</div>'+
if (!shortcutDialog) {
shortcutDialog = $('<div id="keyboard-help-dialog" class="hide">'+
'<ol id="keyboard-shortcut-list"></ol>'+
'</div>')
.appendTo("body")
.dialog({
.appendTo("body");
var shortcutList = $('#keyboard-shortcut-list').editableList({
addButton: false,
scrollOnAdd: false,
addItem: function(container,i,object) {
var item = $('<div class="keyboard-shortcut-entry">').appendTo(container);
var key = $('<div class="keyboard-shortcut-entry-key">').appendTo(item);
key.append(formatKey(object.key));
var text = object.id.replace(/(^.+:([a-z]))|(-([a-z]))/g,function(_,_,A,_,B,pos) {
if (pos === 0) {
return A.toUpperCase();
} else {
return " "+B.toUpperCase();
}
});
var label = $('<div>').html(text).appendTo(item);
var scope = $('<div class="keyboard-shortcut-entry-scope">').html(object.scope).appendTo(item);
},
});
var shortcuts = RED.actions.list();
shortcuts.sort(function(A,B) {
return A.id.localeCompare(B.id);
});
shortcuts.forEach(function(s) {
if (s.key) {
shortcutList.editableList('addItem',s);
}
})
shortcutDialog.dialog({
modal: true,
autoOpen: false,
width: "800",
title:"Keyboard shortcuts",
height: "400",
title:RED._("keyboard.title"),
resizable: false
});
}
dialog.dialog("open");
shortcutDialog.dialog("open");
}
function formatKey(key) {
var formattedKey = isMac?key.replace(/ctrl-?/,"&#8984;"):key;
formattedKey = isMac?formattedKey.replace(/alt-?/,"&#8997;"):key;
formattedKey = formattedKey.replace(/shift-?/,"&#8679;")
formattedKey = formattedKey.replace(/left/,"&#x2190;")
formattedKey = formattedKey.replace(/up/,"&#x2191;")

12
editor/js/ui/view.js
View File

@@ -385,13 +385,13 @@ RED.view = (function() {
}
});
RED.actions.add("core:copy",copySelection);
RED.actions.add("core:cut",function(){copySelection();deleteSelection();});
RED.actions.add("core:paste",function(){importNodes(clipboard);});
RED.actions.add("core:delete",deleteSelection);
RED.actions.add("core:edit",editSelection);
RED.actions.add("core:copy-selection-to-internal-clipboard",copySelection);
RED.actions.add("core:cut-selection-to-internal-clipboard",function(){copySelection();deleteSelection();});
RED.actions.add("core:paste-from-internal-clipboard",function(){importNodes(clipboard);});
RED.actions.add("core:delete-selection",deleteSelection);
RED.actions.add("core:edit-selected-node",editSelection);
RED.actions.add("core:undo",RED.history.pop);
RED.actions.add("core:select-all",selectAll);
RED.actions.add("core:select-all-nodes",selectAll);
RED.actions.add("core:zoom-in",zoomIn);
RED.actions.add("core:zoom-out",zoomOut);
RED.actions.add("core:zoom-reset",zoomZero);