fixed the dynamic loading of next/prev chunks, still having issues with scaling loadImages(...) ...

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

ui/ImageGrid.data.js

@@ -6,9 +6,10 @@
 
 //var DEBUG = DEBUG != null ? DEBUG : true
 
-var LOAD_SCREENS = 2
+var LOAD_SCREENS = 4
 var LOAD_THRESHOLD = 1
 var DEFAULT_SCREEN_IMAGES = 5
+var MAX_SCREEN_IMAGES = 12
 
 // XXX STUB
 // Data format...
@@ -340,7 +341,7 @@ function loadImagesAround(ref_gid, count, ribbon){
 // NOTE: this will load data ONLY if it is available, otherwise this 
 // 		will have no effect...
 // NOTE: this can roll past the currently loaded images (n > images.length)
-function rollImages(n, ribbon, extend){
+function rollImages(n, ribbon, extend, no_compensate_shift){
 	if(n == 0){
 		return $([])
 	}
@@ -362,7 +363,7 @@ function rollImages(n, ribbon, extend){
 	}
 
 	if(n < images.length){
-		images = rollRibbon(gids.length * (n > 0 ? 1 : -1), ribbon)
+		images = rollRibbon(gids.length * (n > 0 ? 1 : -1), ribbon, extend, no_compensate_shift)
 	}
 
 	var size = getVisibleImageSize()
@@ -391,7 +392,7 @@ function loadData(data, images_per_screen){
 
 	// create images...
 	$('.ribbon').each(function(i, e){
-		loadImages(current, Math.min(w * LOAD_SCREENS * 1.5, data.ribbons[i].length), $(this))
+		loadImages(current, Math.min(w * LOAD_SCREENS, data.ribbons[i].length), $(this))
 	})
 
 	focusImage($('.image').filter('[gid='+JSON.stringify(current)+']'))
@@ -406,54 +407,41 @@ function loadData(data, images_per_screen){
 * Setup
 */
 
-function setupDataBindings(){
+function setupDataBindings(viewer){
-	$('.viewer')
+	viewer = viewer == null ? $('.viewer') : viewer
+	viewer
 		// XXX this always reloads everything...
 		// XXX this causes miss-aligns after shifting and/or zooming...
+		// 		...after zooming, moving focus causes the screen to align 
+		// 		in an odd way until the next move corrects the issue...
 		.on('preCenteringRibbon', function(evt, ribbon, image){
 			// NOTE: we do not need to worry about centering the ribbon 
 			//		here, just ball-park-load the correct batch...
 
-			// check if we are in the right range...
 			var gid = getImageGID(image)
 			var r = getRibbonIndex(ribbon)
 			var gr = DATA.ribbons[r]
 			var img_before = getImageBefore(image, ribbon)
 			var gid_before = getGIDBefore(gid, r)
+			var screen_size = getScreenWidthInImages()
 
-			// load...
+			// load images if we do a long jump -- start, end or some mark 
+			// outside of currently loaded section...
 			if(gid_before == null || gid_before != getImageGID(img_before)){
-				loadImages(gid, Math.round((LOAD_SCREENS * 1.5) * getScreenWidthInImages()), ribbon)
+				loadImages(gid, Math.round((LOAD_SCREENS * 0.5) * screen_size), ribbon)
 				// XXX compensate for the changing number of images...
-				// XXX
-			}
-		})
-		/*
-		// XXX BUGGY -- pissibly due to rollRibbon align issues...
-		.on('centeringRibbon', function(evt, ribbon, image){
-			// check if we are in the right range...
-			var gid = getImageGID(image)
-			var r = getRibbonIndex(ribbon)
-			var img_before = getImageBefore(image, ribbon)
-			var gid_before = getGIDBefore(gid, r)
-
-			if(img_before.length == 0){
-				img_before = ribbon.find('.image').first()
-			}
 
+			// roll the ribbon while we are advancing...
+			} else {
 				var head = img_before.prevAll('.image')
 				var tail = img_before.nextAll('.image')
 
-			// get the frame size to load...
-			var screen_size = getScreenWidthInImages()
 				// NOTE: if this is greater than the number of images currently 
 				//		loaded, it might lead to odd effects...
 				//		XXX need to load additional images and keep track of the 
 				//			loaded chunk size...
-			//var frame_size = screen_size * LOAD_SCREENS
+				var frame_size = (screen_size * LOAD_SCREENS) / 2
-			var frame_size = 4
+				var threshold = screen_size * LOAD_THRESHOLD
-			//var threshold = screen_size * LOAD_THRESHOLD
-			var threshold = 2
 
 				// do the loading...
 				// XXX need to expand/contract the ribbon depending on zoom and speed...
@@ -464,8 +452,10 @@ function setupDataBindings(){
 				if(head.length < threshold){
 					var rolled = rollImages(-frame_size, ribbon)
 				}
+			}
 		})
-		*/
+
+
 		.on('shiftedImage', function(evt, image, from, to){
 			from = getRibbonIndex(from)
 			var ribbon = to
@@ -482,6 +472,7 @@ function setupDataBindings(){
 			DATA.ribbons[to].splice(index, 0, gid)
 		})
 
+
 		.on('createdRibbon', function(evt, index){
 			index = getRibbonIndex(index)
 			DATA.ribbons.splice(index, 0, [])
@@ -490,6 +481,7 @@ function setupDataBindings(){
 			DATA.ribbons.splice(index, 1)
 		})
 
+
 		.on('requestedFirstImage', function(evt, ribbon){
 			var r = getRibbonIndex(ribbon)
 			var gr = DATA.ribbons[r]
@@ -501,6 +493,7 @@ function setupDataBindings(){
 			rollImages(gr.length, ribbon)
 		})
 
+
 		// XXX do we need to make this less global?
 		.on('fittingImages', function(evt, n){
 			updateImages()

ui/ImageGrid.js

@@ -364,8 +364,8 @@ function extendRibbon(left, right, ribbon, no_compensate_shift){
 // NOTE: if n is negative the ribbon will be rolled right.
 // NOTE: rollRibbon(N, R) is equivalent to extendRibbon(-N, N, R)
 // NOTE: this will return a single list of relocated elements...
-function rollRibbon(n, ribbon){
+function rollRibbon(n, ribbon, extend, no_compensate_shift){
-	var res = extendRibbon(-n, n, ribbon)
+	var res = extendRibbon(-n, n, ribbon, no_compensate_shift)
 	return n > 0 ? res.right : res.left
 }