WirableField.js.html #1

  • //
  • guest/
  • christiane_renck/
  • mergequestjs/
  • main/
  • demos/
  • WireIt/
  • api/
  • WirableField.js.html
  • View
  • Commits
  • Open Download .zip Download (25 KB)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns:yui="http://yuilibrary.com/rdf/1.0/yui.rdf#">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>API: inputex-plugin   WirableField.js  (YUI Library)</title>

	<link rel="stylesheet" type="text/css" href="assets/reset-fonts-grids-min.css" />
	<link rel="stylesheet" type="text/css" href="assets/api.css" />

    <script type="text/javascript" src="assets/api-js"></script>
    <script type="text/javascript" src="assets/ac-js"></script>
</head>

<body id="yahoo-com">

<div id="doc3" class="yui-t2">
	<div id="hd">
        <h1><a href="http://neyric.github.com/wireit" title="WireItLibrary">WireItLibrary</a></h1>
        <h3>inputex-plugin&nbsp; <span class="subtitle">0.6.0</span></h3>
        <a href="./index.html" title="WireItLibrary">WireItLibrary</a> 
            &gt; <a href="./module_inputex-plugin.html" title="inputex-plugin">inputex-plugin</a>
                
                 &gt; WirableField.js (source view) 
        <form onsubmit="return false">
            <div id="propertysearch">
                Search: <input autocomplete="off" id="searchinput" />
                <div id="searchresults">
                    &nbsp;
                </div>
            </div>
        </form>
	</div>

	<div id="bd">
		<div id="yui-main">
			<div class="yui-b">
            <form action="#" name="yui-classopts-form" method="get" id="yui-classopts-form">
                <fieldset>
                    <legend>Filters</legend>
                <span class="classopts"><input type="checkbox" name="show_private" id="show_private" /> <label for="show_private">Show Private</label></span>
                <span class="classopts"><input type="checkbox" name="show_protected" id="show_protected" /> <label for="show_protected">Show Protected</label></span>
                <span class="classopts"><input type="checkbox" name="show_deprecated" id="show_deprecated" /> <label for="show_deprecated">Show Deprecated</label></span>
                </fieldset>
            </form>

                    <div id="srcout">
                        <style>
                            #doc3 .classopts { display:none; }
                        </style>
                        <div class="highlight"><pre><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>

   <span class="kd">var</span> <span class="nx">lang</span> <span class="o">=</span> <span class="nx">YAHOO</span><span class="p">.</span><span class="nx">lang</span><span class="o">;</span>

<span class="c">/**</span>
<span class="c"> * Copy of the original inputEx.Field class that we&#39;re gonna override to extend it.</span>
<span class="c"> * @class BaseField</span>
<span class="c"> * @namespace inputEx</span>
<span class="c"> */</span>
<span class="nx">inputEx</span><span class="p">.</span><span class="nx">BaseField</span> <span class="o">=</span> <span class="nx">inputEx</span><span class="p">.</span><span class="nx">Field</span><span class="o">;</span>

<span class="c">/**</span>
<span class="c"> * Class to make inputEx Fields &quot;wirable&quot;.Re-create inputEx.Field adding the wirable properties</span>
<span class="c"> * @class Field</span>
<span class="c"> * @namespace inputEx</span>
<span class="c"> * @extends inputEx.BaseField</span>
<span class="c"> */</span>
<span class="nx">inputEx</span><span class="p">.</span><span class="nx">Field</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
   <span class="nx">inputEx</span><span class="p">.</span><span class="nx">Field</span><span class="p">.</span><span class="nx">superclass</span><span class="p">.</span><span class="nx">constructor</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="o">,</span><span class="nx">options</span><span class="p">);</span>
<span class="p">};</span>

<span class="nx">lang</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">inputEx</span><span class="p">.</span><span class="nx">Field</span><span class="o">,</span> <span class="nx">inputEx</span><span class="p">.</span><span class="nx">BaseField</span><span class="o">,</span> <span class="p">{</span>

   <span class="c">/**</span>
<span class="c">    * Adds a wirable option to every field</span>
<span class="c">    * @method setOptions</span>
<span class="c">    */</span>
   <span class="nx">setOptions</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">inputEx</span><span class="p">.</span><span class="nx">Field</span><span class="p">.</span><span class="nx">superclass</span><span class="p">.</span><span class="nx">setOptions</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="o">,</span> <span class="nx">options</span><span class="p">);</span>
      
      <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">wirable</span> <span class="o">=</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">isUndefined</span><span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">wirable</span><span class="p">)</span> <span class="o">?</span> <span class="kc">false</span> <span class="o">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">wirable</span><span class="o">;</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">container</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">container</span><span class="o">;</span>
      <span class="c">//options.container = null;</span>
   <span class="p">}</span><span class="o">,</span>
   
   <span class="c">/**</span>
<span class="c">    * Adds a terminal to each field</span>
<span class="c">    * @method render</span>
<span class="c">    */</span>
   <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="nx">inputEx</span><span class="p">.</span><span class="nx">Field</span><span class="p">.</span><span class="nx">superclass</span><span class="p">.</span><span class="nx">render</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
      
      <span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">wirable</span><span class="p">)</span> <span class="p">{</span>
         <span class="k">this</span><span class="p">.</span><span class="nx">renderTerminal</span><span class="p">();</span>
      <span class="p">}</span>
   <span class="p">}</span><span class="o">,</span>
   
   <span class="c">/**</span>
<span class="c">    * Render the associated input terminal</span>
<span class="c">    * @method renderTerminal</span>
<span class="c">    */</span>
   <span class="nx">renderTerminal</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>

      <span class="kd">var</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">inputEx</span><span class="p">.</span><span class="nx">cn</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="o">,</span> <span class="p">{</span><span class="nx">className</span><span class="o">:</span> <span class="s1">&#39;WireIt-InputExTerminal&#39;</span><span class="p">});</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">divEl</span><span class="p">.</span><span class="nx">insertBefore</span><span class="p">(</span><span class="nx">wrapper</span><span class="o">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">fieldContainer</span><span class="p">);</span>

      <span class="k">this</span><span class="p">.</span><span class="nx">terminal</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">WireIt</span><span class="p">.</span><span class="nx">Terminal</span><span class="p">(</span><span class="nx">wrapper</span><span class="o">,</span> <span class="p">{</span>
         <span class="nx">name</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">name</span><span class="o">,</span> 
         <span class="nx">direction</span><span class="o">:</span> <span class="p">[</span><span class="o">-</span><span class="mi">1</span><span class="o">,</span><span class="mi">0</span><span class="p">]</span><span class="o">,</span>
         <span class="nx">fakeDirection</span><span class="o">:</span> <span class="p">[</span><span class="mi">0</span><span class="o">,</span> <span class="mi">1</span><span class="p">]</span><span class="o">,</span>
         <span class="nx">ddConfig</span><span class="o">:</span> <span class="p">{</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s2">&quot;input&quot;</span><span class="o">,</span>
            <span class="nx">allowedTypes</span><span class="o">:</span> <span class="p">[</span><span class="s2">&quot;output&quot;</span><span class="p">]</span>
         <span class="p">}</span><span class="o">,</span>
      <span class="nx">nMaxWires</span><span class="o">:</span> <span class="mi">1</span> <span class="p">}</span><span class="o">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">container</span><span class="p">);</span>

      <span class="c">// Reference to the container</span>
      <span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">container</span><span class="p">)</span> <span class="p">{</span>
         <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">container</span><span class="p">.</span><span class="nx">terminals</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">terminal</span><span class="p">);</span>
      <span class="p">}</span>

      <span class="c">// Register the events</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">terminal</span><span class="p">.</span><span class="nx">eventAddWire</span><span class="p">.</span><span class="nx">subscribe</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">onAddWire</span><span class="o">,</span> <span class="k">this</span><span class="o">,</span> <span class="kc">true</span><span class="p">);</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">terminal</span><span class="p">.</span><span class="nx">eventRemoveWire</span><span class="p">.</span><span class="nx">subscribe</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">onRemoveWire</span><span class="o">,</span> <span class="k">this</span><span class="o">,</span> <span class="kc">true</span><span class="p">);</span>
    <span class="p">}</span><span class="o">,</span>

	<span class="c">/**</span>
<span class="c">	 * Set the container for this field</span>
<span class="c">	 */</span>
	<span class="nx">setContainer</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">container</span><span class="p">)</span> <span class="p">{</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">container</span> <span class="o">=</span> <span class="nx">container</span><span class="o">;</span>
		<span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">terminal</span><span class="p">)</span> <span class="p">{</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">terminal</span><span class="p">.</span><span class="nx">container</span> <span class="o">=</span> <span class="nx">container</span><span class="o">;</span>
			<span class="k">if</span><span class="p">(</span> <span class="nx">WireIt</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">terminal</span><span class="o">,</span> <span class="nx">container</span><span class="p">.</span><span class="nx">terminals</span><span class="p">)</span> <span class="o">==</span> <span class="o">-</span><span class="mi">1</span> <span class="p">)</span> <span class="p">{</span>
				<span class="nx">container</span><span class="p">.</span><span class="nx">terminals</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">terminal</span><span class="p">);</span>
			<span class="p">}</span>
		<span class="p">}</span>		
	<span class="p">}</span><span class="o">,</span>

	<span class="c">/**</span>
<span class="c">	 * also change the terminal name when changing the field name</span>
<span class="c">	 */</span>
	<span class="nx">setFieldName</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
		<span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">terminal</span><span class="p">)</span> <span class="p">{</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">terminal</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span><span class="o">;</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">terminal</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">title</span> <span class="o">=</span> <span class="nx">name</span><span class="o">;</span>
		<span class="p">}</span>
	<span class="p">}</span><span class="o">,</span>

    <span class="c">/**</span>
<span class="c">     * Remove the input wired state on the </span>
<span class="c">     * @method onAddWire</span>
<span class="c">     */</span>
    <span class="nx">onAddWire</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="o">,</span> <span class="nx">params</span><span class="p">)</span> <span class="p">{</span>
       <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">container</span><span class="p">.</span><span class="nx">onAddWire</span><span class="p">(</span><span class="nx">e</span><span class="o">,</span><span class="nx">params</span><span class="p">);</span>

       <span class="k">this</span><span class="p">.</span><span class="nx">disable</span><span class="p">();</span>
       <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="s2">&quot;[wired]&quot;</span><span class="o">;</span>
    <span class="p">}</span><span class="o">,</span>

    <span class="c">/**</span>
<span class="c">     * Remove the input wired state on the </span>
<span class="c">     * @method onRemoveWire</span>
<span class="c">     */</span>
    <span class="nx">onRemoveWire</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="o">,</span> <span class="nx">params</span><span class="p">)</span> <span class="p">{</span> 
       <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">container</span><span class="p">.</span><span class="nx">onRemoveWire</span><span class="p">(</span><span class="nx">e</span><span class="o">,</span><span class="nx">params</span><span class="p">);</span>

       <span class="k">this</span><span class="p">.</span><span class="nx">enable</span><span class="p">();</span>
       <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="o">;</span>
    <span class="p">}</span>

<span class="p">});</span>

<span class="nx">inputEx</span><span class="p">.</span><span class="nx">Field</span><span class="p">.</span><span class="nx">groupOptions</span> <span class="o">=</span> <span class="nx">inputEx</span><span class="p">.</span><span class="nx">BaseField</span><span class="p">.</span><span class="nx">groupOptions</span><span class="p">.</span><span class="nx">concat</span><span class="p">([</span>
	<span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;boolean&#39;</span><span class="o">,</span> <span class="kd">label</span><span class="o">:</span> <span class="s1">&#39;Wirable&#39;</span><span class="o">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;wirable&#39;</span><span class="o">,</span> <span class="nx">value</span><span class="o">:</span> <span class="kc">false</span><span class="p">}</span>
<span class="p">]);</span>

<span class="p">})();</span>
</pre></div>

                    </div>
			</div>
		</div>
		<div class="yui-b">
            <div class="nav">

                    <div id="moduleList" class="module">
                        <h4>Modules</h4>
                        <ul class="content">
                                <li class=""><a href="module_animations-plugin.html" title="animations-plugin">animations-plugin</a></li>
                                <li class=""><a href="module_composable-plugin.html" title="composable-plugin">composable-plugin</a></li>
                                <li class=""><a href="module_editor-plugin.html" title="editor-plugin">editor-plugin</a></li>
                                <li class="selected"><a href="module_inputex-plugin.html" title="inputex-plugin">inputex-plugin</a></li>
                                <li class=""><a href="module_layout-plugin.html" title="layout-plugin">layout-plugin</a></li>
                                <li class=""><a href="module_wireit.html" title="WireIt">WireIt</a></li>
                        </ul>
                    </div>

                    <div id="classList" class="module">
                        <h4>Classes</h4>
                        <ul class="content">
                                <li class=""><a href="inputEx.BaseField.html" title="inputEx.BaseField">inputEx.BaseField</a></li>
                                <li class=""><a href="inputEx.Field.html" title="inputEx.Field">inputEx.Field</a></li>
                                <li class=""><a href="inputEx.LayerContainer.html" title="inputEx.LayerContainer">inputEx.LayerContainer</a></li>
                                <li class=""><a href="WireIt.FormContainer.html" title="WireIt.FormContainer">WireIt.FormContainer</a></li>
                                <li class=""><a href="WireIt.TextareaContainer.html" title="WireIt.TextareaContainer">WireIt.TextareaContainer</a></li>
                        </ul>
                    </div>

                    <div id="fileList" class="module">
                        <h4>Files</h4>
                        <ul class="content">        
                                <li class=""><a href="fields.js.html" title="fields.js">fields.js</a></li>
                                <li class=""><a href="LayerContainer.js.html" title="LayerContainer.js">LayerContainer.js</a></li>
                                <li class=""><a href="Layout.js.html" title="Layout.js">Layout.js</a></li>
                                <li class=""><a href="TextareaContainer.js.html" title="TextareaContainer.js">TextareaContainer.js</a></li>
                                <li class="selected"><a href="WirableField.js.html" title="WirableField.js">WirableField.js</a></li>
                        </ul>
                    </div>





            </div>
		</div>
	</div>
	<div id="ft">
        <hr />
        Copyright &copy; 2010 Eric Abouaf All rights reserved.
	</div>
</div>
<script type="text/javascript">

    var ALL_YUI_PROPS = [{"url": "inputEx.Field.html#property__addElement", "access": "", "host": "inputEx.Field", "type": "property", "name": "_addElement"}, {"url": "inputEx.LayerContainer.html#property_className", "access": "", "host": "inputEx.LayerContainer", "type": "property", "name": "className"}, {"url": "WireIt.FormContainer.html#property_collapsible", "access": "", "host": "WireIt.FormContainer", "type": "property", "name": "collapsible"}, {"url": "inputEx.LayerContainer.html#property_ddHandle", "access": "", "host": "inputEx.LayerContainer", "type": "property", "name": "ddHandle"}, {"url": "WireIt.FormContainer.html#property_fields", "access": "", "host": "WireIt.FormContainer", "type": "property", "name": "fields"}, {"url": "WireIt.FormContainer.html#method_getValue", "access": "", "host": "WireIt.FormContainer", "type": "method", "name": "getValue"}, {"url": "inputEx.LayerContainer.html#property_height", "access": "", "host": "inputEx.LayerContainer", "type": "property", "name": "height"}, {"url": "inputEx.LayerContainer.html#property_Layout", "access": "", "host": "inputEx.LayerContainer", "type": "property", "name": "Layout"}, {"url": "inputEx.LayerContainer.html#method_layoutAnim", "access": "", "host": "inputEx.LayerContainer", "type": "method", "name": "layoutAnim"}, {"url": "WireIt.FormContainer.html#property_legend", "access": "", "host": "WireIt.FormContainer", "type": "property", "name": "legend"}, {"url": "inputEx.Field.html#method_onAddWire", "access": "", "host": "inputEx.Field", "type": "method", "name": "onAddWire"}, {"url": "inputEx.LayerContainer.html#method_onDrag", "access": "", "host": "inputEx.LayerContainer", "type": "method", "name": "onDrag"}, {"url": "inputEx.Field.html#method_onRemoveWire", "access": "", "host": "inputEx.Field", "type": "method", "name": "onRemoveWire"}, {"url": "WireIt.FormContainer.html#method_render", "access": "", "host": "WireIt.FormContainer", "type": "method", "name": "render"}, {"url": "inputEx.Field.html#method_render", "access": "", "host": "inputEx.Field", "type": "method", "name": "render"}, {"url": "inputEx.LayerContainer.html#method_render", "access": "", "host": "inputEx.LayerContainer", "type": "method", "name": "render"}, {"url": "WireIt.FormContainer.html#method_renderForm", "access": "", "host": "WireIt.FormContainer", "type": "method", "name": "renderForm"}, {"url": "inputEx.Field.html#method_renderTerminal", "access": "", "host": "inputEx.Field", "type": "method", "name": "renderTerminal"}, {"url": "inputEx.Field.html#method_setContainer", "access": "", "host": "inputEx.Field", "type": "method", "name": "setContainer"}, {"url": "inputEx.Field.html#method_setFieldName", "access": "", "host": "inputEx.Field", "type": "method", "name": "setFieldName"}, {"url": "WireIt.FormContainer.html#method_setOptions", "access": "", "host": "WireIt.FormContainer", "type": "method", "name": "setOptions"}, {"url": "inputEx.Field.html#method_setOptions", "access": "", "host": "inputEx.Field", "type": "method", "name": "setOptions"}, {"url": "inputEx.LayerContainer.html#method_setTerminals", "access": "", "host": "inputEx.LayerContainer", "type": "method", "name": "setTerminals"}, {"url": "WireIt.FormContainer.html#method_setValue", "access": "", "host": "WireIt.FormContainer", "type": "method", "name": "setValue"}, {"url": "inputEx.LayerContainer.html#method_startDynamicLayout", "access": "", "host": "inputEx.LayerContainer", "type": "method", "name": "startDynamicLayout"}, {"url": "inputEx.LayerContainer.html#method_stopDynamicLayout", "access": "", "host": "inputEx.LayerContainer", "type": "method", "name": "stopDynamicLayout"}, {"url": "inputEx.LayerContainer.html#property_width", "access": "", "host": "inputEx.LayerContainer", "type": "property", "name": "width"}, {"url": "inputEx.LayerContainer.html#property__WireItTerminals", "access": "", "host": "inputEx.LayerContainer", "type": "property", "name": "_WireItTerminals"}, {"url": "WireIt.FormContainer.html#property_xtype", "access": "", "host": "WireIt.FormContainer", "type": "property", "name": "xtype"}, {"url": "inputEx.LayerContainer.html#property_xtype", "access": "", "host": "inputEx.LayerContainer", "type": "property", "name": "xtype"}];
</script>
</body>
</html>
# Change User Description Committed
#1 16445 christiane_renck Rename/move file(s)
//guest/christiane_renck/MergeQuestJS/main/demos/WireIt/api/WirableField.js.html
#1 16444 christiane_renck Adding MergeQuestJS to the Workshop.