examples/image-organizer/imgorg/AlbumsPanel.js

   1 /*!
   2  * Ext JS Library 3.0.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Imgorg.AlbumsPanel = Ext.extend(Ext.Panel,{
   8     initComponent: function() {
   9         Ext.apply(this, {
  10             layout: 'column',
  11             defaults: {
  12                 border: false
  13             },
  14             autoScroll: true,
  15             defaultType: 'img-album',
  16             items: [{
  17                 columnWidth: 0.33
  18             },{
  19                 columnWidth: 0.33
  20             },{
  21                 columnWidth: 0.34
  22             }]
  23         });
  24         Imgorg.AlbumsPanel.superclass.initComponent.call(this);
  25         this.loadAlbums();
  26         this.on('activate', this.loadAlbums, this);
  27     },
  28
  29     afterRender: function() {
  30         Imgorg.AlbumsPanel.superclass.afterRender.call(this);
  31         this.body.on('click', this.onClick, this, {delegate: 'div.album-wrap'});
  32     },
  33
  34     loadAlbums: function() {
  35         Imgorg.ss.Albums.getAllInfo({}, this.setupAlbums, this);
  36     },
  37
  38     setupAlbums: function(data, resp) {
  39         var cols = [[],[],[]];
  40         var idx = 0;
  41         for (var i = 0;i < data.length;i++) {
  42             var a = data[i];
  43             cols[idx].push(a);
  44             if (++idx >= 3) {
  45                 idx = 0;
  46             }
  47         }
  48         for (var i = 0; i < 3; i++) {
  49             this.items.get(i).generateAlbums(cols[i]);
  50         }
  51     },
  52
  53     onClick: function(e, n) {
  54         var album = n.attributes.album_id.value;
  55         var album_name = n.attributes.album_name.value;
  56         this.fireEvent('openalbum', this, album, album_name);
  57     }
  58 });
  59 Ext.reg('img-albumspanel', Imgorg.AlbumsPanel);
  60
  61 Imgorg.Album = Ext.extend(Ext.Panel,{
  62     maxWidth: 150,
  63     maxHeight: 100,
  64     tpl: new Ext.XTemplate(
  65         '<tpl for=".">',
  66             '<div class="album-wrap" album_id="{id}" album_name="{text}">',
  67                 '<div class="album-wrap-inner">',
  68                     '{filename:this.imageFormat}',
  69                     '<h3>Album: {text}</h3>',
  70                     '<div class="album-details">',
  71                         '<p>Date: {date}</p>',
  72                         '<p>Size: {size} images</p>',
  73                     '</div>',
  74                 '</div>',
  75             '</div>',
  76         '</tpl>',{
  77             imageFormat: function(filename, data) {
  78                 if (filename) {
  79                     return String.format('<img src="images/thumbs/{0}" height="{1}" width="{2}" />',filename, data.height, data.width);
  80                 } else {
  81                     return '<p>No Images in Album</p>';
  82                 }
  83             }
  84         }
  85     ),
  86     generateAlbums: function(albums) {
  87         for(var i = 0; i < albums.length;i++) {
  88             if (albums[i].exif) {
  89                 albums[i].height = Math.min(this.maxHeight, albums[i].exif.COMPUTED.Height);
  90                 albums[i].width = Math.min(this.maxWidth, albums[i].exif.COMPUTED.Width);
  91             }
  92         }
  93         this.tpl.overwrite(this.body, albums);
  94     }
  95 });
  96 Ext.reg('img-album', Imgorg.Album);