docs/source/ImageThumbPanel.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">Imgorg.ImageThumbPanel = Ext.extend(Ext.Panel, {
   9     minWidth: 80,
  10     title: 'All Photos',
  11
  12     initComponent: function() {
  13         this.tfId = 'tag-filter-'+Ext.id();
  14
  15         var sliderValue = 0;
  16         var p = Ext.state.Manager.getProvider();
  17         if (p) {
  18             sliderValue = Ext.num(p.get('sliderValue'), 0);
  19         }
  20
  21         Ext.apply(this,{
  22             layout:'fit',
  23             cls: 'images-view',
  24             items:Ext.apply({
  25                 xtype: 'img-dv',
  26                 itemId: 'imgorg-dv'
  27             },this.dvConfig||{}),
  28             bbar:['Tags:',{
  29                 xtype: 'img-tagmulticombo',
  30                 id: this.tfId,
  31                 listeners: {
  32                     select: function(combo, record, idx) {
  33                         var vals = combo.getValue();
  34                         this.tagFilter(vals);
  35                         return true;
  36                     },
  37                     clearall: function(combo) {
  38                         this.clearFilter();
  39                     },
  40                     scope: this
  41                 }
  42             },'->',{
  43                 xtype: 'slider',
  44                 itemId: 'size-slider',
  45                 width: 200,
  46                 style: 'margin-right:20px;',
  47                 value: sliderValue,
  48                 plugins: new Ext.ux.SliderTip({
  49                     getText: function(slider){
  50                         return String.format('<b>{0}%</b>', 100+slider.getValue()*3);
  51                     }
  52                 }),
  53                 listeners: {
  54                     change: this.onChange,
  55                     scope: this
  56                 }
  57             }]
  58         });
  59         Imgorg.ImageThumbPanel.superclass.initComponent.call(this);
  60         this.on('activate', this.onActivate, this);
  61     },
  62
  63     afterRender: function() {
  64         Imgorg.ImageThumbPanel.superclass.afterRender.call(this);
  65         this.view = this.getComponent('imgorg-dv');
  66         (function() {
  67             this.dragZone = new ImageDragZone(this.view, {
  68                 containerScroll:true,
  69                 ddGroup: 'organizerDD'
  70             });
  71         }).defer(100, this);
  72     },
  73
  74     onActivate: function() {
  75         this.reload();
  76         var p = Ext.state.Manager.getProvider();
  77         if (p) {
  78             sliderValue = Ext.num(p.get('sliderValue'), 0);
  79             var slider = this.getBottomToolbar().getComponent('size-slider');
  80             slider.setValue(sliderValue);
  81             this.onChange(slider);
  82         }
  83     },
  84
  85     onChange: function(slider, e) {
  86         var p = Ext.state.Manager.getProvider();
  87         if (p) {
  88             p.set('sliderValue', slider.getValue());
  89         }
  90         Ext.util.CSS.updateRule('.images-view .thumb img','height',this.minWidth+slider.getValue()*3);
  91     },
  92
  93     tagFilter: function(vals) {
  94         if (this.view.store.lastOptions.params) {
  95             var album = this.view.store.lastOptions.params.album;
  96         }
  97
  98         this.view.store.load({
  99             params: {
 100                 tags: vals,
 101                 album: album
 102             }
 103         });
 104     },
 105
 106     clearFilter: function() {
 107         var album = this.view.store.lastOptions.params.album;
 108         this.view.store.load({
 109             params: {
 110                 album: album
 111             }
 112         });
 113         Ext.getCmp(this.tfId).reset();
 114     },
 115
 116     albumFilter: function(album) {
 117         this.getComponent('imgorg-dv').store.load({
 118             params: {
 119                 album: album.id
 120             }
 121         });
 122     },
 123
 124     reload: function() {
 125         this.view.store.reload();
 126     }
 127 });
 128 Ext.reg('img-thumbpanel', Imgorg.ImageThumbPanel);
 129
 130
 131 ImageDragZone = function(view, config){
 132     this.view = view;
 133     ImageDragZone.superclass.constructor.call(this, view.getEl(), config);
 134 };
 135 Ext.extend(ImageDragZone, Ext.dd.DragZone, {
 136     // We don't want to register our image elements, so let's
 137     // override the default registry lookup to fetch the image
 138     // from the event instead
 139     getDragData : function(e){
 140         var target = e.getTarget('.thumb-wrap');
 141         if(target){
 142             var view = this.view;
 143             if(!view.isSelected(target)){
 144                 view.onClick(e);
 145             }
 146             var selNodes = view.getSelectedNodes();
 147             var dragData = {
 148                 nodes: selNodes
 149             };
 150             if(selNodes.length == 1){
 151                 dragData.ddel = target;
 152                 dragData.single = true;
 153             }else{
 154                 var div = document.createElement('div'); // create the multi element drag "ghost"
 155                 div.className = 'multi-proxy';
 156                 for(var i = 0, len = selNodes.length; i < len; i++){
 157                     div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true)); // image nodes only
 158                     if((i+1) % 3 == 0){
 159                         div.appendChild(document.createElement('br'));
 160                     }
 161                 }
 162                 var count = document.createElement('div'); // selected image count
 163                 count.innerHTML = i + ' images selected';
 164                 div.appendChild(count);
 165
 166                 dragData.ddel = div;
 167                 dragData.multi = true;
 168             }
 169             return dragData;
 170         }
 171         return false;
 172     },
 173
 174     // this method is called by the TreeDropZone after a node drop
 175     // to get the new tree node (there are also other way, but this is easiest)
 176     getTreeNode : function(){
 177         var treeNodes = [];
 178         var nodeData = this.view.getRecords(this.dragData.nodes);
 179         for(var i = 0, len = nodeData.length; i < len; i++){
 180             var data = nodeData[i].data;
 181             treeNodes.push(new Ext.tree.TreeNode({
 182                 text: data.name,
 183                 icon: '../view/'+data.url,
 184                 data: data,
 185                 leaf:true,
 186                 cls: 'image-node'
 187             }));
 188         }
 189         return treeNodes;
 190     },
 191
 192     // the default action is to "highlight" after a bad drop
 193     // but since an image can't be highlighted, let's frame it
 194     afterRepair:function(){
 195         for(var i = 0, len = this.dragData.nodes.length; i < len; i++){
 196             Ext.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);
 197         }
 198         this.dragging = false;
 199     },
 200
 201     // override the default repairXY with one offset for the margins and padding
 202     getRepairXY : function(e){
 203         if(!this.dragData.multi){
 204             var xy = Ext.Element.fly(this.dragData.ddel).getXY();
 205             xy[0]+=3;xy[1]+=3;
 206             return xy;
 207         }
 208         return false;
 209     }
 210 });</pre>    \r
 211 </body>\r
 212 </html>