Skip to content

Commit ce25fc6

Browse files
knollearyknolleary
committed
Move edit tray buttons to top
1 parent 8080ebc commit ce25fc6

7 files changed

Lines changed: 318 additions & 207 deletions

File tree

‎editor/js/ui/editor.js‎

Lines changed: 125 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
**/
1616
RED.editor = (function() {
1717

18+
19+
var editStack = [];
1820
var editing_node = null;
1921
var editing_config_node = null;
2022
var subflowEditor;
@@ -417,19 +419,86 @@ RED.editor = (function() {
417419
}
418420
}
419421

422+
function getEditStackTitle() {
423+
424+
var title = '<ul class="editor-tray-breadcrumbs">';
425+
for (var i=0;i<editStack.length;i++) {
426+
var node = editStack[i];
427+
var label = node.type;
428+
if (node.type === 'subflow') {
429+
label = RED._("subflow.editSubflow",{name:node.name})
430+
} else if (node.type.indexOf("subflow:")===0) {
431+
var subflow = RED.nodes.subflow(node.type.substring(8));
432+
label = RED._("subflow.editSubflow",{name:subflow.name})
433+
} else {
434+
if (typeof node._def.paletteLabel !== "undefined") {
435+
try {
436+
label = (typeof node._def.paletteLabel === "function" ? node._def.paletteLabel.call(node._def) : node._def.paletteLabel)||"";
437+
} catch(err) {
438+
console.log("Definition error: "+node.type+".paletteLabel",err);
439+
}
440+
}
441+
if (i === editStack.length-1) {
442+
if (RED.nodes.node(node.id)) {
443+
label = RED._("editor.editNode",{type:label});
444+
} else {
445+
label = RED._("editor.addNewConfig",{type:label});
446+
}
447+
}
448+
}
449+
title += '<li>'+label+'</li>';
450+
}
451+
title += '</ul>';
452+
return title;
453+
}
454+
420455
function showEditDialog(node) {
421456
var editing_node = node;
457+
editStack.push(node);
422458
RED.view.state(RED.state.EDITING);
423459
var type = node.type;
424460
if (node.type.substring(0,8) == "subflow:") {
425461
type = "subflow";
426462
}
427463
var trayOptions = {
428-
title: "Edit "+type+" node",
464+
title: getEditStackTitle(),
429465
buttons: [
466+
{
467+
id: "node-dialog-cancel",
468+
text: RED._("common.label.cancel"),
469+
click: function() {
470+
if (editing_node._def) {
471+
if (editing_node._def.oneditcancel) {
472+
editing_node._def.oneditcancel.call(editing_node);
473+
}
474+
475+
for (var d in editing_node._def.defaults) {
476+
if (editing_node._def.defaults.hasOwnProperty(d)) {
477+
var def = editing_node._def.defaults[d];
478+
if (def.type) {
479+
var configTypeDef = RED.nodes.getType(def.type);
480+
if (configTypeDef && configTypeDef.exclusive) {
481+
var input = $("#node-input-"+d).val()||"";
482+
if (input !== "" && !editing_node[d]) {
483+
// This node has an exclusive config node that
484+
// has just been added. As the user is cancelling
485+
// the edit, need to delete the just-added config
486+
// node so that it doesn't get orphaned.
487+
RED.nodes.remove(input);
488+
}
489+
}
490+
}
491+
}
492+
493+
}
494+
}
495+
RED.tray.close();
496+
}
497+
},
430498
{
431499
id: "node-dialog-ok",
432-
text: RED._("common.label.ok"),
500+
text: RED._("common.label.done"),
501+
class: "primary",
433502
click: function() {
434503
var changes = {};
435504
var changed = false;
@@ -556,38 +625,6 @@ RED.editor = (function() {
556625
RED.view.redraw(true);
557626
RED.tray.close();
558627
}
559-
},
560-
{
561-
id: "node-dialog-cancel",
562-
text: RED._("common.label.cancel"),
563-
click: function() {
564-
if (editing_node._def) {
565-
if (editing_node._def.oneditcancel) {
566-
editing_node._def.oneditcancel.call(editing_node);
567-
}
568-
569-
for (var d in editing_node._def.defaults) {
570-
if (editing_node._def.defaults.hasOwnProperty(d)) {
571-
var def = editing_node._def.defaults[d];
572-
if (def.type) {
573-
var configTypeDef = RED.nodes.getType(def.type);
574-
if (configTypeDef && configTypeDef.exclusive) {
575-
var input = $("#node-input-"+d).val()||"";
576-
if (input !== "" && !editing_node[d]) {
577-
// This node has an exclusive config node that
578-
// has just been added. As the user is cancelling
579-
// the edit, need to delete the just-added config
580-
// node so that it doesn't get orphaned.
581-
RED.nodes.remove(input);
582-
}
583-
}
584-
}
585-
}
586-
587-
}
588-
}
589-
RED.tray.close();
590-
}
591628
}
592629
],
593630
resize: function(dimensions) {
@@ -631,26 +668,6 @@ RED.editor = (function() {
631668
$('<input type="text" style="display: none;" />').prependTo(dialogForm);
632669
prepareEditDialog(node,node._def,"node-input");
633670
dialogForm.i18n();
634-
635-
// var minWidth = $(this).dialog('option','minWidth');
636-
// if ($(this).outerWidth() < minWidth) {
637-
// $(this).dialog('option','width',minWidth);
638-
// } else {
639-
// $(this).dialog('option','width',$(this).outerWidth());
640-
// }
641-
// if (editing_node) {
642-
// var size = $(this).dialog('option','sizeCache-'+editing_node.type);
643-
// if (size) {
644-
// $(this).dialog('option','width',size.width);
645-
// $(this).dialog('option','height',size.height);
646-
// }
647-
// if (editing_node._def.oneditresize) {
648-
// setTimeout(function() {
649-
// var form = $("#dialog-form");
650-
// editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()});
651-
// },0);
652-
// }
653-
// }
654671
},
655672
close: function() {
656673
RED.keyboard.enable();
@@ -661,29 +678,22 @@ RED.editor = (function() {
661678
RED.sidebar.info.refresh(editing_node);
662679
}
663680
RED.workspaces.refresh();
681+
editStack.pop();
664682
},
665683
show: function() {
666684
if (editing_node) {
667685
RED.sidebar.info.refresh(editing_node);
668686
}
669687
}
670688
}
671-
/*).parent().on('keydown', function(evt) {
672-
if (evt.keyCode === $.ui.keyCode.ESCAPE && (evt.metaKey || evt.ctrlKey)) {
673-
$("#node-dialog-cancel").click();
674-
} else if (evt.keyCode === $.ui.keyCode.ENTER && (evt.metaKey || evt.ctrlKey)) {
675-
$("#node-dialog-ok").click();
676-
}
677-
});
678-
*/
679689
if (editTrayWidthCache[type]) {
680690
trayOptions.width = editTrayWidthCache[type];
681691
}
682692

683693
if (type === 'subflow') {
684694
var id = editing_node.type.substring(8);
685695
trayOptions.buttons.unshift({
686-
class: 'leftButton',
696+
class: 'leftButton primary',
687697
text: RED._("subflow.edit"),
688698
click: function() {
689699
RED.workspaces.show(id);
@@ -730,9 +740,11 @@ RED.editor = (function() {
730740
}
731741
editing_config_node["_"] = node_def._;
732742
}
743+
editStack.push(editing_config_node);
744+
733745
RED.view.state(RED.state.EDITING);
734746
var trayOptions = {
735-
title: (adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})),
747+
title: getEditStackTitle(), //(adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})),
736748
resize: function() {
737749
if (editing_config_node && editing_config_node._def.oneditresize) {
738750
var form = $("#node-config-dialog-edit-form");
@@ -745,7 +757,7 @@ RED.editor = (function() {
745757
var trayFooter = tray.find(".editor-tray-footer");
746758

747759
trayFooter.prepend('<div id="node-config-dialog-user-count"><i class="fa fa-info-circle"></i> <span></span></div>');
748-
trayHeader.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>');
760+
trayFooter.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>');
749761

750762
RED.keyboard.disable();
751763

@@ -822,6 +834,7 @@ RED.editor = (function() {
822834
RED.keyboard.enable();
823835
}
824836
RED.workspaces.refresh();
837+
editStack.pop();
825838
},
826839
show: function() {
827840
if (editing_config_node) {
@@ -830,9 +843,33 @@ RED.editor = (function() {
830843
}
831844
}
832845
trayOptions.buttons = [
846+
{
847+
id: "node-config-dialog-cancel",
848+
text: RED._("common.label.cancel"),
849+
click: function() {
850+
var configType = type;
851+
var configId = editing_config_node.id;
852+
var configAdding = adding;
853+
var configTypeDef = RED.nodes.getType(configType);
854+
855+
if (configTypeDef.oneditcancel) {
856+
// TODO: what to pass as this to call
857+
if (configTypeDef.oneditcancel) {
858+
var cn = RED.nodes.node(configId);
859+
if (cn) {
860+
configTypeDef.oneditcancel.call(cn,false);
861+
} else {
862+
configTypeDef.oneditcancel.call({id:configId},true);
863+
}
864+
}
865+
}
866+
RED.tray.close();
867+
}
868+
},
833869
{
834870
id: "node-config-dialog-ok",
835871
text: adding?RED._("editor.configAdd"):RED._("editor.configUpdate"),
872+
class: "primary",
836873
click: function() {
837874
var configProperty = name;
838875
var configId = editing_config_node.id;
@@ -931,36 +968,13 @@ RED.editor = (function() {
931968
updateConfigNodeSelect(configProperty,configType,editing_config_node.id,prefix);
932969
});
933970
}
934-
},
935-
{
936-
id: "node-config-dialog-cancel",
937-
text: RED._("common.label.cancel"),
938-
click: function() {
939-
var configType = type;
940-
var configId = editing_config_node.id;
941-
var configAdding = adding;
942-
var configTypeDef = RED.nodes.getType(configType);
943-
944-
if (configTypeDef.oneditcancel) {
945-
// TODO: what to pass as this to call
946-
if (configTypeDef.oneditcancel) {
947-
var cn = RED.nodes.node(configId);
948-
if (cn) {
949-
configTypeDef.oneditcancel.call(cn,false);
950-
} else {
951-
configTypeDef.oneditcancel.call({id:configId},true);
952-
}
953-
}
954-
}
955-
RED.tray.close();
956-
}
957971
}
958972
];
959973

960974
if (!adding) {
961975
trayOptions.buttons.unshift({
962976
class: 'leftButton',
963-
text: RED._("editor.configDelete"),
977+
text: RED._("editor.configDelete"), //'<i class="fa fa-trash"></i>',
964978
click: function() {
965979
var configProperty = name;
966980
var configId = editing_config_node.id;
@@ -1067,15 +1081,24 @@ RED.editor = (function() {
10671081

10681082
function showEditSubflowDialog(subflow) {
10691083
var editing_node = subflow;
1084+
editStack.push(subflow);
10701085
RED.view.state(RED.state.EDITING);
10711086
var subflowEditor;
10721087

10731088
var trayOptions = {
1074-
title: RED._("subflow.editSubflow",{name:subflow.name}),
1089+
title: getEditStackTitle(),
10751090
buttons: [
1091+
{
1092+
id: "node-dialog-cancel",
1093+
text: RED._("common.label.cancel"),
1094+
click: function() {
1095+
RED.tray.close();
1096+
}
1097+
},
10761098
{
10771099
id: "node-dialog-ok",
1078-
text: RED._("common.label.ok"),
1100+
class: "primary",
1101+
text: RED._("common.label.done"),
10791102
click: function() {
10801103
var i;
10811104
var changes = {};
@@ -1133,13 +1156,6 @@ RED.editor = (function() {
11331156
editing_node.dirty = true;
11341157
RED.tray.close();
11351158
}
1136-
},
1137-
{
1138-
id: "node-dialog-cancel",
1139-
text: RED._("common.label.cancel"),
1140-
click: function() {
1141-
RED.tray.close();
1142-
}
11431159
}
11441160
],
11451161
resize: function() {
@@ -1189,7 +1205,7 @@ RED.editor = (function() {
11891205
});
11901206

11911207
$("#subflow-input-name").val(subflow.name);
1192-
subflowEditor.getSession().setValue(subflow.info,-1);
1208+
subflowEditor.getSession().setValue(subflow.info||"",-1);
11931209
var userCount = 0;
11941210
var subflowType = "subflow:"+editing_node.id;
11951211

@@ -1209,6 +1225,7 @@ RED.editor = (function() {
12091225
}
12101226
RED.sidebar.info.refresh(editing_node);
12111227
RED.workspaces.refresh();
1228+
editStack.pop();
12121229
editing_node = null;
12131230
},
12141231
show: function() {
@@ -1222,6 +1239,15 @@ RED.editor = (function() {
12221239
return {
12231240
init: function() {
12241241
RED.tray.init();
1242+
$(window).on('keydown', function(evt) {
1243+
if (evt.keyCode === $.ui.keyCode.ESCAPE && (evt.metaKey || evt.ctrlKey)) {
1244+
$("#node-dialog-cancel").click();
1245+
$("#node-config-dialog-cancel").click();
1246+
} else if (evt.keyCode === $.ui.keyCode.ENTER && (evt.metaKey || evt.ctrlKey)) {
1247+
$("#node-dialog-ok").click();
1248+
$("#node-config-dialog-ok").click();
1249+
}
1250+
});
12251251
},
12261252
edit: showEditDialog,
12271253
editConfig: showEditConfigNodeDialog,

0 commit comments

Comments
 (0)