some experimintatiosn and tweaks...

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

ui (gen4)/data.js

@@ -742,6 +742,8 @@ var DataPrototype = {
 	// 		via. .getImage(..) and then get the list with this...
 	// 			D.getImages(D.getImage(gid, ribbon_gid), N, 'around')
 	//
+	// XXX add group support -- get the loaded, either a group gid or 
+	// 		one of the contained images (first?)
 	// XXX for some reason negative target number (ribbon number) 
 	// 		breaks this...
 	getImages: function(target, count, mode){
@@ -873,6 +875,9 @@ var DataPrototype = {
 	//
 	// NOTE: this expects ribbon order and not image order.
 	// NOTE: negative ribbon order is relative to list tail.
+	//
+	// XXX add group support -- get the loaded, either a group gid or 
+	// 		one of the contained images (first?)
 	getRibbon: function(target, offset){
 		target = target == null ? this.current : target
 
@@ -1686,19 +1691,25 @@ var DataPrototype = {
 		return this
 	},
 
-	cropGroup: function(group){
+	// XXX if the group is collapsed there will be problems with uncropping...
-		group = this.getGroup(group)
+	cropGroup: function(target){
+		var target = this.getImage(target)
+		var group = this.getGroup(target)
 		
 		if(group == null){
 			return
 		}
 
-		// XXX is this the correct way to do this???
+		if(target == group){
-		this.expandGroup(group)
+			var res = this.crop(this.groups[group])
 
-		var res = this.crop(this.groups[group])
+		} else {
-
+			var r = this.getRibbon(target)
-		this.collapseGroup(group)
+			var res = this.crop(this.groups[group])
+			res.ribbon_order = [r]
+			res.ribbons[r] = this.groups[group].slice()
+			res.focusImage(this.current, 'before', r)
+		}
 		
 		return res
 	},

ui (gen4)/ribbons.js

@@ -136,22 +136,35 @@ var RibbonsPrototype = {
 	// Helpers...
 
 	// XXX need a better way of doing this...
-	preventTransitions: function(target){
+	preventTransitions: function(target, prevent_nested){
 		target = target || this.viewer
+		prevent_nested = prevent_nested || false
 		if(target.length == 0){
 			return this
 		}
-		target.addClass('no-transitions')
 		var t = target[0]
+
+		// handle nesting...
+		if(prevent_nested){
+			var l = t.getAttribute('__prevent_transitions')
+			if(l != null){
+				t.getAttribute('__prevent_transitions', l+1)
+				return this
+			}
+			t.getAttribute('__prevent_transitions', 0)
+		}
+
+		target.addClass('no-transitions')
 		getComputedStyle(t).webkitTransition
 		getComputedStyle(t).mozTransition
 		getComputedStyle(t).msTransition
 		getComputedStyle(t).oTransition
 		getComputedStyle(t).transition
 
+
 		return this
 	},
-	restoreTransitions: function(target, now){
+	restoreTransitions: function(target, now, force){
 		if(target === true || target === false){
 			now = target
 			target = this.viewer
@@ -161,10 +174,19 @@ var RibbonsPrototype = {
 		if(target.length == 0){
 			return this
 		}
+		var t = target[0]
+
+		// handle nesting...
+		var l = t.getAttribute('__prevent_transitions')
+		if(l != null && !force && l != '0'){
+			t.getAttribute('__prevent_transitions', l-1)
+			return this
+		}
+		t.removeAttribute('__prevent_transitions')
+
 		// sync...
 		if(now){
 			target.removeClass('no-transitions')
-			var t = target[0]
 			var s = getComputedStyle(t)
 			s.webkitTransition
 			s.mozTransition
@@ -177,7 +199,6 @@ var RibbonsPrototype = {
 			var that = this
 			setTimeout(function(){
 				target.removeClass('no-transitions')}, 0)
-				var t = target[0]
 				var s = getComputedStyle(t)
 				s.webkitTransition
 				s.mozTransition
@@ -194,6 +215,12 @@ var RibbonsPrototype = {
 		this.restoreTransitions(true)
 		return this
 	},
+	noTransitionsDeep: function(func){
+		this.preventTransitions(null, true)
+		func.apply(this, args2array(arguments).slice(1))
+		this.restoreTransitions(true)
+		return this
+	},
 
 
 	// Get visible image tile size...

ui (gen4)/viewer.js

@@ -495,7 +495,13 @@ actions.Actions({
 				this.crop_stack = []
 			}
 			this.crop_stack.push(this.data)
-			this.data = this.data.crop(list, flatten)
+
+			if(list instanceof data.Data){
+				this.data = list 
+
+			} else {
+				this.data = this.data.crop(list, flatten)
+			}
 		}],
 	uncrop: ['Uncrop ribbons',
 		function(level, restore_current, keep_crop_order){
@@ -581,6 +587,53 @@ actions.Actions({
 			var selector = mode == 'any' ? 'getTaggedByAny' : 'getTaggedByAll'
 			this.crop(this.data[selector](tags), flatten)
 		}],
+
+
+	// grouping...
+	group: ['Group images', 
+		function(gids, group){ this.data.group(gids, group) }],
+	ungroup: ['Ungroup images', 
+		function(gids, group){ this.data.ungroup(gids, group) }],
+
+	// direction can be:
+	// 	'next'
+	// 	'prev'
+	groupTo: ['', 
+		function(target, direction){
+			target = this.data.getImage(target)
+			var other = this.data.getImage(target, direction == 'next' ? 1 : -1)
+
+			// we are start/end of ribbon...
+			if(other == null){
+				return
+			}
+			
+			// add into an existing group...
+			if(this.data.isGroup(other)){
+				this.group(target, other)
+
+			// new group...
+			} else {
+				this.group([target, other])
+			}
+		}],
+	// shorthands to .groupTo(..)
+	groupBack: ['Group target image with the image/group before it', 
+		function(target){ this.groupTo(target, 'prev') }],
+	groupForward: ['Group target image with the image/group after it', 
+		function(target){ this.groupTo(target, 'next') }],
+
+	// NOTE: this will only group loaded images...
+	groupMarked: ['Group loaded marked images', 
+		function(){ this.group(this.data.getImages(this.data.getTaggedByAny('marked'))) }],
+
+	expandGroup: ['', 
+		function(target){ this.data.expandGroup(target || this.current) }],
+	collapseGroup: ['', 
+		function(target){ this.data.collapseGroup(target || this.current) }],
+
+	cropGroup: ['', 
+		function(target){ this.crop(this.data.cropGroup(target || this.current)) }],
 })
 
 
@@ -993,6 +1046,16 @@ actions.Actions(Client, {
 	crop: [ reloadAfter() ],
 	uncrop: [ reloadAfter() ],
 
+	// XXX need to force reload for actions that remove/add small numbers
+	// 		if images...
+	group: [ reloadAfter() ],
+	ungroup: [ reloadAfter() ],
+	groupTo: [ reloadAfter() ],
+	groupMarked: [ reloadAfter() ],
+	expandGroup: [ reloadAfter() ],
+	collapseGroup: [ reloadAfter() ],
+	cropGroup: [ reloadAfter() ],
+
 	// XXX experimental: not sure if this is the right way to go...
 	// XXX make this play nice with crops...
 	toggleRibbonList: ['Toggle ribbons as images view',
@@ -1162,6 +1225,7 @@ module.Features = Object.create(FeatureSet)
 //---------------------------------------------------------------------
 // NOTE: this is split out to an action so as to enable ui elements to 
 // 		adapt to ribbon size changes...
+// XXX try a strategy: load more in the direction of movement by an offset...
 var PartialRibbonsActions = actions.Actions({
 	updateRibbon: ['Update partial ribbon size', 
 		function(target, w, size, threshold){