new partial ribbons partially done and partially working...

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

ui (gen4)/features/meta.js

@@ -63,8 +63,8 @@ core.ImageGridFeatures.Feature('viewer-testing', [
 	'ui-animation',
 
 	'ui-single-image',
-	'ui-partial-ribbons',
-	//'ui-partial-ribbons-2',
+	//'ui-partial-ribbons',
+	'ui-partial-ribbons-2',
 
 	'marks',
 	'ui-range',

ui (gen4)/features/ui-partial-ribbons-2.js

@@ -33,11 +33,80 @@ var core = require('features/core')
 var PartialRibbonsActions = actions.Actions({
 	updateRibbon: ['- Interface/Update partial ribbon size', 
 		function(target, w, size, threshold){
+			target = target instanceof jQuery 
+				? this.ribbons.getElemGID(target)
+				// NOTE: data.getImage(..) can return null at start or end
+				// 		of ribbon, thus we need to account for this...
+				: (this.data.getImage(target)
+					|| this.data.getImage(target, 'after'))
+			w = w || this.screenwidth
+			// get config data and normalize...
+			size = (size 
+				|| this.config['ribbon-size-screens'] 
+				|| 5) * w
+			threshold = threshold == 0 ? threshold
+				: (threshold 
+					|| this.config['ribbon-resize-threshold'] 
+					|| 1) * w
+			var data = this.data
+			var ribbons = this.ribbons
+
+			// localize transition prevention... 
+			// NOTE: we can't get ribbon via target directly here as
+			// 		the target might not be loaded...
+			var r_gid = data.getRibbon(target)
+			if(r_gid == null){
+				return
+			}
+			// NOTE: for the initial load this may be empty...
+			var r = ribbons.getRibbon(r_gid)
+
+			// XXX test threshold...
 			// XXX
+
+			return function(){
+				r.length == 0 ?
+					// ribbon not loaded...
+					this.resizeRibbon(target, size)
+					// simply update...
+					: this.ribbons
+						.preventTransitions(r)
+						.updateRibbonInPlace(
+							this.data.getImages(target, size, 'total'), 
+							r_gid,
+							target)
+						.restoreTransitions(r, true)
+			}
 		}],
 	resizeRibbon: ['- Interface/Resize ribbon to n images',
 		function(target, size){
-			// XXX
+			size = size 
+				|| (this.config['ribbon-size-screens'] * this.screenwidth)
+				|| (5 * this.screenwidth)
+			var data = this.data
+			var ribbons = this.ribbons
+
+			// localize transition prevention... 
+			// NOTE: we can't get ribbon via target directly here as
+			// 		the target might not be loaded...
+			var r_gid = data.getRibbon(target)
+			if(r_gid == null){
+				return
+			}
+			// NOTE: for the initial load this may be empty...
+			var r = ribbons.getRibbon(r_gid)
+
+			// XXX do we need to for example ignore unloaded (r.length == 0)
+			// 		ribbons here, for example not load ribbons too far off 
+			// 		screen??
+			
+			ribbons
+				.preventTransitions(r)
+				.updateRibbon(
+					data.getImages(target, size, 'total'), 
+					r_gid,
+					target)
+				.restoreTransitions(r, true)
 		}],
 })
 
@@ -59,7 +128,12 @@ module.PartialRibbons = core.ImageGridFeatures.Feature({
 	handlers: [
 		['focusImage.pre centerImage.pre', 
 			function(target, list){
-				// XXX
+				// NOTE: we have to do this as we are called BEFORE the 
+				// 		actual focus change happens...
+				// XXX is there a better way to do this???
+				target = list != null ? target = this.data.getImage(target, list) : target
+
+				this.updateRibbon(target)
 			}],
 		['resizing.pre',
 			function(unit, size){

ui (gen4)/imagegrid/data.js

@@ -850,6 +850,13 @@ var DataPrototype = {
 	//	.getImages(gid|order|ribbon, count, 'before')
 	//		-> list 
 	//
+	//	Get count images around target padding with available images:
+	//	.getImages(gid|order|ribbon, count, 'total')
+	//		NOTE: this is like 'around' above, but will always try to 
+	//			return count images, e.g. when target is closer than 
+	//			count/2 to start or end of ribbon, the resulting list 
+	//			will get padded from the opposite side if available...
+	//		-> list
 	//
 	// If no image is given the current image/ribbon is assumed as target.
 	//
@@ -930,10 +937,9 @@ var DataPrototype = {
 		var i = list.indexOf(target)
 
 		// prepare to slice the list...
-		if(mode == 'around'){
-			count = count/2
-			var pre = Math.floor(count)
-			var post = Math.ceil(count) - 1
+		if(mode == 'around' || mode == 'total'){
+			var pre = Math.floor(count/2)
+			var post = Math.ceil(count/2) - 1
 
 		} else if(mode == 'before'){
 			var pre = count - 1 
@@ -952,20 +958,38 @@ var DataPrototype = {
 
 		// pre...
 		for(var n = i-1; n >= 0 && pre > 0; n--){
-			if(n in list){
-				res.push(list[n])
-				pre--
-			}
+			// NOTE: list may be sparse so we skip the items that are not
+			// 		present and count only the ones we add...
+			n in list
+				&& res.push(list[n])
+				&& pre--
 		}
 
 		res.reverse()
 
 		// post...
+		// NOTE: this will also pad the tail if needed if mode is 'total'
+		post = mode == 'total' ? post + pre : post
 		for(var n = i+1; n < list.length && post > 0; n++){
-			if(n in list){
-				res.push(list[n])
-				post--
+			n in list
+				&& res.push(list[n])
+				&& post--
+		}
+
+		// pad to total...
+		// NOTE: we only need to pad the head here as the tail is padded
+		// 		in the post section...
+		if(mode == 'total' && post > 0){
+			var pad = count - res.length
+			var i = list.indexOf(res[0])
+
+			res.reverse()
+			for(var n = i-1; n >= 0 && pad > 0; n--){
+				n in list
+					&& res.push(list[n])
+					&& pad--
 			}
+			res.reverse()
 		}
 
 		return res

ui (gen4)/imagegrid/ribbons.js

@@ -1665,7 +1665,7 @@ var RibbonsPrototype = {
 		}
 
 		// update gids...
-		$(gids.slice(0, loaded.length-1))
+		$(gids.slice(0, loaded.length))
 			.each(function(i, gid){ 
 				gid && that.setElemGID(loaded.eq(i), gid) })