mirror of https://github.com/node-red/node-red.git
Add command prompt dialog
This commit is contained in:
Nick O'Leary
parent
8cf5ec9e5a
commit
ffeb2e91f4
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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; });
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
|
||||
})();
|
||||
|
|
@ -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; });
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue