git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojo/tests/dnd/flickr_viewer.html

   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>