some work on cropping, fixed several bugs in Data.updateData(..) and friends...

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

ui (gen4)/data.js

@@ -422,7 +422,7 @@ module.DataPrototype = {
 		// normalize the list to a sparse list of gids...
 		list = list == null ? 
 				this.ribbons[this.getRibbon(target)]
-			: list.constructor.name == 'Array' ? 
+			: list.constructor === Array ? 
 				this.makeSparseImages(list)
 			: this.ribbons[this.getRibbon(list)]
 
@@ -1348,13 +1348,43 @@ module.DataPrototype = {
 	//
 	// XXX flatten as an option...
 	// XXX should this link to .root and .parent data???
-	crop: function(list){
+	crop: function(list, flatten){
 		var crop = this.clone()
 		list = crop.makeSparseImages(list)
-		for(var k in crop.ribbons){
+
-			crop.ribbons[k] = crop.makeSparseImages(crop.ribbons[k].filter(function(_, i){
+		if(!flatten){
-				return list[i] != null
+			// place images in ribbons...
-			}))
+			for(var k in crop.ribbons){
+				crop.ribbons[k] = crop.makeSparseImages(crop.ribbons[k].filter(function(_, i){
+					return list[i] != null
+				}))
+			}
+
+		// flatten the crop...
+		} else {
+			crop.ribbons = {}
+			crop.ribbon_order = []
+			crop.ribbons[crop.newRibbon()] = list
+		}
+
+		// clear empty ribbons...
+		Object.keys(crop.ribbons)
+			.forEach(function(k){ 
+				if(crop.ribbons[k].length == 0){
+					crop.ribbon_order.splice(crop.ribbon_order.indexOf(k), 1)
+					delete crop.ribbons[k]
+				} 
+			})
+
+		// set the current image in the crop...
+		var r = this.getRibbon()
+		// if current ribbon is not empty get the closest image in it...
+		if(r in crop.ribbons && crop.ribbons[r].length > 0){
+			crop.focusImage(this.current, 'after', this.getRibbon())
+
+		// if ribbon got deleted, get the closest loaded image...
+		} else {
+			crop.focusImage(this.current, list)
 		}
 
 		// XXX ???

ui (gen4)/ribbons.js

@@ -203,7 +203,6 @@ module.RibbonsPrototype = {
 				getComputedStyle(v).transition
 		}
 	},
-
 	noTransitions: function(func){
 		this.preventTransitions()
 		func.apply(this, args2array(arguments).slice(1))
@@ -966,14 +965,18 @@ module.RibbonsPrototype = {
 		}))
 	},
 
-	// update a set of images in a ribbon...
+	// Update a set of images in a ribbon...
 	//
 	// This will reuse the images that already exist, thus if updating or
 	// adding images to an already loaded set this should be very fast.
 	//
 	// NOTE: gids and ribbon must be .getImage(..) and .getRibbon(..) 
 	// 		compatible...
+	//
+	// XXX at this point this expects gids to be a list of gids, need 
+	// 		to make this compatible with jQuery collections...
 	updateRibbon: function(gids, ribbon){
+		var that = this
 		// get/create the ribbon...
 		var r = this.getRibbon(ribbon)
 		if(r.length == 0){
@@ -982,24 +985,30 @@ module.RibbonsPrototype = {
 		}
 
 		var loaded = r.find('.image')
+		
+		// remove all images that we do not need...
+		loaded = loaded
+			.filter(function(i, img){ 
+				// XXX .indexOf(..) will not work for a jQuery collection...
+				if(gids.indexOf(that.getElemGID($(img))) >= 0){
+					return true
+				}
+				$(img).remove()
+				return false
+			})
 
-		var that = this
 		$(gids).each(function(i, gid){
 			// support for sparse ribbons...
 			if(gid == null){
 				return 
 			}
 			// get/create image...
+			// XXX this may affect other ribbons...
 			var img = that.getImage(gid)
 			img = img.length == 0 ? that.createImage(gid) : img
 
-			// clear a chunk of images that are not in gids until one that is...
+			// see of we are loaded in the right position...
 			var g = loaded.length > i ? that.getElemGID(loaded.eq(i)) : null
-			while(g != null && gids.indexOf(g) < 0){
-				that.clear(g)
-				loaded.splice(i, 1)
-				g = loaded.length > i ? that.getElemGID(loaded.eq(i)) : null
-			}
 
 			// check if we need to reattach the image...
 			if(gid != g){
@@ -1111,14 +1120,9 @@ module.RibbonsPrototype = {
 			// clear the ribbons that did not get updated...
 			if(!settings.keep_ribbons 
 					&& (data.ribbon_order != null || data.ribbons != null)){
-				var ribbons = []
+				var ribbons = data.ribbon_order != null ? data.ribbon_order.slice() 
-				ribbons = data.ribbon_order != null 
+					: data.ribbons != null ? Object.keys(data.ribbons)
-					? ribbons.concat(Object.keys(data.ribbon_order)) 
+					: []
-					: ribbons
-				ribbons = data.ribbons != null 
-					? ribbons.concat(Object.keys(data.ribbons)) 
-					: ribbons
-				ribbons.push(data.base)
 
 				that.viewer.find('.ribbon').each(function(){
 					var r = $(this)

ui (gen4)/ui.js

@@ -49,11 +49,14 @@ module.GLOBAL_KEYBOARD = {
 		pattern: '*',
 
 		F4: {
+			alt: 'close',
+			/*
 			alt: doc('Close viewer', 
 				function(){ 
 					window.close() 
 					return false
 				}),
+			*/
 		},
 		F5: doc('Full reload viewer', 
 			function(){ 
@@ -66,25 +69,13 @@ module.GLOBAL_KEYBOARD = {
 				location.reload()
 				return false
 			}),
-		F12: doc('Show devTools', 
+		F12: 'showDevTools',
-			function(){ 
-				if(window.showDevTools != null){
-					showDevTools() 
-					return false
-
-				// if no showDevTools defined pass the button further...
-				} else {
-					return true
-				}
-			}),
 		// NOTE: these are for systems where F** keys are not available 
 		// 		or do other stuff...
 		R: {
-			'ctrl+alt': 'reload!',
+			default: 'reverseImages!',
+			ctrl: 'reload!',
 			'ctrl+shift': 'F5',
-
-			// XXX testing...
-			ctrl: 'reverseImages!',
 		},
 		P: {
 			'ctrl+shift': 'F12',

ui (gen4)/viewer.js

@@ -350,33 +350,46 @@ actions.Actions({
 
 	// crop...
 	//
-	// XXX
 	crop: [ 
-		function(list){ 
+		function(list, flatten){ 
+			list = list || this.data.order
 			if(this.crop_stack == null){
 				this.crop_stack = []
 			}
-
 			this.crop_stack.push(this.data)
-			this.data = this.data.crop(list)
+			this.data = this.data.crop(list, flatten)
-
-			this.focusImage()
 		}],
-	// XXX add level...
+	uncrop: ['Uncrop ribbons',
-	uncrop: ['',
+		function(level, restore_current){
-		function(){
+			level = level || 1
+
+			var cur = this.current
+
 			if(this.crop_stack == null){
 				return
 			}
 
-			this.data = this.crop_stack.pop()
+			// uncrop all...
+			if(level == 'all'){
+				this.data = this.crop_stack[0]
+				this.crop_stack = []
 
-			if(this.crop_stack.length == 0){
+			// get the element at level and drop the tail...
-				delete this.crop_stac
+			} else {
+				this.data = this.crop_stack.splice(-level, this.crop_stack.length)[0]
 			}
 
-			this.focusImage()
+			// by default set the current from the crop...
+			if(!restore_current){
+				this.data.focusImage(cur)
+			}
+
+			if(this.crop_stack.length == 0){
+				delete this.crop_stack
+			}
 		}],
+	uncropAll: ['',
+		function(restore_current){ this.uncrop('all', restore_current) }],
 	// XXX same as uncrop but will also try and merge changes...
 	mergeCrop: ['',
 		function(){
@@ -427,22 +440,27 @@ actions.Actions(Client, {
 		}],
 
 
+	// XXX move this to a viewer window action set
 	close: ['Cloase viewer',
 		function(){
 			// XXX should we do anything else here like auto-save???
 			window.close() 
 		}],
+	// XXX where should toggleFullscreenMode(..) be defined...
 	toggleFullScreen: ['',
 		function(){
-			// XXX
+			toggleFullscreenMode() 
 		}],
 	toggleSingleImage: ['',
 		function(){
 			// XXX
 		}],
+	// XXX revise this...
 	showDevTools: ['',
 		function(){
-			// XXX
+			if(window.showDevTools != null){
+				showDevTools() 
+			}
 		}],
 
 
@@ -641,6 +659,30 @@ actions.Actions(Client, {
 
 	crop: [ reloadAfter() ],
 	uncrop: [ reloadAfter() ],
+
+	// XXX need flat version of these...
+	cropRibbon: ['Crop current ribbon',
+		function(ribbon, flatten){
+			ribbon = ribbon || 'current'
+			this.crop(this.data.getImages(ribbon), flatten)
+		}],
+	cropRibbonAndAbove: ['',
+		function(ribbon, flatten){
+			ribbon = ribbon || this.data.getRibbon()
+
+			var data = this.data
+			var that = this
+
+			var i = data.ribbon_order.indexOf(ribbon)
+			var ribbons = data.ribbon_order.slice(0, i)
+			var images = ribbons
+				.reduce(function(a, b){ 
+						return data.getImages(a).concat(data.getImages(b)) 
+					}, data.getImages(ribbon))
+				.compact()
+
+			this.crop(data.getImages(images), flatten)
+		}],
 })
 
 
@@ -678,6 +720,7 @@ module.Animation = {
 }
 
 
+// XXX
 var CurrentIndicator = 
 module.CurrentIndicator = {
 	tag: 'ui-current-indicator',