Subversion Repositories Applications.papyrus

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
2150 mathias 1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 
<html>
3 
<head>
4 
	<title>Sort Flickr images by tags</title>
5 
	<style type="text/css">
6 
		@import "../../resources/dojo.css";
7 
		@import "../../resources/dnd.css";
8 
		body {
9 
			padding: 1em;
10 
		}
11 
 
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;}
23 
 
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;}
28 
 
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;}
41 
	</style>
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");
54 
 
55 
		// The main image container creator
56 
		var main_creator = function(item, hint){
57 
			var type = [];
58 
			if(item.tags.search(/cat/i) >= 0){ type.push("cat"); }
59 
			if(item.tags.search(/dog/i) >= 0){ type.push("dog"); }
60 
			var node;
61 
			if(hint == "avatar"){
62 
				node = dojo.doc.createElement("span");
63 
				node.innerHTML = "<img src='" + item.media.m.replace(/_m\./, "_s.") + "'/>";
64 
			}else{
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>");
75 
				t.push("</table>");
76 
				node = dojo.doc.createElement("div");
77 
				node.innerHTML = t.join("");
78 
			}
79 
			node.id = dojo.dnd.getUniqueId();
80 
			return {node: node, data: item, type: type};
81 
		};
82 
 
83 
		// The band image container creator
84 
		var band_creator = function(item, hint){
85 
			var type = [];
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};
93 
		};
94 
 
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";
99 
				return;
100 
			}
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);
108 
		};
109 
 
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" : "");
116 
			};
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",
122 
				preventCache: true
123 
			});
124 
			td.addErrback(function(){
125 
				dojo.byId("status").innerHTML = "Flickr failed to return images";
126 
			});
127 
		};
128 
 
129 
		dojo.addOnLoad(init);
130 
	</script>
131 
</head>
132 
<body>
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>
137 
	<ul>
138 
		<li>Simple click &mdash; selects a single element, all other elements will be unselected.</li>
139 
		<li>Ctrl+click &mdash; toggles a selection state of an element (use Meta key on Mac).</li>
140 
		<li>Shift+click &mdash; selects a range of element from the previous anchor to the current element.</li>
141 
		<li>Ctrl+Shift+click &mdash; adds a range of element from the previous anchor to the current element (use Meta key on Mac).</li>
142 
	</ul>
143 
	<p>Following drop modes are supported by default:</p>
144 
	<ul>
145 
		<li>Simple drop &mdash; 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 &mdash; copies elements to the valid target (use Meta key on Mac).</li>
147 
	</ul>
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>
150 
	<div class="wrap1">
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>
153 
		</div>
154 
	</div>
155 
	<p>Tag: cat</p>
156 
	<div class="wrap2">
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>
159 
		</div>
160 
	</div>
161 
	<p>Tag: dog</p>
162 
	<div class="wrap2">
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>
165 
		</div>
166 
	</div>
167 
</body>
168 
</html>