added dynamic loading of images, still not image size support...

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

ui/TODO.otl

@@ -1,7 +1,7 @@
 Priority work
-	[_] 62% Preview II
-		[_] 5% dynamic loading of images
-			[_] 11% stream on navigate
+	[_] 66% Preview II
+		[_] 41% dynamic loading of images
+			[_] 83% stream on navigate
 				| parameters that affect loading:
 				| 	- current view size				-> image size must be closest
 				| 										above this
@@ -16,18 +16,18 @@ Priority work
 				| 		can reach an image not just by navigating close but 
 				| 		also by scrolling/dragging to it (without changing the
 				| 		current image)...
-				[_] store structure separately from ui (mirror context)
+				[X] store structure separately from ui (mirror context)
 				| an alternative would be to store the whole thing (sans images)
 				| in DOM, but that ma get very big.
 				|
 				| storing the structure will enable us to have partial structures
 				| thus updating the structure of a very big set without the user
 				| noticing.
-				[_] 33% sync context (handle edit events)
+				[_] 50% sync context (handle edit events)
 					[X] identify action position
 					| use id...
-					[_] handle edit events
-				[_] update ui structure (handle navigate/move events)
+					[_] handle edit events XXX
+				[X] update ui structure (handle navigate/move events)
 			[_] sizes on zoom
 		[_] make shift up/down direction-aware...
 		| i.e. if we are going through images in a direction select the 

ui/experiments/dynamic-loading.html

@@ -116,7 +116,7 @@ function enumerate(obj, predicate){
 function makeImage(id){
 	return $('<div class="image"/>')
 			.attr({id: id})
-			.click(selectImage)
+			.mousedown(selectImage)
 			.addClass('unloaded')
 }
 
@@ -136,12 +136,11 @@ function loadJSON(json){
 			makeImage(j).appendTo(ribbon)
 		}
 	}
-	$('#'+cur_id).click()
+	$('#'+cur_id).mousedown()
 }
 
-function updateRibbon(img){
+function updateRibbonImages(img, r){
 	var images = img.parents('.ribbon').children('.image')
-	var r = Math.floor(LOAD/2)
 
 	var cur_i = images.index(img)
 
@@ -151,15 +150,13 @@ function updateRibbon(img){
 		loading.push(images[i])
 		images[i] = {}
 	}
-	loading
+	// do the loading...
+	loading.filter('.unloaded')
 		.addClass('loaded')
 		.removeClass('unloaded')
 
 	// unload...
 	images.filter('.loaded').removeClass('loaded').addClass('unloaded')
-	//$('.image.loaded').not('._cur').removeClass('loaded').addClass('unloaded')
-	//images.filter('._cur').removeClass('_cur')
-	$('.image._cur').removeClass('_cur')
 }
 
 function selectImage(){
@@ -170,7 +167,7 @@ function selectImage(){
 	json.position = $(this).attr('id')
 	// update visible images...
 	//loadJSON(json)
-	updateRibbon($('.current.image'))
+	updateRibbonImages($('.current.image'), Math.floor(LOAD/2))
 }
 
 loadJSON(json)

ui/fullscreen.html

@@ -86,6 +86,8 @@ $(document)
 					// XXX need to avoid data URLs here and use plain old paths...
 					ribbon.append(makeImage(e.target.result, i))
 					$('.image').first().click()
+					// XXX really UGLY and bad...
+					ImageGrid.image_data = buildJSON()
 				}
 			}(i, ribbon)
 			reader.readAsDataURL(f)

ui/gallery-prototype.js

@@ -1162,7 +1162,67 @@ function makeImage(url, order, set_order){
 	}
 	return (setupImageEventHandlers(
 				set_order($('<div class="image"/>')
-					.css({ 'background-image': 'url('+url+')' }), order)))
+					//.css({ 'background-image': 'url('+url+')' }), order)))
+					, order)))
+}
+
+// NOTE: this is largely independent of ImageGrid.image_data structure, 
+// 		it needs only content...
+function getURL(id){
+	var json = ImageGrid.image_data
+	var ribbons = json.ribbons
+
+	for(var i=0; i<ribbons.length; i++){
+		var ribbon = ribbons[i]
+		if(ribbon[id] != null){
+			return ribbon[id].url
+		}
+	}
+}
+
+
+
+var SCREEN_WIDTH_CACHE = 2
+
+// XXX make this update only when the threshold is passed...
+// XXX make this size aware...
+// NOTE: this is largely independent of ImageGrid.image_data...
+function updateRibbonImages(img, r){
+	var R = r*SCREEN_WIDTH_CACHE
+	var images = img.parents('.ribbon').children('.image')
+
+	/* XXX for some reason this does not work...
+	// check the threshold -- one screen-width in any direction...
+	var i = images.filter('.loaded').index(img)
+	if(i >= 0 && Math.abs(i - images.filter('.loaded').length) < r){
+		console.log('skipping...', i, images.filter('.loaded').length)
+		return
+	}
+	console.log('loading...', i, images.filter('.loaded').length)
+	*/
+
+	var cur_i = images.index(img)
+
+	// load...
+	var loading = $([])
+	for(var i=Math.max(0, cur_i-R); i<=Math.min(images.length-1, cur_i+R); i++){
+		var img = $(images[i])
+		loading.push(img[0])
+		// update only the images that are not set...
+		var bg = img.css('background-image')
+		if(bg == 'none' || bg == null){
+			img.css({ 'background-image': 'url('+getURL(img.attr('id'))+')' })
+		}
+		//img.not('.loaded').css({ 'background-image': 'url('+getURL(img.attr('id'))+')' })
+		// remove the processed images from the list...
+		images[i] = {}
+	}
+	// do the loading...
+	loading.not('.loaded')
+		.addClass('loaded')
+	// unload...
+	images.filter('.loaded').removeClass('loaded')
+		.css({ 'background-image': 'none' })
 }
 
 
@@ -1202,9 +1262,11 @@ function loadImagesFromList(images){
  */
 // XXX add incremental or partial updates...
 function buildJSON(get_order){
+	/* XXX can't return this yet as we are not updating this properly yet...
 	if(ImageGrid.image_data != null){
 		return ImageGrid.image_data
 	}
+	*/
 	if(get_order == null){
 		get_order = getImageOrder
 	}
@@ -1249,11 +1311,8 @@ function loadJSON(data, position, set_order){
 		return
 	}
 
-	/*
-	// XXX
 	// store the structure...
 	ImageGrid.image_data = data
-	*/
 
 	var field = $('.field')
 
@@ -1300,6 +1359,14 @@ function handleImageClick(){
 	centerSquare()
 	centerIndicator()
 	alignRibbons()
+	// update this and other ribbons...
+	var w = getViewerWidthImages()
+	updateRibbonImages($(this), w)
+	var ribbons = $(this).parents('.ribbon').siblings('.ribbon')
+	var id = $(this).attr('id')
+	for(var i=0; i<ribbons.length; i++){
+		updateRibbonImages(getImageBefore(id, $(ribbons[i])), w)
+	}
 }