2019-02-09 01:39:13 +03:00
|
|
|
<!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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2019-06-07 02:56:01 +03:00
|
|
|
.browse-widget:not(.flat) .list :focus {
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2019-06-04 15:47:41 +03:00
|
|
|
/* XXX move these to the main CSS */
|
|
|
|
|
.browse-widget:not(.flat) .list div:not(.not-traversable) .text:after {
|
|
|
|
|
content: "";
|
|
|
|
|
}
|
|
|
|
|
/* XXX this needs to be the last .text item only */
|
|
|
|
|
.browse-widget:not(.flat) .list .traversable .text:after {
|
|
|
|
|
content: "/" !important;
|
|
|
|
|
}
|
|
|
|
|
|
2019-06-04 19:50:52 +03:00
|
|
|
/* selection... */
|
|
|
|
|
.browse-widget:not(.flat) .list .selected {
|
|
|
|
|
color: yellow;
|
|
|
|
|
background: none;
|
|
|
|
|
}
|
|
|
|
|
.browse-widget:not(.flat) .list .focused {
|
|
|
|
|
background: rgba(0, 0, 0, 0.08);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2019-06-04 15:47:41 +03:00
|
|
|
/* XXX stub...
|
|
|
|
|
.browse-widget:not(.flat) .list .text:first-child:before {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 5pt;
|
|
|
|
|
padding-right: 3pt;
|
|
|
|
|
content: " ";
|
|
|
|
|
}
|
|
|
|
|
.browse-widget:not(.flat) .list .traversable .text:first-child:before {
|
|
|
|
|
}
|
|
|
|
|
.browse-widget:not(.flat) .list .traversable:not(.collapsed) .text:first-child:before {
|
|
|
|
|
content: "-";
|
|
|
|
|
}
|
|
|
|
|
.browse-widget:not(.flat) .list .traversable.collapsed .text:first-child:before {
|
|
|
|
|
content: "+";
|
|
|
|
|
}
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
2019-02-09 01:39:13 +03:00
|
|
|
</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>
|
2019-05-03 19:43:22 +03:00
|
|
|
<script src="../../cfg/requirejs.js"></script>
|
2019-02-09 01:39:13 +03:00
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--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
|
|
|
|
|
|
|
|
|
|
|
2019-02-10 03:02:08 +03:00
|
|
|
// XXX split this into several dialogues, show each and then combine...
|
2019-05-30 16:51:10 +03:00
|
|
|
dialog = browser.Browser(function(make){
|
2019-04-20 17:08:10 +03:00
|
|
|
make(['list', 'of', 'text'])
|
2019-02-09 01:39:13 +03:00
|
|
|
make.group(
|
2019-05-15 21:45:20 +03:00
|
|
|
make('group item 0',
|
|
|
|
|
function(){ console.log('###', ...arguments) }),
|
2019-04-20 17:08:10 +03:00
|
|
|
'group item 1 (bare)')
|
2019-02-28 20:26:22 +03:00
|
|
|
// XXX Q: should we show only one if multiple lines are in sequence???
|
|
|
|
|
make('---')
|
2019-02-09 01:39:13 +03:00
|
|
|
// embeded browser...
|
|
|
|
|
make(browser.Browser(function(make){
|
2019-04-23 23:34:23 +03:00
|
|
|
make('inlined browser item 0')
|
2019-02-09 01:39:13 +03:00
|
|
|
make(1)
|
2019-04-23 23:34:23 +03:00
|
|
|
make(2)
|
2019-02-09 01:39:13 +03:00
|
|
|
}))
|
|
|
|
|
// basic nested list...
|
2019-04-20 17:08:10 +03:00
|
|
|
make.nest('nested', [
|
2019-02-10 19:28:10 +03:00
|
|
|
make('moo', {disabled: true}),
|
2019-02-09 01:39:13 +03:00
|
|
|
2,
|
2019-03-20 16:54:10 +03:00
|
|
|
// XXX this is not supported by .map(..)...
|
2019-04-20 17:08:10 +03:00
|
|
|
make.nest('nested', browser.Browser(function(make){
|
2019-03-20 16:54:10 +03:00
|
|
|
make('ab')
|
|
|
|
|
})),
|
2019-02-09 01:39:13 +03:00
|
|
|
])
|
2019-04-20 17:08:10 +03:00
|
|
|
make('in between two subtrees...')
|
2019-02-09 01:39:13 +03:00
|
|
|
// 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){
|
2019-02-20 17:11:34 +03:00
|
|
|
make('a')
|
2019-03-06 16:06:48 +03:00
|
|
|
make('---')
|
2019-02-20 17:11:34 +03:00
|
|
|
make('b')
|
2019-02-09 01:39:13 +03:00
|
|
|
}))
|
|
|
|
|
make('bbb')
|
2019-03-16 02:57:23 +03:00
|
|
|
make('bbb')
|
2019-02-09 01:39:13 +03:00
|
|
|
}))
|
|
|
|
|
}), {
|
|
|
|
|
//collapsed: true,
|
|
|
|
|
// XXX this does not appear to survive attaching an item
|
|
|
|
|
// to the document...
|
2019-06-04 19:50:52 +03:00
|
|
|
open: function(e){
|
|
|
|
|
e.preventDefault()
|
2019-06-06 17:16:36 +03:00
|
|
|
console.log('test: open: default prevented...') },
|
2019-02-09 01:39:13 +03:00
|
|
|
//cls: ['heading'],
|
|
|
|
|
})
|
2019-02-11 22:06:36 +03:00
|
|
|
}, {
|
|
|
|
|
itemButtons: [
|
|
|
|
|
['–'],
|
|
|
|
|
['□'],
|
|
|
|
|
],
|
2019-02-09 01:39:13 +03:00
|
|
|
})
|
|
|
|
|
|
2019-05-30 16:51:10 +03:00
|
|
|
dialog.container = $('.container').first()[0]
|
2019-02-09 01:39:13 +03:00
|
|
|
|
2019-06-04 04:28:08 +03:00
|
|
|
dialog
|
|
|
|
|
.update()
|
|
|
|
|
.focus()
|
2019-02-09 01:39:13 +03:00
|
|
|
|
2019-05-30 16:51:10 +03:00
|
|
|
//$('.container').first().append(dialog.render())
|
2019-02-09 01:39:13 +03:00
|
|
|
})
|
|
|
|
|
|
|
|
|
|
$(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 : -->
|
