1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4 <title>Sort Flickr images by tags</title>
5 <style type="text/css">
6 @import "../../resources/dojo.css";
7 @import "../../resources/dnd.css";
12 /* application-specific settings */
13 #status {font-weight: bold;}
14 .container {padding: 5px; cursor: default; background: #f8f8ff;}
15 .wrap1 {float: left; width: 275px; height: 600px; overflow: auto; margin-right: 1em;}
16 .wrap1 div {min-height: 100px;}
17 .wrap2 {width: 350px; height: 170px; overflow: auto;}
18 .wrap2 div {min-height: 150px;}
19 .container .name {font-weight: bold; padding-right: 4px;}
20 .container .image {padding: 5px;}
21 body.dojoDndCopy, body.dojoDndMove {color: #888;}
22 .dojoDndCopy .container, .dojoDndMove .container {background: #ddf;}
24 /* container-specific settings */
25 .dojoDndContainer {border: 1px solid white; color: black;}
26 .dojoDndContainerOver {border: 1px solid black; color: black;}
27 .container.dojoDndTargetDisabled {background: #ccc; color: #888;}
29 /* item-specific settings */
30 .dojoDndItemOver {background: #feb;}
31 .dojoDndItemSelected {background: #ccf; color: #444;}
32 .dojoDndItemAnchor {background: #ccf; color: black;}
33 .dojoDndItemOver.dojoDndItemSelected {background: #ec8;}
34 .dojoDndItemOver.dojoDndItemAnchor {background: #ec8;}
35 .dojoDndItemBefore {border-top: 3px solid red;}
36 .dojoDndItemAfter {border-bottom: 3px solid red;}
37 .dojoDndHorizontal .dojoDndItemBefore {border-top: none;}
38 .dojoDndHorizontal .dojoDndItemAfter {border-bottom: none;}
39 .dojoDndHorizontal .dojoDndItemBefore img {border-left: 3px solid red;}
40 .dojoDndHorizontal .dojoDndItemAfter img {border-right: 3px solid red;}
42 <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
43 <script type="text/javascript" src="../../dnd/common.js"></script>
44 <script type="text/javascript" src="../../dnd/autoscroll.js"></script>
45 <script type="text/javascript" src="../../dnd/Container.js"></script>
46 <script type="text/javascript" src="../../dnd/Selector.js"></script>
47 <script type="text/javascript" src="../../dnd/Source.js"></script>
48 <script type="text/javascript" src="../../dnd/Avatar.js"></script>
49 <script type="text/javascript" src="../../dnd/Manager.js"></script>
50 <script type="text/javascript">
51 dojo.require("dojo.parser");
52 dojo.require("dojo.io.script");
53 dojo.require("dojo.dnd.Source");
55 // The main image container creator
56 var main_creator = function(item, hint){
58 if(item.tags.search(/cat/i) >= 0){ type.push("cat"); }
59 if(item.tags.search(/dog/i) >= 0){ type.push("dog"); }
62 node = dojo.doc.createElement("span");
63 node.innerHTML = "<img src='" + item.media.m.replace(/_m\./, "_s.") + "'/>";
65 var t = ["<table border='0' cellpadding='0' cellspacing='0' width='250'>"];
66 t.push("<tr><td colspan='2' class='image' align='center' width='250'><img src='" +
67 item.media.m + "'/></td></tr>");
68 t.push("<tr><td class='name' valign='top'>Title:</td><td class='value'><a href='" +
69 item.link + "' target='_blank'>" +
70 (item.title ? item.title : "<em>untitled</em>") + "</a></td></tr>");
71 t.push("<tr><td class='name' valign='top'>Author:</td><td class='value'>" +
72 item.author + "</td></tr>");
73 t.push("<tr><td class='name' valign='top'>Tags:</td><td class='value'>" +
74 item.tags + "</td></tr>");
76 node = dojo.doc.createElement("div");
77 node.innerHTML = t.join("");
79 node.id = dojo.dnd.getUniqueId();
80 return {node: node, data: item, type: type};
83 // The band image container creator
84 var band_creator = function(item, hint){
86 if(item.tags.search(/cat/i) >= 0){ type.push("cat"); }
87 if(item.tags.search(/dog/i) >= 0){ type.push("dog"); }
88 var src = item.media.m.replace(/_m\./, "_s.");
89 var node = dojo.doc.createElement("span");
90 node.innerHTML = "<img src='" + src + "'/>";
91 node.id = dojo.dnd.getUniqueId();
92 return {node: node, data: item, type: type};
95 // Flickr's JSONP function
96 var jsonFlickrFeed = function(data){
97 if(!data.items || !data.items.length){
98 dojo.byId("status").innerHTML = "Flickr didn't return any images";
101 dojo.byId("status").innerHTML = data.items.length + " images were retrieved";
102 // initialize sources
103 c1.selectAll().deleteSelectedNodes();
104 c2.selectAll().deleteSelectedNodes();
105 c3.selectAll().deleteSelectedNodes();
106 // populate the main source
107 c1.insertNodes(false, data.items);
110 var init = function(){
111 // replace the avatar string to make it more human readable
112 dojo.dnd.Avatar.prototype._generateText = function(){
113 return (this.manager.copy ? "copy" : "mov") +
114 "ing " + this.manager.nodes.length + " item" +
115 (this.manager.nodes.length != 1 ? "s" : "");
117 // ask Flickr for images
118 var td = dojo.io.script.get({
119 url: "http://api.flickr.com/services/feeds/photos_public.gne",
120 content: {tags: "cat,dog,cow", tagmode: "any", format: "json"},
121 handleAs: "text/javascript",
124 td.addErrback(function(){
125 dojo.byId("status").innerHTML = "Flickr failed to return images";
129 dojo.addOnLoad(init);
133 <h1>Sort Flickr images by tags</h1>
134 <p>This simple web application retrieves public images from Flickr that were tagged either as "cat", "dog", or "cow".
135 You can copy/move images in different containers according to their tags.</p>
136 <p>Following selection modes are supported by default:</p>
138 <li>Simple click — selects a single element, all other elements will be unselected.</li>
139 <li>Ctrl+click — toggles a selection state of an element (use Meta key on Mac).</li>
140 <li>Shift+click — selects a range of element from the previous anchor to the current element.</li>
141 <li>Ctrl+Shift+click — adds a range of element from the previous anchor to the current element (use Meta key on Mac).</li>
143 <p>Following drop modes are supported by default:</p>
145 <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>
146 <li>Ctrl+drop — copies elements to the valid target (use Meta key on Mac).</li>
148 <p>Now scroll down and start dragging and dropping, rearrange images using DnD, copy and move them back!</p>
149 <p>Status: <span id="status">retrieving a list of Flickr images...</span></p>
151 <div dojoType="dojo.dnd.Source" jsId="c1" accept="cat, dog, cow" class="container">
152 <script type="dojo/method" event="creator" args="item, hint">return main_creator(item, hint);</script>
157 <div dojoType="dojo.dnd.Source" jsId="c2" accept="cat" horizontal="true" class="container">
158 <script type="dojo/method" event="creator" args="item, hint">return band_creator(item, hint);</script>
163 <div dojoType="dojo.dnd.Source" jsId="c3" accept="dog" horizontal="true" class="container">
164 <script type="dojo/method" event="creator" args="item, hint">return band_creator(item, hint);</script>