docs/source/AlbumsPanel.html

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