added image pre-caching + minor revactoring...

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

ui/base.js

@@ -128,8 +128,9 @@ function getVisibleImageSize(){
 
 
 // Return the number of images that can fit to viewer width...
-function getScreenWidthInImages(){
+function getScreenWidthInImages(size){
-	return $('.viewer').innerWidth() / getVisibleImageSize()
+	size = size == null ? getVisibleImageSize() : size
+	return $('.viewer').innerWidth() / size
 }
 
 
@@ -743,6 +744,8 @@ function lastImage(mode){
 
 // NOTE: if moving is 'next' these will chose the image after the current's order.
 // NOTE: if an image with the same order is found, moving argument has no effect.
+// XXX make these select the closest image instead of the one based on 
+// 		direction...
 // XXX these sometimes behave wrong at the start of the ribbon depending
 // 		on direction...
 function prevRibbon(moving, mode){

ui/data.js

@@ -43,6 +43,8 @@ var DATA = {
 
 var MARKS = []
 
+var IMAGE_CACHE = []
+
 
 
 /**********************************************************************
@@ -213,6 +215,32 @@ function getImageGIDs(from, count, ribbon, inclusive){
 }
 
 
+// Select best preview by size...
+//
+// NOTE: this will use the original if everything else is smaller...
+function getBestPreview(gid, size){
+	size = size == null ? getVisibleImageSize() : size
+	var s
+	var img_data = DATA.images[gid]
+	var url = img_data.path
+	var preview_size = 'Original'
+	var p = Infinity
+
+	for(var k in img_data.preview){
+		s = parseInt(k)
+		if(s < p && s > size){
+			preview_size = k
+			p = s
+			url = img_data.preview[k]
+		}
+	}
+	return {
+		url: url,
+		size: preview_size
+	}
+}
+
+
 
 /**********************************************************************
 * Loaders
@@ -244,25 +272,13 @@ function updateImage(image, gid, size){
 		img_data = STUB_IMAGE_DATA
 	}
 
-	// select best preview by size...
+	// get the url...
-	// NOTE: this will use the original if everything else is smaller...
+	var preview = getBestPreview(gid, size)
-	var s
-	var url = 'url('+DATA.images[gid].path+')'
-	var preview_size = 'Original'
-	var p = Infinity
-	for(var k in img_data.preview){
-		s = parseInt(k)
-		if(s < p && s > size){
-			preview_size = k
-			p = s
-			url = 'url('+ img_data.preview[k] +')'
-		}
-	}
 	image.css({
-		'background-image': url,
+		'background-image': 'url('+ preview.url +')',
 	})
 
-	window.DEBUG && image.html(DATA.order.indexOf(gid) +'<br>'+ gid +'<br>'+ preview_size)
+	window.DEBUG && image.html(DATA.order.indexOf(gid) +'<br>'+ gid +'<br>'+ preview.size)
 
 	return image
 }
@@ -332,12 +348,18 @@ function loadImages(ref_gid, count, ribbon){
 			window.DEBUG && console.log('>>> (ribbon:', ribbon_i, ') FULL RELOAD --', gids.length)
 			// XXX do we need to think about alining here???
 			extendRibbon(0, gids.length - old_gids.length, ribbon)
-			return ribbon
+
+			var images = ribbon
 				.find('.image')
 					.each(function(i, e){
 						updateImage(e, gids[i], size)
 					})
 
+			$('.viewer').trigger('reloadedRibbon', [ribbon])
+
+			return images
+
+
 		// do nothing...
 		// ...the requested section is the same as the one already loaded...
 		} else {
@@ -362,6 +384,8 @@ function loadImages(ref_gid, count, ribbon){
 			updateImage(e, gids[i + gids.length - tail], size)
 		})
 
+		$('.viewer').trigger('updatedRibbon', [ribbon])
+
 		return ribbon.find('.image')
 	}
 }
@@ -409,11 +433,14 @@ function rollImages(n, ribbon, extend, no_compensate_shift){
 		updateImage($(e), gids[i], size)
 	})
 
+	$('.viewer').trigger('updatedRibbon', [ribbon])
+
 	return images
 }
 
 
 function loadData(data, images_per_screen){
+	DATA = data
 	var ribbons_set = $('.ribbon-set')
 	var current = data.current
 	// if no width is given, use the current or default...
@@ -490,8 +517,7 @@ function convertDataGen1(data){
 
 function loadLocalStorage(attr){
 	attr = attr == null ? 'DATA' : attr
-	DATA = JSON.parse(localStorage[attr])
+	return loadData(JSON.parse(localStorage[attr]))
-	return loadData(DATA)
 }
 
 function saveLocalStorage(attr){
@@ -502,6 +528,44 @@ function saveLocalStorage(attr){
 
 
 
+/**********************************************************************
+* Image caching...
+*/
+
+// NOTE: this will always overwrite the previous cache set for a ribbon...
+function preCacheRibbonImages(ribbon){
+	var i = getRibbonIndex(ribbon)
+	var size = getVisibleImageSize()
+	var screen_size = getScreenWidthInImages(size)
+	var cache_frame_size = (screen_size * LOAD_SCREENS) / 2
+	var images = ribbon.find('.image')
+	var first = getImageGID(images.first())
+	var last = getImageGID(images.last())
+
+	var gids = getImageGIDs(first, -cache_frame_size)
+				.concat(getImageGIDs(last, cache_frame_size))
+
+	var cache = []
+	IMAGE_CACHE[i] = cache
+	$.each(gids, function(i, e){
+		var img = new Image()
+		img.src = getBestPreview(e, size).url
+		cache.push(img)
+	})
+
+	return cache
+}
+
+function preCacheAllRibbons(){
+	$('.ribbon').each(function(){
+		preCacheRibbonImages($(this))
+	})
+	return IMAGE_CACHE
+}
+
+
+
+
 /**********************************************************************
 * Setup
 */
@@ -547,7 +611,6 @@ function setupDataBindings(viewer){
 					|| ( gr.length > l 
 						&& l < screen_size * LOAD_SCREENS)){
 				loadImages(gid, Math.round(screen_size * LOAD_SCREENS), ribbon)
-				// XXX compensate for the changing number of images...
 			} 
 
 			// roll the ribbon while we are advancing...
@@ -616,10 +679,7 @@ function setupDataBindings(viewer){
 
 
 		.on('fittingImages', function(evt, n){
-			/*
 			// load correct amount of images in each ribbon!!!
-			// XXX this changes focus...
-			// XXX n == 1 breaks this -- going past first image...
 			var screen_size = getScreenWidthInImages()
 			var gid = getImageGID()
 			$('.ribbon').each(function(){
@@ -627,7 +687,7 @@ function setupDataBindings(viewer){
 				loadImages(gid, Math.round(screen_size * LOAD_SCREENS), r)
 			})
 			centerView(null, 'css')
-			*/
+
 			// update previews...
 			// XXX make this update only what needs updating...
 			updateImages()
@@ -686,6 +746,15 @@ function setupDataBindings(viewer){
 				}
 			})
 		})
+
+
+		// caching...
+		.on('reloadedRibbon updatedRibbon', function(evt, ribbon){
+
+			window.DEBUG && console.log('>>> (ribbon:', getRibbonIndex(ribbon), ') Updating cache...')
+
+			preCacheRibbonImages(ribbon)
+		})
 }
 
 

ui/index.html

@@ -267,8 +267,7 @@ $(function(){
 	if('DATA' in localStorage){
 		loadLocalStorage()
 	} else {
-		DATA = convertDataGen1(image_list)
+		loadData(convertDataGen1(image_list))
-		loadData(DATA)
 	}
 
 	// NOTE: this is global so as to not to add any extra complexity to