2015-02-12 15:12:19 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
.container {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
|
|
top: 100px;
|
|
|
|
|
left: 100px;
|
2015-02-14 03:30:13 +03:00
|
|
|
|
|
|
|
|
box-shadow: rgba(0,0,0,0.5) 0.1em 0.1em 0.4em;
|
2015-03-03 05:27:47 +03:00
|
|
|
|
|
|
|
|
/* make the container expand only to a certain size, then scroll */
|
|
|
|
|
/* XXX need to:
|
|
|
|
|
- auto-scroll vertically
|
|
|
|
|
- use custom scroll bars
|
|
|
|
|
- shorten path to fit width
|
|
|
|
|
i.e. manage width manually when at max-width...
|
|
|
|
|
*/
|
|
|
|
|
max-height: 60vh;
|
|
|
|
|
max-width: 60vw;
|
|
|
|
|
height: auto;
|
|
|
|
|
width: auto;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
overflow-x: hidden;
|
2015-02-12 15:12:19 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.browse {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
min-width: 300px;
|
|
|
|
|
width: initial;
|
2015-02-13 03:09:40 +03:00
|
|
|
background: gray;
|
|
|
|
|
color: rgba(255,255,255,0.8);
|
|
|
|
|
padding: 5px;
|
|
|
|
|
font-family: sans-serif;
|
2015-02-12 15:12:19 +03:00
|
|
|
}
|
2015-02-15 21:59:14 +03:00
|
|
|
/*
|
|
|
|
|
.browse:not(:focus) {
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
}
|
|
|
|
|
*/
|
2015-02-12 15:12:19 +03:00
|
|
|
.browse .v-block {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: auto;
|
|
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
2015-02-13 03:09:40 +03:00
|
|
|
|
|
|
|
|
border-top: 1px solid rgba(255,255,255, 0.3);
|
|
|
|
|
}
|
|
|
|
|
.browse .v-block:first-of-type {
|
|
|
|
|
border-top: none;
|
2015-02-12 15:12:19 +03:00
|
|
|
}
|
|
|
|
|
.browse .v-block:empty {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2015-02-13 03:09:40 +03:00
|
|
|
.browse .title {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: rgba(255,255,255,0.9);
|
|
|
|
|
padding: 5px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
padding-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
2015-02-12 15:12:19 +03:00
|
|
|
.browse .path {
|
2015-02-13 03:09:40 +03:00
|
|
|
padding: 5px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
padding-right: 10px;
|
2015-02-12 15:12:19 +03:00
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
2015-02-13 02:28:42 +03:00
|
|
|
.browse .path:empty {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
.browse .path:before {
|
|
|
|
|
content: "/";
|
|
|
|
|
}
|
2015-02-12 15:12:19 +03:00
|
|
|
.browse .path .dir {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
.browse .path .dir:after {
|
|
|
|
|
content: "/";
|
|
|
|
|
}
|
2015-03-21 18:20:59 +03:00
|
|
|
.browse .path .dir.cur {
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
}
|
|
|
|
|
.browse .path .dir.cur:after {
|
|
|
|
|
content: "";
|
|
|
|
|
}
|
|
|
|
|
.browse .path .dir.cur:hover {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
2015-03-22 02:12:30 +03:00
|
|
|
.browse .path .dir.cur:empty:not([contenteditable]) {
|
2015-06-18 01:41:57 +03:00
|
|
|
position: relative;
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 12px;
|
|
|
|
|
background: transparent;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
.browse .path .dir.cur:empty:hover:not([contenteditable]) {
|
2015-06-18 02:34:06 +03:00
|
|
|
opacity: 0.6;
|
2015-06-18 01:41:57 +03:00
|
|
|
}
|
|
|
|
|
.browse .path .dir.cur:empty:hover:not([contenteditable]):after {
|
2015-06-18 02:34:06 +03:00
|
|
|
content: "______";
|
|
|
|
|
border: dashed white 1px;
|
|
|
|
|
cursor: text;
|
2015-03-21 18:20:59 +03:00
|
|
|
}
|
2015-02-15 21:59:14 +03:00
|
|
|
/* XXX need to make this resizable up but only to a certain size (~80vh) */
|
|
|
|
|
/*
|
|
|
|
|
.browse .list {
|
|
|
|
|
max-height: 50vh;
|
|
|
|
|
}
|
|
|
|
|
.browse .list:empty {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
*/
|
2015-02-13 03:09:40 +03:00
|
|
|
.browse .list div {
|
|
|
|
|
padding: 5px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
padding-right: 10px;
|
2015-02-12 17:16:00 +03:00
|
|
|
}
|
|
|
|
|
|
2015-02-14 03:30:13 +03:00
|
|
|
.browse:focus .list div.selected,
|
2015-02-12 15:12:19 +03:00
|
|
|
.browse .path .dir:hover,
|
|
|
|
|
.browse .list div:hover {
|
2015-02-13 03:09:40 +03:00
|
|
|
color: white;
|
2015-02-14 03:30:13 +03:00
|
|
|
background: rgba(0,0,0, 0.05);
|
2015-02-13 03:09:40 +03:00
|
|
|
}
|
|
|
|
|
|
2015-06-18 00:13:30 +03:00
|
|
|
/* XXX need to make the next two different... */
|
|
|
|
|
.browse .list div.filtered-out {
|
2015-06-18 00:23:23 +03:00
|
|
|
opacity: 0.5;
|
|
|
|
|
}
|
|
|
|
|
.browse:not(.show-filtered-out) .list div.filtered-out {
|
|
|
|
|
display: none;
|
2015-06-18 00:13:30 +03:00
|
|
|
}
|
|
|
|
|
.browse .list div.disabled {
|
|
|
|
|
opacity: 0.3;
|
|
|
|
|
}
|
|
|
|
|
|
2015-02-14 03:30:13 +03:00
|
|
|
.browse:focus .list div.selected {
|
2015-02-12 15:12:19 +03:00
|
|
|
background: rgba(0,0,0, 0.1);
|
2015-02-13 03:09:40 +03:00
|
|
|
box-shadow: rgba(0,0,0,0.2) 0.1em 0.1em 0.2em;
|
2015-02-12 15:12:19 +03:00
|
|
|
}
|
|
|
|
|
|
2015-02-14 03:30:13 +03:00
|
|
|
.browse .list div.selected {
|
|
|
|
|
background: rgba(0,0,0, 0.08);
|
|
|
|
|
}
|
|
|
|
|
|
2015-02-13 03:09:40 +03:00
|
|
|
|
2015-06-18 00:13:30 +03:00
|
|
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
|
|
width: 10px;
|
|
|
|
|
}
|
|
|
|
|
::-webkit-scrollbar-button {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
|
|
}
|
|
|
|
|
::-webkit-scrollbar-track-piece {
|
|
|
|
|
background: gray;
|
|
|
|
|
}
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
|
|
background: rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
|
|
|
background: rgba(0, 0, 0, 0.3);
|
|
|
|
|
}
|
|
|
|
|
::-webkit-scrollbar-corner {
|
|
|
|
|
}
|
|
|
|
|
::-webkit-resizer {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2015-02-12 15:12:19 +03:00
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script src="../ext-lib/jquery.js"></script>
|
|
|
|
|
<script src="../ext-lib/jquery-ui.js"></script>
|
|
|
|
|
|
|
|
|
|
<script src="../lib/jli.js"></script>
|
|
|
|
|
|
2015-02-12 19:07:13 +03:00
|
|
|
<script src="../ext-lib/require.js"></script>
|
|
|
|
|
|
2015-03-21 16:45:20 +03:00
|
|
|
|
|
|
|
|
<script src="browse-dialog.js"></script>
|
|
|
|
|
|
2015-02-12 15:12:19 +03:00
|
|
|
<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',
|
|
|
|
|
},
|
2015-03-03 05:27:47 +03:00
|
|
|
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: {},
|
2015-02-12 15:12:19 +03:00
|
|
|
},
|
|
|
|
|
file: 'this is a file',
|
|
|
|
|
}
|
2015-02-13 02:28:42 +03:00
|
|
|
// add some recursion for testing...
|
|
|
|
|
TREE.dir_d = TREE.dir_c.dir_b
|
|
|
|
|
TREE.dir_a.tree = TREE
|
2015-02-14 03:30:13 +03:00
|
|
|
TREE.dir_c.tree = TREE
|
2015-02-13 02:28:42 +03:00
|
|
|
TREE.dir_c.dir_b.tree = TREE
|
2015-02-12 15:12:19 +03:00
|
|
|
|
2015-02-12 19:07:13 +03:00
|
|
|
|
|
|
|
|
|
2015-03-16 20:40:08 +03:00
|
|
|
//---
|
|
|
|
|
|
2015-02-12 19:07:13 +03:00
|
|
|
|
2015-03-16 20:40:08 +03:00
|
|
|
requirejs(['../lib/keyboard', '../object'], function(k, o){
|
|
|
|
|
keyboard = k
|
|
|
|
|
object = o
|
2015-02-12 19:07:13 +03:00
|
|
|
|
2015-03-21 16:45:20 +03:00
|
|
|
Browser = object.makeConstructor('Browser',
|
|
|
|
|
BrowserClassPrototype,
|
|
|
|
|
BrowserPrototype)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
b = Browser($('.container').last(), {
|
|
|
|
|
list: function(path){
|
2015-05-25 20:02:47 +03:00
|
|
|
console.log('>>>', path)
|
2015-03-21 16:45:20 +03:00
|
|
|
var cur = TREE
|
|
|
|
|
path.forEach(function(p){
|
|
|
|
|
cur = cur[p]
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
return Object.keys(cur)
|
|
|
|
|
.filter(function(k){
|
|
|
|
|
// XXX stub...
|
|
|
|
|
return typeof(cur[k]) != typeof('str')
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
.focus()
|
2015-02-12 19:07:13 +03:00
|
|
|
})
|
2015-02-12 15:12:19 +03:00
|
|
|
|
|
|
|
|
$(function(){
|
2015-03-21 16:45:20 +03:00
|
|
|
|
|
|
|
|
$('.container').first().remove()
|
2015-02-14 03:30:13 +03:00
|
|
|
|
2015-02-14 03:37:24 +03:00
|
|
|
$('.container').draggable({
|
|
|
|
|
cancel: ".path .dir, .list div"
|
|
|
|
|
})
|
|
|
|
|
|
2015-03-21 16:45:20 +03:00
|
|
|
//browser.focus()
|
2015-02-12 15:12:19 +03:00
|
|
|
})
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
2015-02-12 17:16:00 +03:00
|
|
|
<button onclick="pop()"><</button>
|
|
|
|
|
<button onclick="push()">></button>
|
|
|
|
|
<button onclick="prev()">^</button>
|
|
|
|
|
<button onclick="next()">v</button>
|
|
|
|
|
|
2015-02-12 15:12:19 +03:00
|
|
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="browse">
|
|
|
|
|
<!-- title, optional -->
|
|
|
|
|
<div class="v-block title">
|
|
|
|
|
[title]
|
|
|
|
|
</div>
|
|
|
|
|
|
2015-06-18 00:13:30 +03:00
|
|
|
<!-- current path -->
|
2015-02-12 15:12:19 +03:00
|
|
|
<div class="v-block path">
|
|
|
|
|
<div class="dir">
|
|
|
|
|
[dir]
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dir">
|
|
|
|
|
[dir]
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dir">
|
|
|
|
|
[dir]
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2015-06-18 00:13:30 +03:00
|
|
|
<!-- path list -->
|
2015-02-12 15:12:19 +03:00
|
|
|
<div class="v-block list">
|
|
|
|
|
<div>
|
|
|
|
|
[dir]
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
[dir]
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
[dir]
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- info, optional -->
|
|
|
|
|
<div class="v-block info">
|
|
|
|
|
[info]
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- buttons, optional -->
|
|
|
|
|
<div class="v-block actions">
|
|
|
|
|
[actions]
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-21 16:45:20 +03:00
|
|
|
<div class="container">
|
|
|
|
|
</div>
|
2015-02-12 15:12:19 +03:00
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
2015-02-28 12:04:43 +03:00
|
|
|
<!-- vim:set ts=4 sw=4 : -->
|
