frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update core nodes to use ACE editor

Browse Source
This commit is contained in:
Nick O'Leary 2015-02-13 00:15:07 +00:00
parent 5adbc012f3
commit ddf31e87b2
3 changed files with 99 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
nodes/core/core/80-function.html
View File

@ -1,5 +1,5 @@
<!-- <!--
Copyright 2013, 2014 IBM Corp. Copyright 2013, 2015 IBM Corp.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -34,22 +34,22 @@
</script> </script>
<script type="text/x-red" data-help-name="function"> <script type="text/x-red" data-help-name="function">
<p>A function block where you can write code to do more interesting things.</p> <p>A function block where you can write code to do more interesting things.</p>
<p>The message is passed in as a JavaScript object called <code>msg</code>.</p> <p>The message is passed in as a JavaScript object called <code>msg</code>.</p>
<p>By convention it will have a <code>msg.payload</code> property containing <p>By convention it will have a <code>msg.payload</code> property containing
the body of the message.</p> the body of the message.</p>
<p>The function should return the messages it wants to pass on to the next nodes <p>The function should return the messages it wants to pass on to the next nodes
in the flow. It can return:</p> in the flow. It can return:</p>
<ul> <ul>
<li>a single message object - passed to nodes connected to the first output</li> <li>a single message object - passed to nodes connected to the first output</li>
<li>an array of message objects - passed to nodes connected to the corresponding outputs</li> <li>an array of message objects - passed to nodes connected to the corresponding outputs</li>
</ul> </ul>
<p>If any element of the array is itself an array of messages, multiple <p>If any element of the array is itself an array of messages, multiple
messages are sent to the corresponding output.</p> messages are sent to the corresponding output.</p>
<p>If null is returned, either by itself or as an element of the array, no <p>If null is returned, either by itself or as an element of the array, no
message is passed on.</p> message is passed on.</p>
<p>See the <a target="_new" href="http://nodered.org/docs/writing-functions.html">online documentation</a> for more help.</p> <p>See the <a target="_new" href="http://nodered.org/docs/writing-functions.html">online documentation</a> for more help.</p>
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
@ -68,11 +68,13 @@
return this.name; return this.name;
}, },
oneditprepare: function() { oneditprepare: function() {
var that = this;
$( "#node-input-outputs" ).spinner({ $( "#node-input-outputs" ).spinner({
min:1 min:1
}); });
function functionDialogResize() { function functionDialogResize() {
that.editor.resize();
var rows = $("#dialog-form>div:not(.node-text-editor-row)"); var rows = $("#dialog-form>div:not(.node-text-editor-row)");
var height = $("#dialog-form").height(); var height = $("#dialog-form").height();
for (var i=0;i<rows.size();i++) { for (var i=0;i<rows.size();i++) {
@ -82,7 +84,6 @@
height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom"))); height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
$(".node-text-editor").css("height",height+"px"); $(".node-text-editor").css("height",height+"px");
}; };
$( "#dialog" ).on("dialogresize", functionDialogResize); $( "#dialog" ).on("dialogresize", functionDialogResize);
$( "#dialog" ).one("dialogopen", function(ev) { $( "#dialog" ).one("dialogopen", function(ev) {
var size = $( "#dialog" ).dialog('option','sizeCache-function'); var size = $( "#dialog" ).dialog('option','sizeCache-function');
@ -96,25 +97,32 @@
var height = $( "#dialog" ).dialog('option','height'); var height = $( "#dialog" ).dialog('option','height');
$( "#dialog" ).off("dialogresize",functionDialogResize); $( "#dialog" ).off("dialogresize",functionDialogResize);
}); });
var that = this;
require(["orion/editor/edit"], function(edit) {
that.editor = edit({
parent:document.getElementById('node-input-func-editor'),
lang:"js",
contents: $("#node-input-func").val()
});
RED.library.create({
url:"functions", // where to get the data from
type:"function", // the type of object the library is for
editor:that.editor, // the field name the main text body goes to
fields:['name','outputs']
});
$("#node-input-name").focus();
ace.require("ace/ext/language_tools");
that.editor = ace.edit('node-input-func-editor');
that.editor.setText = that.editor.setValue; // alias to make library work :-)
that.editor.getText = that.editor.getValue; // alias to make library work
//that.editor.setTheme("ace/theme/solarized_light");
//that.editor.setTheme("ace/theme/crimson_editor");
//that.editor.setTheme("ace/theme/chrome");
that.editor.setTheme("ace/theme/tomorrow");
that.editor.getSession().setMode("ace/mode/javascript");
that.editor.getSession().setFoldStyle("markbeginend");
that.editor.setOptions({enableBasicAutocompletion:true, enableSnippets:true});
that.editor.$blockScrolling = Infinity;
that.editor.setValue($("#node-input-func").val());
that.editor.gotoLine(1,1);
document.getElementById('node-input-func-editor').style.fontSize='17px';
RED.library.create({
url:"functions", // where to get the data from
type:"function", // the type of object the library is for
editor:that.editor, // the field name the main text body goes to
fields:['name','outputs']
}); });
$("#node-input-name").focus();
}, },
oneditsave: function() { oneditsave: function() {
$("#node-input-func").val(this.editor.getText()) $("#node-input-func").val(this.editor.getValue());
delete this.editor; delete this.editor;
} }
}); });

63
nodes/core/core/80-template.html
View File

@ -1,5 +1,5 @@
<!-- <!--
Copyright 2013,2014 IBM Corp. Copyright 2013, 2015 IBM Corp.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -22,13 +22,20 @@
<div class="form-row" style="margin-bottom: 0px;"> <div class="form-row" style="margin-bottom: 0px;">
<label for="node-input-template"><i class="fa fa-file-code-o"></i> Template</label> <label for="node-input-template"><i class="fa fa-file-code-o"></i> Template</label>
<input type="hidden" id="node-input-template" autofocus="autofocus"> <input type="hidden" id="node-input-template" autofocus="autofocus">
<select id="node-input-mark" style="width:110px; float:right;">
<option value="handlebars">mustache</option>
<option value="html">HTML</option>
<option value="json">JSON</option>
<option value="markdown">Markdown</option>
<option value="text">none</option>
</select>
</div> </div>
<div class="form-row node-text-editor-row"> <div class="form-row node-text-editor-row">
<div style="height: 250px;" class="node-text-editor" id="node-input-template-editor" ></div> <div style="height: 250px;" class="node-text-editor" id="node-input-template-editor" ></div>
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-input-field"><i class="fa fa-edit"></i> Property</label> <label for="node-input-field"><i class="fa fa-edit"></i> Property</label>
msg.<input type="text" id="node-input-field" placeholder="payload" style="width: 64%;"> msg.<input type="text" id="node-input-field" placeholder="payload" style="width:170px;">
</div> </div>
</script> </script>
@ -54,7 +61,8 @@
defaults: { defaults: {
name: {value:""}, name: {value:""},
field: {value:"payload"}, field: {value:"payload"},
template: {value:"This is the payload: {{payload}}!"}, mark: {value:"handlebars"},
template: {value:"This is the payload: {{payload}} !"},
}, },
inputs:1, inputs:1,
outputs:1, outputs:1,
@ -63,8 +71,9 @@
return this.name; return this.name;
}, },
oneditprepare: function() { oneditprepare: function() {
var that = this;
function templateDialogResize() { function templateDialogResize() {
that.editor.resize();
var rows = $("#dialog-form>div:not(.node-text-editor-row)"); var rows = $("#dialog-form>div:not(.node-text-editor-row)");
var height = $("#dialog-form").height(); var height = $("#dialog-form").height();
for (var i=0;i<rows.size();i++) { for (var i=0;i<rows.size();i++) {
@ -74,7 +83,6 @@
height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom"))); height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
$(".node-text-editor").css("height",height+"px"); $(".node-text-editor").css("height",height+"px");
}; };
$( "#dialog" ).on("dialogresize", templateDialogResize); $( "#dialog" ).on("dialogresize", templateDialogResize);
$( "#dialog" ).one("dialogopen", function(ev) { $( "#dialog" ).one("dialogopen", function(ev) {
var size = $( "#dialog" ).dialog('option','sizeCache-template'); var size = $( "#dialog" ).dialog('option','sizeCache-template');
@ -88,25 +96,38 @@
var height = $( "#dialog" ).dialog('option','height'); var height = $( "#dialog" ).dialog('option','height');
$( "#dialog" ).off("dialogresize",templateDialogResize); $( "#dialog" ).off("dialogresize",templateDialogResize);
}); });
ace.require("ace/ext/language_tools");
var that = this; that.editor = ace.edit('node-input-template-editor');
require(["orion/editor/edit"], function(edit) { that.editor.setText = that.editor.setValue; // alias to make library work :-)
that.editor = edit({ that.editor.getText = that.editor.getValue; // alias to make library work
parent:document.getElementById('node-input-template-editor'), //that.editor.setTheme("ace/theme/solarized_light");
lang:"html", //that.editor.setTheme("ace/theme/crimson_editor");
contents: $("#node-input-template").val() //that.editor.setTheme("ace/theme/chrome");
}); that.editor.setTheme("ace/theme/tomorrow");
RED.library.create({ that.editor.getSession().setMode("ace/mode/html");
url:"templates", // where to get the data from that.editor.getSession().setFoldStyle("markbeginend");
type:"template", // the type of object the library is for that.editor.setOptions({enableBasicAutocompletion:true, enableSnippets:true});
editor:that.editor, // the field name the main text body goes to that.editor.$blockScrolling = Infinity;
fields:['name','field'] that.editor.setValue($("#node-input-template").val());
}); that.editor.gotoLine(1);
$("#node-input-name").focus(); document.getElementById('node-input-template-editor').style.fontSize='17px';
RED.library.create({
url:"functions", // where to get the data from
type:"function", // the type of object the library is for
editor:that.editor, // the field name the main text body goes to
fields:['name','outputs']
});
$("#node-input-name").focus();
$("#node-input-mark").change(function() {
var mod = "ace/mode/"+$("#node-input-mark").val();
that.editor.getSession().setMode({
path: mod,
v: Date.now()
})
}); });
}, },
oneditsave: function() { oneditsave: function() {
$("#node-input-template").val(this.editor.getText()) $("#node-input-template").val(this.editor.getValue())
delete this.editor; delete this.editor;
} }
}); });

33
nodes/core/core/90-comment.html
View File

@ -1,5 +1,5 @@
<!-- <!--
Copyright 2013 IBM Corp. Copyright 2013, 2015 IBM Corp.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -26,7 +26,7 @@
<div class="form-row node-text-editor-row"> <div class="form-row node-text-editor-row">
<div style="height: 250px;" class="node-text-editor" id="node-input-info-editor" ></div> <div style="height: 250px;" class="node-text-editor" id="node-input-info-editor" ></div>
</div> </div>
<div class="form-tips">Tip: The text here can be styled as <i><a href="https://help.github.com/articles/markdown-basics/" target="_new">Github flavored Markdown</a></i></div> <div class="form-tips">Tip: The text here can be styled as <i><a href="https://help.github.com/articles/markdown-basics/" target="_new">Github flavoured Markdown</a></i></div>
</script> </script>
<script type="text/x-red" data-help-name="comment"> <script type="text/x-red" data-help-name="comment">
@ -51,13 +51,17 @@
return this.name?"node_label_italic":""; return this.name?"node_label_italic":"";
}, },
info: function() { info: function() {
return "### "+this.name+"\n"+this.info; var t = this.name || "Comment node";
var b = this.info || "Use this node to add simple documentation.\n\nAnything you add will be rendered in this info panel.\n\nYou may use Markdown syntax to **enhance** the *presentation*.";
return "### "+t+"\n"+b;
}, },
oneditprepare: function() { oneditprepare: function() {
var that = this;
$( "#node-input-outputs" ).spinner({ $( "#node-input-outputs" ).spinner({
min:1 min:1
}); });
function functionDialogResize() { function functionDialogResize() {
that.editor.resize();
var rows = $("#dialog-form>div:not(.node-text-editor-row)"); var rows = $("#dialog-form>div:not(.node-text-editor-row)");
var height = $("#dialog-form").height(); var height = $("#dialog-form").height();
for (var i=0;i<rows.size();i++) { for (var i=0;i<rows.size();i++) {
@ -80,20 +84,19 @@
var height = $( "#dialog" ).dialog('option','height'); var height = $( "#dialog" ).dialog('option','height');
$( "#dialog" ).off("dialogresize",functionDialogResize); $( "#dialog" ).off("dialogresize",functionDialogResize);
}); });
var that = this; ace.require("ace/ext/language_tools");
require(["orion/editor/edit"], function(edit) { that.editor = ace.edit('node-input-info-editor');
that.editor = edit({ that.editor.setTheme("ace/theme/chrome");
parent:document.getElementById('node-input-info-editor'), that.editor.getSession().setMode("ace/mode/markdown");
lang:"text", that.editor.getSession().setFoldStyle("markbeginend");
showLinesRuler:false, that.editor.setOptions({enableBasicAutocompletion:true, enableSnippets:true});
showFoldingRuler:false, that.editor.$blockScrolling = Infinity;
contents: $("#node-input-info").val() that.editor.setValue($("#node-input-info").val());
}); that.editor.gotoLine(1);
$("#node-input-name").focus(); document.getElementById('node-input-info-editor').style.fontSize='17px';
});
}, },
oneditsave: function() { oneditsave: function() {
$("#node-input-info").val(this.editor.getText()); $("#node-input-info").val(this.editor.getValue());
delete this.editor; delete this.editor;
} }
}); });