added image info on hover...

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

ui/data.js

@@ -15,7 +15,7 @@ var MAX_SCREEN_IMAGES = 12
 
 // if set to true each image will have basic info written to its html 
 // title attr.
-var IMAGE_TITLE_DATA = true
+var IMAGE_INFO = true
 
 var CACHE_DIR = '.ImageGridCache'
 
@@ -390,7 +390,7 @@ function imagesFromUrls(lst){
 
 	$.each(lst, function(i, e){
 
-		// this is ugly but I'm bored so this pretty...
+		// this is ugly but I'm bored so this is pretty...
 		var ii = i < 10			? '0000000' + i 
 				: i < 100		? '000000' + i
 				: i < 1000		? '00000' + i
@@ -436,12 +436,6 @@ function dataFromImages(images){
 function ribbonsFromFavDirs(path, images, cmp){
 	path = path == null ? BASE_URL : path
 	images = images == null ? IMAGES : images
-	/*cmp = cmp == null ?
-			function(a, b){ 
-				return imageDateCmp(a, b, images) 
-			}
-			: cmp
-	*/
 
 	// build a reverse name-gid index for fast access...
 	var index = {}
@@ -554,13 +548,14 @@ function updateImage(image, gid, size){
 	}
 	size = size == null ? getVisibleImageSize('max') : size
 
+	// get the image data...
 	var img_data = IMAGES[gid]
 	if(img_data == null){
 		img_data = STUB_IMAGE_DATA
 	}
 	var name = img_data.path.split('/').pop()
 
-	// get the url...
+	// preview...
 	var preview = getBestPreview(gid, size)
 	image
 		.css({
@@ -569,21 +564,34 @@ function updateImage(image, gid, size){
 		.attr({
 			order: DATA.order.indexOf(gid),
 			orientation: img_data.orientation == null ? 0 : img_data.orientation,
-			title: IMAGE_TITLE_DATA ? 
-				'Image: ' + name +'\n'+
-				'Order: ' + DATA.order.indexOf(gid) +'\n'+
-				'GID: '+ gid +'\n'+
-				'Preview size:'+ preview.size : '',
 		})
 
-	// setup marks...
+	// image info...
+	if(IMAGE_INFO){
+		var info = image.find('.info')
+		if(info.length == 0){
+			info = $('<div/>')
+				.addClass('info')
+				.appendTo(image)
+		}
+		info.html(
+			'Image: ' + name +
+			'<br>Order: ' + DATA.order.indexOf(gid) +
+			'<br>GID: '+ gid +
+			(window.DEBUG ? '<br>Preview size:'+ preview.size : '') +
+			''
+		)
+	} else {
+		image.find('.info').remove()
+	}
+
+	// marks...
 	if(MARKED.indexOf(gid) != -1){
 		image.addClass('marked')
 	} else {
 		image.removeClass('marked')
 	}
 
-
 	return image
 }
 

ui/index.html

@@ -56,6 +56,7 @@ body {
 }
 
 
+
 .ribbon {
 	position: relative;
 	display: block;
@@ -78,6 +79,8 @@ body {
 	margin-bottom: 0px;
 }
 
+
+
 .image {
 	position: relative;
 	display: inline-block;
@@ -106,6 +109,8 @@ body {
 	border: solid red 5px;
 }
 
+
+
 /* image turning... */
 /* NOTE: need to account for proportions after turning... */
 .image[orientation="90"] {
@@ -131,6 +136,7 @@ body {
 }
 
 
+
 /* dot mark... */
 .marks-visible.viewer .marked.image:after {
 	display: block;
@@ -238,6 +244,75 @@ body {
 }
 
 
+
+/* Image info */
+.image .info {
+	display: none;
+
+	position: absolute;
+	bottom: 0px;
+	width: 100%;
+	background: black;
+	opacity: 0.7;
+
+	-moz-user-select: auto;
+	-webkit-user-select: auto;
+	-o-user-select: auto;
+	-ms-user-select: auto;
+	user-select: auto;
+}
+.image .info::selection {
+	color: white;
+	background: red;
+}
+.image-info-visible.viewer .image:hover .info {
+	display: block;
+}
+.single-image-mode.viewer .image .info {
+	display: none;
+}
+.image[orientation="90"] .info {
+	top: auto;
+	left: 100%;
+
+	-ms-transform-origin: bottom left;
+	-webkit-transform-origin: bottom left;
+	transform-origin: bottom left;
+
+	-webkit-transform: rotate(-90deg);
+	-moz-transform: rotate(-90deg);
+	-o-transform: rotate(-90deg);
+	-ms-transform: rotate(-90deg);
+	transform: rotate(-90deg);
+}
+.image[orientation="180"] .info {
+	top: 0px;
+	bottom: auto;
+
+	-webkit-transform: rotate(180deg);
+	-moz-transform: rotate(180deg);
+	-o-transform: rotate(180deg);
+	-ms-transform: rotate(180deg);
+	transform: rotate(180deg);
+}
+.image[orientation="270"] .info {
+	top: auto;
+	left: auto;
+	right: 100%;
+
+	-ms-transform-origin: bottom right;
+	-webkit-transform-origin: bottom right;
+	transform-origin: bottom right;
+
+	-webkit-transform: rotate(90deg);
+	-moz-transform: rotate(90deg);
+	-o-transform: rotate(90deg);
+	-ms-transform: rotate(90deg);
+	transform: rotate(90deg);
+}
+
+
+
 .up-indicator,
 .down-indicator,
 .start-indicator,

ui/keybindings.js

@@ -16,6 +16,29 @@ var DIRECTION = 'next'
 /*********************************************************************/
 
 var KEYBOARD_CONFIG = {
+	// help mode...
+	// NOTE: need to keep all info modes before the rest so as to give 
+	// 		their bindings priority...
+	'.help-mode': {
+		title: 'Help',
+		doc: 'NOTE: In this mode all other key bindings are disabled, except '+
+			'the ones explicitly defined here.',
+		ignore: '*',
+
+		Esc: doc('Close help',
+			function(){ 
+				toggleKeyboardHelp('off') 
+				return false
+			}),
+		H: 'Esc',
+		Q: 'Esc',
+		// '?'
+		'/': { 
+				shift: 'Esc', 
+			},
+	},
+
+
 	// single image mode only...
 	'.single-image-mode': {
 		title: 'Single image mode',
@@ -27,34 +50,23 @@ var KEYBOARD_CONFIG = {
 				centerRibbons()
 			}),
 		Esc: doc('Exit single image mode', 
-				function(){ toggleSingleImageMode('off') }),
+				function(){ 
+					toggleSingleImageMode('off') 
+					return false
+				}),
 		Q: 'Esc',
 	},
 
+
 	// single image mode only...
 	'.marked-only-view:not(.single-image-mode)': {
 		title: 'Marked only view',
 
 		Esc: doc('Exit marked only view', 
-				function(){ toggleMarkedOnlyView('off') })
+				function(){ 
-	},
+					toggleMarkedOnlyView('off') 
-
+					return false
-
+				})
-	// help mode...
-	'.help-mode': {
-		title: 'Help',
-		doc: 'NOTE: In this mode all other key bindings are disabled, except '+
-			'the ones explicitly defined here.',
-		ignore: '*',
-
-		Esc: doc('Close help',
-			function(){ toggleKeyboardHelp('off') }),
-		H: 'Esc',
-		Q: 'Esc',
-		// '?'
-		'/': { 
-				shift: 'Esc', 
-			},
 	},
 
 
@@ -291,6 +303,9 @@ var KEYBOARD_CONFIG = {
 								'Position (global): '+ order +'/'+ DATA.order.length +'\n'+
 								'')
 					}),
+				// XXX group this with other info stuff into a single on/off toggle...
+				shift: doc('Toggle image info visibility (on hover)',
+					function(){ toggleImageInfo() }),
 				ctrl: doc('Invert image marks', 
 					function(){ invertImageMarks() }),
 			},

ui/modes.js

@@ -61,6 +61,9 @@ var toggleTheme = createCSSClassToggler('.viewer',
 		})
 
 
+var toggleImageInfo = createCSSClassToggler('.viewer', '.image-info-visible')
+
+
 // NOTE: this confirmsto the css toggler protocol, but is not implemented 
 // 		via createCSSClassToggler as we do not need to set any classes,
 // 		al least at this point...