started work on migrating to loadImagesAround(...), functioning but buggy...

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

ui/TODO.otl

@@ -129,52 +129,52 @@ Roadmap
 			| 	  images are created...
 			|
 			| XXX this is the cause for several other bugs...
-		[_] BUG: sometimes duplicate images get loaded...
+			[_] BUG: sometimes duplicate images get loaded...
-		| this happens when jumping back and forth on the mid ribbon until
+			| this happens when jumping back and forth on the mid ribbon until
-		| the last element shows up and then moving left until the frame
+			| the last element shows up and then moving left until the frame
-		| around the image disappears...
+			| around the image disappears...
-		| at this point, this will return 2:
+			| at this point, this will return 2:
-		|
+			|
-		| 	$('[order='+$('.current.image').attr('order')+']').length
+			| 	$('[order='+$('.current.image').attr('order')+']').length
-		|
+			|
-		| happens when:
+			| happens when:
-		| 	ribbon length: ~42
+			| 	ribbon length: ~42
-		| 	screen width: 4
+			| 	screen width: 4
-		| 	jumping to end from start of ribbon
+			| 	jumping to end from start of ribbon
-		|
+			|
-		| Example 1:
+			| Example 1:
-		| 	1) first ribbon in (loaded at first image):
+			| 	1) first ribbon in (loaded at first image):
-		|	 "F:\work\ImageGrid\cur\ImageGrid\src\ui\BUGS\ribbon loading error\"
+			|	 "F:\work\ImageGrid\cur\ImageGrid\src\ui\BUGS\ribbon loading error\"
-		|	2) ctrl-end (error state in "jumping ribbon .." bug)
+			|	2) ctrl-end (error state in "jumping ribbon .." bug)
-		|	3) left/right (next/prev image)
+			|	3) left/right (next/prev image)
-		|	now the last portion of the ribbon is loaded twice
+			|	now the last portion of the ribbon is loaded twice
-		|
+			|
-		| XXX possibly related to 
+			| XXX possibly related to 
-		|		 BUG CLASS (ASAP!): race conditions due to browser rendering lag...
+			|		 BUG CLASS (ASAP!): race conditions due to browser rendering lag...
-		[_] BUG: jumping in ribbon sometimes does not load the ribbon correctly...
+			[_] BUG: jumping in ribbon sometimes does not load the ribbon correctly...
-		| Example 1:
+			| Example 1:
-		| 	first ribbon in (loaded at first image):
+			| 	first ribbon in (loaded at first image):
-		|	 "F:\work\ImageGrid\cur\ImageGrid\src\ui\BUGS\ribbon loading error\"
+			|	 "F:\work\ImageGrid\cur\ImageGrid\src\ui\BUGS\ribbon loading error\"
-		|	jumping to the end will result in an inconsistent view:
+			|	jumping to the end will result in an inconsistent view:
-		|		- ribbon not aligned at the correct spot
+			|		- ribbon not aligned at the correct spot
-		|		- wrong image is .current
+			|		- wrong image is .current
-		|		- part of the images appear to be loaded but misaligned...
+			|		- part of the images appear to be loaded but misaligned...
-		|
+			|
-		| Example 2:
+			| Example 2:
-		| 	load same data at same position as in #1
+			| 	load same data at same position as in #1
-		| 		- shift-F2 to marked-only view
+			| 		- shift-F2 to marked-only view
-		| 		- go to end of ribbon (any means work)
+			| 		- go to end of ribbon (any means work)
-		| 		- shift-F2 or Esc out of marked-only mode
+			| 		- shift-F2 or Esc out of marked-only mode
-		| 	this will result in a state very similar (if not identical) to
+			| 	this will result in a state very similar (if not identical) to
-		| 	example #1...
+			| 	example #1...
-		|
+			|
-		|
+			|
-		| NOTE: jumping back and forth several times will make this problem
+			| NOTE: jumping back and forth several times will make this problem
-		| 		go away...
+			| 		go away...
-		| 		Q: could this be initial load/state error?
+			| 		Q: could this be initial load/state error?
-		|
+			|
-		| XXX possibly related to 
+			| XXX possibly related to 
-		|		 BUG CLASS (ASAP!): race conditions due to browser rendering lag...
+			|		 BUG CLASS (ASAP!): race conditions due to browser rendering lag...
 		[_] OSX: add alternatives to function buttons...
 		[_] BUG: OSX: unable to load absolute paths...
 		[_] BUG: when loading and a non-existing dir, opening a new dir raises an error

ui/data.js

@@ -1324,11 +1324,23 @@ function getGIDsAround(count, gid, ribbon, data){
 }
 
 
-// NOTE: this expects that bot arrays cleanly intersect each other only 
+// NOTE: this expects that both arrays cleanly intersect each other only 
 // 		once...
 function getCommonSubArrayOffsets(L1, L2){
 	var res = {}
 
+	// defaults for if one of the lists is empty...
+	if(L1.length == 0){
+		res.left = -(L2.length)
+		res.right = 0
+		return res
+	} else if(L2.length == 0){
+		res.left = L1.length 
+		res.right = 0
+		return res
+	}
+
+	// head...
 	var n = L1[0]
 	var o = L2[0]
 	var a = L2.indexOf(n)
@@ -1337,6 +1349,7 @@ function getCommonSubArrayOffsets(L1, L2){
 			: b >= 0 ? b 
 			: null
 
+	// tail...
 	n = L1[L1.length-1]
 	o = L2[L2.length-1]
 	a = L2.indexOf(n)
@@ -1366,16 +1379,17 @@ function getCommonSubArray(L1, L2){
 }
 
 
-function loadImagesAgound(count, gid, ribbon, data){
+function loadImagesAround(count, gid, ribbon, data){
 	// default values...
 	data = data == null ? DATA : data
 	gid = gid == null ? getImageGID() : gid
 	ribbon = ribbon == null ? getRibbonIndex() : ribbon
+	ribbon = typeof(ribbon) != typeof(123) ? getRibbonIndex(ribbon) : ribbon
 	count = count == null ? Math.round(LOAD_SCREENS * getScreenWidthInImages()) : count
 
 	gid = data.ribbons[ribbon].indexOf(gid) < 0 ? getGIDBefore(gid, ribbon, null, data) : gid
 
-	var ribbon_elem = getRibbon(getImage(gid)) 
+	var ribbon_elem = getRibbon(ribbon)
 
 	var old_ribbon = ribbon_elem
 		.find('.image')
@@ -1394,23 +1408,24 @@ function loadImagesAgound(count, gid, ribbon, data){
 		return ribbon_elem.find('.image')
 	}
 
-	// NOTE: of at least one of left or right is null then there might 
+	// NOTE: if at least one of left or right is null then there might 
 	// 		be an error loading the ribbons...
 	if(left == null || right == null){
 		// XXX this code is temporary...
-		console.log('something is wrong with loaded ribbons...')
+		console.warn('something is wrong with loaded ribbons...')
 		left = null
 		right = null
 	}
 	// if no common sections reload all...
+	// XXX this path is wrong...
 	if(left == null && right == null){
-		var r = (old_ribbon.length - count)/2
+		var r = (count - old_ribbon.length)/2
 		extendRibbon(Math.floor(r), Math.ceil(r), ribbon_elem)
 		// XXX this will get all the current images, not the resulting ones...
 		var images = ribbon_elem.find('.image')
 		var res = {
 			left: images,
-			right: []
+			right: $([])
 		}
 
 	} else {
@@ -1434,6 +1449,10 @@ function loadImagesAgound(count, gid, ribbon, data){
 		updated += 1
 	})
 
+	if(updated > 0){
+		$('.viewer').trigger('updatedRibbon', [ribbon_elem])
+	}
+
 	// XXX is this the right place for this?
 	// XXX this might be too global, do only the images loaded...
 	correctImageProportionsForRotation(images)
@@ -1441,6 +1460,7 @@ function loadImagesAgound(count, gid, ribbon, data){
 }
 
 
+/*
 // Load count images around a given image/gid into the given ribbon.
 //
 // NOTE: this will reload the current image elements...
@@ -1448,6 +1468,9 @@ function loadImagesAgound(count, gid, ribbon, data){
 // NOTE: load only what is needed instead of reloading everything...
 // NOTE: this will not change alignment if the current image is within 
 // 		the target range...
+//
+// XXX for some magical (unknown) reason this returns BEFORE all the 
+// 		elements this creates actually exist (async)...
 function loadImages(ref_gid, count, ribbon){
 	ribbon = $(ribbon)
 	var images = ribbon.find('.image')
@@ -1534,6 +1557,7 @@ function loadImages(ref_gid, count, ribbon){
 	correctImageProportionsForRotation(images)
 	return images
 }
+*/
 
 
 /*
@@ -1609,7 +1633,8 @@ function reloadViewer(images_per_screen){
 
 	// create images...
 	$('.ribbon').each(function(i, e){
-		loadImages(current, Math.min(w * LOAD_SCREENS, DATA.ribbons[i].length), $(this))
+		//loadImages(current, Math.min(w * LOAD_SCREENS, DATA.ribbons[i].length), $(this))
+		loadImagesAround(Math.round(w * LOAD_SCREENS), current, i)
 	})
 
 	// XXX this may occur BEFORE the image is created...

ui/ribbons.js

@@ -126,9 +126,24 @@ function getImageGID(image){
 }
 
 
-function getRibbon(image){
+function getRibbon(a){
-	image = image == null ? getImage() : $(image)
+	a = a == null ? getImage() : a
-	return image.closest('.ribbon')
+
+	// a is an index...
+	if(typeof(a) == typeof(123)){
+		return $($('.ribbon')[a])
+
+	// a is a gid...
+	} else if(typeof(a) == typeof('str')){
+		a = getImage(a)
+
+	// a was an elem...
+	} else {
+		a = $(a)
+	}
+
+	// a is an element...
+	return a.closest('.ribbon')
 }
 
 

ui/setup.js

@@ -101,7 +101,8 @@ function setupDataBindings(viewer){
 						&& l < Math.round(screen_size * LOAD_SCREENS))){
 				// XXX in some cases this makes the current ribbon align 
 				// 		in a wrong way...
-				loadImages(gid, Math.round(screen_size * LOAD_SCREENS), ribbon)
+				//loadImages(gid, Math.round(screen_size * LOAD_SCREENS), ribbon)
+				loadImagesAround(Math.round(screen_size * LOAD_SCREENS), gid, ribbon)
 			} 
 
 			// roll the ribbon while we are advancing...
@@ -181,7 +182,8 @@ function setupDataBindings(viewer){
 			var gid = getImageGID()
 			$('.ribbon').each(function(){
 				var r = $(this)
-				loadImages(gid, Math.round(screen_size * LOAD_SCREENS), r)
+				//loadImages(gid, Math.round(screen_size * LOAD_SCREENS), r)
+				loadImagesAround(Math.round(screen_size * LOAD_SCREENS), gid, r)
 			})
 			centerView(null, 'css')