From 50885302270ec8525b169ddd5b3930a0481e3c11 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Wed, 1 Jun 2016 21:39:32 +0300
Subject: [PATCH] cloud browse working...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui (gen4)/features/ui-widgets.js | 11 ++----
 ui (gen4)/lib/widget/browse.js   | 68 ++++++++++++++++++++------------
 2 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js
index b4c03a45..de14732b 100755
--- a/ui (gen4)/features/ui-widgets.js	
+++ b/ui (gen4)/features/ui-widgets.js	
@@ -1059,13 +1059,13 @@ var WidgetTestActions = actions.Actions({
 			})
 		})],
 
-	testTagCloud: ['Test/Demo cloud dialog...',
+	testBrowseCloud: ['Test/Demo cloud dialog...',
 		makeUIDialog(function(){
 			var actions = this
 
 			console.log('>>> args:', [].slice.call(arguments))
 
-			var res = browse.makeLister(null, function(path, make){
+			return browse.makeLister(null, function(path, make){
 				var that = this
 
 				var words = 'Lorem ipsum dolor sit amet, audiam sensibus '
@@ -1094,17 +1094,14 @@ var WidgetTestActions = actions.Actions({
 				// 		on sync, but for async dialogs this will align
 				// 		the selected field correctly.
 				make.done()
+			}, {
+				cloudView: true
 			})
 			// NOTE: this is not a dialog event, it is defined by the 
 			// 		container to notify us that we are closing...
 			.on('close', function(){
 				console.log('Dialog closing...')
 			})
-
-			res.dom
-				.addClass('cloud-view')
-
-			return res
 		})],
 
 	// XXX make this a toggler....
diff --git a/ui (gen4)/lib/widget/browse.js b/ui (gen4)/lib/widget/browse.js
index ed57a887..650f34eb 100755
--- a/ui (gen4)/lib/widget/browse.js	
+++ b/ui (gen4)/lib/widget/browse.js	
@@ -66,6 +66,17 @@ function makeBrowserMaker(constructor){
 }
 
 
+function makeSimpleAction(direction){
+	return function(elem){
+		if(elem != null){
+			this.select(elem)
+		}
+		this.navigate(direction)
+		return this
+	}
+}
+
+
 
 /*********************************************************************/
 
@@ -124,7 +135,7 @@ var BrowserClassPrototype = {
 	// Construct the dom...
 	make: function(obj, options){
 		var browser = $('<div>')
-			.addClass('browse-widget')
+			.addClass('browse-widget '+ ((options.cloudView || false) ? 'cloud-view' : ''))
 			// make thie widget focusable...
 			// NOTE: tabindex 0 means automatic tab indexing and -1 means 
 			//		focusable bot not tabable...
@@ -281,6 +292,9 @@ var BrowserPrototype = {
 		// This is mainly used for flat list selectors.
 		flat: false,
 
+		// If set this will switch the browse dialog into cloud mode.
+		cloudView: false,
+
 		// List of events that will not get propagated outside the browser...
 		//
 		// NOTE: these are local events defined on the widget, so it 
@@ -440,11 +454,11 @@ var BrowserPrototype = {
 			Up: 'up!',
 			Down: 'down!',
 			Left: {
-				default: 'pop!',
+				default: 'left!',
 				ctrl: 'update!: "/"',
 			},
 			Backspace: 'Left',
-			Right: 'push',
+			Right: 'right',
 			P: 'push',
 
 			// XXX
@@ -529,6 +543,18 @@ var BrowserPrototype = {
 		this.options.flat = value
 	},
 
+	get cloud(){
+		return this.dom.hasClass('cloud-view') || this.options.cloudView
+	},
+	set cloud(value){
+		if(value){
+			this.dom.addClass('cloud-view')
+		} else {
+			this.dom.removeClass('cloud-view')
+		}
+		this.options.cloudView = value
+	},
+
 	// XXX should these set both the options and dom???
 	get traversable(){
 		return !this.dom.hasClass('not-traversable') && this.options.traversable
@@ -1722,36 +1748,28 @@ var BrowserPrototype = {
 			// fall back to select...
 			: this.select(action, filtering)
 	},
+	
+	// shorthand actions...
+	next: makeSimpleAction('next'),
+	prev: makeSimpleAction('prev'),
 
-	// Select next/prev element...
-	next: function(elem){
+	up: makeSimpleAction('up'),
+	down: makeSimpleAction('down'),
+	left: function(elem){
 		if(elem != null){
 			this.select(elem)
 		}
-		this.navigate('next')
-		return this
+		return this.cloud ?
+			this.navigate('prev')
+			: this.pop()
 	},
-	prev: function(elem){
+	right: function(elem){
 		if(elem != null){
 			this.select(elem)
 		}
-		this.navigate('prev')
-		return this
-	},
-
-	up: function(elem){
-		if(elem != null){
-			this.select(elem)
-		}
-		this.navigate('up')
-		return this
-	},
-	down: function(elem){
-		if(elem != null){
-			this.select(elem)
-		}
-		this.navigate('down')
-		return this
+		return this.cloud ?
+			this.navigate('next')
+			: this.push()
 	},