mirror of
				https://github.com/flynx/ImageGrid.git
				synced 2025-11-04 05:10:07 +00:00 
			
		
		
		
	
		
			
				
	
	
		
			195 lines
		
	
	
		
			3.6 KiB
		
	
	
	
		
			HTML
		
	
	
		
			Executable File
		
	
	
	
	
			
		
		
	
	
			195 lines
		
	
	
		
			3.6 KiB
		
	
	
	
		
			HTML
		
	
	
		
			Executable File
		
	
	
	
	
<!DOCTYPE html>
 | 
						|
<html>
 | 
						|
<link rel="stylesheet" href="../../css/widget/browse.css">
 | 
						|
<link rel="stylesheet" href="../../css/fonts.css">
 | 
						|
<style>
 | 
						|
 | 
						|
body {
 | 
						|
	font-family: OpenSans, sans-serif; 
 | 
						|
}
 | 
						|
 | 
						|
.container {
 | 
						|
	position: absolute;
 | 
						|
}
 | 
						|
 | 
						|
 | 
						|
</style>
 | 
						|
 | 
						|
<script src="../../ext-lib/jquery.js"></script>
 | 
						|
<script src="../../ext-lib/jquery-ui.js"></script>
 | 
						|
 | 
						|
<script src="../jli.js"></script>
 | 
						|
 | 
						|
<script src="../../ext-lib/require.js"></script>
 | 
						|
 | 
						|
 | 
						|
<!--script src="browse-dialog.js"></script-->
 | 
						|
 | 
						|
<script>
 | 
						|
 | 
						|
var TREE = {
 | 
						|
	dir_a: {},
 | 
						|
	'dir b': {
 | 
						|
		file1: 'this is a file',
 | 
						|
		file2: 'this is a file',
 | 
						|
		file3: 'this is a file',
 | 
						|
	},
 | 
						|
	dir_c: {
 | 
						|
		file1: 'this is a file',
 | 
						|
		dir_b: {
 | 
						|
			file1: 'this is a file',
 | 
						|
		},
 | 
						|
		dir_c: {},
 | 
						|
		dir_d: {},
 | 
						|
		dir_e: {},
 | 
						|
		dir_f: {},
 | 
						|
		dir_g: {},
 | 
						|
		dir_h: {},
 | 
						|
		dir_i: {},
 | 
						|
		dir_j: {},
 | 
						|
		dir_k: {},
 | 
						|
		dir_l: {},
 | 
						|
		dir_m: {},
 | 
						|
		dir_o: {},
 | 
						|
		dir_p: {},
 | 
						|
		dir_q: {},
 | 
						|
		dir_r: {},
 | 
						|
		dir_s: {},
 | 
						|
		dir_t: {},
 | 
						|
		dir_u: {},
 | 
						|
	},
 | 
						|
	file: 'this is a file',
 | 
						|
}
 | 
						|
// add some recursion for testing...
 | 
						|
TREE.dir_d = TREE.dir_c.dir_b
 | 
						|
TREE.dir_a.tree = TREE
 | 
						|
TREE.dir_c.tree = TREE
 | 
						|
TREE.dir_c.dir_b.tree = TREE
 | 
						|
 | 
						|
 | 
						|
 | 
						|
//---
 | 
						|
 | 
						|
var use_disabled = true
 | 
						|
var show_files = false
 | 
						|
 | 
						|
requirejs.config({
 | 
						|
	paths: {
 | 
						|
		'lib/object': '../../node_modules/ig-object/object',
 | 
						|
		'lib/actions': '../../node_modules/ig-actions/actions',
 | 
						|
		'lib/features': '../../node_modules/ig-features/features',
 | 
						|
		//'lib/keyboard': '../../node_modules/ig-keyboard/keyboard',
 | 
						|
	},	
 | 
						|
	map: {
 | 
						|
		'*': {
 | 
						|
			'../object': 'lib/object',
 | 
						|
		},
 | 
						|
	},
 | 
						|
})
 | 
						|
 | 
						|
requirejs([
 | 
						|
			'../util',
 | 
						|
			'../keyboard', 
 | 
						|
			'lib/object', 
 | 
						|
			'../toggler', 
 | 
						|
			'./browse2',
 | 
						|
		], function(u, k, o, t, br){
 | 
						|
	util = u
 | 
						|
	keyboard = k
 | 
						|
	object = o
 | 
						|
	toggler = t
 | 
						|
	browser = br
 | 
						|
 | 
						|
 | 
						|
	// XXX split this into several dialogues, show each and then combine...
 | 
						|
	dialog_1 = browser.Browser(function(make){
 | 
						|
		make(['list', 'of', 'text'])
 | 
						|
		make.group(
 | 
						|
			make('group item 0'),
 | 
						|
			'group item 1 (bare)')
 | 
						|
		// XXX Q: should we show only one if multiple lines are in sequence???
 | 
						|
		make('---')
 | 
						|
		//make('---')
 | 
						|
		// XXX not yet visible...
 | 
						|
		//make('...')
 | 
						|
		//make('e')
 | 
						|
		// embeded browser...
 | 
						|
		make(browser.Browser(function(make){
 | 
						|
			make('inlined browser item 0')
 | 
						|
			make(1)
 | 
						|
			make(2)
 | 
						|
		}))
 | 
						|
		// basic nested list...
 | 
						|
		make.nest('nested', [
 | 
						|
			make('moo', {disabled: true}),
 | 
						|
			2,
 | 
						|
			// XXX this is not supported by .map(..)...
 | 
						|
			make.nest('nested', browser.Browser(function(make){
 | 
						|
				make('ab')
 | 
						|
			})),
 | 
						|
		])
 | 
						|
		make('in between two subtrees...')
 | 
						|
		// nested browser...
 | 
						|
		make.nest('B', 
 | 
						|
			browser.Browser(function(make){
 | 
						|
				make('xx')
 | 
						|
				make.nest('C', browser.Browser(function(make){
 | 
						|
					make('aaa')
 | 
						|
					make.nest('D', browser.Browser(function(make){
 | 
						|
						make('a')
 | 
						|
						make('---')
 | 
						|
						make('b')
 | 
						|
					}))
 | 
						|
					make('bbb')
 | 
						|
					make('bbb')
 | 
						|
				}))
 | 
						|
			}), {
 | 
						|
				//collapsed: true,
 | 
						|
				// XXX this does not appear to survive attaching an item 
 | 
						|
				//		to the document...
 | 
						|
				click: function(){ console.log('!!!!!!!!!!!!') },
 | 
						|
				//cls: ['heading'],
 | 
						|
			})
 | 
						|
	}, {
 | 
						|
		itemButtons: [
 | 
						|
			['–'],
 | 
						|
			['□'],
 | 
						|
		],
 | 
						|
	})
 | 
						|
 | 
						|
	dialog_1.container = $('.container').first()[0]
 | 
						|
 | 
						|
	dialog_1.render()
 | 
						|
 | 
						|
	//$('.container').first().append(dialog_1.render())
 | 
						|
})
 | 
						|
 | 
						|
$(function(){
 | 
						|
 | 
						|
	$('.container').draggable({ 
 | 
						|
		cancel: ".path .dir, .list div" 
 | 
						|
	})
 | 
						|
})
 | 
						|
 | 
						|
 | 
						|
 | 
						|
</script>
 | 
						|
 | 
						|
<body>
 | 
						|
 | 
						|
<div class="container tree">
 | 
						|
</div>
 | 
						|
 | 
						|
<div class="container flat">
 | 
						|
</div>
 | 
						|
 | 
						|
<div class="container flat2">
 | 
						|
</div>
 | 
						|
 | 
						|
<div class="container pathlist">
 | 
						|
</div>
 | 
						|
 | 
						|
</body>
 | 
						|
</html>
 | 
						|
<!-- vim:set ts=4 sw=4 : -->
 |