|
0
|
1 |
|
|
|
2 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
|
3 |
<html>
|
|
|
4 |
<head>
|
|
|
5 |
<title>YUI Library Examples: Drag & Drop: Portal Style Example</title>
|
|
|
6 |
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
|
7 |
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
|
|
|
8 |
|
|
|
9 |
<style>
|
|
|
10 |
/*Supplemental CSS for the YUI distribution*/
|
|
|
11 |
#custom-doc { width: 95%; min-width: 950px; }
|
|
|
12 |
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
|
|
|
13 |
/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
|
|
|
14 |
</style>
|
|
|
15 |
|
|
|
16 |
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
|
|
|
17 |
|
|
|
18 |
<!--there is no custom header content for this example-->
|
|
|
19 |
|
|
|
20 |
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
|
|
|
21 |
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
|
|
|
22 |
|
|
|
23 |
</head>
|
|
|
24 |
<body id="yahoo-com" class=" yui-skin-sam">
|
|
|
25 |
<div id="custom-doc" class="yui-t2">
|
|
|
26 |
<div id="hd">
|
|
|
27 |
<div id="ygunav">
|
|
|
28 |
<p>
|
|
|
29 |
<em>
|
|
|
30 |
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>
|
|
|
31 |
</em>
|
|
|
32 |
</p>
|
|
|
33 |
<form action="http://search.yahoo.com/search" id="sitesearchform">
|
|
|
34 |
<input name="vs" type="hidden" value="developer.yahoo.com">
|
|
|
35 |
<input name="vs" type="hidden" value="yuiblog.com">
|
|
|
36 |
<div id="sitesearch">
|
|
|
37 |
<label for="searchinput">Site Search (YDN & YUIBlog): </label>
|
|
|
38 |
<input type="text" id="searchinput" name="p">
|
|
|
39 |
<input type="submit" value="Search" id="searchsubmit" class="ygbt">
|
|
|
40 |
</div>
|
|
|
41 |
</form>
|
|
|
42 |
</div>
|
|
|
43 |
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div>
|
|
|
44 |
<div id="pagetitle"><h1>YUI Library Examples: Drag & Drop: Portal Style Example</h1></div>
|
|
|
45 |
</div>
|
|
|
46 |
<div id="bd">
|
|
|
47 |
|
|
|
48 |
|
|
|
49 |
<div id="yui-main">
|
|
|
50 |
<div class="yui-b">
|
|
|
51 |
<div class="yui-ge">
|
|
|
52 |
<div class="yui-u first example" id="main">
|
|
|
53 |
|
|
|
54 |
<h2>Drag & Drop: Portal Style Example</h2>
|
|
|
55 |
|
|
|
56 |
<div id="example" class="promo">
|
|
|
57 |
<div class="example-intro">
|
|
|
58 |
<p>Portal style example using Drag & Drop Event Bubbling and Animation.</p>
|
|
|
59 |
</div>
|
|
|
60 |
|
|
|
61 |
<div class="module example-container newWindow">
|
|
|
62 |
<div id="example-canvas" class="bd">
|
|
|
63 |
|
|
|
64 |
<p class="newWindowButton yui-skin-sam">
|
|
|
65 |
<span id="newWindowLink">
|
|
|
66 |
<span class="first-child">
|
|
|
67 |
<a href="portal-drag_source.html" target="_blank">View example in new window.</a>
|
|
|
68 |
</span>
|
|
|
69 |
</span>
|
|
|
70 |
</p>
|
|
|
71 |
|
|
|
72 |
|
|
|
73 |
</div>
|
|
|
74 |
</div>
|
|
|
75 |
</div>
|
|
|
76 |
|
|
|
77 |
<h3>Full HTML Source</h3>
|
|
|
78 |
|
|
|
79 |
<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>
|
|
|
80 |
<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>
|
|
|
81 |
<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>
|
|
|
82 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"bd"</span>></span>
|
|
|
83 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"yui-main"</span>></span>
|
|
|
84 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-b"</span>></span>
|
|
|
85 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-g"</span>></span>
|
|
|
86 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"play"</span>></span>
|
|
|
87 |
<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>
|
|
|
88 |
<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>
|
|
|
89 |
<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>
|
|
|
90 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
|
|
|
91 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
|
|
|
92 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
|
|
|
93 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
|
|
|
94 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-b"</span>></span>
|
|
|
95 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"feeds"</span>></span>
|
|
|
96 |
<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>
|
|
|
97 |
<span class="sc2"><<span class="kw2">ul</span>><<span class="sy0">/</span><span class="kw2">ul</span>></span>
|
|
|
98 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
|
|
|
99 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
|
|
|
100 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
|
|
|
101 |
<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>
|
|
|
102 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
|
|
|
103 |
<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>
|
|
|
104 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">body</span>></span></pre></div><textarea id="syntax1-plain"><body>
|
|
|
105 |
<div id="doc3" class="yui-t2">
|
|
|
106 |
<div id="hd"><h1>YUI 3.0 Portal Example</h1></div>
|
|
|
107 |
<div id="bd">
|
|
|
108 |
<div id="yui-main">
|
|
|
109 |
<div class="yui-b">
|
|
|
110 |
<div class="yui-g">
|
|
|
111 |
<div id="play">
|
|
|
112 |
<ul class="list" id="list1"></ul>
|
|
|
113 |
<ul class="list" id="list2"></ul>
|
|
|
114 |
<ul class="list" id="list3"></ul>
|
|
|
115 |
</div>
|
|
|
116 |
</div>
|
|
|
117 |
</div>
|
|
|
118 |
</div>
|
|
|
119 |
<div class="yui-b">
|
|
|
120 |
<div id="feeds">
|
|
|
121 |
<p>Drag a news feed into one of the columns.</p>
|
|
|
122 |
<ul></ul>
|
|
|
123 |
</div>
|
|
|
124 |
</div>
|
|
|
125 |
</div>
|
|
|
126 |
<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>
|
|
|
127 |
</div>
|
|
|
128 |
<script src="assets/portal.js"></script>
|
|
|
129 |
</body></textarea></div><h3>Full Javascript Source</h3>
|
|
|
130 |
|
|
|
131 |
<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>
|
|
|
132 |
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>
|
|
|
133 |
<span class="co1">//Make this an Event Target so we can bubble to it</span>
|
|
|
134 |
<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>
|
|
|
135 |
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>
|
|
|
136 |
<span class="br0">}</span><span class="sy0">;</span>
|
|
|
137 |
Portal.<span class="kw3">NAME</span> <span class="sy0">=</span> <span class="st0">'portal'</span><span class="sy0">;</span>
|
|
|
138 |
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>
|
|
|
139 |
<span class="co1">//This is our new bubble target..</span>
|
|
|
140 |
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>
|
|
|
141 |
|
|
|
142 |
|
|
|
143 |
<span class="co1">//Setup some private variables..</span>
|
|
|
144 |
<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>
|
|
|
145 |
|
|
|
146 |
<span class="co1">//The list of feeds that we are going to use</span>
|
|
|
147 |
<span class="kw2">var</span> feeds <span class="sy0">=</span> <span class="br0">{</span>
|
|
|
148 |
<span class="st0">'ynews'</span><span class="sy0">:</span> <span class="br0">{</span>
|
|
|
149 |
id<span class="sy0">:</span> <span class="st0">'ynews'</span><span class="sy0">,</span>
|
|
|
150 |
title<span class="sy0">:</span> <span class="st0">'Yahoo! US News'</span><span class="sy0">,</span>
|
|
|
151 |
url<span class="sy0">:</span> <span class="st0">'rss.news.yahoo.com/rss/us'</span>
|
|
|
152 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
153 |
<span class="st0">'yui'</span><span class="sy0">:</span> <span class="br0">{</span>
|
|
|
154 |
id<span class="sy0">:</span> <span class="st0">'yui'</span><span class="sy0">,</span>
|
|
|
155 |
title<span class="sy0">:</span> <span class="st0">'YUI Blog'</span><span class="sy0">,</span>
|
|
|
156 |
url<span class="sy0">:</span> <span class="st0">'feeds.yuiblog.com/YahooUserInterfaceBlog'</span>
|
|
|
157 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
158 |
<span class="st0">'slashdot'</span><span class="sy0">:</span> <span class="br0">{</span>
|
|
|
159 |
id<span class="sy0">:</span> <span class="st0">'slashdot'</span><span class="sy0">,</span>
|
|
|
160 |
title<span class="sy0">:</span> <span class="st0">'Slashdot'</span><span class="sy0">,</span>
|
|
|
161 |
url<span class="sy0">:</span> <span class="st0">'rss.slashdot.org/Slashdot/slashdot'</span>
|
|
|
162 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
163 |
<span class="st0">'ajaxian'</span><span class="sy0">:</span> <span class="br0">{</span>
|
|
|
164 |
id<span class="sy0">:</span> <span class="st0">'ajaxian'</span><span class="sy0">,</span>
|
|
|
165 |
title<span class="sy0">:</span> <span class="st0">'Ajaxian'</span><span class="sy0">,</span>
|
|
|
166 |
url<span class="sy0">:</span> <span class="st0">'feeds.feedburner.com/ajaxian'</span>
|
|
|
167 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
168 |
<span class="st0">'daringfireball'</span><span class="sy0">:</span> <span class="br0">{</span>
|
|
|
169 |
id<span class="sy0">:</span> <span class="st0">'daringfireball'</span><span class="sy0">,</span>
|
|
|
170 |
title<span class="sy0">:</span> <span class="st0">'Daring Fireball'</span><span class="sy0">,</span>
|
|
|
171 |
url<span class="sy0">:</span> <span class="st0">'daringfireball.net/index.xml'</span>
|
|
|
172 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
173 |
<span class="st0">'wiredtech'</span><span class="sy0">:</span> <span class="br0">{</span>
|
|
|
174 |
id<span class="sy0">:</span> <span class="st0">'wiredtech'</span><span class="sy0">,</span>
|
|
|
175 |
title<span class="sy0">:</span> <span class="st0">'Wire: Tech Biz'</span><span class="sy0">,</span>
|
|
|
176 |
url<span class="sy0">:</span> <span class="st0">'www.wired.com/rss/techbiz.xml'</span>
|
|
|
177 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
178 |
<span class="st0">'techcrunch'</span><span class="sy0">:</span> <span class="br0">{</span>
|
|
|
179 |
id<span class="sy0">:</span> <span class="st0">'techcrunch'</span><span class="sy0">,</span>
|
|
|
180 |
title<span class="sy0">:</span> <span class="st0">'TechCrunch'</span><span class="sy0">,</span>
|
|
|
181 |
url<span class="sy0">:</span> <span class="st0">'feedproxy.google.com/Techcrunch'</span>
|
|
|
182 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
183 |
<span class="st0">'smashing'</span><span class="sy0">:</span> <span class="br0">{</span>
|
|
|
184 |
id<span class="sy0">:</span> <span class="st0">'smashing'</span><span class="sy0">,</span>
|
|
|
185 |
title<span class="sy0">:</span> <span class="st0">'Smashing Magazine'</span><span class="sy0">,</span>
|
|
|
186 |
url<span class="sy0">:</span> <span class="st0">'www.smashingmagazine.com/wp-rss.php'</span>
|
|
|
187 |
<span class="br0">}</span>
|
|
|
188 |
<span class="br0">}</span><span class="sy0">;</span>
|
|
|
189 |
|
|
|
190 |
<span class="co1">//Setup the config for IO to use flash</span>
|
|
|
191 |
Y.<span class="me1">io</span>.<span class="me1">transport</span><span class="br0">(</span><span class="br0">{</span>
|
|
|
192 |
id<span class="sy0">:</span> <span class="st0">'flash'</span><span class="sy0">,</span>
|
|
|
193 |
yid<span class="sy0">:</span> Y.<span class="me1">id</span><span class="sy0">,</span>
|
|
|
194 |
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>
|
|
|
195 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
196 |
|
|
|
197 |
<span class="co1">//Simple method for stopping event propagation</span>
|
|
|
198 |
<span class="co1">//Using this so we can detach it later</span>
|
|
|
199 |
<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>
|
|
|
200 |
e.<span class="me1">stopPropagation</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
201 |
<span class="br0">}</span><span class="sy0">;</span>
|
|
|
202 |
|
|
|
203 |
<span class="co1">//Get the order, placement and minned state of the modules and save them to a cookie</span>
|
|
|
204 |
<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>
|
|
|
205 |
<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>
|
|
|
206 |
<span class="kw2">var</span> list <span class="sy0">=</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">;</span>
|
|
|
207 |
<span class="co1">//Walk all the drag elements</span>
|
|
|
208 |
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>
|
|
|
209 |
<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>
|
|
|
210 |
<span class="co1">//Find all the lists with drag items in them</span>
|
|
|
211 |
<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>
|
|
|
212 |
<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>
|
|
|
213 |
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>
|
|
|
214 |
<span class="br0">}</span>
|
|
|
215 |
<span class="br0">}</span>
|
|
|
216 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
217 |
<span class="co1">//Walk the list</span>
|
|
|
218 |
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>
|
|
|
219 |
<span class="co1">//Get all the li's in the list</span>
|
|
|
220 |
<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>
|
|
|
221 |
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>
|
|
|
222 |
<span class="co1">//Get the drag instance for the list item</span>
|
|
|
223 |
<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>
|
|
|
224 |
<span class="co1">//Get the mod node</span>
|
|
|
225 |
<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>
|
|
|
226 |
<span class="co1">//Is it minimized</span>
|
|
|
227 |
<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>
|
|
|
228 |
<span class="co1">//Setup the cookie data</span>
|
|
|
229 |
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>
|
|
|
230 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
231 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
232 |
<span class="co1">//JSON encode the cookie data</span>
|
|
|
233 |
<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>
|
|
|
234 |
<span class="co1">//Set the sub-cookie</span>
|
|
|
235 |
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>
|
|
|
236 |
<span class="br0">}</span><span class="sy0">;</span>
|
|
|
237 |
|
|
|
238 |
<span class="co1">//Helper method for creating the feed DD on the left</span>
|
|
|
239 |
<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>
|
|
|
240 |
<span class="co1">//Create the DD instance</span>
|
|
|
241 |
<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>
|
|
|
242 |
node<span class="sy0">:</span> node<span class="sy0">,</span>
|
|
|
243 |
data<span class="sy0">:</span> data<span class="sy0">,</span>
|
|
|
244 |
bubbles<span class="sy0">:</span> Y.<span class="me1">Portal</span>
|
|
|
245 |
<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>
|
|
|
246 |
moveOnEnd<span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">,</span>
|
|
|
247 |
borderStyle<span class="sy0">:</span> <span class="st0">'none'</span>
|
|
|
248 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
249 |
<span class="co1">//Setup some stopper events</span>
|
|
|
250 |
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>
|
|
|
251 |
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>
|
|
|
252 |
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>
|
|
|
253 |
<span class="br0">}</span><span class="sy0">;</span>
|
|
|
254 |
|
|
|
255 |
<span class="co1">//Handle the node:click event</span>
|
|
|
256 |
<span class="co2">/* {{{ */</span>
|
|
|
257 |
<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>
|
|
|
258 |
<span class="co1">//Is the target an href?</span>
|
|
|
259 |
<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>
|
|
|
260 |
<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>
|
|
|
261 |
<span class="co1">//Did they click on the min button</span>
|
|
|
262 |
<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>
|
|
|
263 |
<span class="co1">//Get some node references</span>
|
|
|
264 |
<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>
|
|
|
265 |
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>
|
|
|
266 |
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>
|
|
|
267 |
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>
|
|
|
268 |
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>
|
|
|
269 |
|
|
|
270 |
<span class="co1">//Create an anim instance on this node.</span>
|
|
|
271 |
anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span>
|
|
|
272 |
node<span class="sy0">:</span> inner
|
|
|
273 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
274 |
<span class="co1">//Is it expanded?</span>
|
|
|
275 |
<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>
|
|
|
276 |
<span class="co1">//Set the vars for collapsing it</span>
|
|
|
277 |
anim.<span class="me1">setAttrs</span><span class="br0">(</span><span class="br0">{</span>
|
|
|
278 |
to<span class="sy0">:</span> <span class="br0">{</span>
|
|
|
279 |
height<span class="sy0">:</span> <span class="nu0">0</span>
|
|
|
280 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
281 |
duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span>
|
|
|
282 |
easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span><span class="sy0">,</span>
|
|
|
283 |
iteration<span class="sy0">:</span> <span class="nu0">1</span>
|
|
|
284 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
285 |
<span class="co1">//On the end, toggle the minned class</span>
|
|
|
286 |
<span class="co1">//Then set the cookies for state</span>
|
|
|
287 |
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>
|
|
|
288 |
div.<span class="me1">toggleClass</span><span class="br0">(</span><span class="st0">'minned'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
289 |
_setCookies<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
290 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
291 |
<span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span>
|
|
|
292 |
<span class="co1">//Set the vars for expanding it</span>
|
|
|
293 |
anim.<span class="me1">setAttrs</span><span class="br0">(</span><span class="br0">{</span>
|
|
|
294 |
to<span class="sy0">:</span> <span class="br0">{</span>
|
|
|
295 |
height<span class="sy0">:</span> <span class="br0">(</span>hUL<span class="br0">)</span>
|
|
|
296 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
297 |
duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span>
|
|
|
298 |
easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span><span class="sy0">,</span>
|
|
|
299 |
iteration<span class="sy0">:</span> <span class="nu0">1</span>
|
|
|
300 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
301 |
<span class="co1">//Toggle the minned class</span>
|
|
|
302 |
<span class="co1">//Then set the cookies for state</span>
|
|
|
303 |
div.<span class="me1">toggleClass</span><span class="br0">(</span><span class="st0">'minned'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
304 |
_setCookies<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
305 |
<span class="br0">}</span>
|
|
|
306 |
<span class="co1">//Run the animation</span>
|
|
|
307 |
anim.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
308 |
|
|
|
309 |
<span class="br0">}</span>
|
|
|
310 |
<span class="co1">//Was close clicked?</span>
|
|
|
311 |
<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>
|
|
|
312 |
<span class="co1">//Get some Node references..</span>
|
|
|
313 |
<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>
|
|
|
314 |
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>
|
|
|
315 |
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>
|
|
|
316 |
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>
|
|
|
317 |
<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>
|
|
|
318 |
|
|
|
319 |
<span class="co1">//Destroy the DD instance.</span>
|
|
|
320 |
dd.<span class="me1">destroy</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
321 |
<span class="co1">//Setup the animation for making it disappear</span>
|
|
|
322 |
anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span>
|
|
|
323 |
node<span class="sy0">:</span> div<span class="sy0">,</span>
|
|
|
324 |
to<span class="sy0">:</span> <span class="br0">{</span>
|
|
|
325 |
opacity<span class="sy0">:</span> <span class="nu0">0</span>
|
|
|
326 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
327 |
duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span>
|
|
|
328 |
easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span>
|
|
|
329 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
330 |
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>
|
|
|
331 |
<span class="co1">//On end of the first anim, setup another to make it collapse</span>
|
|
|
332 |
<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>
|
|
|
333 |
node<span class="sy0">:</span> div<span class="sy0">,</span>
|
|
|
334 |
to<span class="sy0">:</span> <span class="br0">{</span>
|
|
|
335 |
height<span class="sy0">:</span> <span class="nu0">0</span>
|
|
|
336 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
337 |
duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span>
|
|
|
338 |
easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span>
|
|
|
339 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
340 |
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>
|
|
|
341 |
<span class="co1">//Remove it from the document</span>
|
|
|
342 |
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>
|
|
|
343 |
<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>
|
|
|
344 |
<span class="co1">//Setup a drag instance on the feed list</span>
|
|
|
345 |
_createFeedDD<span class="br0">(</span><span class="kw1">item</span><span class="sy0">,</span> data<span class="br0">)</span><span class="sy0">;</span>
|
|
|
346 |
_setCookies<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
347 |
|
|
|
348 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
349 |
<span class="co1">//Run the animation</span>
|
|
|
350 |
anim.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
351 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
352 |
<span class="co1">//Run the animation</span>
|
|
|
353 |
anim.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
354 |
<span class="br0">}</span>
|
|
|
355 |
<span class="co1">//Stop the click</span>
|
|
|
356 |
e.<span class="me1">halt</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
357 |
<span class="br0">}</span>
|
|
|
358 |
<span class="br0">}</span><span class="sy0">;</span>
|
|
|
359 |
<span class="co2">/* }}} */</span>
|
|
|
360 |
|
|
|
361 |
<span class="co1">//This creates the module, either from a drag event or from the cookie load</span>
|
|
|
362 |
<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>
|
|
|
363 |
<span class="kw2">var</span> node <span class="sy0">=</span> mod<span class="sy0">;</span>
|
|
|
364 |
<span class="co1">//Listen for the click so we can react to the buttons</span>
|
|
|
365 |
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>
|
|
|
366 |
|
|
|
367 |
<span class="co1">//Remove the event's on the original drag instance</span>
|
|
|
368 |
dd.<span class="me1">detachAll</span><span class="br0">(</span><span class="st0">'drag:start'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
369 |
dd.<span class="me1">detachAll</span><span class="br0">(</span><span class="st0">'drag:end'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
370 |
dd.<span class="me1">detachAll</span><span class="br0">(</span><span class="st0">'drag:drophit'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
371 |
|
|
|
372 |
<span class="co1">//It's a target</span>
|
|
|
373 |
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>
|
|
|
374 |
<span class="co1">//Setup the handles</span>
|
|
|
375 |
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>
|
|
|
376 |
<span class="co1">//Remove the mouse listeners on this node</span>
|
|
|
377 |
dd._unprep<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
378 |
<span class="co1">//Update a new node</span>
|
|
|
379 |
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>
|
|
|
380 |
<span class="co1">//Reset the mouse handlers</span>
|
|
|
381 |
dd._prep<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
382 |
|
|
|
383 |
<span class="co1">//The Yahoo! Pipes URL</span>
|
|
|
384 |
<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>
|
|
|
385 |
<span class="co1">//Start the XDR request</span>
|
|
|
386 |
<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>
|
|
|
387 |
method<span class="sy0">:</span> <span class="st0">'GET'</span><span class="sy0">,</span>
|
|
|
388 |
xdr<span class="sy0">:</span> <span class="br0">{</span>
|
|
|
389 |
<span class="kw2">use</span><span class="sy0">:</span><span class="st0">'flash'</span>
|
|
|
390 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
391 |
<span class="co1">//XDR Listeners</span>
|
|
|
392 |
on<span class="sy0">:</span> <span class="br0">{</span>
|
|
|
393 |
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>
|
|
|
394 |
<span class="co1">//On success get the feed data</span>
|
|
|
395 |
<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>
|
|
|
396 |
<span class="co1">//Node reference</span>
|
|
|
397 |
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>
|
|
|
398 |
<span class="co1">//Parse the JSON data</span>
|
|
|
399 |
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>
|
|
|
400 |
html <span class="sy0">=</span> <span class="st0">''</span><span class="sy0">;</span>
|
|
|
401 |
|
|
|
402 |
<span class="co1">//Did we get data?</span>
|
|
|
403 |
<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>
|
|
|
404 |
<span class="co1">//Walk the list and create the news list</span>
|
|
|
405 |
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>
|
|
|
406 |
<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>
|
|
|
407 |
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>
|
|
|
408 |
<span class="br0">}</span>
|
|
|
409 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
410 |
<span class="br0">}</span>
|
|
|
411 |
<span class="co1">//Set the innerHTML of the module</span>
|
|
|
412 |
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>
|
|
|
413 |
<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>
|
|
|
414 |
<span class="co1">//If we are still dragging, update the proxy element too..</span>
|
|
|
415 |
<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>
|
|
|
416 |
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>
|
|
|
417 |
|
|
|
418 |
<span class="br0">}</span>
|
|
|
419 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
420 |
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>
|
|
|
421 |
<span class="co1">//Something failed..</span>
|
|
|
422 |
<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>
|
|
|
423 |
<span class="br0">}</span>
|
|
|
424 |
<span class="br0">}</span>
|
|
|
425 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
426 |
<span class="co1">//Keep track of the transaction</span>
|
|
|
427 |
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>
|
|
|
428 |
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>
|
|
|
429 |
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>
|
|
|
430 |
<span class="br0">}</span><span class="sy0">;</span>
|
|
|
431 |
|
|
|
432 |
|
|
|
433 |
<span class="co1">//Helper method to create the markup for the module..</span>
|
|
|
434 |
<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>
|
|
|
435 |
<span class="kw2">var</span> str <span class="sy0">=</span> <span class="st0">'<li class="item">'</span> <span class="sy0">+</span>
|
|
|
436 |
<span class="st0">'<div class="mod">'</span> <span class="sy0">+</span>
|
|
|
437 |
<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>
|
|
|
438 |
<span class="st0">'<a title="close module" class="close" href="#"></a></h2>'</span> <span class="sy0">+</span>
|
|
|
439 |
<span class="st0">'<div class="inner">'</span> <span class="sy0">+</span>
|
|
|
440 |
<span class="st0">' <div class="loading">Feed loading, please wait..</div>'</span> <span class="sy0">+</span>
|
|
|
441 |
<span class="st0">'</div>'</span> <span class="sy0">+</span>
|
|
|
442 |
<span class="st0">'</div>'</span> <span class="sy0">+</span>
|
|
|
443 |
<span class="st0">'</li>'</span><span class="sy0">;</span>
|
|
|
444 |
<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>
|
|
|
445 |
<span class="br0">}</span><span class="sy0">;</span>
|
|
|
446 |
|
|
|
447 |
<span class="co1">//Handle the start Drag event on the left side</span>
|
|
|
448 |
<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>
|
|
|
449 |
<span class="co1">//Stop the event</span>
|
|
|
450 |
stopper<span class="br0">(</span>e<span class="br0">)</span><span class="sy0">;</span>
|
|
|
451 |
<span class="co1">//Some private vars</span>
|
|
|
452 |
<span class="kw2">var</span> drag <span class="sy0">=</span> <span class="kw1">this</span><span class="sy0">,</span>
|
|
|
453 |
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>
|
|
|
454 |
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>
|
|
|
455 |
|
|
|
456 |
<span class="co1">//Add it to the first list</span>
|
|
|
457 |
list3.<span class="me1">appendChild</span><span class="br0">(</span>mod<span class="br0">)</span><span class="sy0">;</span>
|
|
|
458 |
<span class="co1">//Set the item on the left column disabled.</span>
|
|
|
459 |
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>
|
|
|
460 |
<span class="co1">//Set the node on the instance</span>
|
|
|
461 |
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>
|
|
|
462 |
<span class="co1">//Add some styles to the proxy node.</span>
|
|
|
463 |
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>
|
|
|
464 |
opacity<span class="sy0">:</span> <span class="st0">'.5'</span><span class="sy0">,</span>
|
|
|
465 |
borderStyle<span class="sy0">:</span> <span class="st0">'none'</span><span class="sy0">,</span>
|
|
|
466 |
width<span class="sy0">:</span> <span class="st0">'320px'</span><span class="sy0">,</span>
|
|
|
467 |
height<span class="sy0">:</span> <span class="st0">'61px'</span>
|
|
|
468 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
469 |
<span class="co1">//Update the innerHTML of the proxy with the innerHTML of the module</span>
|
|
|
470 |
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>
|
|
|
471 |
<span class="co1">//set the inner module to hidden</span>
|
|
|
472 |
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>
|
|
|
473 |
<span class="co1">//add a class for styling</span>
|
|
|
474 |
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>
|
|
|
475 |
<span class="co1">//Setup the DD instance</span>
|
|
|
476 |
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>
|
|
|
477 |
|
|
|
478 |
<span class="co1">//Remove the listener</span>
|
|
|
479 |
<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>
|
|
|
480 |
<span class="br0">}</span><span class="sy0">;</span>
|
|
|
481 |
|
|
|
482 |
<span class="co1">//Walk through the feeds list and create the list on the left</span>
|
|
|
483 |
<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>
|
|
|
484 |
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>
|
|
|
485 |
<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>
|
|
|
486 |
feedList.<span class="me1">appendChild</span><span class="br0">(</span>li<span class="br0">)</span><span class="sy0">;</span>
|
|
|
487 |
<span class="co1">//Create the DD instance for this item</span>
|
|
|
488 |
_createFeedDD<span class="br0">(</span>li<span class="sy0">,</span> v<span class="br0">)</span><span class="sy0">;</span>
|
|
|
489 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
490 |
|
|
|
491 |
<span class="co1">//This does the calculations for when and where to move a module</span>
|
|
|
492 |
<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>
|
|
|
493 |
<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>
|
|
|
494 |
<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>
|
|
|
495 |
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>
|
|
|
496 |
append <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span>
|
|
|
497 |
padding <span class="sy0">=</span> <span class="nu0">30</span><span class="sy0">,</span>
|
|
|
498 |
xy <span class="sy0">=</span> drag.<span class="me1">mouseXY</span><span class="sy0">,</span>
|
|
|
499 |
region <span class="sy0">=</span> drop.<span class="me1">region</span><span class="sy0">,</span>
|
|
|
500 |
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>
|
|
|
501 |
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>
|
|
|
502 |
dir <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span>
|
|
|
503 |
dir1 <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span>
|
|
|
504 |
dir2 <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span>
|
|
|
505 |
|
|
|
506 |
<span class="co1">//We could do something a little more fancy here, but we won't ;)</span>
|
|
|
507 |
<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>
|
|
|
508 |
dir1 <span class="sy0">=</span> <span class="st0">'top'</span><span class="sy0">;</span>
|
|
|
509 |
<span class="br0">}</span>
|
|
|
510 |
<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>
|
|
|
511 |
dir1 <span class="sy0">=</span> <span class="st0">'bottom'</span><span class="sy0">;</span>
|
|
|
512 |
<span class="br0">}</span>
|
|
|
513 |
<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>
|
|
|
514 |
dir2 <span class="sy0">=</span> <span class="st0">'right'</span><span class="sy0">;</span>
|
|
|
515 |
<span class="br0">}</span>
|
|
|
516 |
<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>
|
|
|
517 |
dir2 <span class="sy0">=</span> <span class="st0">'left'</span><span class="sy0">;</span>
|
|
|
518 |
<span class="br0">}</span>
|
|
|
519 |
dir <span class="sy0">=</span> dir2<span class="sy0">;</span>
|
|
|
520 |
<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>
|
|
|
521 |
dir <span class="sy0">=</span> dir1<span class="sy0">;</span>
|
|
|
522 |
<span class="br0">}</span>
|
|
|
523 |
<span class="kw1">switch</span> <span class="br0">(</span>dir<span class="br0">)</span> <span class="br0">{</span>
|
|
|
524 |
<span class="kw1">case</span> <span class="st0">'top'</span><span class="sy0">:</span>
|
|
|
525 |
<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>
|
|
|
526 |
<span class="kw1">if</span> <span class="br0">(</span>next<span class="br0">)</span> <span class="br0">{</span>
|
|
|
527 |
dropNode <span class="sy0">=</span> next<span class="sy0">;</span>
|
|
|
528 |
<span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span>
|
|
|
529 |
append <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span>
|
|
|
530 |
<span class="br0">}</span>
|
|
|
531 |
<span class="kw1">break</span><span class="sy0">;</span>
|
|
|
532 |
<span class="kw1">case</span> <span class="st0">'bottom'</span><span class="sy0">:</span>
|
|
|
533 |
<span class="kw1">break</span><span class="sy0">;</span>
|
|
|
534 |
<span class="kw1">case</span> <span class="st0">'right'</span><span class="sy0">:</span>
|
|
|
535 |
<span class="kw1">case</span> <span class="st0">'left'</span><span class="sy0">:</span>
|
|
|
536 |
<span class="kw1">break</span><span class="sy0">;</span>
|
|
|
537 |
<span class="br0">}</span>
|
|
|
538 |
|
|
|
539 |
|
|
|
540 |
<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>
|
|
|
541 |
<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>
|
|
|
542 |
<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>append<span class="br0">)</span> <span class="br0">{</span>
|
|
|
543 |
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>
|
|
|
544 |
<span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span>
|
|
|
545 |
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>
|
|
|
546 |
<span class="br0">}</span>
|
|
|
547 |
<span class="br0">}</span>
|
|
|
548 |
<span class="br0">}</span>
|
|
|
549 |
<span class="co1">//Resync all the targets because something moved..</span>
|
|
|
550 |
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>
|
|
|
551 |
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>
|
|
|
552 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
553 |
<span class="br0">}</span>
|
|
|
554 |
<span class="br0">}</span><span class="sy0">;</span>
|
|
|
555 |
|
|
|
556 |
<span class="coMULTI">/*
|
|
|
557 |
Handle the drop:enter event
|
|
|
558 |
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.
|
|
|
559 |
Here is where we move the module around in the DOM.
|
|
|
560 |
*/</span>
|
|
|
561 |
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>
|
|
|
562 |
<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>
|
|
|
563 |
<span class="kw1">return</span> <span class="kw2">false</span><span class="sy0">;</span>
|
|
|
564 |
<span class="br0">}</span>
|
|
|
565 |
<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>
|
|
|
566 |
<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>
|
|
|
567 |
_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>
|
|
|
568 |
<span class="br0">}</span>
|
|
|
569 |
<span class="br0">}</span>
|
|
|
570 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
571 |
|
|
|
572 |
<span class="co1">//Handle the drag:drag event</span>
|
|
|
573 |
<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>
|
|
|
574 |
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>
|
|
|
575 |
<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>
|
|
|
576 |
<span class="kw1">if</span> <span class="br0">(</span>y <span class="sy0"><</span> lastY<span class="br0">)</span> <span class="br0">{</span>
|
|
|
577 |
goingUp <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span>
|
|
|
578 |
<span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span>
|
|
|
579 |
goingUp <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span>
|
|
|
580 |
<span class="br0">}</span>
|
|
|
581 |
lastY <span class="sy0">=</span> y<span class="sy0">;</span>
|
|
|
582 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
583 |
|
|
|
584 |
<span class="coMULTI">/*
|
|
|
585 |
Handle the drop:hit event
|
|
|
586 |
Now that we have a drop on the target, we check to see if the drop was not on a LI.
|
|
|
587 |
This means they dropped on the empty space of the UL.
|
|
|
588 |
*/</span>
|
|
|
589 |
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>
|
|
|
590 |
<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>
|
|
|
591 |
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>
|
|
|
592 |
|
|
|
593 |
<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>
|
|
|
594 |
<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>
|
|
|
595 |
drop.<span class="me1">appendChild</span><span class="br0">(</span>drag<span class="br0">)</span><span class="sy0">;</span>
|
|
|
596 |
<span class="br0">}</span>
|
|
|
597 |
<span class="br0">}</span>
|
|
|
598 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
599 |
|
|
|
600 |
<span class="co1">//Handle the drag:start event</span>
|
|
|
601 |
<span class="co1">//Use some CSS here to make our dragging better looking.</span>
|
|
|
602 |
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>
|
|
|
603 |
<span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">;</span>
|
|
|
604 |
<span class="kw1">if</span> <span class="br0">(</span>drag.<span class="me1">target</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
605 |
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>
|
|
|
606 |
<span class="br0">}</span>
|
|
|
607 |
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>
|
|
|
608 |
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>
|
|
|
609 |
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>
|
|
|
610 |
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>
|
|
|
611 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
612 |
|
|
|
613 |
<span class="co1">//Handle the drag:end event</span>
|
|
|
614 |
<span class="co1">//Replace some of the styles we changed on start drag.</span>
|
|
|
615 |
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>
|
|
|
616 |
<span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">;</span>
|
|
|
617 |
<span class="kw1">if</span> <span class="br0">(</span>drag.<span class="me1">target</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
618 |
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>
|
|
|
619 |
<span class="br0">}</span>
|
|
|
620 |
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>
|
|
|
621 |
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>
|
|
|
622 |
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>
|
|
|
623 |
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>
|
|
|
624 |
_setCookies<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
625 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
626 |
|
|
|
627 |
|
|
|
628 |
<span class="co1">//Handle going over a UL, for empty lists</span>
|
|
|
629 |
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>
|
|
|
630 |
<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>
|
|
|
631 |
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>
|
|
|
632 |
|
|
|
633 |
<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>
|
|
|
634 |
<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>
|
|
|
635 |
drop.<span class="me1">appendChild</span><span class="br0">(</span>drag<span class="br0">)</span><span class="sy0">;</span>
|
|
|
636 |
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>
|
|
|
637 |
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>
|
|
|
638 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
639 |
<span class="br0">}</span>
|
|
|
640 |
<span class="br0">}</span>
|
|
|
641 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
642 |
|
|
|
643 |
<span class="co1">//Create simple targets for the main lists..</span>
|
|
|
644 |
<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>
|
|
|
645 |
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>
|
|
|
646 |
<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>
|
|
|
647 |
node<span class="sy0">:</span> v<span class="sy0">,</span>
|
|
|
648 |
padding<span class="sy0">:</span> <span class="st0">'20 0'</span><span class="sy0">,</span>
|
|
|
649 |
bubbles<span class="sy0">:</span> Y.<span class="me1">Portal</span>
|
|
|
650 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
651 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
652 |
|
|
|
653 |
|
|
|
654 |
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>
|
|
|
655 |
<span class="co1">//Get the cookie data</span>
|
|
|
656 |
<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>
|
|
|
657 |
<span class="kw1">if</span> <span class="br0">(</span>cookie<span class="br0">)</span> <span class="br0">{</span>
|
|
|
658 |
<span class="co1">//JSON parse the stored data</span>
|
|
|
659 |
<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>
|
|
|
660 |
|
|
|
661 |
<span class="co1">//Walk the data</span>
|
|
|
662 |
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>
|
|
|
663 |
<span class="co1">//Get the node for the list</span>
|
|
|
664 |
<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>
|
|
|
665 |
<span class="co1">//Walk the items in this list</span>
|
|
|
666 |
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>
|
|
|
667 |
<span class="co1">//Get the drag for it</span>
|
|
|
668 |
<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>
|
|
|
669 |
<span class="co1">//Create the module</span>
|
|
|
670 |
<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>
|
|
|
671 |
<span class="kw1">if</span> <span class="br0">(</span>v2.<span class="me1">min</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
672 |
<span class="co1">//If it's minned add some CSS</span>
|
|
|
673 |
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>
|
|
|
674 |
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>
|
|
|
675 |
<span class="br0">}</span>
|
|
|
676 |
<span class="co1">//Add it to the list</span>
|
|
|
677 |
list.<span class="me1">appendChild</span><span class="br0">(</span>mod<span class="br0">)</span><span class="sy0">;</span>
|
|
|
678 |
<span class="co1">//Set the drag listeners</span>
|
|
|
679 |
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>
|
|
|
680 |
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>
|
|
|
681 |
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>
|
|
|
682 |
drag.<span class="me1">detachAll</span><span class="br0">(</span><span class="st0">'drag:start'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
683 |
drag.<span class="me1">detachAll</span><span class="br0">(</span><span class="st0">'drag:end'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
684 |
drag.<span class="me1">detachAll</span><span class="br0">(</span><span class="st0">'drag:drophit'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
685 |
drag._unprep<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
686 |
<span class="co1">//Setup the new Drag listeners</span>
|
|
|
687 |
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>
|
|
|
688 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
689 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
690 |
<span class="br0">}</span>
|
|
|
691 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
692 |
|
|
|
693 |
<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
|
|
|
694 |
YUI(yuiConfig).use('dd', 'anim', 'io', 'cookie', 'json', function(Y) {
|
|
|
695 |
//Make this an Event Target so we can bubble to it
|
|
|
696 |
var Portal = function() {
|
|
|
697 |
Portal.superclass.constructor.apply(this, arguments);
|
|
|
698 |
};
|
|
|
699 |
Portal.NAME = 'portal';
|
|
|
700 |
Y.extend(Portal, Y.Base);
|
|
|
701 |
//This is our new bubble target..
|
|
|
702 |
Y.Portal = new Portal();
|
|
|
703 |
|
|
|
704 |
|
|
|
705 |
//Setup some private variables..
|
|
|
706 |
var goingUp = false, lastY = 0, trans = {};
|
|
|
707 |
|
|
|
708 |
//The list of feeds that we are going to use
|
|
|
709 |
var feeds = {
|
|
|
710 |
'ynews': {
|
|
|
711 |
id: 'ynews',
|
|
|
712 |
title: 'Yahoo! US News',
|
|
|
713 |
url: 'rss.news.yahoo.com/rss/us'
|
|
|
714 |
},
|
|
|
715 |
'yui': {
|
|
|
716 |
id: 'yui',
|
|
|
717 |
title: 'YUI Blog',
|
|
|
718 |
url: 'feeds.yuiblog.com/YahooUserInterfaceBlog'
|
|
|
719 |
},
|
|
|
720 |
'slashdot': {
|
|
|
721 |
id: 'slashdot',
|
|
|
722 |
title: 'Slashdot',
|
|
|
723 |
url: 'rss.slashdot.org/Slashdot/slashdot'
|
|
|
724 |
},
|
|
|
725 |
'ajaxian': {
|
|
|
726 |
id: 'ajaxian',
|
|
|
727 |
title: 'Ajaxian',
|
|
|
728 |
url: 'feeds.feedburner.com/ajaxian'
|
|
|
729 |
},
|
|
|
730 |
'daringfireball': {
|
|
|
731 |
id: 'daringfireball',
|
|
|
732 |
title: 'Daring Fireball',
|
|
|
733 |
url: 'daringfireball.net/index.xml'
|
|
|
734 |
},
|
|
|
735 |
'wiredtech': {
|
|
|
736 |
id: 'wiredtech',
|
|
|
737 |
title: 'Wire: Tech Biz',
|
|
|
738 |
url: 'www.wired.com/rss/techbiz.xml'
|
|
|
739 |
},
|
|
|
740 |
'techcrunch': {
|
|
|
741 |
id: 'techcrunch',
|
|
|
742 |
title: 'TechCrunch',
|
|
|
743 |
url: 'feedproxy.google.com/Techcrunch'
|
|
|
744 |
},
|
|
|
745 |
'smashing': {
|
|
|
746 |
id: 'smashing',
|
|
|
747 |
title: 'Smashing Magazine',
|
|
|
748 |
url: 'www.smashingmagazine.com/wp-rss.php'
|
|
|
749 |
}
|
|
|
750 |
};
|
|
|
751 |
|
|
|
752 |
//Setup the config for IO to use flash
|
|
|
753 |
Y.io.transport({
|
|
|
754 |
id: 'flash',
|
|
|
755 |
yid: Y.id,
|
|
|
756 |
src: buildDir + 'io/io.swf?stamp=' + (new Date()).getTime()
|
|
|
757 |
});
|
|
|
758 |
|
|
|
759 |
//Simple method for stopping event propagation
|
|
|
760 |
//Using this so we can detach it later
|
|
|
761 |
var stopper = function(e) {
|
|
|
762 |
e.stopPropagation();
|
|
|
763 |
};
|
|
|
764 |
|
|
|
765 |
//Get the order, placement and minned state of the modules and save them to a cookie
|
|
|
766 |
var _setCookies = function() {
|
|
|
767 |
var dds = Y.DD.DDM._drags;
|
|
|
768 |
var list = {};
|
|
|
769 |
//Walk all the drag elements
|
|
|
770 |
Y.each(dds, function(v, k) {
|
|
|
771 |
var par = v.get('node').get('parentNode');
|
|
|
772 |
//Find all the lists with drag items in them
|
|
|
773 |
if (par.test('ul.list')) {
|
|
|
774 |
if (!list[par.get('id')]) {
|
|
|
775 |
list[par.get('id')] = [];
|
|
|
776 |
}
|
|
|
777 |
}
|
|
|
778 |
});
|
|
|
779 |
//Walk the list
|
|
|
780 |
Y.each(list, function(v, k) {
|
|
|
781 |
//Get all the li's in the list
|
|
|
782 |
var lis = Y.all('#' + k + ' li.item');
|
|
|
783 |
lis.each(function(v2, k2) {
|
|
|
784 |
//Get the drag instance for the list item
|
|
|
785 |
var dd = Y.DD.DDM.getDrag('#' + v2.get('id'));
|
|
|
786 |
//Get the mod node
|
|
|
787 |
var mod = dd.get('node').query('div.mod');
|
|
|
788 |
//Is it minimized
|
|
|
789 |
var min = (mod.hasClass('minned')) ? true : false;
|
|
|
790 |
//Setup the cookie data
|
|
|
791 |
list[k][list[k].length] = { id: dd.get('data').id, min: min };
|
|
|
792 |
});
|
|
|
793 |
});
|
|
|
794 |
//JSON encode the cookie data
|
|
|
795 |
var cookie = Y.JSON.stringify(list);
|
|
|
796 |
//Set the sub-cookie
|
|
|
797 |
Y.Cookie.setSub('yui', 'portal', cookie);
|
|
|
798 |
};
|
|
|
799 |
|
|
|
800 |
//Helper method for creating the feed DD on the left
|
|
|
801 |
var _createFeedDD = function(node, data) {
|
|
|
802 |
//Create the DD instance
|
|
|
803 |
var dd = new Y.DD.Drag({
|
|
|
804 |
node: node,
|
|
|
805 |
data: data,
|
|
|
806 |
bubbles: Y.Portal
|
|
|
807 |
}).plug(Y.Plugin.DDProxy, {
|
|
|
808 |
moveOnEnd: false,
|
|
|
809 |
borderStyle: 'none'
|
|
|
810 |
});
|
|
|
811 |
//Setup some stopper events
|
|
|
812 |
dd.on('drag:start', _handleStart);
|
|
|
813 |
dd.on('drag:end', stopper);
|
|
|
814 |
dd.on('drag:drophit', stopper);
|
|
|
815 |
};
|
|
|
816 |
|
|
|
817 |
//Handle the node:click event
|
|
|
818 |
/* {{{ */
|
|
|
819 |
var _nodeClick = function(e) {
|
|
|
820 |
//Is the target an href?
|
|
|
821 |
if (e.target.test('a')) {
|
|
|
822 |
var a = e.target, anim = null, div = a.get('parentNode').get('parentNode');
|
|
|
823 |
//Did they click on the min button
|
|
|
824 |
if (a.hasClass('min')) {
|
|
|
825 |
//Get some node references
|
|
|
826 |
var ul = div.query('ul'),
|
|
|
827 |
h2 = div.query('h2'),
|
|
|
828 |
h = h2.get('offsetHeight'),
|
|
|
829 |
hUL = ul.get('offsetHeight'),
|
|
|
830 |
inner = div.query('div.inner');
|
|
|
831 |
|
|
|
832 |
//Create an anim instance on this node.
|
|
|
833 |
anim = new Y.Anim({
|
|
|
834 |
node: inner
|
|
|
835 |
});
|
|
|
836 |
//Is it expanded?
|
|
|
837 |
if (!div.hasClass('minned')) {
|
|
|
838 |
//Set the vars for collapsing it
|
|
|
839 |
anim.setAttrs({
|
|
|
840 |
to: {
|
|
|
841 |
height: 0
|
|
|
842 |
},
|
|
|
843 |
duration: '.25',
|
|
|
844 |
easing: Y.Easing.easeOut,
|
|
|
845 |
iteration: 1
|
|
|
846 |
});
|
|
|
847 |
//On the end, toggle the minned class
|
|
|
848 |
//Then set the cookies for state
|
|
|
849 |
anim.on('end', function() {
|
|
|
850 |
div.toggleClass('minned');
|
|
|
851 |
_setCookies();
|
|
|
852 |
});
|
|
|
853 |
} else {
|
|
|
854 |
//Set the vars for expanding it
|
|
|
855 |
anim.setAttrs({
|
|
|
856 |
to: {
|
|
|
857 |
height: (hUL)
|
|
|
858 |
},
|
|
|
859 |
duration: '.25',
|
|
|
860 |
easing: Y.Easing.easeOut,
|
|
|
861 |
iteration: 1
|
|
|
862 |
});
|
|
|
863 |
//Toggle the minned class
|
|
|
864 |
//Then set the cookies for state
|
|
|
865 |
div.toggleClass('minned');
|
|
|
866 |
_setCookies();
|
|
|
867 |
}
|
|
|
868 |
//Run the animation
|
|
|
869 |
anim.run();
|
|
|
870 |
|
|
|
871 |
}
|
|
|
872 |
//Was close clicked?
|
|
|
873 |
if (a.hasClass('close')) {
|
|
|
874 |
//Get some Node references..
|
|
|
875 |
var li = div.get('parentNode'),
|
|
|
876 |
id = li.get('id'),
|
|
|
877 |
dd = Y.DD.DDM.getDrag('#' + id),
|
|
|
878 |
data = dd.get('data'),
|
|
|
879 |
item = Y.Node.get('#' + data.id);
|
|
|
880 |
|
|
|
881 |
//Destroy the DD instance.
|
|
|
882 |
dd.destroy();
|
|
|
883 |
//Setup the animation for making it disappear
|
|
|
884 |
anim = new Y.Anim({
|
|
|
885 |
node: div,
|
|
|
886 |
to: {
|
|
|
887 |
opacity: 0
|
|
|
888 |
},
|
|
|
889 |
duration: '.25',
|
|
|
890 |
easing: Y.Easing.easeOut
|
|
|
891 |
});
|
|
|
892 |
anim.on('end', function() {
|
|
|
893 |
//On end of the first anim, setup another to make it collapse
|
|
|
894 |
var anim = new Y.Anim({
|
|
|
895 |
node: div,
|
|
|
896 |
to: {
|
|
|
897 |
height: 0
|
|
|
898 |
},
|
|
|
899 |
duration: '.25',
|
|
|
900 |
easing: Y.Easing.easeOut
|
|
|
901 |
});
|
|
|
902 |
anim.on('end', function() {
|
|
|
903 |
//Remove it from the document
|
|
|
904 |
li.get('parentNode').removeChild(li);
|
|
|
905 |
item.removeClass('disabled');
|
|
|
906 |
//Setup a drag instance on the feed list
|
|
|
907 |
_createFeedDD(item, data);
|
|
|
908 |
_setCookies();
|
|
|
909 |
|
|
|
910 |
});
|
|
|
911 |
//Run the animation
|
|
|
912 |
anim.run();
|
|
|
913 |
});
|
|
|
914 |
//Run the animation
|
|
|
915 |
anim.run();
|
|
|
916 |
}
|
|
|
917 |
//Stop the click
|
|
|
918 |
e.halt();
|
|
|
919 |
}
|
|
|
920 |
};
|
|
|
921 |
/* }}} */
|
|
|
922 |
|
|
|
923 |
//This creates the module, either from a drag event or from the cookie load
|
|
|
924 |
var setupModDD = function(mod, data, dd) {
|
|
|
925 |
var node = mod;
|
|
|
926 |
//Listen for the click so we can react to the buttons
|
|
|
927 |
node.query('h2').on('click', _nodeClick);
|
|
|
928 |
|
|
|
929 |
//Remove the event's on the original drag instance
|
|
|
930 |
dd.detachAll('drag:start');
|
|
|
931 |
dd.detachAll('drag:end');
|
|
|
932 |
dd.detachAll('drag:drophit');
|
|
|
933 |
|
|
|
934 |
//It's a target
|
|
|
935 |
dd.set('target', true);
|
|
|
936 |
//Setup the handles
|
|
|
937 |
dd.addHandle('h2').addInvalid('a');
|
|
|
938 |
//Remove the mouse listeners on this node
|
|
|
939 |
dd._unprep();
|
|
|
940 |
//Update a new node
|
|
|
941 |
dd.set('node', mod);
|
|
|
942 |
//Reset the mouse handlers
|
|
|
943 |
dd._prep();
|
|
|
944 |
|
|
|
945 |
//The Yahoo! Pipes URL
|
|
|
946 |
var url = 'http:/'+'/pipes.yahooapis.com/pipes/pipe.run?_id=6b7b2c6a32f5a12e7259c36967052387&_render=json&url=http:/'+'/' + data.url;
|
|
|
947 |
//Start the XDR request
|
|
|
948 |
var id = Y.io(url, {
|
|
|
949 |
method: 'GET',
|
|
|
950 |
xdr: {
|
|
|
951 |
use:'flash'
|
|
|
952 |
},
|
|
|
953 |
//XDR Listeners
|
|
|
954 |
on: {
|
|
|
955 |
success: function(id, data) {
|
|
|
956 |
//On success get the feed data
|
|
|
957 |
var d = feeds[trans[id]],
|
|
|
958 |
//Node reference
|
|
|
959 |
inner = d.mod.query('div.inner'),
|
|
|
960 |
//Parse the JSON data
|
|
|
961 |
oRSS = Y.JSON.parse(data.responseText),
|
|
|
962 |
html = '';
|
|
|
963 |
|
|
|
964 |
//Did we get data?
|
|
|
965 |
if (oRSS && oRSS.count) {
|
|
|
966 |
//Walk the list and create the news list
|
|
|
967 |
Y.each(oRSS.value.items, function(v, k) {
|
|
|
968 |
if (k < 5) {
|
|
|
969 |
html += '<li><a href="' + v.link + '" target="_blank">' + v.title + '</a>';
|
|
|
970 |
}
|
|
|
971 |
});
|
|
|
972 |
}
|
|
|
973 |
//Set the innerHTML of the module
|
|
|
974 |
inner.set('innerHTML', '<ul>' + html + '</ul>');
|
|
|
975 |
if (Y.DD.DDM.activeDrag) {
|
|
|
976 |
//If we are still dragging, update the proxy element too..
|
|
|
977 |
var proxy_inner = Y.DD.DDM.activeDrag.get('dragNode').query('div.inner');
|
|
|
978 |
proxy_inner.set('innerHTML', '<ul>' + html + '</ul>');
|
|
|
979 |
|
|
|
980 |
}
|
|
|
981 |
},
|
|
|
982 |
failure: function(id, data) {
|
|
|
983 |
//Something failed..
|
|
|
984 |
alert('Feed failed to load..' + id + ' :: ' + data);
|
|
|
985 |
}
|
|
|
986 |
}
|
|
|
987 |
});
|
|
|
988 |
//Keep track of the transaction
|
|
|
989 |
feeds[data.id].trans = id;
|
|
|
990 |
feeds[data.id].mod = mod;
|
|
|
991 |
trans[id.id] = data.id;
|
|
|
992 |
};
|
|
|
993 |
|
|
|
994 |
|
|
|
995 |
//Helper method to create the markup for the module..
|
|
|
996 |
var createMod = function(feed) {
|
|
|
997 |
var str = '<li class="item">' +
|
|
|
998 |
'<div class="mod">' +
|
|
|
999 |
'<h2><strong>' + feed.title + '</strong> <a title="minimize module" class="min" href="#"> </a>' +
|
|
|
1000 |
'<a title="close module" class="close" href="#"></a></h2>' +
|
|
|
1001 |
'<div class="inner">' +
|
|
|
1002 |
' <div class="loading">Feed loading, please wait..</div>' +
|
|
|
1003 |
'</div>' +
|
|
|
1004 |
'</div>' +
|
|
|
1005 |
'</li>';
|
|
|
1006 |
return Y.Node.create(str);
|
|
|
1007 |
};
|
|
|
1008 |
|
|
|
1009 |
//Handle the start Drag event on the left side
|
|
|
1010 |
var _handleStart = function(e) {
|
|
|
1011 |
//Stop the event
|
|
|
1012 |
stopper(e);
|
|
|
1013 |
//Some private vars
|
|
|
1014 |
var drag = this,
|
|
|
1015 |
list3 = Y.Node.get('#list1'),
|
|
|
1016 |
mod = createMod(drag.get('data'));
|
|
|
1017 |
|
|
|
1018 |
//Add it to the first list
|
|
|
1019 |
list3.appendChild(mod);
|
|
|
1020 |
//Set the item on the left column disabled.
|
|
|
1021 |
drag.get('node').addClass('disabled');
|
|
|
1022 |
//Set the node on the instance
|
|
|
1023 |
drag.set('node', mod);
|
|
|
1024 |
//Add some styles to the proxy node.
|
|
|
1025 |
drag.get('dragNode').setStyles({
|
|
|
1026 |
opacity: '.5',
|
|
|
1027 |
borderStyle: 'none',
|
|
|
1028 |
width: '320px',
|
|
|
1029 |
height: '61px'
|
|
|
1030 |
});
|
|
|
1031 |
//Update the innerHTML of the proxy with the innerHTML of the module
|
|
|
1032 |
drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
|
|
|
1033 |
//set the inner module to hidden
|
|
|
1034 |
drag.get('node').query('div.mod').setStyle('visibility', 'hidden');
|
|
|
1035 |
//add a class for styling
|
|
|
1036 |
drag.get('node').addClass('moving');
|
|
|
1037 |
//Setup the DD instance
|
|
|
1038 |
setupModDD(mod, drag.get('data'), drag);
|
|
|
1039 |
|
|
|
1040 |
//Remove the listener
|
|
|
1041 |
this.detach('drag:start', _handleStart);
|
|
|
1042 |
};
|
|
|
1043 |
|
|
|
1044 |
//Walk through the feeds list and create the list on the left
|
|
|
1045 |
var feedList = Y.Node.get('#feeds ul');
|
|
|
1046 |
Y.each(feeds, function(v, k) {
|
|
|
1047 |
var li = Y.Node.create('<li id="' + k + '">' + v.title + '</li>');
|
|
|
1048 |
feedList.appendChild(li);
|
|
|
1049 |
//Create the DD instance for this item
|
|
|
1050 |
_createFeedDD(li, v);
|
|
|
1051 |
});
|
|
|
1052 |
|
|
|
1053 |
//This does the calculations for when and where to move a module
|
|
|
1054 |
var _moveMod = function(drag, drop) {
|
|
|
1055 |
if (drag.get('node').hasClass('item')) {
|
|
|
1056 |
var dragNode = drag.get('node'),
|
|
|
1057 |
dropNode = drop.get('node'),
|
|
|
1058 |
append = false,
|
|
|
1059 |
padding = 30,
|
|
|
1060 |
xy = drag.mouseXY,
|
|
|
1061 |
region = drop.region,
|
|
|
1062 |
middle1 = region.top + ((region.bottom - region.top) / 2),
|
|
|
1063 |
middle2 = region.left + ((region.right - region.left) / 2),
|
|
|
1064 |
dir = false,
|
|
|
1065 |
dir1 = false,
|
|
|
1066 |
dir2 = false;
|
|
|
1067 |
|
|
|
1068 |
//We could do something a little more fancy here, but we won't ;)
|
|
|
1069 |
if ((xy[1] < (region.top + padding))) {
|
|
|
1070 |
dir1 = 'top';
|
|
|
1071 |
}
|
|
|
1072 |
if ((region.bottom - padding) < xy[1]) {
|
|
|
1073 |
dir1 = 'bottom';
|
|
|
1074 |
}
|
|
|
1075 |
if ((region.right - padding) < xy[0]) {
|
|
|
1076 |
dir2 = 'right';
|
|
|
1077 |
}
|
|
|
1078 |
if ((xy[0] < (region.left + padding))) {
|
|
|
1079 |
dir2 = 'left';
|
|
|
1080 |
}
|
|
|
1081 |
dir = dir2;
|
|
|
1082 |
if (dir2 === false) {
|
|
|
1083 |
dir = dir1;
|
|
|
1084 |
}
|
|
|
1085 |
switch (dir) {
|
|
|
1086 |
case 'top':
|
|
|
1087 |
var next = dropNode.get('nextSibling');
|
|
|
1088 |
if (next) {
|
|
|
1089 |
dropNode = next;
|
|
|
1090 |
} else {
|
|
|
1091 |
append = true;
|
|
|
1092 |
}
|
|
|
1093 |
break;
|
|
|
1094 |
case 'bottom':
|
|
|
1095 |
break;
|
|
|
1096 |
case 'right':
|
|
|
1097 |
case 'left':
|
|
|
1098 |
break;
|
|
|
1099 |
}
|
|
|
1100 |
|
|
|
1101 |
|
|
|
1102 |
if ((dropNode !== null) && dir) {
|
|
|
1103 |
if (dropNode && dropNode.get('parentNode')) {
|
|
|
1104 |
if (!append) {
|
|
|
1105 |
dropNode.get('parentNode').insertBefore(dragNode, dropNode);
|
|
|
1106 |
} else {
|
|
|
1107 |
dropNode.get('parentNode').appendChild(dragNode);
|
|
|
1108 |
}
|
|
|
1109 |
}
|
|
|
1110 |
}
|
|
|
1111 |
//Resync all the targets because something moved..
|
|
|
1112 |
Y.Lang.later(50, Y, function() {
|
|
|
1113 |
Y.DD.DDM.syncActiveShims(true);
|
|
|
1114 |
});
|
|
|
1115 |
}
|
|
|
1116 |
};
|
|
|
1117 |
|
|
|
1118 |
/*
|
|
|
1119 |
Handle the drop:enter event
|
|
|
1120 |
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.
|
|
|
1121 |
Here is where we move the module around in the DOM.
|
|
|
1122 |
*/
|
|
|
1123 |
Y.Portal.on('drop:enter', function(e) {
|
|
|
1124 |
if (!e.drag || !e.drop || (e.drop !== e.target)) {
|
|
|
1125 |
return false;
|
|
|
1126 |
}
|
|
|
1127 |
if (e.drop.get('node').get('tagName').toLowerCase() === 'li') {
|
|
|
1128 |
if (e.drop.get('node').hasClass('item')) {
|
|
|
1129 |
_moveMod(e.drag, e.drop);
|
|
|
1130 |
}
|
|
|
1131 |
}
|
|
|
1132 |
});
|
|
|
1133 |
|
|
|
1134 |
//Handle the drag:drag event
|
|
|
1135 |
//On drag we need to know if they are moved up or down so we can place the module in the proper DOM location.
|
|
|
1136 |
Y.Portal.on('drag:drag', function(e) {
|
|
|
1137 |
var y = e.target.mouseXY[1];
|
|
|
1138 |
if (y < lastY) {
|
|
|
1139 |
goingUp = true;
|
|
|
1140 |
} else {
|
|
|
1141 |
goingUp = false;
|
|
|
1142 |
}
|
|
|
1143 |
lastY = y;
|
|
|
1144 |
});
|
|
|
1145 |
|
|
|
1146 |
/*
|
|
|
1147 |
Handle the drop:hit event
|
|
|
1148 |
Now that we have a drop on the target, we check to see if the drop was not on a LI.
|
|
|
1149 |
This means they dropped on the empty space of the UL.
|
|
|
1150 |
*/
|
|
|
1151 |
Y.Portal.on('drag:drophit', function(e) {
|
|
|
1152 |
var drop = e.drop.get('node'),
|
|
|
1153 |
drag = e.drag.get('node');
|
|
|
1154 |
|
|
|
1155 |
if (drop.get('tagName').toLowerCase() !== 'li') {
|
|
|
1156 |
if (!drop.contains(drag)) {
|
|
|
1157 |
drop.appendChild(drag);
|
|
|
1158 |
}
|
|
|
1159 |
}
|
|
|
1160 |
});
|
|
|
1161 |
|
|
|
1162 |
//Handle the drag:start event
|
|
|
1163 |
//Use some CSS here to make our dragging better looking.
|
|
|
1164 |
Y.Portal.on('drag:start', function(e) {
|
|
|
1165 |
var drag = e.target;
|
|
|
1166 |
if (drag.target) {
|
|
|
1167 |
drag.target.set('locked', true);
|
|
|
1168 |
}
|
|
|
1169 |
drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
|
|
|
1170 |
drag.get('dragNode').setStyle('opacity','.5');
|
|
|
1171 |
drag.get('node').query('div.mod').setStyle('visibility', 'hidden');
|
|
|
1172 |
drag.get('node').addClass('moving');
|
|
|
1173 |
});
|
|
|
1174 |
|
|
|
1175 |
//Handle the drag:end event
|
|
|
1176 |
//Replace some of the styles we changed on start drag.
|
|
|
1177 |
Y.Portal.on('drag:end', function(e) {
|
|
|
1178 |
var drag = e.target;
|
|
|
1179 |
if (drag.target) {
|
|
|
1180 |
drag.target.set('locked', false);
|
|
|
1181 |
}
|
|
|
1182 |
drag.get('node').setStyle('visibility', '');
|
|
|
1183 |
drag.get('node').query('div.mod').setStyle('visibility', '');
|
|
|
1184 |
drag.get('node').removeClass('moving');
|
|
|
1185 |
drag.get('dragNode').set('innerHTML', '');
|
|
|
1186 |
_setCookies();
|
|
|
1187 |
});
|
|
|
1188 |
|
|
|
1189 |
|
|
|
1190 |
//Handle going over a UL, for empty lists
|
|
|
1191 |
Y.Portal.on('drop:over', function(e) {
|
|
|
1192 |
var drop = e.drop.get('node'),
|
|
|
1193 |
drag = e.drag.get('node');
|
|
|
1194 |
|
|
|
1195 |
if (drop.get('tagName').toLowerCase() !== 'li') {
|
|
|
1196 |
if (!drop.contains(drag)) {
|
|
|
1197 |
drop.appendChild(drag);
|
|
|
1198 |
Y.Lang.later(50, Y, function() {
|
|
|
1199 |
Y.DD.DDM.syncActiveShims(true);
|
|
|
1200 |
});
|
|
|
1201 |
}
|
|
|
1202 |
}
|
|
|
1203 |
});
|
|
|
1204 |
|
|
|
1205 |
//Create simple targets for the main lists..
|
|
|
1206 |
var uls = Y.all('#play ul.list');
|
|
|
1207 |
uls.each(function(v, k) {
|
|
|
1208 |
var tar = new Y.DD.Drop({
|
|
|
1209 |
node: v,
|
|
|
1210 |
padding: '20 0',
|
|
|
1211 |
bubbles: Y.Portal
|
|
|
1212 |
});
|
|
|
1213 |
});
|
|
|
1214 |
|
|
|
1215 |
|
|
|
1216 |
Y.on('io:xdrReady', function() {
|
|
|
1217 |
//Get the cookie data
|
|
|
1218 |
var cookie = Y.Cookie.getSub('yui', 'portal');
|
|
|
1219 |
if (cookie) {
|
|
|
1220 |
//JSON parse the stored data
|
|
|
1221 |
var obj = Y.JSON.parse(cookie);
|
|
|
1222 |
|
|
|
1223 |
//Walk the data
|
|
|
1224 |
Y.each(obj, function(v, k) {
|
|
|
1225 |
//Get the node for the list
|
|
|
1226 |
var list = Y.Node.get('#' + k);
|
|
|
1227 |
//Walk the items in this list
|
|
|
1228 |
Y.each(v, function(v2, k2) {
|
|
|
1229 |
//Get the drag for it
|
|
|
1230 |
var drag = Y.DD.DDM.getDrag('#' + v2.id);
|
|
|
1231 |
//Create the module
|
|
|
1232 |
var mod = createMod(drag.get('data'));
|
|
|
1233 |
if (v2.min) {
|
|
|
1234 |
//If it's minned add some CSS
|
|
|
1235 |
mod.query('div.mod').addClass('minned');
|
|
|
1236 |
mod.query('div.inner').setStyle('height', '0px');
|
|
|
1237 |
}
|
|
|
1238 |
//Add it to the list
|
|
|
1239 |
list.appendChild(mod);
|
|
|
1240 |
//Set the drag listeners
|
|
|
1241 |
drag.get('node').addClass('disabled');
|
|
|
1242 |
drag.set('node', mod);
|
|
|
1243 |
drag.set('dragNode', Y.DD.DDM._proxy);
|
|
|
1244 |
drag.detachAll('drag:start');
|
|
|
1245 |
drag.detachAll('drag:end');
|
|
|
1246 |
drag.detachAll('drag:drophit');
|
|
|
1247 |
drag._unprep();
|
|
|
1248 |
//Setup the new Drag listeners
|
|
|
1249 |
setupModDD(mod, drag.get('data'), drag);
|
|
|
1250 |
});
|
|
|
1251 |
});
|
|
|
1252 |
}
|
|
|
1253 |
});
|
|
|
1254 |
|
|
|
1255 |
});</textarea></div> </div>
|
|
|
1256 |
<div class="yui-u sidebar">
|
|
|
1257 |
|
|
|
1258 |
|
|
|
1259 |
<div id="examples" class="mod box4">
|
|
|
1260 |
<div class="hd">
|
|
|
1261 |
<h4>
|
|
|
1262 |
Drag & Drop Examples:</h4>
|
|
|
1263 |
</div>
|
|
|
1264 |
<div class="bd">
|
|
|
1265 |
<ul>
|
|
|
1266 |
<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>
|
|
|
1267 |
</div>
|
|
|
1268 |
</div>
|
|
|
1269 |
|
|
|
1270 |
<div class="mod box4">
|
|
|
1271 |
<div class="hd">
|
|
|
1272 |
<h4>More Drag & Drop Resources:</h4>
|
|
|
1273 |
</div>
|
|
|
1274 |
<div class="bd">
|
|
|
1275 |
<ul>
|
|
|
1276 |
<!-- <li><a href="http://developer.yahoo.com/yui/dd/">User's Guide</a> (external)</li> -->
|
|
|
1277 |
<li><a href="../../api/module_dd.html">API Documentation</a></li></ul>
|
|
|
1278 |
</div>
|
|
|
1279 |
</div>
|
|
|
1280 |
</div>
|
|
|
1281 |
</div>
|
|
|
1282 |
|
|
|
1283 |
</div>
|
|
|
1284 |
</div>
|
|
|
1285 |
|
|
|
1286 |
|
|
|
1287 |
<div class="yui-b toc3" id="tocWrapper">
|
|
|
1288 |
<!-- TABLE OF CONTENTS -->
|
|
|
1289 |
<div id="toc">
|
|
|
1290 |
|
|
|
1291 |
<ul>
|
|
|
1292 |
<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>
|
|
|
1293 |
</div>
|
|
|
1294 |
</div>
|
|
|
1295 |
</div><!--closes bd-->
|
|
|
1296 |
|
|
|
1297 |
<div id="ft">
|
|
|
1298 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p>
|
|
|
1299 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
|
|
|
1300 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
|
|
|
1301 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
|
|
|
1302 |
<a href="http://careers.yahoo.com/">Job Openings</a></p>
|
|
|
1303 |
</div>
|
|
|
1304 |
</div>
|
|
|
1305 |
<script language="javascript">
|
|
|
1306 |
var yuiConfig = {base:"../../build/", timeout: 10000};
|
|
|
1307 |
</script>
|
|
|
1308 |
<script src="../../assets/syntax.js"></script>
|
|
|
1309 |
<script src="../../assets/dpSyntaxHighlighter.js"></script>
|
|
|
1310 |
<script language="javascript">
|
|
|
1311 |
dp.SyntaxHighlighter.HighlightAll('code');
|
|
|
1312 |
</script>
|
|
|
1313 |
</body>
|
|
|
1314 |
</html>
|