1 /*!
  2 * This file is part of Aloha Editor Project http://aloha-editor.org
  3 * Copyright © 2010-2011 Gentics Software GmbH, aloha@gentics.com
  4 * Contributors http://aloha-editor.org/contribution.php
  5 * Licensed unter the terms of http://www.aloha-editor.org/license.html
  6 *//*
  7 * Aloha Editor is free software: you can redistribute it and/or modify
  8 * it under the terms of the GNU Affero General Public License as published by
  9 * the Free Software Foundation, either version 3 of the License, or
 10 * (at your option) any later version.*
 11 *
 12 * Aloha Editor is distributed in the hope that it will be useful,
 13 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 14 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 15 * GNU Affero General Public License for more details.
 16 *
 17 * You should have received a copy of the GNU Affero General Public License
 18 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 19 */
 20 
 21 define(
 22 ['aloha/ext', 'aloha/ui'],
 23 function(Ext, ui) {
 24 	"use strict";
 25 
 26 	var
 27 //		$ = jQuery,
 28 //		GENTICS = window.GENTICS,
 29 //		Aloha = window.Aloha,
 30 		Class = window.Class;
 31 
 32 /**
 33  * !!!! ATTENTION !!!!
 34  * This is work in progress. This implemenation may change heavily.
 35  * Not yet implemented:
 36  * - configuring and templating the list
 37  * - DnD
 38  * - passing all possible query attributes to the repository
 39  * - query of subtree
 40  * - icon representation
 41  */
 42 ui.Browser = Class.extend({
 43 	_constructor: function () {
 44 
 45 		/**
 46 		 * @cfg Function called when an element is selected
 47 		 */
 48 		this.onSelect = null;
 49 
 50 		var that = this;
 51 
 52 		// define the grid that represents the filelist
 53 		this.grid = new Ext.grid.GridPanel( {
 54 			region : 'center',
 55 			autoScroll : true,
 56 			// the datastore can be used by the gridpanel to fetch data from
 57 			// repository manager
 58 			store : new Ext.data.Store( {
 59 				proxy : new Ext.data.AlohaProxy(),
 60 				reader : new Ext.data.AlohaObjectReader()
 61 			}),
 62 			columns : [ {
 63 				id : 'name',
 64 				header : 'Name',
 65 				width : 100,
 66 				sortable : true,
 67 				dataIndex : 'name'
 68 			}, {
 69 				header : 'URL',
 70 				renderer : function(val) {
 71 					return val;
 72 				},
 73 				width : 300,
 74 				sortable : true,
 75 				dataIndex : 'url'
 76 			} ],
 77 			stripeRows : true,
 78 			autoExpandColumn : 'name',
 79 			height : 350,
 80 			width : 600,
 81 			title : 'Objectlist',
 82 			stateful : true,
 83 			stateId : 'grid',
 84 			selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
 85 			listeners : {
 86 				'dblclick' : function(e) {
 87 					that.onItemSelect();
 88 				}
 89 			}
 90 		});
 91 			this.grid.getSelectionModel().on({
 92 				'selectionchange' : function(sm, n, node){
 93 					var resourceItem = that.grid.getSelectionModel().getSelected();
 94 					if (resourceItem) {
 95 									this.win.buttons[1].enable();
 96 					} else {
 97 									this.win.buttons[1].disable();
 98 					}
 99 					},
100 					scope:this
101 			});
102 
103 
104 		// define the treepanel
105 		this.tree = new Ext.tree.TreePanel( {
106 			region : 'center',
107 			useArrows : true,
108 			autoScroll : true,
109 			animate : true,
110 			enableDD : true,
111 			containerScroll : true,
112 113 			border : false,
114 			loader : new Ext.tree.AlohaTreeLoader(),
115 			root : {
116 				nodeType : 'async',
117 				text : 'Aloha Repositories',
118 				draggable : false,
119 				id : 'aloha'
120 			},
121 			rootVisible : false,
122 			listeners : {
123 				'beforeload' : function(node) {
124 					this.loader.baseParams = {
125 						node : node.attributes
126 					};
127 				}
128 			}
129 		});
130 			this.tree.getSelectionModel().on({
131 					'selectionchange' : function(sm, node){
132 							if (node) {
133 								var resourceItem = node.attributes;
134 							that.grid.store.load({ params: {
135 								inFolderId: resourceItem.id,
136 								objectTypeFilter: that.objectTypeFilter,
137 								repositoryId: resourceItem.repositoryId
138 							}});
139 							}
140 					},
141 					scope:this
142 			});
143 
144 		// nest the tree within a panel
145 		this.nav = new Ext.Panel( {
146 			title : 'Navigation',
147 			region : 'west',
148 			width : 300,
149 			layout : 'fit',
150 			collapsible : true,
151 			items : [ this.tree ]
152 		});
153 
154 		// add the nested tree and grid (filelist) to the window
155 		this.win = new Ext.Window( {
156 			title : 'Resource Selector',
157 			layout : 'border',
158 			width : 800,
159 			height : 300,
160 			closeAction : 'hide',
161 			onEsc: function () {
162 				this.hide();
163 			},
164 			defaultButton: this.nav,
165 			plain : true,
166 			initHidden: true,
167 			items : [ this.nav, this.grid ],
168 			buttons : [{
169 				text : 'Close',
170 				handler : function() {
171 					that.win.hide();
172 				}
173 			}, {
174 				text : 'Select',
175 				disabled : true,
176 				handler : function() {
177 					that.onItemSelect();
178 				}
179 			}],
180 				toFront : function(e) {
181 						this.manager = this.manager || Ext.WindowMgr;
182 						this.manager.bringToFront(this);
183 						this.setZIndex(9999999999); // bring really to front (floating menu is not registered as window...)
184 						return this;
185 				}
186 		});
187 
188 		this.onItemSelect = function () {
189 			var
190 				sm =  this.grid.getSelectionModel(),
191 				sel = (sm) ? sm.getSelected() : null,
192 				resourceItem = (sel) ? sel.data : null;
193 			this.win.hide();
194 			if ( typeof this.onSelect === 'function' ) {
195 				this.onSelect.call(this, resourceItem);
196 			}
197 		};
198 	},
199 
200 	setObjectTypeFilter: function(otf) {
201 		this.objectTypeFilter = otf;
202 	},
203 
204 	getObjectTypeFilter: function() {
205 		return this.objectTypeFilter;
206 	},
207 
208 	show: function() {
209 		this.win.show(); // first show,
210 		this.win.toFront(true);
211 		this.win.focus();
212 	}
213 });
214 
215 });
216