mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-30 10:50:08 +00:00
reworked generating sections...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
9c6f39ea9f
commit
3c7de1f2c3
@ -171,7 +171,16 @@ requirejs([
|
|||||||
|
|
||||||
|
|
||||||
// XXX split this into several dialogues, show each and then combine...
|
// XXX split this into several dialogues, show each and then combine...
|
||||||
dialog = browser.Browser(function(make){
|
dialog = browser.Browser(
|
||||||
|
function(make, options){
|
||||||
|
make('CURRENT_PATH', {
|
||||||
|
id: 'current_path',
|
||||||
|
cls: 'path',
|
||||||
|
buttons: (options || {}).headerButtons
|
||||||
|
|| (this.options || {}).headerButtons
|
||||||
|
|| [],
|
||||||
|
}) },
|
||||||
|
function(make){
|
||||||
// XXX put this in the header...
|
// XXX put this in the header...
|
||||||
// ways to do this:
|
// ways to do this:
|
||||||
// - a different handler
|
// - a different handler
|
||||||
|
|||||||
@ -787,13 +787,20 @@ var makeItemEventToggler2 = function(get_state, set_state, unset_state, default_
|
|||||||
var BaseBrowserClassPrototype = {
|
var BaseBrowserClassPrototype = {
|
||||||
}
|
}
|
||||||
|
|
||||||
// XXX Q: should we be able to add/remove/change items outside of .__list__(..)???
|
// XXX Q: should we be able to add/remove/change items outside of .__items__(..)???
|
||||||
// ...only some item updates (how .collapsed is handled) make
|
// ...only some item updates (how .collapsed is handled) make
|
||||||
// sense at this time -- need to think about this more
|
// sense at this time -- need to think about this more
|
||||||
// carefully + strictly document the result...
|
// carefully + strictly document the result...
|
||||||
var BaseBrowserPrototype = {
|
var BaseBrowserPrototype = {
|
||||||
// XXX should we mix item/list options or separate them into sub-objects???
|
// XXX should we mix item/list options or separate them into sub-objects???
|
||||||
options: {
|
options: {
|
||||||
|
sections: [
|
||||||
|
'header',
|
||||||
|
'items',
|
||||||
|
// XXX do we need this?
|
||||||
|
//'footer',
|
||||||
|
],
|
||||||
|
|
||||||
focusDisabled: false,
|
focusDisabled: false,
|
||||||
|
|
||||||
// If true item keys must be unique...
|
// If true item keys must be unique...
|
||||||
@ -838,6 +845,7 @@ var BaseBrowserPrototype = {
|
|||||||
// NOTE: this may or may not be a Browser object.
|
// NOTE: this may or may not be a Browser object.
|
||||||
parent: null,
|
parent: null,
|
||||||
|
|
||||||
|
// Section containers...
|
||||||
//
|
//
|
||||||
// Format:
|
// Format:
|
||||||
// [
|
// [
|
||||||
@ -855,13 +863,12 @@ var BaseBrowserPrototype = {
|
|||||||
// NOTE: this can't be a map/dict as we need both order manipulation
|
// NOTE: this can't be a map/dict as we need both order manipulation
|
||||||
// and nested structures which would overcomplicate things, as
|
// and nested structures which would overcomplicate things, as
|
||||||
// a compromise we use .index below for item identification.
|
// a compromise we use .index below for item identification.
|
||||||
// XXX should the header be restricted to being separate???
|
|
||||||
__header: null,
|
__header: null,
|
||||||
get header(){
|
get header(){
|
||||||
this.__header
|
this.__header
|
||||||
// XXX should this be .makeHeader(..) ???
|
|| (this.__header__
|
||||||
|| this.make()
|
&& this.make({section: 'header'}))
|
||||||
return this.__header },
|
return this.__header || [] },
|
||||||
set header(value){
|
set header(value){
|
||||||
this.__header = value },
|
this.__header = value },
|
||||||
__items: null,
|
__items: null,
|
||||||
@ -871,6 +878,14 @@ var BaseBrowserPrototype = {
|
|||||||
return this.__items },
|
return this.__items },
|
||||||
set items(value){
|
set items(value){
|
||||||
this.__items = value },
|
this.__items = value },
|
||||||
|
__footer: null,
|
||||||
|
get footer(){
|
||||||
|
this.__footer
|
||||||
|
|| (this.__footer__
|
||||||
|
&& this.make({section: 'footer'}))
|
||||||
|
return this.__footer || [] },
|
||||||
|
set footer(value){
|
||||||
|
this.__footer = value },
|
||||||
|
|
||||||
|
|
||||||
// Clear cached data...
|
// Clear cached data...
|
||||||
@ -1059,9 +1074,11 @@ var BaseBrowserPrototype = {
|
|||||||
|
|
||||||
__item__: BaseItem,
|
__item__: BaseItem,
|
||||||
|
|
||||||
// Item list constructor...
|
// Section item list constructor...
|
||||||
//
|
//
|
||||||
// .__list__(make, options)
|
// .__header__(make, options)
|
||||||
|
// .__items__(make, options)
|
||||||
|
// .__footer__(make, options)
|
||||||
// -> undefined
|
// -> undefined
|
||||||
// -> list
|
// -> list
|
||||||
//
|
//
|
||||||
@ -1085,14 +1102,14 @@ var BaseBrowserPrototype = {
|
|||||||
// When calling make(..) (mode #1) the item is built by combining
|
// When calling make(..) (mode #1) the item is built by combining
|
||||||
// the following in order:
|
// the following in order:
|
||||||
// - original item (.items[key]) if present,
|
// - original item (.items[key]) if present,
|
||||||
// - options passed to .make(<options>) method calling .__list__(..),
|
// - options passed to .make(<options>) method calling .__items__(..),
|
||||||
// - options passed to make(.., <options>) constructing the item,
|
// - options passed to make(.., <options>) constructing the item,
|
||||||
// - {value: <value>} where <value> passed to make(<value>, ..)
|
// - {value: <value>} where <value> passed to make(<value>, ..)
|
||||||
//
|
//
|
||||||
// Each of the above will override values of the previous sections.
|
// Each of the above will override values of the previous sections.
|
||||||
//
|
//
|
||||||
// The resulting item is stored in:
|
// The resulting item is stored in:
|
||||||
// .items
|
// .header, .items or .footer
|
||||||
// .index (keyed via .id or JSONified .value)
|
// .index (keyed via .id or JSONified .value)
|
||||||
//
|
//
|
||||||
// Each of the above structures is reset on each call to .make(..)
|
// Each of the above structures is reset on each call to .make(..)
|
||||||
@ -1126,19 +1143,19 @@ var BaseBrowserPrototype = {
|
|||||||
//
|
//
|
||||||
//
|
//
|
||||||
// NOTE: this is not designed to be called directly...
|
// NOTE: this is not designed to be called directly...
|
||||||
__list__: function(make, options){
|
|
||||||
throw new Error('.__list__(..): Not implemented.') },
|
|
||||||
|
|
||||||
// XXX header constructor, same as .__list__(..) but optional...
|
|
||||||
__header__: null,
|
__header__: null,
|
||||||
|
__items__: function(make, options){
|
||||||
|
throw new Error('.__items__(..): Not implemented.') },
|
||||||
|
__footer__: null,
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Make extension...
|
// Make extension...
|
||||||
//
|
//
|
||||||
// This is called per item created by make(..) in .__list__(..)
|
// This is called per item created by make(..) in .__items__(..)
|
||||||
//
|
//
|
||||||
// NOTE: this can update/modify the item but it can not replace it.
|
// NOTE: this can update/modify the item but it can not replace it.
|
||||||
//__make__: function(item){
|
//__make__: function(section, item){
|
||||||
//},
|
//},
|
||||||
|
|
||||||
|
|
||||||
@ -1148,7 +1165,7 @@ var BaseBrowserPrototype = {
|
|||||||
// .make(options)
|
// .make(options)
|
||||||
// -> this
|
// -> this
|
||||||
//
|
//
|
||||||
// The items are constructed by passing a make function to .__list__(..)
|
// The items are constructed by passing a make function to .__items__(..)
|
||||||
// which in turn will call this make(..) per item created.
|
// which in turn will call this make(..) per item created.
|
||||||
//
|
//
|
||||||
// For more doc on item construction see: .__init__(..)
|
// For more doc on item construction see: .__init__(..)
|
||||||
@ -1159,7 +1176,7 @@ var BaseBrowserPrototype = {
|
|||||||
// identify an item thus no state is maintained between .make(..)
|
// identify an item thus no state is maintained between .make(..)
|
||||||
// calls for such items...
|
// calls for such items...
|
||||||
//
|
//
|
||||||
// XXX revise options handling for .__list__(..)
|
// XXX revise options handling for .__items__(..)
|
||||||
// XXX might be a good idea to enable the user to merge the state
|
// XXX might be a good idea to enable the user to merge the state
|
||||||
// manually...
|
// manually...
|
||||||
// one way to do:
|
// one way to do:
|
||||||
@ -1167,19 +1184,30 @@ var BaseBrowserPrototype = {
|
|||||||
// - update it
|
// - update it
|
||||||
// - pass it to make(..)
|
// - pass it to make(..)
|
||||||
// Example:
|
// Example:
|
||||||
// // just a rough example in .__list__(..)...
|
// // just a rough example in .__items__(..)...
|
||||||
// make(value,
|
// make(value,
|
||||||
// value in this.index ?
|
// value in this.index ?
|
||||||
// Object.assign(
|
// Object.assign(
|
||||||
// this.index[value],
|
// this.index[value],
|
||||||
// opts)
|
// opts)
|
||||||
// : opts)
|
// : opts)
|
||||||
|
// XXX revise if stage 2 is applicable to sections other than .items
|
||||||
make: function(options){
|
make: function(options){
|
||||||
var that = this
|
var that = this
|
||||||
options = Object.assign(
|
options = Object.assign(
|
||||||
Object.create(this.options || {}),
|
Object.create(this.options || {}),
|
||||||
options || {})
|
options || {})
|
||||||
|
|
||||||
|
// sections to make...
|
||||||
|
var sections = options.section == '*' ?
|
||||||
|
(options.sections || ['header', 'items', 'footer'])
|
||||||
|
: (options.section || 'items')
|
||||||
|
sections = (sections instanceof Array ?
|
||||||
|
sections
|
||||||
|
: [sections])
|
||||||
|
// keep only sections we know how to make...
|
||||||
|
.filter(function(name){
|
||||||
|
return that[`__${name}__`] instanceof Function })
|
||||||
|
|
||||||
// item constructor...
|
// item constructor...
|
||||||
//
|
//
|
||||||
@ -1203,9 +1231,10 @@ var BaseBrowserPrototype = {
|
|||||||
// while the latter stores a list of items.
|
// while the latter stores a list of items.
|
||||||
// ...would be more logical to store the object (i.e. browser/list)
|
// ...would be more logical to store the object (i.e. browser/list)
|
||||||
// directly as the element...
|
// directly as the element...
|
||||||
|
var section
|
||||||
var make_called = false
|
var make_called = false
|
||||||
var list = []
|
|
||||||
var ids = new Set()
|
var ids = new Set()
|
||||||
|
var list = []
|
||||||
var keys = options.uniqueKeys ?
|
var keys = options.uniqueKeys ?
|
||||||
new Set()
|
new Set()
|
||||||
: null
|
: null
|
||||||
@ -1278,8 +1307,8 @@ var BaseBrowserPrototype = {
|
|||||||
|
|
||||||
// user extended make...
|
// user extended make...
|
||||||
// XXX differentiate this for header and list...
|
// XXX differentiate this for header and list...
|
||||||
//this.__make__
|
this.__make__
|
||||||
// && this.__make__(item)
|
&& this.__make__(section, item)
|
||||||
|
|
||||||
// store the item...
|
// store the item...
|
||||||
list.push(item)
|
list.push(item)
|
||||||
@ -1290,22 +1319,17 @@ var BaseBrowserPrototype = {
|
|||||||
make.__proto__ = Items
|
make.__proto__ = Items
|
||||||
make.dialog = this
|
make.dialog = this
|
||||||
|
|
||||||
// build the lists...
|
// build the sections...
|
||||||
//* XXX
|
sections
|
||||||
;[...(this.__header__ ?
|
.forEach(function(name){
|
||||||
[['__header__', 'header']]
|
|
||||||
: []),
|
|
||||||
['__list__', 'items']]
|
|
||||||
.forEach(function([method, name]){
|
|
||||||
// setup closure for make(..)...
|
// setup closure for make(..)...
|
||||||
|
section = name
|
||||||
make_called = false
|
make_called = false
|
||||||
ids = new Set()
|
ids = new Set()
|
||||||
list = make.items = that[name] = []
|
list = make.items = that[name] = []
|
||||||
|
|
||||||
// build list...
|
// build list...
|
||||||
// XXX check that this is enough...
|
var res = that[`__${name}__`](make,
|
||||||
// ...do we index header items???
|
|
||||||
var res = that[method](make,
|
|
||||||
// XXX not sure about this -- revise options handling...
|
// XXX not sure about this -- revise options handling...
|
||||||
options ?
|
options ?
|
||||||
Object.assign(
|
Object.assign(
|
||||||
@ -1313,28 +1337,15 @@ var BaseBrowserPrototype = {
|
|||||||
options || {})
|
options || {})
|
||||||
: null)
|
: null)
|
||||||
|
|
||||||
// if make was not called use the .__list__(..) return value...
|
// if make was not called use the .__items__(..) return value...
|
||||||
that[name] = make_called ?
|
that[name] = make_called ?
|
||||||
that[name]
|
that[name]
|
||||||
: res })
|
: res })
|
||||||
|
|
||||||
/*/
|
|
||||||
// setup closure for make(..)...
|
|
||||||
list = make.items = this.items = []
|
|
||||||
// XXX not sure about this -- revise options handling...
|
|
||||||
var res = this.__list__(make,
|
|
||||||
options ?
|
|
||||||
Object.assign(
|
|
||||||
Object.create(this.options || {}),
|
|
||||||
options || {})
|
|
||||||
: null)
|
|
||||||
// if make was not called use the .__list__(..) return value...
|
|
||||||
this.items = make_called ?
|
|
||||||
this.items
|
|
||||||
: res
|
|
||||||
//*/
|
|
||||||
|
|
||||||
// reset the index/cache...
|
// reset the index/cache...
|
||||||
|
// XXX should this be only for .items???
|
||||||
|
// ...should this be global (all items?)
|
||||||
|
if(sections.includes('items')){
|
||||||
var old_index = this.__item_index_cache || {}
|
var old_index = this.__item_index_cache || {}
|
||||||
this.clearCache()
|
this.clearCache()
|
||||||
|
|
||||||
@ -1342,7 +1353,6 @@ var BaseBrowserPrototype = {
|
|||||||
// NOTE: we are doing this in a separate pass as items can get
|
// NOTE: we are doing this in a separate pass as items can get
|
||||||
// rearranged during the make phase (Items.nest(..) ...),
|
// rearranged during the make phase (Items.nest(..) ...),
|
||||||
// thus avoiding odd duplicate index numbering...
|
// thus avoiding odd duplicate index numbering...
|
||||||
// XXX should we also index header???
|
|
||||||
var index = this.__item_index_cache = this.index
|
var index = this.__item_index_cache = this.index
|
||||||
|
|
||||||
// post process the items...
|
// post process the items...
|
||||||
@ -1356,7 +1366,7 @@ var BaseBrowserPrototype = {
|
|||||||
// XXX this is not very elegant(???), revise...
|
// XXX this is not very elegant(???), revise...
|
||||||
&& Object.assign(e,
|
&& Object.assign(e,
|
||||||
old_index[id],
|
old_index[id],
|
||||||
e) })
|
e) }) }
|
||||||
|
|
||||||
return this
|
return this
|
||||||
},
|
},
|
||||||
@ -1539,7 +1549,16 @@ var BaseBrowserPrototype = {
|
|||||||
context.index = context.index || 0
|
context.index = context.index || 0
|
||||||
|
|
||||||
// options specifics...
|
// options specifics...
|
||||||
var source = options.source || 'items'
|
// NOTE: we include header/footer only for the root context...
|
||||||
|
var sections = context.root === this ?
|
||||||
|
'items'
|
||||||
|
: options.section == '*' ?
|
||||||
|
(options.sections || 'items')
|
||||||
|
: (options.section || 'items')
|
||||||
|
sections = sections instanceof Array ?
|
||||||
|
sections
|
||||||
|
: [sections]
|
||||||
|
|
||||||
var iterateNonIterable = options.iterateAll || options.iterateNonIterable
|
var iterateNonIterable = options.iterateAll || options.iterateNonIterable
|
||||||
var iterateCollapsed = options.iterateAll || options.iterateCollapsed
|
var iterateCollapsed = options.iterateAll || options.iterateCollapsed
|
||||||
var skipNested = !options.iterateAll && options.skipNested
|
var skipNested = !options.iterateAll && options.skipNested
|
||||||
@ -1710,11 +1729,14 @@ var BaseBrowserPrototype = {
|
|||||||
},
|
},
|
||||||
[],
|
[],
|
||||||
// input items...
|
// input items...
|
||||||
...(reverse ?
|
...(sections
|
||||||
this[source]
|
.map(function(name){
|
||||||
.slice()
|
return that[name] || [] })
|
||||||
.reverse()
|
.flat()
|
||||||
: this[source])) },
|
.run(function(){
|
||||||
|
return reverse ?
|
||||||
|
this.reverse()
|
||||||
|
: this }))) },
|
||||||
|
|
||||||
|
|
||||||
// Test/Example Text renders...
|
// Test/Example Text renders...
|
||||||
@ -3083,10 +3105,10 @@ var BaseBrowserPrototype = {
|
|||||||
// XXX should we update on init....
|
// XXX should we update on init....
|
||||||
__init__: function(func, options){
|
__init__: function(func, options){
|
||||||
var args = [...arguments]
|
var args = [...arguments]
|
||||||
this.__list__ = args.shift()
|
this.__items__ = args.shift()
|
||||||
if(args[0] instanceof Function){
|
if(args[0] instanceof Function){
|
||||||
this.__header__ = this.__list__
|
this.__header__ = this.__items__
|
||||||
this.__list__ = args.shift()
|
this.__items__ = args.shift()
|
||||||
}
|
}
|
||||||
this.options = Object.assign(
|
this.options = Object.assign(
|
||||||
Object.create(this.options || {}),
|
Object.create(this.options || {}),
|
||||||
@ -3555,18 +3577,6 @@ var HTMLBrowserPrototype = {
|
|||||||
this.__dom = value },
|
this.__dom = value },
|
||||||
|
|
||||||
|
|
||||||
// XXX header...
|
|
||||||
// XXX might be a good idea to make this expandable -- show/hide options...
|
|
||||||
__header__: function(make, options){
|
|
||||||
make('CURRENT_PATH', {
|
|
||||||
id: 'current_path',
|
|
||||||
cls: 'path',
|
|
||||||
buttons: (options || {}).headerButtons
|
|
||||||
|| (this.options || {}).headerButtons
|
|
||||||
|| [],
|
|
||||||
}) },
|
|
||||||
|
|
||||||
|
|
||||||
// Extending query...
|
// Extending query...
|
||||||
//
|
//
|
||||||
// Extended .search(..) to support:
|
// Extended .search(..) to support:
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user