flickr_viewer.html
7.02 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!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" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
require([
"dojo/dom", "dojo/parser", "dojo/request/script",
"dojo/dnd/common", "dojo/dnd/Avatar", "dojo/dnd/Source", "dojo/domReady!"
], function(dom, parser, script, dnd, Avatar, Source){
// The main image container creator
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 = document.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 = document.createElement("div");
node.innerHTML = t.join("");
}
node.id = dnd.getUniqueId();
return {node: node, data: item, type: type};
};
// The band image container creator
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 = document.createElement("span");
node.innerHTML = "<img src='" + src + "'/>";
node.id = dnd.getUniqueId();
return {node: node, data: item, type: type};
};
// Flickr's JSONP function.
jsonFlickrFeed = function(data){
if(!data.items || !data.items.length){
dom.byId("status").innerHTML = "Flickr didn't return any images";
return;
}
dom.byId("status").innerHTML = data.items.length + " images were retrieved";
// initialize sources
c1.selectAll().deleteSelectedNodes();
c2.selectAll().deleteSelectedNodes();
c3.selectAll().deleteSelectedNodes();
// populate the main source
c1.insertNodes(false, data.items);
};
// replace the avatar string to make it more human readable
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 images. This calls jsonFlickrFeed rather than coming in the promise result, not sure why.
script.get("http://api.flickr.com/services/feeds/photos_public.gne", {
query: {tags: "cat,dog,cow", tagmode: "any", format: "json"},
handleAs: "text/javascript",
preventCache: true
}).otherwise(
function(){
dom.byId("status").innerHTML = "Flickr failed to return images";
}
);
});
</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 data-dojo-type="dojo/dnd/Source" data-dojo-id="c1" accept="cat, dog, cow" class="container">
<script type="dojo/method" data-dojo-event="creator" data-dojo-args="item, hint">return main_creator(item, hint);</script>
</div>
</div>
<p>Tag: cat</p>
<div class="wrap2">
<div data-dojo-type="dojo/dnd/Source" data-dojo-id="c2" accept="cat" horizontal="true" class="container">
<script type="dojo/method" data-dojo-event="creator" data-dojo-args="item, hint">return band_creator(item, hint);</script>
</div>
</div>
<p>Tag: dog</p>
<div class="wrap2">
<div data-dojo-type="dojo/dnd/Source" data-dojo-id="c3" accept="dog" horizontal="true" class="container">
<script type="dojo/method" data-dojo-event="creator" data-dojo-args="item, hint">return band_creator(item, hint);</script>
</div>
</div>
</body>
</html>