docs/source/ImageDv.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.ImageDv = Ext.extend(Ext.DataView,{
   9     tpl: new Ext.XTemplate(
  10         '<tpl for=".">',
  11         '<div class="thumb-wrap" id="{id}">',
  12         '<div class="thumb"><img src="images/thumbs/{filename}" class="thumb-img"></div>',
  13         '<span class="x-editable">{filename:ellipsis(15)}</span></div>',
  14         '</tpl>'
  15     ),
  16
  17     initComponent: function() {
  18         Ext.apply(this, {
  19             itemSelector: 'div.thumb-wrap',
  20             style: 'overflow:auto',
  21             multiSelect: true,
  22             overClass: 'x-view-over',
  23             emptyText: 'No images to display',
  24             plugins: [new Ext.DataView.DragSelector({
  25                 dragSafe: true
  26             }), new Ext.DataView.LabelEditor({
  27                 allowBlank: false,
  28                 alignment: 'c-c',
  29                 dataIndex: 'filename'
  30             })],
  31             store: new Ext.data.DirectStore({
  32                 directFn: Imgorg.ss.Images.load,
  33                 root: '',
  34                 fields: ['filename', 'url', 'id', 'size']
  35             })
  36         });
  37
  38         this.addEvents('viewitem');
  39         Imgorg.ImageDv.superclass.initComponent.call(this);
  40         this.on({// hacks to force the labeleditor to stop editing when we get a click elsewhere
  41             click: function() {
  42                 this.plugins[1].completeEdit();
  43             },
  44             containerclick: function(dv, e) {
  45                 this.plugins[1].completeEdit();
  46             },
  47             contextmenu: this.onContextMenu,
  48             containercontextmenu: this.onContextMenu,
  49             scope: this
  50         });
  51         this.store.on('update', this.syncRename, this);
  52     },
  53
  54     afterRender: function() {
  55         Imgorg.ImageDv.superclass.afterRender.call(this);
  56         this.el.unselectable(); // messy if they can select the text of the file names
  57     },
  58
  59     onContextMenu: function(e, node) {
  60         e.stopEvent();
  61         if(!this.contMenu) {
  62             this.contMenu = new Ext.menu.Menu({
  63                 items: [{
  64                     text: 'View in Tab(s)',
  65                     handler: function() {
  66                         this.fireEvent('viewitem', this, node);
  67                     },
  68                     scope: this
  69                 },{
  70                     text: 'Add to Album',
  71                     handler: this.selectAlbum,
  72                     scope: this
  73                 },{
  74                     text: 'Tag',
  75                     handler: this.tag,
  76                     scope: this
  77                 },{
  78                     text: 'Remove',
  79                     handler: this.removeImages,
  80                     scope: this
  81                 }]
  82             });
  83         }
  84         this.currentNode = node;
  85         this.contMenu.showAt(e.getXY());
  86     },
  87
  88     selectAlbum: function() {
  89         if (!this.albumWin) {
  90             this.albumWin = new Imgorg.AlbumWin();
  91         }
  92         this.albumWin.selectedRecords = this.getSelectedRecords();
  93         this.albumWin.show(this.currentNode);
  94     },
  95
  96     tag: function() {
  97         Imgorg.TagWin.selectedRecords = this.getSelectedRecords();
  98         Imgorg.TagWin.show(this.currentNode);
  99     },
 100
 101     syncRename: function(store, rec, op) {
 102         if (op == 'edit') {
 103             Imgorg.ss.Images.rename({image: rec.data.id, name: rec.data.filename, url: rec.data.url});
 104         }
 105     },
 106
 107     removeImages: function() {
 108         var recs = this.getSelectedRecords();
 109         var imageIds = [];
 110         for (var i = 0;i < recs.length;i++) {
 111             imageIds.push(recs[i].data.id);
 112             this.store.remove(recs[i]);
 113         }
 114         Imgorg.ss.Images.remove({images: imageIds});
 115     }
 116 });
 117 Ext.reg('img-dv', Imgorg.ImageDv);
 118 </pre>    \r
 119 </body>\r
 120 </html>