4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
12 var ImageChooser = function(config){
\r
13 // create the dialog from scratch
\r
14 var dlg = new Roo.LayoutDialog(config.id || Roo.id(), {
\r
18 syncHeightBeforeShow: true,
\r
21 center:{autoScroll:false},
\r
22 east:{split:true,initialSize:150,minSize:150,maxSize:250}
\r
24 dlg.setTitle('Choose an Image');
\r
25 dlg.getEl().addClass('ychooser-dlg');
\r
26 dlg.addKeyListener(27, dlg.hide, dlg);
\r
29 this.ok = dlg.addButton('OK', this.doCallback, this);
\r
31 dlg.setDefaultButton(dlg.addButton('Cancel', dlg.hide, dlg));
\r
32 dlg.on('show', this.load, this);
\r
34 var layout = dlg.getLayout();
\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
45 this.sortSelect.on('change', this.sortImages, this, true);
\r
47 this.txtFilter = Roo.DomHelper.append(this.dlg.body.dom, {
\r
48 tag:'input', type:'text', size:'12'}, true);
\r
50 this.txtFilter.on('focus', function(){this.dom.select();});
\r
51 this.txtFilter.on('keyup', this.filter, this, {buffer:500});
\r
53 this.tb.add('Filter:', this.txtFilter.dom, 'separator', 'Sort By:', this.sortSelect.dom);
\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
62 var dp = layout.add('east', new Roo.ContentPanel(Roo.id(), {
\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
73 this.detailEl = dp.getEl();
\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
81 this.thumbTemplate.compile();
\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
88 '<span>{sizeString}</span>' +
\r
89 '<b>Last Modified:</b>' +
\r
90 '<span>{dateString}</span></div></div>'
\r
92 this.detailsTemplate.compile();
\r
94 // initialize the View
\r
95 this.view = new Roo.JsonView(viewBody, this.thumbTemplate, {
\r
98 emptyText : '<div style="padding:10px;">No images match the specified filter</div>'
\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
106 Roo.apply(this, config, {
\r
107 width: 540, height: 400
\r
110 var formatSize = function(size){
\r
112 return size + " bytes";
\r
114 return (Math.round(((size*10) / 1024))/10) + " KB";
\r
118 // cache data by image name for easy 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
128 this.lookup = lookup;
\r
130 dlg.resizeTo(this.width, this.height);
\r
131 this.loaded = false;
\r
133 ImageChooser.prototype = {
\r
134 show : function(el, callback){
\r
137 this.callback = callback;
\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
149 this.view.load({url: this.url, params:this.params, callback:this.onLoad.createDelegate(this)});
\r
153 onLoadException : function(v,o){
\r
154 this.view.getEl().update('<div style="padding:10px;">Error loading images.</div>');
\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
163 onLoad : function(){
\r
164 this.loaded = true;
\r
165 this.view.select(0);
\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
174 showDetails : function(view, nodes){
\r
175 var selNode = nodes[0];
\r
176 if(selNode && this.view.getCount() > 0){
\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
185 this.detailEl.update('');
\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
202 String.prototype.ellipse = function(maxLength){
\r
203 if(this.length > maxLength){
\r
204 return this.substr(0, maxLength-3) + '...';
\r