mirror of
				https://github.com/flynx/ImageGrid.git
				synced 2025-10-30 19:00:09 +00:00 
			
		
		
		
	some refactoring of the browse widget...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
		
							parent
							
								
									9ff081da7f
								
							
						
					
					
						commit
						17b75ed30c
					
				| @ -401,9 +401,13 @@ var KB = { | ||||
| 
 | ||||
| //--- | ||||
| 
 | ||||
| // XXX NOTE: the widget itself does not need a title, that's the job for | ||||
| //		a container widget (dialog, field, ...) | ||||
| //		...it can be implemented trivially via an attribute and a :before | ||||
| //		CSS class... | ||||
| var BrowserClassPrototype = { | ||||
| 	// construct the dom... | ||||
| 	make: function(){ | ||||
| 	make: function(options){ | ||||
| 		var browser = $('<div>') | ||||
| 			.addClass('browse') | ||||
| 			// make thie widget focusable... | ||||
| @ -415,24 +419,39 @@ var BrowserClassPrototype = { | ||||
| 			.click(function(){ | ||||
| 				$(this).focus() | ||||
| 			}) | ||||
| 			.append($('<div>') | ||||
| 				   .addClass('v-block title') | ||||
| 				   .text(title)) | ||||
| 			.append($('<div>') | ||||
| 				   .addClass('v-block path')) | ||||
| 
 | ||||
| 
 | ||||
| 		if(options.path == null || options.show_path){ | ||||
| 			browser | ||||
| 				.append($('<div>') | ||||
| 					   .addClass('v-block path')) | ||||
| 		} | ||||
| 
 | ||||
| 		browser | ||||
| 			.append($('<div>') | ||||
| 				   .addClass('v-block list')) | ||||
| 			.append($('<div>') | ||||
| 				   .addClass('v-block info')) | ||||
| 			.append($('<div>') | ||||
| 				   .addClass('v-block actions')) | ||||
| 
 | ||||
| 		return browser | ||||
| 	}, | ||||
| } | ||||
| 
 | ||||
| // XXX Q: should we make a base list dialog and build this on that or | ||||
| //		simplify this to implement a list (removing the path and disbling | ||||
| //		traversal)?? | ||||
| // XXX need a search/filter field... | ||||
| // XXX need base events: | ||||
| //		- opne | ||||
| //		- update | ||||
| //		- select (???) | ||||
| var BrowserPrototype = { | ||||
| 	dom: null, | ||||
| 
 | ||||
| 	options: { | ||||
| 		//path: null, | ||||
| 		//show_path: null, | ||||
| 	}, | ||||
| 
 | ||||
| 	// XXX this should prevent event handler deligation... | ||||
| 	keyboard: { | ||||
| 		'.browse':{ | ||||
| 			Up: 'prev', | ||||
| @ -449,6 +468,7 @@ var BrowserPrototype = { | ||||
| 	// base api... | ||||
| 	// NOTE: to avoid duplicating and syncing data, the actual path is  | ||||
| 	//		stored in DOM... | ||||
| 	// XXX does the path includes the currently selected element? | ||||
| 	get path(){ | ||||
| 		var skip = false | ||||
| 		return this.dom.find('.path .dir') | ||||
| @ -461,6 +481,7 @@ var BrowserPrototype = { | ||||
| 	}, | ||||
| 
 | ||||
| 	// update path... | ||||
| 	// XXX trigger an "update" event... | ||||
| 	update: function(path){ | ||||
| 		var browser = this.dom | ||||
| 
 | ||||
| @ -488,6 +509,7 @@ var BrowserPrototype = { | ||||
| 
 | ||||
| 	// internal actions... | ||||
| 
 | ||||
| 	// Select a list element... | ||||
| 	// | ||||
| 	//	Select first/last child | ||||
| 	//	.select('first') | ||||
| @ -523,6 +545,7 @@ var BrowserPrototype = { | ||||
| 	// | ||||
| 	// | ||||
| 	// XXX revise return values... | ||||
| 	// XXX Q: should this trigger a "select" event??? | ||||
| 	select: function(elem){ | ||||
| 		var browser = this.dom | ||||
| 		var elems = browser.find('.list div') | ||||
| @ -589,9 +612,15 @@ var BrowserPrototype = { | ||||
| 			return this | ||||
| 		} | ||||
| 
 | ||||
| 		var path = this.path.push(elem.text()) | ||||
| 
 | ||||
| 		// if not traversable call the action... | ||||
| 		if(this.isTraversable && ! this.isTraversable(path)){ | ||||
| 			return this.action(path) | ||||
| 		} | ||||
| 
 | ||||
| 		this | ||||
| 			.update(this.path.push(elem.text())) | ||||
| 			.update(path) | ||||
| 			.select() | ||||
| 
 | ||||
| 		return this | ||||
| @ -624,37 +653,42 @@ var BrowserPrototype = { | ||||
| 	}, | ||||
| 
 | ||||
| 	// XXX think about the API... | ||||
| 	// XXX trigger an "open" event... | ||||
| 	action: function(){ | ||||
| 		var res = this.open(this.path) | ||||
| 		var elem = this.select('!') | ||||
| 
 | ||||
| 		// XXX close the dialog if everything is OK... | ||||
| 		// XXX | ||||
| 		// nothing selected, select first and exit... | ||||
| 		if(elem.length == 0){ | ||||
| 			this.select() | ||||
| 			return this | ||||
| 		} | ||||
| 
 | ||||
| 		var path = this.path.push(elem.text()) | ||||
| 
 | ||||
| 		var res = this.open(path) | ||||
| 
 | ||||
| 		return res | ||||
| 	}, | ||||
| 	// close the dialog... | ||||
| 	// XXX | ||||
| 	close: function(){ | ||||
| 	}, | ||||
| 
 | ||||
| 	// extension methods... | ||||
| 	// XXX think about the API... | ||||
| 	//		needs to control closing of the dialog | ||||
| 	open: function(){ | ||||
| 	}, | ||||
| 	list: function(){ | ||||
| 	}, | ||||
| 	open: function(){ }, | ||||
| 	list: function(){ }, | ||||
| 	isTraversable: null, | ||||
| 
 | ||||
| 	// XXX | ||||
| 	__init__: function(parent){ | ||||
| 	// XXX need to get a container.... | ||||
| 	// XXX prepare/merge options... | ||||
| 	__init__: function(parent, options){ | ||||
| 		// XXX merge options... | ||||
| 		// XXX | ||||
| 
 | ||||
| 		// build the dom... | ||||
| 		var dom = this.dom = this.constructor.make() | ||||
| 		var dom = this.dom = this.constructor.make(options) | ||||
| 
 | ||||
| 		// add keyboard handler... | ||||
| 		dom.keydown( | ||||
| 			keyboard.makeKeyboardHandler( | ||||
| 				this.keyboard, | ||||
| 				// XXX | ||||
| 				function(k){ window.DEBUG && console.log(k) }, | ||||
| 				this)) | ||||
| 
 | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user