Add command prompt dialog

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",

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",

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();
 

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; });
 

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 = $("<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
+    };
+
+})();

packages/node_modules/@node-red/editor-client/src/js/ui/search.js

@@ -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; });
 
 
 

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;
+}