From 4b1c5d2e45213fc9d5f8715dab2074d261ae5dcd Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Wed, 26 Jun 2019 12:53:55 +0300
Subject: [PATCH] tweaking and refactoring...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui (gen4)/lib/widget/browse2.html | 61 ++++++++-----------------------
 ui (gen4)/lib/widget/browse2.js   | 47 +++++++++++++++++++++---
 2 files changed, 57 insertions(+), 51 deletions(-)

diff --git a/ui (gen4)/lib/widget/browse2.html b/ui (gen4)/lib/widget/browse2.html
index 8fe28bed..744f9a73 100755
--- a/ui (gen4)/lib/widget/browse2.html	
+++ b/ui (gen4)/lib/widget/browse2.html	
@@ -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]
 
diff --git a/ui (gen4)/lib/widget/browse2.js b/ui (gen4)/lib/widget/browse2.js
index 31bb5bc0..696743d0 100755
--- a/ui (gen4)/lib/widget/browse2.js	
+++ b/ui (gen4)/lib/widget/browse2.js	
@@ -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 }