mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-28 18:00:09 +00:00
tweaking and refactoring...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
9c9962c21a
commit
4b1c5d2e45
@ -51,6 +51,13 @@ body {
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
/* XXX foe some reason the shadows here are BELLOW the content... */
|
||||
.browse-widget>.list {
|
||||
box-shadow:
|
||||
0 50px 10px -50px gray inset,
|
||||
0 -50px 10px -50px gray inset;
|
||||
}
|
||||
|
||||
/*
|
||||
.browse-widget .list .item .button.toggle-collapse {
|
||||
float: left;
|
||||
@ -121,52 +128,6 @@ body {
|
||||
|
||||
<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',
|
||||
@ -198,6 +159,9 @@ requirejs([
|
||||
|
||||
// XXX split this into several dialogues, show each and then combine...
|
||||
dialog = browser.Browser(function(make){
|
||||
make('path', {id:'selected_path'})
|
||||
make.Separator()
|
||||
|
||||
make(['list', 'of', 'text'])
|
||||
make.group(
|
||||
make('$group item 0 (open event)',
|
||||
@ -276,6 +240,11 @@ requirejs([
|
||||
'ToggleDisabled',
|
||||
],
|
||||
})
|
||||
// XXX EXPEREMENT -- need to wrap this into partial .update(..)
|
||||
.focus(function(){
|
||||
var e = this.get({id: 'selected_path'})
|
||||
e.value = this.path
|
||||
this.renderItem(e) })
|
||||
|
||||
dialog.container = $('.container').first()[0]
|
||||
|
||||
|
||||
@ -2883,8 +2883,13 @@ var BaseBrowserPrototype = {
|
||||
function(){ return this.focused || 0 },
|
||||
false),
|
||||
// selection...
|
||||
select: makeItemOptionOnEventMethod('select', 'selected'),
|
||||
deselect: makeItemOptionOffEventMethod('deselect', 'selected'),
|
||||
select: makeItemOptionOnEventMethod('select', 'selected', {
|
||||
options: function(){
|
||||
return {
|
||||
skipDisabled: !(this.options || {}).focusDisabled,
|
||||
} }, }),
|
||||
deselect: makeItemOptionOffEventMethod('deselect', 'selected', {
|
||||
options: { skipDisabled: false }, }),
|
||||
toggleSelect: makeItemEventToggler('selected', 'select', 'deselect', 'focused'),
|
||||
// topology...
|
||||
collapse: makeItemOptionOnEventMethod('collapse', 'collapsed', {
|
||||
@ -3134,8 +3139,37 @@ var HTMLItemClassPrototype = {
|
||||
var HTMLItemPrototype = {
|
||||
__proto__: BaseItem.prototype,
|
||||
|
||||
__dom: undefined,
|
||||
get dom(){
|
||||
return this.__dom },
|
||||
set dom(value){
|
||||
this.__dom
|
||||
// NOTE: a node can't be attached to two places, so in this
|
||||
// case (i.e. when replacing item with list containing
|
||||
// item) we do not need to do anything as attaching to
|
||||
// the tree is done by the code that created the parent
|
||||
// and called us...
|
||||
&& !value.contains(this.__dom)
|
||||
&& this.__dom.replaceWith(value)
|
||||
this.__dom = value },
|
||||
|
||||
get elem(){
|
||||
return this.constructor.elem(this) },
|
||||
// XXX for this to be practical we need to slightly update rendering...
|
||||
// ...currently the following are not equivalent:
|
||||
//
|
||||
// dialog.get(0).elem = dialog.renderItem(dialog.get(0), 0, {})
|
||||
//
|
||||
// dialog.get(0).elem.replaceWith(dialog.renderItem(dialog.get(0), 0, {}))
|
||||
//
|
||||
// #2 works as expected while #1 seems not to change anything, this
|
||||
// is because in #1 .renderItem(..) actually sets new .dom BEFORE
|
||||
// calling .elem.replaceWith(..)...
|
||||
// the new .dom value is replaced correctly but it is detached,
|
||||
// thus we see no change...
|
||||
set elem(value){
|
||||
this.dom
|
||||
&& this.elem.replaceWith(value) },
|
||||
}
|
||||
|
||||
var HTMLItem =
|
||||
@ -3446,7 +3480,7 @@ var HTMLBrowserPrototype = {
|
||||
set dom(value){
|
||||
this.container
|
||||
&& (this.__dom ?
|
||||
this.container.replaceChild(value, this.__dom)
|
||||
this.dom.replaceWith(value)
|
||||
: this.container.appendChild(value))
|
||||
this.__dom = value },
|
||||
|
||||
@ -3812,19 +3846,22 @@ var HTMLBrowserPrototype = {
|
||||
// - ???
|
||||
renderItem: function(item, i, context){
|
||||
var that = this
|
||||
var options = context.options || this.options || {}
|
||||
var options = (context || {}).options || this.options || {}
|
||||
if(options.hidden && !options.renderHidden){
|
||||
return null
|
||||
}
|
||||
|
||||
// helpers...
|
||||
// XXX we need to more carefully test the value to avoid name clashes...
|
||||
var resolveValue = function(value, context, exec_context){
|
||||
var htmlhandler = typeof(value) == typeof('str') ?
|
||||
that.parseStringHandler(value, exec_context)
|
||||
: null
|
||||
return value instanceof Function ?
|
||||
value.call(that, item)
|
||||
: htmlhandler && htmlhandler.action in context ?
|
||||
: htmlhandler
|
||||
&& htmlhandler.action in context
|
||||
&& context[htmlhandler.action] instanceof Function ?
|
||||
context[htmlhandler.action]
|
||||
.call(that, item, ...htmlhandler.arguments)
|
||||
: value }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user