X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/examples/image-organizer/imgorg/ImageThumbPanel.js

diff --git a/examples/image-organizer/imgorg/ImageThumbPanel.js b/examples/image-organizer/imgorg/ImageThumbPanel.js
new file mode 100644
index 00000000..4acb9143
--- /dev/null
+++ b/examples/image-organizer/imgorg/ImageThumbPanel.js
@@ -0,0 +1,209 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+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('<b>{0}%</b>', 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;
+    }
+});
\ No newline at end of file