drop.js.html revision 4fcbec6145d16637205990699912fb90f6a3807c
<html>
<head>
</head>
<body id="yahoo-com">
<div id="doc3" class="yui-t2">
<div id="hd">
<h3>dd <span class="subtitle">3.00PR1</span></h3>
<p>
> drop.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 & 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-drop</span>
<span class="c"> */</span>
<span class="c">/**</span>
<span class="c"> * This class provides the ability to create a Drop Target.</span>
<span class="c"> * @class Drop</span>
<span class="c"> * @extends Base</span>
<span class="c"> * @constructor</span>
<span class="c"> */</span>
<span class="k">var</span> <span class="nx">NODE</span> <span class="o">=</span> <span class="s1">'node'</span><span class="o">,</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">OFFSET_HEIGHT</span> <span class="o">=</span> <span class="s1">'offsetHeight'</span><span class="o">,</span>
<span class="nx">OFFSET_WIDTH</span> <span class="o">=</span> <span class="s1">'offsetWidth'</span><span class="o">,</span>
<span class="c">/**</span>
<span class="c"> * @event drop:over</span>
<span class="c"> * @description Fires when a drag element is over this target.</span>
<span class="c"> * @bubbles DDM</span>
<span class="c"> */</span>
<span class="nx">EV_DROP_OVER</span> <span class="o">=</span> <span class="s1">'drop:over'</span><span class="o">,</span>
<span class="c">/**</span>
<span class="c"> * @event drop:enter</span>
<span class="c"> * @description Fires when a drag element enters this target.</span>
<span class="c"> * @bubbles DDM</span>
<span class="c"> */</span>
<span class="nx">EV_DROP_ENTER</span> <span class="o">=</span> <span class="s1">'drop:enter'</span><span class="o">,</span>
<span class="c">/**</span>
<span class="c"> * @event drop:exit</span>
<span class="c"> * @description Fires when a drag element exits this target.</span>
<span class="c"> * @bubbles DDM</span>
<span class="c"> */</span>
<span class="nx">EV_DROP_EXIT</span> <span class="o">=</span> <span class="s1">'drop:exit'</span><span class="o">;</span>
<span class="c">/**</span>
<span class="c"> * @event drop:hit</span>
<span class="c"> * @description Fires when a draggable node is dropped on this Drop Target. (Fired from dd-ddm-drop)</span>
<span class="c"> * @bubbles DDM</span>
<span class="c"> */</span>
<span class="k">var</span> <span class="nx">Drop</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
<span class="nx">Drop</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="k">this</span><span class="o">.</span><span class="nx">_createShim</span><span class="o">();</span>
<span class="nx">DDM</span><span class="o">.</span><span class="nx">_regTarget</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
<span class="c">/* TODO</span>
<span class="c"> }, this, true);</span>
<span class="c"> }</span>
<span class="c"> */</span>
<span class="o">};</span>
<span class="nx">Drop</span><span class="o">.</span><span class="nx">NAME</span> <span class="o">=</span> <span class="s1">'drop'</span><span class="o">;</span>
<span class="nx">Drop</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 node</span>
<span class="c"> * @type Node</span>
<span class="c"> */</span>
<span class="nx">node</span><span class="o">:</span> <span class="o">{</span>
<span class="nx">set</span><span class="o">:</span> <span class="k">function</span><span class="o">(</span><span class="nx">node</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="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="nx">node</span><span class="o">);</span>
<span class="k">if</span> <span class="o">(!</span><span class="nx">n</span><span class="o">)</span> <span class="o">{</span>
<span class="nx">Y</span><span class="o">.</span><span class="nx">fail</span><span class="o">(</span><span class="s1">'DD.Drop: Invalid Node Given: '</span> <span class="o">+</span> <span class="nx">node</span><span class="o">);</span>
<span class="o">}</span>
<span class="k">return</span> <span class="nx">n</span><span class="o">;</span>
<span class="o">}</span>
<span class="o">},</span>
<span class="c">/**</span>
<span class="c"> * @attribute groups</span>
<span class="c"> * @description Array of groups to add this drop into.</span>
<span class="c"> * @type Array</span>
<span class="c"> */</span>
<span class="nx">groups</span><span class="o">:</span> <span class="o">{</span>
<span class="nx">value</span><span class="o">:</span> <span class="o">[</span><span class="s1">'default'</span><span class="o">],</span>
<span class="nx">set</span><span class="o">:</span> <span class="k">function</span><span class="o">(</span><span class="nx">g</span><span class="o">)</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="nx">_groups</span> <span class="o">=</span> <span class="o">{};</span>
<span class="nx">Y</span><span class="o">.</span><span class="nx">each</span><span class="o">(</span><span class="nx">g</span><span class="o">,</span> <span class="k">function</span><span class="o">(</span><span class="nx">v</span><span class="o">,</span> <span class="nx">k</span><span class="o">)</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="nx">_groups</span><span class="o">[</span><span class="nx">v</span><span class="o">]</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</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">/**</span>
<span class="c"> * @attribute padding</span>
<span class="c"> * @description CSS style padding to make the Drop Target bigger than the node.</span>
<span class="c"> * @type String</span>
<span class="c"> */</span>
<span class="nx">padding</span><span class="o">:</span> <span class="o">{</span>
<span class="nx">value</span><span class="o">:</span> <span class="s1">'0'</span><span class="o">,</span>
<span class="nx">set</span><span class="o">:</span> <span class="k">function</span><span class="o">(</span><span class="nx">p</span><span class="o">)</span> <span class="o">{</span>
<span class="k">return</span> <span class="nx">DDM</span><span class="o">.</span><span class="nx">cssSizestoObject</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"> * @attribute lock</span>
<span class="c"> * @description Set to lock this drop element.</span>
<span class="c"> * @type Boolean</span>
<span class="c"> */</span>
<span class="nx">lock</span><span class="o">:</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="nx">set</span><span class="o">:</span> <span class="k">function</span><span class="o">(</span><span class="nx">lock</span><span class="o">)</span> <span class="o">{</span>
<span class="k">if</span> <span class="o">(</span><span class="nx">lock</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">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">'-drop-locked'</span><span class="o">);</span>
<span class="o">}</span> <span class="k">else</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">removeClass</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">'-drop-locked'</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="o">};</span>
<span class="nx">Y</span><span class="o">.</span><span class="nx">extend</span><span class="o">(</span><span class="nx">Drop</span><span class="o">,</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">Base</span><span class="o">,</span> <span class="o">{</span>
<span class="c">/**</span>
<span class="c"> * @private</span>
<span class="c"> * @method _createEvents</span>
<span class="c"> * @description This method creates all the events for this Event Target and publishes them so we get Event Bubbling.</span>
<span class="c"> */</span>
<span class="nx">_createEvents</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">ev</span> <span class="o">=</span> <span class="o">[</span>
<span class="nx">EV_DROP_OVER</span><span class="o">,</span>
<span class="nx">EV_DROP_ENTER</span><span class="o">,</span>
<span class="nx">EV_DROP_EXIT</span><span class="o">,</span>
<span class="s1">'drop:hit'</span>
<span class="o">];</span>
<span class="nx">Y</span><span class="o">.</span><span class="nx">each</span><span class="o">(</span><span class="nx">ev</span><span class="o">,</span> <span class="k">function</span><span class="o">(</span><span class="nx">v</span><span class="o">,</span> <span class="nx">k</span><span class="o">)</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="nx">publish</span><span class="o">(</span><span class="nx">v</span><span class="o">,</span> <span class="o">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">v</span><span class="o">,</span>
<span class="nx">emitFacade</span><span class="o">:</span> <span class="kc">true</span><span class="o">,</span>
<span class="nx">preventable</span><span class="o">:</span> <span class="kc">false</span><span class="o">,</span>
<span class="nx">bubbles</span><span class="o">:</span> <span class="kc">true</span><span class="o">,</span>
<span class="nx">queuable</span><span class="o">:</span> <span class="kc">true</span>
<span class="o">});</span>
<span class="o">},</span> <span class="k">this</span><span class="o">);</span>
<span class="k">this</span><span class="o">.</span><span class="nx">addTarget</span><span class="o">(</span><span class="nx">DDM</span><span class="o">);</span>
<span class="o">},</span>
<span class="c">/**</span>
<span class="c"> * @private</span>
<span class="c"> * @property _valid</span>
<span class="c"> * @description Flag for determining if the target is valid in this operation.</span>
<span class="c"> * @type Boolean</span>
<span class="c"> */</span>
<span class="nx">_valid</span><span class="o">:</span> <span class="kc">null</span><span class="o">,</span>
<span class="c">/**</span>
<span class="c"> * @private</span>
<span class="c"> * @property _groups</span>
<span class="c"> * @description The groups this target belongs to.</span>
<span class="c"> * @type Array</span>
<span class="c"> */</span>
<span class="nx">_groups</span><span class="o">:</span> <span class="kc">null</span><span class="o">,</span>
<span class="c">/**</span>
<span class="c"> * @property shim</span>
<span class="c"> * @description Node reference to the targets shim</span>
<span class="c"> * @type {Object}</span>
<span class="c"> */</span>
<span class="nx">shim</span><span class="o">:</span> <span class="kc">null</span><span class="o">,</span>
<span class="c">/**</span>
<span class="c"> * @property region</span>
<span class="c"> * @description A region object associated with this target, used for checking regions while dragging.</span>
<span class="c"> * @type Object</span>
<span class="c"> */</span>
<span class="nx">region</span><span class="o">:</span> <span class="kc">null</span><span class="o">,</span>
<span class="c">/**</span>
<span class="c"> * @property overTarget</span>
<span class="c"> * @description This flag is tripped when a drag element is over this target.</span>
<span class="c"> * @type Boolean</span>
<span class="c"> */</span>
<span class="nx">overTarget</span><span class="o">:</span> <span class="kc">null</span><span class="o">,</span>
<span class="c">/**</span>
<span class="c"> * @method inGroup</span>
<span class="c"> * @description Check if this target is in one of the supplied groups.</span>
<span class="c"> * @param {Array} groups The groups to check against</span>
<span class="c"> * @return Boolean</span>
<span class="c"> */</span>
<span class="nx">inGroup</span><span class="o">:</span> <span class="k">function</span><span class="o">(</span><span class="nx">groups</span><span class="o">)</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="nx">_valid</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>
<span class="k">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>
<span class="nx">Y</span><span class="o">.</span><span class="nx">each</span><span class="o">(</span><span class="nx">groups</span><span class="o">,</span> <span class="k">function</span><span class="o">(</span><span class="nx">v</span><span class="o">,</span> <span class="nx">k</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">_groups</span><span class="o">[</span><span class="nx">v</span><span class="o">])</span> <span class="o">{</span>
<span class="nx">ret</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span>
<span class="k">this</span><span class="o">.</span><span class="nx">_valid</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span>
<span class="o">}</span>
<span class="o">},</span> <span class="k">this</span><span class="o">);</span>
<span class="k">return</span> <span class="nx">ret</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 Private 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">this</span><span class="o">.</span><span class="nx">_createEvents</span><span class="o">();</span>
<span class="k">var</span> <span class="nx">node</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="nx">node</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'id'</span><span class="o">))</span> <span class="o">{</span>
<span class="k">var</span> <span class="nx">id</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">node</span><span class="o">);</span>
<span class="nx">node</span><span class="o">.</span><span class="nx">set</span><span class="o">(</span><span class="s1">'id'</span><span class="o">,</span> <span class="nx">id</span><span class="o">);</span>
<span class="o">}</span>
<span class="nx">node</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">'-drop'</span><span class="o">);</span>
<span class="o">},</span>
<span class="c">/**</span>
<span class="c"> * @private</span>
<span class="c"> * @method destructor</span>
<span class="c"> * @description Lifecycle destructor, unreg the drag from the DDM and remove listeners</span>
<span class="c"> */</span>
<span class="nx">destructor</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
<span class="nx">DDM</span><span class="o">.</span><span class="nx">_unregTarget</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">shim</span><span class="o">)</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="nx">shim</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'parentNode'</span><span class="o">).</span><span class="nx">removeChild</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">shim</span><span class="o">);</span>
<span class="k">this</span><span class="o">.</span><span class="nx">shim</span> <span class="o">=</span> <span class="kc">null</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">removeClass</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">'-drop'</span><span class="o">);</span>
<span class="o">},</span>
<span class="c">/**</span>
<span class="c"> * @private</span>
<span class="c"> * @method _deactivateShim</span>
<span class="c"> * @description Removes classes from the target, resets some flags and sets the shims deactive position [-999, -999]</span>
<span class="c"> */</span>
<span class="nx">_deactivateShim</span><span class="o">:</span> <span class="k">function</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">removeClass</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">'-drop-active-valid'</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">removeClass</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">'-drop-active-invalid'</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">removeClass</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">'-drop-over'</span><span class="o">);</span>
<span class="k">this</span><span class="o">.</span><span class="nx">shim</span><span class="o">.</span><span class="nx">setStyles</span><span class="o">({</span>
<span class="nx">top</span><span class="o">:</span> <span class="s1">'-999px'</span><span class="o">,</span>
<span class="nx">left</span><span class="o">:</span> <span class="s1">'-999px'</span>
<span class="o">});</span>
<span class="k">this</span><span class="o">.</span><span class="nx">overTarget</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>
<span class="o">},</span>
<span class="c">/**</span>
<span class="c"> * @private</span>
<span class="c"> * @method _activateShim</span>
<span class="c"> * @description Activates the shim and adds some interaction CSS classes</span>
<span class="c"> */</span>
<span class="nx">_activateShim</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">activeDrag</span><span class="o">)</span> <span class="o">{</span>
<span class="k">return</span> <span class="kc">false</span><span class="o">;</span> <span class="c">//Nothing is dragging, no reason to activate.</span>
<span class="c"></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">NODE</span><span class="o">)</span> <span class="o">===</span> <span class="nx">DDM</span><span class="o">.</span><span class="nx">activeDrag</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">return</span> <span class="kc">false</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">'lock'</span><span class="o">))</span> <span class="o">{</span>
<span class="k">return</span> <span class="kc">false</span><span class="o">;</span>
<span class="o">}</span>
<span class="k">var</span> <span class="nx">node</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="c">//TODO Visibility Check..</span>
<span class="c"></span> <span class="c">//if (this.inGroup(DDM.activeDrag.get('groups')) && this.get(NODE).isVisible()) {</span>
<span class="c"></span> <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">inGroup</span><span class="o">(</span><span class="nx">DDM</span><span class="o">.</span><span class="nx">activeDrag</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'groups'</span><span class="o">)))</span> <span class="o">{</span>
<span class="nx">node</span><span class="o">.</span><span class="nx">removeClass</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">'-drop-active-invalid'</span><span class="o">);</span>
<span class="nx">node</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">'-drop-active-valid'</span><span class="o">);</span>
<span class="nx">DDM</span><span class="o">.</span><span class="nx">_addValid</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
<span class="k">this</span><span class="o">.</span><span class="nx">overTarget</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>
<span class="k">this</span><span class="o">.</span><span class="nx">sizeShim</span><span class="o">();</span>
<span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
<span class="nx">DDM</span><span class="o">.</span><span class="nx">_removeValid</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
<span class="nx">node</span><span class="o">.</span><span class="nx">removeClass</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">'-drop-active-valid'</span><span class="o">);</span>
<span class="nx">node</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">'-drop-active-invalid'</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">},</span>
<span class="c">/**</span>
<span class="c"> * @method sizeShim</span>
<span class="c"> * @description Positions and sizes the shim with the raw data from the node, this can be used to programatically adjust the Targets shim for Animation..</span>
<span class="c"> */</span>
<span class="nx">sizeShim</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">activeDrag</span><span class="o">)</span> <span class="o">{</span>
<span class="k">return</span> <span class="kc">false</span><span class="o">;</span> <span class="c">//Nothing is dragging, no reason to activate.</span>
<span class="c"></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">NODE</span><span class="o">)</span> <span class="o">===</span> <span class="nx">DDM</span><span class="o">.</span><span class="nx">activeDrag</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">return</span> <span class="kc">false</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">'lock'</span><span class="o">))</span> <span class="o">{</span>
<span class="k">return</span> <span class="kc">false</span><span class="o">;</span>
<span class="o">}</span>
<span class="k">var</span> <span class="nx">node</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">nh</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="nx">OFFSET_HEIGHT</span><span class="o">),</span>
<span class="nx">nw</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="nx">OFFSET_WIDTH</span><span class="o">),</span>
<span class="nx">xy</span> <span class="o">=</span> <span class="nx">node</span><span class="o">.</span><span class="nx">getXY</span><span class="o">(),</span>
<span class="nx">p</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">'padding'</span><span class="o">);</span>
<span class="c">//Apply padding</span>
<span class="c"></span> <span class="nx">nw</span> <span class="o">=</span> <span class="nx">nw</span> <span class="o">+</span> <span class="nx">p</span><span class="o">.</span><span class="nx">left</span> <span class="o">+</span> <span class="nx">p</span><span class="o">.</span><span class="nx">right</span><span class="o">;</span>
<span class="nx">nh</span> <span class="o">=</span> <span class="nx">nh</span> <span class="o">+</span> <span class="nx">p</span><span class="o">.</span><span class="nx">top</span> <span class="o">+</span> <span class="nx">p</span><span class="o">.</span><span class="nx">bottom</span><span class="o">;</span>
<span class="nx">xy</span><span class="o">[</span><span class="m">0</span><span class="o">]</span> <span class="o">=</span> <span class="nx">xy</span><span class="o">[</span><span class="m">0</span><span class="o">]</span> <span class="o">-</span> <span class="nx">p</span><span class="o">.</span><span class="nx">left</span><span class="o">;</span>
<span class="nx">xy</span><span class="o">[</span><span class="m">1</span><span class="o">]</span> <span class="o">=</span> <span class="nx">xy</span><span class="o">[</span><span class="m">1</span><span class="o">]</span> <span class="o">-</span> <span class="nx">p</span><span class="o">.</span><span class="nx">top</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">activeDrag</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'dragMode'</span><span class="o">)</span> <span class="o">===</span> <span class="nx">DDM</span><span class="o">.</span><span class="nx">INTERSECT</span><span class="o">)</span> <span class="o">{</span>
<span class="c">//Intersect Mode, make the shim bigger</span>
<span class="c"></span> <span class="k">var</span> <span class="nx">dd</span> <span class="o">=</span> <span class="nx">DDM</span><span class="o">.</span><span class="nx">activeDrag</span><span class="o">,</span>
<span class="nx">dH</span> <span class="o">=</span> <span class="nx">dd</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">get</span><span class="o">(</span><span class="nx">OFFSET_HEIGHT</span><span class="o">),</span>
<span class="nx">dW</span> <span class="o">=</span> <span class="nx">dd</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">get</span><span class="o">(</span><span class="nx">OFFSET_WIDTH</span><span class="o">);</span>
<span class="nx">nh</span> <span class="o">=</span> <span class="o">(</span><span class="nx">nh</span> <span class="o">+</span> <span class="nx">dH</span><span class="o">);</span>
<span class="nx">nw</span> <span class="o">=</span> <span class="o">(</span><span class="nx">nw</span> <span class="o">+</span> <span class="nx">dW</span><span class="o">);</span>
<span class="nx">xy</span><span class="o">[</span><span class="m">0</span><span class="o">]</span> <span class="o">=</span> <span class="nx">xy</span><span class="o">[</span><span class="m">0</span><span class="o">]</span> <span class="o">-</span> <span class="o">(</span><span class="nx">dW</span> <span class="o">-</span> <span class="nx">dd</span><span class="o">.</span><span class="nx">deltaXY</span><span class="o">[</span><span class="m">0</span><span class="o">]);</span>
<span class="nx">xy</span><span class="o">[</span><span class="m">1</span><span class="o">]</span> <span class="o">=</span> <span class="nx">xy</span><span class="o">[</span><span class="m">1</span><span class="o">]</span> <span class="o">-</span> <span class="o">(</span><span class="nx">dH</span> <span class="o">-</span> <span class="nx">dd</span><span class="o">.</span><span class="nx">deltaXY</span><span class="o">[</span><span class="m">1</span><span class="o">]);</span>
<span class="o">}</span>
<span class="c">//Set the style on the shim</span>
<span class="c"></span> <span class="k">this</span><span class="o">.</span><span class="nx">shim</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">nh</span> <span class="o">+</span> <span class="s1">'px'</span><span class="o">,</span>
<span class="nx">width</span><span class="o">:</span> <span class="nx">nw</span> <span class="o">+</span> <span class="s1">'px'</span><span class="o">,</span>
<span class="nx">top</span><span class="o">:</span> <span class="nx">xy</span><span class="o">[</span><span class="m">1</span><span class="o">]</span> <span class="o">+</span> <span class="s1">'px'</span><span class="o">,</span>
<span class="nx">left</span><span class="o">:</span> <span class="nx">xy</span><span class="o">[</span><span class="m">0</span><span class="o">]</span> <span class="o">+</span> <span class="s1">'px'</span>
<span class="o">});</span>
<span class="c">//Create the region to be used by intersect when a drag node is over us.</span>
<span class="c"></span> <span class="k">this</span><span class="o">.</span><span class="nx">region</span> <span class="o">=</span> <span class="o">{</span>
<span class="s1">'0'</span><span class="o">:</span> <span class="nx">xy</span><span class="o">[</span><span class="m">0</span><span class="o">],</span>
<span class="s1">'1'</span><span class="o">:</span> <span class="nx">xy</span><span class="o">[</span><span class="m">1</span><span class="o">],</span>
<span class="nx">area</span><span class="o">:</span> <span class="m">0</span><span class="o">,</span>
<span class="nx">top</span><span class="o">:</span> <span class="nx">xy</span><span class="o">[</span><span class="m">1</span><span class="o">],</span>
<span class="nx">right</span><span class="o">:</span> <span class="nx">xy</span><span class="o">[</span><span class="m">0</span><span class="o">]</span> <span class="o">+</span> <span class="nx">nw</span><span class="o">,</span>
<span class="nx">bottom</span><span class="o">:</span> <span class="nx">xy</span><span class="o">[</span><span class="m">1</span><span class="o">]</span> <span class="o">+</span> <span class="nx">nh</span><span class="o">,</span>
<span class="nx">left</span><span class="o">:</span> <span class="nx">xy</span><span class="o">[</span><span class="m">0</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 _createShim</span>
<span class="c"> * @description Creates the Target shim and adds it to the DDM's playground..</span>
<span class="c"> */</span>
<span class="nx">_createShim</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
<span class="c">//var s = Y.Node.create(['div', { id: this.get(NODE).get('id') + '_shim' }]);</span>
<span class="c"></span> <span class="k">var</span> <span class="nx">s</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">'<div id="'</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">get</span><span class="o">(</span><span class="s1">'id'</span><span class="o">)</span> <span class="o">+</span> <span class="s1">'_shim"></div>'</span><span class="o">);</span>
<span class="nx">s</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="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">get</span><span class="o">(</span><span class="nx">OFFSET_HEIGHT</span><span class="o">)</span> <span class="o">+</span> <span class="s1">'px'</span><span class="o">,</span>
<span class="nx">width</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">get</span><span class="o">(</span><span class="nx">OFFSET_WIDTH</span><span class="o">)</span> <span class="o">+</span> <span class="s1">'px'</span><span class="o">,</span>
<span class="nx">backgroundColor</span><span class="o">:</span> <span class="s1">'yellow'</span><span class="o">,</span>
<span class="nx">opacity</span><span class="o">:</span> <span class="s1">'.5'</span><span class="o">,</span>
<span class="nx">zIndex</span><span class="o">:</span> <span class="m">999</span><span class="o">,</span>
<span class="nx">overflow</span><span class="o">:</span> <span class="s1">'hidden'</span><span class="o">,</span>
<span class="nx">top</span><span class="o">:</span> <span class="s1">'-900px'</span><span class="o">,</span>
<span class="nx">left</span><span class="o">:</span> <span class="s1">'-900px'</span><span class="o">,</span>
<span class="nx">position</span><span class="o">:</span> <span class="s1">'absolute'</span>
<span class="o">});</span>
<span class="nx">DDM</span><span class="o">.</span><span class="nx">_pg</span><span class="o">.</span><span class="nx">appendChild</span><span class="o">(</span><span class="nx">s</span><span class="o">);</span>
<span class="k">this</span><span class="o">.</span><span class="nx">shim</span> <span class="o">=</span> <span class="nx">s</span><span class="o">;</span>
<span class="nx">s</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="s1">'mouseover'</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">_handleOverEvent</span><span class="o">,</span> <span class="k">this</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>
<span class="nx">s</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="s1">'mouseout'</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">_handleOutEvent</span><span class="o">,</span> <span class="k">this</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>
<span class="o">},</span>
<span class="c">/**</span>
<span class="c"> * @private</span>
<span class="c"> * @method _handleOverTarget</span>
<span class="c"> * @description This handles the over target call made from this object or from the DDM</span>
<span class="c"> */</span>
<span class="nx">_handleTargetOver</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">isOverTarget</span><span class="o">(</span><span class="k">this</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">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">'-drop-over'</span><span class="o">);</span>
<span class="nx">DDM</span><span class="o">.</span><span class="nx">activeDrop</span> <span class="o">=</span> <span class="k">this</span><span class="o">;</span>
<span class="nx">DDM</span><span class="o">.</span><span class="nx">otherDrops</span><span class="o">[</span><span class="k">this</span><span class="o">]</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">overTarget</span><span class="o">)</span> <span class="o">{</span>
<span class="nx">DDM</span><span class="o">.</span><span class="nx">activeDrag</span><span class="o">.</span><span class="nx">fire</span><span class="o">(</span><span class="s1">'drag:over'</span><span class="o">,</span> <span class="o">{</span> <span class="nx">drop</span><span class="o">:</span> <span class="k">this</span><span class="o">,</span> <span class="nx">drag</span><span class="o">:</span> <span class="nx">DDM</span><span class="o">.</span><span class="nx">activeDrag</span> <span class="o">});</span>
<span class="k">this</span><span class="o">.</span><span class="nx">fire</span><span class="o">(</span><span class="nx">EV_DROP_OVER</span><span class="o">,</span> <span class="o">{</span> <span class="nx">drop</span><span class="o">:</span> <span class="k">this</span><span class="o">,</span> <span class="nx">drag</span><span class="o">:</span> <span class="nx">DDM</span><span class="o">.</span><span class="nx">activeDrag</span> <span class="o">});</span>
<span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="nx">overTarget</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span>
<span class="k">this</span><span class="o">.</span><span class="nx">fire</span><span class="o">(</span><span class="nx">EV_DROP_ENTER</span><span class="o">,</span> <span class="o">{</span> <span class="nx">drop</span><span class="o">:</span> <span class="k">this</span><span class="o">,</span> <span class="nx">drag</span><span class="o">:</span> <span class="nx">DDM</span><span class="o">.</span><span class="nx">activeDrag</span> <span class="o">});</span>
<span class="nx">DDM</span><span class="o">.</span><span class="nx">activeDrag</span><span class="o">.</span><span class="nx">fire</span><span class="o">(</span><span class="s1">'drag:enter'</span><span class="o">,</span> <span class="o">{</span> <span class="nx">drop</span><span class="o">:</span> <span class="k">this</span><span class="o">,</span> <span class="nx">drag</span><span class="o">:</span> <span class="nx">DDM</span><span class="o">.</span><span class="nx">activeDrag</span> <span class="o">});</span>
<span class="nx">DDM</span><span class="o">.</span><span class="nx">activeDrag</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">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">'-drag-over'</span><span class="o">);</span>
<span class="nx">DDM</span><span class="o">.</span><span class="nx">_handleTargetOver</span><span class="o">();</span>
<span class="o">}</span>
<span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="nx">_handleOut</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 _handleOverEvent</span>
<span class="c"> * @description Handles the mouseover DOM event on the Target Shim</span>
<span class="c"> */</span>
<span class="nx">_handleOverEvent</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
<span class="nx">DDM</span><span class="o">.</span><span class="nx">_addActiveShim</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
<span class="o">},</span>
<span class="c">/**</span>
<span class="c"> * @private</span>
<span class="c"> * @method _handleOut</span>
<span class="c"> * @description Handles the mouseout DOM event on the Target Shim</span>
<span class="c"> */</span>
<span class="nx">_handleOutEvent</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span>
<span class="nx">DDM</span><span class="o">.</span><span class="nx">_removeActiveShim</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
<span class="o">},</span>
<span class="c">/**</span>
<span class="c"> * @private</span>
<span class="c"> * @method _handleOut</span>
<span class="c"> */</span>
<span class="nx">_handleOut</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">isOverTarget</span><span class="o">(</span><span class="k">this</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">overTarget</span><span class="o">)</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="nx">overTarget</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span>
<span class="nx">DDM</span><span class="o">.</span><span class="nx">_removeActiveShim</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="nx">DDM</span><span class="o">.</span><span class="nx">activeDrag</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">removeClass</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">'-drop-over'</span><span class="o">);</span>
<span class="nx">DDM</span><span class="o">.</span><span class="nx">activeDrag</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">removeClass</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">'-drag-over'</span><span class="o">);</span>
<span class="k">this</span><span class="o">.</span><span class="nx">fire</span><span class="o">(</span><span class="nx">EV_DROP_EXIT</span><span class="o">);</span>
<span class="nx">DDM</span><span class="o">.</span><span class="nx">activeDrag</span><span class="o">.</span><span class="nx">fire</span><span class="o">(</span><span class="s1">'drag:exit'</span><span class="o">,</span> <span class="o">{</span> <span class="nx">drop</span><span class="o">:</span> <span class="k">this</span> <span class="o">});</span>
<span class="nx">delete</span> <span class="nx">DDM</span><span class="o">.</span><span class="nx">otherDrops</span><span class="o">[</span><span class="k">this</span><span class="o">];</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="o">}</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">Drop</span> <span class="o">=</span> <span class="nx">Drop</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">
</ul>
</div>
<div class="module">
<h4>Classes</h4>
<ul class="content">
</ul>
</div>
<div class="module">
<h4>Files</h4>
<ul class="content">
</ul>
</div>
</div>
</div>
</div>
<div id="ft">
<hr />
Copyright © 2008 Yahoo! Inc. All rights reserved.
</div>
</div>
</body>
</html>