frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Add RED.editor.createEditor utility function

Browse Source
This commit is contained in:
Nick O'Leary 2015-02-26 21:29:56 +00:00
parent 8af50a51ba
commit bf1cd457cd
8 changed files with 84 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -100,32 +100,23 @@
$( "#dialog" ).off("dialogresize",functionDialogResize); $( "#dialog" ).off("dialogresize",functionDialogResize);
}); });
ace.require("ace/ext/language_tools"); this.editor = RED.editor.createEditor({
that.editor = ace.edit('node-input-func-editor'); id: 'node-input-func-editor',
that.editor.setText = that.editor.setValue; // alias to make library work :-) mode: 'ace/mode/javascript'
that.editor.getText = that.editor.getValue; // alias to make library work });
//that.editor.setTheme("ace/theme/solarized_light"); this.editor.setValue($("#node-input-func").val(),-1);
//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({ RED.library.create({
url:"functions", // where to get the data from url:"functions", // where to get the data from
type:"function", // the type of object the library is for type:"function", // the type of object the library is for
editor:that.editor, // the field name the main text body goes to editor:this.editor, // the field name the main text body goes to
mode:"ace/mode/javascript",
fields:['name','outputs'] fields:['name','outputs']
}); });
$("#node-input-name").focus(); this.editor.focus();
}, },
oneditsave: function() { oneditsave: function() {
var annot = this.editor.getSession().getAnnotations(); var annot = this.editor.getSession().getAnnotations();
console.log(this);
this.valid = true; this.valid = true;
for (var k=0; k < annot.length; k++) { for (var k=0; k < annot.length; k++) {
//console.log(annot[k].type,":",annot[k].text, "on line", annot[k].row); //console.log(annot[k].type,":",annot[k].text, "on line", annot[k].row);

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

@ -22,7 +22,7 @@
<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;"> <select id="node-input-format" style=" font-size: 0.8em; margin-bottom: 3px; width:110px; float:right;">
<option value="handlebars">mustache</option> <option value="handlebars">mustache</option>
<option value="html">HTML</option> <option value="html">HTML</option>
<option value="json">JSON</option> <option value="json">JSON</option>
@ -61,7 +61,7 @@
defaults: { defaults: {
name: {value:""}, name: {value:""},
field: {value:"payload"}, field: {value:"payload"},
mark: {value:"handlebars"}, format: {value:"handlebars"},
template: {value:"This is the payload: {{payload}} !"}, template: {value:"This is the payload: {{payload}} !"},
}, },
inputs:1, inputs:1,
@ -96,30 +96,21 @@
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"); this.editor = RED.editor.createEditor({
that.editor = ace.edit('node-input-template-editor'); id: 'node-input-template-editor',
that.editor.setText = that.editor.setValue; // alias to make library work :-) mode: 'ace/mode/html'
that.editor.getText = that.editor.getValue; // alias to make library work });
//that.editor.setTheme("ace/theme/solarized_light"); this.editor.setValue($("#node-input-template").val(),-1);
//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/html");
that.editor.getSession().setFoldStyle("markbeginend");
that.editor.setOptions({enableBasicAutocompletion:true, enableSnippets:true});
that.editor.$blockScrolling = Infinity;
that.editor.setValue($("#node-input-template").val());
that.editor.gotoLine(1);
document.getElementById('node-input-template-editor').style.fontSize='17px';
RED.library.create({ RED.library.create({
url:"functions", // where to get the data from url:"functions", // where to get the data from
type:"function", // the type of object the library is for type:"function", // the type of object the library is for
editor:that.editor, // the field name the main text body goes to editor:that.editor, // the field name the main text body goes to
fields:['name','outputs'] fields:['name','outputs']
}); });
$("#node-input-name").focus(); this.editor.focus();
$("#node-input-mark").change(function() {
var mod = "ace/mode/"+$("#node-input-mark").val(); $("#node-input-format").change(function() {
var mod = "ace/mode/"+$("#node-input-format").val();
that.editor.getSession().setMode({ that.editor.getSession().setMode({
path: mod, path: mod,
v: Date.now() v: Date.now()

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

@ -84,16 +84,12 @@
var height = $( "#dialog" ).dialog('option','height'); var height = $( "#dialog" ).dialog('option','height');
$( "#dialog" ).off("dialogresize",functionDialogResize); $( "#dialog" ).off("dialogresize",functionDialogResize);
}); });
ace.require("ace/ext/language_tools"); this.editor = RED.editor.createEditor({
that.editor = ace.edit('node-input-info-editor'); id: 'node-input-info-editor',
that.editor.setTheme("ace/theme/chrome"); mode: 'ace/mode/markdown'
that.editor.getSession().setMode("ace/mode/markdown"); });
that.editor.getSession().setFoldStyle("markbeginend"); this.editor.setValue($("#node-input-info").val(),-1);
that.editor.setOptions({enableBasicAutocompletion:true, enableSnippets:true}); this.editor.focus();
that.editor.$blockScrolling = Infinity;
that.editor.setValue($("#node-input-info").val());
that.editor.gotoLine(1);
document.getElementById('node-input-info-editor').style.fontSize='17px';
}, },
oneditsave: function() { oneditsave: function() {
$("#node-input-info").val(this.editor.getValue()); $("#node-input-info").val(this.editor.getValue());

2
public/index.html
View File

@ -6,7 +6,7 @@
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<!-- <!--
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.

2
public/red/main.js
View File

@ -369,6 +369,8 @@ var RED = (function() {
document.title = "Node-RED : "+window.location.hostname; document.title = "Node-RED : "+window.location.hostname;
} }
ace.require("ace/ext/language_tools");
RED.settings.init(loadEditor); RED.settings.init(loadEditor);
}); });

27
public/red/ui/editor.js
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.
@ -805,6 +805,29 @@ RED.editor = (function() {
editConfig: showEditConfigNodeDialog, editConfig: showEditConfigNodeDialog,
editSubflow: showEditSubflowDialog, editSubflow: showEditSubflowDialog,
validateNode: validateNode, validateNode: validateNode,
updateNodeProperties: updateNodeProperties // TODO: only exposed for edit-undo updateNodeProperties: updateNodeProperties, // TODO: only exposed for edit-undo
createEditor: function(options) {
var editor = ace.edit(options.id);
editor.setTheme("ace/theme/tomorrow");
if (options.mode) {
editor.getSession().setMode(options.mode);
}
if (options.foldStyle) {
editor.getSession().setFoldStyle(options.foldStyle);
} else {
editor.getSession().setFoldStyle('markbeginend');
}
if (options.options) {
editor.setOptions(options.options);
} else {
editor.setOptions({
enableBasicAutocompletion:true,
enableSnippets:true
});
}
editor.$blockScrolling = Infinity;
return editor;
}
} }
})(); })();

41
public/red/ui/library.js
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.
@ -72,6 +72,19 @@ RED.library = (function() {
var selectedLibraryItem = null; var selectedLibraryItem = null;
var libraryEditor = null; var libraryEditor = null;
// Orion editor has set/getText
// ACE editor has set/getValue
// normalise to set/getValue
if (options.editor.setText) {
// Orion doesn't like having pos passed in, so proxy the call to drop it
options.editor.setValue = function(text,pos) {
options.editor.setText.call(options.editor,text);
}
}
if (options.editor.getText) {
options.editor.getValue = options.editor.getText;
}
function buildFileListItem(item) { function buildFileListItem(item) {
var li = document.createElement("li"); var li = document.createElement("li");
li.onmouseover = function(e) { $(this).addClass("list-hover"); }; li.onmouseover = function(e) { $(this).addClass("list-hover"); };
@ -119,7 +132,7 @@ RED.library = (function() {
$(this).addClass("list-selected"); $(this).addClass("list-selected");
$.get("library/"+options.url+root+item.fn, function(data) { $.get("library/"+options.url+root+item.fn, function(data) {
selectedLibraryItem = item; selectedLibraryItem = item;
libraryEditor.setText(data); libraryEditor.setValue(data,-1);
}); });
} }
})(); })();
@ -144,7 +157,7 @@ RED.library = (function() {
$("#node-select-library").children().remove(); $("#node-select-library").children().remove();
var bc = $("#node-dialog-library-breadcrumbs"); var bc = $("#node-dialog-library-breadcrumbs");
bc.children().first().nextAll().remove(); bc.children().first().nextAll().remove();
libraryEditor.setText(''); libraryEditor.setValue('',-1);
$.getJSON("library/"+options.url,function(data) { $.getJSON("library/"+options.url,function(data) {
$("#node-select-library").append(buildFileList("/",data)); $("#node-select-library").append(buildFileList("/",data));
@ -205,14 +218,18 @@ RED.library = (function() {
e.preventDefault(); e.preventDefault();
}); });
require(["orion/editor/edit"], function(edit) { libraryEditor = ace.edit('node-select-library-text');
libraryEditor = edit({ libraryEditor.setTheme("ace/theme/tomorrow");
parent:document.getElementById('node-select-library-text'), if (options.mode) {
lang:"js", libraryEditor.getSession().setMode(options.mode);
readonly: true }
}); libraryEditor.setOptions({
readOnly: true,
highlightActiveLine: false,
highlightGutterLine: false
}); });
libraryEditor.renderer.$cursorLayer.element.style.opacity=0;
libraryEditor.$blockScrolling = Infinity;
$( "#node-dialog-library-lookup" ).dialog({ $( "#node-dialog-library-lookup" ).dialog({
title: options.type+" library", title: options.type+" library",
@ -229,7 +246,7 @@ RED.library = (function() {
var field = options.fields[i]; var field = options.fields[i];
$("#node-input-"+field).val(selectedLibraryItem[field]); $("#node-input-"+field).val(selectedLibraryItem[field]);
} }
options.editor.setText(libraryEditor.getText()); options.editor.setValue(libraryEditor.getValue(),-1);
} }
$( this ).dialog( "close" ); $( this ).dialog( "close" );
} }
@ -304,7 +321,7 @@ RED.library = (function() {
} }
} }
data.text = options.editor.getText(); data.text = options.editor.getValue();
$.ajax({ $.ajax({
url:"library/"+options.url+'/'+fullpath, url:"library/"+options.url+'/'+fullpath,
type: "POST", type: "POST",

1
public/style.css
View File

@ -965,6 +965,7 @@ div.node-info {
border:1px solid #ccc; border:1px solid #ccc;
border-radius:5px; border-radius:5px;
overflow: hidden; overflow: hidden;
font-size: 16px !important;
} }
#workspace-tabs { #workspace-tabs {
margin-right: 28px; margin-right: 28px;