--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui3.0.0/examples/dd/portal-drag.html Mon Nov 23 15:14:29 2009 +0100
@@ -0,0 +1,1314 @@
+
+<!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>