diff --git a/Gruntfile.js b/Gruntfile.js index c301c6c9c..f6fb3e19a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -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", diff --git a/packages/node_modules/@node-red/editor-client/src/js/keymap.json b/packages/node_modules/@node-red/editor-client/src/js/keymap.json index 5ae7cd10d..b3544c124 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/keymap.json +++ b/packages/node_modules/@node-red/editor-client/src/js/keymap.json @@ -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", diff --git a/packages/node_modules/@node-red/editor-client/src/js/red.js b/packages/node_modules/@node-red/editor-client/src/js/red.js index e7613103d..d8962c44a 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/red.js +++ b/packages/node_modules/@node-red/editor-client/src/js/red.js @@ -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(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js index 6971dc787..8c8d3a664 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js @@ -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; }); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/commandPrompt.js b/packages/node_modules/@node-red/editor-client/src/js/ui/commandPrompt.js new file mode 100644 index 000000000..e86fde55a --- /dev/null +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/commandPrompt.js @@ -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 = $("
",{id:"red-ui-commandPrompt",class:"red-ui-search"}).appendTo("#red-ui-main-container"); + var searchDiv = $("
",{class:"red-ui-search-container"}).appendTo(dialog); + 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 = $("
",{class:"red-ui-search-results-container"}).appendTo(dialog); + searchResults = $('
    ',{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) { + $('
    ',{class:"red-ui-search-empty"}).text(RED._('search.empty')).appendTo(container); + } else { + var div = $('',{href:'#',class:"red-ui-search-result"}).appendTo(container); + var contentDiv = $('
    ',{class:"red-ui-search-result-action"}).appendTo(div); + + + $('
    ').text(action.label).appendTo(contentDiv); + // $('
    ',{class:"red-ui-search-result-node-type"}).text(node.type).appendTo(contentDiv); + // $('
    ',{class:"red-ui-search-result-node-id"}).text(node.id).appendTo(contentDiv); + if (action.key) { + $('
    ',{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 + }; + +})(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js index d814ab738..74072065a 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js @@ -216,7 +216,7 @@ RED.search = (function() { var iconContainer = $('
    ',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); RED.utils.createIconElement(icon_url, iconContainer, true); - var contentDiv = $('
    ',{class:"red-ui-search-result-description"}).appendTo(div); + var contentDiv = $('
    ',{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; }); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/search.scss b/packages/node_modules/@node-red/editor-client/src/sass/search.scss index a63bd4457..2fd016508 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/search.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/search.scss @@ -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; +}