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 = $('
')
- .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()
},