This example uses DD and YQL to build a Photo Browser application. This example was part of the YUI 3 presentation by @davglass at Open Hack : London
In this example, Drag and Drop is heavily customized by using "event bubbling" and "custom proxies".
When you see Y.DD.DDM.on in the code, you are seeing the built-in "event bubbling".
The DD dragNode is the proxy node, we add some styles to it allowing it to look the way we want.
Here is the Flickr YQL query used in this example.
SELECT * FROM flickr.photos.search(100) WHERE
(text="yuiconf")
AND (safe_search = 1)
AND (media = "photos")
AND (api_key = "1895311ec0d2e23431a6407f3e8dffcc")
Note: You need to get your own API key, please do not use ours.
In this example, we will use the Slider control to dynamically manipulate a CSS Style Rule.
First, we need to create the slider and render it.
//Create and render the slider
var sl = new Y.Slider({
length: '200px', value: 40, max: 70, min: 5
}).render('.horiz_slider');
Now, we listen for the Slider's valueChange event. This event is fired when the value of the Slider has changed.
Next we use the StyleSheet utility to dynamically change a style rule to resize the images.
The style rule that we want to change is #yui-main .yui-g ul li. 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.
This will give us the effect we want (resizing images) without touching all the images via the DOM.
//Listen for the change
sl.after('valueChange',function (e) {
//Insert a dynamic stylesheet rule:
var sheet = new Y.StyleSheet('image_slider');
sheet.set('#yui-main .yui-g ul li', {
width: (e.newVal / 2) + '%'
});
});
This listener listens for all mouseup events on the document and it will only fire when the target element matches the * selector (which should be all elements).
This way we can remove all the selected CSS classes from all the images in the browser when a mouseup 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.
//Listen for all mouseups on the document (selecting/deselecting images)
Y.delegate('mouseup' , function(e) {
if (!e.shiftKey) {
//No shift key - remove all selected images
wrapper.all('img.selected').removeClass('selected');
}
//Check if the target is an image and select it.
if (e.target.test('#yui-main .yui-g ul li img')) {
e.target.addClass('selected');
}
}, document, '*');
This listener, listens for all click events on the album list #photoList li.
First, it stops the click, so the href is not followed. Next, it removes all the selected classes from the list. Then, it adds the selected class to the item that was clicked on.
After that UI setup, it uses Selectors to change the view of the images in the browser.
First, it checks if we are viewing "all" or a "sub album". If all is selected, it removes the hidden class from all the images.
If it was an album, it adds the hidden class to all the images, then selects all the images with the class of its id, then it removes the hidden class from them.
Basically, it hides all the images, then determines the ones it needs to show and removes the hidden class from them.
//Listen for all clicks on the '#photoList li' selector
Y.delegate('click', function(e) {
//Prevent the click
e.halt();
//Remove all the selected items
e.currentTarget.get('parentNode').all('li.selected').removeClass('selected');
//Add the selected class to the one that one clicked
e.currentTarget.addClass('selected');
//The "All Photos" link was clicked
if (e.currentTarget.hasClass('all')) {
//Remove all the hidden classes
wrapper.all('li').removeClass('hidden');
} else {
//Another "album" was clicked, get its id
var c = e.target.get('id');
//Hide all items by adding the hidden class
wrapper.all('li').addClass('hidden');
//Now, find all the items with the class name the same as the album id
//and remove the hidden class
wrapper.all('li.' + c).removeClass('hidden');
}
}, document, '#photoList li');
Here is the full commented JavaScript source for this example.
YUI().use('yql', 'node', 'anim', 'dd', 'dd-plugin', 'dd-drop-plugin', 'slider', 'stylesheet', 'event-delegate', function(Y) {
//Get a reference to the wrapper to use later and add a loading class to it.
var wrapper = Y.one('#yui-main .yui-g ul').addClass('loading');
//Set it's height to the height of the viewport so we can scroll it.
wrapper.setStyle('height', (wrapper.get('winHeight') - 50 )+ 'px');
Y.on('windowresize', function() { wrapper.setStyle('height', (wrapper.get('winHeight') - 50 )+ 'px'); });
//Make the YQL query.
Y.YQL('SELECT * FROM flickr.photos.search(100) WHERE (text="yuiconf") AND (safe_search = 1) AND (media = "photos") AND (api_key = "1895311ec0d2e23431a6407f3e8dffcc")', function(e) {
if (e.query && e.query.results) {
var photos = e.query.results.photo;
//Walk the returned photos array
Y.each(photos, function(v, k) {
// Create our URL. Remember to sanitize any text coming from an
// unsafe source before it is inserted into the URL context.
var url = 'http:/'+'/static.flickr.com/' +
encodeURIComponent(v.server) + '/' +
encodeURIComponent(v.id) + '_' +
encodeURIComponent(v.secret) + '_m.jpg',
//Create the image and the LI
li = Y.Node.create('<li class="loading"><img src="' + url + '" title="' + v.title + '"></li>'),
//Get the image from the LI
img = li.get('firstChild');
//Append the li to the wrapper
wrapper.appendChild(li);
//This little hack moves the tall images to the bottom of the list
//So they float better ;)
img.on('load', function() {
//Is the height longer than the width?
var c = ((this.get('height') > this.get('width')) ? 'tall' : 'wide');
this.addClass(c);
if (c === 'tall') {
//Move it to the end of the list.
this.get('parentNode.parentNode').removeChild(this.get('parentNode'));
wrapper.appendChild(this.get('parentNode'));
}
this.get('parentNode').removeClass('loading');
});
});
//Get all the newly added li's
wrapper.all('li').each(function(node) {
//Plugin the Drag plugin
this.plug(Y.Plugin.Drag, {
offsetNode: false
});
//Plug the Proxy into the DD object
this.dd.plug(Y.Plugin.DDProxy, {
resizeFrame: false,
moveOnEnd: false,
borderStyle: 'none'
});
});
//Create and render the slider
var sl = new Y.Slider({
length: '200px', value: 40, max: 70, min: 5
}).render('.horiz_slider');
//Listen for the change
sl.after('valueChange',function (e) {
//Insert a dynamic stylesheet rule:
var sheet = new Y.StyleSheet('image_slider');
sheet.set('#yui-main .yui-g ul li', {
width: (e.newVal / 2) + '%'
});
});
//Remove the DDM as a bubble target..
sl._dd.removeTarget(Y.DD.DDM);
//Remove the wrappers loading class
wrapper.removeClass('loading');
Y.one('#ft').removeClass('loading');
}
});
//Listen for all mouseup's on the document (selecting/deselecting images)
Y.delegate('mouseup', function(e) {
if (!e.shiftKey) {
//No shift key - remove all selected images
wrapper.all('img.selected').removeClass('selected');
}
//Check if the target is an image and select it.
if (e.target.test('#yui-main .yui-g ul li img')) {
e.target.addClass('selected');
}
}, document, '*');
//Listen for all clicks on the '#photoList li' selector
Y.delegate('click', function(e) {
//Prevent the click
e.halt();
//Remove all the selected items
e.currentTarget.get('parentNode').all('li.selected').removeClass('selected');
//Add the selected class to the one that one clicked
e.currentTarget.addClass('selected');
//The "All Photos" link was clicked
if (e.currentTarget.hasClass('all')) {
//Remove all the hidden classes
wrapper.all('li').removeClass('hidden');
} else {
//Another "album" was clicked, get it's id
var c = e.currentTarget.get('id');
//Hide all items by adding the hidden class
wrapper.all('li').addClass('hidden');
//Now, find all the items with the class name the same as the album id
//and remove the hidden class
wrapper.all('li.' + c).removeClass('hidden');
}
}, document, '#photoList li');
//Stop the drag with the escape key
Y.one(document).on('keyup', function(e) {
//The escape key was pressed
if ((e.keyCode === 27) || (e.charCode === 27)) {
//We have an active Drag
if (Y.DD.DDM.activeDrag) {
//Stop the drag
Y.DD.DDM.activeDrag.stopDrag();
}
}
});
//On the drag:mouseDown add the selected class
Y.DD.DDM.on('drag:mouseDown', function(e) {
var img = e.target.get('node').one('img');
//If it's a gesture event, then we need to act differently
if (Y.DD.Drag.START_EVENT.indexOf('gesture') === 0) {
if (img.hasClass('selected')) {
img.removeClass('selected');
} else {
img.addClass('selected');
}
} else {
img.removeClass('selected');
}
});
//On drag start, get all the selected elements
//Add the count to the proxy element and offset it to the cursor.
Y.DD.DDM.on('drag:start', function(e) {
var img = e.target.get('node').one('img').addClass('selected');
//How many items are selected
var count = wrapper.all('img.selected').size();
//Set the style on the proxy node
e.target.get('dragNode').setStyles({
height: '25px', width: '25px'
}).set('innerHTML', '<span>' + count + '</span>');
//Offset the dragNode
e.target.deltaXY = [25, 5];
});
//We dropped on a drop target
Y.DD.DDM.on('drag:drophit', function(e) {
//get the images that are selected.
var imgs = wrapper.all('img.selected'),
//The xy position of the item we dropped on
toXY = e.drop.get('node').getXY();
imgs.each(function(node) {
//Clone the image, position it on top of the original and animate it to the drop target
node.get('parentNode').addClass(e.drop.get('node').get('id'));
var n = node.cloneNode().set('id', '').setStyle('position', 'absolute');
Y.one('body').appendChild(n);
n.setXY(node.getXY());
new Y.Anim({
node: n,
to: {
height: 20, width: 20, opacity: 0,
top: toXY[1], left: toXY[0]
},
from: {
width: node.get('offsetWidth'),
height: node.get('offsetHeight')
},
duration: .5
}).run();
});
//Update the count
var count = wrapper.all('li.' + e.drop.get('node').get('id')).size();
e.drop.get('node').one('span').set('innerHTML', '(' + count + ')');
});
//Add drop support to the albums
Y.all('#photoList li').each(function(node) {
if (!node.hasClass('all')) {
//make all albums Drop Targets except the all photos.
node.plug(Y.Plugin.Drop);
}
});
});