cleanup, refactoring and first steps/experiments in dynamic loading...

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

ui/ImageGrid.js

@@ -60,17 +60,13 @@ function getScreenWidthInImages(){
 }
 
 
-// NOTE: in strict mode this will return null if no image is before the
+// NOTE: this will return an empty jquery object if no image is before 
-// 		target...
+// 		the target...
-// NOTE: if this can't find an image if an order less, it will return 
-// 		the first image in ribbon...
 // NOTE: this might return an empty target if the ribbon is empty...
 // XXX need tp make this loadable ribbon compatible -- the target may 
 // 		not be loaded...
-function getImageBefore(image, ribbon, mode, strict){
+function getImageBefore(image, ribbon, mode){
-	if(mode == null){
+	mode = mode == null ? NAV_DEFAULT : mode
-		mode = NAV_DEFAULT
-	}
 	image = image == null ? $('.current.image') : $(image)
 	if(ribbon == null){
 		ribbon = image.closest('.ribbon')
@@ -78,7 +74,7 @@ function getImageBefore(image, ribbon, mode, strict){
 	var images = $(ribbon).find('.image').filter(mode)
 	// XXX need to process/format this correctly...
 	var order = JSON.parse(image.attr('order'))
-	var prev = strict ? [] : images.first()
+	var prev = []
 
 	images.each(function(){
 		if(order < $(this).attr('order')){
@@ -372,6 +368,8 @@ function centerImage(image, mode){
 		ribbons.css(res)
 	}
 
+	$('.viewer').trigger('centeringRibbon', [image.closest('.ribbon'), image])
+
 	return image
 }
 
@@ -409,7 +407,7 @@ function centerRibbon(ribbon, image, mode){
 	}
 
 	var scale = getElementScale($('.ribbon-set'))
-	var target = getImageBefore(null, ribbon, null, true)
+	var target = getImageBefore(null, ribbon, null)
 
 	if(target.length > 0){
 		var dl = getRelativeVisualPosition(target, image).left/scale
@@ -418,9 +416,8 @@ function centerRibbon(ribbon, image, mode){
 		l = {left: l + dl - ($('.image').outerWidth()/2)}
 
 	} else {
-		var dl = getRelativeVisualPosition(
+		target = ribbon.find('.image').filter(NAV_DEFAULT).first() 
-					ribbon.find('.image').filter(NAV_DEFAULT).first(), 
+		var dl = getRelativeVisualPosition(target, image).left/scale
-					image).left/scale
 		var l = parseFloat(ribbon.css('left'))
 		l = !isNaN(l) ? l : 0
 		l = {left: l + dl + ($('.image').outerWidth()/2)}
@@ -432,6 +429,8 @@ function centerRibbon(ribbon, image, mode){
 		ribbons.css(res)
 	}
 
+	$('.viewer').trigger('centeringRibbon', [ribbon, target])
+
 	// XXX should this return a ribbon or the target image???
 	return ribbon
 }
@@ -530,18 +529,14 @@ var NAV_DEFAULT = NAV_VISIBLE
 
 // basic navigation actions...
 function nextImage(n, mode){
-	if(mode == null){
+	mode = mode == null ? NAV_DEFAULT : mode
-		mode = NAV_DEFAULT
-	}
 	n = n == null ? 1 : n
 	var target = $('.current.image').nextAll('.image' + mode)
 	target = target.length < n ?  target.last() : target.eq(n-1)
 	return centerImage(focusImage(target))
 }
 function prevImage(n, mode){
-	if(mode == null){
+	mode = mode == null ? NAV_DEFAULT : mode
-		mode = NAV_DEFAULT
-	}
 	n = n == null ? 1 : n
 	var target = $('.current.image').prevAll('.image' + mode)
 	target = target.length < n ? target.last() : target.eq(n-1)
@@ -554,17 +549,13 @@ function prevScreenImages(mode){
 	return prevImage(Math.round(getScreenWidthInImages()), mode)
 }
 function firstImage(mode){
-	if(mode == null){
+	mode = mode == null ? NAV_DEFAULT : mode
-		mode = NAV_DEFAULT
-	}
 	return centerImage(
 		focusImage(
 			$('.current.image').closest('.ribbon').find('.image').filter(mode).first()))
 }
 function lastImage(mode){
-	if(mode == null){
+	mode = mode == null ? NAV_DEFAULT : mode
-		mode = NAV_DEFAULT
-	}
 	return centerImage(
 		focusImage(
 			$('.current.image').closest('.ribbon').find('.image').filter(mode).last()))
@@ -576,11 +567,13 @@ function lastImage(mode){
 // NOTE: if an image with the same order is found, moving argument has no effect.
 // XXX get move direction...
 function prevRibbon(moving, mode){
-	if(mode == null){
+	mode = mode == null ? NAV_DEFAULT : mode
-		mode = NAV_DEFAULT
-	}
 	var cur = $('.current.image')
 	var target = getImageBefore(cur, cur.closest('.ribbon').prevAll('.ribbon:visible').first())
+	if(target.length == 0){
+		// XXX too complex???
+		target = cur.closest('.ribbon').prevAll('.ribbon:visible').first().find('.image' + mode).first()
+	}
 	if(moving == 'next' && cur.attr('order') != target.attr('order')){
 		var next = target.nextAll('.image' + mode).first()
 		target = next.length > 0 ? next : target
@@ -589,11 +582,13 @@ function prevRibbon(moving, mode){
 }
 // XXX get move direction...
 function nextRibbon(moving, mode){
-	if(mode == null){
+	mode = mode == null ? NAV_DEFAULT : mode
-		mode = NAV_DEFAULT
-	}
 	var cur = $('.current.image')
 	var target = getImageBefore(cur, cur.closest('.ribbon').nextAll('.ribbon:visible').first())
+	if(target.length == 0){
+		// XXX too complex???
+		target = cur.closest('.ribbon').nextAll('.ribbon:visible').first().find('.image' + mode).first()
+	}
 	if(moving == 'next' && cur.attr('order') != target.attr('order')){
 		var next = target.nextAll('.image' + mode).first()
 		target = next.length > 0 ? next : target
@@ -608,9 +603,7 @@ function _shiftImageTo(image, direction, moving, force_create_ribbon, mode){
 	if(image == null){
 		image = $('.current.image')
 	}
-	if(mode == null){
+	mode = mode == null ? NAV_DEFAULT : mode
-		mode = NAV_DEFAULT
-	}
 
 	// account move for direction...
 	// XXX get the value from some place more logical than the argument...
@@ -737,7 +730,7 @@ function toggleImageMarkBlock(image){
 function clickHandler(evt){
 	var img = $(evt.target).closest('.image')
 
-	centerImage( focusImage(img) )
+	centerImage(focusImage(img))
 }
 
 

ui/index.html

@@ -224,14 +224,46 @@ $(function(){
 
 	// NOTE: this is global so as to not to add any extra complexity to 
 	//		the internal workings...
-	$('.viewer').click(clickHandler)
+	$('.viewer')
+		.click(clickHandler)
 
 	$(document)
 		.keydown(makeKeyboardHandler(
 			KEYBOARD_CONFIG,
 			function(k){console.log(k)}))
+
+
+
+	if(false){
+		// XXX dynamic loading test...
+		// XXX this will be a stupid demo, until we get real image loading...
+		// XXX update this depending on zoom and navigation speed...
+		var LOADER_THRESHOLD = 2
+		// XXX update this depending on zoom and navigation speed...
+		var LOADER_CHUNK = LOADER_THRESHOLD * 2
+		$('.viewer')
+			.on('centeringRibbon', function(evt, ribbon, image){
+				var head = image.prevAll('.image')
+				var tail = image.nextAll('.image')
+				// NOTE: these are to be used as reference for loading/populating
+				//		rolled images...
+				var first = head.first()
+				var last = head.first()
+
+				// XXX need to expand/contract the ribbon depending on zoom and speed...
+
+				// XXX use extendRibbon, to both roll and expand/contract...
+				if(tail.length < LOADER_THRESHOLD){
+					var rolled = rollRibbon(LOADER_CHUNK, ribbon)
+				}
+				if(head.length < LOADER_THRESHOLD){
+					var rolled = rollRibbon(-LOADER_CHUNK, ribbon)
+				}
+			})
+	}
 	
 
+
 	// XXX stub...
 	centerImage(focusImage($('.image').first()), 'css')