added loading animations (disabled), cursor now auto-hides...

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

ui/TODO.otl

@@ -109,6 +109,18 @@ Roadmap
 		[_] BUG: jumping screen images does not load the adjacent ribbons...
 		| positioning is OK but ribbons are not fully visible...
 		[_] ASAP: test on Android...
+		[_] empty view (no data) usable...
+		[_] propper system init (start w.o. any data)
+		[_] default STUB image...
+		| or a loading animation..
+		|
+		| ...would be good to make something pixilated so as to look nise 
+		| on various magnifications.
+		|
+		| keep always cached.
+		[_] tweak image pre-caching size -- keep as many images cached as possible.
+		| might be good to always cache the smaller previews so as to make things
+		| look faster...
 		[_] slideshow mode...
 		[_] single ribbon mode
 		| should this have up/down navigation?

ui/data.js

@@ -71,6 +71,20 @@ var BASE_URL = '.'
 
 var IMAGE_CACHE = []
 
+/*
+var UI_IMAGE_CACHE = []
+$.each([
+	'images/loding.gif',
+	'images/loding-90deg.gif',
+	'images/loding-180deg.gif',
+	'images/loding-270deg.gif'
+], function(i, e){ 
+	var img = new Image()
+	img.src = e
+	UI_IMAGE_CACHE.push(img)
+})
+*/
+
 
 
 /**********************************************************************
@@ -92,16 +106,6 @@ function makeDistanceCmp(start, get){
 
 
 // Make a cmp function to compare two gids by distance from gid.
-/*
-function makeImageGIDDistanceCmp(gid, order){
-	order = order == null ? DATA.order : order
-	var i = order.indexOf(gid)
-	return function(a, b){
-		return (Math.abs(i - order.indexOf(a)) 
-				- Math.abs(i - order.indexOf(b)))
-	}
-}
-*/
 function makeImageGIDDistanceCmp(gid, get, order){
 	order = order == null ? DATA.order : order
 	return makeDistanceCmp(gid, get == null ? 
@@ -117,6 +121,7 @@ function makeImageGIDDistanceCmp(gid, get, order){
 // NOTE: essentially this is a 2D distance compatison from gid...
 //
 // XXX make this faster...
+// XXX this is fun, but do we actually need this?
 function makeImageRibbonDistanceCmp(gid, get, data, images){
 	data = data == null ? DATA : data
 	images = images == null ? IMAGES : images
@@ -375,7 +380,7 @@ function normalizePath(url, base, mode){
 }
 
 
-// Same as getImageBefore, but uses gids and searches in DATA...
+// Same as getImageBefore(...), but uses gids and searches in DATA...
 //
 // NOTE: this uses it's own predicate...
 function getGIDBefore(gid, ribbon, search){
@@ -652,8 +657,7 @@ function updateImage(image, gid, size){
 			.attr('gid', JSON.stringify(gid))
 			.css({
 				// clear the old preview...
-				// XXX set a now loading animation here...
+				'background-image': '',
-				'background-image': 'none',
 			})
 	}
 	size = size == null ? getVisibleImageSize('max') : size
@@ -668,20 +672,18 @@ function updateImage(image, gid, size){
 	// preview...
 	var preview = getBestPreview(gid, size)
 
-	// pre-cache...
+	// pre-cache and load image...
 	// NOTE: make images load without a blackout..
 	var img = new Image()
-	img.src = preview.url
 	img.onload = function(){
 		image.css({
 				'background-image': 'url("'+ preview.url +'")',
 			})
 	}
+	img.src = preview.url
 
+	// main attrs...
 	image
-		//.css({
-		//	'background-image': 'url("'+ preview.url +'")',
-		//})
 		.attr({
 			order: DATA.order.indexOf(gid),
 			orientation: img_data.orientation == null ? 0 : img_data.orientation,
@@ -700,7 +702,7 @@ function updateImage(image, gid, size){
 
 var UPDATE_SORT_ENABLED = false
 // XXX for some reason the sync version appears to work faster...
-var UPDATE_SYNC = true
+var UPDATE_SYNC = false
 
 // Same as updateImage(...) but will update all images.
 //
@@ -952,7 +954,9 @@ function loadSettings(){
 */
 
 // NOTE: this will always overwrite the previous cache set for a ribbon...
-// XXX sort images in cache by closeness to current image...
+// NOTE: it appears that sorting images by priority before loading them
+// 		to cache has little or no affect on the order they are 
+// 		loaded/rendered...
 function preCacheRibbonImages(ribbon){
 	var i = getRibbonIndex(ribbon)
 	var size = getVisibleImageSize('max')
@@ -965,8 +969,6 @@ function preCacheRibbonImages(ribbon){
 	var gids = getImageGIDs(first, -cache_frame_size)
 				.concat(getImageGIDs(last, cache_frame_size))
 
-	// XXX sort gids...
-
 	var cache = []
 	IMAGE_CACHE[i] = cache
 	$.each(gids, function(i, e){
@@ -1167,7 +1169,7 @@ function loadFileImages(path, no_load_diffs, callback){
 			callback != null && callback()
 		})
 		.fail(function(){
-			updateErrorStatus('Loading: ' + path)
+			showErrorStatus('Loading: ' + path)
 		})
 }
 
@@ -1183,7 +1185,7 @@ function saveFileImages(name){
 	name = name == null ? normalizePath(CACHE_DIR +'/'+ Date.timeStamp()) : name
 
 	if(window.dumpJSON == null){
-		updateErrorStatus('Can\'t save to file.')
+		showErrorStatus('Can\'t save to file.')
 		return
 	}
 
@@ -1239,7 +1241,7 @@ function loadFileState(data_path, callback){
 			}
 		})
 		.fail(function(){
-			updateErrorStatus('Loading:', data_path)
+			showErrorStatus('Loading:', data_path)
 		})
 
 	return res
@@ -1293,7 +1295,7 @@ function loadDir(path, raw_load){
 	var files = listDir(path)
 
 	if(files == null){
-		updateErrorStatus('Path: ' + path)
+		showErrorStatus('Path: ' + path)
 		return
 	}
 
@@ -1336,7 +1338,7 @@ function loadDir(path, raw_load){
 		})
 
 		if(image_paths.length == 0){
-			updateErrorStatus('No images in:', orig_path)
+			showErrorStatus('No images in:', orig_path)
 			return 
 		}
 
@@ -1363,7 +1365,7 @@ function updateRibbonsFromFavDirs(){
 // NOTE: this will open the default editor/viewer.
 function openImage(){
 	if(window.runSystem == null){
-		updateErrorStatus('Can\'t run external programs.')
+		showErrorStatus('Can\'t run external programs.')
 		return 
 	}
 	// XXX if path is not present try and open the biggest preview...

ui/index.html

@@ -33,6 +33,9 @@
 
 //DEBUG = true
 
+var CURSOR_SHOW_THRESHOLD = 10
+var CURSOR_HIDE_TIMEOUT = 2000
+
 
 // setup...
 $(function(){
@@ -46,6 +49,31 @@ $(function(){
 		// XXX for some reason this messes up alignment on initial view...
 		//.dblclick(dblClickHandler)
 
+		// hide cursor...
+		.on('mousemove', function(evt){
+			_cursor_pos = window._cursor_pos == null || $('.viewer').css('cursor') == 'auto' ?
+						[evt.clientX, evt.clientY] 
+					: _cursor_pos
+
+			if(Math.abs(evt.clientX - _cursor_pos[0]) > CURSOR_SHOW_THRESHOLD 
+					|| Math.abs(evt.clientY - _cursor_pos[1]) > CURSOR_SHOW_THRESHOLD){
+
+				if(window._cursor_timeout != null){
+					clearTimeout(_cursor_timeout)
+				}
+
+				$('.viewer').css('cursor', '')
+
+			} else {
+				_cursor_timeout = setTimeout(function(){
+					if(Math.abs(evt.clientX - _cursor_pos[0]) < CURSOR_SHOW_THRESHOLD 
+							|| Math.abs(evt.clientY - _cursor_pos[1]) < CURSOR_SHOW_THRESHOLD){
+						$('.viewer').css('cursor', 'none')
+					}
+				}, CURSOR_HIDE_TIMEOUT)
+			}
+		})
+
 	$(window)
 		.resize(function() {
 			// XXX should this be animated or not?

ui/layout.css

@@ -134,6 +134,24 @@ body {
 }
 
 
+/* default backgrounds */
+/* XXX not sure if we need these... */
+/*
+.image {
+	background-image: url(images/loading.gif);
+}
+.image[orientation="90"] {
+	background-image: url(images/loading-90deg.gif);
+}
+.image[orientation="180"] {
+	background-image: url(images/loading-180deg.gif);
+}
+.image[orientation="270"] {
+	background-image: url(images/loading-270deg.gif);
+}
+*/
+
+
 
 /***************************************************** Image marks ***/
 .marks-visible.viewer .marked.image:after {