webapps/qooxdoo-0.6.3-sdk/frontend/framework/source/class/qx/ui/embed/GalleryList.js

   1 /* ************************************************************************
   2
   3    qooxdoo - the new era of web development
   4
   5    http://qooxdoo.org
   6
   7    Copyright:
   8      2004-2006 by 1&1 Internet AG, Germany, http://www.1and1.org
   9
  10    License:
  11      LGPL 2.1: http://www.gnu.org/licenses/lgpl.html
  12
  13    Authors:
  14      * Sebastian Werner (wpbasti)
  15      * Andreas Ecker (ecker)
  16
  17 ************************************************************************ */
  18
  19 /* ************************************************************************
  20
  21
  22 ************************************************************************ */
  23
  24 /**
  25  * @event loadComplete {qx.event.type.Event}
  26  */
  27 qx.OO.defineClass("qx.ui.embed.GalleryList", qx.ui.basic.Terminator,
  28 function(galleryList)
  29 {
  30   qx.ui.basic.Terminator.call(this);
  31
  32   this._blank = qx.manager.object.AliasManager.getInstance().resolvePath("static/image/blank.gif");
  33   this._list = galleryList;
  34   this._listSize = galleryList.length;
  35   this._processedImages = 0;
  36
  37   this.setOverflow("auto");
  38
  39   this.setHtmlProperty("className", "qx_ui_embed_GalleryList");
  40
  41   this._manager = new qx.manager.selection.DomSelectionManager(this);
  42
  43   this.addEventListener("mousedown", this._onmousedown);
  44   this.addEventListener("mouseup", this._onmouseup);
  45   this.addEventListener("click", this._onclick);
  46   this.addEventListener("dblclick", this._ondblclick);
  47   this.addEventListener("keypress", this._onkeypress);
  48 });
  49
  50 qx.OO.addProperty({ name : "thumbMaxWidth", type : "number", defaultValue : 60 });
  51 qx.OO.addProperty({ name : "thumbMaxHeight", type : "number", defaultValue : 60 });
  52 qx.OO.addProperty({ name : "decorHeight", type : "number", defaultValue : 40 });
  53
  54
  55
  56
  57
  58 /*
  59 ---------------------------------------------------------------------------
  60   ELEMENT HANDLING
  61 ---------------------------------------------------------------------------
  62 */
  63
  64 qx.Proto._applyElementData = function() {
  65   this.getElement().appendChild(this.createView());
  66 }
  67
  68
  69
  70 /*
  71 ---------------------------------------------------------------------------
  72   UTILITIES
  73 ---------------------------------------------------------------------------
  74 */
  75
  76 qx.Proto.getManager = function() {
  77   return this._manager;
  78 }
  79
  80
  81 qx.Proto.update = function(vGalleryList)
  82 {
  83   this._manager.deselectAll();
  84
  85   this._list = vGalleryList;
  86
  87   var el = this.getElement();
  88   el.replaceChild(this.createView(), el.firstChild);
  89 }
  90
  91
  92 qx.Proto.removeAll = function()
  93 {
  94   this._manager.deselectAll();
  95   this.getElement().innerHTML = "";
  96 }
  97
  98
  99 /*
 100 ---------------------------------------------------------------------------
 101   EVENT HANDLER
 102 ---------------------------------------------------------------------------
 103 */
 104
 105 qx.Proto._onmousedown = function(e)
 106 {
 107   var vItem = this.getListItemTarget(e.getDomTarget());
 108
 109   if (vItem) {
 110     this._manager.handleMouseDown(vItem, e);
 111   }
 112 }
 113
 114 qx.Proto._onmouseup = function(e)
 115 {
 116   var vItem = this.getListItemTarget(e.getDomTarget());
 117
 118   if (vItem) {
 119     this._manager.handleMouseUp(vItem, e);
 120   }
 121 }
 122
 123 qx.Proto._onclick = function(e)
 124 {
 125   var vItem = this.getListItemTarget(e.getDomTarget());
 126
 127   if (vItem) {
 128     this._manager.handleClick(vItem, e);
 129   }
 130 }
 131
 132 qx.Proto._ondblclick = function(e)
 133 {
 134   var vItem = this.getListItemTarget(e.getDomTarget());
 135
 136   if (vItem) {
 137     this._manager.handleDblClick(vItem, e);
 138   }
 139 }
 140
 141 qx.Proto._onkeypress = function(e) {
 142   this._manager.handleKeyPress(e);
 143 }
 144
 145 qx.Proto.getListItemTarget = function(dt)
 146 {
 147   while(dt.className.indexOf("galleryCell") == -1 && dt.tagName.toLowerCase() != "body") {
 148     dt = dt.parentNode;
 149   }
 150
 151   if (dt.tagName.toLowerCase() == "body") {
 152     return null;
 153   }
 154
 155   return dt;
 156 }
 157
 158
 159
 160
 161
 162
 163
 164 /*
 165 ---------------------------------------------------------------------------
 166   SCROLL INTO VIEW
 167 ---------------------------------------------------------------------------
 168 */
 169
 170 qx.Proto.scrollItemIntoView = function(vItem)
 171 {
 172   this.scrollItemIntoViewX(vItem);
 173   this.scrollItemIntoViewY(vItem);
 174 }
 175
 176 qx.Proto.scrollItemIntoViewX = function(vItem) {
 177   qx.dom.ScrollIntoView.scrollX(vItem);
 178 }
 179
 180 qx.Proto.scrollItemIntoViewY = function(vItem) {
 181   qx.dom.ScrollIntoView.scrollY(vItem);
 182 }
 183
 184
 185
 186
 187
 188
 189
 190
 191
 192 /*
 193 ---------------------------------------------------------------------------
 194   SELECTION MANAGER API
 195 ---------------------------------------------------------------------------
 196 */
 197
 198 qx.Proto.getItems = function() {
 199   return this._frame.childNodes;
 200 }
 201
 202 qx.Proto.getFirstChild = function() {
 203   return this._frame.childNodes[0];
 204 }
 205
 206 qx.Proto.getLastChild = function() {
 207   return this._frame.childNodes[this._frame.childNodes.length-1];
 208 }
 209
 210
 211
 212
 213
 214
 215 /*
 216 ---------------------------------------------------------------------------
 217   CREATE VIEW
 218 ---------------------------------------------------------------------------
 219 */
 220
 221 qx.Proto.createView = function()
 222 {
 223   var s = (new Date).valueOf();
 224
 225   var protoCell = this.createProtoCell(this.getThumbMaxHeight());
 226   var frame = this._frame = document.createElement("div");
 227
 228   this._frame.className = "galleryFrame clearfix";
 229
 230   var cframe, cnode;
 231
 232   for (var i=0, a=this._list, l=a.length, d; i<l; i++)
 233   {
 234     d = a[i];
 235
 236     cframe = protoCell.cloneNode(true);
 237
 238     cframe.id = d.id;
 239     cframe.pos = i;
 240
 241     cnode = cframe.childNodes[0];
 242     cnode.firstChild.nodeValue = d.number;
 243
 244     cnode = cframe.childNodes[1].firstChild;
 245     this.createImageCell(cnode, d);
 246
 247     cnode = cframe.childNodes[2].firstChild;
 248     cnode.firstChild.nodeValue = d.title;
 249
 250     cnode = cframe.childNodes[2].lastChild;
 251     cnode.firstChild.nodeValue = d.comment;
 252
 253     frame.appendChild(cframe);
 254   }
 255
 256   return frame;
 257 }
 258
 259 qx.Proto._mshtml = qx.sys.Client.getInstance().isMshtml();
 260
 261 qx.Proto.createImageCell = function(inode, d)
 262 {
 263   if (this.hasEventListeners("loadComplete")) {
 264     inode.onload = qx.ui.embed.GalleryList.imageOnLoad;
 265     inode.onerror = qx.ui.embed.GalleryList.imageOnError;
 266     inode.gallery = this;
 267   }
 268
 269   inode.width = d.thumbWidth;
 270   inode.height = d.thumbHeight;
 271
 272   if (this._mshtml) {
 273     inode.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + d.src + "',sizingMethod='scale')";
 274   } else {
 275     inode.src = d.src;
 276   }
 277
 278   inode.style.marginLeft = inode.style.marginRight = Math.floor((this.getThumbMaxWidth()-d.thumbWidth)/2) + "px";
 279   inode.style.marginTop = inode.style.marginBottom = Math.floor((this.getThumbMaxHeight()-d.thumbHeight)/2) + "px";
 280 }
 281
 282 qx.Proto.createProtoCell = function(tHeight)
 283 {
 284   var frame = document.createElement("div");
 285   frame.className = "galleryCell";
 286   frame.unselectable = "on";
 287   frame.style.height = (tHeight + 2) + "px";
 288
 289   var number = document.createElement("div");
 290   number.className = "galleryNumber";
 291   number.unselectable = "on";
 292   var ntext = document.createTextNode("-");
 293   number.appendChild(ntext);
 294
 295   var imageContainer = document.createElement("div");
 296   imageContainer.className = "galleryImageContainer";
 297   imageContainer.unselectable = "on";
 298
 299   var image = new Image();
 300   image.src = this._blank;
 301
 302   imageContainer.appendChild(image);
 303
 304   var text = document.createElement("div");
 305   text.className = "galleryText";
 306   text.unselectable = "on";
 307   text.style.width = (this.getWidth()-100-this.getThumbMaxWidth()) + "px";
 308
 309   var title = document.createElement("h3");
 310   var ttext = document.createTextNode("-");
 311   title.appendChild(ttext);
 312   title.unselectable = "on";
 313   text.appendChild(title);
 314
 315   var comment = document.createElement("p");
 316   var ctext = document.createTextNode("-");
 317   comment.appendChild(ctext);
 318   comment.unselectable = "on";
 319   text.appendChild(comment);
 320
 321
 322   frame.appendChild(number);
 323   frame.appendChild(imageContainer);
 324   frame.appendChild(text);
 325
 326   return frame;
 327 }
 328
 329
 330
 331
 332
 333
 334
 335 /*
 336 ---------------------------------------------------------------------------
 337   PRELOADING
 338 ---------------------------------------------------------------------------
 339 */
 340
 341 qx.Proto.imageOnComplete = function()
 342 {
 343   this._processedImages++;
 344
 345   if(this._processedImages == this._listSize) {
 346     this.dispatchEvent(new qx.event.type.Event("loadComplete"), true);
 347   }
 348 }
 349
 350 qx.ui.embed.GalleryList.imageOnLoad = function()
 351 {
 352   this.gallery.imageOnComplete();
 353   this.gallery = null;
 354   this.onload = null;
 355   this.onerror = null;
 356 }
 357
 358 qx.ui.embed.GalleryList.imageOnError = function()
 359 {
 360   this.gallery.imageOnComplete();
 361   this.gallery = null;
 362   this.onload = null;
 363   this.onerror = null;
 364 }
 365
 366
 367
 368
 369
 370
 371
 372 /*
 373 ---------------------------------------------------------------------------
 374   DISPOSER
 375 ---------------------------------------------------------------------------
 376 */
 377
 378 qx.Proto.dispose = function()
 379 {
 380   if (this.getDisposed()) {
 381     return true;
 382   }
 383
 384   this._list = null;
 385   this._frame = null;
 386
 387   if (this._manager)
 388   {
 389     this._manager.dispose();
 390     this._manager = null;
 391   }
 392
 393   this.removeEventListener("mousedown", this._onmousedown);
 394   this.removeEventListener("mouseup", this._onmouseup);
 395   this.removeEventListener("click", this._onclick);
 396   this.removeEventListener("dblclick", this._ondblclick);
 397   this.removeEventListener("keydown", this._onkeydown);
 398
 399   return qx.ui.basic.Terminator.prototype.dispose.call(this);
 400 }