ImageThumbPanel.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:7k
源码类别:

中间件编程

开发平台:

JavaScript

  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. ImageDragZone = function(view, config){
  129.     this.view = view;
  130.     ImageDragZone.superclass.constructor.call(this, view.getEl(), config);
  131. };
  132. Ext.extend(ImageDragZone, Ext.dd.DragZone, {
  133.     // We don't want to register our image elements, so let's 
  134.     // override the default registry lookup to fetch the image 
  135.     // from the event instead
  136.     getDragData : function(e){
  137.         var target = e.getTarget('.thumb-wrap');
  138.         if(target){
  139.             var view = this.view;
  140.             if(!view.isSelected(target)){
  141.                 view.onClick(e);
  142.             }
  143.             var selNodes = view.getSelectedNodes();
  144.             var dragData = {
  145.                 nodes: selNodes
  146.             };
  147.             if(selNodes.length == 1){
  148.                 dragData.ddel = target;
  149.                 dragData.single = true;
  150.             }else{
  151.                 var div = document.createElement('div'); // create the multi element drag "ghost"
  152.                 div.className = 'multi-proxy';
  153.                 for(var i = 0, len = selNodes.length; i < len; i++){
  154.                     div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true)); // image nodes only
  155.                     if((i+1) % 3 == 0){
  156.                         div.appendChild(document.createElement('br'));
  157.                     }
  158.                 }
  159.                 var count = document.createElement('div'); // selected image count
  160.                 count.innerHTML = i + ' images selected';
  161.                 div.appendChild(count);
  162.                 
  163.                 dragData.ddel = div;
  164.                 dragData.multi = true;
  165.             }
  166.             return dragData;
  167.         }
  168.         return false;
  169.     },
  170.     // this method is called by the TreeDropZone after a node drop
  171.     // to get the new tree node (there are also other way, but this is easiest)
  172.     getTreeNode : function(){
  173.         var treeNodes = [];
  174.         var nodeData = this.view.getRecords(this.dragData.nodes);
  175.         for(var i = 0, len = nodeData.length; i < len; i++){
  176.             var data = nodeData[i].data;
  177.             treeNodes.push(new Ext.tree.TreeNode({
  178.                 text: data.name,
  179.                 icon: '../view/'+data.url,
  180.                 data: data,
  181.                 leaf:true,
  182.                 cls: 'image-node'
  183.             }));
  184.         }
  185.         return treeNodes;
  186.     },
  187.     
  188.     // the default action is to "highlight" after a bad drop
  189.     // but since an image can't be highlighted, let's frame it 
  190.     afterRepair:function(){
  191.         for(var i = 0, len = this.dragData.nodes.length; i < len; i++){
  192.             Ext.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);
  193.         }
  194.         this.dragging = false;    
  195.     },
  196.     
  197.     // override the default repairXY with one offset for the margins and padding
  198.     getRepairXY : function(e){
  199.         if(!this.dragData.multi){
  200.             var xy = Ext.Element.fly(this.dragData.ddel).getXY();
  201.             xy[0]+=3;xy[1]+=3;
  202.             return xy;
  203.         }
  204.         return false;
  205.     }
  206. });