From 333acccff678d9fcc40a62bd697045900ea7564d Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Tue, 22 Mar 2016 13:13:57 +0000 Subject: [PATCH] Add subflow dialogs to the tray --- editor/js/ui/editor.js | 402 ++++++++++-------------------- editor/templates/index.mst | 33 ++- red/api/locales/en-US/editor.json | 8 +- 3 files changed, 152 insertions(+), 291 deletions(-) diff --git a/editor/js/ui/editor.js b/editor/js/ui/editor.js index 45682e87b..c87f27850 100644 --- a/editor/js/ui/editor.js +++ b/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,244 +993,145 @@ RED.editor = (function() { } } - function createNodeConfigDialog(){ - $( "#node-config-dialog" ).dialog({ - modal: true, - autoOpen: false, - dialogClass: "ui-dialog-no-close", - minWidth: 500, - width: 'auto', - closeOnEscape: false, - buttons: [ - { - id: "node-config-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; + function showEditSubflowDialog(subflow) { + var editing_node = subflow; + RED.view.state(RED.state.EDITING); + var subflowEditor; - 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 '); - - $("#node-config-dialog").parent().find('.ui-dialog-titlebar').append(''); - $("#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', + var trayOptions = { + title: RED._("subflow.editSubflow",{name:subflow.name}), buttons: [ { - id: "subflow-dialog-ok", + id: "node-dialog-ok", text: RED._("common.label.ok"), click: function() { - if (editing_node) { - var i; - var changes = {}; - var changed = false; - var wasDirty = RED.nodes.dirty(); + var i; + var changes = {}; + var changed = false; + var wasDirty = RED.nodes.dirty(); - var newName = $("#subflow-input-name").val(); + var newName = $("#subflow-input-name").val(); - if (newName != editing_node.name) { - changes['name'] = editing_node.name; - editing_node.name = newName; - changed = true; - $("#menu-item-workspace-menu-"+editing_node.id.replace(".","-")).text(newName); - } - - var newDescription = subflowEditor.getValue(); - - if (newDescription != editing_node.info) { - changes['info'] = editing_node.info; - editing_node.info = newDescription; - changed = true; - } - - RED.palette.refresh(); - - if (changed) { - var subflowInstances = []; - RED.nodes.eachNode(function(n) { - if (n.type == "subflow:"+editing_node.id) { - subflowInstances.push({ - id:n.id, - changed:n.changed - }) - n.changed = true; - n.dirty = true; - updateNodeProperties(n); - } - }); - var wasChanged = editing_node.changed; - editing_node.changed = true; - RED.nodes.dirty(true); - var historyEvent = { - t:'edit', - node:editing_node, - changes:changes, - dirty:wasDirty, - changed:wasChanged, - subflow: { - instances:subflowInstances - } - }; - - RED.history.push(historyEvent); - } - editing_node.dirty = true; - RED.view.redraw(true); + if (newName != editing_node.name) { + changes['name'] = editing_node.name; + editing_node.name = newName; + changed = true; + $("#menu-item-workspace-menu-"+editing_node.id.replace(".","-")).text(newName); } - $( this ).dialog( "close" ); + + var newDescription = subflowEditor.getValue(); + + if (newDescription != editing_node.info) { + changes['info'] = editing_node.info; + editing_node.info = newDescription; + changed = true; + } + + RED.palette.refresh(); + + if (changed) { + var subflowInstances = []; + RED.nodes.eachNode(function(n) { + if (n.type == "subflow:"+editing_node.id) { + subflowInstances.push({ + id:n.id, + changed:n.changed + }) + n.changed = true; + n.dirty = true; + updateNodeProperties(n); + } + }); + var wasChanged = editing_node.changed; + editing_node.changed = true; + RED.nodes.dirty(true); + var historyEvent = { + t:'edit', + node:editing_node, + changes:changes, + dirty:wasDirty, + changed:wasChanged, + subflow: { + instances:subflowInstances + } + }; + + RED.history.push(historyEvent); + } + editing_node.dirty = true; + RED.tray.close(); } }, { - id: "subflow-dialog-cancel", + id: "node-dialog-cancel", text: RED._("common.label.cancel"), click: function() { - $( this ).dialog( "close" ); - editing_node = null; + RED.tray.close(); } } ], - create: function(e) { - $("#subflow-dialog form" ).submit(function(e) { e.preventDefault();}); + resize: function() { + 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').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').prependTo(dialogForm); + + dialogForm.submit(function(e) { e.preventDefault();}); subflowEditor = RED.editor.createEditor({ id: 'subflow-input-info-editor', mode: 'ace/mode/markdown', value: "" }); + + $("#subflow-input-name").val(subflow.name); + subflowEditor.getSession().setValue(subflow.info,-1); + var userCount = 0; + var subflowType = "subflow:"+editing_node.id; + + RED.nodes.eachNode(function(n) { + if (n.type === subflowType) { + userCount++; + } + }); + $("#subflow-dialog-user-count").html(RED._("subflow.subflowInstances", {count:userCount})).show(); + dialogForm.i18n(); }, - open: function(e) { - RED.keyboard.disable(); - var minWidth = $(this).dialog('option','minWidth'); - if ($(this).outerWidth() < minWidth) { - $(this).dialog('option','width',minWidth); - } - }, - close: function(e) { + close: function() { RED.keyboard.enable(); if (RED.view.state() != RED.state.IMPORT_DRAGGING) { @@ -1243,43 +1141,10 @@ RED.editor = (function() { 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;iform").css("marginTop"))+parseInt($("#subflow-dialog>form").css("marginBottom"))); - $(".node-text-editor").css("height",height+"px"); - subflowEditor.resize(); + show: function() { } - }).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); - var userCount = 0; - var subflowType = "subflow:"+editing_node.id; - - RED.nodes.eachNode(function(n) { - if (n.type === subflowType) { - 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" ); + } + RED.tray.show(trayOptions); } @@ -1287,9 +1152,6 @@ RED.editor = (function() { return { init: function() { RED.tray.init(); - //createDialog(); - createNodeConfigDialog(); - createSubflowDialog(); }, edit: showEditDialog, editConfig: showEditConfigNodeDialog, diff --git a/editor/templates/index.mst b/editor/templates/index.mst index 36f158ddc..8813e21fd 100644 --- a/editor/templates/index.mst +++ b/editor/templates/index.mst @@ -92,23 +92,8 @@

-
-
-
-
-
- -
-
- - -
-
-
-
-
-
-
+
+
@@ -180,6 +165,20 @@
+ + diff --git a/red/api/locales/en-US/editor.json b/red/api/locales/en-US/editor.json index d92f97f45..c2a75fcdb 100644 --- a/red/api/locales/en-US/editor.json +++ b/red/api/locales/en-US/editor.json @@ -105,10 +105,10 @@ } }, "subflow": { - "editSubflow": "Edit flow __name__", - "edit": "Edit flow", - "subflowInstances": "There is __count__ instance of this subflow", - "subflowInstances_plural": "There are __count__ instances of this subflow", + "editSubflow": "Edit flow template: __name__", + "edit": "Edit flow template", + "subflowInstances": "There is __count__ instance of this subflow template", + "subflowInstances_plural": "There are __count__ instances of this subflow template", "editSubflowProperties": "edit properties", "input": "inputs:", "output": "outputs:",