|
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: Photo Browser</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: Photo Browser</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: Photo Browser</h2>
|
|
|
55 |
|
|
|
56 |
<div id="example" class="promo">
|
|
|
57 |
<div class="example-intro">
|
|
|
58 |
<p>Photo Browser built with YUI3 and <a href="http://developer.yahoo.com/yql/">YQL</a>. This example was part of the YUI3 presentation by <a href="http://blog.davglass.com/">Dav Glass</a> at <a href="http://openhacklondon.pbworks.com/">Open Hack : London</a></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="photo-browser_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>YQL</h3>
|
|
|
78 |
<p>This example uses the YQL YUI3 plugin: <a href="http://github.com/davglass/yui-yql">http://github.com/davglass/yui-yql</a></p>
|
|
|
79 |
<p>Here is the Flickr YQL query used in this example.</p>
|
|
|
80 |
<style>
|
|
|
81 |
/**
|
|
|
82 |
* GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann
|
|
|
83 |
* (http://qbnz.com/highlighter/ and http://geshi.org/)
|
|
|
84 |
*/
|
|
|
85 |
.sql {font-family:monospace;}
|
|
|
86 |
.sql .imp {font-weight: bold; color: red;}
|
|
|
87 |
.sql .kw1 {color: #993333; font-weight: bold;}
|
|
|
88 |
.sql .co1 {color: #808080; font-style: italic;}
|
|
|
89 |
.sql .co2 {color: #808080; font-style: italic;}
|
|
|
90 |
.sql .coMULTI {color: #808080; font-style: italic;}
|
|
|
91 |
.sql .es0 {color: #000099; font-weight: bold;}
|
|
|
92 |
.sql .br0 {color: #66cc66;}
|
|
|
93 |
.sql .sy0 {color: #66cc66;}
|
|
|
94 |
.sql .st0 {color: #ff0000;}
|
|
|
95 |
.sql .nu0 {color: #cc66cc;}
|
|
|
96 |
.sql span.xtra { display:block; }
|
|
|
97 |
|
|
|
98 |
</style>
|
|
|
99 |
<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="sql" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw1">SELECT</span> <span class="sy0">*</span> <span class="kw1">FROM</span> flickr<span class="sy0">.</span>photos<span class="sy0">.</span>search<span class="br0">(</span><span class="nu0">100</span><span class="br0">)</span> <span class="kw1">WHERE</span> </div></li><li class="li1"><div class="de1"> <span class="br0">(</span>text<span class="sy0">=</span><span class="st0">"openhacklondon"</span><span class="br0">)</span> </div></li><li class="li1"><div class="de1"> <span class="kw1">AND</span> <span class="br0">(</span>safe_search <span class="sy0">=</span> <span class="nu0">1</span><span class="br0">)</span> </div></li><li class="li1"><div class="de1"> <span class="kw1">AND</span> <span class="br0">(</span>media <span class="sy0">=</span> <span class="st0">"photos"</span><span class="br0">)</span> </div></li><li class="li2"><div class="de2"> <span class="kw1">AND</span> <span class="br0">(</span>extras <span class="sy0">=</span> <span class="st0">"o_dims"</span><span class="br0">)</span> </div></li><li class="li1"><div class="de1"> <span class="kw1">AND</span> <span class="br0">(</span></div></li><li class="li1"><div class="de1"> <span class="br0">(</span>o_width <span class="sy0">=</span> <span class="st0">"1600"</span> <span class="kw1">AND</span> o_height <span class="sy0">=</span> <span class="st0">"1200"</span><span class="br0">)</span></div></li><li class="li1"><div class="de1"> <span class="kw1">OR</span> <span class="br0">(</span>o_width <span class="sy0">=</span> <span class="st0">"1200"</span> <span class="kw1">AND</span> o_height <span class="sy0">=</span> <span class="st0">"1600"</span><span class="br0">)</span></div></li><li class="li1"><div class="de1"> <span class="kw1">OR</span> <span class="br0">(</span>o_width <span class="sy0">=</span> <span class="st0">"800"</span> <span class="kw1">AND</span> o_height <span class="sy0">=</span> <span class="st0">"600"</span><span class="br0">)</span></div></li><li class="li2"><div class="de2"> <span class="br0">)</span></div></li></ol></pre></div><div class="nonumbers"><pre class="sql" style="font-family:monospace;"><span class="kw1">SELECT</span> <span class="sy0">*</span> <span class="kw1">FROM</span> flickr<span class="sy0">.</span>photos<span class="sy0">.</span>search<span class="br0">(</span><span class="nu0">100</span><span class="br0">)</span> <span class="kw1">WHERE</span>
|
|
|
100 |
<span class="br0">(</span>text<span class="sy0">=</span><span class="st0">"openhacklondon"</span><span class="br0">)</span>
|
|
|
101 |
<span class="kw1">AND</span> <span class="br0">(</span>safe_search <span class="sy0">=</span> <span class="nu0">1</span><span class="br0">)</span>
|
|
|
102 |
<span class="kw1">AND</span> <span class="br0">(</span>media <span class="sy0">=</span> <span class="st0">"photos"</span><span class="br0">)</span>
|
|
|
103 |
<span class="kw1">AND</span> <span class="br0">(</span>extras <span class="sy0">=</span> <span class="st0">"o_dims"</span><span class="br0">)</span>
|
|
|
104 |
<span class="kw1">AND</span> <span class="br0">(</span>
|
|
|
105 |
<span class="br0">(</span>o_width <span class="sy0">=</span> <span class="st0">"1600"</span> <span class="kw1">AND</span> o_height <span class="sy0">=</span> <span class="st0">"1200"</span><span class="br0">)</span>
|
|
|
106 |
<span class="kw1">OR</span> <span class="br0">(</span>o_width <span class="sy0">=</span> <span class="st0">"1200"</span> <span class="kw1">AND</span> o_height <span class="sy0">=</span> <span class="st0">"1600"</span><span class="br0">)</span>
|
|
|
107 |
<span class="kw1">OR</span> <span class="br0">(</span>o_width <span class="sy0">=</span> <span class="st0">"800"</span> <span class="kw1">AND</span> o_height <span class="sy0">=</span> <span class="st0">"600"</span><span class="br0">)</span>
|
|
|
108 |
<span class="br0">)</span></pre></div><textarea id="syntax1-plain">SELECT * FROM flickr.photos.search(100) WHERE
|
|
|
109 |
(text="openhacklondon")
|
|
|
110 |
AND (safe_search = 1)
|
|
|
111 |
AND (media = "photos")
|
|
|
112 |
AND (extras = "o_dims")
|
|
|
113 |
AND (
|
|
|
114 |
(o_width = "1600" AND o_height = "1200")
|
|
|
115 |
OR (o_width = "1200" AND o_height = "1600")
|
|
|
116 |
OR (o_width = "800" AND o_height = "600")
|
|
|
117 |
)</textarea></div>
|
|
|
118 |
|
|
|
119 |
<h3>Slider and StyleSheet</h3>
|
|
|
120 |
<p>In this example, we will use the Slider control to dynamically manipulate a CSS Style Rule.</p>
|
|
|
121 |
<p>First, we need to create the slider and render it.</p>
|
|
|
122 |
<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">//Create and render the slider</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> sl <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Slider</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> railSize<span class="sy0">:</span> <span class="st0">'200px'</span><span class="sy0">,</span> value<span class="sy0">:</span> <span class="nu0">40</span><span class="sy0">,</span> max<span class="sy0">:</span> <span class="nu0">70</span><span class="sy0">,</span> min<span class="sy0">:</span> <span class="nu0">5</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> thumbImage<span class="sy0">:</span> assetsDir <span class="sy0">+</span> <span class="st0">'css/thumb-classic-x.png'</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span><span class="br0">)</span>.<span class="me1">render</span><span class="br0">(</span><span class="st0">'.horiz_slider'</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">//Create and render the slider</span>
|
|
|
123 |
<span class="kw2">var</span> sl <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Slider</span><span class="br0">(</span><span class="br0">{</span>
|
|
|
124 |
railSize<span class="sy0">:</span> <span class="st0">'200px'</span><span class="sy0">,</span> value<span class="sy0">:</span> <span class="nu0">40</span><span class="sy0">,</span> max<span class="sy0">:</span> <span class="nu0">70</span><span class="sy0">,</span> min<span class="sy0">:</span> <span class="nu0">5</span><span class="sy0">,</span>
|
|
|
125 |
thumbImage<span class="sy0">:</span> assetsDir <span class="sy0">+</span> <span class="st0">'css/thumb-classic-x.png'</span>
|
|
|
126 |
<span class="br0">}</span><span class="br0">)</span>.<span class="me1">render</span><span class="br0">(</span><span class="st0">'.horiz_slider'</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax2-plain">//Create and render the slider
|
|
|
127 |
var sl = new Y.Slider({
|
|
|
128 |
railSize: '200px', value: 40, max: 70, min: 5,
|
|
|
129 |
thumbImage: assetsDir + 'css/thumb-classic-x.png'
|
|
|
130 |
}).render('.horiz_slider');</textarea></div><p>Now, we listen for the Slider's <code>valueChange</code> event. This event is fired when the value of the Slider has changed.</p>
|
|
|
131 |
<p>Next we use the StyleSheet utility to dynamically change a style rule to resize the images.
|
|
|
132 |
The style rule that we want to change is <code>#yui-main .yui-g ul li</code>. When the Slider's value changes, we will take the value and divide it by 2, then use that as the percentage width of the li.
|
|
|
133 |
This will give us the effect we want (resizing images) without touching all the images via the DOM.
|
|
|
134 |
</p>
|
|
|
135 |
<div id="syntax3" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">//Listen for the change</span></div></li><li class="li1"><div class="de1">sl.<span class="me1">after</span><span class="br0">(</span><span class="st0">'valueChange'</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="co1">//Insert a dynamic stylesheet rule:</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> sheet <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">StyleSheet</span><span class="br0">(</span><span class="st0">'image_slider'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> sheet.<span class="me1">set</span><span class="br0">(</span><span class="st0">'#yui-main .yui-g ul li'</span><span class="sy0">,</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> width<span class="sy0">:</span> <span class="br0">(</span>e.<span class="me1">newVal</span> <span class="sy0">/</span> <span class="nu0">2</span><span class="br0">)</span> <span class="sy0">+</span> <span class="st0">'%'</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></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">//Listen for the change</span>
|
|
|
136 |
sl.<span class="me1">after</span><span class="br0">(</span><span class="st0">'valueChange'</span><span class="sy0">,</span><span class="kw2">function</span> <span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
|
|
|
137 |
<span class="co1">//Insert a dynamic stylesheet rule:</span>
|
|
|
138 |
<span class="kw2">var</span> sheet <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">StyleSheet</span><span class="br0">(</span><span class="st0">'image_slider'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
139 |
sheet.<span class="me1">set</span><span class="br0">(</span><span class="st0">'#yui-main .yui-g ul li'</span><span class="sy0">,</span> <span class="br0">{</span>
|
|
|
140 |
width<span class="sy0">:</span> <span class="br0">(</span>e.<span class="me1">newVal</span> <span class="sy0">/</span> <span class="nu0">2</span><span class="br0">)</span> <span class="sy0">+</span> <span class="st0">'%'</span>
|
|
|
141 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
142 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax3-plain">//Listen for the change
|
|
|
143 |
sl.after('valueChange',function (e) {
|
|
|
144 |
//Insert a dynamic stylesheet rule:
|
|
|
145 |
var sheet = new Y.StyleSheet('image_slider');
|
|
|
146 |
sheet.set('#yui-main .yui-g ul li', {
|
|
|
147 |
width: (e.newVal / 2) + '%'
|
|
|
148 |
});
|
|
|
149 |
});</textarea></div>
|
|
|
150 |
<h3>Event Delegation</h3>
|
|
|
151 |
<p>This listener listens for all <code>mouseup</code> events on the <code>document</code> and it will only fire when the target element matches the <code>*</code> selector (which should be all elements).</p>
|
|
|
152 |
<p>This way we can remove all the <code>selected</code> CSS classes from all the images in the browser when a <code>mouseup</code> occurs, only if the shift key was not pressed. We can then check to determine if the mouseup came from one of the images. If it has, add the selected class back to it.</p>
|
|
|
153 |
|
|
|
154 |
<div id="syntax4" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">//Listen for all mouseups on the document (selecting/deselecting images)</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'delegate'</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">shiftKey</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//No shift key - remove all selected images</span></div></li><li class="li2"><div class="de2"> wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'img.selected'</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'selected'</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="co1">//Check if the target is an image and select it.</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">'#yui-main .yui-g ul li img'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> e.<span class="me1">target</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'selected'</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="sy0">,</span> document<span class="sy0">,</span> <span class="st0">'mouseup'</span><span class="sy0">,</span> <span class="st0">'*'</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">//Listen for all mouseups on the document (selecting/deselecting images)</span>
|
|
|
155 |
Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'delegate'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
|
|
|
156 |
<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>e.<span class="me1">shiftKey</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
157 |
<span class="co1">//No shift key - remove all selected images</span>
|
|
|
158 |
wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'img.selected'</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'selected'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
159 |
<span class="br0">}</span>
|
|
|
160 |
<span class="co1">//Check if the target is an image and select it.</span>
|
|
|
161 |
<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">'#yui-main .yui-g ul li img'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
162 |
e.<span class="me1">target</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'selected'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
163 |
<span class="br0">}</span>
|
|
|
164 |
<span class="br0">}</span><span class="sy0">,</span> document<span class="sy0">,</span> <span class="st0">'mouseup'</span><span class="sy0">,</span> <span class="st0">'*'</span><span class="br0">)</span><span class="sy0">;</span> </pre></div><textarea id="syntax4-plain">//Listen for all mouseups on the document (selecting/deselecting images)
|
|
|
165 |
Y.on('delegate', function(e) {
|
|
|
166 |
if (!e.shiftKey) {
|
|
|
167 |
//No shift key - remove all selected images
|
|
|
168 |
wrapper.queryAll('img.selected').removeClass('selected');
|
|
|
169 |
}
|
|
|
170 |
//Check if the target is an image and select it.
|
|
|
171 |
if (e.target.test('#yui-main .yui-g ul li img')) {
|
|
|
172 |
e.target.addClass('selected');
|
|
|
173 |
}
|
|
|
174 |
}, document, 'mouseup', '*'); </textarea></div>
|
|
|
175 |
<p>This listener, listens for all <code>click</code> events on the album list <code>#photoList li</code>.
|
|
|
176 |
First, it stops the click, so the href is not followed. Next, it removes all the <code>selected</code> classes from the list. Then, it adds the <code>selected</code> class to the item that was clicked on.</p>
|
|
|
177 |
<p>After that UI setup, it uses Selectors to change the view of the images in the browser.
|
|
|
178 |
First, it checks if we are viewing "all" or a "sub album". If all is selected, it removes the <code>hidden</code> class from all the images.
|
|
|
179 |
If it was an album, it adds the <code>hidden</code> class to all the images, then selects all the images with the class of its <code>id</code>, then it removes the hidden class from them.
|
|
|
180 |
</p>
|
|
|
181 |
<p>Basically, it hides all the images, then determines the ones it needs to show and removes the <code>hidden</code> class from them.</p>
|
|
|
182 |
<div id="syntax5" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">//Listen for all clicks on the '#photoList li' selector</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'delegate'</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="co1">//Prevent 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="li2"><div class="de2"> <span class="co1">//Remove all the selected items</span></div></li><li class="li1"><div class="de1"> e.<span class="me1">currentTarget</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span>.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li.selected'</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'selected'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Add the selected class to the one that one clicked</span></div></li><li class="li1"><div class="de1"> e.<span class="me1">currentTarget</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'selected'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//The "All Photos" link was clicked</span></div></li><li class="li2"><div class="de2"> <span class="kw1">if</span> <span class="br0">(</span>e.<span class="me1">currentTarget</span>.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'all'</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 all the hidden classes</span></div></li><li class="li1"><div class="de1"> wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li'</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'hidden'</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">//Another "album" was clicked, get its id</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> c <span class="sy0">=</span> e.<span class="me1">target</span>.<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="li1"><div class="de1"> <span class="co1">//Hide all items by adding the hidden class</span></div></li><li class="li1"><div class="de1"> wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li'</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</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">//Now, find all the items with the class name the same as the album id</span></div></li><li class="li1"><div class="de1"> <span class="co1">//and remove the hidden class</span></div></li><li class="li2"><div class="de2"> wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li.'</span> <span class="sy0">+</span> c<span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'hidden'</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> document<span class="sy0">,</span> <span class="st0">'click'</span><span class="sy0">,</span> <span class="st0">'#photoList li'</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">//Listen for all clicks on the '#photoList li' selector</span>
|
|
|
183 |
Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'delegate'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
|
|
|
184 |
<span class="co1">//Prevent the click</span>
|
|
|
185 |
e.<span class="me1">halt</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
186 |
<span class="co1">//Remove all the selected items</span>
|
|
|
187 |
e.<span class="me1">currentTarget</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span>.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li.selected'</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'selected'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
188 |
<span class="co1">//Add the selected class to the one that one clicked</span>
|
|
|
189 |
e.<span class="me1">currentTarget</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'selected'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
190 |
<span class="co1">//The "All Photos" link was clicked</span>
|
|
|
191 |
<span class="kw1">if</span> <span class="br0">(</span>e.<span class="me1">currentTarget</span>.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'all'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
192 |
<span class="co1">//Remove all the hidden classes</span>
|
|
|
193 |
wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li'</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'hidden'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
194 |
<span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span>
|
|
|
195 |
<span class="co1">//Another "album" was clicked, get its id</span>
|
|
|
196 |
<span class="kw2">var</span> c <span class="sy0">=</span> e.<span class="me1">target</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'id'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
197 |
<span class="co1">//Hide all items by adding the hidden class</span>
|
|
|
198 |
wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li'</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'hidden'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
199 |
<span class="co1">//Now, find all the items with the class name the same as the album id</span>
|
|
|
200 |
<span class="co1">//and remove the hidden class</span>
|
|
|
201 |
wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li.'</span> <span class="sy0">+</span> c<span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'hidden'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
202 |
<span class="br0">}</span>
|
|
|
203 |
<span class="br0">}</span><span class="sy0">,</span> document<span class="sy0">,</span> <span class="st0">'click'</span><span class="sy0">,</span> <span class="st0">'#photoList li'</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax5-plain">//Listen for all clicks on the '#photoList li' selector
|
|
|
204 |
Y.on('delegate', function(e) {
|
|
|
205 |
//Prevent the click
|
|
|
206 |
e.halt();
|
|
|
207 |
//Remove all the selected items
|
|
|
208 |
e.currentTarget.get('parentNode').queryAll('li.selected').removeClass('selected');
|
|
|
209 |
//Add the selected class to the one that one clicked
|
|
|
210 |
e.currentTarget.addClass('selected');
|
|
|
211 |
//The "All Photos" link was clicked
|
|
|
212 |
if (e.currentTarget.hasClass('all')) {
|
|
|
213 |
//Remove all the hidden classes
|
|
|
214 |
wrapper.queryAll('li').removeClass('hidden');
|
|
|
215 |
} else {
|
|
|
216 |
//Another "album" was clicked, get its id
|
|
|
217 |
var c = e.target.get('id');
|
|
|
218 |
//Hide all items by adding the hidden class
|
|
|
219 |
wrapper.queryAll('li').addClass('hidden');
|
|
|
220 |
//Now, find all the items with the class name the same as the album id
|
|
|
221 |
//and remove the hidden class
|
|
|
222 |
wrapper.queryAll('li.' + c).removeClass('hidden');
|
|
|
223 |
}
|
|
|
224 |
}, document, 'click', '#photoList li');</textarea></div>
|
|
|
225 |
|
|
|
226 |
<h3>Full Source</h3>
|
|
|
227 |
<p>Here is the full commented JavaScript source for this example.</p>
|
|
|
228 |
<div id="syntax6" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">'node'</span><span class="sy0">,</span> <span class="st0">'anim'</span><span class="sy0">,</span> <span class="st0">'dd'</span><span class="sy0">,</span> <span class="st0">'yql'</span><span class="sy0">,</span> <span class="st0">'slider'</span><span class="sy0">,</span> <span class="st0">'stylesheet'</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">//Get a reference to the wrapper to use later and add a loading class to it.</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> wrapper <span class="sy0">=</span> Y.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#yui-main .yui-g ul'</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'loading'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Set its height to the height of the viewport so we can scroll it.</span></div></li><li class="li2"><div class="de2"> wrapper.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'height'</span><span class="sy0">,</span> <span class="br0">(</span>wrapper.<span class="me1">get</span><span class="br0">(</span><span class="st0">'winHeight'</span><span class="br0">)</span> <span class="sy0">-</span> <span class="nu0">50</span> <span class="br0">)</span><span class="sy0">+</span> <span class="st0">'px'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'windowresize'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> wrapper.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'height'</span><span class="sy0">,</span> <span class="br0">(</span>wrapper.<span class="me1">get</span><span class="br0">(</span><span class="st0">'winHeight'</span><span class="br0">)</span> <span class="sy0">-</span> <span class="nu0">50</span> <span class="br0">)</span><span class="sy0">+</span> <span class="st0">'px'</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="co1">//Make the YQL query.</span></div></li><li class="li1"><div class="de1"> <span class="kw2">new</span> Y.<span class="me1">yql</span><span class="br0">(</span><span class="st0">'select * from flickr.photos.search(100) where text="openhacklondon" and safe_search = 1 and media = "photos" and extras = "o_dims" and ((o_width = "1600" and o_height = "1200") or (o_width = "1200" and o_height = "1600") or (o_width = "800" and o_height = "600") or (o_width = "600" and o_height = "800"))'</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>e.<span class="me1">query</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> photos <span class="sy0">=</span> e.<span class="me1">query</span>.<span class="me1">results</span>.<span class="me1">photo</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Walk the returned photos array</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">each</span><span class="br0">(</span>photos<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">//Create our 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">'/static.flickr.com/'</span> <span class="sy0">+</span> v.<span class="me1">server</span> <span class="sy0">+</span> <span class="st0">'/'</span> <span class="sy0">+</span> v.<span class="me1">id</span> <span class="sy0">+</span> <span class="st0">'_'</span> <span class="sy0">+</span> v.<span class="me1">secret</span> <span class="sy0">+</span> <span class="st0">'_m.jpg'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> <span class="co1">//Create the image and the LI</span></div></li><li class="li1"><div class="de1"> li <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">(</span><span class="st0">'<li class="loading"><img src="'</span> <span class="sy0">+</span> url <span class="sy0">+</span> <span class="st0">'" title="'</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"> <span class="co1">//Get the image from the LI</span></div></li><li class="li1"><div class="de1"> img <span class="sy0">=</span> li.<span class="me1">get</span><span class="br0">(</span><span class="st0">'firstChild'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Append the li to the wrapper</span></div></li><li class="li2"><div class="de2"> wrapper.<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">//This little hack moves the tall images to the bottom of the list</span></div></li><li class="li1"><div class="de1"> <span class="co1">//So they float better ;)</span></div></li><li class="li1"><div class="de1"> img.<span class="me1">on</span><span class="br0">(</span><span class="st0">'load'</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">//Is the height longer than the width?</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> c <span class="sy0">=</span> <span class="br0">(</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'height'</span><span class="br0">)</span> <span class="sy0">></span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'width'</span><span class="br0">)</span><span class="br0">)</span> <span class="sy0">?</span> <span class="st0">'tall'</span> <span class="sy0">:</span> <span class="st0">'wide'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">addClass</span><span class="br0">(</span>c<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>c <span class="sy0">===</span> <span class="st0">'tall'</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Move it to the end of the list.</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode.parentNode'</span><span class="br0">)</span>.<span class="me1">removeChild</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> wrapper.<span class="me1">appendChild</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</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="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'loading'</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><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="co1">//Get all the newly added li's</span></div></li><li class="li1"><div class="de1"> wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li'</span><span class="br0">)</span>.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span>node<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Plugin the Drag plugin</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">plug</span><span class="br0">(</span>Y.<span class="me1">Plugin</span>.<span class="me1">Drag</span><span class="sy0">,</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> offsetNode<span class="sy0">:</span> <span class="kw2">false</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">//Plug the Proxy into the DD object</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">dd</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"> resizeFrame<span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">,</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="li2"><div class="de2"> 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="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Create and render the slider</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> sl <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Slider</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li2"><div class="de2"> railSize<span class="sy0">:</span> <span class="st0">'200px'</span><span class="sy0">,</span> value<span class="sy0">:</span> <span class="nu0">40</span><span class="sy0">,</span> max<span class="sy0">:</span> <span class="nu0">70</span><span class="sy0">,</span> min<span class="sy0">:</span> <span class="nu0">5</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> thumbImage<span class="sy0">:</span> assetsDir <span class="sy0">+</span> <span class="st0">'css/thumb-classic-x.png'</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span>.<span class="me1">render</span><span class="br0">(</span><span class="st0">'.horiz_slider'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Listen for the change</span></div></li><li class="li1"><div class="de1"> sl.<span class="me1">after</span><span class="br0">(</span><span class="st0">'valueChange'</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="co1">//Insert a dynamic stylesheet rule</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> sheet <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">StyleSheet</span><span class="br0">(</span><span class="st0">'image_slider'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> sheet.<span class="me1">set</span><span class="br0">(</span><span class="st0">'#yui-main .yui-g ul li'</span><span class="sy0">,</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> width<span class="sy0">:</span> <span class="br0">(</span>e.<span class="me1">newVal</span> <span class="sy0">/</span> <span class="nu0">2</span><span class="br0">)</span> <span class="sy0">+</span> <span class="st0">'%'</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><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Remove the DDM as a bubble target..</span></div></li><li class="li1"><div class="de1"> sl._dd.<span class="me1">removeTarget</span><span class="br0">(</span>Y.<span class="me1">DD</span>.<span class="me1">DDM</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Remove the wrappers loading class</span></div></li><li class="li1"><div class="de1"> wrapper.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'loading'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> Y.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#ft'</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'loading'</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="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Listen for all mouseups on the document (selecting/deselecting images)</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'delegate'</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="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>e.<span class="me1">shiftKey</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//No shift key - remove all selected images</span></div></li><li class="li1"><div class="de1"> wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'img.selected'</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'selected'</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="co1">//Check if the target is an image and select it.</span></div></li><li class="li2"><div class="de2"> <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">'#yui-main .yui-g ul li img'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> e.<span class="me1">target</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'selected'</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> document<span class="sy0">,</span> <span class="st0">'mouseup'</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"> <span class="co1">//Listen for all clicks on the '#photoList li' selector</span></div></li><li class="li2"><div class="de2"> Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'delegate'</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="co1">//Prevent 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="co1">//Remove all the selected items</span></div></li><li class="li1"><div class="de1"> e.<span class="me1">currentTarget</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span>.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li.selected'</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'selected'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="co1">//Add the selected class to the one that one clicked</span></div></li><li class="li1"><div class="de1"> e.<span class="me1">currentTarget</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'selected'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//The "All Photos" link was clicked</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>e.<span class="me1">currentTarget</span>.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'all'</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 all the hidden classes</span></div></li><li class="li2"><div class="de2"> wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li'</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'hidden'</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">//Another "album" was clicked, get its id</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> c <span class="sy0">=</span> e.<span class="me1">currentTarget</span>.<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="li1"><div class="de1"> <span class="co1">//Hide all items by adding the hidden class</span></div></li><li class="li2"><div class="de2"> wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li'</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</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">//Now, find all the items with the class name the same as the album id</span></div></li><li class="li1"><div class="de1"> <span class="co1">//and remove the hidden class</span></div></li><li class="li1"><div class="de1"> wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li.'</span> <span class="sy0">+</span> c<span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'hidden'</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><span class="sy0">,</span> document<span class="sy0">,</span> <span class="st0">'click'</span><span class="sy0">,</span> <span class="st0">'#photoList li'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Stop the drag with the escape key</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">get</span><span class="br0">(</span>document<span class="br0">)</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'keypress'</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="co1">//The escape key was pressed</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="br0">(</span>e.<span class="me1">keyCode</span> <span class="sy0">===</span> <span class="nu0">27</span><span class="br0">)</span> <span class="sy0">||</span> <span class="br0">(</span>e.<span class="me1">charCode</span> <span class="sy0">===</span> <span class="nu0">27</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="co1">//We have an active Drag</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">//Stop the drag</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">activeDrag</span>.<span class="me1">stopDrag</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">//On the drag:mouseDown add the selected class</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drag:mouseDown'</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"> e.<span class="me1">target</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'img'</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'selected'</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="co1">//On drag start, get all the selected elements</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Add the count to the proxy element and offset it to the cursor.</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">DD</span>.<span class="me1">DDM</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="co1">//How many items are selected</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> count <span class="sy0">=</span> wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'img.selected'</span><span class="br0">)</span>.<span class="me1">size</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 style on the proxy node</span></div></li><li class="li1"><div class="de1"> e.<span class="me1">target</span>.<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"> height<span class="sy0">:</span> <span class="st0">'25px'</span><span class="sy0">,</span> width<span class="sy0">:</span> <span class="st0">'25px'</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</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> <span class="sy0">+</span> count <span class="sy0">+</span> <span class="st0">'</span>'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="co1">//Offset the dragNode</span></div></li><li class="li1"><div class="de1"> e.<span class="me1">target</span>.<span class="me1">deltaXY</span> <span class="sy0">=</span> <span class="br0">[</span><span class="nu0">25</span><span class="sy0">,</span> <span class="nu0">5</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">//We dropped on a drop target</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">DD</span>.<span class="me1">DDM</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="co1">//get the images that are selected.</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> imgs <span class="sy0">=</span> wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'img.selected'</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="co1">//The xy position of the item we dropped on</span></div></li><li class="li1"><div class="de1"> toXY <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="me1">getXY</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="li2"><div class="de2"> imgs.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span>node<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Clone the image, position it on top of the original and animate it to the drop target</span></div></li><li class="li1"><div class="de1"> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span>.<span class="me1">addClass</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">'id'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> n <span class="sy0">=</span> node.<span class="me1">cloneNode</span><span class="br0">(</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'id'</span><span class="sy0">,</span> <span class="st0">''</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'position'</span><span class="sy0">,</span> <span class="st0">'absolute'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">get</span><span class="br0">(</span><span class="st0">'body'</span><span class="br0">)</span>.<span class="me1">appendChild</span><span class="br0">(</span>n<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> n.<span class="me1">setXY</span><span class="br0">(</span>node.<span class="me1">getXY</span><span class="br0">(</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <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> n<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="li1"><div class="de1"> height<span class="sy0">:</span> <span class="nu0">20</span><span class="sy0">,</span> width<span class="sy0">:</span> <span class="nu0">20</span><span class="sy0">,</span> opacity<span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> top<span class="sy0">:</span> toXY<span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span><span class="sy0">,</span> left<span class="sy0">:</span> toXY<span class="br0">[</span><span class="nu0">0</span><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"> from<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> width<span class="sy0">:</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">'offsetWidth'</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> height<span class="sy0">:</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">'offsetHeight'</span><span class="br0">)</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> .5</div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span>.<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">//Update the count</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> count <span class="sy0">=</span> wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li.'</span> <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="me1">get</span><span class="br0">(</span><span class="st0">'id'</span><span class="br0">)</span><span class="br0">)</span>.<span class="me1">size</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> 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">query</span><span class="br0">(</span><span class="st0">'span'</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="sy0">+</span> count <span class="sy0">+</span> <span class="st0">')'</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">//Add drop support to the albums</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">all</span><span class="br0">(</span><span class="st0">'#photoList li'</span><span class="br0">)</span>.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span>node<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>node.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'all'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//make all albums Drop Targets except the all photos.</span></div></li><li class="li1"><div class="de1"> node.<span class="me1">plug</span><span class="br0">(</span>Y.<span class="me1">Plugin</span>.<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><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></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">(</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">'node'</span><span class="sy0">,</span> <span class="st0">'anim'</span><span class="sy0">,</span> <span class="st0">'dd'</span><span class="sy0">,</span> <span class="st0">'yql'</span><span class="sy0">,</span> <span class="st0">'slider'</span><span class="sy0">,</span> <span class="st0">'stylesheet'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span>
|
|
|
229 |
<span class="co1">//Get a reference to the wrapper to use later and add a loading class to it.</span>
|
|
|
230 |
<span class="kw2">var</span> wrapper <span class="sy0">=</span> Y.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#yui-main .yui-g ul'</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'loading'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
231 |
<span class="co1">//Set its height to the height of the viewport so we can scroll it.</span>
|
|
|
232 |
wrapper.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'height'</span><span class="sy0">,</span> <span class="br0">(</span>wrapper.<span class="me1">get</span><span class="br0">(</span><span class="st0">'winHeight'</span><span class="br0">)</span> <span class="sy0">-</span> <span class="nu0">50</span> <span class="br0">)</span><span class="sy0">+</span> <span class="st0">'px'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
233 |
Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'windowresize'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> wrapper.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'height'</span><span class="sy0">,</span> <span class="br0">(</span>wrapper.<span class="me1">get</span><span class="br0">(</span><span class="st0">'winHeight'</span><span class="br0">)</span> <span class="sy0">-</span> <span class="nu0">50</span> <span class="br0">)</span><span class="sy0">+</span> <span class="st0">'px'</span><span class="br0">)</span><span class="sy0">;</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
234 |
<span class="co1">//Make the YQL query.</span>
|
|
|
235 |
<span class="kw2">new</span> Y.<span class="me1">yql</span><span class="br0">(</span><span class="st0">'select * from flickr.photos.search(100) where text="openhacklondon" and safe_search = 1 and media = "photos" and extras = "o_dims" and ((o_width = "1600" and o_height = "1200") or (o_width = "1200" and o_height = "1600") or (o_width = "800" and o_height = "600") or (o_width = "600" and o_height = "800"))'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
|
|
|
236 |
<span class="kw1">if</span> <span class="br0">(</span>e.<span class="me1">query</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
237 |
<span class="kw2">var</span> photos <span class="sy0">=</span> e.<span class="me1">query</span>.<span class="me1">results</span>.<span class="me1">photo</span><span class="sy0">;</span>
|
|
|
238 |
<span class="co1">//Walk the returned photos array</span>
|
|
|
239 |
Y.<span class="me1">each</span><span class="br0">(</span>photos<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>
|
|
|
240 |
<span class="co1">//Create our URL</span>
|
|
|
241 |
<span class="kw2">var</span> url <span class="sy0">=</span> <span class="st0">'http:/'</span><span class="sy0">+</span><span class="st0">'/static.flickr.com/'</span> <span class="sy0">+</span> v.<span class="me1">server</span> <span class="sy0">+</span> <span class="st0">'/'</span> <span class="sy0">+</span> v.<span class="me1">id</span> <span class="sy0">+</span> <span class="st0">'_'</span> <span class="sy0">+</span> v.<span class="me1">secret</span> <span class="sy0">+</span> <span class="st0">'_m.jpg'</span><span class="sy0">,</span>
|
|
|
242 |
<span class="co1">//Create the image and the LI</span>
|
|
|
243 |
li <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">(</span><span class="st0">'<li class="loading"><img src="'</span> <span class="sy0">+</span> url <span class="sy0">+</span> <span class="st0">'" title="'</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>
|
|
|
244 |
<span class="co1">//Get the image from the LI</span>
|
|
|
245 |
img <span class="sy0">=</span> li.<span class="me1">get</span><span class="br0">(</span><span class="st0">'firstChild'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
246 |
<span class="co1">//Append the li to the wrapper</span>
|
|
|
247 |
wrapper.<span class="me1">appendChild</span><span class="br0">(</span>li<span class="br0">)</span><span class="sy0">;</span>
|
|
|
248 |
<span class="co1">//This little hack moves the tall images to the bottom of the list</span>
|
|
|
249 |
<span class="co1">//So they float better ;)</span>
|
|
|
250 |
img.<span class="me1">on</span><span class="br0">(</span><span class="st0">'load'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
251 |
<span class="co1">//Is the height longer than the width?</span>
|
|
|
252 |
<span class="kw2">var</span> c <span class="sy0">=</span> <span class="br0">(</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'height'</span><span class="br0">)</span> <span class="sy0">></span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'width'</span><span class="br0">)</span><span class="br0">)</span> <span class="sy0">?</span> <span class="st0">'tall'</span> <span class="sy0">:</span> <span class="st0">'wide'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
253 |
<span class="kw1">this</span>.<span class="me1">addClass</span><span class="br0">(</span>c<span class="br0">)</span><span class="sy0">;</span>
|
|
|
254 |
<span class="kw1">if</span> <span class="br0">(</span>c <span class="sy0">===</span> <span class="st0">'tall'</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
255 |
<span class="co1">//Move it to the end of the list.</span>
|
|
|
256 |
<span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode.parentNode'</span><span class="br0">)</span>.<span class="me1">removeChild</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
257 |
wrapper.<span class="me1">appendChild</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
258 |
<span class="br0">}</span>
|
|
|
259 |
<span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'loading'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
260 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
261 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
262 |
<span class="co1">//Get all the newly added li's</span>
|
|
|
263 |
wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li'</span><span class="br0">)</span>.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span>node<span class="br0">)</span> <span class="br0">{</span>
|
|
|
264 |
<span class="co1">//Plugin the Drag plugin</span>
|
|
|
265 |
<span class="kw1">this</span>.<span class="me1">plug</span><span class="br0">(</span>Y.<span class="me1">Plugin</span>.<span class="me1">Drag</span><span class="sy0">,</span> <span class="br0">{</span>
|
|
|
266 |
offsetNode<span class="sy0">:</span> <span class="kw2">false</span>
|
|
|
267 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
268 |
<span class="co1">//Plug the Proxy into the DD object</span>
|
|
|
269 |
<span class="kw1">this</span>.<span class="me1">dd</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>
|
|
|
270 |
resizeFrame<span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">,</span>
|
|
|
271 |
moveOnEnd<span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">,</span>
|
|
|
272 |
borderStyle<span class="sy0">:</span> <span class="st0">'none'</span>
|
|
|
273 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
274 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
275 |
<span class="co1">//Create and render the slider</span>
|
|
|
276 |
<span class="kw2">var</span> sl <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Slider</span><span class="br0">(</span><span class="br0">{</span>
|
|
|
277 |
railSize<span class="sy0">:</span> <span class="st0">'200px'</span><span class="sy0">,</span> value<span class="sy0">:</span> <span class="nu0">40</span><span class="sy0">,</span> max<span class="sy0">:</span> <span class="nu0">70</span><span class="sy0">,</span> min<span class="sy0">:</span> <span class="nu0">5</span><span class="sy0">,</span>
|
|
|
278 |
thumbImage<span class="sy0">:</span> assetsDir <span class="sy0">+</span> <span class="st0">'css/thumb-classic-x.png'</span>
|
|
|
279 |
<span class="br0">}</span><span class="br0">)</span>.<span class="me1">render</span><span class="br0">(</span><span class="st0">'.horiz_slider'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
280 |
<span class="co1">//Listen for the change</span>
|
|
|
281 |
sl.<span class="me1">after</span><span class="br0">(</span><span class="st0">'valueChange'</span><span class="sy0">,</span><span class="kw2">function</span> <span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
|
|
|
282 |
<span class="co1">//Insert a dynamic stylesheet rule</span>
|
|
|
283 |
<span class="kw2">var</span> sheet <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">StyleSheet</span><span class="br0">(</span><span class="st0">'image_slider'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
284 |
sheet.<span class="me1">set</span><span class="br0">(</span><span class="st0">'#yui-main .yui-g ul li'</span><span class="sy0">,</span> <span class="br0">{</span>
|
|
|
285 |
width<span class="sy0">:</span> <span class="br0">(</span>e.<span class="me1">newVal</span> <span class="sy0">/</span> <span class="nu0">2</span><span class="br0">)</span> <span class="sy0">+</span> <span class="st0">'%'</span>
|
|
|
286 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
287 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
288 |
<span class="co1">//Remove the DDM as a bubble target..</span>
|
|
|
289 |
sl._dd.<span class="me1">removeTarget</span><span class="br0">(</span>Y.<span class="me1">DD</span>.<span class="me1">DDM</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
290 |
<span class="co1">//Remove the wrappers loading class</span>
|
|
|
291 |
wrapper.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'loading'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
292 |
Y.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#ft'</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'loading'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
293 |
<span class="br0">}</span>
|
|
|
294 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
295 |
<span class="co1">//Listen for all mouseups on the document (selecting/deselecting images)</span>
|
|
|
296 |
Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'delegate'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
|
|
|
297 |
<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>e.<span class="me1">shiftKey</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
298 |
<span class="co1">//No shift key - remove all selected images</span>
|
|
|
299 |
wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'img.selected'</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'selected'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
300 |
<span class="br0">}</span>
|
|
|
301 |
<span class="co1">//Check if the target is an image and select it.</span>
|
|
|
302 |
<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">'#yui-main .yui-g ul li img'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
303 |
e.<span class="me1">target</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'selected'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
304 |
<span class="br0">}</span>
|
|
|
305 |
<span class="br0">}</span><span class="sy0">,</span> document<span class="sy0">,</span> <span class="st0">'mouseup'</span><span class="sy0">,</span> <span class="st0">'*'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
306 |
<span class="co1">//Listen for all clicks on the '#photoList li' selector</span>
|
|
|
307 |
Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'delegate'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
|
|
|
308 |
<span class="co1">//Prevent the click</span>
|
|
|
309 |
e.<span class="me1">halt</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
310 |
<span class="co1">//Remove all the selected items</span>
|
|
|
311 |
e.<span class="me1">currentTarget</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span>.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li.selected'</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'selected'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
312 |
<span class="co1">//Add the selected class to the one that one clicked</span>
|
|
|
313 |
e.<span class="me1">currentTarget</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'selected'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
314 |
<span class="co1">//The "All Photos" link was clicked</span>
|
|
|
315 |
<span class="kw1">if</span> <span class="br0">(</span>e.<span class="me1">currentTarget</span>.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'all'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
316 |
<span class="co1">//Remove all the hidden classes</span>
|
|
|
317 |
wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li'</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'hidden'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
318 |
<span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span>
|
|
|
319 |
<span class="co1">//Another "album" was clicked, get its id</span>
|
|
|
320 |
<span class="kw2">var</span> c <span class="sy0">=</span> e.<span class="me1">currentTarget</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'id'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
321 |
<span class="co1">//Hide all items by adding the hidden class</span>
|
|
|
322 |
wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li'</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'hidden'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
323 |
<span class="co1">//Now, find all the items with the class name the same as the album id</span>
|
|
|
324 |
<span class="co1">//and remove the hidden class</span>
|
|
|
325 |
wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li.'</span> <span class="sy0">+</span> c<span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'hidden'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
326 |
<span class="br0">}</span>
|
|
|
327 |
<span class="br0">}</span><span class="sy0">,</span> document<span class="sy0">,</span> <span class="st0">'click'</span><span class="sy0">,</span> <span class="st0">'#photoList li'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
328 |
<span class="co1">//Stop the drag with the escape key</span>
|
|
|
329 |
Y.<span class="me1">get</span><span class="br0">(</span>document<span class="br0">)</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'keypress'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
|
|
|
330 |
<span class="co1">//The escape key was pressed</span>
|
|
|
331 |
<span class="kw1">if</span> <span class="br0">(</span><span class="br0">(</span>e.<span class="me1">keyCode</span> <span class="sy0">===</span> <span class="nu0">27</span><span class="br0">)</span> <span class="sy0">||</span> <span class="br0">(</span>e.<span class="me1">charCode</span> <span class="sy0">===</span> <span class="nu0">27</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
332 |
<span class="co1">//We have an active Drag</span>
|
|
|
333 |
<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>
|
|
|
334 |
<span class="co1">//Stop the drag</span>
|
|
|
335 |
Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">activeDrag</span>.<span class="me1">stopDrag</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
336 |
<span class="br0">}</span>
|
|
|
337 |
<span class="br0">}</span>
|
|
|
338 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
339 |
<span class="co1">//On the drag:mouseDown add the selected class</span>
|
|
|
340 |
Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'drag:mouseDown'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
|
|
|
341 |
e.<span class="me1">target</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'node'</span><span class="br0">)</span>.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'img'</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'selected'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
342 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
343 |
<span class="co1">//On drag start, get all the selected elements</span>
|
|
|
344 |
<span class="co1">//Add the count to the proxy element and offset it to the cursor.</span>
|
|
|
345 |
Y.<span class="me1">DD</span>.<span class="me1">DDM</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>
|
|
|
346 |
<span class="co1">//How many items are selected</span>
|
|
|
347 |
<span class="kw2">var</span> count <span class="sy0">=</span> wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'img.selected'</span><span class="br0">)</span>.<span class="me1">size</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
348 |
<span class="co1">//Set the style on the proxy node</span>
|
|
|
349 |
e.<span class="me1">target</span>.<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>
|
|
|
350 |
height<span class="sy0">:</span> <span class="st0">'25px'</span><span class="sy0">,</span> width<span class="sy0">:</span> <span class="st0">'25px'</span>
|
|
|
351 |
<span class="br0">}</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> <span class="sy0">+</span> count <span class="sy0">+</span> <span class="st0">'</span>'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
352 |
<span class="co1">//Offset the dragNode</span>
|
|
|
353 |
e.<span class="me1">target</span>.<span class="me1">deltaXY</span> <span class="sy0">=</span> <span class="br0">[</span><span class="nu0">25</span><span class="sy0">,</span> <span class="nu0">5</span><span class="br0">]</span><span class="sy0">;</span>
|
|
|
354 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
355 |
<span class="co1">//We dropped on a drop target</span>
|
|
|
356 |
Y.<span class="me1">DD</span>.<span class="me1">DDM</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>
|
|
|
357 |
<span class="co1">//get the images that are selected.</span>
|
|
|
358 |
<span class="kw2">var</span> imgs <span class="sy0">=</span> wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'img.selected'</span><span class="br0">)</span><span class="sy0">,</span>
|
|
|
359 |
<span class="co1">//The xy position of the item we dropped on</span>
|
|
|
360 |
toXY <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="me1">getXY</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
361 |
|
|
|
362 |
imgs.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span>node<span class="br0">)</span> <span class="br0">{</span>
|
|
|
363 |
<span class="co1">//Clone the image, position it on top of the original and animate it to the drop target</span>
|
|
|
364 |
node.<span class="me1">get</span><span class="br0">(</span><span class="st0">'parentNode'</span><span class="br0">)</span>.<span class="me1">addClass</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">'id'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
365 |
<span class="kw2">var</span> n <span class="sy0">=</span> node.<span class="me1">cloneNode</span><span class="br0">(</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'id'</span><span class="sy0">,</span> <span class="st0">''</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'position'</span><span class="sy0">,</span> <span class="st0">'absolute'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
366 |
Y.<span class="me1">get</span><span class="br0">(</span><span class="st0">'body'</span><span class="br0">)</span>.<span class="me1">appendChild</span><span class="br0">(</span>n<span class="br0">)</span><span class="sy0">;</span>
|
|
|
367 |
n.<span class="me1">setXY</span><span class="br0">(</span>node.<span class="me1">getXY</span><span class="br0">(</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
368 |
<span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span>
|
|
|
369 |
node<span class="sy0">:</span> n<span class="sy0">,</span>
|
|
|
370 |
to<span class="sy0">:</span> <span class="br0">{</span>
|
|
|
371 |
height<span class="sy0">:</span> <span class="nu0">20</span><span class="sy0">,</span> width<span class="sy0">:</span> <span class="nu0">20</span><span class="sy0">,</span> opacity<span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">,</span>
|
|
|
372 |
top<span class="sy0">:</span> toXY<span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span><span class="sy0">,</span> left<span class="sy0">:</span> toXY<span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span>
|
|
|
373 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
374 |
from<span class="sy0">:</span> <span class="br0">{</span>
|
|
|
375 |
width<span class="sy0">:</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">'offsetWidth'</span><span class="br0">)</span><span class="sy0">,</span>
|
|
|
376 |
height<span class="sy0">:</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">'offsetHeight'</span><span class="br0">)</span>
|
|
|
377 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
378 |
duration<span class="sy0">:</span> .5
|
|
|
379 |
<span class="br0">}</span><span class="br0">)</span>.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
380 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
381 |
<span class="co1">//Update the count</span>
|
|
|
382 |
<span class="kw2">var</span> count <span class="sy0">=</span> wrapper.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">'li.'</span> <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="me1">get</span><span class="br0">(</span><span class="st0">'id'</span><span class="br0">)</span><span class="br0">)</span>.<span class="me1">size</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
383 |
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">query</span><span class="br0">(</span><span class="st0">'span'</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="sy0">+</span> count <span class="sy0">+</span> <span class="st0">')'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
384 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
385 |
<span class="co1">//Add drop support to the albums</span>
|
|
|
386 |
Y.<span class="me1">all</span><span class="br0">(</span><span class="st0">'#photoList li'</span><span class="br0">)</span>.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span>node<span class="br0">)</span> <span class="br0">{</span>
|
|
|
387 |
<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>node.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'all'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
388 |
<span class="co1">//make all albums Drop Targets except the all photos.</span>
|
|
|
389 |
node.<span class="me1">plug</span><span class="br0">(</span>Y.<span class="me1">Plugin</span>.<span class="me1">Drop</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
390 |
<span class="br0">}</span>
|
|
|
391 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
392 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax6-plain">YUI().use('node', 'anim', 'dd', 'yql', 'slider', 'stylesheet', function(Y) {
|
|
|
393 |
//Get a reference to the wrapper to use later and add a loading class to it.
|
|
|
394 |
var wrapper = Y.get('#yui-main .yui-g ul').addClass('loading');
|
|
|
395 |
//Set its height to the height of the viewport so we can scroll it.
|
|
|
396 |
wrapper.setStyle('height', (wrapper.get('winHeight') - 50 )+ 'px');
|
|
|
397 |
Y.on('windowresize', function() { wrapper.setStyle('height', (wrapper.get('winHeight') - 50 )+ 'px'); });
|
|
|
398 |
//Make the YQL query.
|
|
|
399 |
new Y.yql('select * from flickr.photos.search(100) where text="openhacklondon" and safe_search = 1 and media = "photos" and extras = "o_dims" and ((o_width = "1600" and o_height = "1200") or (o_width = "1200" and o_height = "1600") or (o_width = "800" and o_height = "600") or (o_width = "600" and o_height = "800"))', function(e) {
|
|
|
400 |
if (e.query) {
|
|
|
401 |
var photos = e.query.results.photo;
|
|
|
402 |
//Walk the returned photos array
|
|
|
403 |
Y.each(photos, function(v, k) {
|
|
|
404 |
//Create our URL
|
|
|
405 |
var url = 'http:/'+'/static.flickr.com/' + v.server + '/' + v.id + '_' + v.secret + '_m.jpg',
|
|
|
406 |
//Create the image and the LI
|
|
|
407 |
li = Y.Node.create('<li class="loading"><img src="' + url + '" title="' + v.title + '"></li>'),
|
|
|
408 |
//Get the image from the LI
|
|
|
409 |
img = li.get('firstChild');
|
|
|
410 |
//Append the li to the wrapper
|
|
|
411 |
wrapper.appendChild(li);
|
|
|
412 |
//This little hack moves the tall images to the bottom of the list
|
|
|
413 |
//So they float better ;)
|
|
|
414 |
img.on('load', function() {
|
|
|
415 |
//Is the height longer than the width?
|
|
|
416 |
var c = ((this.get('height') > this.get('width')) ? 'tall' : 'wide');
|
|
|
417 |
this.addClass(c);
|
|
|
418 |
if (c === 'tall') {
|
|
|
419 |
//Move it to the end of the list.
|
|
|
420 |
this.get('parentNode.parentNode').removeChild(this.get('parentNode'));
|
|
|
421 |
wrapper.appendChild(this.get('parentNode'));
|
|
|
422 |
}
|
|
|
423 |
this.get('parentNode').removeClass('loading');
|
|
|
424 |
});
|
|
|
425 |
});
|
|
|
426 |
//Get all the newly added li's
|
|
|
427 |
wrapper.queryAll('li').each(function(node) {
|
|
|
428 |
//Plugin the Drag plugin
|
|
|
429 |
this.plug(Y.Plugin.Drag, {
|
|
|
430 |
offsetNode: false
|
|
|
431 |
});
|
|
|
432 |
//Plug the Proxy into the DD object
|
|
|
433 |
this.dd.plug(Y.Plugin.DDProxy, {
|
|
|
434 |
resizeFrame: false,
|
|
|
435 |
moveOnEnd: false,
|
|
|
436 |
borderStyle: 'none'
|
|
|
437 |
});
|
|
|
438 |
});
|
|
|
439 |
//Create and render the slider
|
|
|
440 |
var sl = new Y.Slider({
|
|
|
441 |
railSize: '200px', value: 40, max: 70, min: 5,
|
|
|
442 |
thumbImage: assetsDir + 'css/thumb-classic-x.png'
|
|
|
443 |
}).render('.horiz_slider');
|
|
|
444 |
//Listen for the change
|
|
|
445 |
sl.after('valueChange',function (e) {
|
|
|
446 |
//Insert a dynamic stylesheet rule
|
|
|
447 |
var sheet = new Y.StyleSheet('image_slider');
|
|
|
448 |
sheet.set('#yui-main .yui-g ul li', {
|
|
|
449 |
width: (e.newVal / 2) + '%'
|
|
|
450 |
});
|
|
|
451 |
});
|
|
|
452 |
//Remove the DDM as a bubble target..
|
|
|
453 |
sl._dd.removeTarget(Y.DD.DDM);
|
|
|
454 |
//Remove the wrappers loading class
|
|
|
455 |
wrapper.removeClass('loading');
|
|
|
456 |
Y.get('#ft').removeClass('loading');
|
|
|
457 |
}
|
|
|
458 |
});
|
|
|
459 |
//Listen for all mouseups on the document (selecting/deselecting images)
|
|
|
460 |
Y.on('delegate', function(e) {
|
|
|
461 |
if (!e.shiftKey) {
|
|
|
462 |
//No shift key - remove all selected images
|
|
|
463 |
wrapper.queryAll('img.selected').removeClass('selected');
|
|
|
464 |
}
|
|
|
465 |
//Check if the target is an image and select it.
|
|
|
466 |
if (e.target.test('#yui-main .yui-g ul li img')) {
|
|
|
467 |
e.target.addClass('selected');
|
|
|
468 |
}
|
|
|
469 |
}, document, 'mouseup', '*');
|
|
|
470 |
//Listen for all clicks on the '#photoList li' selector
|
|
|
471 |
Y.on('delegate', function(e) {
|
|
|
472 |
//Prevent the click
|
|
|
473 |
e.halt();
|
|
|
474 |
//Remove all the selected items
|
|
|
475 |
e.currentTarget.get('parentNode').queryAll('li.selected').removeClass('selected');
|
|
|
476 |
//Add the selected class to the one that one clicked
|
|
|
477 |
e.currentTarget.addClass('selected');
|
|
|
478 |
//The "All Photos" link was clicked
|
|
|
479 |
if (e.currentTarget.hasClass('all')) {
|
|
|
480 |
//Remove all the hidden classes
|
|
|
481 |
wrapper.queryAll('li').removeClass('hidden');
|
|
|
482 |
} else {
|
|
|
483 |
//Another "album" was clicked, get its id
|
|
|
484 |
var c = e.currentTarget.get('id');
|
|
|
485 |
//Hide all items by adding the hidden class
|
|
|
486 |
wrapper.queryAll('li').addClass('hidden');
|
|
|
487 |
//Now, find all the items with the class name the same as the album id
|
|
|
488 |
//and remove the hidden class
|
|
|
489 |
wrapper.queryAll('li.' + c).removeClass('hidden');
|
|
|
490 |
}
|
|
|
491 |
}, document, 'click', '#photoList li');
|
|
|
492 |
//Stop the drag with the escape key
|
|
|
493 |
Y.get(document).on('keypress', function(e) {
|
|
|
494 |
//The escape key was pressed
|
|
|
495 |
if ((e.keyCode === 27) || (e.charCode === 27)) {
|
|
|
496 |
//We have an active Drag
|
|
|
497 |
if (Y.DD.DDM.activeDrag) {
|
|
|
498 |
//Stop the drag
|
|
|
499 |
Y.DD.DDM.activeDrag.stopDrag();
|
|
|
500 |
}
|
|
|
501 |
}
|
|
|
502 |
});
|
|
|
503 |
//On the drag:mouseDown add the selected class
|
|
|
504 |
Y.DD.DDM.on('drag:mouseDown', function(e) {
|
|
|
505 |
e.target.get('node').queryAll('img').addClass('selected');
|
|
|
506 |
});
|
|
|
507 |
//On drag start, get all the selected elements
|
|
|
508 |
//Add the count to the proxy element and offset it to the cursor.
|
|
|
509 |
Y.DD.DDM.on('drag:start', function(e) {
|
|
|
510 |
//How many items are selected
|
|
|
511 |
var count = wrapper.queryAll('img.selected').size();
|
|
|
512 |
//Set the style on the proxy node
|
|
|
513 |
e.target.get('dragNode').setStyles({
|
|
|
514 |
height: '25px', width: '25px'
|
|
|
515 |
}).set('innerHTML', '<span>' + count + '</span>');
|
|
|
516 |
//Offset the dragNode
|
|
|
517 |
e.target.deltaXY = [25, 5];
|
|
|
518 |
});
|
|
|
519 |
//We dropped on a drop target
|
|
|
520 |
Y.DD.DDM.on('drag:drophit', function(e) {
|
|
|
521 |
//get the images that are selected.
|
|
|
522 |
var imgs = wrapper.queryAll('img.selected'),
|
|
|
523 |
//The xy position of the item we dropped on
|
|
|
524 |
toXY = e.drop.get('node').getXY();
|
|
|
525 |
|
|
|
526 |
imgs.each(function(node) {
|
|
|
527 |
//Clone the image, position it on top of the original and animate it to the drop target
|
|
|
528 |
node.get('parentNode').addClass(e.drop.get('node').get('id'));
|
|
|
529 |
var n = node.cloneNode().set('id', '').setStyle('position', 'absolute');
|
|
|
530 |
Y.get('body').appendChild(n);
|
|
|
531 |
n.setXY(node.getXY());
|
|
|
532 |
new Y.Anim({
|
|
|
533 |
node: n,
|
|
|
534 |
to: {
|
|
|
535 |
height: 20, width: 20, opacity: 0,
|
|
|
536 |
top: toXY[1], left: toXY[0]
|
|
|
537 |
},
|
|
|
538 |
from: {
|
|
|
539 |
width: node.get('offsetWidth'),
|
|
|
540 |
height: node.get('offsetHeight')
|
|
|
541 |
},
|
|
|
542 |
duration: .5
|
|
|
543 |
}).run();
|
|
|
544 |
});
|
|
|
545 |
//Update the count
|
|
|
546 |
var count = wrapper.queryAll('li.' + e.drop.get('node').get('id')).size();
|
|
|
547 |
e.drop.get('node').query('span').set('innerHTML', '(' + count + ')');
|
|
|
548 |
});
|
|
|
549 |
//Add drop support to the albums
|
|
|
550 |
Y.all('#photoList li').each(function(node) {
|
|
|
551 |
if (!node.hasClass('all')) {
|
|
|
552 |
//make all albums Drop Targets except the all photos.
|
|
|
553 |
node.plug(Y.Plugin.Drop);
|
|
|
554 |
}
|
|
|
555 |
});
|
|
|
556 |
});</textarea></div>
|
|
|
557 |
</div>
|
|
|
558 |
<div class="yui-u sidebar">
|
|
|
559 |
|
|
|
560 |
|
|
|
561 |
<div id="examples" class="mod box4">
|
|
|
562 |
<div class="hd">
|
|
|
563 |
<h4>
|
|
|
564 |
Drag & Drop Examples:</h4>
|
|
|
565 |
</div>
|
|
|
566 |
<div class="bd">
|
|
|
567 |
<ul>
|
|
|
568 |
<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><a href='../dd/portal-drag.html'>Portal Style Example</a></li><li class='selected'><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>
|
|
|
569 |
</div>
|
|
|
570 |
</div>
|
|
|
571 |
|
|
|
572 |
<div class="mod box4">
|
|
|
573 |
<div class="hd">
|
|
|
574 |
<h4>More Drag & Drop Resources:</h4>
|
|
|
575 |
</div>
|
|
|
576 |
<div class="bd">
|
|
|
577 |
<ul>
|
|
|
578 |
<!-- <li><a href="http://developer.yahoo.com/yui/dd/">User's Guide</a> (external)</li> -->
|
|
|
579 |
<li><a href="../../api/module_dd.html">API Documentation</a></li></ul>
|
|
|
580 |
</div>
|
|
|
581 |
</div>
|
|
|
582 |
</div>
|
|
|
583 |
</div>
|
|
|
584 |
|
|
|
585 |
</div>
|
|
|
586 |
</div>
|
|
|
587 |
|
|
|
588 |
|
|
|
589 |
<div class="yui-b toc3" id="tocWrapper">
|
|
|
590 |
<!-- TABLE OF CONTENTS -->
|
|
|
591 |
<div id="toc">
|
|
|
592 |
|
|
|
593 |
<ul>
|
|
|
594 |
<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>
|
|
|
595 |
</div>
|
|
|
596 |
</div>
|
|
|
597 |
</div><!--closes bd-->
|
|
|
598 |
|
|
|
599 |
<div id="ft">
|
|
|
600 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p>
|
|
|
601 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
|
|
|
602 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
|
|
|
603 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
|
|
|
604 |
<a href="http://careers.yahoo.com/">Job Openings</a></p>
|
|
|
605 |
</div>
|
|
|
606 |
</div>
|
|
|
607 |
<script language="javascript">
|
|
|
608 |
var yuiConfig = {base:"../../build/", timeout: 10000};
|
|
|
609 |
</script>
|
|
|
610 |
<script src="../../assets/syntax.js"></script>
|
|
|
611 |
<script src="../../assets/dpSyntaxHighlighter.js"></script>
|
|
|
612 |
<script language="javascript">
|
|
|
613 |
dp.SyntaxHighlighter.HighlightAll('code');
|
|
|
614 |
</script>
|
|
|
615 |
</body>
|
|
|
616 |
</html>
|