new partial ribbons mostly done and mostly working...

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

ui (gen4)/features/meta.js

@@ -64,6 +64,7 @@ core.ImageGridFeatures.Feature('viewer-testing', [
 
 	'ui-single-image',
 	//'ui-partial-ribbons',
+	// XXX this is still experimental but seems to already work faster...
 	'ui-partial-ribbons-2',
 
 	'marks',

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

@@ -15,22 +15,21 @@ var core = require('features/core')
 
 
 /*********************************************************************/
-// XXX update sequence:
-// 		- if target is loaded more than 1 screen width off the edge:
-// 			- jump (animate)
-// 			- update ribbon
-// 		- if target is not loaded or too close to edge:
-// 			- update ribbon to place current at ~1 screen off the edge in 
-// 				the opposite direction...
-// 			- load target partially (1/2 ribbon) ~1 screen off the other edge
-// 			- jump (animate)
-// 			- update ribbon to place target at center of ribbon
-// 		...this all feels a bit too complicated...
 // XXX do we need to do most of the work here on in imagegrid/data.js???
 // 		...another question would be if we can do this using existing 
 // 		functionality?
 
 var PartialRibbonsActions = actions.Actions({
+	config: {
+		'ribbon-size-screens': 7,
+
+		// the amount of screen widths to keep around the current image...
+		'ribbon-update-threshold': 1.2,
+
+		// the oversize multiplier limit when we resize the ribbon down...
+		'ribbon-resize-threshold': 2,
+	},
+
 	updateRibbon: ['- Interface/Update partial ribbon size', 
 		function(target, w, size, threshold){
 			target = target instanceof jQuery 
@@ -43,11 +42,12 @@ var PartialRibbonsActions = actions.Actions({
 			// get config data and normalize...
 			size = (size 
 				|| this.config['ribbon-size-screens'] 
-				|| 5) * w
+				|| 9) * w
 			threshold = threshold == 0 ? threshold
 				: (threshold 
 					|| this.config['ribbon-resize-threshold'] 
-					|| 1) * w
+					|| 2)
+			var update_threshold = (this.config['ribbon-update-threshold'] || 2)  * w
 			var data = this.data
 			var ribbons = this.ribbons
 
@@ -61,10 +61,38 @@ var PartialRibbonsActions = actions.Actions({
 			// NOTE: for the initial load this may be empty...
 			var r = ribbons.getRibbon(r_gid)
 
-			// XXX test threshold...
-			// XXX
+			// next/prev loaded... 
+			var img = this.ribbons.getImage(target)
+			var nl = img.nextAll('.image:not(.clone)').length
+			var pl = img.prevAll('.image:not(.clone)').length
+			var loaded = nl + pl + 1
 
-			return function(){
+			// next/prev available...
+			// NOTE: we subtract 1 to remove the current and make these 
+			// 		compatible with: nl, pl
+			var na = this.data.getImages(target, size, 'after').length - 1
+			var pa = this.data.getImages(target, size, 'before').length - 1
+
+			//console.log(`-- loaded: ${loaded} size: ${size}`)
+
+			// full resize...
+			// ribbon not loaded...
+			if(r.length == 0
+					// ribbon shorter than we expect...
+					|| (loaded < size && na + pa > loaded)
+					|| loaded > size * threshold){
+				//console.log(`RESIZE: ${loaded} -> ${size}`)
+				this.resizeRibbon(target, size)
+
+			// soft-update...
+			} else if(na + pa < nl + pl
+					// passed threshold on the right...
+					|| (nl < update_threshold && na > nl) 
+					// passed threshold on the left...
+					|| (pl < update_threshold && pa > pl) 
+					// loaded more than we need by threshold...
+					|| nl + pl + 1 > size + update_threshold){
+				//console.log('UPDATE')
 				r.length == 0 ?
 					// ribbon not loaded...
 					this.resizeRibbon(target, size)
@@ -72,7 +100,7 @@ var PartialRibbonsActions = actions.Actions({
 					: this.ribbons
 						.preventTransitions(r)
 						.updateRibbonInPlace(
-							this.data.getImages(target, size, 'total'), 
+							this.data.getImages(target, loaded, 'total'), 
 							r_gid,
 							target)
 						.restoreTransitions(r, true)
@@ -138,6 +166,7 @@ module.PartialRibbons = core.ImageGridFeatures.Feature({
 		['resizing.pre',
 			function(unit, size){
 				// XXX
+				this.updateRibbon()
 			}],
 	],
 })