reworked ui logic of image collections list...

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

ui (gen4)/features/collections.js

@@ -9,6 +9,7 @@
 
 var data = require('imagegrid/data')
 
+var toggler = require('lib/toggler')
 var actions = require('lib/actions')
 var features = require('lib/features')
 
@@ -86,7 +87,7 @@ var CollectionActions = actions.Actions({
 					(new this.data.constructor())
 					: this.data
 						.clone()
-						.removeUnloadedGids()
+						.removeUnloadedGIDs()
 						.run(function(){
 							this.collection = collection
 						}),
@@ -99,6 +100,7 @@ var CollectionActions = actions.Actions({
 		core.doc`Get list of collections containing item`,
 		function(gid){
 			var that = this
+			gid = this.data.getImage(gid)
 			return Object.keys(this.collections || {})
 				.filter(function(c){
 					return !gid 
@@ -120,7 +122,7 @@ var CollectionActions = actions.Actions({
 					return gid in that.data.ribbons ? 
 						// when adding a ribbon gid expand to images...
 						that.data.ribbons[gid].compact()
-						: [gid] })
+						: [that.data.getImage(gid)] })
 				.reduce(function(a, b){ return a.concat(b) }, [])
 
 			collection = collection || this.collection
@@ -168,14 +170,42 @@ var CollectionActions = actions.Actions({
 				: this.saveCollection(collection)
 		}],
 
-	/*/ XXX do we actually need this???
+	// XXX do we actually need this???
 	// 		...a way to delete stuff from collections is to crop out 
 	// 		and overwrite...
-	uncollect: ['- Collections/',
+	// XXX should this reload???
+	uncollect: ['Collections|Image/$Uncollect image',
+		{browseMode: function(){ return !this.collection && 'disabled' }},
 		function(gids, collection){
-			// XXX
+			var that = this
+
+			gids = gids == 'loaded' ? this.data.getImages('loaded')
+				: gids instanceof Array ? gids 
+				: [gids]
+			gids = gids
+				.map(function(gid){ 
+					return gid in that.data.ribbons ? 
+						// when adding a ribbon gid expand to images...
+						that.data.ribbons[gid].compact()
+						: [that.data.getImage(gid)] })
+				.reduce(function(a, b){ return a.concat(b) }, [])
+
+			collection = collection || this.collection
+
+			if(collection == null){
+				return
+			}
+
+			if(this.collection == collection){
+				this.data
+					.removeGIDs(gids)
+					.removeEmptyRibbons()
+			}
+
+			this.collections[collection].data
+				.removeGIDs(gids)
+				.removeEmptyRibbons()
 		}],
-	//*/
 
 	removeCollection: ['- Collections/',
 		function(collection){
@@ -316,15 +346,16 @@ var UICollectionActions = actions.Actions({
 					}) 
 				})
 		})],
-	// XXX add kb handler???
+	browseImageCollections: ['Image/$Collections...',
-	// XXX this is very similar to .browseCollections(..), is this a problem???
-	browseImageCollections: ['Image/Collections...',
 		{dialogTitle: 'Image Collections...'},
 		widgets.makeUIDialog(function(gid){
 			var that = this
 			gid = this.data.getImage(gid)
 
-			var to_remove = []
+			var all
+			var collections
+
+			var to_remove
 
 			return browse.makeLister(null, 
 				function(path, make){
@@ -335,14 +366,19 @@ var UICollectionActions = actions.Actions({
 									.addClass('highlighted')
 						})
 
-					var all = Object.keys(that.collections || {})
+					all = Object.keys(that.collections || {})
-					var collections = that.inCollections(gid || null)
+
+					collections = collections 
+						|| that.inCollections(gid || null)
 
 					// build the disabled list...
-					all.forEach(function(title){
+					if(!to_remove){
-						collections.indexOf(title) < 0
+						to_remove = []
-							&& to_remove.push(title)
+						all.forEach(function(title){
-					})
+							collections.indexOf(title) < 0
+								&& to_remove.push(title)
+						})
+					}
 
 					all.length > 0 ?
 						make.EditableList(all, 
@@ -350,15 +386,23 @@ var UICollectionActions = actions.Actions({
 								new_item: false,
 								to_remove: to_remove,
 								itemopen: function(title){
-									that.loadCollection(title)
+									var i = to_remove.indexOf(title)
-									gid
+
-										&& that.focusImage(gid)
+									i >= 0 ? 
-									dialog.close()
+										to_remove.splice(i, 1) 
+										: to_remove.push(title)
+
+									dialog.update()
 								},
 							})
 						: make.Empty()
 				})
 				.close(function(){
+					all.forEach(function(title){
+						collections.indexOf(title) < 0
+							&& to_remove.indexOf(title) < 0
+							&& that.collect(gid, title)
+					})
 					to_remove.forEach(function(title){ 
 						that.uncollect(gid, title)
 					}) 
@@ -402,7 +446,13 @@ module.UICollection = core.ImageGridFeatures.Feature({
 
 	actions: UICollectionActions, 
 
-	handlers: [],
+	handlers: [
+		['uncollect',
+			function(_, gids, collection){
+				(collection == null || this.collection == collection)
+					&& this.reload(true)
+			}],
+	],
 })
 
 

ui (gen4)/imagegrid/data.js

@@ -2550,6 +2550,21 @@ var DataPrototype = {
 		return this
 	},
 
+	// Remove empty ribbons...
+	//
+	removeEmptyRibbons: function(){
+		var that = this
+		this.ribbon_order = this.ribbon_order
+			.filter(function(r){ 
+				if(that.ribbons[r].len == 0){
+					delete that.ribbons[r]
+					return false
+				} 
+				return true
+			})
+		return this
+	},
+
 	// Remove duplicate gids...
 	//
 	// If a gid is in more than one ribbon, this will keep the top 
@@ -2577,30 +2592,55 @@ var DataPrototype = {
 		})
 		return this
 	},
-	// Remove empty ribbons...
-	removeEmptyRibbons: function(){
-		var that = this
-		this.ribbon_order = this.ribbon_order
-			.filter(function(r){ 
-				if(that.ribbons[r].len == 0){
-					delete that.ribbons[r]
-					return false
-				} 
-				return true
-			})
-		return this
-	},
 
 	// Remove unloaded gids...
 	//
 	// This removes:
 	// 	- images from .data that are not in any ribbon
-	removeUnloadedGids: function(){
+	//
+	// NOTE: this may result in empty ribbons...
+	removeUnloadedGIDs: function(){
 		this.order = this.getImages('loaded')
 		this.updateImagePositions()
 		return this
 	},
 
+	// Remove GIDs...
+	//
+	// NOTE: this may result in empty ribbons...
+	removeGIDs: function(gids, direction){
+		var that = this
+		gids = gids || []
+		gids = (gids instanceof Array ? gids : [gids])
+			.map(function(gid){ return that.getImage(gid) })
+
+		if(gids.length == 0){
+			return
+		}
+
+		var order = this.order.filter(function(g){ return gids.indexOf(g) < 0 })
+
+		// handle current image...
+		if(gids.indexOf(this.current) >= 0){
+			var r = this.getImages('current')
+				.filter(function(g){ return order.indexOf(g) >= 0 })
+
+			// attempt to first get next/prev within the current ribbon...
+			r = r.length > 0 ? r : order
+
+			var cur = this.getImage(this.current, direction || 'before', r)
+				|| this.getImage(this.current, direction == 'after' ? 'before' : 'after', r)
+
+			this.current = cur
+		}
+
+		this.order = order
+		this
+			.updateImagePositions()
+
+		return this
+	},
+
 
 
 	/****************************************** JSON serialization ***/