diff options
Diffstat (limited to 'includes/js/dojo/tests/dnd/flickr_viewer.html')
| -rw-r--r-- | includes/js/dojo/tests/dnd/flickr_viewer.html | 168 |
1 files changed, 168 insertions, 0 deletions
diff --git a/includes/js/dojo/tests/dnd/flickr_viewer.html b/includes/js/dojo/tests/dnd/flickr_viewer.html new file mode 100644 index 0000000..4ede297 --- /dev/null +++ b/includes/js/dojo/tests/dnd/flickr_viewer.html @@ -0,0 +1,168 @@ +<!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 creator + var 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 creator + var 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 function + var 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 sources + c1.selectAll().deleteSelectedNodes(); + c2.selectAll().deleteSelectedNodes(); + c3.selectAll().deleteSelectedNodes(); + // populate the main source + c1.insertNodes(false, data.items); + }; + + var init = function(){ + // replace the avatar string to make it more human readable + dojo.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 images + var 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> |