node-red-contrib-string
Version:
Provides a string manipulation node with a chainable UI based on the concise and lightweight stringjs.com.
806 lines (787 loc) • 33.6 kB
HTML
<script type="text/x-red" data-template-name="string">
<div class="form-row">
<label for="node-input-name"><i class="icon-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row">
<label for="node-input-prop"><i class="fa fa-sign-in"></i> <span>From</span></label>
<input type="text" id="node-input-prop" style="width:70%">
<input type="hidden" id="node-input-object">
</div>
<div class="form-row" style="margin-bottom:0;">
<label><i class="fa fa-list"></i> <span>Methods</span></label>
</div>
<div class="form-row node-input-method-container-row">
<ol id="node-input-method-container"></ol>
</div>
<div class="form-row">
<label for="node-input-propout"><i class="fa fa-sign-out"></i> <span>To</span></label>
<input type="text" id="node-input-propout" style="width:70%">
<input type="hidden" id="node-input-objectout">
</div>
</script>
<script type="text/x-red" data-help-name="string">
<p>Applies string methods from a given context property and assigns the results
optionally to the same or another context property. Methods can be chained by
adding multiple methods sequentially and with parameters that are literal or
from other context properties. The string object always passes along the msg
object with (if any) changes applied.</p>
<p>By default, string <b><i>from</i></b> and <b><i>to</i></b>
methods apply to the <code>msg.payload</code> property but may be set to any
property of <code>global</code>, <code>flow</code>, or <code>msg</code>
contexts.</p>
<h3>Details</h3>
<p>Note: this node expects the given context property to contain string data.
The result may or may not contain string data. See behavior description for
details.</p>
<p>The methods that can be applied via the node editor user
interface and their resulting behavior:</p>
<dl class="message-properties">
<dt>append(<i>chars</i>)</dt>
<dd>Appends the given string in <i>chars</i> to the string. I.e. 'Hello' <code>append</code> <i>'World'</i> becomes 'HelloWorld'.</dd>
<dt>between(<i>left</i>, <i>right</i>)</dt>
<dd>Extacts a string between <i>left</i> and <i>right</i> strings. I.e. 'The quick brown fox.' <code>between</code> <i>'quick'</i> and <i>'fox'</i> is ' brown '.</dd>
<dt>camelize()</dt>
<dd>Remove any underscores or dashes and convert a string into camel casing. I.e. 'data_rate' becomes 'dataRate'.</dd>
<dt>capitalize()</dt>
<dd>Capitalizes the first character of a string. I.e. 'jon' becomes 'Jon'.</dd>
<dt>chompLeft(<i>prefix</i>)</dt>
<dd>Removes the <i>prefix</i> from the start of a string. I.e. 'foobar' <code>chompLeft</code> <i>'foo'</i> becomes 'bar'.</dd>
<dt>chompRight(<i>suffix</i>)</dt>
<dd>Removes the <i>suffix</i> from the end of a string. I.e. 'foobar' <code>chompRight</code> <i>'bar'</i> becomes 'foo'.</dd>
<dt>collapseWhitespace()</dt>
<dd>Converts all adjacent whitespace characters to a single space.</dd>
<dt>contains(<i>find</i>)</dt>
<dd>Returns true if the string contains <i>find</i>. I.e. 'JavaScript is one of the best languages.' <code>contains</code> <i>'one'</i> is true.</dd>
<dt>count(<i>find</i>)</dt>
<dd>Returns the number of occurences of <i>find</i>. I.e. 'JP likes to program. JP does not play in the NBA.' <code>count</code> <i>'JP'</i> is the number 2.</dd>
<dt>dasherize()</dt>
<dd>Returns a converted camel cased string into a string delimited by dashes. I.e. 'dataRate' becomes 'data-rate'.</dd>
<dt>decodeHTMLEntities()</dt>
<dd>Decodes HTML entities into their string representation. I.e. 'Ken Thompson &amp; Dennis Ritchie' becomes 'Ken Thompson & Dennis Ritchie'.</dd>
<dt>decodeURIComponent()</dt>
<dd>Decodes a URI component. I.e. 'http%3A%2F' becomes 'http://'.</dd>
<dt>delLeftMost(<i>find</i>)</dt>
<dd>Returns the remaining string after removing the first occurrence of <i>find</i> and everything to the left of <i>find</i> when scanning from <b>left to right</b>. If <i>find</i> is not found, the unmodified string is returned. I.e. '\Parent\child\folders' <code>delLeftMost</code> <i>'\child'</i> leaves '\folders'.</dd>
<dt>delRightMost(<i>find</i>)</dt>
<dd>Returns the remaining string after removing the first occurrence of <i>find</i> and everything to the right of <i>find</i> when scanning from <b>right to left</b>. If <i>find</i> is not found, the unmodified string is returned. I.e. '\Parent\child\folders' <code>delRightMost</code> <i>'\child'</i> leaves '\Parent'.</dd>
<dt>encodeURIComponent()</dt>
<dd>Encodes a URI component. I.e. 'http://' becomes 'http%3A%2F'.</dd>
<dt>endsWith(<i>chars</i>)</dt>
<dd>Returns true if the string ends with <i>chars</i>. I.e. 'hello jon' <code>endsWith</code> 'jon' is true.</dd>
<dt>escapeHTML()</dt>
<dd>Escapes the html. I.e. '<div>hi</div>' becomes '&lt;div&gt;hi&lt;/div&gt;'.</dd>
<dt>ensureLeft(<i>prefix</i>)</dt>
<dd>Ensures string starts with <i>prefix</i>. I.e. 'subdir' <code>ensureLeft</code> <i>'/'</i> becomes '/subdir'.</dd>
<dt>ensureRight(<i>suffix</i>)</dt>
<dd>Ensures string ends with <i>suffix</i>. I.e. 'dir' <code>ensureRight</code> <i>'/'</i> becomes 'dir/'.</dd>
<dt>getRightMost(<i>find</i>)</dt>
<dd>Finds the first occurrence of <i>find</i> and returns everything to the right of <i>find</i> (not including <i>find</i> itself) when scanning from <b>right to left</b>. If <i>find</i> is not found, the unmodified string is returned. I.e. '\Parent\child\folders' <code>getRightMost</code> '\child' is '\folders'.</dd>
<dt>getLeftMost(<i>find</i>)</dt>
<dd>Finds the first occurrence of <i>find</i> and returns everything to the left of <i>find</i> (not including <i>find</i> itself) when scanning from <b>left to right</b>. If <i>find</i> is not found, the unmodified string is returned. I.e. '\Parent\child\folders' <code>getLeftMost</code> '\child' is '\Parent'.</dd>
<dt>humanize()</dt>
<dd>Transforms the input into a human friendly/readable form. I.e. ' capitalize dash-CamelCase_underscore trim ' becomes 'Capitalize dash camel case underscore trim'.</dd>
<dt>isAlpha()</dt>
<dd>Return true if the string contains only letters.</dd>
<dt>isAlphaNumeric()</dt>
<dd>Return true if the string contains only letters and numbers.</dd>
<dt>isEmpty()</dt>
<dd>Return true if the string is solely composed of whitespace or is null/undefined.</dd>
<dt>isLower()</dt>
<dd>Return true if the character or string is lowercase.</dd>
<dt>isNumeric()</dt>
<dd>Return true if the string only contains digits.</dd>
<dt>isUpper()</dt>
<dd>Returns true if the character or string is uppercase.</dd>
<dt>latinise()</dt>
<dd>Removes accents from Latin characters. I.e. 'crème brûlée' becomes 'creme brulee'.</dd>
<dt>left(<i>n</i>)</dt>
<dd>Return the substring denoted by <i>n</i> positive left-most characters. I.e. 'My name is JP' <code>left</code> <i>2</i> is 'My'.</dd>
<dt>length()</dt>
<dd>Property to return the length of the string object. I.e. 'hi' <code>length</code> is 2.</dd>
<dt>lines()</dt>
<dd>Returns an array with the lines. Cross-platform compatible.</dd>
<dt>pad(<i>length</i>, <i>char</i>)</dt>
<dd>Pads the string in the center with specified <i>char</i>. <i>char</i> may be a string. I.e. 'hello' <code>pad</code> <i>'.'</i> is '...hello..'.</dd>
<dt>padLeft(<i>length</i>, <i>char</i>)</dt>
<dd>Left pads the string. I.e. 'hello' <code>padLeft</code> <i>'.'</i> is '.....hello'.</dd>
<dt>padRight(<i>length</i>, <i>char</i>)</dt>
<dd>Right pads the string. I.e. 'hello' <code>padRight</code> <i>'.'</i> is 'hello.....'.</dd>
<dt>parseCSV()</dt>
<dd>Parses a CSV line into an array. I.e. "'a','b','c'" becomes ['a', 'b', 'c'].</dd>
<dt>repeat(<i>n</i>)</dt>
<dd>Returns a string repeated <i>n</i> times. I.e. '*' <code>repeat</code> <i>5</i> is '*****'.</dd>
<dt>replaceAll(<i>search</i>, <i>replace</i>)</dt>
<dd>Return the new string with all occurrences of <i>search</i> replaced with <i>replace</i>. I.e. ' does IT work? ' <code>replaceAll</code> <i>' '</i>, <i>'_'</i> becomes '_does_IT_work?_'.</dd>
<dt>right(<i>n</i>)</dt>
<dd>Return the substring denoted by <i>n</i> positive right-most characters. I.e. 'My name is JP' <code>right</code> <i>2</i> is 'JP'.</dd>
<dt>setValue(<i>chars</i>)</dt>
<dd>Sets the content to <i>chars</i>.</dd>
<dt>slugify()</dt>
<dd>Converts the text into a valid url slug. Removes accents from Latin characters. I.e. 'The Quick Brown Fox' becomes 'the-quick-brown-fox'.</dd>
<dt>split(<i>separator</i>, <i>limit</i>)</dt>
<dd>Split the string to an array of substrings using the <i>separator</i> string to determine where to make each split. A limit of separations can be specified in the optional <i>limit</i>. I.e. 'Hello planet earth' <code>split</code> <i>' '</i> returns ['Hello', 'planet', 'earth'].</dd>
<dt>splitLeft(<i>separator</i>, <i>maxSplit</i>, <i>limit</i>)</dt>
<dd>Returns an array of strings, split from the left at <i>separator</i>. Performs at most <i>maxSplit</i> splits, and slices the result into an array with at most <i>limit</i> elements. I.e. 'We built this city' <code>splitLeft</code> <i>' '</i> and <i>1</i> becomes ['We', 'built this city'].</dd>
<dt>splitRight(<i>separator</i>, <i>maxSplit</i>, <i>limit</i>)</dt>
<dd>Returns an array of strings, split from the left at <i>separator</i>. Performs at most <i>maxSplit</i> splits, and slices the result into an array with at most <i>limit</i> elements. I.e. 'We built this city' <code>splitLeft</code> <i>' '</i> and <i>1</i> becomes ['We built this', 'city'].</dd>
<dt>startsWith(<i>prefix</i>)</dt>
<dd>Return true if the string starts with <i>prefix</i>. I.e. 'Steve was here' <code>startsWith</code> <i>'Steve'</i> is true.</dd>
<dt>strip(<i>chars</i>)</dt>
<dd>Removes <i>chars</i> from the given string. I.e. ' Hello World ' <code>strip</code> <i>' '</i> becomes 'HelloWorld'.</dd>
<dt>stripPunctuation()</dt>
<dd>Strip all of the punctuation. I.e. 'My, st[ring] *full* of %punctuation)' becomes 'My string full of punctuation'.</dd>
<dt>stripTags(<i>tag</i>)</dt>
<dd>Strip all of the HTML with the specified <i>tag</i> or all tags when <i>tag</i> is empty. I.e. '<p>just <b>some</b> text</p>' <code>stripTags</code> becomes 'just some text'.</dd>
<dt>template(<i>values</i>, <i>open</i>, <i>close</i>)</dt>
<dd>Takes the string and interpolates the <i>values</i>. Defaults <i>open</i> to <i>{{</i> and <i>close</i> to <i>}}</i> if <i>open</i> and <i>close</i> are left empty for Mustache compatible templates. However, you can change this default by supplying <i>open</i> and <i>close</i>. I.e. 'Hello {{planet}}!!!' <code>template</code> <i>{"planet":"Earth"}</i> becomes 'Hello Earth!!!'.</dd>
<dt>titleCase()</dt>
<dd>Changes the string with the first letter of each word uppercased, including hyphenated words. I.e. 'hello world' <code>titleCase</code> becomes 'Hello World'.</dd>
<dt>toBoolean()</dt>
<dd>Converts a logical truth string to a boolean. A string containing 'true', 'on', 'yes', or '1' will become a boolean true, otherwise false.</dd>
<dt>toCSV(<i>JSON</i>)</dt>
<dd>Converts an array or object to a CSV line. </dd>
<dt>toFloat(<i>precision</i>)</dt>
<dd>Parses the string and returns a floating point number with the specified <i>precision</i>. I.e. '3.45522' <code>toFloat</code> <i>2</i> becomes 3.45.</dd>
<dt>toInteger()</dt>
<dd>Parses a string argument and returns an integer. I.e. '5.3' <code>toInteger</code> becomes 5.</dd>
<dt>toLowerCase()</dt>
<dd>Changes the case of the entire string to lowercase. I.e. 'Hello world' <code>toLowerCase</code> becomes 'hello world'.</dd>
<dt>toString()</dt>
<dd>Converts the current value to a string. I.e. 123 <code>toString</code> becomes '123'.</dd>
<dt>toUpperCase()</dt>
<dd>Changes the case of the entire string to uppercase. I.e. 'Hello world' <code>toUpperCase</code> becomes 'HELLO WORLD'.</dd>
<dt>trim()</dt>
<dd>Remove the leading and trailing whitespace from the string. I.e. ' hello ' <code>trim</code> becomes 'hello'.</dd>
<dt>trimLeft()</dt>
<dd>Removes the leading whitespace from the string. I.e. ' hello there.' <code>trimLeft</code> becomes 'hello there'.</dd>
<dt>trimRight()</dt>
<dd>Removes the trailing whitespace from the string. I.e. 'hello there ' <code>trimRight</code> becomes 'hello there'.</dd>
<dt>truncate(<i>length</i>, <i>chars</i>)</dt>
<dd>Truncates the string, accounting for word placement and character count. I.e. 'this is some long text' <code>truncate</code> <i>14</i> and <i>' read more'</i> becomes 'this is some read more'.</dd>
<dt>underscore()</dt>
<dd>Converts a camel cased string into a string delimited by underscores. I.e. 'dataRate' <code>underscore</code> becomes 'data-rate'.</dd>
<dt>unescapeHTML()</dt>
<dd>Unescapes the HTML. I.e. '&lt;div&gt;hi&lt;/div&gt;' <code>unescapeHTML</code> becomes '<div>hi</div>'</dd>
<dt>wrapHTML(<i>tag</i>, <i>attributes</i>)</dt>
<dd>The string will be wrapped with HTML Element <i>tag</i> and their <i>attributes</i> provided in JSON format. I.e. 'Venkat' <code>wrapHTML</code> <i>'div'</i> and <i>{ "class": "left bullet" }</i> becomes '<div id="content" class="left bullet">Venkat</div>'</dd>
</dl>
<h3>References</h3>
<ul>
<li>The method operations are derived from the lightweight, open source <a href="http://stringjs.com" target=_blank>stringjs.com</a> project.</li>
<li>The official <a href="https://github.com/Steveorevo/node-red-contrib-string" target=_blank>node-red-contrib-string</a> project on GitHub.</li>
</ul>
</script>
<script type="text/javascript">
RED.nodes.registerType('string',{
category: 'function',
color: '#C0C0C0',
defaults: {
name: {value:""},
methods: [],
prop: {value: 'payload'},
propout: {value: 'payload'},
object: {value: 'msg'},
objectout: {value: 'msg'}
},
inputs:1,
outputs:1,
icon: "string.png",
label: function() {
return this.name||"string";
},
labelStyle: function() {
return this.name?"node_label_italic":"";
},
oneditprepare: function() {
var node = this;
node.resizeMethods = function() {
var newWidth = $(".node-input-method-container-row").width();
newWidth = ((newWidth - 460) + 222).toString() + 'px';
var selector = '.node-input-methods-applied .red-ui-typedInput-container';
if ($(selector).length) {
$(selector).css('width', newWidth);
}
};
var methods = [
{
name: "append",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'chars'
}]
},
{
name: "between",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'left'
},
{
default:'str',
types:['msg','flow','global','str'],
placeholder:'right'
}]
},
{
name: "camelize",
params: []
},
{
name: "capitalize",
params: []
},
{
name: "chompLeft",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'prefix'
}]
},
{
name: "chompRight",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'suffix'
}]
},
{
name: "collapseWhitespace",
params: []
},
{
name: "contains",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'find'
}]
},
{
name: "count",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'find'
}]
},
{
name: "dasherize",
params: []
},
{
name: "decodeHTMLEntities",
params: []
},
{
name: "decodeURIComponent",
params: []
},
{
name: "delLeftMost",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'find'
}]
},
{
name: "delRightMost",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'find'
}]
},
{
name: "encodeURIComponent",
params: []
},
{
name: "endsWith",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'chars'
}]
},
{
name: "escapeHTML",
params: []
},
{
name: "ensureLeft",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'prefix'
}]
},
{
name: "ensureRight",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'suffix'
}]
},
{
name: "getRightMost",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'find'
}]
},
{
name: "getLeftMost",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'find'
}]
},
{
name: "humanize",
params: []
},
{
name: "isAlpha",
params: []
},
{
name: "isAlphaNumeric",
params: []
},
{
name: "isEmpty",
params: []
},
{
name: "isLower",
params: []
},
{
name: "isNumeric",
params: []
},
{
name: "isUpper",
params: []
},
{
name: "latinise",
params: []
},
{
name: "left",
params: [{
default:'num',
types:['msg','flow','global','num'],
placeholder:'number of chars'
}]
},
{
name: "length",
params: []
},
{
name: "lines",
params: []
},
{
name: "pad",
params: [{
default:'num',
types:['msg','flow','global','num',],
placeholder:'length'
},
{
default:'str',
types:['msg','flow','global','str'],
placeholder:'char'
}]
},
{
name: "padLeft",
params: [{
default:'num',
types:['msg','flow','global','num',],
placeholder:'length'
},
{
default:'str',
types:['msg','flow','global','str'],
placeholder:'char'
}]
},
{
name: "padRight",
params: [{
default:'num',
types:['msg','flow','global','num',],
placeholder:'length'
},
{
default:'str',
types:['msg','flow','global','str'],
placeholder:'char'
}]
},
{
name: "parseCSV",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'delimiter'
},
{
default:'str',
types:['msg','flow','global','str'],
placeholder:'qualifier'
},
{
default:'str',
types:['msg','flow','global','str'],
placeholder:'escape'
},
{
default:'str',
types:['msg','flow','global','str'],
placeholder:'lineDelimiter'
}]
},
{
name: "prepend",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'chars'
}]
},
{
name: "repeat",
params: [{
default:'num',
types:['msg','flow','global','num'],
placeholder:'number of times'
}]
},
{
name: "replaceAll",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'search'
},
{
default:'str',
types:['msg','flow','global','str'],
placeholder:'replace'
}]
},
{
name: "right",
params: [{
default:'num',
types:['msg','flow','global','num'],
placeholder:'number of chars'
}]
},
{
name: "setValue",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'chars'
}]
},
{
name: "slugify",
params: []
},
{
name: "split",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'separator'
},
{
default:'num',
types:['msg','flow','global','num'],
placeholder:'limit'
}]
},
{
name: "splitLeft",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'separator'
},
{
default:'num',
types:['msg','flow','global','num'],
placeholder:'max'
},
{
default:'num',
types:['msg','flow','global','num'],
placeholder:'limit'
}]
},
{
name: "splitRight",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'separator'
},
{
default:'num',
types:['msg','flow','global','num'],
placeholder:'max'
},
{
default:'num',
types:['msg','flow','global','num'],
placeholder:'limit'
}]
},
{
name: "startsWith",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'prefix'
}]
},
{
name: "strip",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'chars'
}]
},
{
name: "stripPunctuation",
params: []
},
{
name: "stripTags",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'tag, leave blank for all tags'
}]
},
{
name: "template",
params: [{
default:'json',
types:['msg','flow','global','json'],
placeholder:"values"
},
{
default:'str',
types:['msg','flow','global','str'],
placeholder:'open, leave blank for {{'
},
{
default:'str',
types:['msg','flow','global','str'],
placeholder:'close, leave blank for }}'
}]
},
{
name:'titleCase',
params: []
},
{
name: "toBoolean",
params: []
},
{
name: "toCSV",
params: [{
default:'json',
types:['json'],
placeholder:'{"delimiter":",", "qualifier": "\"", "escape":"\\", "enclosedNumbers":true, "keys":false}'
}]
},
{
name: "toFloat",
params: [{
default:'num',
types:['msg','flow','global','num'],
placeholder:'precision'
}]
},
{
name: "toInteger",
params: []
},
{
name: "toLowerCase",
params: []
},
{
name: "toString",
params: []
},
{
name: "toUpperCase",
params: []
},
{
name: "trim",
params: []
},
{
name: "trimLeft",
params: []
},
{
name: "trimRight",
params: []
},
{
name: "truncate",
params: [{
default:'num',
types:['msg','flow','global','num'],
placeholder:'length'
},
{
default:'str',
types:['msg','flow','global','str'],
placeholder:'chars'
}]
},
{
name: "underscore",
params: []
},
{
name: "unescapeHTML",
params: []
},
{
name: "wrapHTML",
params: [{
default:'str',
types:['msg','flow','global','str'],
placeholder:'tag'
},
{
default:'json',
types:['msg','flow','global','json'],
placeholder:'attributes'
}]
}
];
$('#node-input-prop').typedInput({
default: 'msg',
typeField: $("#node-input-object"),
types:['flow','global','msg', 'str']
});
$('#node-input-propout').typedInput({
default: 'msg',
typeField: $("#node-input-objectout"),
types:['flow','global','msg']
});
$('#node-input-method-container').css('min-height','300px').css('min-width','450px').editableList({
addItem: function(container, i, method) {
var row = $('<div/>', {class:"node-input-methods-applied"}).appendTo(container);
var selectField = $('<select/>',{class:"node-input-method-type",style:"width:165px; margin-right:10px;"}).appendTo(row);
for (var i=0; i < methods.length; i++) {
selectField.append($("<option></option>").val(methods[i].name).text(methods[i].name));
}
// Build the parameter typedInput UI array by the given selectField
var params = [];
function updateMethodParamUI(name) {
// Remove prior params UI elements
params.forEach(function(p){
p.remove();
});
// Find the method index by name
for (var m=0; m < methods.length; m++) {
if (methods[m].name == name) {
selectField.val(name);
break;
}
}
// Build the params UI elements
methods[m].params.forEach(function(p, i) {
if (i == 0) {
var paramDiv = $('<div/>',{style:"display:inline;"}).appendTo(row);
}else{
var paramDiv = $('<div/>',{style:"display:block;margin-top:10px;margin-left:175px"}).appendTo(row);
}
$('<input/>',{class:"node-input-method-param" + i.toString(),
type:"text",style:"width:222px;",
placeholder:p.placeholder})
.appendTo(paramDiv)
.typedInput(p);
params.push(paramDiv);
});
}
// Build default append method's params on initial add or load method
if (!method.name) {
updateMethodParamUI('append');
}else{
updateMethodParamUI(method.name);
//Fill out existing param data
method.params.forEach(function(p, i){
row.find(".node-input-method-param"+i).typedInput('type', p.type);
row.find(".node-input-method-param"+i).typedInput('value', p.value);
});
}
node.resizeMethods();
// Rebuild method's params on select change
selectField.change(function() {
updateMethodParamUI($(this).val());
node.resizeMethods();
});
},
removable: true,
sortable: true
});
// Load prior data
if (node.methods) {
node.methods.forEach(function(m){
$('#node-input-method-container').editableList('addItem', m);
});
}
},
oneditresize: function() {
this.resizeMethods();
},
oneditsave: function() {
var methodItems = $("#node-input-method-container").editableList('items');
var methods = [];
methodItems.each(function(){
var method = {
name: $(this).find(".node-input-method-type").val(),
params: []
};
var i = 0;
while($(this).find(".node-input-method-param"+i).length) {
var param = {};
param.type = $(this).find(".node-input-method-param"+i).typedInput('type');
param.value = $(this).find(".node-input-method-param"+i).typedInput('value');
method.params.push(param);
i++;
}
methods.push(method);
});
this.methods = methods;
}
});
</script>