flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 10:20:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactored .make(..) and Items (Make(..))

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2019-07-16 18:52:18 +03:00
parent 4fac28a8a9
commit b7121808cb
1 changed files with 401 additions and 406 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

419
ui (gen4)/lib/widget/browse2.js
View File

@ -81,145 +81,64 @@ var collectItems = function(make, items){
//--------------------------------------------------------------------- //---------------------------------------------------------------------
// Item constructors... // 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 var Items =
// XXX can't use Object.assign(..) here as it will not copy props... object.mixinFlat(function(){}, {
var Items = module.items = function(){} dialog: null,
called: false,
// placeholders... // Props...
Items.dialog = null //
Items.items = null // 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... buttons: {
// XXX not sure about this... //
// XXX should this be a prop??? // Draw checked checkboz is <attr> is true...
Items.last = function(){ // Checkbox('attr')
return (this.items || [])[this.items.length - 1] } //
// Draw checked checkboz is <attr> is false...
// Checkbox('!attr')
// Group a set of items... //
// // XXX rename -- distinguish from actual button...
// .group(make(..), ..) Checkbox: function(item, attr){
// .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){
return (attr[0] == '!' return (attr[0] == '!'
&& !item[attr.slice(1)]) && !item[attr.slice(1)])
|| item[attr] ? || item[attr] ?
'&#9744;' '&#9744;'
: '&#9745;' } : '&#9745;' },
// XXX can we make these not use the same icon...
ToggleDisabled: [
// XXX can we make these not use the same icon...
buttons.ToggleDisabled = [
'Checkbox: "disabled"', 'Checkbox: "disabled"',
'toggleDisabled: item', 'toggleDisabled: item',
true, true,
{ {
alt: 'Disable/enable item', alt: 'Disable/enable item',
cls: 'toggle-disabled', cls: 'toggle-disabled',
}] }],
buttons.ToggleHidden = [ ToggleHidden: [
'Checkbox: "hidden"', 'Checkbox: "hidden"',
'toggleHidden: item', 'toggleHidden: item',
{ {
alt: 'Show/hide item', alt: 'Show/hide item',
cls: 'toggle-hidden', cls: 'toggle-hidden',
}] }],
buttons.ToggleSelected = [ ToggleSelected: [
'Checkbox: "selected"', 'Checkbox: "selected"',
'toggleSelect: item', 'toggleSelect: item',
{ {
alt: 'Select/deselect item', alt: 'Select/deselect item',
cls: 'toggle-select', cls: 'toggle-select',
}] }],
// NOTE: this button is disabled for all items but the ones with .children... // NOTE: this button is disabled for all items but the ones with .children...
buttons.ToggleCollapse = [ ToggleCollapse: [
function(item){ function(item){
return !item.children ? return !item.children ?
// placeholder... // placeholder...
@ -237,32 +156,98 @@ buttons.ToggleCollapse = [
return 'children' in item ? return 'children' in item ?
'toggle-collapse' 'toggle-collapse'
: ['toggle-collapse', 'blank'] }, : ['toggle-collapse', 'blank'] },
}] }],
// XXX delete button -- requires .markDelete(..) action...
// XXX delete button -- requires .markDelete(..) action... Delete: [
buttons.Delete = [
'&times;', '&times;',
'markDelete: item', 'markDelete: item',
{ {
alt: 'Mark item for deletion', alt: 'Mark item for deletion',
cls: 'toggle-delete', cls: 'toggle-delete',
//keys: ['Delete', 'd'], //keys: ['Delete', 'd'],
}] }],
},
// Getters...
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // Last item created...
// Wrappers... // 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('---') } // Group a set of items...
Items.Spinner = function(){ return this('...') } //
// .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' var cls = 'heading'
options = options || {} options = options || {}
options.cls = options.cls instanceof Array ? options.cls = options.cls instanceof Array ?
@ -272,30 +257,29 @@ Items.Heading = function(value, options){
: [cls] : [cls]
options.buttons = options.buttons options.buttons = options.buttons
|| this.dialog.options.headingButtons || this.dialog.options.headingButtons
return this(value, options) } return this(value, options) },
Items.Action = function(value, options){} Action: function(value, options){},
Items.ConfirmAction = function(value){} ConfirmAction: function(value){},
Items.Editable = function(value){} Editable: function(value){},
// lists... // lists...
Items.List = function(values){} List: function(values){},
Items.EditableList = function(values){} EditableList: function(values){},
Items.EditablePinnedList = function(values){} EditablePinnedList: function(values){},
// Special list components... // Special list components...
//Items.ListPath = function(){} //Items.ListPath = function(){},
//Items.ListTitle = function(){} //Items.ListTitle = function(){},
// XXX EXPERIMENTAL...
// XXX EXPERIMENTAL... //
// // options:
// options: // {
// { // showOKButton: <bool>,
// showOKButton: <bool>, //
// // }
// } //
// Confirm: function(message, accept, reject, options){
Items.Confirm = function(message, accept, reject, options){
return this(message, return this(message,
Object.assign({ Object.assign({
// XXX should the user be able to merge buttons from options??? // XXX should the user be able to merge buttons from options???
@ -311,34 +295,32 @@ Items.Confirm = function(message, accept, reject, options){
accept ? accept ?
{open: 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...
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // Make item generator...
// Generators... //
// makeDisplayItem: function(text, options){
// 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){
var args = [...arguments] var args = [...arguments]
return function(make, options){ return function(make, options){
make(...args) } } make(...args) } },
// Make confirm item generator... // Make confirm item generator...
// //
// XXX move this to Item.Confirm(..) and reuse that... // XXX move this to Item.Confirm(..) and reuse that...
Items.makeDisplayConfirm = function(message, accept, reject){ makeDisplayConfirm: function(message, accept, reject){
return this.makeDisplayItem(message, { return this.makeDisplayItem(message, {
buttons: [ buttons: [
...[reject instanceof Function ? ...[reject instanceof Function ?
@ -346,13 +328,13 @@ Items.makeDisplayConfirm = function(message, accept, reject){
: []], : []],
...[accept instanceof Function ? ...[accept instanceof Function ?
['OK', accept] ['OK', accept]
: []], ], }) } : []], ], }) },
// Focused item path... // Focused item path...
// //
// XXX add search/filter field... // XXX add search/filter field...
// XXX add path navigation... // XXX add path navigation...
Items.DisplayFocusedPath = function(make, options){ DisplayFocusedPath: function(make, options){
options = make instanceof Function ? options = make instanceof Function ?
options options
: make : make
@ -379,19 +361,19 @@ Items.DisplayFocusedPath = function(make, options){
e.value = this.pathArray e.value = this.pathArray
this.renderItem(e) }, this.renderItem(e) },
tag) tag)
return make} return make },
// Item info... // Item info...
// //
// Show item .info or .alt text. // Show item .info or .alt text.
// //
// This will show info for items that are: // This will show info for items that are:
// - focused // - focused
// - hovered (not yet implemented) // - hovered (not yet implemented)
// //
// XXX use focused elements and not just item... // XXX use focused elements and not just item...
// XXX add on mouse over... // XXX add on mouse over...
Items.DisplayItemInfo = function(make, options){ DisplayItemInfo: function(make, options){
options = make instanceof Function ? options = make instanceof Function ?
options options
: make : make
@ -422,7 +404,26 @@ Items.DisplayItemInfo = function(make, options){
|| '&nbsp;' || '&nbsp;'
this.renderItem(e) }, this.renderItem(e) },
tag) 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 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 go:
// - get the previous item via an index, // - get the previous item via an index,
// - update it // - update it
// - pass it to make(..) // - pass it to make(..)
@ -1703,14 +1704,13 @@ var BaseBrowserPrototype = {
// ...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 section
var make_called = false
var ids = new Set() var ids = new Set()
var list = []
var keys = options.uniqueKeys ? var keys = options.uniqueKeys ?
new Set() new Set()
: null : null
var make = function(value, opts){ var make = new Make(this,
make_called = true function(value, opts){
var dialog = this.dialog
// special-case: inlined browser... // special-case: inlined browser...
// //
@ -1720,7 +1720,7 @@ var BaseBrowserPrototype = {
// first branch... // first branch...
if(value instanceof BaseBrowser){ if(value instanceof BaseBrowser){
var item = value var item = value
item.parent = this item.parent = dialog
item.section = section item.section = section
// normal item... // normal item...
@ -1743,7 +1743,7 @@ var BaseBrowserPrototype = {
{value: value}) {value: value})
// item id... // item id...
var key = this.__key__(opts) var key = dialog.__key__(opts)
// duplicate keys (if .options.uniqueKeys is set)... // duplicate keys (if .options.uniqueKeys is set)...
if(keys){ if(keys){
@ -1764,45 +1764,40 @@ var BaseBrowserPrototype = {
// the input opts here, yes, having a ref to a mutable // the input opts here, yes, having a ref to a mutable
// object may be convenient in some cases but in this // object may be convenient in some cases but in this
// case it would promote going around the main API... // case it would promote going around the main API...
var item = new this.__item__( var item = new dialog.__item__(
// default item template... // default item template...
(options.itemTemplate || {})['*'] || {}, (options.itemTemplate || {})['*'] || {},
// item template... // item template...
(options.itemTemplate || {})[opts.value] || {}, (options.itemTemplate || {})[opts.value] || {},
opts, opts,
{ {
parent: this, parent: dialog,
section, section,
}) })
// XXX do we need both this and the above ref??? // XXX do we need both this and the above ref???
item.children instanceof BaseBrowser item.children instanceof BaseBrowser
&& (item.children.parent = this) && (item.children.parent = dialog)
} }
// user extended make... // user extended make...
// XXX differentiate this for header and list... // XXX differentiate this for header and list...
this.__make__ dialog.__make__
&& this.__make__(section, item) && dialog.__make__(section, item)
// store the item... // store the item...
list.push(item) this.items.push(item)
ids.add(key) ids.add(key)
})
return make
}.bind(this)
make.__proto__ = Items
make.dialog = this
// build the sections... // build the sections...
var reset_index = false var reset_index = false
sections sections
.forEach(function([name, handler]){ .forEach(function([name, handler]){
// setup closure for make(..)... // setup state/closure for make(..)...
section = name
make_called = false
ids = new Set() ids = new Set()
list = make.items = that[name] = [] section = name
make.items = that[name] = []
// prepare for index reset... // prepare for index reset...
reset_index = reset_index || name == 'items' reset_index = reset_index || name == 'items'
@ -1818,7 +1813,7 @@ var BaseBrowserPrototype = {
: null) : null)
// if make was not called use the .__items__(..) 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 })