started work on cloud browse...

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

ui (gen4)/Makefile

@@ -34,6 +34,7 @@ CSS_FILES := $(patsubst %.less,%.css,$(wildcard css/*.less))
 LIB_DIR=lib
 EXT_LIB_DIR=ext-lib
 CSS_DIR=css
+DOMAIN_DIR=imagegrid
 FEATURES_DIR=features
 WORKERS_DIR=workers
 NW_PROJECT_FILE=package.json
@@ -112,7 +113,7 @@ $(APP_ZIP): $(CSS_FILES) $(BUILD_DIR) $(NODE_DIR) $(NW_PROJECT_FILE) \
 	$(JS_FILES) $(CSS_FILES) $(HTML_FILES)
 	zip -r $(APP_ZIP) $(NW_PROJECT_FILE) $(JS_FILES) $(CSS_FILES) \
 		$(HTML_FILES) $(LIB_DIR) $(EXT_LIB_DIR) $(FEATURES_DIR) \
-		$(WORKERS_DIR) $(CSS_DIR) \
+		$(DOMAIN_DIR) $(WORKERS_DIR) $(CSS_DIR) \
 		$(NODE_DIR)/app-module-path
 
 zip: $(APP_ZIP)

ui (gen4)/css/widget/browse.css

@@ -303,6 +303,23 @@
 
 
 
+/****************************************************** Cloud List ***/
+
+.browse-widget.cloud-view .list>div {
+	display: inline-block;
+	border-radius: 10px;
+}
+
+.browse-widget.cloud-view .list>hr.separator {
+	display: block;
+}
+
+.browse-widget.cloud-view .list>div .text:first-child:before {
+	content: "";
+}
+
+
+
 /******************************************************** Theaming ***/
 
 /* Light */

ui (gen4)/features/ui-widgets.js

@@ -1059,6 +1059,53 @@ var WidgetTestActions = actions.Actions({
 			})
 		})],
 
+	testTagCloud: ['Test/Demo cloud dialog...',
+		makeUIDialog(function(){
+			var actions = this
+
+			console.log('>>> args:', [].slice.call(arguments))
+
+			var res = browse.makeLister(null, function(path, make){
+				var that = this
+
+				var words = 'Lorem ipsum dolor sit amet, audiam sensibus '
+					+'an mea. Accusam blandit ius in, te magna dolorum '
+					+'moderatius pro, sit id dicant imperdiet definiebas. '
+					+'Ad duo quod mediocrem, movet laudem discere te mel, '
+					+'sea ipsum habemus gloriatur at. Sonet prodesset '
+					+'democritum in vis, brute vitae recusabo pri ad, '
+					+'--- '
+					+'latine civibus efficiantur at his. At duo lorem '
+					+'legimus, errem constituam contentiones sed ne, '
+					+'cu has corpora definitionem.'
+
+				words
+					.split(/\s/g)
+					.unique()
+					.forEach(function(c){ 
+						make(c) 
+					})
+
+				// NOTE: the dialog's .parent is not yet set at this point...
+
+				// This will finalize the dialog...
+				//
+				// NOTE: this is not needed here as the dialog is drawn
+				// 		on sync, but for async dialogs this will align
+				// 		the selected field correctly.
+				make.done()
+			})
+			// 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....
 	partitionByMonth: ['Test/',

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

@@ -437,8 +437,8 @@ var BrowserPrototype = {
 		General: {
 			pattern: '.browse-widget',
 
-			Up: 'prev!',
+			Up: 'up!',
-			Down: 'next!',
+			Down: 'down!',
 			Left: {
 				default: 'pop!',
 				ctrl: 'update!: "/"',
@@ -1671,7 +1671,52 @@ var BrowserPrototype = {
 			} else {
 				return this.select(to, filtering)
 			}
+
+		} else if(action == 'down' || action == 'up'){
+			var from = this.select('!', filtering)
+
+			// special case: nothing selected -> select first/last...
+			if(from.length == 0){
+				return this.navigate(action == 'down' ? 'first' : 'last')
 			}
+
+			var t = from.offset()
+			var l = t.left
+			t = t.top
+
+			// next lines...
+			var to = from[(action == 'down' ? 'next' : 'prev') +'All'](pattern)
+				.filter(function(_, e){ return $(e).offset().top != t })
+
+			// special case: nothing below -> select wrap | last/first...
+			if(to.length == 0){
+				// select first/last...
+				//return this.navigate(action == 'down' ? 'last' : 'first')
+
+				// wrap around....
+				to = this.filter('*').filter(pattern)
+
+				// when going up start from the bottom...
+				if(action == 'up'){
+					to = $(to.toArray().reverse())
+				} 
+			}
+			
+			t = to.eq(0).offset().top
+			to = to
+				// next line only...
+				.filter(function(_, e){ return $(e).offset().top == t })
+				// sort by distance...
+				// XXX this does not account for element width...
+				.sort(function(a, b){
+					return Math.abs(l - $(a).offset().left) 
+						- Math.abs(l - $(b).offset().left)
+				})
+				.first()
+
+			return this.select(to, filtering)
+		}
+
 		return action == 'first' ? this.select(0, filtering)
 			: action == 'last' ? this.select(-1, filtering)
 			// fall back to select...
@@ -1694,6 +1739,22 @@ var BrowserPrototype = {
 		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
+	},
+
+
 	getTopVisibleElem: function(){
 		var elems = this.filter('*')
 

ui (gen4)/package.json

@@ -17,10 +17,10 @@
   "dependencies": {
     "app-module-path": "^1.0.6",
     "commander": "^2.9.0",
-    "exiftool": "0.0.3",
+    "exiftool": "^0.0.3",
     "flickrapi": "^0.3.28",
     "fs-extra": "*",
-    "fs-walk": "0.0.1",
+    "fs-walk": "^0.0.1",
     "glob": "^4.0.6",
     "guarantee-events": "^1.0.0",
     "openseadragon": "^2.1.0",