mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-28 18:00:09 +00:00
refactored .make(..) and Items (Make(..))
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
4fac28a8a9
commit
b7121808cb
@ -81,145 +81,64 @@ var collectItems = function(make, items){
|
||||
|
||||
//---------------------------------------------------------------------
|
||||
// Item constructors...
|
||||
//
|
||||
// XXX general design:
|
||||
// - each of these can take either a value or a function (constructor)
|
||||
// - the function has access to Items.* and context
|
||||
// - the constructor can be called from two contexts:
|
||||
// - external
|
||||
// called from the module or as a function...
|
||||
// calls the passed constructor (passing context)
|
||||
// builds the container
|
||||
// - nested
|
||||
// called from constructor function...
|
||||
// calls constructor (if applicable)
|
||||
// builds item(s)
|
||||
// XXX need a way to pass container constructors (a-la ui-widgets dialog containers)
|
||||
// - passing through the context (this) makes this more flexible...
|
||||
// - passing via args fixes the signature which is a good thing...
|
||||
//
|
||||
//
|
||||
|
||||
// XXX
|
||||
// XXX can't use Object.assign(..) here as it will not copy props...
|
||||
var Items = module.items = function(){}
|
||||
var Items =
|
||||
object.mixinFlat(function(){}, {
|
||||
dialog: null,
|
||||
called: false,
|
||||
|
||||
|
||||
// placeholders...
|
||||
Items.dialog = null
|
||||
Items.items = null
|
||||
// Props...
|
||||
//
|
||||
// NOTE: writing to .items will reset .called to false...
|
||||
__items: undefined,
|
||||
get items(){
|
||||
return this.__items },
|
||||
set items(value){
|
||||
this.called = false
|
||||
this.__items = value },
|
||||
|
||||
|
||||
// Last item created...
|
||||
// XXX not sure about this...
|
||||
// XXX should this be a prop???
|
||||
Items.last = function(){
|
||||
return (this.items || [])[this.items.length - 1] }
|
||||
|
||||
|
||||
// Group a set of items...
|
||||
//
|
||||
// .group(make(..), ..)
|
||||
// .group([make(..), ..])
|
||||
// -> make
|
||||
//
|
||||
//
|
||||
// Example:
|
||||
// make.group(
|
||||
// make('made item'),
|
||||
// 'literal item',
|
||||
// ...)
|
||||
//
|
||||
//
|
||||
// NOTE: see notes to collectItems(..) for more info...
|
||||
//
|
||||
// XXX do we need to pass options to groups???
|
||||
Items.group = function(...items){
|
||||
var that = this
|
||||
items = items.length == 1 && items[0] instanceof Array ?
|
||||
items[0]
|
||||
: items
|
||||
// replace the items with the group...
|
||||
this.items.splice(this.items.length, 0, collectItems(this, items))
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
// Place list in a sub-list of item...
|
||||
//
|
||||
// Examples:
|
||||
// make.nest('literal header', [
|
||||
// 'literal item',
|
||||
// make('item'),
|
||||
// ...
|
||||
// ])
|
||||
//
|
||||
// make.nest(make('header'), [
|
||||
// 'literal item',
|
||||
// make('item'),
|
||||
// ...
|
||||
// ])
|
||||
//
|
||||
Items.nest = function(item, list, options){
|
||||
options = options || {}
|
||||
//options = Object.assign(Object.create(this.options || {}), options || {})
|
||||
options = Object.assign({},
|
||||
{ children: list instanceof Array ?
|
||||
collectItems(this, list)
|
||||
: list },
|
||||
options)
|
||||
return item === this ?
|
||||
((this.last().children = options.children), this)
|
||||
: this(item, options)
|
||||
}
|
||||
|
||||
|
||||
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
// Buttons...
|
||||
var buttons = Items.buttons = {}
|
||||
|
||||
//
|
||||
// Draw checked checkboz is <attr> is true...
|
||||
// Checkbox('attr')
|
||||
//
|
||||
// Draw checked checkboz is <attr> is false...
|
||||
// Checkbox('!attr')
|
||||
//
|
||||
// XXX rename -- distinguish from actual button...
|
||||
buttons.Checkbox = function(item, attr){
|
||||
buttons: {
|
||||
//
|
||||
// Draw checked checkboz is <attr> is true...
|
||||
// Checkbox('attr')
|
||||
//
|
||||
// Draw checked checkboz is <attr> is false...
|
||||
// Checkbox('!attr')
|
||||
//
|
||||
// XXX rename -- distinguish from actual button...
|
||||
Checkbox: function(item, attr){
|
||||
return (attr[0] == '!'
|
||||
&& !item[attr.slice(1)])
|
||||
|| item[attr] ?
|
||||
'☐'
|
||||
: '☑' }
|
||||
|
||||
|
||||
// XXX can we make these not use the same icon...
|
||||
buttons.ToggleDisabled = [
|
||||
: '☑' },
|
||||
// XXX can we make these not use the same icon...
|
||||
ToggleDisabled: [
|
||||
'Checkbox: "disabled"',
|
||||
'toggleDisabled: item',
|
||||
true,
|
||||
{
|
||||
alt: 'Disable/enable item',
|
||||
cls: 'toggle-disabled',
|
||||
}]
|
||||
buttons.ToggleHidden = [
|
||||
}],
|
||||
ToggleHidden: [
|
||||
'Checkbox: "hidden"',
|
||||
'toggleHidden: item',
|
||||
{
|
||||
alt: 'Show/hide item',
|
||||
cls: 'toggle-hidden',
|
||||
}]
|
||||
buttons.ToggleSelected = [
|
||||
}],
|
||||
ToggleSelected: [
|
||||
'Checkbox: "selected"',
|
||||
'toggleSelect: item',
|
||||
{
|
||||
alt: 'Select/deselect item',
|
||||
cls: 'toggle-select',
|
||||
}]
|
||||
// NOTE: this button is disabled for all items but the ones with .children...
|
||||
buttons.ToggleCollapse = [
|
||||
}],
|
||||
// NOTE: this button is disabled for all items but the ones with .children...
|
||||
ToggleCollapse: [
|
||||
function(item){
|
||||
return !item.children ?
|
||||
// placeholder...
|
||||
@ -237,32 +156,98 @@ buttons.ToggleCollapse = [
|
||||
return 'children' in item ?
|
||||
'toggle-collapse'
|
||||
: ['toggle-collapse', 'blank'] },
|
||||
}]
|
||||
|
||||
// XXX delete button -- requires .markDelete(..) action...
|
||||
buttons.Delete = [
|
||||
}],
|
||||
// XXX delete button -- requires .markDelete(..) action...
|
||||
Delete: [
|
||||
'×',
|
||||
'markDelete: item',
|
||||
{
|
||||
alt: 'Mark item for deletion',
|
||||
cls: 'toggle-delete',
|
||||
//keys: ['Delete', 'd'],
|
||||
}]
|
||||
}],
|
||||
},
|
||||
|
||||
|
||||
// Getters...
|
||||
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
// Wrappers...
|
||||
// Last item created...
|
||||
// XXX not sure about this...
|
||||
// XXX should this be a prop???
|
||||
last: function(){
|
||||
return (this.items || [])[this.items.length - 1] },
|
||||
|
||||
// this is here for uniformity...
|
||||
Items.Item = function(value, options){ return this(...arguments) }
|
||||
|
||||
Items.Empty = function(value){}
|
||||
// Constructors/modifiers...
|
||||
|
||||
Items.Separator = function(){ return this('---') }
|
||||
Items.Spinner = function(){ return this('...') }
|
||||
// Group a set of items...
|
||||
//
|
||||
// .group(make(..), ..)
|
||||
// .group([make(..), ..])
|
||||
// -> make
|
||||
//
|
||||
//
|
||||
// Example:
|
||||
// make.group(
|
||||
// make('made item'),
|
||||
// 'literal item',
|
||||
// ...)
|
||||
//
|
||||
//
|
||||
// NOTE: see notes to collectItems(..) for more info...
|
||||
//
|
||||
// XXX do we need to pass options to groups???
|
||||
group: function(...items){
|
||||
var that = this
|
||||
items = items.length == 1 && items[0] instanceof Array ?
|
||||
items[0]
|
||||
: items
|
||||
// replace the items with the group...
|
||||
this.items.splice(this.items.length, 0, collectItems(this, items))
|
||||
return this },
|
||||
|
||||
Items.Heading = function(value, options){
|
||||
// Place list in a sub-list of item...
|
||||
//
|
||||
// Examples:
|
||||
// make.nest('literal header', [
|
||||
// 'literal item',
|
||||
// make('item'),
|
||||
// ...
|
||||
// ])
|
||||
//
|
||||
// make.nest(make('header'), [
|
||||
// 'literal item',
|
||||
// make('item'),
|
||||
// ...
|
||||
// ])
|
||||
//
|
||||
nest: function(item, list, options){
|
||||
options = options || {}
|
||||
//options = Object.assign(Object.create(this.options || {}), options || {})
|
||||
options = Object.assign({},
|
||||
{ children: list instanceof Array ?
|
||||
collectItems(this, list)
|
||||
: list },
|
||||
options)
|
||||
return item === this ?
|
||||
((this.last().children = options.children), this)
|
||||
: this(item, options) },
|
||||
|
||||
|
||||
// Wrappers...
|
||||
|
||||
// this is here for uniformity...
|
||||
Item: function(value, options){
|
||||
return this(...arguments) },
|
||||
|
||||
Empty: function(value){},
|
||||
|
||||
Separator: function(){
|
||||
return this('---') },
|
||||
Spinner: function(){
|
||||
return this('...') },
|
||||
|
||||
Heading: function(value, options){
|
||||
var cls = 'heading'
|
||||
options = options || {}
|
||||
options.cls = options.cls instanceof Array ?
|
||||
@ -272,30 +257,29 @@ Items.Heading = function(value, options){
|
||||
: [cls]
|
||||
options.buttons = options.buttons
|
||||
|| this.dialog.options.headingButtons
|
||||
return this(value, options) }
|
||||
Items.Action = function(value, options){}
|
||||
Items.ConfirmAction = function(value){}
|
||||
Items.Editable = function(value){}
|
||||
return this(value, options) },
|
||||
Action: function(value, options){},
|
||||
ConfirmAction: function(value){},
|
||||
Editable: function(value){},
|
||||
|
||||
// lists...
|
||||
Items.List = function(values){}
|
||||
Items.EditableList = function(values){}
|
||||
Items.EditablePinnedList = function(values){}
|
||||
// lists...
|
||||
List: function(values){},
|
||||
EditableList: function(values){},
|
||||
EditablePinnedList: function(values){},
|
||||
|
||||
// Special list components...
|
||||
//Items.ListPath = function(){}
|
||||
//Items.ListTitle = function(){}
|
||||
// Special list components...
|
||||
//Items.ListPath = function(){},
|
||||
//Items.ListTitle = function(){},
|
||||
|
||||
|
||||
// XXX EXPERIMENTAL...
|
||||
//
|
||||
// options:
|
||||
// {
|
||||
// showOKButton: <bool>,
|
||||
//
|
||||
// }
|
||||
//
|
||||
Items.Confirm = function(message, accept, reject, options){
|
||||
// XXX EXPERIMENTAL...
|
||||
//
|
||||
// options:
|
||||
// {
|
||||
// showOKButton: <bool>,
|
||||
//
|
||||
// }
|
||||
//
|
||||
Confirm: function(message, accept, reject, options){
|
||||
return this(message,
|
||||
Object.assign({
|
||||
// XXX should the user be able to merge buttons from options???
|
||||
@ -311,34 +295,32 @@ Items.Confirm = function(message, accept, reject, options){
|
||||
accept ?
|
||||
{open: accept}
|
||||
: {},
|
||||
options || {})) }
|
||||
options || {})) },
|
||||
|
||||
|
||||
// Generators...
|
||||
//
|
||||
// A generator is a function that creates 1 or more elements and sets up
|
||||
// the appropriate interactions...
|
||||
//
|
||||
// NOTE: these can work both as item generators called from inside
|
||||
// .make(..), i.e. as methods of the make constructor, or as
|
||||
// generators assigned to .__header__ / .__items__ / .__footer__
|
||||
// attributes...
|
||||
// NOTE: when re-using these options.id needs to be set so as not to
|
||||
// overwrite existing instances data and handlers...
|
||||
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
// Generators...
|
||||
//
|
||||
// A generator is a function that creates 1 or more elements and sets up
|
||||
// the appropriate interactions...
|
||||
//
|
||||
// NOTE: these can work both as item generators called from inside
|
||||
// .make(..), i.e. as methods of the make constructor, or as
|
||||
// generators assigned to .__header__ / .__items__ / .__footer__
|
||||
// attributes...
|
||||
// NOTE: when re-using these options.id needs to be set so as not to
|
||||
// overwrite existing instances data and handlers...
|
||||
|
||||
// Make item generator...
|
||||
//
|
||||
Items.makeDisplayItem = function(text, options){
|
||||
// Make item generator...
|
||||
//
|
||||
makeDisplayItem: function(text, options){
|
||||
var args = [...arguments]
|
||||
return function(make, options){
|
||||
make(...args) } }
|
||||
make(...args) } },
|
||||
|
||||
// Make confirm item generator...
|
||||
//
|
||||
// XXX move this to Item.Confirm(..) and reuse that...
|
||||
Items.makeDisplayConfirm = function(message, accept, reject){
|
||||
// Make confirm item generator...
|
||||
//
|
||||
// XXX move this to Item.Confirm(..) and reuse that...
|
||||
makeDisplayConfirm: function(message, accept, reject){
|
||||
return this.makeDisplayItem(message, {
|
||||
buttons: [
|
||||
...[reject instanceof Function ?
|
||||
@ -346,13 +328,13 @@ Items.makeDisplayConfirm = function(message, accept, reject){
|
||||
: []],
|
||||
...[accept instanceof Function ?
|
||||
['OK', accept]
|
||||
: []], ], }) }
|
||||
: []], ], }) },
|
||||
|
||||
// Focused item path...
|
||||
//
|
||||
// XXX add search/filter field...
|
||||
// XXX add path navigation...
|
||||
Items.DisplayFocusedPath = function(make, options){
|
||||
// Focused item path...
|
||||
//
|
||||
// XXX add search/filter field...
|
||||
// XXX add path navigation...
|
||||
DisplayFocusedPath: function(make, options){
|
||||
options = make instanceof Function ?
|
||||
options
|
||||
: make
|
||||
@ -379,19 +361,19 @@ Items.DisplayFocusedPath = function(make, options){
|
||||
e.value = this.pathArray
|
||||
this.renderItem(e) },
|
||||
tag)
|
||||
return make}
|
||||
return make },
|
||||
|
||||
// Item info...
|
||||
//
|
||||
// Show item .info or .alt text.
|
||||
//
|
||||
// This will show info for items that are:
|
||||
// - focused
|
||||
// - hovered (not yet implemented)
|
||||
//
|
||||
// XXX use focused elements and not just item...
|
||||
// XXX add on mouse over...
|
||||
Items.DisplayItemInfo = function(make, options){
|
||||
// Item info...
|
||||
//
|
||||
// Show item .info or .alt text.
|
||||
//
|
||||
// This will show info for items that are:
|
||||
// - focused
|
||||
// - hovered (not yet implemented)
|
||||
//
|
||||
// XXX use focused elements and not just item...
|
||||
// XXX add on mouse over...
|
||||
DisplayItemInfo: function(make, options){
|
||||
options = make instanceof Function ?
|
||||
options
|
||||
: make
|
||||
@ -422,7 +404,26 @@ Items.DisplayItemInfo = function(make, options){
|
||||
|| ' '
|
||||
this.renderItem(e) },
|
||||
tag)
|
||||
return make }
|
||||
return make },
|
||||
|
||||
|
||||
// Constructors...
|
||||
//
|
||||
__new__: function(_, dialog, constructor){
|
||||
var that = function(){
|
||||
that.called = true
|
||||
constructor.call(that, ...arguments)
|
||||
return that }
|
||||
return that },
|
||||
__init__: function(dialog){
|
||||
this.items = []
|
||||
this.dialog = dialog },
|
||||
})
|
||||
|
||||
|
||||
var Make =
|
||||
module.Make =
|
||||
object.makeConstructor('Make', Items)
|
||||
|
||||
|
||||
|
||||
@ -1644,7 +1645,7 @@ var BaseBrowserPrototype = {
|
||||
// XXX revise options handling for .__items__(..)
|
||||
// XXX might be a good idea to enable the user to merge the state
|
||||
// manually...
|
||||
// one way to do:
|
||||
// one way to go:
|
||||
// - get the previous item via an index,
|
||||
// - update it
|
||||
// - pass it to make(..)
|
||||
@ -1703,14 +1704,13 @@ var BaseBrowserPrototype = {
|
||||
// ...would be more logical to store the object (i.e. browser/list)
|
||||
// directly as the element...
|
||||
var section
|
||||
var make_called = false
|
||||
var ids = new Set()
|
||||
var list = []
|
||||
var keys = options.uniqueKeys ?
|
||||
new Set()
|
||||
: null
|
||||
var make = function(value, opts){
|
||||
make_called = true
|
||||
var make = new Make(this,
|
||||
function(value, opts){
|
||||
var dialog = this.dialog
|
||||
|
||||
// special-case: inlined browser...
|
||||
//
|
||||
@ -1720,7 +1720,7 @@ var BaseBrowserPrototype = {
|
||||
// first branch...
|
||||
if(value instanceof BaseBrowser){
|
||||
var item = value
|
||||
item.parent = this
|
||||
item.parent = dialog
|
||||
item.section = section
|
||||
|
||||
// normal item...
|
||||
@ -1743,7 +1743,7 @@ var BaseBrowserPrototype = {
|
||||
{value: value})
|
||||
|
||||
// item id...
|
||||
var key = this.__key__(opts)
|
||||
var key = dialog.__key__(opts)
|
||||
|
||||
// duplicate keys (if .options.uniqueKeys is set)...
|
||||
if(keys){
|
||||
@ -1764,45 +1764,40 @@ var BaseBrowserPrototype = {
|
||||
// the input opts here, yes, having a ref to a mutable
|
||||
// object may be convenient in some cases but in this
|
||||
// case it would promote going around the main API...
|
||||
var item = new this.__item__(
|
||||
var item = new dialog.__item__(
|
||||
// default item template...
|
||||
(options.itemTemplate || {})['*'] || {},
|
||||
// item template...
|
||||
(options.itemTemplate || {})[opts.value] || {},
|
||||
opts,
|
||||
{
|
||||
parent: this,
|
||||
parent: dialog,
|
||||
section,
|
||||
})
|
||||
|
||||
// XXX do we need both this and the above ref???
|
||||
item.children instanceof BaseBrowser
|
||||
&& (item.children.parent = this)
|
||||
&& (item.children.parent = dialog)
|
||||
}
|
||||
|
||||
// user extended make...
|
||||
// XXX differentiate this for header and list...
|
||||
this.__make__
|
||||
&& this.__make__(section, item)
|
||||
dialog.__make__
|
||||
&& dialog.__make__(section, item)
|
||||
|
||||
// store the item...
|
||||
list.push(item)
|
||||
this.items.push(item)
|
||||
ids.add(key)
|
||||
|
||||
return make
|
||||
}.bind(this)
|
||||
make.__proto__ = Items
|
||||
make.dialog = this
|
||||
})
|
||||
|
||||
// build the sections...
|
||||
var reset_index = false
|
||||
sections
|
||||
.forEach(function([name, handler]){
|
||||
// setup closure for make(..)...
|
||||
section = name
|
||||
make_called = false
|
||||
// setup state/closure for make(..)...
|
||||
ids = new Set()
|
||||
list = make.items = that[name] = []
|
||||
section = name
|
||||
make.items = that[name] = []
|
||||
|
||||
// prepare for index reset...
|
||||
reset_index = reset_index || name == 'items'
|
||||
@ -1818,7 +1813,7 @@ var BaseBrowserPrototype = {
|
||||
: null)
|
||||
|
||||
// if make was not called use the .__items__(..) return value...
|
||||
that[name] = make_called ?
|
||||
that[name] = make.called ?
|
||||
that[name]
|
||||
: res })
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user