3 * Copyright(c) 2006-2010 Ext JS, LLC
5 * http://www.extjs.com/license
7 Imgorg.ImageThumbPanel = Ext.extend(Ext.Panel, {
11 initComponent: function() {
12 this.tfId = 'tag-filter-'+Ext.id();
15 var p = Ext.state.Manager.getProvider();
17 sliderValue = Ext.num(p.get('sliderValue'), 0);
28 xtype: 'img-tagmulticombo',
31 select: function(combo, record, idx) {
32 var vals = combo.getValue();
36 clearall: function(combo) {
43 itemId: 'size-slider',
45 style: 'margin-right:20px;',
47 plugins: new Ext.ux.SliderTip({
48 getText: function(slider){
49 return String.format('<b>{0}%</b>', 100+slider.getValue()*3);
53 change: this.onChange,
58 Imgorg.ImageThumbPanel.superclass.initComponent.call(this);
59 this.on('activate', this.onActivate, this);
62 afterRender: function() {
63 Imgorg.ImageThumbPanel.superclass.afterRender.call(this);
64 this.view = this.getComponent('imgorg-dv');
66 this.dragZone = new ImageDragZone(this.view, {
68 ddGroup: 'organizerDD'
73 onActivate: function() {
75 var p = Ext.state.Manager.getProvider();
77 sliderValue = Ext.num(p.get('sliderValue'), 0);
78 var slider = this.getBottomToolbar().getComponent('size-slider');
79 slider.setValue(sliderValue);
80 this.onChange(slider);
84 onChange: function(slider, e) {
85 var p = Ext.state.Manager.getProvider();
87 p.set('sliderValue', slider.getValue());
89 Ext.util.CSS.updateRule('.images-view .thumb img','height',this.minWidth+slider.getValue()*3);
92 tagFilter: function(vals) {
93 if (this.view.store.lastOptions.params) {
94 var album = this.view.store.lastOptions.params.album;
97 this.view.store.load({
105 clearFilter: function() {
106 var album = this.view.store.lastOptions.params.album;
107 this.view.store.load({
112 Ext.getCmp(this.tfId).reset();
115 albumFilter: function(album) {
116 this.getComponent('imgorg-dv').store.load({
124 this.view.store.reload();
127 Ext.reg('img-thumbpanel', Imgorg.ImageThumbPanel);
130 ImageDragZone = function(view, config){
132 ImageDragZone.superclass.constructor.call(this, view.getEl(), config);
134 Ext.extend(ImageDragZone, Ext.dd.DragZone, {
135 // We don't want to register our image elements, so let's
136 // override the default registry lookup to fetch the image
137 // from the event instead
138 getDragData : function(e){
139 var target = e.getTarget('.thumb-wrap');
141 var view = this.view;
142 if(!view.isSelected(target)){
145 var selNodes = view.getSelectedNodes();
149 if(selNodes.length == 1){
150 dragData.ddel = target;
151 dragData.single = true;
153 var div = document.createElement('div'); // create the multi element drag "ghost"
154 div.className = 'multi-proxy';
155 for(var i = 0, len = selNodes.length; i < len; i++){
156 div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true)); // image nodes only
158 div.appendChild(document.createElement('br'));
161 var count = document.createElement('div'); // selected image count
162 count.innerHTML = i + ' images selected';
163 div.appendChild(count);
166 dragData.multi = true;
173 // this method is called by the TreeDropZone after a node drop
174 // to get the new tree node (there are also other way, but this is easiest)
175 getTreeNode : function(){
177 var nodeData = this.view.getRecords(this.dragData.nodes);
178 for(var i = 0, len = nodeData.length; i < len; i++){
179 var data = nodeData[i].data;
180 treeNodes.push(new Ext.tree.TreeNode({
182 icon: '../view/'+data.url,
191 // the default action is to "highlight" after a bad drop
192 // but since an image can't be highlighted, let's frame it
193 afterRepair:function(){
194 for(var i = 0, len = this.dragData.nodes.length; i < len; i++){
195 Ext.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);
197 this.dragging = false;
200 // override the default repairXY with one offset for the margins and padding
201 getRepairXY : function(e){
202 if(!this.dragData.multi){
203 var xy = Ext.Element.fly(this.dragData.ddel).getXY();