Imgorg.ImageThumbPanel = Ext.extend(Ext.Panel, {
minWidth: 80,
title: 'All Photos',
initComponent: function() {
this.tfId = 'tag-filter-'+Ext.id();
var sliderValue = 0;
var p = Ext.state.Manager.getProvider();
if (p) {
sliderValue = Ext.num(p.get('sliderValue'), 0);
}
Ext.apply(this,{
layout:'fit',
cls: 'images-view',
items:Ext.apply({
xtype: 'img-dv',
itemId: 'imgorg-dv'
},this.dvConfig||{}),
bbar:['Tags:',{
xtype: 'img-tagmulticombo',
id: this.tfId,
listeners: {
select: function(combo, record, idx) {
var vals = combo.getValue();
this.tagFilter(vals);
return true;
},
clearall: function(combo) {
this.clearFilter();
},
scope: this
}
},'->',{
xtype: 'slider',
itemId: 'size-slider',
width: 200,
style: 'margin-right:20px;',
value: sliderValue,
plugins: new Ext.ux.SliderTip({
getText: function(slider){
return String.format('{0}%', 100+slider.getValue()*3);
}
}),
listeners: {
change: this.onChange,
scope: this
}
}]
});
Imgorg.ImageThumbPanel.superclass.initComponent.call(this);
this.on('activate', this.onActivate, this);
},
afterRender: function() {
Imgorg.ImageThumbPanel.superclass.afterRender.call(this);
this.view = this.getComponent('imgorg-dv');
(function() {
this.dragZone = new ImageDragZone(this.view, {
containerScroll:true,
ddGroup: 'organizerDD'
});
}).defer(100, this);
},
onActivate: function() {
this.reload();
var p = Ext.state.Manager.getProvider();
if (p) {
sliderValue = Ext.num(p.get('sliderValue'), 0);
var slider = this.getBottomToolbar().getComponent('size-slider');
slider.setValue(sliderValue);
this.onChange(slider);
}
},
onChange: function(slider, e) {
var p = Ext.state.Manager.getProvider();
if (p) {
p.set('sliderValue', slider.getValue());
}
Ext.util.CSS.updateRule('.images-view .thumb img','height',this.minWidth+slider.getValue()*3);
},
tagFilter: function(vals) {
if (this.view.store.lastOptions.params) {
var album = this.view.store.lastOptions.params.album;
}
this.view.store.load({
params: {
tags: vals,
album: album
}
});
},
clearFilter: function() {
var album = this.view.store.lastOptions.params.album;
this.view.store.load({
params: {
album: album
}
});
Ext.getCmp(this.tfId).reset();
},
albumFilter: function(album) {
this.getComponent('imgorg-dv').store.load({
params: {
album: album.id
}
});
},
reload: function() {
this.view.store.reload();
}
});
Ext.reg('img-thumbpanel', Imgorg.ImageThumbPanel);
ImageDragZone = function(view, config){
this.view = view;
ImageDragZone.superclass.constructor.call(this, view.getEl(), config);
};
Ext.extend(ImageDragZone, Ext.dd.DragZone, {
// We don't want to register our image elements, so let's
// override the default registry lookup to fetch the image
// from the event instead
getDragData : function(e){
var target = e.getTarget('.thumb-wrap');
if(target){
var view = this.view;
if(!view.isSelected(target)){
view.onClick(e);
}
var selNodes = view.getSelectedNodes();
var dragData = {
nodes: selNodes
};
if(selNodes.length == 1){
dragData.ddel = target;
dragData.single = true;
}else{
var div = document.createElement('div'); // create the multi element drag "ghost"
div.className = 'multi-proxy';
for(var i = 0, len = selNodes.length; i < len; i++){
div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true)); // image nodes only
if((i+1) % 3 == 0){
div.appendChild(document.createElement('br'));
}
}
var count = document.createElement('div'); // selected image count
count.innerHTML = i + ' images selected';
div.appendChild(count);
dragData.ddel = div;
dragData.multi = true;
}
return dragData;
}
return false;
},
// this method is called by the TreeDropZone after a node drop
// to get the new tree node (there are also other way, but this is easiest)
getTreeNode : function(){
var treeNodes = [];
var nodeData = this.view.getRecords(this.dragData.nodes);
for(var i = 0, len = nodeData.length; i < len; i++){
var data = nodeData[i].data;
treeNodes.push(new Ext.tree.TreeNode({
text: data.name,
icon: '../view/'+data.url,
data: data,
leaf:true,
cls: 'image-node'
}));
}
return treeNodes;
},
// the default action is to "highlight" after a bad drop
// but since an image can't be highlighted, let's frame it
afterRepair:function(){
for(var i = 0, len = this.dragData.nodes.length; i < len; i++){
Ext.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);
}
this.dragging = false;
},
// override the default repairXY with one offset for the margins and padding
getRepairXY : function(e){
if(!this.dragData.multi){
var xy = Ext.Element.fly(this.dragData.ddel).getXY();
xy[0]+=3;xy[1]+=3;
return xy;
}
return false;
}
});