proxy.js.html revision 4fcbec6145d16637205990699912fb90f6a3807c
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>API: dd proxy.js (YUI Library)</title>
<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">
<a href="http://developer.yahoo.com/yui/"><h1>Yahoo! UI Library</h1></a>
<h3>dd&nbsp; <span class="subtitle">3.00PR1</span></h3>
<p>
<a href="/index.html">Yahoo! UI Library</a>
&gt; <a href="/module_dd.html">dd</a>
&gt; proxy.js (source view)
</p>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<form name="yui-classopts-form">
<span id="classopts"><input type="checkbox" name="showprivate" id="showprivate" /> <label for="showprivate">Show Private</label></span>
<span id="classopts"><input type="checkbox" name="showprotected" id="showprotected" /> <label for="showprotected">Show Protected</label></span>
<span id="classopts"><input type="checkbox" name="showdeprecated" id="showdeprecated" /> <label for="showdeprecated">Show Deprecated</label></span>
</form>
<div id="srcout">
<style>
#doc3 #classopts { display:none; }
</style>
<div class="highlight" ><pre> <span class="c">/**</span>
<span class="c"> * The Drag &amp; Drop Utility allows you to create a draggable interface efficiently, buffering you from browser-level abnormalities and enabling you to focus on the interesting logic surrounding your particular implementation. This component enables you to create a variety of standard draggable objects with just a few lines of code and then, using its extensive API, add your own specific implementation logic.</span>
<span class="c"> * @module dd</span>
<span class="c"> * @submodule dd-proxy</span>
<span class="c"> */</span>
<span class="c">/**</span>
<span class="c"> * This class extends dd-drag to allow for creating a proxy drag node, instead of dragging the original node.</span>
<span class="c"> * @class Proxy</span>
<span class="c"> * @extends Drag</span>
<span class="c"> * @constructor</span>
<span class="c"> */</span>
<span class="k">var</span> <span class="nx">DDM</span> <span class="o">=</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">DD</span><span class="o">.</span><span class="nx">DDM</span><span class="o">,</span>
<span class="nx">NODE</span> <span class="o">=</span> <span class="s1">&#39;node&#39;</span><span class="o">,</span>
<span class="nx">DRAG_NODE</span> <span class="o">=</span> <span class="s1">&#39;dragNode&#39;</span><span class="o">,</span>
<span class="nx">PROXY</span> <span class="o">=</span> <span class="s1">&#39;proxy&#39;</span><span class="o">;</span>
<span class="k">var</span> <span class="nx">Proxy</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
<span class="nx">Proxy</span><span class="o">.</span><span class="nx">superclass</span><span class="o">.</span><span class="nx">constructor</span><span class="o">.</span><span class="nx">apply</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="nx">arguments</span><span class="o">);</span>
<span class="o">};</span>
<span class="nx">Proxy</span><span class="o">.</span><span class="nx">NAME</span> <span class="o">=</span> <span class="s1">&#39;dragProxy&#39;</span><span class="o">;</span>
<span class="nx">Proxy</span><span class="o">.</span><span class="nx">ATTRS</span> <span class="o">=</span> <span class="o">{</span>
<span class="c">/**</span>
<span class="c"> * @attribute moveOnEnd</span>
<span class="c"> * @description Move the original node at the end of the drag. Default: true</span>
<span class="c"> * @type Boolean</span>
<span class="c"> */</span>
<span class="nx">moveOnEnd</span><span class="o">:</span> <span class="o">{</span>
<span class="nx">value</span><span class="o">:</span> <span class="kc">true</span>
<span class="o">},</span>
<span class="c">/**</span>
<span class="c"> * @attribute resizeFrame</span>
<span class="c"> * @description Make the Proxy node assume the size of the original node. Default: true</span>
<span class="c"> * @type Boolean</span>
<span class="c"> */</span>
<span class="nx">resizeFrame</span><span class="o">:</span> <span class="o">{</span>
<span class="nx">value</span><span class="o">:</span> <span class="kc">true</span>
<span class="o">},</span>
<span class="c">/**</span>
<span class="c"> * @attribute proxy</span>
<span class="c"> * @description Make this Draggable instance a Proxy instance. Default: false</span>
<span class="c"> * @type Boolean</span>
<span class="c"> */</span>
<span class="nx">proxy</span><span class="o">:</span> <span class="o">{</span>
<span class="nx">writeOnce</span><span class="o">:</span> <span class="kc">true</span><span class="o">,</span>
<span class="nx">value</span><span class="o">:</span> <span class="kc">false</span>
<span class="o">},</span>
<span class="c">/**</span>
<span class="c"> * @attribute positionProxy</span>
<span class="c"> * @description Make the Proxy node appear in the same place as the original node. Default: true</span>
<span class="c"> * @type Boolean</span>
<span class="c"> */</span>
<span class="nx">positionProxy</span><span class="o">:</span> <span class="o">{</span>
<span class="nx">value</span><span class="o">:</span> <span class="kc">true</span>
<span class="o">},</span>
<span class="c">/**</span>
<span class="c"> * @attribute borderStyle</span>
<span class="c"> * @description The default border style for the border of the proxy. Default: 1px solid #808080</span>
<span class="c"> * @type Boolean</span>
<span class="c"> */</span>
<span class="nx">borderStyle</span><span class="o">:</span> <span class="o">{</span>
<span class="nx">value</span><span class="o">:</span> <span class="s1">&#39;1px solid #808080&#39;</span>
<span class="o">}</span>
<span class="o">};</span>
<span class="k">var</span> <span class="nx">proto</span> <span class="o">=</span> <span class="o">{</span>
<span class="c">/**</span>
<span class="c"> * @private</span>
<span class="c"> * @method _createFrame</span>
<span class="c"> * @description Create the proxy element if it doesn&#39;t already exist and set the DD.DDM._proxy value</span>
<span class="c"> */</span>
<span class="nx">_createFrame</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
<span class="k">if</span> <span class="o">(!</span><span class="nx">DDM</span><span class="o">.</span><span class="nx">_proxy</span><span class="o">)</span> <span class="o">{</span>
<span class="nx">DDM</span><span class="o">.</span><span class="nx">_proxy</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span>
<span class="k">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">Node</span><span class="o">.</span><span class="nx">create</span><span class="o">(</span><span class="s1">&#39;&lt;div&gt;&lt;/div&gt;&#39;</span><span class="o">);</span>
<span class="nx">p</span><span class="o">.</span><span class="nx">setStyles</span><span class="o">({</span>
<span class="nx">position</span><span class="o">:</span> <span class="s1">&#39;absolute&#39;</span><span class="o">,</span>
<span class="nx">display</span><span class="o">:</span> <span class="s1">&#39;none&#39;</span><span class="o">,</span>
<span class="nx">zIndex</span><span class="o">:</span> <span class="s1">&#39;999&#39;</span><span class="o">,</span>
<span class="nx">top</span><span class="o">:</span> <span class="s1">&#39;-999px&#39;</span><span class="o">,</span>
<span class="nx">left</span><span class="o">:</span> <span class="s1">&#39;-999px&#39;</span><span class="o">,</span>
<span class="nx">border</span><span class="o">:</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">&#39;borderStyle&#39;</span><span class="o">)</span>
<span class="o">});</span>
<span class="k">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">Node</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">&#39;body&#39;</span><span class="o">);</span>
<span class="nx">b</span><span class="o">.</span><span class="nx">insertBefore</span><span class="o">(</span><span class="nx">p</span><span class="o">,</span> <span class="nx">b</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">&#39;firstChild&#39;</span><span class="o">));</span>
<span class="nx">p</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="s1">&#39;id&#39;</span><span class="o">,</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">stamp</span><span class="o">(</span><span class="nx">p</span><span class="o">));</span>
<span class="nx">p</span><span class="o">.</span><span class="nx">addClass</span><span class="o">(</span><span class="nx">DDM</span><span class="o">.</span><span class="nx">CSS_PREFIX</span> <span class="o">+</span> <span class="s1">&#39;-proxy&#39;</span><span class="o">);</span>
<span class="nx">DDM</span><span class="o">.</span><span class="nx">_proxy</span> <span class="o">=</span> <span class="nx">p</span><span class="o">;</span>
<span class="o">}</span>
<span class="o">},</span>
<span class="c">/**</span>
<span class="c"> * @private</span>
<span class="c"> * @method _setFrame</span>
<span class="c"> * @description If resizeProxy is set to true (default) it will resize the proxy element to match the size of the Drag Element.</span>
<span class="c"> * If positionProxy is set to true (default) it will position the proxy element in the same location as the Drag Element.</span>
<span class="c"> */</span>
<span class="nx">_setFrame</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
<span class="k">var</span> <span class="nx">n</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">NODE</span><span class="o">);</span>
<span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">&#39;resizeFrame&#39;</span><span class="o">))</span> <span class="o">{</span>
<span class="nx">DDM</span><span class="o">.</span><span class="nx">_proxy</span><span class="o">.</span><span class="nx">setStyles</span><span class="o">({</span>
<span class="nx">height</span><span class="o">:</span> <span class="nx">n</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">&#39;offsetHeight&#39;</span><span class="o">)</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span><span class="o">,</span>
<span class="nx">width</span><span class="o">:</span> <span class="nx">n</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">&#39;offsetWidth&#39;</span><span class="o">)</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span>
<span class="o">});</span>
<span class="o">}</span>
<span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">DRAG_NODE</span><span class="o">).</span><span class="nx">setStyles</span><span class="o">({</span>
<span class="nx">visibility</span><span class="o">:</span> <span class="s1">&#39;hidden&#39;</span><span class="o">,</span>
<span class="nx">display</span><span class="o">:</span> <span class="s1">&#39;block&#39;</span><span class="o">,</span>
<span class="nx">border</span><span class="o">:</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">&#39;borderStyle&#39;</span><span class="o">)</span>
<span class="o">});</span>
<span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">&#39;positionProxy&#39;</span><span class="o">))</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">DRAG_NODE</span><span class="o">).</span><span class="nx">setXY</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">nodeXY</span><span class="o">);</span>
<span class="o">}</span>
<span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">DRAG_NODE</span><span class="o">).</span><span class="nx">setStyle</span><span class="o">(</span><span class="s1">&#39;visibility&#39;</span><span class="o">,</span> <span class="s1">&#39;visible&#39;</span><span class="o">);</span>
<span class="o">},</span>
<span class="c">/**</span>
<span class="c"> * @private</span>
<span class="c"> * @method initializer</span>
<span class="c"> * @description Lifecycle method</span>
<span class="c"> */</span>
<span class="nx">initializer</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
<span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">PROXY</span><span class="o">))</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="nx">_createFrame</span><span class="o">();</span>
<span class="o">}</span>
<span class="o">},</span>
<span class="c">/**</span>
<span class="c"> * @method start</span>
<span class="c"> * @description Starts the drag operation and sets the dragNode config option.</span>
<span class="c"> */</span>
<span class="nx">start</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
<span class="k">if</span> <span class="o">(!</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">&#39;lock&#39;</span><span class="o">))</span> <span class="o">{</span>
<span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">PROXY</span><span class="o">))</span> <span class="o">{</span>
<span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">DRAG_NODE</span><span class="o">).</span><span class="nx">compareTo</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">NODE</span><span class="o">)))</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="nx">DRAG_NODE</span><span class="o">,</span> <span class="nx">DDM</span><span class="o">.</span><span class="nx">_proxy</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="nx">Proxy</span><span class="o">.</span><span class="nx">superclass</span><span class="o">.</span><span class="nx">start</span><span class="o">.</span><span class="nx">apply</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
<span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">PROXY</span><span class="o">))</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="nx">_setFrame</span><span class="o">();</span>
<span class="o">}</span>
<span class="o">},</span>
<span class="c">/**</span>
<span class="c"> * @method end</span>
<span class="c"> * @description Ends the drag operation, if moveOnEnd is set it will position the Drag Element to the new location of the proxy.</span>
<span class="c"> */</span>
<span class="nx">end</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
<span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">PROXY</span><span class="o">)</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">&#39;dragging&#39;</span><span class="o">))</span> <span class="o">{</span>
<span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">&#39;moveOnEnd&#39;</span><span class="o">))</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">NODE</span><span class="o">).</span><span class="nx">setXY</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">lastXY</span><span class="o">);</span>
<span class="o">}</span>
<span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="nx">DRAG_NODE</span><span class="o">).</span><span class="nx">setStyle</span><span class="o">(</span><span class="s1">&#39;display&#39;</span><span class="o">,</span> <span class="s1">&#39;none&#39;</span><span class="o">);</span>
<span class="o">}</span>
<span class="nx">Proxy</span><span class="o">.</span><span class="nx">superclass</span><span class="o">.</span><span class="nx">end</span><span class="o">.</span><span class="nx">apply</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">};</span>
<span class="c">//Extend DD.Drag</span>
<span class="c"></span> <span class="nx">Y</span><span class="o">.</span><span class="nx">extend</span><span class="o">(</span><span class="nx">Proxy</span><span class="o">,</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">DD</span><span class="o">.</span><span class="nx">Drag</span><span class="o">,</span> <span class="nx">proto</span><span class="o">);</span>
<span class="c">//Set this new class as DD.Drag for other extensions</span>
<span class="c"></span> <span class="nx">Y</span><span class="o">.</span><span class="nx">DD</span><span class="o">.</span><span class="nx">Drag</span> <span class="o">=</span> <span class="nx">Proxy</span><span class="o">;</span>
</pre></div>
</div>
</div>
</div>
<div class="yui-b">
<div class="nav">
<div class="module">
<h4>Modules</h4>
<ul class="content">
<li class=""><a href="module_anim.html">anim</a></li>
<li class=""><a href="module_attribute.html">attribute</a></li>
<li class=""><a href="module_base.html">base</a></li>
<li class="selected"><a href="module_dd.html">dd</a></li>
<li class=""><a href="module_dd-plugin.html">dd-plugin</a></li>
<li class=""><a href="module_dump.html">dump</a></li>
<li class=""><a href="module_event.html">event</a></li>
<li class=""><a href="module_io.html">io</a></li>
<li class=""><a href="module_node.html">node</a></li>
<li class=""><a href="module_oop.html">oop</a></li>
<li class=""><a href="module_queue.html">queue</a></li>
<li class=""><a href="module_substitute.html">substitute</a></li>
<li class=""><a href="module_yui.html">yui</a></li>
</ul>
</div>
<div class="module">
<h4>Classes</h4>
<ul class="content">
<li class=""><a href="DDM.html">DDM</a></li>
<li class=""><a href="Drag.html">Drag</a></li>
<li class=""><a href="DragConstained.html">DragConstained</a></li>
<li class=""><a href="Drop.html">Drop</a></li>
<li class=""><a href="Proxy.html">Proxy</a></li>
</ul>
</div>
<div class="module">
<h4>Files</h4>
<ul class="content">
<li class=""><a href="constrain.js.html">constrain.js</a></li>
<li class=""><a href="ddm-base.js.html">ddm-base.js</a></li>
<li class=""><a href="ddm-drop.js.html">ddm-drop.js</a></li>
<li class=""><a href="ddm.js.html">ddm.js</a></li>
<li class=""><a href="drag.js.html">drag.js</a></li>
<li class=""><a href="drop.js.html">drop.js</a></li>
<li class="selected"><a href="proxy.js.html">proxy.js</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="ft">
<hr />
Copyright &copy; 2008 Yahoo! Inc. All rights reserved.
</div>
</div>
</body>
</html>