sandbox/jsBox/jsBox.js
/**
* jsBox
*/
var jsBox = {
language: {
languageName: "jsBox",
modules: [
{
"name": "jsBox",
"container": {"xtype": "jsBox.Container"}
},
{
"name": "comment",
"container": {
"xtype": "Y.FormContainer",
"title": "Comment",
"fields": [
{"type": "text", "label": "", "name": "comment", "wirable": false }
]
},
"value": {
"input": {
"type":"url"
}
}
},
{
"name": "callback",
"container": {
"xtype": "WireIt.Container",
"title": "Callback",
"terminals": [
{
"name": "callbackFunction",
"direction": [0,1], "offsetPosition": {"left": 56, "bottom": -15}, "ddConfig": {
"type": "output",
"allowedTypes": ["input"]
},
"wireConfig":{"color": "#EEEE11", "bordercolor":"#FFFF00"}
},
{
"name": "output",
"direction": [0,1], "offsetPosition": {"left": 126, "bottom": -15}, "ddConfig": {
"type": "output",
"allowedTypes": ["input"]
}
}
]
}
}
]
},
/**
* @method init
* @static
*/
init: function() {
// Configure the adapter backend url :
Y.WiringEditor.adapters.JsonRpc.config.url = "../../../editor/backend/php/WiringEditor.php";
this.editor = new jsBox.WiringEditor(this.language);
// Open the infos panel
editor.accordionView.openPanel(2);
},
/**
* Execute the module in the "ExecutionFrame" virtual machine
* @method run
* @static
*/
run: function() {
var ef = new ExecutionFrame( this.editor.getValue() );
ef.run();
}
};
/**
* The wiring editor is overriden to add a button "RUN" to the control bar
*/
jsBox.WiringEditor = function(options) {
jsBox.WiringEditor.superclass.constructor.call(this, options);
};
Y.extend(jsBox.WiringEditor, Y.ComposableWiringEditor, {
/**
* Add the "run" button
*/
renderButtons: function() {
jsBox.WiringEditor.superclass.renderButtons.call(this);
// Add the run button to the toolbar
var toolbar = Y.one('#toolbar');
var runButton = Y.WireIt.cn('button', { label:"Run", id:"WiringEditor-runButton" });
runButton.container = toolbar;
runButton.on("click", jsBox.run, jsBox, true);
}
});
/**
* Container class used by the "jsBox" module (automatically sets terminals depending on the number of arguments)
* @class Container
* @namespace jsBox
* @constructor
*/
jsBox.Container = function(options, layer) {
jsBox.Container.superclass.constructor.call(this, options, layer);
this.buildTextArea(options.codeText || "function(e) {\n\n return 0;\n}");
this.createTerminals();
// Reposition the terminals when the jsBox is being resized
this.ddResize.on('eventResize', function(e, args) {
this.positionTerminals();
Y.one(this.textarea).setStyle("height", (args[0][1]-70)+"px");
}, this, true);
};
Y.extend(jsBox.Container, Y.Container, {
/**
* Create the textarea for the javascript code
* @method buildTextArea
* @param {String} codeText
*/
buildTextArea: function(codeText) {
this.textarea = Y.WireIt.cn('textarea', null, {width: "90%", height: "70px", border: "0", padding: "5px"}, codeText);
this.setBody(this.textarea);
Y.one(this.textarea).on('change', this.createTerminals, this, true);
},
/**
* Create (and re-create) the terminals with this.nParams input terminals
* @method createTerminals
*/
createTerminals: function() {
// Output Terminal
if(!this.outputTerminal) {
this.outputTerminal = this.addTerminal({xtype: "Y.TerminalOutput", "name": "out"});
this.outputTerminal.jsBox = this;
}
// Input terminals :
var match = (this.textarea.value).match((/^[ ]*function[ ]*\((.*)\)[ ]*\{/));
var sParamList = match ? match[1] : "";
var params = sParamList.split(',');
var nParams = (sParamList=="") ? 0 : params.length;
var curTerminalN = this.nParams || 0;
if(curTerminalN < nParams) {
// add terminals
for(var i = curTerminalN ; i < nParams ; i++) {
var term = this.addTerminal({xtype: "Y.TerminalInput", "name": "param"+i});
//term.jsBox = this;
Y.WireIt.sn(term.el, null, {position: "absolute", top: "-15px"});
}
}
else if (curTerminalN > nParams) {
// remove terminals
for(var i = this.terminals.length-(curTerminalN-nParams) ; i < this.terminals.length ; i++) {
this.terminals[i].remove();
this.terminals[i] = null;
}
this.terminals = Y.WireIt.compact(this.terminals);
}
this.nParams = nParams;
this.positionTerminals();
// Declare the new terminals to the drag'n drop handler (so the wires are moved around with the container)
this.dd.setTerminals(this.terminals);
},
/**
* Reposition the terminals
* @method positionTerminals
*/
positionTerminals: function() {
var width = Y.WireIt.getIntStyle(this.el, "width");
var inputsIntervall = Math.floor(width/(this.nParams+1));
for(var i = 1 ; i < this.terminals.length ; i++) {
var term = this.terminals[i];
Y.one(term.el).setStyle("left", (inputsIntervall*(i))-15+"px" );
for(var j = 0 ; j < term.wires.length ; j++) {
term.wires[j].redraw();
}
}
// Output terminal
Y.WireIt.sn(this.outputTerminal.el, null, {position: "absolute", bottom: "-15px", left: (Math.floor(width/2)-15)+"px"});
for(var j = 0 ; j < this.outputTerminal.wires.length ; j++) {
this.outputTerminal.wires[j].redraw();
}
},
/**
* Extend the getConfig to add the "codeText" property
* @method getConfig
*/
getConfig: function() {
var obj = jsBox.Container.superclass.getConfig.call(this);
obj.codeText = this.textarea.value;
return obj;
}
});