added crop via tags dialog + some refactoring and notes...

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

ui (gen4)/features/tags.js

@@ -86,6 +86,10 @@ var TagUIActions = actions.Actions({
 		// 		.tagOrpahns()
 		// 		 ...
 		// XXX should this be here or in .data???
+		// XXX add "auto-tags" -- tags that are automatically added 
+		// 		depending on specific rules, like:
+		// 			orientation:landscape / orientation:portrait / orientation:square (???)
+		// 		...these should not be settable by user...
 		// XXX do a whitepaper (RFC?) on this system when done...
 		'base-tags': [
 			'count',
@@ -103,6 +107,7 @@ var TagUIActions = actions.Actions({
 			'people/girl',
 			'people/boy',
 			'people/child',
+			// ...
 
 			'name',
 
@@ -110,6 +115,7 @@ var TagUIActions = actions.Actions({
 			'role/photographer',
 			'role/artist',
 			'role/painter',
+			// ...
 
 			'color',
 			'color/red',
@@ -120,6 +126,7 @@ var TagUIActions = actions.Actions({
 			'color/orange',
 			'color/yellow',
 			'color/gray',
+			// ...
 
 			// XXX should this be 'type' or something else???
 			'genre',
@@ -130,6 +137,7 @@ var TagUIActions = actions.Actions({
 			'genre/macro',
 			'genre/abstract',
 			'genre/sport',
+			// ...
 
 			'activity',
 			'activity/sport',
@@ -154,10 +162,49 @@ var TagUIActions = actions.Actions({
 			.concat(Object.keys((this.data || {}).tags || {}))
    			.unique() },
 
-	// XXX use global tag list... (???) 
+	// XXX add support for tag sets and paths...
-	// XXX make this reusable...
 	showTagCloud: ['Tag|Edit|Image/$Tags...',
-		core.doc`
+		core.doc`Show tags in cloud format...
+
+			Show tags for current image...
+			.showTagCloud([options])
+			.showTagCloud('current'[, options])
+				-> dialog
+
+			Show tags for specific images...
+			.showTagCloud(gid, ...[, options])
+			.showTagCloud([gid, ...][, options])
+				-> dialog
+
+
+			Show tags for current image with custom constructor...
+			.showTagCloud(func[, gid, ...][, options])
+			.showTagCloud(func[, [gid, ...]][, options])
+				-> dialog
+
+			Show tags for gids image with custom constructor...
+			.showTagCloud(func, gid, ... [, options])
+			.showTagCloud(func, [gid, ...] [, options])
+				-> dialog
+
+
+		The constructor func is called in the action context and has the
+		following format:
+			func(path, make, gids, opts)
+
+		This uses the same option format as browse.makeLister(..) with 
+		the following additions:
+			{
+				// callback to be called when a tag state is flipped...
+				itemOpen: <function(tag, state)>,
+
+				// if false do not show the 'New...' button...
+				noNewButton: <bool>,
+			}
+
+
+		NOTE: if 'marked' is passed as one of the gids it will get 
+			replaced with the list of marked gids...
 		`,
 		{dialogTitle: function(_, gids){ 
 			return (gids.length == 1 && gids[0] == 'marked') ?
@@ -167,6 +214,10 @@ var TagUIActions = actions.Actions({
 				: 'Tags' }},
 		widgets.makeUIDialog(function(...gids){
 			var that = this
+
+			var func = gids[0] instanceof Function ? gids.shift() : null
+			var opts = gids[gids.length-1] instanceof Object ? gids.pop() : {}
+
 			gids = gids.length == 0 ? ['current'] : gids
 			// handle 'marked' keyword...
 			gids = gids
@@ -208,17 +259,25 @@ var TagUIActions = actions.Actions({
 
 								e.css('opacity', on ? 0.3 : '')
 
-								on ?
+								// NOTE: we are reversing the state here 
+								// 		because 'on' contains the state 
+								// 		prior to modification...
+								opts.itemOpen ?
+									(on ?
+										opts.itemOpen.call(that, tag, false)
+										: opts.itemOpen.call(that, tag, true))
+									:(on ?
 										that.untag(tag, gids)
-									: that.tag(tag, gids)
+										: that.tag(tag, gids))
 							},
 							buttons: [
 								// remove tag button...
-								['&times;', removeTag.bind(that, tag) ],
+								//['&times;', removeTag.bind(that, tag) ],
 							],
 						})
 					})
 
+				if(!opts.noNewButton){
 					make.Separator()
 
 					make.Editable('$New...', {
@@ -240,20 +299,40 @@ var TagUIActions = actions.Actions({
 									make.dialog.select(tag) })
 						},
 					})
-			}, { 
+				}
+
+				func
+					&& func.call(that, path, make, gids, opts)
+			}, 
+			Object.assign({ 
 				cloudView: true, 
 				close: function(){ that.refresh() },
-			})
+			}, opts))
 		})],
-	showMakedTagCoud: ['Tag|Mark/$Tags of marked images...',
+	showMarkedTagCoud: ['Tag|Mark/$Tags of marked images...',
 		'showTagCloud: "marked"'],
+	// XXX should this show all the tags or just the used???
+	cropTaggedFromCloud: ['Tag|Crop/Crop tagged...',
+		widgets.uiDialog(function(){
+			var that = this
+			var tags = new Set()
 
-	// XXX crop/filter by tags...
+			return this.showTagCloud(function(path, make, gids, opts){
-	// XXX
+				make.Separator()
-	cropTaggedFromCloud: ['-Tag|Crop/Crop tagged...',
+				make.Action('$Crop', {
-		widgets.makeUIDialog(function(){
+					open: function(){
-			// XXX
+						that.cropTagged([...tags])
-		})],
+
+						make.dialog.close()
+					}
+				})
+			}, [], {
+				itemOpen: function(tag, state){
+					state ? 
+						tags.add(tag) 
+						: tags.delete(tag) },
+				'noNewButton': true,
+			}) })],
 
 
 	// Tag tree...