mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 11:20:09 +00:00
428 lines
9.9 KiB
HTML
Executable File
428 lines
9.9 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<link rel="stylesheet" href="../../css/widget/browse.css">
|
|
<link rel="stylesheet" href="../../css/fonts.css">
|
|
|
|
<meta name="viewport" content="width=device-width">
|
|
|
|
<style>
|
|
|
|
body {
|
|
font-family: OpenSans, sans-serif;
|
|
}
|
|
|
|
.container {
|
|
position: absolute;
|
|
}
|
|
|
|
|
|
.browse-widget {
|
|
user-select: none;
|
|
}
|
|
.browse-widget .list :focus {
|
|
outline: none;
|
|
}
|
|
|
|
|
|
/* XXX move these to the main CSS */
|
|
.browse-widget:not(.flat) .list .item:not(.not-traversable) .text:after {
|
|
content: "";
|
|
}
|
|
/* XXX this needs to be the last .text item only */
|
|
.browse-widget .list .traversable .text:after {
|
|
content: "/" !important;
|
|
}
|
|
|
|
/* selection... */
|
|
.browse-widget .list .selected {
|
|
color: yellow;
|
|
background: none;
|
|
}
|
|
.browse-widget .list .focused {
|
|
background: rgba(0, 0, 0, 0.08);
|
|
}
|
|
.browse-widget .list .item.heading.focused {
|
|
background: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
/* XXX not sure about this... */
|
|
.browse-widget .list .list {
|
|
overflow: visible;
|
|
}
|
|
|
|
.browse-widget .list.items .text + .text:before {
|
|
content: " ";
|
|
white-space: pre;
|
|
}
|
|
|
|
.browse-widget .list .text .key-hint {
|
|
text-decoration-skip-ink: none;
|
|
}
|
|
|
|
/* show non-global key hint on buttons only when element is focused... */
|
|
.browse-widget .list .item:not(.focused) .button .key-hint:not(.global) {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* flat list... */
|
|
.browse-widget.flat .list .list {
|
|
padding-left: 0px;
|
|
}
|
|
.browse-widget.flat .list .list>.item:first-child {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
/* XXX the problem here is that the frame scrolls with the content and does not stay in place...
|
|
.browse-widget>.list:after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
box-shadow:
|
|
0 50px 10px -50px yellow inset,
|
|
0 -50px 10px -50px yellow inset;
|
|
}
|
|
*/
|
|
|
|
.item.path .text:before {
|
|
content: "/";
|
|
margin-left: 0.1em;
|
|
margin-right: 0.1em;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* XXX experimental... */
|
|
.item.sticky {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 0px;
|
|
background: gray;
|
|
}
|
|
|
|
|
|
/*
|
|
.browse-widget .list .item .button.toggle-collapse {
|
|
float: left;
|
|
}
|
|
*/
|
|
|
|
|
|
/* XXX stub...
|
|
.browse-widget .list .text:first-child:before {
|
|
display: inline-block;
|
|
width: 5pt;
|
|
padding-right: 3pt;
|
|
content: " ";
|
|
}
|
|
.browse-widget .list .traversable .text:first-child:before {
|
|
}
|
|
.browse-widget .list .traversable:not(.collapsed) .text:first-child:before {
|
|
content: "-";
|
|
}
|
|
.browse-widget .list .traversable.collapsed .text:first-child:before {
|
|
content: "+";
|
|
}
|
|
*/
|
|
|
|
|
|
/* scrollbar setup... */
|
|
.browse-widget ::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
.browse-widget ::-webkit-scrollbar-button {
|
|
display: none;
|
|
}
|
|
.browse-widget ::-webkit-scrollbar-track {
|
|
}
|
|
.browse-widget ::-webkit-scrollbar-track-piece {
|
|
background: transparent;
|
|
}
|
|
.browse-widget ::-webkit-scrollbar-track-piece {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
}
|
|
.browse-widget ::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 0, 0, 0.15);
|
|
}
|
|
.browse-widget ::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
.browse-widget ::-webkit-scrollbar-corner {
|
|
}
|
|
.browse-widget ::-webkit-resizer {
|
|
}
|
|
|
|
|
|
|
|
|
|
</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="../../cfg/requirejs.js"></script>
|
|
|
|
|
|
<!--script src="browse-dialog.js"></script-->
|
|
|
|
<script>
|
|
|
|
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/walk': '../../node_modules/generic-walk/walk',
|
|
//'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 = browser.Browser(
|
|
//browser.items.DisplayFocusedPath,
|
|
//null,
|
|
function(make){
|
|
// item demo...
|
|
make.nest(make.Heading('$Predefined Items'), [
|
|
make('Normal item'),
|
|
make.Heading('Heading'),
|
|
make.Empty({doc: 'Empty item...'}),
|
|
//make.Separator({doc: 'Separator..'}),
|
|
//make.Spinner({doc: 'Spinner...'}),
|
|
//make.Editable(),
|
|
make.Confirm('Confirm',
|
|
function(){ console.log('confirm') },
|
|
function(){ console.log('reject') }),
|
|
])
|
|
// filed demo...
|
|
make.nest(make.Heading('$Fields'), [
|
|
make.field('field', 'value'),
|
|
])
|
|
make.nest(make.Heading('$Dynamic Items', {
|
|
doc: 'Item generator examples...',
|
|
}), [
|
|
make.DisplayFocusedPath({
|
|
id: 'inline_item_path_display',
|
|
doc: 'Shows path of focused item...'
|
|
}),
|
|
make.DisplayItemInfo({
|
|
id: 'inline_item_info_display',
|
|
doc: 'Shows the value of .doc/.alt item attr...',
|
|
}),
|
|
])
|
|
make.nest(make.Heading('Nesting test...', {collapsed: true}), [
|
|
make.nest('A', [
|
|
make('B'),
|
|
make('C'),
|
|
]),
|
|
make.nest('D', [
|
|
make.group(
|
|
make('E'),
|
|
make('F'))
|
|
]),
|
|
])
|
|
|
|
make.Separator()
|
|
|
|
make(['list', 'of', 'text'])
|
|
make.group(
|
|
make('$group item 0 (open event)',
|
|
function(){ console.log('##', ...arguments) }),
|
|
'group item 1 (bare)')
|
|
// XXX Q: should we show only one if multiple lines are in sequence???
|
|
make('---')
|
|
// embeded browser...
|
|
make(browser.Browser(function(make){
|
|
make('inlined browser item 0 (open/menu events)', {
|
|
open: function(){ console.log('!!! OPEN', ...arguments) },
|
|
menu: function(){ console.log('!!! MENU', ...arguments) },
|
|
})
|
|
make(1)
|
|
make(2)
|
|
}))
|
|
// basic nested list...
|
|
make.nest('$nested', [
|
|
make('mo$o', {disabled: true}),
|
|
2,
|
|
// XXX this is not supported by .map(..)...
|
|
make.nest('$ne$sted', browser.Browser(function(make){
|
|
make('ab')
|
|
//make('<img src="../../experiments/grayscale.jpg">',
|
|
//make($('<img src="../../experiments/grayscale.jpg">')[0],
|
|
make($('<img src="../../experiments/grayscale.jpg">'),
|
|
{
|
|
alt: 'image item example'
|
|
})
|
|
})),
|
|
])
|
|
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', {buttons: [
|
|
['test', 'focus: "parent"'],
|
|
'Checkbox',
|
|
]})
|
|
make('bbb')
|
|
}))
|
|
}), {
|
|
//collapsed: true,
|
|
// XXX this does not appear to survive attaching an item
|
|
// to the document...
|
|
open: function(e){
|
|
e.preventDefault()
|
|
console.log('test: open: default prevented...') },
|
|
//cls: ['heading'],
|
|
})
|
|
|
|
make.Separator()
|
|
|
|
make.nest(
|
|
'scroll testing',
|
|
(new Array(100))
|
|
.fill(1)
|
|
.map(function(_, i){
|
|
return make(i) }))
|
|
|
|
},
|
|
//browser.items.DisplayItemInfo,
|
|
//browser.items.makeDisplayItem('Simple message...'),
|
|
//browser.items.makeDisplayConfirm(null,
|
|
// function(){ console.log('OK') },
|
|
// function(){ console.log('Cancel') }),
|
|
{
|
|
headerButtons: [
|
|
['c', 'collapse: "*"'],
|
|
['e', 'expand: "*"'],
|
|
],
|
|
itemButtons: [
|
|
['–',
|
|
'buttonAction: item button focused -- example button action...'],
|
|
['□',
|
|
function(){ console.log('BUTTON:', ...arguments) },
|
|
{ keys: 'r' }],
|
|
'ToggleCollapse',
|
|
'ToggleDisabled',
|
|
],
|
|
/*
|
|
footerButtons: [
|
|
['save'],
|
|
['cancel'],
|
|
],
|
|
//*/
|
|
})
|
|
|
|
dialog.container = $('.container').first()[0]
|
|
|
|
// button handler...
|
|
dialog.buttonAction = function(item, button, focused){
|
|
console.log(`BUTTON "${button}":`, item, '-- focus at:', focused) }
|
|
|
|
dialog
|
|
.update()
|
|
.focus()
|
|
|
|
//$('.container').first().append(dialog.render())
|
|
|
|
})
|
|
|
|
$(function(){
|
|
|
|
$('.container')
|
|
.draggable({
|
|
//handle: '.list.header',
|
|
cancel: '.list.items',
|
|
})
|
|
})
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<body>
|
|
|
|
<div class="container tree">
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<pre style="position: absolute; display: block; top: 0; right: 0; width: 50%; ">
|
|
|
|
<b>Issues:</b>
|
|
- an issue with DOM replacement during the update sequence...
|
|
- kills draggable...
|
|
the main list is dragable but after render it does not work.
|
|
- messes with buttons on nested lists...
|
|
to reproduce:
|
|
open: B/C (copy path, then paste to dialog)
|
|
collapce...
|
|
- B is hidden fully
|
|
recover by collapsing B then expanding
|
|
- now everything is working but buttons are not drawn
|
|
- who is responsible for drawing? ...parent or child?
|
|
...this might be related to the above issue (case #2)
|
|
- is this overcomplicated???
|
|
...can the core be simpler and more modular?
|
|
should investigate <i>after</i> the main functionality is implemented
|
|
<i>NOTE: the actual LOC count is 2727 at this point in time (20200327)
|
|
so what's bugging me from time to time is not the code bloat but
|
|
rather doc bloat...
|
|
...but I'm not saying that there's no code bloat, though it's not
|
|
as big as I fear =)</i>
|
|
|
|
|
|
<b>ToDo:</b>
|
|
- interactive <i>path</i> element...
|
|
- <i>search</i> -- flat/deep
|
|
- <i>flat tree</i> render, one level at a time (a-la browse-walk.js / finder)
|
|
- migrate <i>make.*</i> constructors from browse.js...
|
|
- integrate into the widget framework...
|
|
...either inherit or redesign the older code...
|
|
- <i>partial render</i> for long lists...
|
|
- refactor/revise...
|
|
|
|
</pre>
|
|
|
|
</body>
|
|
</html>
|
|
<!-- vim:set ts=4 sw=4 : -->
|