Add subflow dialogs to the tray

editor/js/ui/editor.js

@@ -173,10 +173,6 @@ RED.editor = (function() {
         return removedLinks;
     }
 
-    function createDialog(){
-        return;
-    };
-
     /**
      * Create a config-node select box for this property
      * @param node - the node being edited
@@ -397,17 +393,6 @@ RED.editor = (function() {
         var type = node.type;
         if (node.type.substring(0,8) == "subflow:") {
             type = "subflow";
-            var id = editing_node.type.substring(8);
-            var buttons = $( "#dialog" ).dialog("option","buttons");
-            buttons.unshift({
-                class: 'leftButton',
-                text: RED._("subflow.edit"),
-                click: function() {
-                    RED.workspaces.show(id);
-                    $("#node-dialog-ok").click();
-                }
-            });
-            $( "#dialog" ).dialog("option","buttons",buttons);
         }
         var trayOptions = {
             title: "Edit "+type+" node",
@@ -659,6 +644,18 @@ RED.editor = (function() {
             }
         });
         */
+        if (type === 'subflow') {
+            var id = editing_node.type.substring(8);
+            trayOptions.buttons.unshift({
+                class: 'leftButton',
+                text: RED._("subflow.edit"),
+                click: function() {
+                    RED.workspaces.show(id);
+                    $("#node-dialog-ok").click();
+                }
+            });
+        }
+
         RED.tray.show(trayOptions);
     }
     /**
@@ -996,160 +993,18 @@ RED.editor = (function() {
         }
     }
 
-    function createNodeConfigDialog(){
+    function showEditSubflowDialog(subflow) {
-        $( "#node-config-dialog" ).dialog({
+        var editing_node = subflow;
-                modal: true,
+        RED.view.state(RED.state.EDITING);
-                autoOpen: false,
+        var subflowEditor;
-                dialogClass: "ui-dialog-no-close",
+
-                minWidth: 500,
+        var trayOptions = {
-                width: 'auto',
+            title: RED._("subflow.editSubflow",{name:subflow.name}),
-                closeOnEscape: false,
             buttons: [
                 {
-                        id: "node-config-dialog-ok",
+                    id: "node-dialog-ok",
                     text: RED._("common.label.ok"),
                     click: function() {
-                            var configProperty = $(this).dialog('option','node-property');
-                            var configId = $(this).dialog('option','node-id');
-                            var configType = $(this).dialog('option','node-type');
-                            var configAdding = $(this).dialog('option','node-adding');
-                            var configTypeDef = RED.nodes.getType(configType);
-                            var d;
-                            var input;
-                            var scope = $("#node-config-dialog-scope").val();
-                            for (d in configTypeDef.defaults) {
-                                if (configTypeDef.defaults.hasOwnProperty(d)) {
-                                    input = $("#node-config-input-"+d);
-                                    if (input.attr('type') === "checkbox") {
-                                      editing_config_node[d] = input.prop('checked');
-                                    } else {
-                                      editing_config_node[d] = input.val();
-                                    }
-                                }
-                            }
-                            editing_config_node.label = configTypeDef.label;
-                            editing_config_node.z = scope;
-
-                            if (scope) {
-                                editing_config_node.users = editing_config_node.users.filter(function(n) {
-                                    var keep = true;
-                                    for (var d in n._def.defaults) {
-                                        if (n._def.defaults.hasOwnProperty(d)) {
-                                            if (n._def.defaults[d].type === editing_config_node.type &&
-                                                n[d] === editing_config_node.id &&
-                                                n.z !== scope) {
-                                                    keep = false;
-                                                    n[d] = null;
-                                                    n.dirty = true;
-                                                    n.changed = true;
-                                                    validateNode(n);
-                                            }
-                                        }
-                                    }
-                                    return keep;
-                                });
-                            }
-
-                            if (configAdding) {
-                                RED.nodes.add(editing_config_node);
-                            }
-
-                            if (configTypeDef.oneditsave) {
-                                configTypeDef.oneditsave.call(editing_config_node);
-                            }
-                            if (configTypeDef.credentials) {
-                                updateNodeCredentials(editing_config_node,configTypeDef.credentials,"node-config-input");
-                            }
-                            validateNode(editing_config_node);
-                            for (var i=0;i<editing_config_node.users.length;i++) {
-                                var user = editing_config_node.users[i];
-                                validateNode(user);
-                            }
-
-                            updateConfigNodeSelect(configProperty,configType,editing_config_node.id);
-
-                            RED.nodes.dirty(true);
-                            RED.view.redraw(true);
-                            $(this).dialog("close");
-
-                        }
-                    },
-                    {
-                        id: "node-config-dialog-cancel",
-                        text: RED._("common.label.cancel"),
-                        click: function() {
-                            var configType = $(this).dialog('option','node-type');
-                            var configId = $(this).dialog('option','node-id');
-                            var configAdding = $(this).dialog('option','node-adding');
-                            var configTypeDef = RED.nodes.getType(configType);
-
-                            if (configTypeDef.oneditcancel) {
-                                // TODO: what to pass as this to call
-                                if (configTypeDef.oneditcancel) {
-                                    var cn = RED.nodes.node(configId);
-                                    if (cn) {
-                                        configTypeDef.oneditcancel.call(cn,false);
-                                    } else {
-                                        configTypeDef.oneditcancel.call({id:configId},true);
-                                    }
-                                }
-                            }
-                            $( this ).dialog( "close" );
-                        }
-                    }
-                ],
-                resize: function(e,ui) {
-                },
-                open: function(e) {
-                    var minWidth = $(this).dialog('option','minWidth');
-                    if ($(this).outerWidth() < minWidth) {
-                        $(this).dialog('option','width',minWidth);
-                    }
-                    if (RED.view.state() != RED.state.EDITING) {
-                        RED.keyboard.disable();
-                    }
-                },
-                close: function(e) {
-                    $(this).dialog('option','width','auto');
-                    $(this).dialog('option','height','auto');
-                    $("#node-config-dialog-edit-form").html("");
-                    if (RED.view.state() != RED.state.EDITING) {
-                        RED.keyboard.enable();
-                    }
-                    RED.workspaces.refresh();
-                },
-                create: function() {
-                    $("#node-config-dialog").parent().find("div.ui-dialog-buttonpane")
-                        .prepend('<div id="node-config-dialog-user-count"><i class="fa fa-info-circle"></i> <span></span></div>');
-
-                    $("#node-config-dialog").parent().find('.ui-dialog-titlebar').append('<span id="node-config-dialog-scope-container"><span id="node-config-dialog-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="node-config-dialog-scope"></select></span>');
-                    $("#node-config-dialog").parent().draggable({
-                        cancel: '.ui-dialog-content, .ui-dialog-titlebar-close, #node-config-dialog-scope-container'
-                    });
-                }
-        }).parent().on('keydown', function(evt) {
-            if (evt.keyCode === $.ui.keyCode.ESCAPE && (evt.metaKey || evt.ctrlKey)) {
-                $("#node-config-dialog-cancel").click();
-            } else if (evt.keyCode === $.ui.keyCode.ENTER && (evt.metaKey || evt.ctrlKey)) {
-                $("#node-config-dialog-ok").click();
-            }
-        });
-    }
-
-    function createSubflowDialog(){
-        $( "#subflow-dialog" ).dialog({
-            modal: true,
-            autoOpen: false,
-            dialogClass: "ui-dialog-no-close",
-            closeOnEscape: false,
-            minWidth: 500,
-            width: 'auto',
-            buttons: [
-                {
-                    id: "subflow-dialog-ok",
-                    text: RED._("common.label.ok"),
-                    click: function() {
-                        if (editing_node) {
                         var i;
                         var changes = {};
                         var changed = false;
@@ -1204,68 +1059,64 @@ RED.editor = (function() {
                             RED.history.push(historyEvent);
                         }
                         editing_node.dirty = true;
-                            RED.view.redraw(true);
+                        RED.tray.close();
-                        }
-                        $( this ).dialog( "close" );
                     }
                 },
                 {
-                    id: "subflow-dialog-cancel",
+                    id: "node-dialog-cancel",
                     text: RED._("common.label.cancel"),
                     click: function() {
-                        $( this ).dialog( "close" );
+                        RED.tray.close();
-                        editing_node = null;
                     }
                 }
             ],
-            create: function(e) {
+            resize: function() {
-                $("#subflow-dialog form" ).submit(function(e) { e.preventDefault();});
+                setTimeout(function() {
+                    var rows = $("#dialog-form>div:not(.node-text-editor-row)");
+                    var editorRow = $("#dialog-form>div.node-text-editor-row");
+                    var height = $("#dialog-form").height();
+                    for (var i=0;i<rows.size();i++) {
+                        height -= $(rows[i]).outerHeight(true);
+                    }
+                    height -= (parseInt($("#dialog-form").css("marginTop"))+parseInt($("#dialog-form").css("marginBottom")));
+                    $(".node-text-editor").css("height",height+"px");
+                    subflowEditor.resize();
+                },0);
+            },
+            open: function(tray) {
+                if (editing_node) {
+                    RED.sidebar.info.refresh(editing_node);
+                }
+                var trayBody = tray.find('.editor-tray-body');
+                RED.keyboard.disable();
+                var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(trayBody);
+                dialogForm.html($("script[data-template-name='subflow-template']").html());
+                var ns = "node-red";
+                dialogForm.find('[data-i18n]').each(function() {
+                    var current = $(this).attr("data-i18n");
+                    var keys = current.split(";");
+                    for (var i=0;i<keys.length;i++) {
+                        var key = keys[i];
+                        if (key.indexOf(":") === -1) {
+                            var prefix = "";
+                            if (key.indexOf("[")===0) {
+                                var parts = key.split("]");
+                                prefix = parts[0]+"]";
+                                key = parts[1];
+                            }
+                            keys[i] = prefix+ns+":"+key;
+                        }
+                    }
+                    $(this).attr("data-i18n",keys.join(";"));
+                });
+                $('<input type="text" style="display: none;" />').prependTo(dialogForm);
+
+                dialogForm.submit(function(e) { e.preventDefault();});
                 subflowEditor = RED.editor.createEditor({
                     id: 'subflow-input-info-editor',
                     mode: 'ace/mode/markdown',
                     value: ""
                 });
-            },
-            open: function(e) {
-                RED.keyboard.disable();
-                var minWidth = $(this).dialog('option','minWidth');
-                if ($(this).outerWidth() < minWidth) {
-                    $(this).dialog('option','width',minWidth);
-                }
-            },
-            close: function(e) {
-                RED.keyboard.enable();
-
-                if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
-                    RED.view.state(RED.state.DEFAULT);
-                }
-                RED.sidebar.info.refresh(editing_node);
-                RED.workspaces.refresh();
-                editing_node = null;
-            },
-            resize: function(e) {
-                var rows = $("#subflow-dialog>form>div:not(.node-text-editor-row)");
-                var editorRow = $("#subflow-dialog>form>div.node-text-editor-row");
-                var height = $("#subflow-dialog").height();
-                for (var i=0;i<rows.size();i++) {
-                    height -= $(rows[i]).outerHeight(true);
-                }
-                height -= (parseInt($("#subflow-dialog>form").css("marginTop"))+parseInt($("#subflow-dialog>form").css("marginBottom")));
-                $(".node-text-editor").css("height",height+"px");
-                subflowEditor.resize();
-            }
-        }).parent().on('keydown', function(evt) {
-            if (evt.keyCode === $.ui.keyCode.ESCAPE && (evt.metaKey || evt.ctrlKey)) {
-                $("#subflow-dialog-cancel").click();
-            } else if (evt.keyCode === $.ui.keyCode.ENTER && (evt.metaKey || evt.ctrlKey)) {
-                $("#subflow-dialog-ok").click();
-            }
-        });
-    }
-
-    function showEditSubflowDialog(subflow) {
-        editing_node = subflow;
-        RED.view.state(RED.state.EDITING);
 
                 $("#subflow-input-name").val(subflow.name);
                 subflowEditor.getSession().setValue(subflow.info,-1);
@@ -1277,9 +1128,23 @@ RED.editor = (function() {
                         userCount++;
                     }
                 });
-
                 $("#subflow-dialog-user-count").html(RED._("subflow.subflowInstances", {count:userCount})).show();
-        $("#subflow-dialog").dialog("option","title",RED._("subflow.editSubflow",{name:subflow.name})).dialog( "open" );
+                dialogForm.i18n();
+            },
+            close: function() {
+                RED.keyboard.enable();
+
+                if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
+                    RED.view.state(RED.state.DEFAULT);
+                }
+                RED.sidebar.info.refresh(editing_node);
+                RED.workspaces.refresh();
+                editing_node = null;
+            },
+            show: function() {
+            }
+        }
+        RED.tray.show(trayOptions);
     }
 
 
@@ -1287,9 +1152,6 @@ RED.editor = (function() {
     return {
         init: function() {
             RED.tray.init();
-            //createDialog();
-            createNodeConfigDialog();
-            createSubflowDialog();
         },
         edit: showEditDialog,
         editConfig: showEditConfigNodeDialog,

editor/templates/index.mst

@@ -92,23 +92,8 @@
 <div id="notifications"></div>
 <div id="dropTarget"><div data-i18n="[append]workspace.dropFlowHere"><br/><i class="fa fa-download"></i></div></div>
 
-<div id="dialog2" class="hide"><form id="dialog-form2" class="form-horizontal"></form></div>
+<div id="dialog-REMOVE" class="hide"><form id="dialog-form2" class="form-horizontal"></form></div>
-<div id="node-config-dialog" class="hide"><form id="dialog-config-form" class="form-horizontal"><div id="node-config-dialog-edit-form"></div><!--<div id="node-config-dialog-toolbar" class="form-row"><label><span>Node scope</span></label><select id="node-config-dialog-scope"></select></div>--></form></div>
+<div id="node-config-dialog-REMOVE" class="hide"><form id="dialog-config-form" class="form-horizontal"><div id="node-config-dialog-edit-form"></div><!--<div id="node-config-dialog-toolbar" class="form-row"><label><span>Node scope</span></label><select id="node-config-dialog-scope"></select></div>--></form></div>
-<div id="subflow-dialog" class="hide">
-    <form class="form-horizontal">
-        <div class="form-row">
-            <label for="subflow-input-name" data-i18n="common.label.name"></label><input type="text" id="subflow-input-name">
-        </div>
-        <div class="form-row" style="margin-bottom: 0px;">
-            <label for="subflow-input-info" data-i18n="subflow.info"></label>
-            <a href="https://help.github.com/articles/markdown-basics/" style="font-size: 0.8em; float: right;" data-i18n="[html]subflow.format"></a>
-        </div>
-        <div class="form-row node-text-editor-row">
-            <div style="height: 250px;" class="node-text-editor" id="subflow-input-info-editor"></div>
-        </div>
-        <div class="form-row form-tips" id="subflow-dialog-user-count"></div>
-    </form>
-</div>
 
 <div id="node-dialog-confirm-deploy" class="hide">
     <form class="form-horizontal">
@@ -180,6 +165,20 @@
     </div>
 </script>
 
+<script type="text/x-red" data-template-name="subflow-template">
+    <div class="form-row">
+        <label for="subflow-input-name" data-i18n="common.label.name"></label><input type="text" id="subflow-input-name">
+    </div>
+    <div class="form-row" style="margin-bottom: 0px;">
+        <label for="subflow-input-info" data-i18n="subflow.info"></label>
+        <a href="https://help.github.com/articles/markdown-basics/" style="font-size: 0.8em; float: right;" data-i18n="[html]subflow.format"></a>
+    </div>
+    <div class="form-row node-text-editor-row">
+        <div style="height: 250px;" class="node-text-editor" id="subflow-input-info-editor"></div>
+    </div>
+    <div class="form-row form-tips" id="subflow-dialog-user-count"></div>
+</script>
+
 <script src="vendor/vendor.js"></script>
 <script src="vendor/ace/ace.js"></script>
 <script src="vendor/ace/ext-language_tools.js"></script>

red/api/locales/en-US/editor.json

@@ -105,10 +105,10 @@
         }
     },
     "subflow": {
-        "editSubflow": "Edit flow __name__",
+        "editSubflow": "Edit flow template: __name__",
-        "edit": "Edit flow",
+        "edit": "Edit flow template",
-        "subflowInstances": "There is __count__ instance of this subflow",
+        "subflowInstances": "There is __count__ instance of this subflow template",
-        "subflowInstances_plural": "There are __count__ instances of this subflow",
+        "subflowInstances_plural": "There are __count__ instances of this subflow template",
         "editSubflowProperties": "edit properties",
         "input": "inputs:",
         "output": "outputs:",