mirror of https://github.com/node-red/node-red.git
Add expand editor button to Template node
This commit is contained in:
Nick O'Leary
parent
83d99043a8
commit
5f5feaed5f
|
|
@ -729,6 +729,9 @@
|
|||
"jsEditor": {
|
||||
"title": "JavaScript editor"
|
||||
},
|
||||
"textEditor": {
|
||||
"title": "Text editor"
|
||||
},
|
||||
"jsonEditor": {
|
||||
"title": "JSON editor",
|
||||
"format": "format JSON"
|
||||
|
|
|
|||
|
|
@ -513,6 +513,8 @@ RED.editor = (function() {
|
|||
label = RED._("expressionEditor.title");
|
||||
} else if (node.type === '_js') {
|
||||
label = RED._("jsEditor.title");
|
||||
} else if (node.type === '_text') {
|
||||
label = RED._("textEditor.title");
|
||||
} else if (node.type === '_json') {
|
||||
label = RED._("jsonEditor.title");
|
||||
} else if (node.type === '_markdown') {
|
||||
|
|
@ -2456,6 +2458,7 @@ RED.editor = (function() {
|
|||
editExpression: function(options) { showTypeEditor("_expression", options) },
|
||||
editJSON: function(options) { showTypeEditor("_json", options) },
|
||||
editMarkdown: function(options) { showTypeEditor("_markdown", options) },
|
||||
editText: function(options) { showTypeEditor("_text", options) },
|
||||
editBuffer: function(options) { showTypeEditor("_buffer", options) },
|
||||
buildEditForm: buildEditForm,
|
||||
validateNode: validateNode,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,90 @@
|
|||
/**
|
||||
* 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.
|
||||
**/
|
||||
(function() {
|
||||
|
||||
|
||||
var template = '<script type="text/x-red" data-template-name="_text"><div class="form-row node-text-editor-row"><div style="height: 200px;min-height: 150px;" class="node-text-editor" id="node-input-text"></div></div></script>';
|
||||
|
||||
var definition = {
|
||||
show: function(options) {
|
||||
var value = options.value;
|
||||
var onComplete = options.complete;
|
||||
var type = "_text"
|
||||
if ($("script[data-template-name='"+type+"']").length === 0) {
|
||||
$(template).appendTo("#red-ui-editor-node-configs");
|
||||
}
|
||||
RED.view.state(RED.state.EDITING);
|
||||
var expressionEditor;
|
||||
var changeTimer;
|
||||
|
||||
var trayOptions = {
|
||||
title: options.title,
|
||||
width: options.width||"inherit",
|
||||
buttons: [
|
||||
{
|
||||
id: "node-dialog-cancel",
|
||||
text: RED._("common.label.cancel"),
|
||||
click: function() {
|
||||
RED.tray.close();
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "node-dialog-ok",
|
||||
text: RED._("common.label.done"),
|
||||
class: "primary",
|
||||
click: function() {
|
||||
onComplete(expressionEditor.getValue(),expressionEditor.getCursorPosition());
|
||||
RED.tray.close();
|
||||
}
|
||||
}
|
||||
],
|
||||
resize: function(dimensions) {
|
||||
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");
|
||||
expressionEditor.resize();
|
||||
},
|
||||
open: function(tray) {
|
||||
var trayBody = tray.find('.red-ui-tray-body');
|
||||
var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
|
||||
expressionEditor = RED.editor.createEditor({
|
||||
id: 'node-input-text',
|
||||
value: "",
|
||||
mode:"ace/mode/"+(options.mode||"text")
|
||||
});
|
||||
expressionEditor.getSession().setValue(value||"",-1);
|
||||
if (options.cursor) {
|
||||
expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false);
|
||||
}
|
||||
},
|
||||
close: function() {
|
||||
expressionEditor.destroy();
|
||||
if (options.onclose) {
|
||||
options.onclose();
|
||||
}
|
||||
},
|
||||
show: function() {}
|
||||
}
|
||||
RED.tray.show(trayOptions);
|
||||
}
|
||||
}
|
||||
RED.editor.registerTypeEditor("_text", definition);
|
||||
})();
|
||||
|
|
@ -9,14 +9,6 @@
|
|||
<input type="text" id="node-input-field" placeholder="payload" style="width:250px;">
|
||||
<input type="hidden" id="node-input-fieldType">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label for="node-input-syntax"><i class="fa fa-code"></i> <span data-i18n="template.label.syntax"></span></label>
|
||||
<select id="node-input-syntax" style="width:180px;">
|
||||
<option value="mustache" data-i18n="template.label.mustache"></option>
|
||||
<option value="plain" data-i18n="template.label.plain"></option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-row" style="position: relative; margin-bottom: 0px;">
|
||||
<label for="node-input-template"><i class="fa fa-file-code-o"></i> <span data-i18n="template.label.template"></span></label>
|
||||
<input type="hidden" id="node-input-template" autofocus="autofocus">
|
||||
|
|
@ -32,11 +24,19 @@
|
|||
<option value="yaml">YAML</option>
|
||||
<option value="text" data-i18n="template.label.none"></option>
|
||||
</select>
|
||||
<button id="node-template-expand-editor" class="red-ui-button red-ui-button-small"><i class="fa fa-expand"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row node-text-editor-row">
|
||||
<div style="height: 250px; min-height:150px;" class="node-text-editor" id="node-input-template-editor" ></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label for="node-input-syntax"><i class="fa fa-code"></i> <span data-i18n="template.label.syntax"></span></label>
|
||||
<select id="node-input-syntax" style="width:180px;">
|
||||
<option value="mustache" data-i18n="template.label.mustache"></option>
|
||||
<option value="plain" data-i18n="template.label.plain"></option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label for="node-input-output"><i class="fa fa-long-arrow-right"></i> <span data-i18n="template.label.output"></span></label>
|
||||
<select id="node-input-output" style="width:180px;">
|
||||
|
|
@ -109,6 +109,23 @@
|
|||
v: Date.now()
|
||||
});
|
||||
});
|
||||
$("#node-template-expand-editor").on("click", function(e) {
|
||||
e.preventDefault();
|
||||
var value = that.editor.getValue();
|
||||
RED.editor.editText({
|
||||
mode: $("#node-input-format").val(),
|
||||
value: value,
|
||||
width: "Infinity",
|
||||
cursor: that.editor.getCursorPosition(),
|
||||
complete: function(v,cursor) {
|
||||
that.editor.setValue(v, -1);
|
||||
that.editor.gotoLine(cursor.row+1,cursor.column,false);
|
||||
setTimeout(function() {
|
||||
that.editor.focus();
|
||||
},300);
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
oneditsave: function() {
|
||||
$("#node-input-template").val(this.editor.getValue());
|
||||
|
|
|
|||
Loading…
Reference in New Issue