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.ImageThumbPanel = Ext.extend(Ext.Panel, { |
---|
8 | minWidth: 80, |
---|
9 | title: 'All Photos', |
---|
10 | |
---|
11 | initComponent: function() { |
---|
12 | this.tfId = 'tag-filter-'+Ext.id(); |
---|
13 | |
---|
14 | var sliderValue = 0; |
---|
15 | var p = Ext.state.Manager.getProvider(); |
---|
16 | if (p) { |
---|
17 | sliderValue = Ext.num(p.get('sliderValue'), 0); |
---|
18 | } |
---|
19 | |
---|
20 | Ext.apply(this,{ |
---|
21 | layout:'fit', |
---|
22 | cls: 'images-view', |
---|
23 | items:Ext.apply({ |
---|
24 | xtype: 'img-dv', |
---|
25 | itemId: 'imgorg-dv' |
---|
26 | },this.dvConfig||{}), |
---|
27 | bbar:['Tags:',{ |
---|
28 | xtype: 'img-tagmulticombo', |
---|
29 | id: this.tfId, |
---|
30 | listeners: { |
---|
31 | select: function(combo, record, idx) { |
---|
32 | var vals = combo.getValue(); |
---|
33 | this.tagFilter(vals); |
---|
34 | return true; |
---|
35 | }, |
---|
36 | clearall: function(combo) { |
---|
37 | this.clearFilter(); |
---|
38 | }, |
---|
39 | scope: this |
---|
40 | } |
---|
41 | },'->',{ |
---|
42 | xtype: 'slider', |
---|
43 | itemId: 'size-slider', |
---|
44 | width: 200, |
---|
45 | style: 'margin-right:20px;', |
---|
46 | value: sliderValue, |
---|
47 | plugins: new Ext.ux.SliderTip({ |
---|
48 | getText: function(slider){ |
---|
49 | return String.format('<b>{0}%</b>', 100+slider.getValue()*3); |
---|
50 | } |
---|
51 | }), |
---|
52 | listeners: { |
---|
53 | change: this.onChange, |
---|
54 | scope: this |
---|
55 | } |
---|
56 | }] |
---|
57 | }); |
---|
58 | Imgorg.ImageThumbPanel.superclass.initComponent.call(this); |
---|
59 | this.on('activate', this.onActivate, this); |
---|
60 | }, |
---|
61 | |
---|
62 | afterRender: function() { |
---|
63 | Imgorg.ImageThumbPanel.superclass.afterRender.call(this); |
---|
64 | this.view = this.getComponent('imgorg-dv'); |
---|
65 | (function() { |
---|
66 | this.dragZone = new ImageDragZone(this.view, { |
---|
67 | containerScroll:true, |
---|
68 | ddGroup: 'organizerDD' |
---|
69 | }); |
---|
70 | }).defer(100, this); |
---|
71 | }, |
---|
72 | |
---|
73 | onActivate: function() { |
---|
74 | this.reload(); |
---|
75 | var p = Ext.state.Manager.getProvider(); |
---|
76 | if (p) { |
---|
77 | sliderValue = Ext.num(p.get('sliderValue'), 0); |
---|
78 | var slider = this.getBottomToolbar().getComponent('size-slider'); |
---|
79 | slider.setValue(sliderValue); |
---|
80 | this.onChange(slider); |
---|
81 | } |
---|
82 | }, |
---|
83 | |
---|
84 | onChange: function(slider, e) { |
---|
85 | var p = Ext.state.Manager.getProvider(); |
---|
86 | if (p) { |
---|
87 | p.set('sliderValue', slider.getValue()); |
---|
88 | } |
---|
89 | Ext.util.CSS.updateRule('.images-view .thumb img','height',this.minWidth+slider.getValue()*3); |
---|
90 | }, |
---|
91 | |
---|
92 | tagFilter: function(vals) { |
---|
93 | if (this.view.store.lastOptions.params) { |
---|
94 | var album = this.view.store.lastOptions.params.album; |
---|
95 | } |
---|
96 | |
---|
97 | this.view.store.load({ |
---|
98 | params: { |
---|
99 | tags: vals, |
---|
100 | album: album |
---|
101 | } |
---|
102 | }); |
---|
103 | }, |
---|
104 | |
---|
105 | clearFilter: function() { |
---|
106 | var album = this.view.store.lastOptions.params.album; |
---|
107 | this.view.store.load({ |
---|
108 | params: { |
---|
109 | album: album |
---|
110 | } |
---|
111 | }); |
---|
112 | Ext.getCmp(this.tfId).reset(); |
---|
113 | }, |
---|
114 | |
---|
115 | albumFilter: function(album) { |
---|
116 | this.getComponent('imgorg-dv').store.load({ |
---|
117 | params: { |
---|
118 | album: album.id |
---|
119 | } |
---|
120 | }); |
---|
121 | }, |
---|
122 | |
---|
123 | reload: function() { |
---|
124 | this.view.store.reload(); |
---|
125 | } |
---|
126 | }); |
---|
127 | Ext.reg('img-thumbpanel', Imgorg.ImageThumbPanel); |
---|
128 | |
---|
129 | |
---|
130 | ImageDragZone = function(view, config){ |
---|
131 | this.view = view; |
---|
132 | ImageDragZone.superclass.constructor.call(this, view.getEl(), config); |
---|
133 | }; |
---|
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'); |
---|
140 | if(target){ |
---|
141 | var view = this.view; |
---|
142 | if(!view.isSelected(target)){ |
---|
143 | view.onClick(e); |
---|
144 | } |
---|
145 | var selNodes = view.getSelectedNodes(); |
---|
146 | var dragData = { |
---|
147 | nodes: selNodes |
---|
148 | }; |
---|
149 | if(selNodes.length == 1){ |
---|
150 | dragData.ddel = target; |
---|
151 | dragData.single = true; |
---|
152 | }else{ |
---|
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 |
---|
157 | if((i+1) % 3 == 0){ |
---|
158 | div.appendChild(document.createElement('br')); |
---|
159 | } |
---|
160 | } |
---|
161 | var count = document.createElement('div'); // selected image count |
---|
162 | count.innerHTML = i + ' images selected'; |
---|
163 | div.appendChild(count); |
---|
164 | |
---|
165 | dragData.ddel = div; |
---|
166 | dragData.multi = true; |
---|
167 | } |
---|
168 | return dragData; |
---|
169 | } |
---|
170 | return false; |
---|
171 | }, |
---|
172 | |
---|
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(){ |
---|
176 | var treeNodes = []; |
---|
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({ |
---|
181 | text: data.name, |
---|
182 | icon: '../view/'+data.url, |
---|
183 | data: data, |
---|
184 | leaf:true, |
---|
185 | cls: 'image-node' |
---|
186 | })); |
---|
187 | } |
---|
188 | return treeNodes; |
---|
189 | }, |
---|
190 | |
---|
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); |
---|
196 | } |
---|
197 | this.dragging = false; |
---|
198 | }, |
---|
199 | |
---|
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(); |
---|
204 | xy[0]+=3;xy[1]+=3; |
---|
205 | return xy; |
---|
206 | } |
---|
207 | return false; |
---|
208 | } |
---|
209 | }); |
---|