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

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui (gen4)/lib/widget/browse2.js

@@ -81,42 +81,105 @@ var collectItems = function(make, items){
 
 //---------------------------------------------------------------------
 // Item constructors...
+
+var Items =
+object.mixinFlat(function(){}, {
+	dialog: null,
+	called: false,
+
+
+	// Props...
 	//
-// XXX general design:
+	// NOTE: writing to .items will reset .called to false...
-// 		- each of these can take either a value or a function (constructor)
+	__items: undefined,
-//		- the function has access to Items.* and context
+	get items(){
-//		- the constructor can be called from two contexts:
+		return this.__items },
-//			- external
+	set items(value){
-//				called from the module or as a function...
+		this.called = false
-//				calls the passed constructor (passing context)
+		this.__items = value },
-//				builds the container
+
-//			- nested
+	
-//				called from constructor function...
+	buttons: {
-//				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...
 		//
+		// 	Draw checked checkboz is <attr> is true...
+		// 	Checkbox('attr')
 		//
-
+		// 	Draw checked checkboz is <attr> is false...
-// XXX
+		// 	Checkbox('!attr')
-// XXX can't use Object.assign(..) here as it will not copy props...
+		//
-var Items = module.items = function(){}
+		// XXX rename -- distinguish from actual button...
+		Checkbox: function(item, attr){
+			return (attr[0] == '!' 
+						&& !item[attr.slice(1)]) 
+					|| item[attr] ? 
+				'&#9744;' 
+				: '&#9745;' },
+		// XXX can we make these not use the same icon...
+		ToggleDisabled: [
+			'Checkbox: "disabled"',
+			'toggleDisabled: item',
+			true,
+			{
+				alt: 'Disable/enable item',
+				cls: 'toggle-disabled',
+			}],
+		ToggleHidden: [
+			'Checkbox: "hidden"',
+			'toggleHidden: item',
+			{
+				alt: 'Show/hide item',
+				cls: 'toggle-hidden',
+			}],
+		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...
+		ToggleCollapse: [
+			function(item){
+				return !item.children ?
+						// placeholder...
+						'&nbsp;'
+					: item.collapsed ?
+						'+'
+					: '-' },
+			'toggleCollapse: item',
+			// disable button for all items that do not have children...
+			function(item){ 
+				return 'children' in item },
+			{
+				alt: 'Collapse/expand item',
+				cls: function(item){ 
+					return 'children' in item ? 
+						'toggle-collapse' 
+						: ['toggle-collapse', 'blank'] },
+			}],
+		// XXX delete button -- requires .markDelete(..) action...
+		Delete: [
+			'&times;',
+			'markDelete: item',
+			{
+				alt: 'Mark item for deletion',
+				cls: 'toggle-delete',
+				//keys: ['Delete', 'd'],
+			}],
+	},
 
 
-// placeholders...
+	// Getters...
-Items.dialog = null
-Items.items = null
-
 
 	// Last item created...
 	// XXX not sure about this...
 	// XXX should this be a prop???
-Items.last = function(){
+	last: function(){
-	return (this.items || [])[this.items.length - 1] }
+		return (this.items || [])[this.items.length - 1] },
 
 
+	// Constructors/modifiers...
+
 	// Group a set of items...
 	//
 	//	.group(make(..), ..)
@@ -134,16 +197,14 @@ Items.last = function(){
 	// NOTE: see notes to collectItems(..) for more info...
 	//
 	// XXX do we need to pass options to groups???
-Items.group = function(...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
+		return this },
-}
-
 
 	// Place list in a sub-list of item...
 	//
@@ -160,7 +221,7 @@ Items.group = function(...items){
 	// 		...
 	// 	])
 	// 	
-Items.nest = function(item, list, options){
+	nest: function(item, list, options){
 		options = options || {}
 		//options = Object.assign(Object.create(this.options || {}), options || {})
 		options = Object.assign({},
@@ -170,99 +231,23 @@ Items.nest = function(item, list, options){
 			options)
 		return item === this ?
 			((this.last().children = options.children), this)
-		: this(item, options)
+			: 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] == '!' 
-				&& !item[attr.slice(1)]) 
-			|| item[attr] ? 
-		'&#9744;' 
-		: '&#9745;' } 
-
-
-// XXX can we make these not use the same icon...
-buttons.ToggleDisabled = [
-	'Checkbox: "disabled"',
-	'toggleDisabled: item',
-	true,
-	{
-		alt: 'Disable/enable item',
-		cls: 'toggle-disabled',
-	}]
-buttons.ToggleHidden = [
-	'Checkbox: "hidden"',
-	'toggleHidden: item',
-	{
-		alt: 'Show/hide item',
-		cls: 'toggle-hidden',
-	}]
-buttons.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 = [
-	function(item){
-		return !item.children ?
-				// placeholder...
-				'&nbsp;'
-			: item.collapsed ?
-				'+'
-			: '-' },
-	'toggleCollapse: item',
-	// disable button for all items that do not have children...
-	function(item){ 
-		return 'children' in item },
-	{
-		alt: 'Collapse/expand item',
-		cls: function(item){ 
-			return 'children' in item ? 
-				'toggle-collapse' 
-				: ['toggle-collapse', 'blank'] },
-	}]
-
-// XXX delete button -- requires .markDelete(..) action...
-buttons.Delete = [
-	'&times;',
-	'markDelete: item',
-	{
-		alt: 'Mark item for deletion',
-		cls: 'toggle-delete',
-		//keys: ['Delete', 'd'],
-	}]
-
-
-
-// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
 	// Wrappers...
 
 	// this is here for uniformity...
-Items.Item = function(value, options){ return this(...arguments) }
+	Item: function(value, options){ 
+		return this(...arguments) },
 
-Items.Empty = function(value){}
+	Empty: function(value){},
 
-Items.Separator = function(){ return this('---') }
+	Separator: function(){ 
-Items.Spinner = function(){ return this('...') }
+		return this('---') },
+	Spinner: function(){ 
+		return this('...') },
 
-Items.Heading = function(value, options){
+	Heading: function(value, options){
 		var cls = 'heading'
 		options = options || {}
 		options.cls = options.cls instanceof Array ? 
@@ -272,20 +257,19 @@ Items.Heading = function(value, options){
 			: [cls]
 		options.buttons = options.buttons 
 			|| 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...
-Items.List = function(values){}
+	List: function(values){},
-Items.EditableList = function(values){}
+	EditableList: function(values){},
-Items.EditablePinnedList = function(values){}
+	EditablePinnedList: function(values){},
 
 	// Special list components...
-//Items.ListPath = function(){}
+	//Items.ListPath = function(){},
-//Items.ListTitle = function(){}
+	//Items.ListTitle = function(){},
-
 
 	// XXX EXPERIMENTAL...
 	//
@@ -295,7 +279,7 @@ Items.EditablePinnedList = function(values){}
 	//
 	// 	}
 	//
-Items.Confirm = function(message, accept, reject, options){
+	Confirm: function(message, accept, reject, options){
 		return this(message, 
 			Object.assign({
 				// XXX should the user be able to merge buttons from options???
@@ -311,11 +295,9 @@ 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
@@ -330,15 +312,15 @@ Items.Confirm = function(message, accept, reject, options){
 
 	// Make item generator...
 	//
-Items.makeDisplayItem = function(text, options){
+	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){
+	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){
+	DisplayFocusedPath: function(make, options){
 		options = make instanceof Function ?
 			options
 			: make
@@ -379,7 +361,7 @@ Items.DisplayFocusedPath = function(make, options){
 					e.value = this.pathArray
 					this.renderItem(e) },
 				tag) 
-	return make}
+		return make },
 
 	// Item info...
 	//
@@ -391,7 +373,7 @@ Items.DisplayFocusedPath = function(make, options){
 	//
 	// XXX use focused elements and not just item...
 	// XXX add on mouse over...
-Items.DisplayItemInfo = function(make, options){
+	DisplayItemInfo: function(make, options){
 		options = make instanceof Function ?
 			options
 			: make
@@ -422,7 +404,26 @@ Items.DisplayItemInfo = function(make, options){
 						|| '&nbsp;'
 					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){
+		var make = new Make(this, 
-			make_called = true
+			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__
+				dialog.__make__
-				&& this.__make__(section, item)
+					&& 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(..)...
+				// setup state/closure for make(..)...
-				section = name
-				make_called = false
 				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 })