examples/image-organizer/imgorg/ImageThumbPanel.js

   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 });