|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en" class="yui3-loading"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Photo Browser</title> |
|
|
6 |
<link rel="stylesheet" href="http://yui.yahooapis.com/2.8.2/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> |
|
|
7 |
<link rel="stylesheet" type="text/css" href="../assets/dd/photos/photos.css"> |
|
|
8 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
9 |
</head> |
|
|
10 |
<body class="yui3-skin-sam"> |
|
|
11 |
|
|
|
12 |
|
|
|
13 |
<div id="doc3" class="yui-t1"> |
|
|
14 |
<div id="bd"> |
|
|
15 |
<div id="yui-main"> |
|
|
16 |
<div class="yui-b"> |
|
|
17 |
<div class="yui-g"> |
|
|
18 |
<ul> |
|
|
19 |
</ul> |
|
|
20 |
</div> |
|
|
21 |
</div> |
|
|
22 |
</div> |
|
|
23 |
<div class="yui-b"> |
|
|
24 |
<ul id="photoList"> |
|
|
25 |
<li class="all selected"><a href="#">All Photos</a></li> |
|
|
26 |
<li id="a_1"><a href="#">Album #1<span>(0)</span></a></li> |
|
|
27 |
<li id="a_2"><a href="#">Album #2<span>(0)</span></a></li> |
|
|
28 |
<li id="a_3"><a href="#">Album #3<span>(0)</span></a></li> |
|
|
29 |
<li id="a_4"><a href="#">Album #4<span>(0)</span></a></li> |
|
|
30 |
</ul> |
|
|
31 |
<p>Click and drag a photo to an album above. You can also Shift + Click to select and drag multiple photos.</p> |
|
|
32 |
<p>Click on an album to view the photos that you added.</p> |
|
|
33 |
<p>You can also use the slider at the bottom to adjust the size of the image to help fit them on your screen.</p> |
|
|
34 |
</div> |
|
|
35 |
</div> |
|
|
36 |
<div id="ft" class="loading"><strong></strong><div class="horiz_slider"></div><em></em></div> |
|
|
37 |
</div> |
|
|
38 |
|
|
|
39 |
|
|
|
40 |
<script> |
|
|
41 |
YUI().use('yql', 'node', 'anim', 'dd', 'dd-plugin', 'dd-drop-plugin', 'slider', 'stylesheet', 'event-delegate', function(Y) { |
|
|
42 |
//Get a reference to the wrapper to use later and add a loading class to it. |
|
|
43 |
var wrapper = Y.one('#yui-main .yui-g ul').addClass('loading'); |
|
|
44 |
//Set it's height to the height of the viewport so we can scroll it. |
|
|
45 |
wrapper.setStyle('height', (wrapper.get('winHeight') - 50 )+ 'px'); |
|
|
46 |
Y.on('windowresize', function() { wrapper.setStyle('height', (wrapper.get('winHeight') - 50 )+ 'px'); }); |
|
|
47 |
//Make the YQL query. |
|
|
48 |
Y.YQL('SELECT * FROM flickr.photos.search(100) WHERE (text="yuiconf") AND (safe_search = 1) AND (media = "photos") AND (api_key = "1895311ec0d2e23431a6407f3e8dffcc")', function(e) { |
|
|
49 |
if (e.query && e.query.results) { |
|
|
50 |
var photos = e.query.results.photo; |
|
|
51 |
//Walk the returned photos array |
|
|
52 |
Y.each(photos, function(v, k) { |
|
|
53 |
//Create our URL |
|
|
54 |
var url = 'http:/'+'/static.flickr.com/' + v.server + '/' + v.id + '_' + v.secret + '_m.jpg', |
|
|
55 |
//Create the image and the LI |
|
|
56 |
li = Y.Node.create('<li class="loading"><img src="' + url + '" title="' + v.title + '"></li>'), |
|
|
57 |
//Get the image from the LI |
|
|
58 |
img = li.get('firstChild'); |
|
|
59 |
//Append the li to the wrapper |
|
|
60 |
wrapper.appendChild(li); |
|
|
61 |
//This little hack moves the tall images to the bottom of the list |
|
|
62 |
//So they float better ;) |
|
|
63 |
img.on('load', function() { |
|
|
64 |
//Is the height longer than the width? |
|
|
65 |
var c = ((this.get('height') > this.get('width')) ? 'tall' : 'wide'); |
|
|
66 |
this.addClass(c); |
|
|
67 |
if (c === 'tall') { |
|
|
68 |
//Move it to the end of the list. |
|
|
69 |
this.get('parentNode.parentNode').removeChild(this.get('parentNode')); |
|
|
70 |
wrapper.appendChild(this.get('parentNode')); |
|
|
71 |
} |
|
|
72 |
this.get('parentNode').removeClass('loading'); |
|
|
73 |
}); |
|
|
74 |
}); |
|
|
75 |
//Get all the newly added li's |
|
|
76 |
wrapper.all('li').each(function(node) { |
|
|
77 |
//Plugin the Drag plugin |
|
|
78 |
this.plug(Y.Plugin.Drag, { |
|
|
79 |
offsetNode: false |
|
|
80 |
}); |
|
|
81 |
//Plug the Proxy into the DD object |
|
|
82 |
this.dd.plug(Y.Plugin.DDProxy, { |
|
|
83 |
resizeFrame: false, |
|
|
84 |
moveOnEnd: false, |
|
|
85 |
borderStyle: 'none' |
|
|
86 |
}); |
|
|
87 |
}); |
|
|
88 |
//Create and render the slider |
|
|
89 |
var sl = new Y.Slider({ |
|
|
90 |
length: '200px', value: 40, max: 70, min: 5 |
|
|
91 |
}).render('.horiz_slider'); |
|
|
92 |
//Listen for the change |
|
|
93 |
sl.after('valueChange',function (e) { |
|
|
94 |
//Insert a dynamic stylesheet rule: |
|
|
95 |
var sheet = new Y.StyleSheet('image_slider'); |
|
|
96 |
sheet.set('#yui-main .yui-g ul li', { |
|
|
97 |
width: (e.newVal / 2) + '%' |
|
|
98 |
}); |
|
|
99 |
}); |
|
|
100 |
//Remove the DDM as a bubble target.. |
|
|
101 |
sl._dd.removeTarget(Y.DD.DDM); |
|
|
102 |
//Remove the wrappers loading class |
|
|
103 |
wrapper.removeClass('loading'); |
|
|
104 |
Y.one('#ft').removeClass('loading'); |
|
|
105 |
} |
|
|
106 |
}); |
|
|
107 |
//Listen for all mouseup's on the document (selecting/deselecting images) |
|
|
108 |
Y.delegate('mouseup', function(e) { |
|
|
109 |
if (!e.shiftKey) { |
|
|
110 |
//No shift key - remove all selected images |
|
|
111 |
wrapper.all('img.selected').removeClass('selected'); |
|
|
112 |
} |
|
|
113 |
//Check if the target is an image and select it. |
|
|
114 |
if (e.target.test('#yui-main .yui-g ul li img')) { |
|
|
115 |
e.target.addClass('selected'); |
|
|
116 |
} |
|
|
117 |
}, document, '*'); |
|
|
118 |
|
|
|
119 |
//Listen for all clicks on the '#photoList li' selector |
|
|
120 |
Y.delegate('click', function(e) { |
|
|
121 |
//Prevent the click |
|
|
122 |
e.halt(); |
|
|
123 |
//Remove all the selected items |
|
|
124 |
e.currentTarget.get('parentNode').all('li.selected').removeClass('selected'); |
|
|
125 |
//Add the selected class to the one that one clicked |
|
|
126 |
e.currentTarget.addClass('selected'); |
|
|
127 |
//The "All Photos" link was clicked |
|
|
128 |
if (e.currentTarget.hasClass('all')) { |
|
|
129 |
//Remove all the hidden classes |
|
|
130 |
wrapper.all('li').removeClass('hidden'); |
|
|
131 |
} else { |
|
|
132 |
//Another "album" was clicked, get it's id |
|
|
133 |
var c = e.currentTarget.get('id'); |
|
|
134 |
//Hide all items by adding the hidden class |
|
|
135 |
wrapper.all('li').addClass('hidden'); |
|
|
136 |
//Now, find all the items with the class name the same as the album id |
|
|
137 |
//and remove the hidden class |
|
|
138 |
wrapper.all('li.' + c).removeClass('hidden'); |
|
|
139 |
} |
|
|
140 |
}, document, '#photoList li'); |
|
|
141 |
|
|
|
142 |
//Stop the drag with the escape key |
|
|
143 |
Y.one(document).on('keyup', function(e) { |
|
|
144 |
//The escape key was pressed |
|
|
145 |
if ((e.keyCode === 27) || (e.charCode === 27)) { |
|
|
146 |
//We have an active Drag |
|
|
147 |
if (Y.DD.DDM.activeDrag) { |
|
|
148 |
//Stop the drag |
|
|
149 |
Y.DD.DDM.activeDrag.stopDrag(); |
|
|
150 |
} |
|
|
151 |
} |
|
|
152 |
}); |
|
|
153 |
//On the drag:mouseDown add the selected class |
|
|
154 |
Y.DD.DDM.on('drag:mouseDown', function(e) { |
|
|
155 |
var img = e.target.get('node').one('img'); |
|
|
156 |
//If it's a gesture event, then we need to act differently |
|
|
157 |
if (Y.DD.Drag.START_EVENT.indexOf('gesture') === 0) { |
|
|
158 |
if (img.hasClass('selected')) { |
|
|
159 |
img.removeClass('selected'); |
|
|
160 |
} else { |
|
|
161 |
img.addClass('selected'); |
|
|
162 |
} |
|
|
163 |
} else { |
|
|
164 |
img.removeClass('selected'); |
|
|
165 |
} |
|
|
166 |
}); |
|
|
167 |
//On drag start, get all the selected elements |
|
|
168 |
//Add the count to the proxy element and offset it to the cursor. |
|
|
169 |
Y.DD.DDM.on('drag:start', function(e) { |
|
|
170 |
var img = e.target.get('node').one('img').addClass('selected'); |
|
|
171 |
//How many items are selected |
|
|
172 |
var count = wrapper.all('img.selected').size(); |
|
|
173 |
//Set the style on the proxy node |
|
|
174 |
e.target.get('dragNode').setStyles({ |
|
|
175 |
height: '25px', width: '25px' |
|
|
176 |
}).set('innerHTML', '<span>' + count + '</span>'); |
|
|
177 |
//Offset the dragNode |
|
|
178 |
e.target.deltaXY = [25, 5]; |
|
|
179 |
}); |
|
|
180 |
//We dropped on a drop target |
|
|
181 |
Y.DD.DDM.on('drag:drophit', function(e) { |
|
|
182 |
//get the images that are selected. |
|
|
183 |
var imgs = wrapper.all('img.selected'), |
|
|
184 |
//The xy position of the item we dropped on |
|
|
185 |
toXY = e.drop.get('node').getXY(); |
|
|
186 |
|
|
|
187 |
imgs.each(function(node) { |
|
|
188 |
//Clone the image, position it on top of the original and animate it to the drop target |
|
|
189 |
node.get('parentNode').addClass(e.drop.get('node').get('id')); |
|
|
190 |
var n = node.cloneNode().set('id', '').setStyle('position', 'absolute'); |
|
|
191 |
Y.one('body').appendChild(n); |
|
|
192 |
n.setXY(node.getXY()); |
|
|
193 |
new Y.Anim({ |
|
|
194 |
node: n, |
|
|
195 |
to: { |
|
|
196 |
height: 20, width: 20, opacity: 0, |
|
|
197 |
top: toXY[1], left: toXY[0] |
|
|
198 |
}, |
|
|
199 |
from: { |
|
|
200 |
width: node.get('offsetWidth'), |
|
|
201 |
height: node.get('offsetHeight') |
|
|
202 |
}, |
|
|
203 |
duration: .5 |
|
|
204 |
}).run(); |
|
|
205 |
}); |
|
|
206 |
//Update the count |
|
|
207 |
var count = wrapper.all('li.' + e.drop.get('node').get('id')).size(); |
|
|
208 |
e.drop.get('node').one('span').set('innerHTML', '(' + count + ')'); |
|
|
209 |
}); |
|
|
210 |
//Add drop support to the albums |
|
|
211 |
Y.all('#photoList li').each(function(node) { |
|
|
212 |
if (!node.hasClass('all')) { |
|
|
213 |
//make all albums Drop Targets except the all photos. |
|
|
214 |
node.plug(Y.Plugin.Drop); |
|
|
215 |
} |
|
|
216 |
}); |
|
|
217 |
}); |
|
|
218 |
|
|
|
219 |
|
|
|
220 |
</script> |
|
|
221 |
|
|
|
222 |
|
|
|
223 |
|
|
|
224 |
<script> |
|
|
225 |
YUI.Env.Tests = { |
|
|
226 |
examples: [], |
|
|
227 |
project: '../assets', |
|
|
228 |
assets: '../assets/dd', |
|
|
229 |
name: 'photo-browser', |
|
|
230 |
title: 'Photo Browser', |
|
|
231 |
newWindow: '', |
|
|
232 |
auto: false |
|
|
233 |
}; |
|
|
234 |
YUI.Env.Tests.examples.push('simple-drag'); |
|
|
235 |
YUI.Env.Tests.examples.push('drag-plugin'); |
|
|
236 |
YUI.Env.Tests.examples.push('proxy-drag'); |
|
|
237 |
YUI.Env.Tests.examples.push('constrained-drag'); |
|
|
238 |
YUI.Env.Tests.examples.push('groups-drag'); |
|
|
239 |
YUI.Env.Tests.examples.push('shim-drag'); |
|
|
240 |
YUI.Env.Tests.examples.push('drop-code'); |
|
|
241 |
YUI.Env.Tests.examples.push('winscroll'); |
|
|
242 |
YUI.Env.Tests.examples.push('delegate'); |
|
|
243 |
YUI.Env.Tests.examples.push('delegate-drop'); |
|
|
244 |
YUI.Env.Tests.examples.push('delegate-plugins'); |
|
|
245 |
YUI.Env.Tests.examples.push('list-drag'); |
|
|
246 |
YUI.Env.Tests.examples.push('scroll-list'); |
|
|
247 |
YUI.Env.Tests.examples.push('anim-drop'); |
|
|
248 |
YUI.Env.Tests.examples.push('photo-browser'); |
|
|
249 |
YUI.Env.Tests.examples.push('portal-drag'); |
|
|
250 |
YUI.Env.Tests.examples.push('yui-multi'); |
|
|
251 |
YUI.Env.Tests.examples.push('stylesheet-theme'); |
|
|
252 |
|
|
|
253 |
</script> |
|
|
254 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
255 |
|
|
|
256 |
|
|
|
257 |
</body> |
|
|
258 |
</html> |