<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library Examples: Drag & Drop: Portal Style Example</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<!--there is no custom header content for this example-->
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
</head>
<body id="yahoo-com" class=" yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
<div id="ygunav">
<p>
<em>
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>
</em>
</p>
<form action="http://search.yahoo.com/search" id="sitesearchform">
<input name="vs" type="hidden" value="developer.yahoo.com">
<input name="vs" type="hidden" value="yuiblog.com">
<div id="sitesearch">
<label for="searchinput">Site Search (YDN & YUIBlog): </label>
<input type="text" id="searchinput" name="p">
<input type="submit" value="Search" id="searchsubmit" class="ygbt">
</div>
</form>
</div>
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div>
<div id="pagetitle"><h1>YUI Library Examples: Drag & Drop: Portal Style Example</h1></div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-ge">
<div class="yui-u first example" id="main">
<h2>Drag & Drop: Portal Style Example</h2>
<div id="example" class="promo">
<div class="example-intro">
<p>Portal style example using Drag & Drop Event Bubbling and Animation.</p>
</div>
<div class="module example-container newWindow">
<div id="example-canvas" class="bd">
<p class="newWindowButton yui-skin-sam">
<span id="newWindowLink">
<span class="first-child">
<a href="portal-drag_source.html" target="_blank">View example in new window.</a>
</span>
</span>
</p>
</div>
</div>
</div>
<h3>Full HTML Source</h3>
<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">body</span>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"doc3"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-t2"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"hd"</span>><<span class="kw2">h1</span>></span>YUI 3.0 Portal Example<span class="sc2"><<span class="sy0">/</span><span class="kw2">h1</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"bd"</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"yui-main"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-b"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-g"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"play"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">ul</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"list"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"list1"</span>><<span class="sy0">/</span><span class="kw2">ul</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">ul</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"list"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"list2"</span>><<span class="sy0">/</span><span class="kw2">ul</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">ul</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"list"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"list3"</span>><<span class="sy0">/</span><span class="kw2">ul</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-b"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"feeds"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">p</span>></span>Drag a news feed into one of the columns.<span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">ul</span>><<span class="sy0">/</span><span class="kw2">ul</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"ft"</span>></span>Built with <span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"http://developer.yahoo.com/yui/3/"</span>></span>YUI 3.0<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>></span>: <span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"http://developer.yahoo.com/yui/3/yui"</span>></span>Core<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>></span>, Loader, Get, <span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"http://developer.yahoo.com/yui/3/cookie"</span>></span>Cookie<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>></span>, <span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"http://developer.yahoo.com/yui/3/animation"</span>></span>Animation<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>></span>, <span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"http://developer.yahoo.com/yui/3/io"</span>></span>IO<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>></span>, <span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"http://developer.yahoo.com/yui/3/json"</span>></span>JSON<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>></span> <span class="sc1">&amp;</span> <span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"http://developer.yahoo.com/yui/3/dd"</span>></span>DD<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>></span>.<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li2"><div class="de2"><span class="sc2"><<span class="kw2">script</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">"assets/portal.js"</span>><<span class="sy0">/</span><span class="kw2">script</span>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><span class="kw2">body</span>></span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2"><<span class="kw2">body</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"doc3"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-t2"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"hd"</span>><<span class="kw2">h1</span>></span>YUI 3.0 Portal Example<span class="sc2"><<span class="sy0">/</span><span class="kw2">h1</span>><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"bd"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"yui-main"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-b"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-g"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"play"</span>></span>
<span class="sc2"><<span class="kw2">ul</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"list"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"list1"</span>><<span class="sy0">/</span><span class="kw2">ul</span>></span>
<span class="sc2"><<span class="kw2">ul</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"list"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"list2"</span>><<span class="sy0">/</span><span class="kw2">ul</span>></span>
<span class="sc2"><<span class="kw2">ul</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"list"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"list3"</span>><<span class="sy0">/</span><span class="kw2">ul</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-b"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"feeds"</span>></span>
<span class="sc2"><<span class="kw2">p</span>></span>Drag a news feed into one of the columns.<span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span>
<span class="sc2"><<span class="kw2">ul</span>><<span class="sy0">/</span><span class="kw2">ul</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"ft"</span>></span>Built with <span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"http://developer.yahoo.com/yui/3/"</span>></span>YUI 3.0<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>></span>: <span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"http://developer.yahoo.com/yui/3/yui"</span>></span>Core<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>></span>, Loader, Get, <span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"http://developer.yahoo.com/yui/3/cookie"</span>></span>Cookie<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>></span>, <span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"http://developer.yahoo.com/yui/3/animation"</span>></span>Animation<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>></span>, <span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"http://developer.yahoo.com/yui/3/io"</span>></span>IO<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>></span>, <span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"http://developer.yahoo.com/yui/3/json"</span>></span>JSON<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>></span> <span class="sc1">&amp;</span> <span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"http://developer.yahoo.com/yui/3/dd"</span>></span>DD<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>></span>.<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="kw2">script</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">"assets/portal.js"</span>><<span class="sy0">/</span><span class="kw2">script</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">body</span>></span></pre></div><textarea id="syntax1-plain"><body>
<div id="doc3" class="yui-t2">
<div id="hd"><h1>YUI 3.0 Portal Example</h1></div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-g">
<div id="play">
<ul class="list" id="list1"></ul>
<ul class="list" id="list2"></ul>
<ul class="list" id="list3"></ul>
</div>
</div>
</div>
</div>
<div class="yui-b">
<div id="feeds">
<p>Drag a news feed into one of the columns.</p>
<ul></ul>
</div>
</div>
</div>
<div id="ft">Built with <a href="http://developer.yahoo.com/yui/3/">YUI 3.0</a>: <a href="http://developer.yahoo.com/yui/3/yui">Core</a>, Loader, Get, <a href="http://developer.yahoo.com/yui/3/cookie">Cookie</a>, <a href="http://developer.yahoo.com/yui/3/animation">Animation</a>, <a href="http://developer.yahoo.com/yui/3/io">IO</a>, <a href="http://developer.yahoo.com/yui/3/json">JSON</a> & <a href="http://developer.yahoo.com/yui/3/dd">DD</a>.</div>
</div>
<script src="assets/portal.js"></script>
</body></textarea></div><h3>Full Javascript Source</h3>
<div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">//Use loader to grab the modules needed</span></div></li><li class="li1"><div class="de1">YUI<span class="br0">(</span>yuiConfig<span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">'dd'</span><span class="sy0">,</span> <span class="st0">'anim'</span><span class="sy0">,</span> <span class="st0">'io'</span><span class="sy0">,</span> <span class="st0">'cookie'</span><span class="sy0">,</span> <span class="st0">'json'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Make this an Event Target so we can bubble to it</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> Portal <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> Portal.<span class="me1">superclass</span>.<span class="me1">constructor</span>.<span class="me1">apply</span><span class="br0">(</span><span class="kw1">this</span><span class="sy0">,</span> arguments<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> Portal.<span class="kw3">NAME</span> <span class="sy0">=</span> <span class="st0">'portal'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">extend</span><span class="br0">(</span>Portal<span class="sy0">,</span> Y.<span class="me1">Base</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//This is our new bubble target..</span></div></li><li class="li2"><div class="de2"> Y.<span class="me1">Portal</span> <span class="sy0">=</span> <span class="kw2">new</span> Portal<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Setup some private variables..</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> goingUp <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span> lastY <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">,</span> trans <span class="sy0">=</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">//The list of feeds that we are going to use</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> feeds <span class="sy0">=</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="st0">'ynews'</span><span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> id<span class="sy0">:</span> <span class="st0">'ynews'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> title<span class="sy0">:</span> <span class="st0">'Yahoo! US News'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> url<span class="sy0">:</span> <span class="st0">'rss.news.yahoo.com/rss/us'</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="st0">'yui'</span><span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> id<span class="sy0">:</span> <span class="st0">'yui'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> title<span class="sy0">:</span> <span class="st0">'YUI Blog'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> url<span class="sy0">:</span> <span class="st0">'feeds.yuiblog.com/YahooUserInterfaceBlog'</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="st0">'slashdot'</span><span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> id<span class="sy0">:</span> <span class="st0">'slashdot'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> title<span class="sy0">:</span> <span class="st0">'Slashdot'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> url<span class="sy0">:</span> <span class="st0">'rss.slashdot.org/Slashdot/slashdot'</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="st0">'ajaxian'</span><span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> id<span class="sy0">:</span> <span class="st0">'ajaxian'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> title<span class="sy0">:</span> <span class="st0">'Ajaxian'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> url<span class="sy0">:</span> <span class="st0">'feeds.feedburner.com/ajaxian'</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="st0">'daringfireball'</span><span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> id<span class="sy0">:</span> <span class="st0">'daringfireball'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> title<span class="sy0">:</span> <span class="st0">'Daring Fireball'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> url<span class="sy0">:</span> <span class="st0">'daringfireball.net/index.xml'</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="st0">'wiredtech'</span><span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> id<span class="sy0">:</span> <span class="st0">'wiredtech'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> title<span class="sy0">:</span> <span class="st0">'Wire: Tech Biz'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> url<span class="sy0">:</span> <span class="st0">'www.wired.com/rss/techbiz.xml'</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="st0">'techcrunch'</span><span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> id<span class="sy0">:</span> <span class="st0">'techcrunch'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> title<span class="sy0">:</span> <span class="st0">'TechCrunch'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> url<span class="sy0">:</span> <span class="st0">'feedproxy.google.com/Techcrunch'</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="st0">'smashing'</span><span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> id<span class="sy0">:</span> <span class="st0">'smashing'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> title<span class="sy0">:</span> <span class="st0">'Smashing Magazine'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> url<span class="sy0">:</span> <span class="st0">'www.smashingmagazine.com/wp-rss.php'</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">//Setup the config for IO to use flash</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">io</span>.<span class="me1">transport</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> id<span class="sy0">:</span> <span class="st0">'flash'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> yid<span class="sy0">:</span> Y.<span class="me1">id</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> src<span class="sy0">:</span> buildDir <span class="sy0">+</span> <span class="st0">'io/io.swf?stamp='</span> <span class="sy0">+</span> <span class="br0">(</span><span class="kw2">new</span> Date<span class="br0">(</span><span class="br0">)</span><span class="br0">)</span>.<span class="me1">getTime</span><span class="br0">(</span><span class="br0">)</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Simple method for stopping event propagation</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Using this so we can detach it later</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> stopper <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> e.<span class="me1">stopPropagation</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Get the order, placement and minned state of the modules and save them to a cookie</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> _setCookies <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> dds <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>._drags<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> list <span class="sy0">=</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Walk all the drag elements</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">each</span><span class="br0">(</span>dds<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>v<span class="sy0">,</span> k<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> par <span class="sy0">=</span> v.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="co1">//Find all the lists with drag items in them</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>par.<span class="me1">test</span><span class="br0">(</span><span class="st0">'ul.list'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>list<span class="br0">[</span>par.<span class="me1">get</span><span class="br0">(</span><span class="st0">'id'</span><span class="br0">)</span><span class="br0">]</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> list<span class="br0">[</span>par.<span class="me1">get</span><span class="br0">(</span><span class="st0">'id'</span><span class="br0">)</span><span class="br0">]</span> <span class="sy0">=</span> <span class="br0">[</span><span class="br0">]</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Walk the list</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">each</span><span class="br0">(</span>list<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>v<span class="sy0">,</span> k<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Get all the li's in the list</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> lis <span class="sy0">=</span> Y.<span class="me1">all</span><span class="br0">(</span><span class="st0">'#'</span> <span class="sy0">+</span> k <span class="sy0">+</span> <span class="st0">' li.item'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> lis.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span>v2<span class="sy0">,</span> k2<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Get the drag instance for the list item</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> dd <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">getDrag</span><span class="br0">(</span><span class="st0">'#'</span> <span class="sy0">+</span> v2.<span class="me1">get</span><span class="br0">(</span><span class="st0">'id'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Get the mod node</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> mod <span class="sy0">=</span> dd.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">'div.mod'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Is it minimized</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> min <span class="sy0">=</span> <span class="br0">(</span>mod.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'minned'</span><span class="br0">)</span><span class="br0">)</span> <span class="sy0">?</span> <span class="kw2">true</span> <span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Setup the cookie data</span></div></li><li class="li1"><div class="de1"> list<span class="br0">[</span>k<span class="br0">]</span><span class="br0">[</span>list<span class="br0">[</span>k<span class="br0">]</span>.<span class="me1">length</span><span class="br0">]</span> <span class="sy0">=</span> <span class="br0">{</span> id<span class="sy0">:</span> dd.<span class="me1">get</span><span class="br0">(</span><span class="st0">'data'</span><span class="br0">)</span>.<span class="me1">id</span><span class="sy0">,</span> min<span class="sy0">:</span> min <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//JSON encode the cookie data</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> cookie <span class="sy0">=</span> Y.<span class="me1">JSON</span>.<span class="me1">stringify</span><span class="br0">(</span>list<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Set the sub-cookie</span></div></li><li class="li2"><div class="de2"> Y.<span class="me1">Cookie</span>.<span class="me1">setSub</span><span class="br0">(</span><span class="st0">'yui'</span><span class="sy0">,</span> <span class="st0">'portal'</span><span class="sy0">,</span> cookie<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Helper method for creating the feed DD on the left</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> _createFeedDD <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>node<span class="sy0">,</span> data<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="co1">//Create the DD instance</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> dd <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drag</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> node<span class="sy0">:</span> node<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> data<span class="sy0">:</span> data<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> bubbles<span class="sy0">:</span> Y.<span class="me1">Portal</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="br0">)</span>.<span class="me1">plug</span><span class="br0">(</span>Y.<span class="me1">Plugin</span>.<span class="me1">DDProxy</span><span class="sy0">,</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> moveOnEnd<span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> borderStyle<span class="sy0">:</span> <span class="st0">'none'</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Setup some stopper events</span></div></li><li class="li2"><div class="de2"> dd.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drag:start'</span><span class="sy0">,</span> _handleStart<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> dd.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drag:end'</span><span class="sy0">,</span> stopper<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> dd.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drag:drophit'</span><span class="sy0">,</span> stopper<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">//Handle the node:click event</span></div></li><li class="li1"><div class="de1"> <span class="co2">/* {{{ */</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> _nodeClick <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Is the target an href?</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>e.<span class="me1">target</span>.<span class="me1">test</span><span class="br0">(</span><span class="st0">'a'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> a <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">,</span> anim <span class="sy0">=</span> <span class="kw2">null</span><span class="sy0">,</span> div <span class="sy0">=</span> a.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Did they click on the min button</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>a.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'min'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Get some node references</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> ul <span class="sy0">=</span> div.<span class="me1">query</span><span class="br0">(</span><span class="st0">'ul'</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> h2 <span class="sy0">=</span> div.<span class="me1">query</span><span class="br0">(</span><span class="st0">'h2'</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> h <span class="sy0">=</span> h2.<span class="me1">get</span><span class="br0">(</span><span class="st0">'offsetHeight'</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> hUL <span class="sy0">=</span> ul.<span class="me1">get</span><span class="br0">(</span><span class="st0">'offsetHeight'</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> inner <span class="sy0">=</span> div.<span class="me1">query</span><span class="br0">(</span><span class="st0">'div.inner'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">//Create an anim instance on this node.</span></div></li><li class="li1"><div class="de1"> anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> node<span class="sy0">:</span> inner</div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Is it expanded?</span></div></li><li class="li2"><div class="de2"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>div.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'minned'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Set the vars for collapsing it</span></div></li><li class="li1"><div class="de1"> anim.<span class="me1">setAttrs</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> to<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> height<span class="sy0">:</span> <span class="nu0">0</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> iteration<span class="sy0">:</span> <span class="nu0">1</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="co1">//On the end, toggle the minned class</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Then set the cookies for state</span></div></li><li class="li1"><div class="de1"> anim.<span class="me1">on</span><span class="br0">(</span><span class="st0">'end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> div.<span class="me1">toggleClass</span><span class="br0">(</span><span class="st0">'minned'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> _setCookies<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Set the vars for expanding it</span></div></li><li class="li1"><div class="de1"> anim.<span class="me1">setAttrs</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> to<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> height<span class="sy0">:</span> <span class="br0">(</span>hUL<span class="br0">)</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> iteration<span class="sy0">:</span> <span class="nu0">1</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Toggle the minned class</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Then set the cookies for state</span></div></li><li class="li1"><div class="de1"> div.<span class="me1">toggleClass</span><span class="br0">(</span><span class="st0">'minned'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> _setCookies<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Run the animation</span></div></li><li class="li1"><div class="de1"> anim.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"> <span class="co1">//Was close clicked?</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>a.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'close'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Get some Node references..</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> li <span class="sy0">=</span> div.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> id <span class="sy0">=</span> li.<span class="me1">get</span><span class="br0">(</span><span class="st0">'id'</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> dd <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">getDrag</span><span class="br0">(</span><span class="st0">'#'</span> <span class="sy0">+</span> id<span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> data <span class="sy0">=</span> dd.<span class="me1">get</span><span class="br0">(</span><span class="st0">'data'</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="kw1">item</span> <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#'</span> <span class="sy0">+</span> data.<span class="me1">id</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Destroy the DD instance.</span></div></li><li class="li2"><div class="de2"> dd.<span class="me1">destroy</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Setup the animation for making it disappear</span></div></li><li class="li1"><div class="de1"> anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> node<span class="sy0">:</span> div<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> to<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> opacity<span class="sy0">:</span> <span class="nu0">0</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> anim.<span class="me1">on</span><span class="br0">(</span><span class="st0">'end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//On end of the first anim, setup another to make it collapse</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> node<span class="sy0">:</span> div<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> to<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> height<span class="sy0">:</span> <span class="nu0">0</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> anim.<span class="me1">on</span><span class="br0">(</span><span class="st0">'end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Remove it from the document</span></div></li><li class="li1"><div class="de1"> li.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span>.<span class="me1">removeChild</span><span class="br0">(</span>li<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">item</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'disabled'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Setup a drag instance on the feed list</span></div></li><li class="li2"><div class="de2"> _createFeedDD<span class="br0">(</span><span class="kw1">item</span><span class="sy0">,</span> data<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> _setCookies<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Run the animation</span></div></li><li class="li2"><div class="de2"> anim.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Run the animation</span></div></li><li class="li1"><div class="de1"> anim.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"> <span class="co1">//Stop the click</span></div></li><li class="li1"><div class="de1"> e.<span class="me1">halt</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co2">/* }}} */</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">//This creates the module, either from a drag event or from the cookie load</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> setupModDD <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>mod<span class="sy0">,</span> data<span class="sy0">,</span> dd<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> node <span class="sy0">=</span> mod<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Listen for the click so we can react to the buttons</span></div></li><li class="li2"><div class="de2"> node.<span class="me1">query</span><span class="br0">(</span><span class="st0">'h2'</span><span class="br0">)</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span> _nodeClick<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Remove the event's on the original drag instance</span></div></li><li class="li1"><div class="de1"> dd.<span class="me1">detachAll</span><span class="br0">(</span><span class="st0">'drag:start'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> dd.<span class="me1">detachAll</span><span class="br0">(</span><span class="st0">'drag:end'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> dd.<span class="me1">detachAll</span><span class="br0">(</span><span class="st0">'drag:drophit'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//It's a target</span></div></li><li class="li1"><div class="de1"> dd.<span class="me1">set</span><span class="br0">(</span><span class="st0">'target'</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Setup the handles</span></div></li><li class="li2"><div class="de2"> dd.<span class="me1">addHandle</span><span class="br0">(</span><span class="st0">'h2'</span><span class="br0">)</span>.<span class="me1">addInvalid</span><span class="br0">(</span><span class="st0">'a'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Remove the mouse listeners on this node</span></div></li><li class="li1"><div class="de1"> dd._unprep<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Update a new node</span></div></li><li class="li1"><div class="de1"> dd.<span class="me1">set</span><span class="br0">(</span><span class="st0">'node'</span><span class="sy0">,</span> mod<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="co1">//Reset the mouse handlers</span></div></li><li class="li1"><div class="de1"> dd._prep<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//The Yahoo! Pipes URL</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> url <span class="sy0">=</span> <span class="st0">'http:/'</span><span class="sy0">+</span><span class="st0">'/pipes.yahooapis.com/pipes/pipe.run?_id=6b7b2c6a32f5a12e7259c36967052387&_render=json&url=http:/'</span><span class="sy0">+</span><span class="st0">'/'</span> <span class="sy0">+</span> data.<span class="me1">url</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="co1">//Start the XDR request</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> id <span class="sy0">=</span> Y.<span class="me1">io</span><span class="br0">(</span>url<span class="sy0">,</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> method<span class="sy0">:</span> <span class="st0">'GET'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> xdr<span class="sy0">:</span> <span class="br0">{</span> </div></li><li class="li1"><div class="de1"> <span class="kw2">use</span><span class="sy0">:</span><span class="st0">'flash'</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="co1">//XDR Listeners</span></div></li><li class="li1"><div class="de1"> on<span class="sy0">:</span> <span class="br0">{</span> </div></li><li class="li1"><div class="de1"> success<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> data<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//On success get the feed data</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> d <span class="sy0">=</span> feeds<span class="br0">[</span>trans<span class="br0">[</span>id<span class="br0">]</span><span class="br0">]</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Node reference</span></div></li><li class="li1"><div class="de1"> inner <span class="sy0">=</span> d.<span class="me1">mod</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">'div.inner'</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Parse the JSON data</span></div></li><li class="li1"><div class="de1"> oRSS <span class="sy0">=</span> Y.<span class="me1">JSON</span>.<span class="me1">parse</span><span class="br0">(</span>data.<span class="me1">responseText</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> html <span class="sy0">=</span> <span class="st0">''</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Did we get data?</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>oRSS <span class="sy0">&&</span> oRSS.<span class="me1">count</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Walk the list and create the news list</span></div></li><li class="li2"><div class="de2"> Y.<span class="me1">each</span><span class="br0">(</span>oRSS.<span class="me1">value</span>.<span class="me1">items</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>v<span class="sy0">,</span> k<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>k <span class="sy0"><</span> <span class="nu0">5</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> html <span class="sy0">+=</span> <span class="st0">'<li><a href="'</span> <span class="sy0">+</span> v.<span class="me1">link</span> <span class="sy0">+</span> <span class="st0">'" target="_blank">'</span> <span class="sy0">+</span> v.<span class="me1">title</span> <span class="sy0">+</span> <span class="st0">'</a>'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Set the innerHTML of the module</span></div></li><li class="li1"><div class="de1"> inner.<span class="me1">set</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> <span class="st0">'<ul>'</span> <span class="sy0">+</span> html <span class="sy0">+</span> <span class="st0">'</ul>'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">activeDrag</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//If we are still dragging, update the proxy element too..</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> proxy_inner <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">activeDrag</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'dragNode'</span><span class="br0">)</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">'div.inner'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> proxy_inner.<span class="me1">set</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> <span class="st0">'<ul>'</span> <span class="sy0">+</span> html <span class="sy0">+</span> <span class="st0">'</ul>'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> failure<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> data<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Something failed..</span></div></li><li class="li1"><div class="de1"> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'Feed failed to load..'</span> <span class="sy0">+</span> id <span class="sy0">+</span> <span class="st0">' :: '</span> <span class="sy0">+</span> data<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Keep track of the transaction</span></div></li><li class="li1"><div class="de1"> feeds<span class="br0">[</span>data.<span class="me1">id</span><span class="br0">]</span>.<span class="me1">trans</span> <span class="sy0">=</span> id<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> feeds<span class="br0">[</span>data.<span class="me1">id</span><span class="br0">]</span>.<span class="me1">mod</span> <span class="sy0">=</span> mod<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> trans<span class="br0">[</span>id.<span class="me1">id</span><span class="br0">]</span> <span class="sy0">=</span> data.<span class="me1">id</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Helper method to create the markup for the module..</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> createMod <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>feed<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> str <span class="sy0">=</span> <span class="st0">'<li class="item">'</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">'<div class="mod">'</span> <span class="sy0">+</span> </div></li><li class="li1"><div class="de1"> <span class="st0">'<h2><strong>'</span> <span class="sy0">+</span> feed.<span class="me1">title</span> <span class="sy0">+</span> <span class="st0">'</strong> <a title="minimize module" class="min" href="#"> </a>'</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">'<a title="close module" class="close" href="#"></a></h2>'</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">'<div class="inner">'</span> <span class="sy0">+</span></div></li><li class="li2"><div class="de2"> <span class="st0">' <div class="loading">Feed loading, please wait..</div>'</span> <span class="sy0">+</span> </div></li><li class="li1"><div class="de1"> <span class="st0">'</div>'</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">'</div>'</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">'</li>'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">return</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">(</span>str<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Handle the start Drag event on the left side</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> _handleStart <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Stop the event</span></div></li><li class="li2"><div class="de2"> stopper<span class="br0">(</span>e<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Some private vars</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> drag <span class="sy0">=</span> <span class="kw1">this</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> list3 <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#list1'</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> mod <span class="sy0">=</span> createMod<span class="br0">(</span>drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'data'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Add it to the first list</span></div></li><li class="li1"><div class="de1"> list3.<span class="me1">appendChild</span><span class="br0">(</span>mod<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Set the item on the left column disabled.</span></div></li><li class="li1"><div class="de1"> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'disabled'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="co1">//Set the node on the instance</span></div></li><li class="li1"><div class="de1"> drag.<span class="me1">set</span><span class="br0">(</span><span class="st0">'node'</span><span class="sy0">,</span> mod<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Add some styles to the proxy node.</span></div></li><li class="li1"><div class="de1"> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'dragNode'</span><span class="br0">)</span>.<span class="me1">setStyles</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> opacity<span class="sy0">:</span> <span class="st0">'.5'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> borderStyle<span class="sy0">:</span> <span class="st0">'none'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> width<span class="sy0">:</span> <span class="st0">'320px'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> height<span class="sy0">:</span> <span class="st0">'61px'</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Update the innerHTML of the proxy with the innerHTML of the module</span></div></li><li class="li2"><div class="de2"> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'dragNode'</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//set the inner module to hidden</span></div></li><li class="li1"><div class="de1"> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">'div.mod'</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'visibility'</span><span class="sy0">,</span> <span class="st0">'hidden'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//add a class for styling</span></div></li><li class="li1"><div class="de1"> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'moving'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="co1">//Setup the DD instance</span></div></li><li class="li1"><div class="de1"> setupModDD<span class="br0">(</span>mod<span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'data'</span><span class="br0">)</span><span class="sy0">,</span> drag<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Remove the listener</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">detach</span><span class="br0">(</span><span class="st0">'drag:start'</span><span class="sy0">,</span> _handleStart<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Walk through the feeds list and create the list on the left</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> feedList <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#feeds ul'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">each</span><span class="br0">(</span>feeds<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>v<span class="sy0">,</span> k<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> li <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">(</span><span class="st0">'<li id="'</span> <span class="sy0">+</span> k <span class="sy0">+</span> <span class="st0">'">'</span> <span class="sy0">+</span> v.<span class="me1">title</span> <span class="sy0">+</span> <span class="st0">'</li>'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> feedList.<span class="me1">appendChild</span><span class="br0">(</span>li<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Create the DD instance for this item</span></div></li><li class="li1"><div class="de1"> _createFeedDD<span class="br0">(</span>li<span class="sy0">,</span> v<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">//This does the calculations for when and where to move a module</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> _moveMod <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>drag<span class="sy0">,</span> drop<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'item'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> dragNode <span class="sy0">=</span> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> dropNode <span class="sy0">=</span> drop.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> append <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> padding <span class="sy0">=</span> <span class="nu0">30</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> xy <span class="sy0">=</span> drag.<span class="me1">mouseXY</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> region <span class="sy0">=</span> drop.<span class="me1">region</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> middle1 <span class="sy0">=</span> region.<span class="me1">top</span> <span class="sy0">+</span> <span class="br0">(</span><span class="br0">(</span>region.<span class="me1">bottom</span> <span class="sy0">-</span> region.<span class="me1">top</span><span class="br0">)</span> <span class="sy0">/</span> <span class="nu0">2</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> middle2 <span class="sy0">=</span> region.<span class="me1">left</span> <span class="sy0">+</span> <span class="br0">(</span><span class="br0">(</span>region.<span class="me1">right</span> <span class="sy0">-</span> region.<span class="me1">left</span><span class="br0">)</span> <span class="sy0">/</span> <span class="nu0">2</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> dir <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> dir1 <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> dir2 <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">//We could do something a little more fancy here, but we won't ;)</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="br0">(</span>xy<span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span> <span class="sy0"><</span> <span class="br0">(</span>region.<span class="me1">top</span> <span class="sy0">+</span> padding<span class="br0">)</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> dir1 <span class="sy0">=</span> <span class="st0">'top'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"> <span class="kw1">if</span> <span class="br0">(</span><span class="br0">(</span>region.<span class="me1">bottom</span> <span class="sy0">-</span> padding<span class="br0">)</span> <span class="sy0"><</span> xy<span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> dir1 <span class="sy0">=</span> <span class="st0">'bottom'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="br0">(</span>region.<span class="me1">right</span> <span class="sy0">-</span> padding<span class="br0">)</span> <span class="sy0"><</span> xy<span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> dir2 <span class="sy0">=</span> <span class="st0">'right'</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="br0">(</span>xy<span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span> <span class="sy0"><</span> <span class="br0">(</span>region.<span class="me1">left</span> <span class="sy0">+</span> padding<span class="br0">)</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> dir2 <span class="sy0">=</span> <span class="st0">'left'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> dir <span class="sy0">=</span> dir2<span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">if</span> <span class="br0">(</span>dir2 <span class="sy0">===</span> <span class="kw2">false</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> dir <span class="sy0">=</span> dir1<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="kw1">switch</span> <span class="br0">(</span>dir<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">case</span> <span class="st0">'top'</span><span class="sy0">:</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> next <span class="sy0">=</span> dropNode.<span class="me1">get</span><span class="br0">(</span><span class="st0">'nextSibling'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>next<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> dropNode <span class="sy0">=</span> next<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> append <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="kw1">break</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">case</span> <span class="st0">'bottom'</span><span class="sy0">:</span></div></li><li class="li1"><div class="de1"> <span class="kw1">break</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">case</span> <span class="st0">'right'</span><span class="sy0">:</span></div></li><li class="li2"><div class="de2"> <span class="kw1">case</span> <span class="st0">'left'</span><span class="sy0">:</span></div></li><li class="li1"><div class="de1"> <span class="kw1">break</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="kw1">if</span> <span class="br0">(</span><span class="br0">(</span>dropNode <span class="sy0">!==</span> <span class="kw2">null</span><span class="br0">)</span> <span class="sy0">&&</span> dir<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>dropNode <span class="sy0">&&</span> dropNode.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>append<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> dropNode.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span>.<span class="me1">insertBefore</span><span class="br0">(</span>dragNode<span class="sy0">,</span> dropNode<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> dropNode.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span>.<span class="me1">appendChild</span><span class="br0">(</span>dragNode<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Resync all the targets because something moved..</span></div></li><li class="li2"><div class="de2"> Y.<span class="me1">Lang</span>.<span class="me1">later</span><span class="br0">(</span><span class="nu0">50</span><span class="sy0">,</span> Y<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">syncActiveShims</span><span class="br0">(</span><span class="kw2">true</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> Handle the drop:enter event</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> Now when we get a drop enter event, we check to see if the target is an LI, then we know it's out module.</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> Here is where we move the module around in the DOM. </span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drop:enter'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>e.<span class="me1">drag</span> <span class="sy0">||</span> <span class="sy0">!</span>e.<span class="me1">drop</span> <span class="sy0">||</span> <span class="br0">(</span>e.<span class="me1">drop</span> <span class="sy0">!==</span> e.<span class="me1">target</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">return</span> <span class="kw2">false</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"> <span class="kw1">if</span> <span class="br0">(</span>e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'tagName'</span><span class="br0">)</span>.<span class="me1">toLowerCase</span><span class="br0">(</span><span class="br0">)</span> <span class="sy0">===</span> <span class="st0">'li'</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'item'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> _moveMod<span class="br0">(</span>e.<span class="me1">drag</span><span class="sy0">,</span> e.<span class="me1">drop</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Handle the drag:drag event</span></div></li><li class="li1"><div class="de1"> <span class="co1">//On drag we need to know if they are moved up or down so we can place the module in the proper DOM location.</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drag:drag'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> y <span class="sy0">=</span> e.<span class="me1">target</span>.<span class="me1">mouseXY</span><span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>y <span class="sy0"><</span> lastY<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> goingUp <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> goingUp <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> lastY <span class="sy0">=</span> y<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="coMULTI">/*</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> Handle the drop:hit event</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> Now that we have a drop on the target, we check to see if the drop was not on a LI.</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> This means they dropped on the empty space of the UL.</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drag:drophit'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> drop <span class="sy0">=</span> e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> drag <span class="sy0">=</span> e.<span class="me1">drag</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>drop.<span class="me1">get</span><span class="br0">(</span><span class="st0">'tagName'</span><span class="br0">)</span>.<span class="me1">toLowerCase</span><span class="br0">(</span><span class="br0">)</span> <span class="sy0">!==</span> <span class="st0">'li'</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>drop.<span class="me1">contains</span><span class="br0">(</span>drag<span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> drop.<span class="me1">appendChild</span><span class="br0">(</span>drag<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">//Handle the drag:start event</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Use some CSS here to make our dragging better looking.</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drag:start'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>drag.<span class="me1">target</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> drag.<span class="me1">target</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'locked'</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'dragNode'</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'dragNode'</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'opacity'</span><span class="sy0">,</span><span class="st0">'.5'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">'div.mod'</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'visibility'</span><span class="sy0">,</span> <span class="st0">'hidden'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'moving'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Handle the drag:end event</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Replace some of the styles we changed on start drag.</span></div></li><li class="li2"><div class="de2"> Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drag:end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>drag.<span class="me1">target</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> drag.<span class="me1">target</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'locked'</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'visibility'</span><span class="sy0">,</span> <span class="st0">''</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">'div.mod'</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'visibility'</span><span class="sy0">,</span> <span class="st0">''</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'moving'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'dragNode'</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> <span class="st0">''</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> _setCookies<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Handle going over a UL, for empty lists</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drop:over'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> drop <span class="sy0">=</span> e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> drag <span class="sy0">=</span> e.<span class="me1">drag</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>drop.<span class="me1">get</span><span class="br0">(</span><span class="st0">'tagName'</span><span class="br0">)</span>.<span class="me1">toLowerCase</span><span class="br0">(</span><span class="br0">)</span> <span class="sy0">!==</span> <span class="st0">'li'</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>drop.<span class="me1">contains</span><span class="br0">(</span>drag<span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> drop.<span class="me1">appendChild</span><span class="br0">(</span>drag<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">Lang</span>.<span class="me1">later</span><span class="br0">(</span><span class="nu0">50</span><span class="sy0">,</span> Y<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">syncActiveShims</span><span class="br0">(</span><span class="kw2">true</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Create simple targets for the main lists..</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> uls <span class="sy0">=</span> Y.<span class="me1">all</span><span class="br0">(</span><span class="st0">'#play ul.list'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> uls.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span>v<span class="sy0">,</span> k<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> tar <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drop</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> node<span class="sy0">:</span> v<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> padding<span class="sy0">:</span> <span class="st0">'20 0'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> bubbles<span class="sy0">:</span> Y.<span class="me1">Portal</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'io:xdrReady'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="co1">//Get the cookie data</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> cookie <span class="sy0">=</span> Y.<span class="me1">Cookie</span>.<span class="me1">getSub</span><span class="br0">(</span><span class="st0">'yui'</span><span class="sy0">,</span> <span class="st0">'portal'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>cookie<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//JSON parse the stored data</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> obj <span class="sy0">=</span> Y.<span class="me1">JSON</span>.<span class="me1">parse</span><span class="br0">(</span>cookie<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Walk the data</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">each</span><span class="br0">(</span>obj<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>v<span class="sy0">,</span> k<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Get the node for the list</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> list <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#'</span> <span class="sy0">+</span> k<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="co1">//Walk the items in this list</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">each</span><span class="br0">(</span>v<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>v2<span class="sy0">,</span> k2<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Get the drag for it</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> drag <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">getDrag</span><span class="br0">(</span><span class="st0">'#'</span> <span class="sy0">+</span> v2.<span class="me1">id</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Create the module</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> mod <span class="sy0">=</span> createMod<span class="br0">(</span>drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'data'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>v2.<span class="me1">min</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//If it's minned add some CSS</span></div></li><li class="li1"><div class="de1"> mod.<span class="me1">query</span><span class="br0">(</span><span class="st0">'div.mod'</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'minned'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> mod.<span class="me1">query</span><span class="br0">(</span><span class="st0">'div.inner'</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'height'</span><span class="sy0">,</span> <span class="st0">'0px'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Add it to the list</span></div></li><li class="li1"><div class="de1"> list.<span class="me1">appendChild</span><span class="br0">(</span>mod<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Set the drag listeners</span></div></li><li class="li1"><div class="de1"> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'disabled'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> drag.<span class="me1">set</span><span class="br0">(</span><span class="st0">'node'</span><span class="sy0">,</span> mod<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> drag.<span class="me1">set</span><span class="br0">(</span><span class="st0">'dragNode'</span><span class="sy0">,</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>._proxy<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> drag.<span class="me1">detachAll</span><span class="br0">(</span><span class="st0">'drag:start'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> drag.<span class="me1">detachAll</span><span class="br0">(</span><span class="st0">'drag:end'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> drag.<span class="me1">detachAll</span><span class="br0">(</span><span class="st0">'drag:drophit'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> drag._unprep<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Setup the new Drag listeners</span></div></li><li class="li1"><div class="de1"> setupModDD<span class="br0">(</span>mod<span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'data'</span><span class="br0">)</span><span class="sy0">,</span> drag<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">//Use loader to grab the modules needed</span>
YUI<span class="br0">(</span>yuiConfig<span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">'dd'</span><span class="sy0">,</span> <span class="st0">'anim'</span><span class="sy0">,</span> <span class="st0">'io'</span><span class="sy0">,</span> <span class="st0">'cookie'</span><span class="sy0">,</span> <span class="st0">'json'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//Make this an Event Target so we can bubble to it</span>
<span class="kw2">var</span> Portal <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
Portal.<span class="me1">superclass</span>.<span class="me1">constructor</span>.<span class="me1">apply</span><span class="br0">(</span><span class="kw1">this</span><span class="sy0">,</span> arguments<span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="sy0">;</span>
Portal.<span class="kw3">NAME</span> <span class="sy0">=</span> <span class="st0">'portal'</span><span class="sy0">;</span>
Y.<span class="me1">extend</span><span class="br0">(</span>Portal<span class="sy0">,</span> Y.<span class="me1">Base</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//This is our new bubble target..</span>
Y.<span class="me1">Portal</span> <span class="sy0">=</span> <span class="kw2">new</span> Portal<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Setup some private variables..</span>
<span class="kw2">var</span> goingUp <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span> lastY <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">,</span> trans <span class="sy0">=</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">;</span>
<span class="co1">//The list of feeds that we are going to use</span>
<span class="kw2">var</span> feeds <span class="sy0">=</span> <span class="br0">{</span>
<span class="st0">'ynews'</span><span class="sy0">:</span> <span class="br0">{</span>
id<span class="sy0">:</span> <span class="st0">'ynews'</span><span class="sy0">,</span>
title<span class="sy0">:</span> <span class="st0">'Yahoo! US News'</span><span class="sy0">,</span>
url<span class="sy0">:</span> <span class="st0">'rss.news.yahoo.com/rss/us'</span>
<span class="br0">}</span><span class="sy0">,</span>
<span class="st0">'yui'</span><span class="sy0">:</span> <span class="br0">{</span>
id<span class="sy0">:</span> <span class="st0">'yui'</span><span class="sy0">,</span>
title<span class="sy0">:</span> <span class="st0">'YUI Blog'</span><span class="sy0">,</span>
url<span class="sy0">:</span> <span class="st0">'feeds.yuiblog.com/YahooUserInterfaceBlog'</span>
<span class="br0">}</span><span class="sy0">,</span>
<span class="st0">'slashdot'</span><span class="sy0">:</span> <span class="br0">{</span>
id<span class="sy0">:</span> <span class="st0">'slashdot'</span><span class="sy0">,</span>
title<span class="sy0">:</span> <span class="st0">'Slashdot'</span><span class="sy0">,</span>
url<span class="sy0">:</span> <span class="st0">'rss.slashdot.org/Slashdot/slashdot'</span>
<span class="br0">}</span><span class="sy0">,</span>
<span class="st0">'ajaxian'</span><span class="sy0">:</span> <span class="br0">{</span>
id<span class="sy0">:</span> <span class="st0">'ajaxian'</span><span class="sy0">,</span>
title<span class="sy0">:</span> <span class="st0">'Ajaxian'</span><span class="sy0">,</span>
url<span class="sy0">:</span> <span class="st0">'feeds.feedburner.com/ajaxian'</span>
<span class="br0">}</span><span class="sy0">,</span>
<span class="st0">'daringfireball'</span><span class="sy0">:</span> <span class="br0">{</span>
id<span class="sy0">:</span> <span class="st0">'daringfireball'</span><span class="sy0">,</span>
title<span class="sy0">:</span> <span class="st0">'Daring Fireball'</span><span class="sy0">,</span>
url<span class="sy0">:</span> <span class="st0">'daringfireball.net/index.xml'</span>
<span class="br0">}</span><span class="sy0">,</span>
<span class="st0">'wiredtech'</span><span class="sy0">:</span> <span class="br0">{</span>
id<span class="sy0">:</span> <span class="st0">'wiredtech'</span><span class="sy0">,</span>
title<span class="sy0">:</span> <span class="st0">'Wire: Tech Biz'</span><span class="sy0">,</span>
url<span class="sy0">:</span> <span class="st0">'www.wired.com/rss/techbiz.xml'</span>
<span class="br0">}</span><span class="sy0">,</span>
<span class="st0">'techcrunch'</span><span class="sy0">:</span> <span class="br0">{</span>
id<span class="sy0">:</span> <span class="st0">'techcrunch'</span><span class="sy0">,</span>
title<span class="sy0">:</span> <span class="st0">'TechCrunch'</span><span class="sy0">,</span>
url<span class="sy0">:</span> <span class="st0">'feedproxy.google.com/Techcrunch'</span>
<span class="br0">}</span><span class="sy0">,</span>
<span class="st0">'smashing'</span><span class="sy0">:</span> <span class="br0">{</span>
id<span class="sy0">:</span> <span class="st0">'smashing'</span><span class="sy0">,</span>
title<span class="sy0">:</span> <span class="st0">'Smashing Magazine'</span><span class="sy0">,</span>
url<span class="sy0">:</span> <span class="st0">'www.smashingmagazine.com/wp-rss.php'</span>
<span class="br0">}</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="co1">//Setup the config for IO to use flash</span>
Y.<span class="me1">io</span>.<span class="me1">transport</span><span class="br0">(</span><span class="br0">{</span>
id<span class="sy0">:</span> <span class="st0">'flash'</span><span class="sy0">,</span>
yid<span class="sy0">:</span> Y.<span class="me1">id</span><span class="sy0">,</span>
src<span class="sy0">:</span> buildDir <span class="sy0">+</span> <span class="st0">'io/io.swf?stamp='</span> <span class="sy0">+</span> <span class="br0">(</span><span class="kw2">new</span> Date<span class="br0">(</span><span class="br0">)</span><span class="br0">)</span>.<span class="me1">getTime</span><span class="br0">(</span><span class="br0">)</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Simple method for stopping event propagation</span>
<span class="co1">//Using this so we can detach it later</span>
<span class="kw2">var</span> stopper <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
e.<span class="me1">stopPropagation</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="co1">//Get the order, placement and minned state of the modules and save them to a cookie</span>
<span class="kw2">var</span> _setCookies <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
<span class="kw2">var</span> dds <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>._drags<span class="sy0">;</span>
<span class="kw2">var</span> list <span class="sy0">=</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">;</span>
<span class="co1">//Walk all the drag elements</span>
Y.<span class="me1">each</span><span class="br0">(</span>dds<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>v<span class="sy0">,</span> k<span class="br0">)</span> <span class="br0">{</span>
<span class="kw2">var</span> par <span class="sy0">=</span> v.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Find all the lists with drag items in them</span>
<span class="kw1">if</span> <span class="br0">(</span>par.<span class="me1">test</span><span class="br0">(</span><span class="st0">'ul.list'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>list<span class="br0">[</span>par.<span class="me1">get</span><span class="br0">(</span><span class="st0">'id'</span><span class="br0">)</span><span class="br0">]</span><span class="br0">)</span> <span class="br0">{</span>
list<span class="br0">[</span>par.<span class="me1">get</span><span class="br0">(</span><span class="st0">'id'</span><span class="br0">)</span><span class="br0">]</span> <span class="sy0">=</span> <span class="br0">[</span><span class="br0">]</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Walk the list</span>
Y.<span class="me1">each</span><span class="br0">(</span>list<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>v<span class="sy0">,</span> k<span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//Get all the li's in the list</span>
<span class="kw2">var</span> lis <span class="sy0">=</span> Y.<span class="me1">all</span><span class="br0">(</span><span class="st0">'#'</span> <span class="sy0">+</span> k <span class="sy0">+</span> <span class="st0">' li.item'</span><span class="br0">)</span><span class="sy0">;</span>
lis.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span>v2<span class="sy0">,</span> k2<span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//Get the drag instance for the list item</span>
<span class="kw2">var</span> dd <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">getDrag</span><span class="br0">(</span><span class="st0">'#'</span> <span class="sy0">+</span> v2.<span class="me1">get</span><span class="br0">(</span><span class="st0">'id'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Get the mod node</span>
<span class="kw2">var</span> mod <span class="sy0">=</span> dd.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">'div.mod'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Is it minimized</span>
<span class="kw2">var</span> min <span class="sy0">=</span> <span class="br0">(</span>mod.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'minned'</span><span class="br0">)</span><span class="br0">)</span> <span class="sy0">?</span> <span class="kw2">true</span> <span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">;</span>
<span class="co1">//Setup the cookie data</span>
list<span class="br0">[</span>k<span class="br0">]</span><span class="br0">[</span>list<span class="br0">[</span>k<span class="br0">]</span>.<span class="me1">length</span><span class="br0">]</span> <span class="sy0">=</span> <span class="br0">{</span> id<span class="sy0">:</span> dd.<span class="me1">get</span><span class="br0">(</span><span class="st0">'data'</span><span class="br0">)</span>.<span class="me1">id</span><span class="sy0">,</span> min<span class="sy0">:</span> min <span class="br0">}</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//JSON encode the cookie data</span>
<span class="kw2">var</span> cookie <span class="sy0">=</span> Y.<span class="me1">JSON</span>.<span class="me1">stringify</span><span class="br0">(</span>list<span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Set the sub-cookie</span>
Y.<span class="me1">Cookie</span>.<span class="me1">setSub</span><span class="br0">(</span><span class="st0">'yui'</span><span class="sy0">,</span> <span class="st0">'portal'</span><span class="sy0">,</span> cookie<span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="co1">//Helper method for creating the feed DD on the left</span>
<span class="kw2">var</span> _createFeedDD <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>node<span class="sy0">,</span> data<span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//Create the DD instance</span>
<span class="kw2">var</span> dd <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drag</span><span class="br0">(</span><span class="br0">{</span>
node<span class="sy0">:</span> node<span class="sy0">,</span>
data<span class="sy0">:</span> data<span class="sy0">,</span>
bubbles<span class="sy0">:</span> Y.<span class="me1">Portal</span>
<span class="br0">}</span><span class="br0">)</span>.<span class="me1">plug</span><span class="br0">(</span>Y.<span class="me1">Plugin</span>.<span class="me1">DDProxy</span><span class="sy0">,</span> <span class="br0">{</span>
moveOnEnd<span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">,</span>
borderStyle<span class="sy0">:</span> <span class="st0">'none'</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Setup some stopper events</span>
dd.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drag:start'</span><span class="sy0">,</span> _handleStart<span class="br0">)</span><span class="sy0">;</span>
dd.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drag:end'</span><span class="sy0">,</span> stopper<span class="br0">)</span><span class="sy0">;</span>
dd.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drag:drophit'</span><span class="sy0">,</span> stopper<span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="co1">//Handle the node:click event</span>
<span class="co2">/* {{{ */</span>
<span class="kw2">var</span> _nodeClick <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//Is the target an href?</span>
<span class="kw1">if</span> <span class="br0">(</span>e.<span class="me1">target</span>.<span class="me1">test</span><span class="br0">(</span><span class="st0">'a'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
<span class="kw2">var</span> a <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">,</span> anim <span class="sy0">=</span> <span class="kw2">null</span><span class="sy0">,</span> div <span class="sy0">=</span> a.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Did they click on the min button</span>
<span class="kw1">if</span> <span class="br0">(</span>a.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'min'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//Get some node references</span>
<span class="kw2">var</span> ul <span class="sy0">=</span> div.<span class="me1">query</span><span class="br0">(</span><span class="st0">'ul'</span><span class="br0">)</span><span class="sy0">,</span>
h2 <span class="sy0">=</span> div.<span class="me1">query</span><span class="br0">(</span><span class="st0">'h2'</span><span class="br0">)</span><span class="sy0">,</span>
h <span class="sy0">=</span> h2.<span class="me1">get</span><span class="br0">(</span><span class="st0">'offsetHeight'</span><span class="br0">)</span><span class="sy0">,</span>
hUL <span class="sy0">=</span> ul.<span class="me1">get</span><span class="br0">(</span><span class="st0">'offsetHeight'</span><span class="br0">)</span><span class="sy0">,</span>
inner <span class="sy0">=</span> div.<span class="me1">query</span><span class="br0">(</span><span class="st0">'div.inner'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Create an anim instance on this node.</span>
anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span>
node<span class="sy0">:</span> inner
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Is it expanded?</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>div.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'minned'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//Set the vars for collapsing it</span>
anim.<span class="me1">setAttrs</span><span class="br0">(</span><span class="br0">{</span>
to<span class="sy0">:</span> <span class="br0">{</span>
height<span class="sy0">:</span> <span class="nu0">0</span>
<span class="br0">}</span><span class="sy0">,</span>
duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span>
easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span><span class="sy0">,</span>
iteration<span class="sy0">:</span> <span class="nu0">1</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//On the end, toggle the minned class</span>
<span class="co1">//Then set the cookies for state</span>
anim.<span class="me1">on</span><span class="br0">(</span><span class="st0">'end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
div.<span class="me1">toggleClass</span><span class="br0">(</span><span class="st0">'minned'</span><span class="br0">)</span><span class="sy0">;</span>
_setCookies<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span>
<span class="co1">//Set the vars for expanding it</span>
anim.<span class="me1">setAttrs</span><span class="br0">(</span><span class="br0">{</span>
to<span class="sy0">:</span> <span class="br0">{</span>
height<span class="sy0">:</span> <span class="br0">(</span>hUL<span class="br0">)</span>
<span class="br0">}</span><span class="sy0">,</span>
duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span>
easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span><span class="sy0">,</span>
iteration<span class="sy0">:</span> <span class="nu0">1</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Toggle the minned class</span>
<span class="co1">//Then set the cookies for state</span>
div.<span class="me1">toggleClass</span><span class="br0">(</span><span class="st0">'minned'</span><span class="br0">)</span><span class="sy0">;</span>
_setCookies<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="co1">//Run the animation</span>
anim.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="co1">//Was close clicked?</span>
<span class="kw1">if</span> <span class="br0">(</span>a.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'close'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//Get some Node references..</span>
<span class="kw2">var</span> li <span class="sy0">=</span> div.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span><span class="sy0">,</span>
id <span class="sy0">=</span> li.<span class="me1">get</span><span class="br0">(</span><span class="st0">'id'</span><span class="br0">)</span><span class="sy0">,</span>
dd <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">getDrag</span><span class="br0">(</span><span class="st0">'#'</span> <span class="sy0">+</span> id<span class="br0">)</span><span class="sy0">,</span>
data <span class="sy0">=</span> dd.<span class="me1">get</span><span class="br0">(</span><span class="st0">'data'</span><span class="br0">)</span><span class="sy0">,</span>
<span class="kw1">item</span> <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#'</span> <span class="sy0">+</span> data.<span class="me1">id</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Destroy the DD instance.</span>
dd.<span class="me1">destroy</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Setup the animation for making it disappear</span>
anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span>
node<span class="sy0">:</span> div<span class="sy0">,</span>
to<span class="sy0">:</span> <span class="br0">{</span>
opacity<span class="sy0">:</span> <span class="nu0">0</span>
<span class="br0">}</span><span class="sy0">,</span>
duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span>
easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
anim.<span class="me1">on</span><span class="br0">(</span><span class="st0">'end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//On end of the first anim, setup another to make it collapse</span>
<span class="kw2">var</span> anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span>
node<span class="sy0">:</span> div<span class="sy0">,</span>
to<span class="sy0">:</span> <span class="br0">{</span>
height<span class="sy0">:</span> <span class="nu0">0</span>
<span class="br0">}</span><span class="sy0">,</span>
duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span>
easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
anim.<span class="me1">on</span><span class="br0">(</span><span class="st0">'end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//Remove it from the document</span>
li.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span>.<span class="me1">removeChild</span><span class="br0">(</span>li<span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">item</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'disabled'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Setup a drag instance on the feed list</span>
_createFeedDD<span class="br0">(</span><span class="kw1">item</span><span class="sy0">,</span> data<span class="br0">)</span><span class="sy0">;</span>
_setCookies<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Run the animation</span>
anim.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Run the animation</span>
anim.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="co1">//Stop the click</span>
e.<span class="me1">halt</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="co2">/* }}} */</span>
<span class="co1">//This creates the module, either from a drag event or from the cookie load</span>
<span class="kw2">var</span> setupModDD <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>mod<span class="sy0">,</span> data<span class="sy0">,</span> dd<span class="br0">)</span> <span class="br0">{</span>
<span class="kw2">var</span> node <span class="sy0">=</span> mod<span class="sy0">;</span>
<span class="co1">//Listen for the click so we can react to the buttons</span>
node.<span class="me1">query</span><span class="br0">(</span><span class="st0">'h2'</span><span class="br0">)</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span> _nodeClick<span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Remove the event's on the original drag instance</span>
dd.<span class="me1">detachAll</span><span class="br0">(</span><span class="st0">'drag:start'</span><span class="br0">)</span><span class="sy0">;</span>
dd.<span class="me1">detachAll</span><span class="br0">(</span><span class="st0">'drag:end'</span><span class="br0">)</span><span class="sy0">;</span>
dd.<span class="me1">detachAll</span><span class="br0">(</span><span class="st0">'drag:drophit'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//It's a target</span>
dd.<span class="me1">set</span><span class="br0">(</span><span class="st0">'target'</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Setup the handles</span>
dd.<span class="me1">addHandle</span><span class="br0">(</span><span class="st0">'h2'</span><span class="br0">)</span>.<span class="me1">addInvalid</span><span class="br0">(</span><span class="st0">'a'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Remove the mouse listeners on this node</span>
dd._unprep<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Update a new node</span>
dd.<span class="me1">set</span><span class="br0">(</span><span class="st0">'node'</span><span class="sy0">,</span> mod<span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Reset the mouse handlers</span>
dd._prep<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//The Yahoo! Pipes URL</span>
<span class="kw2">var</span> url <span class="sy0">=</span> <span class="st0">'http:/'</span><span class="sy0">+</span><span class="st0">'/pipes.yahooapis.com/pipes/pipe.run?_id=6b7b2c6a32f5a12e7259c36967052387&_render=json&url=http:/'</span><span class="sy0">+</span><span class="st0">'/'</span> <span class="sy0">+</span> data.<span class="me1">url</span><span class="sy0">;</span>
<span class="co1">//Start the XDR request</span>
<span class="kw2">var</span> id <span class="sy0">=</span> Y.<span class="me1">io</span><span class="br0">(</span>url<span class="sy0">,</span> <span class="br0">{</span>
method<span class="sy0">:</span> <span class="st0">'GET'</span><span class="sy0">,</span>
xdr<span class="sy0">:</span> <span class="br0">{</span>
<span class="kw2">use</span><span class="sy0">:</span><span class="st0">'flash'</span>
<span class="br0">}</span><span class="sy0">,</span>
<span class="co1">//XDR Listeners</span>
on<span class="sy0">:</span> <span class="br0">{</span>
success<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> data<span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//On success get the feed data</span>
<span class="kw2">var</span> d <span class="sy0">=</span> feeds<span class="br0">[</span>trans<span class="br0">[</span>id<span class="br0">]</span><span class="br0">]</span><span class="sy0">,</span>
<span class="co1">//Node reference</span>
inner <span class="sy0">=</span> d.<span class="me1">mod</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">'div.inner'</span><span class="br0">)</span><span class="sy0">,</span>
<span class="co1">//Parse the JSON data</span>
oRSS <span class="sy0">=</span> Y.<span class="me1">JSON</span>.<span class="me1">parse</span><span class="br0">(</span>data.<span class="me1">responseText</span><span class="br0">)</span><span class="sy0">,</span>
html <span class="sy0">=</span> <span class="st0">''</span><span class="sy0">;</span>
<span class="co1">//Did we get data?</span>
<span class="kw1">if</span> <span class="br0">(</span>oRSS <span class="sy0">&&</span> oRSS.<span class="me1">count</span><span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//Walk the list and create the news list</span>
Y.<span class="me1">each</span><span class="br0">(</span>oRSS.<span class="me1">value</span>.<span class="me1">items</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>v<span class="sy0">,</span> k<span class="br0">)</span> <span class="br0">{</span>
<span class="kw1">if</span> <span class="br0">(</span>k <span class="sy0"><</span> <span class="nu0">5</span><span class="br0">)</span> <span class="br0">{</span>
html <span class="sy0">+=</span> <span class="st0">'<li><a href="'</span> <span class="sy0">+</span> v.<span class="me1">link</span> <span class="sy0">+</span> <span class="st0">'" target="_blank">'</span> <span class="sy0">+</span> v.<span class="me1">title</span> <span class="sy0">+</span> <span class="st0">'</a>'</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="co1">//Set the innerHTML of the module</span>
inner.<span class="me1">set</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> <span class="st0">'<ul>'</span> <span class="sy0">+</span> html <span class="sy0">+</span> <span class="st0">'</ul>'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span>Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">activeDrag</span><span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//If we are still dragging, update the proxy element too..</span>
<span class="kw2">var</span> proxy_inner <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">activeDrag</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'dragNode'</span><span class="br0">)</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">'div.inner'</span><span class="br0">)</span><span class="sy0">;</span>
proxy_inner.<span class="me1">set</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> <span class="st0">'<ul>'</span> <span class="sy0">+</span> html <span class="sy0">+</span> <span class="st0">'</ul>'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span><span class="sy0">,</span>
failure<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> data<span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//Something failed..</span>
<span class="kw3">alert</span><span class="br0">(</span><span class="st0">'Feed failed to load..'</span> <span class="sy0">+</span> id <span class="sy0">+</span> <span class="st0">' :: '</span> <span class="sy0">+</span> data<span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Keep track of the transaction</span>
feeds<span class="br0">[</span>data.<span class="me1">id</span><span class="br0">]</span>.<span class="me1">trans</span> <span class="sy0">=</span> id<span class="sy0">;</span>
feeds<span class="br0">[</span>data.<span class="me1">id</span><span class="br0">]</span>.<span class="me1">mod</span> <span class="sy0">=</span> mod<span class="sy0">;</span>
trans<span class="br0">[</span>id.<span class="me1">id</span><span class="br0">]</span> <span class="sy0">=</span> data.<span class="me1">id</span><span class="sy0">;</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="co1">//Helper method to create the markup for the module..</span>
<span class="kw2">var</span> createMod <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>feed<span class="br0">)</span> <span class="br0">{</span>
<span class="kw2">var</span> str <span class="sy0">=</span> <span class="st0">'<li class="item">'</span> <span class="sy0">+</span>
<span class="st0">'<div class="mod">'</span> <span class="sy0">+</span>
<span class="st0">'<h2><strong>'</span> <span class="sy0">+</span> feed.<span class="me1">title</span> <span class="sy0">+</span> <span class="st0">'</strong> <a title="minimize module" class="min" href="#"> </a>'</span> <span class="sy0">+</span>
<span class="st0">'<a title="close module" class="close" href="#"></a></h2>'</span> <span class="sy0">+</span>
<span class="st0">'<div class="inner">'</span> <span class="sy0">+</span>
<span class="st0">' <div class="loading">Feed loading, please wait..</div>'</span> <span class="sy0">+</span>
<span class="st0">'</div>'</span> <span class="sy0">+</span>
<span class="st0">'</div>'</span> <span class="sy0">+</span>
<span class="st0">'</li>'</span><span class="sy0">;</span>
<span class="kw1">return</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">(</span>str<span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="co1">//Handle the start Drag event on the left side</span>
<span class="kw2">var</span> _handleStart <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//Stop the event</span>
stopper<span class="br0">(</span>e<span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Some private vars</span>
<span class="kw2">var</span> drag <span class="sy0">=</span> <span class="kw1">this</span><span class="sy0">,</span>
list3 <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#list1'</span><span class="br0">)</span><span class="sy0">,</span>
mod <span class="sy0">=</span> createMod<span class="br0">(</span>drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'data'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Add it to the first list</span>
list3.<span class="me1">appendChild</span><span class="br0">(</span>mod<span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Set the item on the left column disabled.</span>
drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'disabled'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Set the node on the instance</span>
drag.<span class="me1">set</span><span class="br0">(</span><span class="st0">'node'</span><span class="sy0">,</span> mod<span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Add some styles to the proxy node.</span>
drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'dragNode'</span><span class="br0">)</span>.<span class="me1">setStyles</span><span class="br0">(</span><span class="br0">{</span>
opacity<span class="sy0">:</span> <span class="st0">'.5'</span><span class="sy0">,</span>
borderStyle<span class="sy0">:</span> <span class="st0">'none'</span><span class="sy0">,</span>
width<span class="sy0">:</span> <span class="st0">'320px'</span><span class="sy0">,</span>
height<span class="sy0">:</span> <span class="st0">'61px'</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Update the innerHTML of the proxy with the innerHTML of the module</span>
drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'dragNode'</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//set the inner module to hidden</span>
drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">'div.mod'</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'visibility'</span><span class="sy0">,</span> <span class="st0">'hidden'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//add a class for styling</span>
drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'moving'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Setup the DD instance</span>
setupModDD<span class="br0">(</span>mod<span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'data'</span><span class="br0">)</span><span class="sy0">,</span> drag<span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Remove the listener</span>
<span class="kw1">this</span>.<span class="me1">detach</span><span class="br0">(</span><span class="st0">'drag:start'</span><span class="sy0">,</span> _handleStart<span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="co1">//Walk through the feeds list and create the list on the left</span>
<span class="kw2">var</span> feedList <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#feeds ul'</span><span class="br0">)</span><span class="sy0">;</span>
Y.<span class="me1">each</span><span class="br0">(</span>feeds<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>v<span class="sy0">,</span> k<span class="br0">)</span> <span class="br0">{</span>
<span class="kw2">var</span> li <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">(</span><span class="st0">'<li id="'</span> <span class="sy0">+</span> k <span class="sy0">+</span> <span class="st0">'">'</span> <span class="sy0">+</span> v.<span class="me1">title</span> <span class="sy0">+</span> <span class="st0">'</li>'</span><span class="br0">)</span><span class="sy0">;</span>
feedList.<span class="me1">appendChild</span><span class="br0">(</span>li<span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Create the DD instance for this item</span>
_createFeedDD<span class="br0">(</span>li<span class="sy0">,</span> v<span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//This does the calculations for when and where to move a module</span>
<span class="kw2">var</span> _moveMod <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>drag<span class="sy0">,</span> drop<span class="br0">)</span> <span class="br0">{</span>
<span class="kw1">if</span> <span class="br0">(</span>drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'item'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
<span class="kw2">var</span> dragNode <span class="sy0">=</span> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span><span class="sy0">,</span>
dropNode <span class="sy0">=</span> drop.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span><span class="sy0">,</span>
append <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span>
padding <span class="sy0">=</span> <span class="nu0">30</span><span class="sy0">,</span>
xy <span class="sy0">=</span> drag.<span class="me1">mouseXY</span><span class="sy0">,</span>
region <span class="sy0">=</span> drop.<span class="me1">region</span><span class="sy0">,</span>
middle1 <span class="sy0">=</span> region.<span class="me1">top</span> <span class="sy0">+</span> <span class="br0">(</span><span class="br0">(</span>region.<span class="me1">bottom</span> <span class="sy0">-</span> region.<span class="me1">top</span><span class="br0">)</span> <span class="sy0">/</span> <span class="nu0">2</span><span class="br0">)</span><span class="sy0">,</span>
middle2 <span class="sy0">=</span> region.<span class="me1">left</span> <span class="sy0">+</span> <span class="br0">(</span><span class="br0">(</span>region.<span class="me1">right</span> <span class="sy0">-</span> region.<span class="me1">left</span><span class="br0">)</span> <span class="sy0">/</span> <span class="nu0">2</span><span class="br0">)</span><span class="sy0">,</span>
dir <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span>
dir1 <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span>
dir2 <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span>
<span class="co1">//We could do something a little more fancy here, but we won't ;)</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="br0">(</span>xy<span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span> <span class="sy0"><</span> <span class="br0">(</span>region.<span class="me1">top</span> <span class="sy0">+</span> padding<span class="br0">)</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
dir1 <span class="sy0">=</span> <span class="st0">'top'</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="br0">(</span>region.<span class="me1">bottom</span> <span class="sy0">-</span> padding<span class="br0">)</span> <span class="sy0"><</span> xy<span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span><span class="br0">)</span> <span class="br0">{</span>
dir1 <span class="sy0">=</span> <span class="st0">'bottom'</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="br0">(</span>region.<span class="me1">right</span> <span class="sy0">-</span> padding<span class="br0">)</span> <span class="sy0"><</span> xy<span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span><span class="br0">)</span> <span class="br0">{</span>
dir2 <span class="sy0">=</span> <span class="st0">'right'</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="br0">(</span>xy<span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span> <span class="sy0"><</span> <span class="br0">(</span>region.<span class="me1">left</span> <span class="sy0">+</span> padding<span class="br0">)</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
dir2 <span class="sy0">=</span> <span class="st0">'left'</span><span class="sy0">;</span>
<span class="br0">}</span>
dir <span class="sy0">=</span> dir2<span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span>dir2 <span class="sy0">===</span> <span class="kw2">false</span><span class="br0">)</span> <span class="br0">{</span>
dir <span class="sy0">=</span> dir1<span class="sy0">;</span>
<span class="br0">}</span>
<span class="kw1">switch</span> <span class="br0">(</span>dir<span class="br0">)</span> <span class="br0">{</span>
<span class="kw1">case</span> <span class="st0">'top'</span><span class="sy0">:</span>
<span class="kw2">var</span> next <span class="sy0">=</span> dropNode.<span class="me1">get</span><span class="br0">(</span><span class="st0">'nextSibling'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span>next<span class="br0">)</span> <span class="br0">{</span>
dropNode <span class="sy0">=</span> next<span class="sy0">;</span>
<span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span>
append <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="kw1">break</span><span class="sy0">;</span>
<span class="kw1">case</span> <span class="st0">'bottom'</span><span class="sy0">:</span>
<span class="kw1">break</span><span class="sy0">;</span>
<span class="kw1">case</span> <span class="st0">'right'</span><span class="sy0">:</span>
<span class="kw1">case</span> <span class="st0">'left'</span><span class="sy0">:</span>
<span class="kw1">break</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="br0">(</span>dropNode <span class="sy0">!==</span> <span class="kw2">null</span><span class="br0">)</span> <span class="sy0">&&</span> dir<span class="br0">)</span> <span class="br0">{</span>
<span class="kw1">if</span> <span class="br0">(</span>dropNode <span class="sy0">&&</span> dropNode.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>append<span class="br0">)</span> <span class="br0">{</span>
dropNode.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span>.<span class="me1">insertBefore</span><span class="br0">(</span>dragNode<span class="sy0">,</span> dropNode<span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span>
dropNode.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span>.<span class="me1">appendChild</span><span class="br0">(</span>dragNode<span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span>
<span class="br0">}</span>
<span class="co1">//Resync all the targets because something moved..</span>
Y.<span class="me1">Lang</span>.<span class="me1">later</span><span class="br0">(</span><span class="nu0">50</span><span class="sy0">,</span> Y<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">syncActiveShims</span><span class="br0">(</span><span class="kw2">true</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="coMULTI">/*
Handle the drop:enter event
Now when we get a drop enter event, we check to see if the target is an LI, then we know it's out module.
Here is where we move the module around in the DOM.
*/</span>
Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drop:enter'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>e.<span class="me1">drag</span> <span class="sy0">||</span> <span class="sy0">!</span>e.<span class="me1">drop</span> <span class="sy0">||</span> <span class="br0">(</span>e.<span class="me1">drop</span> <span class="sy0">!==</span> e.<span class="me1">target</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
<span class="kw1">return</span> <span class="kw2">false</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="kw1">if</span> <span class="br0">(</span>e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'tagName'</span><span class="br0">)</span>.<span class="me1">toLowerCase</span><span class="br0">(</span><span class="br0">)</span> <span class="sy0">===</span> <span class="st0">'li'</span><span class="br0">)</span> <span class="br0">{</span>
<span class="kw1">if</span> <span class="br0">(</span>e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'item'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
_moveMod<span class="br0">(</span>e.<span class="me1">drag</span><span class="sy0">,</span> e.<span class="me1">drop</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Handle the drag:drag event</span>
<span class="co1">//On drag we need to know if they are moved up or down so we can place the module in the proper DOM location.</span>
Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drag:drag'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
<span class="kw2">var</span> y <span class="sy0">=</span> e.<span class="me1">target</span>.<span class="me1">mouseXY</span><span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span><span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span>y <span class="sy0"><</span> lastY<span class="br0">)</span> <span class="br0">{</span>
goingUp <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span>
<span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span>
goingUp <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span>
<span class="br0">}</span>
lastY <span class="sy0">=</span> y<span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="coMULTI">/*
Handle the drop:hit event
Now that we have a drop on the target, we check to see if the drop was not on a LI.
This means they dropped on the empty space of the UL.
*/</span>
Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drag:drophit'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
<span class="kw2">var</span> drop <span class="sy0">=</span> e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span><span class="sy0">,</span>
drag <span class="sy0">=</span> e.<span class="me1">drag</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span>drop.<span class="me1">get</span><span class="br0">(</span><span class="st0">'tagName'</span><span class="br0">)</span>.<span class="me1">toLowerCase</span><span class="br0">(</span><span class="br0">)</span> <span class="sy0">!==</span> <span class="st0">'li'</span><span class="br0">)</span> <span class="br0">{</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>drop.<span class="me1">contains</span><span class="br0">(</span>drag<span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
drop.<span class="me1">appendChild</span><span class="br0">(</span>drag<span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Handle the drag:start event</span>
<span class="co1">//Use some CSS here to make our dragging better looking.</span>
Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drag:start'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
<span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span>drag.<span class="me1">target</span><span class="br0">)</span> <span class="br0">{</span>
drag.<span class="me1">target</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'locked'</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'dragNode'</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'dragNode'</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'opacity'</span><span class="sy0">,</span><span class="st0">'.5'</span><span class="br0">)</span><span class="sy0">;</span>
drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">'div.mod'</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'visibility'</span><span class="sy0">,</span> <span class="st0">'hidden'</span><span class="br0">)</span><span class="sy0">;</span>
drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'moving'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Handle the drag:end event</span>
<span class="co1">//Replace some of the styles we changed on start drag.</span>
Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drag:end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
<span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span>drag.<span class="me1">target</span><span class="br0">)</span> <span class="br0">{</span>
drag.<span class="me1">target</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'locked'</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'visibility'</span><span class="sy0">,</span> <span class="st0">''</span><span class="br0">)</span><span class="sy0">;</span>
drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">'div.mod'</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'visibility'</span><span class="sy0">,</span> <span class="st0">''</span><span class="br0">)</span><span class="sy0">;</span>
drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'moving'</span><span class="br0">)</span><span class="sy0">;</span>
drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'dragNode'</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> <span class="st0">''</span><span class="br0">)</span><span class="sy0">;</span>
_setCookies<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Handle going over a UL, for empty lists</span>
Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drop:over'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
<span class="kw2">var</span> drop <span class="sy0">=</span> e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span><span class="sy0">,</span>
drag <span class="sy0">=</span> e.<span class="me1">drag</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span>drop.<span class="me1">get</span><span class="br0">(</span><span class="st0">'tagName'</span><span class="br0">)</span>.<span class="me1">toLowerCase</span><span class="br0">(</span><span class="br0">)</span> <span class="sy0">!==</span> <span class="st0">'li'</span><span class="br0">)</span> <span class="br0">{</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>drop.<span class="me1">contains</span><span class="br0">(</span>drag<span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
drop.<span class="me1">appendChild</span><span class="br0">(</span>drag<span class="br0">)</span><span class="sy0">;</span>
Y.<span class="me1">Lang</span>.<span class="me1">later</span><span class="br0">(</span><span class="nu0">50</span><span class="sy0">,</span> Y<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">syncActiveShims</span><span class="br0">(</span><span class="kw2">true</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Create simple targets for the main lists..</span>
<span class="kw2">var</span> uls <span class="sy0">=</span> Y.<span class="me1">all</span><span class="br0">(</span><span class="st0">'#play ul.list'</span><span class="br0">)</span><span class="sy0">;</span>
uls.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span>v<span class="sy0">,</span> k<span class="br0">)</span> <span class="br0">{</span>
<span class="kw2">var</span> tar <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drop</span><span class="br0">(</span><span class="br0">{</span>
node<span class="sy0">:</span> v<span class="sy0">,</span>
padding<span class="sy0">:</span> <span class="st0">'20 0'</span><span class="sy0">,</span>
bubbles<span class="sy0">:</span> Y.<span class="me1">Portal</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'io:xdrReady'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//Get the cookie data</span>
<span class="kw2">var</span> cookie <span class="sy0">=</span> Y.<span class="me1">Cookie</span>.<span class="me1">getSub</span><span class="br0">(</span><span class="st0">'yui'</span><span class="sy0">,</span> <span class="st0">'portal'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span>cookie<span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//JSON parse the stored data</span>
<span class="kw2">var</span> obj <span class="sy0">=</span> Y.<span class="me1">JSON</span>.<span class="me1">parse</span><span class="br0">(</span>cookie<span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Walk the data</span>
Y.<span class="me1">each</span><span class="br0">(</span>obj<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>v<span class="sy0">,</span> k<span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//Get the node for the list</span>
<span class="kw2">var</span> list <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#'</span> <span class="sy0">+</span> k<span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Walk the items in this list</span>
Y.<span class="me1">each</span><span class="br0">(</span>v<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>v2<span class="sy0">,</span> k2<span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//Get the drag for it</span>
<span class="kw2">var</span> drag <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">getDrag</span><span class="br0">(</span><span class="st0">'#'</span> <span class="sy0">+</span> v2.<span class="me1">id</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Create the module</span>
<span class="kw2">var</span> mod <span class="sy0">=</span> createMod<span class="br0">(</span>drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'data'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span>v2.<span class="me1">min</span><span class="br0">)</span> <span class="br0">{</span>
<span class="co1">//If it's minned add some CSS</span>
mod.<span class="me1">query</span><span class="br0">(</span><span class="st0">'div.mod'</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'minned'</span><span class="br0">)</span><span class="sy0">;</span>
mod.<span class="me1">query</span><span class="br0">(</span><span class="st0">'div.inner'</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'height'</span><span class="sy0">,</span> <span class="st0">'0px'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="co1">//Add it to the list</span>
list.<span class="me1">appendChild</span><span class="br0">(</span>mod<span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Set the drag listeners</span>
drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'disabled'</span><span class="br0">)</span><span class="sy0">;</span>
drag.<span class="me1">set</span><span class="br0">(</span><span class="st0">'node'</span><span class="sy0">,</span> mod<span class="br0">)</span><span class="sy0">;</span>
drag.<span class="me1">set</span><span class="br0">(</span><span class="st0">'dragNode'</span><span class="sy0">,</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>._proxy<span class="br0">)</span><span class="sy0">;</span>
drag.<span class="me1">detachAll</span><span class="br0">(</span><span class="st0">'drag:start'</span><span class="br0">)</span><span class="sy0">;</span>
drag.<span class="me1">detachAll</span><span class="br0">(</span><span class="st0">'drag:end'</span><span class="br0">)</span><span class="sy0">;</span>
drag.<span class="me1">detachAll</span><span class="br0">(</span><span class="st0">'drag:drophit'</span><span class="br0">)</span><span class="sy0">;</span>
drag._unprep<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">//Setup the new Drag listeners</span>
setupModDD<span class="br0">(</span>mod<span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">(</span><span class="st0">'data'</span><span class="br0">)</span><span class="sy0">,</span> drag<span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax2-plain">//Use loader to grab the modules needed
YUI(yuiConfig).use('dd', 'anim', 'io', 'cookie', 'json', function(Y) {
//Make this an Event Target so we can bubble to it
var Portal = function() {
Portal.superclass.constructor.apply(this, arguments);
};
Portal.NAME = 'portal';
Y.extend(Portal, Y.Base);
//This is our new bubble target..
Y.Portal = new Portal();
//Setup some private variables..
var goingUp = false, lastY = 0, trans = {};
//The list of feeds that we are going to use
var feeds = {
'ynews': {
id: 'ynews',
title: 'Yahoo! US News',
url: 'rss.news.yahoo.com/rss/us'
},
'yui': {
id: 'yui',
title: 'YUI Blog',
url: 'feeds.yuiblog.com/YahooUserInterfaceBlog'
},
'slashdot': {
id: 'slashdot',
title: 'Slashdot',
url: 'rss.slashdot.org/Slashdot/slashdot'
},
'ajaxian': {
id: 'ajaxian',
title: 'Ajaxian',
url: 'feeds.feedburner.com/ajaxian'
},
'daringfireball': {
id: 'daringfireball',
title: 'Daring Fireball',
url: 'daringfireball.net/index.xml'
},
'wiredtech': {
id: 'wiredtech',
title: 'Wire: Tech Biz',
url: 'www.wired.com/rss/techbiz.xml'
},
'techcrunch': {
id: 'techcrunch',
title: 'TechCrunch',
url: 'feedproxy.google.com/Techcrunch'
},
'smashing': {
id: 'smashing',
title: 'Smashing Magazine',
url: 'www.smashingmagazine.com/wp-rss.php'
}
};
//Setup the config for IO to use flash
Y.io.transport({
id: 'flash',
yid: Y.id,
src: buildDir + 'io/io.swf?stamp=' + (new Date()).getTime()
});
//Simple method for stopping event propagation
//Using this so we can detach it later
var stopper = function(e) {
e.stopPropagation();
};
//Get the order, placement and minned state of the modules and save them to a cookie
var _setCookies = function() {
var dds = Y.DD.DDM._drags;
var list = {};
//Walk all the drag elements
Y.each(dds, function(v, k) {
var par = v.get('node').get('parentNode');
//Find all the lists with drag items in them
if (par.test('ul.list')) {
if (!list[par.get('id')]) {
list[par.get('id')] = [];
}
}
});
//Walk the list
Y.each(list, function(v, k) {
//Get all the li's in the list
var lis = Y.all('#' + k + ' li.item');
lis.each(function(v2, k2) {
//Get the drag instance for the list item
var dd = Y.DD.DDM.getDrag('#' + v2.get('id'));
//Get the mod node
var mod = dd.get('node').query('div.mod');
//Is it minimized
var min = (mod.hasClass('minned')) ? true : false;
//Setup the cookie data
list[k][list[k].length] = { id: dd.get('data').id, min: min };
});
});
//JSON encode the cookie data
var cookie = Y.JSON.stringify(list);
//Set the sub-cookie
Y.Cookie.setSub('yui', 'portal', cookie);
};
//Helper method for creating the feed DD on the left
var _createFeedDD = function(node, data) {
//Create the DD instance
var dd = new Y.DD.Drag({
node: node,
data: data,
bubbles: Y.Portal
}).plug(Y.Plugin.DDProxy, {
moveOnEnd: false,
borderStyle: 'none'
});
//Setup some stopper events
dd.on('drag:start', _handleStart);
dd.on('drag:end', stopper);
dd.on('drag:drophit', stopper);
};
//Handle the node:click event
/* {{{ */
var _nodeClick = function(e) {
//Is the target an href?
if (e.target.test('a')) {
var a = e.target, anim = null, div = a.get('parentNode').get('parentNode');
//Did they click on the min button
if (a.hasClass('min')) {
//Get some node references
var ul = div.query('ul'),
h2 = div.query('h2'),
h = h2.get('offsetHeight'),
hUL = ul.get('offsetHeight'),
inner = div.query('div.inner');
//Create an anim instance on this node.
anim = new Y.Anim({
node: inner
});
//Is it expanded?
if (!div.hasClass('minned')) {
//Set the vars for collapsing it
anim.setAttrs({
to: {
height: 0
},
duration: '.25',
easing: Y.Easing.easeOut,
iteration: 1
});
//On the end, toggle the minned class
//Then set the cookies for state
anim.on('end', function() {
div.toggleClass('minned');
_setCookies();
});
} else {
//Set the vars for expanding it
anim.setAttrs({
to: {
height: (hUL)
},
duration: '.25',
easing: Y.Easing.easeOut,
iteration: 1
});
//Toggle the minned class
//Then set the cookies for state
div.toggleClass('minned');
_setCookies();
}
//Run the animation
anim.run();
}
//Was close clicked?
if (a.hasClass('close')) {
//Get some Node references..
var li = div.get('parentNode'),
id = li.get('id'),
dd = Y.DD.DDM.getDrag('#' + id),
data = dd.get('data'),
item = Y.Node.get('#' + data.id);
//Destroy the DD instance.
dd.destroy();
//Setup the animation for making it disappear
anim = new Y.Anim({
node: div,
to: {
opacity: 0
},
duration: '.25',
easing: Y.Easing.easeOut
});
anim.on('end', function() {
//On end of the first anim, setup another to make it collapse
var anim = new Y.Anim({
node: div,
to: {
height: 0
},
duration: '.25',
easing: Y.Easing.easeOut
});
anim.on('end', function() {
//Remove it from the document
li.get('parentNode').removeChild(li);
item.removeClass('disabled');
//Setup a drag instance on the feed list
_createFeedDD(item, data);
_setCookies();
});
//Run the animation
anim.run();
});
//Run the animation
anim.run();
}
//Stop the click
e.halt();
}
};
/* }}} */
//This creates the module, either from a drag event or from the cookie load
var setupModDD = function(mod, data, dd) {
var node = mod;
//Listen for the click so we can react to the buttons
node.query('h2').on('click', _nodeClick);
//Remove the event's on the original drag instance
dd.detachAll('drag:start');
dd.detachAll('drag:end');
dd.detachAll('drag:drophit');
//It's a target
dd.set('target', true);
//Setup the handles
dd.addHandle('h2').addInvalid('a');
//Remove the mouse listeners on this node
dd._unprep();
//Update a new node
dd.set('node', mod);
//Reset the mouse handlers
dd._prep();
//The Yahoo! Pipes URL
var url = 'http:/'+'/pipes.yahooapis.com/pipes/pipe.run?_id=6b7b2c6a32f5a12e7259c36967052387&_render=json&url=http:/'+'/' + data.url;
//Start the XDR request
var id = Y.io(url, {
method: 'GET',
xdr: {
use:'flash'
},
//XDR Listeners
on: {
success: function(id, data) {
//On success get the feed data
var d = feeds[trans[id]],
//Node reference
inner = d.mod.query('div.inner'),
//Parse the JSON data
oRSS = Y.JSON.parse(data.responseText),
html = '';
//Did we get data?
if (oRSS && oRSS.count) {
//Walk the list and create the news list
Y.each(oRSS.value.items, function(v, k) {
if (k < 5) {
html += '<li><a href="' + v.link + '" target="_blank">' + v.title + '</a>';
}
});
}
//Set the innerHTML of the module
inner.set('innerHTML', '<ul>' + html + '</ul>');
if (Y.DD.DDM.activeDrag) {
//If we are still dragging, update the proxy element too..
var proxy_inner = Y.DD.DDM.activeDrag.get('dragNode').query('div.inner');
proxy_inner.set('innerHTML', '<ul>' + html + '</ul>');
}
},
failure: function(id, data) {
//Something failed..
alert('Feed failed to load..' + id + ' :: ' + data);
}
}
});
//Keep track of the transaction
feeds[data.id].trans = id;
feeds[data.id].mod = mod;
trans[id.id] = data.id;
};
//Helper method to create the markup for the module..
var createMod = function(feed) {
var str = '<li class="item">' +
'<div class="mod">' +
'<h2><strong>' + feed.title + '</strong> <a title="minimize module" class="min" href="#"> </a>' +
'<a title="close module" class="close" href="#"></a></h2>' +
'<div class="inner">' +
' <div class="loading">Feed loading, please wait..</div>' +
'</div>' +
'</div>' +
'</li>';
return Y.Node.create(str);
};
//Handle the start Drag event on the left side
var _handleStart = function(e) {
//Stop the event
stopper(e);
//Some private vars
var drag = this,
list3 = Y.Node.get('#list1'),
mod = createMod(drag.get('data'));
//Add it to the first list
list3.appendChild(mod);
//Set the item on the left column disabled.
drag.get('node').addClass('disabled');
//Set the node on the instance
drag.set('node', mod);
//Add some styles to the proxy node.
drag.get('dragNode').setStyles({
opacity: '.5',
borderStyle: 'none',
width: '320px',
height: '61px'
});
//Update the innerHTML of the proxy with the innerHTML of the module
drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
//set the inner module to hidden
drag.get('node').query('div.mod').setStyle('visibility', 'hidden');
//add a class for styling
drag.get('node').addClass('moving');
//Setup the DD instance
setupModDD(mod, drag.get('data'), drag);
//Remove the listener
this.detach('drag:start', _handleStart);
};
//Walk through the feeds list and create the list on the left
var feedList = Y.Node.get('#feeds ul');
Y.each(feeds, function(v, k) {
var li = Y.Node.create('<li id="' + k + '">' + v.title + '</li>');
feedList.appendChild(li);
//Create the DD instance for this item
_createFeedDD(li, v);
});
//This does the calculations for when and where to move a module
var _moveMod = function(drag, drop) {
if (drag.get('node').hasClass('item')) {
var dragNode = drag.get('node'),
dropNode = drop.get('node'),
append = false,
padding = 30,
xy = drag.mouseXY,
region = drop.region,
middle1 = region.top + ((region.bottom - region.top) / 2),
middle2 = region.left + ((region.right - region.left) / 2),
dir = false,
dir1 = false,
dir2 = false;
//We could do something a little more fancy here, but we won't ;)
if ((xy[1] < (region.top + padding))) {
dir1 = 'top';
}
if ((region.bottom - padding) < xy[1]) {
dir1 = 'bottom';
}
if ((region.right - padding) < xy[0]) {
dir2 = 'right';
}
if ((xy[0] < (region.left + padding))) {
dir2 = 'left';
}
dir = dir2;
if (dir2 === false) {
dir = dir1;
}
switch (dir) {
case 'top':
var next = dropNode.get('nextSibling');
if (next) {
dropNode = next;
} else {
append = true;
}
break;
case 'bottom':
break;
case 'right':
case 'left':
break;
}
if ((dropNode !== null) && dir) {
if (dropNode && dropNode.get('parentNode')) {
if (!append) {
dropNode.get('parentNode').insertBefore(dragNode, dropNode);
} else {
dropNode.get('parentNode').appendChild(dragNode);
}
}
}
//Resync all the targets because something moved..
Y.Lang.later(50, Y, function() {
Y.DD.DDM.syncActiveShims(true);
});
}
};
/*
Handle the drop:enter event
Now when we get a drop enter event, we check to see if the target is an LI, then we know it's out module.
Here is where we move the module around in the DOM.
*/
Y.Portal.on('drop:enter', function(e) {
if (!e.drag || !e.drop || (e.drop !== e.target)) {
return false;
}
if (e.drop.get('node').get('tagName').toLowerCase() === 'li') {
if (e.drop.get('node').hasClass('item')) {
_moveMod(e.drag, e.drop);
}
}
});
//Handle the drag:drag event
//On drag we need to know if they are moved up or down so we can place the module in the proper DOM location.
Y.Portal.on('drag:drag', function(e) {
var y = e.target.mouseXY[1];
if (y < lastY) {
goingUp = true;
} else {
goingUp = false;
}
lastY = y;
});
/*
Handle the drop:hit event
Now that we have a drop on the target, we check to see if the drop was not on a LI.
This means they dropped on the empty space of the UL.
*/
Y.Portal.on('drag:drophit', function(e) {
var drop = e.drop.get('node'),
drag = e.drag.get('node');
if (drop.get('tagName').toLowerCase() !== 'li') {
if (!drop.contains(drag)) {
drop.appendChild(drag);
}
}
});
//Handle the drag:start event
//Use some CSS here to make our dragging better looking.
Y.Portal.on('drag:start', function(e) {
var drag = e.target;
if (drag.target) {
drag.target.set('locked', true);
}
drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
drag.get('dragNode').setStyle('opacity','.5');
drag.get('node').query('div.mod').setStyle('visibility', 'hidden');
drag.get('node').addClass('moving');
});
//Handle the drag:end event
//Replace some of the styles we changed on start drag.
Y.Portal.on('drag:end', function(e) {
var drag = e.target;
if (drag.target) {
drag.target.set('locked', false);
}
drag.get('node').setStyle('visibility', '');
drag.get('node').query('div.mod').setStyle('visibility', '');
drag.get('node').removeClass('moving');
drag.get('dragNode').set('innerHTML', '');
_setCookies();
});
//Handle going over a UL, for empty lists
Y.Portal.on('drop:over', function(e) {
var drop = e.drop.get('node'),
drag = e.drag.get('node');
if (drop.get('tagName').toLowerCase() !== 'li') {
if (!drop.contains(drag)) {
drop.appendChild(drag);
Y.Lang.later(50, Y, function() {
Y.DD.DDM.syncActiveShims(true);
});
}
}
});
//Create simple targets for the main lists..
var uls = Y.all('#play ul.list');
uls.each(function(v, k) {
var tar = new Y.DD.Drop({
node: v,
padding: '20 0',
bubbles: Y.Portal
});
});
Y.on('io:xdrReady', function() {
//Get the cookie data
var cookie = Y.Cookie.getSub('yui', 'portal');
if (cookie) {
//JSON parse the stored data
var obj = Y.JSON.parse(cookie);
//Walk the data
Y.each(obj, function(v, k) {
//Get the node for the list
var list = Y.Node.get('#' + k);
//Walk the items in this list
Y.each(v, function(v2, k2) {
//Get the drag for it
var drag = Y.DD.DDM.getDrag('#' + v2.id);
//Create the module
var mod = createMod(drag.get('data'));
if (v2.min) {
//If it's minned add some CSS
mod.query('div.mod').addClass('minned');
mod.query('div.inner').setStyle('height', '0px');
}
//Add it to the list
list.appendChild(mod);
//Set the drag listeners
drag.get('node').addClass('disabled');
drag.set('node', mod);
drag.set('dragNode', Y.DD.DDM._proxy);
drag.detachAll('drag:start');
drag.detachAll('drag:end');
drag.detachAll('drag:drophit');
drag._unprep();
//Setup the new Drag listeners
setupModDD(mod, drag.get('data'), drag);
});
});
}
});
});</textarea></div> </div>
<div class="yui-u sidebar">
<div id="examples" class="mod box4">
<div class="hd">
<h4>
Drag & Drop Examples:</h4>
</div>
<div class="bd">
<ul>
<li><a href='../dd/simple-drag.html'>Simple Drag</a></li><li><a href='../dd/drag-plugin.html'>Drag Node Plugin</a></li><li><a href='../dd/proxy-drag.html'>Proxy Drag</a></li><li><a href='../dd/constrained-drag.html'>Drag Constrained to a Region</a></li><li><a href='../dd/groups-drag.html'>Interaction Groups</a></li><li><a href='../dd/shim-drag.html'>Using the Drag Shim</a></li><li><a href='../dd/anim-drop.html'>Animated Drop Targets</a></li><li><a href='../dd/drop-code.html'>Drop Based Coding</a></li><li><a href='../dd/winscroll.html'>Window Scrolling</a></li><li><a href='../dd/list-drag.html'>List reorder w/Bubbling</a></li><li><a href='../dd/scroll-list.html'>List reorder w/Scrolling</a></li><li class='selected'><a href='../dd/portal-drag.html'>Portal Style Example</a></li><li><a href='../dd/photo-browser.html'>Photo Browser</a></li><li><a href='../stylesheet/stylesheet_theme.html'>Adjusting a page theme on the fly (included with examples for StyleSheet)</a></li> </ul>
</div>
</div>
<div class="mod box4">
<div class="hd">
<h4>More Drag & Drop Resources:</h4>
</div>
<div class="bd">
<ul>
<!-- <li><a href="http://developer.yahoo.com/yui/dd/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_dd.html">API Documentation</a></li></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
</div><!--closes bd-->
<div id="ft">
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p>
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
<a href="http://careers.yahoo.com/">Job Openings</a></p>
</div>
</div>
<script language="javascript">
var yuiConfig = {base:"../../build/", timeout: 10000};
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>