frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Add command prompt dialog

Browse Source
This commit is contained in:
Nick O'Leary 2019-06-07 11:29:18 +01:00
parent 8cf5ec9e5a
commit ffeb2e91f4
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
7 changed files with 247 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Gruntfile.js
View File

@ -169,6 +169,7 @@ module.exports = function(grunt) {
"packages/node_modules/@node-red/editor-client/src/js/ui/library.js",
"packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js",
"packages/node_modules/@node-red/editor-client/src/js/ui/search.js",
"packages/node_modules/@node-red/editor-client/src/js/ui/commandPrompt.js",
"packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js",
"packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js",
"packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js",

3
packages/node_modules/@node-red/editor-client/src/js/keymap.json vendored
View File

@ -22,7 +22,8 @@
"ctrl-alt-n": "core:new-project",
"ctrl-alt-o": "core:open-project",
"ctrl-g v": "core:show-version-control-tab",
"ctrl-shift-l": "core:show-event-log"
"ctrl-shift-l": "core:show-event-log",
"ctrl-shift-p":"core:show-command-prompt"
},
"red-ui-sidebar-node-config": {
"backspace": "core:delete-config-selection",

1
packages/node_modules/@node-red/editor-client/src/js/red.js vendored
View File

@ -521,6 +521,7 @@ var RED = (function() {
RED.subflow.init();
RED.clipboard.init();
RED.search.init();
RED.commandPrompt.init();
RED.editor.init();
RED.diff.init();

2
packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js vendored
View File

@ -742,6 +742,8 @@ RED.clipboard = (function() {
RED.events.on("editor:close",function() { disabled = false; });
RED.events.on("search:open",function() { disabled = true; });
RED.events.on("search:close",function() { disabled = false; });
RED.events.on("commandPrompt:open",function() { disabled = true; });
RED.events.on("commandPrompt:close",function() { disabled = false; });
RED.events.on("type-search:open",function() { disabled = true; });
RED.events.on("type-search:close",function() { disabled = false; });

228
packages/node_modules/@node-red/editor-client/src/js/ui/commandPrompt.js vendored Normal file
View File

@ -0,0 +1,228 @@
/**
* Copyright JS Foundation and other contributors, http://js.foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
**/
RED.commandPrompt = (function() {
var disabled = false;
var dialog = null;
var searchInput;
var searchResults;
var selected = -1;
var visible = false;
var activeElement;
var results = [];
var scopes = {};
function search(val) {
scopes = {};
val = val ||"";
searchResults.editableList('empty');
var actions = RED.actions.list();
actions.sort(function(A,B) {
return A.id.localeCompare(B.id);
});
val = val.trim().toLowerCase();
actions.forEach(function(action) {
if (action.scope && action.scope !== "*") {
if (!scopes.hasOwnProperty(action.scope)) {
var target = activeElement;
while (target.nodeName !== 'BODY' && target.id !== action.scope) {
target = target.parentElement;
}
scopes[action.scope] = (target.nodeName !== 'BODY')
}
if (!scopes[action.scope]) {
return;
}
}
action.label = action.id.replace(/:/,": ").replace(/-/g," ").replace(/(^| )./g,function() { return arguments[0].toUpperCase()});
if (val !== "" && action.label.toLowerCase().indexOf(val) === -1) {
return;
}
results.push(action);
searchResults.editableList('addItem',action)
})
// searchResults.editableList('addItem',{});
console.log(document.activeElement);
}
function ensureSelectedIsVisible() {
var selectedEntry = searchResults.find("li.selected");
if (selectedEntry.length === 1) {
var scrollWindow = searchResults.parent();
var scrollHeight = scrollWindow.height();
var scrollOffset = scrollWindow.scrollTop();
var y = selectedEntry.position().top;
var h = selectedEntry.height();
if (y+h > scrollHeight) {
scrollWindow.animate({scrollTop: '-='+(scrollHeight-(y+h)-10)},50);
} else if (y<0) {
scrollWindow.animate({scrollTop: '+='+(y-10)},50);
}
}
}
function createDialog() {
dialog = $("<div>",{id:"red-ui-commandPrompt",class:"red-ui-search"}).appendTo("#red-ui-main-container");
var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(dialog);
searchInput = $('<input type="text" data-i18n="[placeholder]menu.label.searchInput">').appendTo(searchDiv).searchBox({
delay: 200,
change: function() {
search($(this).val());
}
});
searchInput.on('keydown',function(evt) {
var children;
if (results.length > 0) {
if (evt.keyCode === 40) {
// Down
children = searchResults.children();
if (selected < children.length-1) {
if (selected > -1) {
$(children[selected]).removeClass('selected');
}
selected++;
}
$(children[selected]).addClass('selected');
ensureSelectedIsVisible();
evt.preventDefault();
} else if (evt.keyCode === 38) {
// Up
children = searchResults.children();
if (selected > 0) {
if (selected < children.length) {
$(children[selected]).removeClass('selected');
}
selected--;
}
$(children[selected]).addClass('selected');
ensureSelectedIsVisible();
evt.preventDefault();
} else if (evt.keyCode === 13) {
// Enter
if (results.length > 0) {
selectCommand(results[Math.max(0,selected)]);
}
}
}
});
searchInput.i18n();
var searchResultsDiv = $("<div>",{class:"red-ui-search-results-container"}).appendTo(dialog);
searchResults = $('<ol>',{style:"position: absolute;top: 5px;bottom: 5px;left: 5px;right: 5px;"}).appendTo(searchResultsDiv).editableList({
addButton: false,
addItem: function(container,i,action) {
if (action.id === undefined) {
$('<div>',{class:"red-ui-search-empty"}).text(RED._('search.empty')).appendTo(container);
} else {
var div = $('<a>',{href:'#',class:"red-ui-search-result"}).appendTo(container);
var contentDiv = $('<div>',{class:"red-ui-search-result-action"}).appendTo(div);
$('<div>').text(action.label).appendTo(contentDiv);
// $('<div>',{class:"red-ui-search-result-node-type"}).text(node.type).appendTo(contentDiv);
// $('<div>',{class:"red-ui-search-result-node-id"}).text(node.id).appendTo(contentDiv);
if (action.key) {
$('<div>',{class:"red-ui-search-result-action-key"}).html(RED.keyboard.formatKey(action.key)).appendTo(contentDiv);
}
div.on("click", function(evt) {
evt.preventDefault();
selectCommand(action);
});
}
},
scrollOnAdd: false
});
}
function selectCommand(command) {
hide();
RED.actions.invoke(command.id);
console.log(command);
}
function show(v) {
if (disabled) {
return;
}
if (!visible) {
activeElement = document.activeElement;
RED.keyboard.add("*","escape",function(){hide()});
$("#red-ui-header-shade").show();
$("#red-ui-editor-shade").show();
$("#red-ui-palette-shade").show();
$("#red-ui-sidebar-shade").show();
$("#red-ui-sidebar-separator").hide();
if (dialog === null) {
createDialog();
}
dialog.slideDown(300);
searchInput.searchBox('value',v)
search(v);
RED.events.emit("commandPrompt:open");
visible = true;
}
searchInput.trigger("focus");
}
function hide() {
if (visible) {
RED.keyboard.remove("escape");
visible = false;
$("#red-ui-header-shade").hide();
$("#red-ui-editor-shade").hide();
$("#red-ui-palette-shade").hide();
$("#red-ui-sidebar-shade").hide();
$("#red-ui-sidebar-separator").show();
if (dialog !== null) {
dialog.slideUp(200,function() {
searchInput.searchBox('value','');
});
}
RED.events.emit("commandPrompt:close");
}
}
function init() {
RED.actions.add("core:show-command-prompt",show);
RED.events.on("editor:open",function() { disabled = true; });
RED.events.on("editor:close",function() { disabled = false; });
RED.events.on("search:open",function() { disabled = true; });
RED.events.on("search:close",function() { disabled = false; });
RED.events.on("type-search:open",function() { disabled = true; });
RED.events.on("type-search:close",function() { disabled = false; });
$("#red-ui-header-shade").on('mousedown',hide);
$("#red-ui-editor-shade").on('mousedown',hide);
$("#red-ui-palette-shade").on('mousedown',hide);
$("#red-ui-sidebar-shade").on('mousedown',hide);
}
return {
init: init,
show: show,
hide: hide
};
})();

4
packages/node_modules/@node-red/editor-client/src/js/ui/search.js vendored
View File

@ -216,7 +216,7 @@ RED.search = (function() {
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
RED.utils.createIconElement(icon_url, iconContainer, true);
var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
var contentDiv = $('<div>',{class:"red-ui-search-result-node-description"}).appendTo(div);
if (node.z) {
var workspace = RED.nodes.workspace(node.z);
if (!workspace) {
@ -296,6 +296,8 @@ RED.search = (function() {
RED.events.on("editor:close",function() { disabled = false; });
RED.events.on("type-search:open",function() { disabled = true; });
RED.events.on("type-search:close",function() { disabled = false; });
RED.events.on("commandPrompt:open",function() { disabled = true; });
RED.events.on("commandPrompt:close",function() { disabled = false; });

11
packages/node_modules/@node-red/editor-client/src/sass/search.scss vendored
View File

@ -165,7 +165,7 @@
}
}
.red-ui-search-result-description {
.red-ui-search-result-node-description {
margin-left: 40px;
margin-right: 5px;
}
@ -193,3 +193,12 @@
font-style: italic;
color: $form-placeholder-color;
}
.red-ui-search-result-action {
color: $primary-text-color;
}
.red-ui-search-result-action-key {
float:right;
margin-right: 10px;
color: $tertiary-text-color;
}