swat/apps/qooxdoo-examples/test/Gallery_3.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo</title>
   5   <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/qx.js"></script>
  10 </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <div id="demoDescription">
  15     <p>Test file for qx.ui.embed.Gallery, now with QxToolTips assigned.</p>
  16     <button onclick="updateAdd()">Update Add</button>
  17   </div>
  18
  19   <style type="text/css">
  20     .qx.ui.embed.Gallery .galleryFrame{
  21       padding: 2px;
  22     }
  23
  24     .qx.ui.embed.Gallery .galleryCell{
  25       border: 1px solid #444;
  26       background: #fff;
  27       margin: 2px;
  28       float: left;
  29       overflow: hidden;
  30
  31       font-family: Tahoma, Verdana, sans-serif;
  32       font-size: 10px;
  33
  34       cursor: default;
  35
  36       -moz-user-select: none;
  37       user-select: none;
  38     }
  39
  40     .qx.ui.embed.Gallery .galleryCell img{
  41       vertical-align: bottom;
  42       display: block;
  43     }
  44
  45     .qx.ui.embed.Gallery .galleryCell .galleryTitle,
  46     .qx.ui.embed.Gallery .galleryCell .galleryComment{
  47       background: #eee;
  48       padding: 3px 6px;
  49       text-align: center;
  50       cursor: default;
  51       overflow: hidden;
  52       white-space: nowrap;
  53     }
  54
  55     .qx.ui.embed.Gallery .galleryCell .galleryTitle{
  56       border-bottom: 1px solid #aaa;
  57     }
  58
  59     .qx.ui.embed.Gallery .galleryCell .galleryComment{
  60       border-top: 1px solid #aaa;
  61     }
  62
  63     .qx.ui.embed.Gallery .galleryCell-Selected{
  64       background: #DCE8F6;
  65       border: 1px solid #2760A1;
  66     }
  67
  68     .qx.ui.embed.Gallery .galleryCell-Selected .galleryTitle,
  69     .qx.ui.embed.Gallery .galleryCell-Selected .galleryComment{
  70       background: #9BBFE7;
  71     }
  72
  73     .qx.ui.embed.Gallery .galleryCell-Selected .galleryTitle{
  74       border-bottom: 1px dotted #2760A1;
  75     }
  76
  77     .qx.ui.embed.Gallery .galleryCell-Selected .galleryComment{
  78       border-top: 1px dotted #2760A1;
  79     }
  80
  81
  82     /* customize */
  83
  84     .qx.ui.embed.Gallery{
  85       background: #fff;
  86       padding: 5px;
  87     }
  88
  89     .qx.ui.embed.Gallery .galleryCell{
  90       margin: 5px;
  91       border: 1px solid #DCDFE8;
  92     }
  93
  94     .qx.ui.embed.Gallery .galleryCell-Selected{
  95       border: 1px solid #5E6474;
  96       background: #DADDE4;
  97     }
  98   </style>
  99
 100   <script type="text/javascript">
 101     var updateAdd;
 102
 103     qx.core.Init.getInstance().defineMain(function()
 104     {
 105       var galleryList = [];
 106
 107       for (var i=0; i<100; i++)
 108       {
 109         galleryList.push({
 110           display : "bmzN9ci5",
 111           width : 350,
 112           height : 350,
 113           thumbWidth : 64,
 114           thumbHeight : 64,
 115           title : "gohome" + i + ".png",
 116           timestamp : Math.random().toString(),
 117           comment : "Cool Comment: " + i,
 118           id : "7686191121780974-10682-" + i,
 119           src : qx.manager.object.AliasManager.getInstance().resolvePath("icon/64/paint.png")
 120         });
 121       };
 122
 123       var gallery = new qx.ui.embed.Gallery(galleryList);
 124
 125       gallery.setLeft(20);
 126       gallery.setRight(335);
 127       gallery.setTop(48);
 128       gallery.setBottom(48);
 129       gallery.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 130       gallery.setShowTitle(false);
 131       gallery.setShowComment(false);
 132       gallery.setDecorHeight(0);
 133
 134       qx.ui.core.ClientDocument.getInstance().add(gallery);
 135
 136
 137
 138       var toolTip = new qx.ui.popup.ToolTip("Photo Details", "icon/32/colors.png");
 139     gallery.setToolTip(toolTip);
 140
 141       gallery.addEventListener("beforeToolTipAppear", function(e)
 142     {
 143       var vNode = e.getData();
 144       var vEntry = this.getEntryByNode(vNode);
 145
 146         toolTip.getAtom().setLabel("<strong>" + vEntry.title + "</strong><br/>" + vEntry.comment);
 147
 148       this.setToolTip(toolTip);
 149       });
 150
 151
 152       updateAdd = function()
 153       {
 154         var galleryListUpdated = qx.lang.Array.copy(gallery.getList());
 155
 156         for (var i=galleryListUpdated.length, j=i+10; i<j; i++)
 157         {
 158           galleryListUpdated.push({
 159             display : "bmzN9ci5",
 160             width : 350,
 161             height : 350,
 162             thumbWidth : 64,
 163             thumbHeight : 64,
 164             title : "gohome" + i + ".png",
 165             timestamp : Math.random().toString(),
 166             comment : "Cool Comment: " + i,
 167             id : "7686191121780974-10682-" + i,
 168             src : qx.manager.object.AliasManager.getInstance().resolvePath("icon/64/colors.png")
 169           });
 170         };
 171
 172         gallery.addFromUpdatedList(galleryListUpdated);
 173       };
 174
 175     });
 176   </script>
 177 </body>
 178 </html>