mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-28 18:00:09 +00:00
tweaking and experimenting....
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
edcfa129fc
commit
c3acf39c0b
@ -270,6 +270,7 @@
|
||||
content: "/";
|
||||
}
|
||||
|
||||
.browse-widget .list .item:focus,
|
||||
.browse-widget .list .item.selected:focus,
|
||||
.browse-widget .list .item.selected :focus,
|
||||
.browse-widget:focus .list .item.selected,
|
||||
@ -282,6 +283,7 @@
|
||||
.browse-widget .list .item.selected {
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.browse-widget .list .item:focus,
|
||||
.browse-widget .list .item.selected:focus,
|
||||
.browse-widget .list .item.selected :focus,
|
||||
.browse-widget:focus .list .item.selected {
|
||||
@ -491,19 +493,21 @@
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
/* XXX can we make this simpler??? */
|
||||
.dark .browse-widget .list div.selected:focus,
|
||||
.dark .browse-widget .list div.selected :focus,
|
||||
.dark .browse-widget .list .item:focus,
|
||||
.dark .browse-widget .list .item.selected:focus,
|
||||
.dark .browse-widget .list .item.selected :focus,
|
||||
.dark .browse-widget:focus .list div.selected,
|
||||
.dark .browse-widget .path .dir:hover,
|
||||
.dark .browse-widget .list div:hover {
|
||||
.dark .browse-widget .list .item:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.dark .browse-widget .list div.selected {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.dark .browse-widget .list div.selected:focus,
|
||||
.dark .browse-widget .list div.selected :focus,
|
||||
.dark .browse-widget:focus .list div.selected {
|
||||
.dark .browse-widget .list .item:focus,
|
||||
.dark .browse-widget .list .item.selected:focus,
|
||||
.dark .browse-widget .list .item.selected :focus,
|
||||
.dark .browse-widget:focus .list .item.selected {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
|
||||
178
ui (gen4)/lib/widget/browse2.html
Executable file
178
ui (gen4)/lib/widget/browse2.html
Executable file
@ -0,0 +1,178 @@
|
||||
<!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
|
||||
|
||||
|
||||
dialog_1 = browser.Browser(function(make){
|
||||
make(123)
|
||||
make(321)
|
||||
make.group(
|
||||
make('a'),
|
||||
'b')
|
||||
make('e')
|
||||
// embeded browser...
|
||||
make(browser.Browser(function(make){
|
||||
make(1)
|
||||
make(2)
|
||||
}))
|
||||
// basic nested list...
|
||||
make.nest('A', [
|
||||
1,
|
||||
make('moo'),
|
||||
2,
|
||||
])
|
||||
// nested browser...
|
||||
make.nest('B',
|
||||
browser.Browser(function(make){
|
||||
make('xx')
|
||||
make('yx')
|
||||
make.nest('C', browser.Browser(function(make){
|
||||
make('aaa')
|
||||
make.nest('D', browser.Browser(function(make){
|
||||
make('a--a')
|
||||
make('b--b')
|
||||
}))
|
||||
make('bbb')
|
||||
}))
|
||||
}), {
|
||||
//collapsed: true,
|
||||
// XXX this does not appear to survive attaching an item
|
||||
// to the document...
|
||||
click: function(){ console.log('!!!!!!!!!!!!') },
|
||||
//cls: ['heading'],
|
||||
})
|
||||
})
|
||||
|
||||
dialog_1.__root = $('.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 : -->
|
||||
@ -429,7 +429,7 @@ var BaseBrowserPrototype = {
|
||||
this.options || {},
|
||||
options || {})
|
||||
|
||||
this.update()
|
||||
//this.update()
|
||||
},
|
||||
}
|
||||
|
||||
@ -460,7 +460,12 @@ var BrowserPrototype = {
|
||||
|
||||
},
|
||||
|
||||
dom: null,
|
||||
get dom(){
|
||||
return this.__root },
|
||||
set dom(value){
|
||||
this.__root ?
|
||||
this.__root.replaceWith(value)
|
||||
: (this.__root = value)},
|
||||
|
||||
// XXX instrument interactions...
|
||||
renderList: function(items, options){
|
||||
@ -470,7 +475,7 @@ var BrowserPrototype = {
|
||||
// dialog (container)...
|
||||
var dialog = document.createElement('div')
|
||||
dialog.classList.add('browse-widget')
|
||||
dialog.setAttribute('tab-index', '0')
|
||||
dialog.setAttribute('tabindex', '0')
|
||||
|
||||
// header...
|
||||
options.hideListHeader
|
||||
@ -492,10 +497,12 @@ var BrowserPrototype = {
|
||||
renderListHeader: function(options){
|
||||
var header = document.createElement('div')
|
||||
header.classList.add('path', 'v-block')
|
||||
header.setAttribute('tabindex', '0')
|
||||
|
||||
// XXX path/search...
|
||||
var dir = document.createElement('div')
|
||||
dir.classList.add('dir', 'cur')
|
||||
dir.setAttribute('tabindex', '0')
|
||||
header.appendChild(dir)
|
||||
|
||||
return header
|
||||
@ -536,13 +543,59 @@ var BrowserPrototype = {
|
||||
if(options.hidden && !options.renderHidden){
|
||||
return null
|
||||
}
|
||||
|
||||
//* XXX jQuery version -- not sure if we need this...
|
||||
var elem = item.dom = $('<div/>')
|
||||
// class...
|
||||
.addClass(['item']
|
||||
// user classes...
|
||||
.concat(item.cls || [])
|
||||
// special classes...
|
||||
.concat([
|
||||
//'focused',
|
||||
'selected',
|
||||
'disabled',
|
||||
'hidden',
|
||||
].filter(function(cls){
|
||||
return !!item[cls] }))
|
||||
.join(' '))
|
||||
// attrs...
|
||||
.attr(Object.assign({},
|
||||
item.attrs || {},
|
||||
{
|
||||
tabindex: '0',
|
||||
value: JSON.stringify(item.value),
|
||||
}))
|
||||
// value...
|
||||
// XXX handle $key shorthands...
|
||||
.append(...(item.value instanceof Array ? item.value : [item.value])
|
||||
.map(function(v){
|
||||
return $('<span class="text"/>')
|
||||
.html(v || item || '') }))
|
||||
// XXX buttons...
|
||||
// XXX placeholder button...
|
||||
.append($('<span class="button"/>').html('□'))
|
||||
// events...
|
||||
.run(function(){
|
||||
var e = this
|
||||
Object.entries(item.events || {})
|
||||
// shorthand events...
|
||||
.concat([
|
||||
'click',
|
||||
].map(function(evt){
|
||||
return [evt, item[evt]] }))
|
||||
// setup the handlers...
|
||||
.forEach(function([evt, handler]){
|
||||
handler
|
||||
&& e.on(evt, handler) }) })
|
||||
// XXX stub...
|
||||
return elem[0]
|
||||
/*/
|
||||
var elem = document.createElement('div')
|
||||
|
||||
// classes...
|
||||
elem.classList.add(...['item']
|
||||
// user classes...
|
||||
.concat(options.cls || [])
|
||||
.concat(item.cls || [])
|
||||
// special classes...
|
||||
.concat([
|
||||
//'focused',
|
||||
@ -550,35 +603,37 @@ var BrowserPrototype = {
|
||||
'disabled',
|
||||
'hidden',
|
||||
].filter(function(cls){
|
||||
return !!options[cls] })))
|
||||
return !!item[cls] })))
|
||||
|
||||
// attrs...
|
||||
Object.entries(options.attrs || {})
|
||||
.forEach(function({key, value}){
|
||||
Object.entries(item.attrs || {})
|
||||
.forEach(function([key, value]){
|
||||
elem.setAttribute(key, value) })
|
||||
elem.setAttribute('tabindex', '0')
|
||||
|
||||
// values...
|
||||
;(item.value instanceof Array ? item.value : [item.value])
|
||||
// XXX handle $keys and other stuff...
|
||||
.map(function(v){
|
||||
var value = document.createElement('span')
|
||||
value.classList.add('text')
|
||||
value.innerHTML = v || item || ''
|
||||
elem.appendChild(value)
|
||||
})
|
||||
// XXX not sure about this yet...
|
||||
elem.setAttribute('value', JSON.stringify(item.value))
|
||||
|
||||
// events...
|
||||
// XXX will the events survive attaching???
|
||||
var _elem = $(elem)
|
||||
Object.entries(options.events || {})
|
||||
// special events...
|
||||
Object.entries(item.events || {})
|
||||
// shorthand events...
|
||||
.concat([
|
||||
'click',
|
||||
].map(function(evt){ return [evt, options[evt]] }))
|
||||
'click',
|
||||
].map(function(evt){
|
||||
return [evt, item[evt]] }))
|
||||
// setup the handlers...
|
||||
.forEach(function({event, handler}){
|
||||
.forEach(function([evt, handler]){
|
||||
handler
|
||||
&& _elem.on(event, handler) })
|
||||
|
||||
&& elem.addEventListener(evt, handler) })
|
||||
|
||||
// XXX buttons...
|
||||
// XXX
|
||||
@ -586,6 +641,7 @@ var BrowserPrototype = {
|
||||
item.dom = elem
|
||||
|
||||
return elem
|
||||
//*/
|
||||
},
|
||||
|
||||
// save the rendered state to .dom
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user