git.roojs.org Git - roojs1/blob - examples/view/chooser.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11 \r
  12 var ImageChooser = function(config){\r
  13     // create the dialog from scratch\r
  14     var dlg = new Roo.LayoutDialog(config.id || Roo.id(), {\r
  15                 autoCreate : true,\r
  16                 minWidth:400,\r
  17                 minHeight:300,\r
  18                 syncHeightBeforeShow: true,\r
  19                 shadow:true,\r
  20         fixedcenter:true,\r
  21         center:{autoScroll:false},\r
  22                 east:{split:true,initialSize:150,minSize:150,maxSize:250}\r
  23         });\r
  24         dlg.setTitle('Choose an Image');\r
  25         dlg.getEl().addClass('ychooser-dlg');\r
  26         dlg.addKeyListener(27, dlg.hide, dlg);\r
  27     \r
  28     // add some buttons\r
  29     this.ok = dlg.addButton('OK', this.doCallback, this);\r
  30     this.ok.disable();\r
  31     dlg.setDefaultButton(dlg.addButton('Cancel', dlg.hide, dlg));\r
  32     dlg.on('show', this.load, this);\r
  33         this.dlg = dlg;\r
  34         var layout = dlg.getLayout();\r
  35         \r
  36         // filter/sorting toolbar\r
  37         this.tb = new Roo.Toolbar(this.dlg.body.createChild({tag:'div'}));\r
  38         this.sortSelect = Roo.DomHelper.append(this.dlg.body.dom, {\r
  39                 tag:'select', children: [\r
  40                         {tag: 'option', value:'name', selected: 'true', html:'Name'},\r
  41                         {tag: 'option', value:'size', html:'File Size'},\r
  42                         {tag: 'option', value:'lastmod', html:'Last Modified'}\r
  43                 ]\r
  44         }, true);\r
  45         this.sortSelect.on('change', this.sortImages, this, true);\r
  46         \r
  47         this.txtFilter = Roo.DomHelper.append(this.dlg.body.dom, {\r
  48                 tag:'input', type:'text', size:'12'}, true);\r
  49                 \r
  50         this.txtFilter.on('focus', function(){this.dom.select();});\r
  51         this.txtFilter.on('keyup', this.filter, this, {buffer:500});\r
  52         \r
  53         this.tb.add('Filter:', this.txtFilter.dom, 'separator', 'Sort By:', this.sortSelect.dom);\r
  54         \r
  55         // add the panels to the layout\r
  56         layout.beginUpdate();\r
  57         var vp = layout.add('center', new Roo.ContentPanel(Roo.id(), {\r
  58                 autoCreate : true,\r
  59                 toolbar: this.tb,\r
  60                 fitToFrame:true\r
  61         }));\r
  62         var dp = layout.add('east', new Roo.ContentPanel(Roo.id(), {\r
  63                 autoCreate : true,\r
  64                 fitToFrame:true\r
  65         }));\r
  66     layout.endUpdate();\r
  67         \r
  68         var bodyEl = vp.getEl();\r
  69         bodyEl.appendChild(this.tb.getEl());\r
  70         var viewBody = bodyEl.createChild({tag:'div', cls:'ychooser-view'});\r
  71         vp.resizeEl = viewBody;\r
  72         \r
  73         this.detailEl = dp.getEl();\r
  74         \r
  75         // create the required templates\r
  76         this.thumbTemplate = new Roo.Template(\r
  77                 '<div class="thumb-wrap" id="{name}">' +\r
  78                 '<div class="thumb"><img src="{url}" title="{name}"></div>' +\r
  79                 '<span>{shortName}</span></div>'\r
  80         );\r
  81         this.thumbTemplate.compile();   \r
  82         \r
  83         this.detailsTemplate = new Roo.Template(\r
  84                 '<div class="details"><img src="{url}"><div class="details-info">' +\r
  85                 '<b>Image Name:</b>' +\r
  86                 '<span>{name}</span>' +\r
  87                 '<b>Size:</b>' +\r
  88                 '<span>{sizeString}</span>' +\r
  89                 '<b>Last Modified:</b>' +\r
  90                 '<span>{dateString}</span></div></div>'\r
  91         );\r
  92         this.detailsTemplate.compile(); \r
  93     \r
  94     // initialize the View              \r
  95         this.view = new Roo.JsonView(viewBody, this.thumbTemplate, {\r
  96                 singleSelect: true,\r
  97                 jsonRoot: 'images',\r
  98                 emptyText : '<div style="padding:10px;">No images match the specified filter</div>'\r
  99         });\r
 100     this.view.on('selectionchange', this.showDetails, this, {buffer:100});\r
 101     this.view.on('dblclick', this.doCallback, this);\r
 102     this.view.on('loadexception', this.onLoadException, this);\r
 103     this.view.on('beforeselect', function(view){\r
 104         return view.getCount() > 0;\r
 105     });\r
 106     Roo.apply(this, config, {\r
 107         width: 540, height: 400\r
 108     });\r
 109     \r
 110     var formatSize = function(size){\r
 111         if(size < 1024) {\r
 112             return size + " bytes";\r
 113         } else {\r
 114             return (Math.round(((size*10) / 1024))/10) + " KB";\r
 115         }\r
 116     };\r
 117     \r
 118     // cache data by image name for easy lookup\r
 119     var lookup = {};\r
 120     // make some values pretty for display\r
 121     this.view.prepareData = function(data){\r
 122         data.shortName = data.name.ellipse(15);\r
 123         data.sizeString = formatSize(data.size);\r
 124         data.dateString = new Date(data.lastmod).format("m/d/Y g:i a");\r
 125         lookup[data.name] = data;\r
 126         return data;\r
 127     };\r
 128     this.lookup = lookup;\r
 129     \r
 130         dlg.resizeTo(this.width, this.height);\r
 131         this.loaded = false;\r
 132 };\r
 133 ImageChooser.prototype = {\r
 134         show : function(el, callback){\r
 135             this.reset();\r
 136             this.dlg.show(el);\r
 137                 this.callback = callback;\r
 138         },\r
 139         \r
 140         reset : function(){\r
 141             this.view.getEl().dom.scrollTop = 0;\r
 142             this.view.clearFilter();\r
 143                 this.txtFilter.dom.value = '';\r
 144                 this.view.select(0);\r
 145         },\r
 146         \r
 147         load : function(){\r
 148                 if(!this.loaded){\r
 149                         this.view.load({url: this.url, params:this.params, callback:this.onLoad.createDelegate(this)});\r
 150                 }\r
 151         },\r
 152         \r
 153         onLoadException : function(v,o){\r
 154             this.view.getEl().update('<div style="padding:10px;">Error loading images.</div>'); \r
 155         },\r
 156         \r
 157         filter : function(){\r
 158                 var filter = this.txtFilter.dom.value;\r
 159                 this.view.filter('name', filter);\r
 160                 this.view.select(0);\r
 161         },\r
 162         \r
 163         onLoad : function(){\r
 164                 this.loaded = true;\r
 165                 this.view.select(0);\r
 166         },\r
 167         \r
 168         sortImages : function(){\r
 169                 var p = this.sortSelect.dom.value;\r
 170         this.view.sort(p, p != 'name' ? 'desc' : 'asc');\r
 171         this.view.select(0);\r
 172     },\r
 173         \r
 174         showDetails : function(view, nodes){\r
 175             var selNode = nodes[0];\r
 176                 if(selNode && this.view.getCount() > 0){\r
 177                         this.ok.enable();\r
 178                     var data = this.lookup[selNode.id];\r
 179             this.detailEl.hide();\r
 180             this.detailsTemplate.overwrite(this.detailEl, data);\r
 181             this.detailEl.slideIn('l', {stopFx:true,duration:.2});\r
 182                         \r
 183                 }else{\r
 184                     this.ok.disable();\r
 185                     this.detailEl.update('');\r
 186                 }\r
 187         },\r
 188         \r
 189         doCallback : function(){\r
 190         var selNode = this.view.getSelectedNodes()[0];\r
 191                 var callback = this.callback;\r
 192                 var lookup = this.lookup;\r
 193                 this.dlg.hide(function(){\r
 194             if(selNode && callback){\r
 195                                 var data = lookup[selNode.id];\r
 196                                 callback(data);\r
 197                         }\r
 198                 });\r
 199         }\r
 200 };\r
 201 \r
 202 String.prototype.ellipse = function(maxLength){\r
 203     if(this.length > maxLength){\r
 204         return this.substr(0, maxLength-3) + '...';\r
 205     }\r
 206     return this;\r
 207 };