Imgorg.AlbumsPanel = Ext.extend(Ext.Panel,{
initComponent: function() {
Ext.apply(this, {
layout: 'column',
defaults: {
border: false
},
autoScroll: true,
defaultType: 'img-album',
items: [{
columnWidth: 0.33
},{
columnWidth: 0.33
},{
columnWidth: 0.34
}]
});
Imgorg.AlbumsPanel.superclass.initComponent.call(this);
this.loadAlbums();
this.on('activate', this.loadAlbums, this);
},
afterRender: function() {
Imgorg.AlbumsPanel.superclass.afterRender.call(this);
this.body.on('click', this.onClick, this, {delegate: 'div.album-wrap'});
},
loadAlbums: function() {
Imgorg.ss.Albums.getAllInfo({}, this.setupAlbums, this);
},
setupAlbums: function(data, resp) {
var cols = [[],[],[]];
var idx = 0;
for (var i = 0;i < data.length;i++) {
var a = data[i];
cols[idx].push(a);
if (++idx >= 3) {
idx = 0;
}
}
for (var i = 0; i < 3; i++) {
this.items.get(i).generateAlbums(cols[i]);
}
},
onClick: function(e, n) {
var album = n.attributes.album_id.value;
var album_name = n.attributes.album_name.value;
this.fireEvent('openalbum', this, album, album_name);
}
});
Ext.reg('img-albumspanel', Imgorg.AlbumsPanel);
Imgorg.Album = Ext.extend(Ext.Panel,{
maxWidth: 150,
maxHeight: 100,
tpl: new Ext.XTemplate(
'', ',{
'',',
'',',
'{filename:this.imageFormat}',
'Album: {text}
',
'',',
'Date: {date}
',
'Size: {size} images
',
'
'
'
'
imageFormat: function(filename, data) {
if (filename) {
return String.format('',filename, data.height, data.width);
} else {
return 'No Images in Album
';
}
}
}
),
generateAlbums: function(albums) {
for(var i = 0; i < albums.length;i++) {
if (albums[i].exif) {
albums[i].height = Math.min(this.maxHeight, albums[i].exif.COMPUTED.Height);
albums[i].width = Math.min(this.maxWidth, albums[i].exif.COMPUTED.Width);
}
}
this.tpl.overwrite(this.body, albums);
}
});
Ext.reg('img-album', Imgorg.Album);