Blame | Last modification | View Log | RSS feed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Sort Flickr images by tags</title><style type="text/css">@import "../../resources/dojo.css";@import "../../resources/dnd.css";body {padding: 1em;}/* application-specific settings */#status {font-weight: bold;}.container {padding: 5px; cursor: default; background: #f8f8ff;}.wrap1 {float: left; width: 275px; height: 600px; overflow: auto; margin-right: 1em;}.wrap1 div {min-height: 100px;}.wrap2 {width: 350px; height: 170px; overflow: auto;}.wrap2 div {min-height: 150px;}.container .name {font-weight: bold; padding-right: 4px;}.container .image {padding: 5px;}body.dojoDndCopy, body.dojoDndMove {color: #888;}.dojoDndCopy .container, .dojoDndMove .container {background: #ddf;}/* container-specific settings */.dojoDndContainer {border: 1px solid white; color: black;}.dojoDndContainerOver {border: 1px solid black; color: black;}.container.dojoDndTargetDisabled {background: #ccc; color: #888;}/* item-specific settings */.dojoDndItemOver {background: #feb;}.dojoDndItemSelected {background: #ccf; color: #444;}.dojoDndItemAnchor {background: #ccf; color: black;}.dojoDndItemOver.dojoDndItemSelected {background: #ec8;}.dojoDndItemOver.dojoDndItemAnchor {background: #ec8;}.dojoDndItemBefore {border-top: 3px solid red;}.dojoDndItemAfter {border-bottom: 3px solid red;}.dojoDndHorizontal .dojoDndItemBefore {border-top: none;}.dojoDndHorizontal .dojoDndItemAfter {border-bottom: none;}.dojoDndHorizontal .dojoDndItemBefore img {border-left: 3px solid red;}.dojoDndHorizontal .dojoDndItemAfter img {border-right: 3px solid red;}</style><script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script><script type="text/javascript" src="../../dnd/common.js"></script><script type="text/javascript" src="../../dnd/autoscroll.js"></script><script type="text/javascript" src="../../dnd/Container.js"></script><script type="text/javascript" src="../../dnd/Selector.js"></script><script type="text/javascript" src="../../dnd/Source.js"></script><script type="text/javascript" src="../../dnd/Avatar.js"></script><script type="text/javascript" src="../../dnd/Manager.js"></script><script type="text/javascript">dojo.require("dojo.parser");dojo.require("dojo.io.script");dojo.require("dojo.dnd.Source");// The main image container creatorvar main_creator = function(item, hint){var type = [];if(item.tags.search(/cat/i) >= 0){ type.push("cat"); }if(item.tags.search(/dog/i) >= 0){ type.push("dog"); }var node;if(hint == "avatar"){node = dojo.doc.createElement("span");node.innerHTML = "<img src='" + item.media.m.replace(/_m\./, "_s.") + "'/>";}else{var t = ["<table border='0' cellpadding='0' cellspacing='0' width='250'>"];t.push("<tr><td colspan='2' class='image' align='center' width='250'><img src='" +item.media.m + "'/></td></tr>");t.push("<tr><td class='name' valign='top'>Title:</td><td class='value'><a href='" +item.link + "' target='_blank'>" +(item.title ? item.title : "<em>untitled</em>") + "</a></td></tr>");t.push("<tr><td class='name' valign='top'>Author:</td><td class='value'>" +item.author + "</td></tr>");t.push("<tr><td class='name' valign='top'>Tags:</td><td class='value'>" +item.tags + "</td></tr>");t.push("</table>");node = dojo.doc.createElement("div");node.innerHTML = t.join("");}node.id = dojo.dnd.getUniqueId();return {node: node, data: item, type: type};};// The band image container creatorvar band_creator = function(item, hint){var type = [];if(item.tags.search(/cat/i) >= 0){ type.push("cat"); }if(item.tags.search(/dog/i) >= 0){ type.push("dog"); }var src = item.media.m.replace(/_m\./, "_s.");var node = dojo.doc.createElement("span");node.innerHTML = "<img src='" + src + "'/>";node.id = dojo.dnd.getUniqueId();return {node: node, data: item, type: type};};// Flickr's JSONP functionvar jsonFlickrFeed = function(data){if(!data.items || !data.items.length){dojo.byId("status").innerHTML = "Flickr didn't return any images";return;}dojo.byId("status").innerHTML = data.items.length + " images were retrieved";// initialize sourcesc1.selectAll().deleteSelectedNodes();c2.selectAll().deleteSelectedNodes();c3.selectAll().deleteSelectedNodes();// populate the main sourcec1.insertNodes(false, data.items);};var init = function(){// replace the avatar string to make it more human readabledojo.dnd.Avatar.prototype._generateText = function(){return (this.manager.copy ? "copy" : "mov") +"ing " + this.manager.nodes.length + " item" +(this.manager.nodes.length != 1 ? "s" : "");};// ask Flickr for imagesvar td = dojo.io.script.get({url: "http://api.flickr.com/services/feeds/photos_public.gne",content: {tags: "cat,dog,cow", tagmode: "any", format: "json"},handleAs: "text/javascript",preventCache: true});td.addErrback(function(){dojo.byId("status").innerHTML = "Flickr failed to return images";});};dojo.addOnLoad(init);</script></head><body><h1>Sort Flickr images by tags</h1><p>This simple web application retrieves public images from Flickr that were tagged either as "cat", "dog", or "cow".You can copy/move images in different containers according to their tags.</p><p>Following selection modes are supported by default:</p><ul><li>Simple click — selects a single element, all other elements will be unselected.</li><li>Ctrl+click — toggles a selection state of an element (use Meta key on Mac).</li><li>Shift+click — selects a range of element from the previous anchor to the current element.</li><li>Ctrl+Shift+click — adds a range of element from the previous anchor to the current element (use Meta key on Mac).</li></ul><p>Following drop modes are supported by default:</p><ul><li>Simple drop — moves elements to the valid target removing them from the source. It can be used to reorganize elements within a single source/target.</li><li>Ctrl+drop — copies elements to the valid target (use Meta key on Mac).</li></ul><p>Now scroll down and start dragging and dropping, rearrange images using DnD, copy and move them back!</p><p>Status: <span id="status">retrieving a list of Flickr images...</span></p><div class="wrap1"><div dojoType="dojo.dnd.Source" jsId="c1" accept="cat, dog, cow" class="container"><script type="dojo/method" event="creator" args="item, hint">return main_creator(item, hint);</script></div></div><p>Tag: cat</p><div class="wrap2"><div dojoType="dojo.dnd.Source" jsId="c2" accept="cat" horizontal="true" class="container"><script type="dojo/method" event="creator" args="item, hint">return band_creator(item, hint);</script></div></div><p>Tag: dog</p><div class="wrap2"><div dojoType="dojo.dnd.Source" jsId="c3" accept="dog" horizontal="true" class="container"><script type="dojo/method" event="creator" args="item, hint">return band_creator(item, hint);</script></div></div></body></html>