more work on image info display...

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

ui/base.js

@@ -299,43 +299,31 @@ function shiftImage(direction, image, force_create_ribbon){
 // just fill that.
 //
 // XXX revise...
-function updateInfo(elem, target, info, force_new){
+function updateInfo(elem, data, target){
 	var viewer = $('.viewer')
 	target = target == null ? viewer : $(target)
+	elem = elem == null ? $('.overlay-info') : $(elem)
 
-	if(target.hasClass('overlay-info')){
+	if(elem.length == 0){
-		info = target
+		elem = $('<div/>')
-
-	} else if(info == null) {
-		var info = $('.overlay-info')
-		if(force_new || info.length == 0){
-			info = $('<div/>')
-				//.click(function(){ hideInfo(info) })
-				.appendTo(viewer)
-		}
-
-		info
-			//.attr({
-				//class: '',
-				//style: '',
-			//})
-			.addClass('overlay-info')
-			.appendTo(target)
 	}
 
-	info
+	elem
+		.addClass('overlay-info')
 		.html('')
 
-	if(typeof(elem) == typeof('abc')){
+	if(typeof(data) == typeof('abc')){
-		info.html(elem)
+		elem.html(data)
 	} else {
-		info.append(elem)
+		elem.append(data)
 	}
 
-	return info 
+	return elem 
+		.appendTo(target)
 }
-function showInfo(elem){
+function showInfo(elem, data, target){
 	elem = elem == null ? $('.overlay-info') : elem
+	elem = data == null ? elem : updateInfo(elem, data, traget)
 	return elem.fadeIn()
 }
 function hideInfo(elem){

ui/data.js

@@ -566,25 +566,6 @@ function updateImage(image, gid, size){
 			orientation: img_data.orientation == null ? 0 : img_data.orientation,
 		})
 
-	// 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')
@@ -1215,8 +1196,9 @@ function openImage(){
 * Actions
 */
 
-// XXX show date...
+// XXX do we need a full rewrite here, or will it be better to just fill
-function updateImageInfo(image){
+// 		the slots...
+function updateGlobalImageInfo(image){
 	image = image == null ? getImage() : $(image)
 
 	var gid = getImageGID(image)
@@ -1239,10 +1221,15 @@ function updateImageInfo(image){
 
 	meta = meta.join(', ') 
 	meta = meta != '' ? '( '+ meta +' )' : ''
+
+	var elem = $('.global-image-info')
+	if(elem.length == 0){
+		elem = $('<div class="global-image-info"/>')
+	}
  
-	return updateInfo(
+	return updateInfo(elem,
 			// path...
-			'<span class="expanding-text">'+
+			'<span class="expanding-text path">'+
 				'<span class="shown">'+
 					data.path.split('/').pop() +
 				'</span>'+
@@ -1252,7 +1239,7 @@ function updateImageInfo(image){
 			'</span> '+ 
 
 			// metadata...
-			'<span class="secondary expanding-text">'+
+			'<span class="secondary expanding-text metadata">'+
 				meta + ' GID:'+
 				// XXX do we need to display a short gid?
 				//gid +
@@ -1267,18 +1254,49 @@ function updateImageInfo(image){
 			'</span> '+
 
 			// date...
-			'<span class="secondary expanding-text">'+
+			'<span class="secondary expanding-text date">'+
 				'<span class="shown">TS:' + date.toShortDate() + '</span>'+
 				'<span class="hidden"><b>' + date.toString() + '</b></span>'+
 			'</span>'+
 
 			// position...
-			'<span class="float-right">('+ 
+			'<span class="float-right position">('+ 
 				(DATA.ribbons[r].indexOf(gid)+1) +'/'+ DATA.ribbons[r].length +
 			')<span/>')
 }
 
 
+function updateInlineImageInfo(image){
+	image = image == null ? getImage() : $(image)
+
+	var gid = getImageGID(image)
+	var r = getRibbonIndex(getRibbon(image))
+	var data = IMAGES[gid]
+	var date = new Date(data.ctime * 1000)
+
+	var orientation = data.orientation
+	orientation = orientation == null ? 0 : orientation
+
+	var elem = $('.inline-image-info')
+	if(elem.length == 0){
+		elem = $('<div class="inline-image-info"/>')
+	}
+
+	return updateInfo(elem,
+			// name...
+			data.path.split('/').pop() +'<br>'+
+
+			// date...
+			'<span class="secondary expanding-text date">'+
+				//date.toShortDate() +
+				'<span class="shown">' + date.toShortDate() + '</span>'+
+				'<span class="hidden"><b>' + date.toString() + '</b></span>'+
+			'</span>'+
+			'',
+			image)
+}
+
+
 
 /**********************************************************************
 * Setup
@@ -1427,7 +1445,7 @@ function setupDataBindings(viewer){
 			image = $(image)
 			DATA.current = getImageGID(image)
 
-			updateImageInfo(image)
+			updateGlobalImageInfo(image)
 		})
 
 
@@ -1445,7 +1463,7 @@ function setupDataBindings(viewer){
 				}
 			})
 
-			updateImageInfo(image)
+			updateGlobalImageInfo(image)
 		})
 
 
@@ -1463,7 +1481,7 @@ function setupDataBindings(viewer){
 				MARKED.splice(MARKED.indexOf(gid), 1)
 			}
 
-			updateImageInfo(img)
+			updateGlobalImageInfo(img)
 		})
 		.on('removeingRibbonMarks', function(evt, ribbon){
 			$.each(DATA.ribbons[getRibbonIndex(ribbon)], function(_, e){

ui/index.html

@@ -246,7 +246,7 @@ body {
 
 
 /* Image info */
-.image .info {
+.image .inline-image-info {
 	display: none;
 
 	position: absolute;
@@ -261,17 +261,18 @@ body {
 	-ms-user-select: auto;
 	user-select: auto;
 }
-.image .info::selection {
+.image .inline-image-info::selection {
 	color: white;
 	background: red;
 }
-.image-info-visible.viewer .image:hover .info {
+.image-info-visible.viewer .global-image-info,
+.image-info-visible.viewer .image:hover .inline-image-info {
 	display: block;
 }
-.single-image-mode.viewer .image .info {
+.single-image-mode.viewer .image:hover .inline-image-info {
 	display: none;
 }
-.image[orientation="90"] .info {
+.image[orientation="90"] .inline-image-info {
 	top: auto;
 	left: 100%;
 
@@ -285,7 +286,7 @@ body {
 	-ms-transform: rotate(-90deg);
 	transform: rotate(-90deg);
 }
-.image[orientation="180"] .info {
+.image[orientation="180"] .inline-image-info {
 	top: 0px;
 	bottom: auto;
 
@@ -295,7 +296,7 @@ body {
 	-ms-transform: rotate(180deg);
 	transform: rotate(180deg);
 }
-.image[orientation="270"] .info {
+.image[orientation="270"] .inline-image-info {
 	top: auto;
 	left: auto;
 	right: 100%;
@@ -310,6 +311,7 @@ body {
 	-ms-transform: rotate(90deg);
 	transform: rotate(90deg);
 }
+
 .overlay-info {
 	display: none;
 	position: absolute;
@@ -346,9 +348,6 @@ body {
 	color: white;
 	background: red;
 }
-.image-info-visible.viewer .overlay-info {
-	display: block;
-}
 
 
 
@@ -579,6 +578,18 @@ $(function(){
 			function(k){
 				window.DEBUG && console.log(k)
 			}))
+		.on('mouseover', function(evt){
+				var img = $(evt.target).closest('.image')
+				if(img.length > 0){
+					if(IMAGE_INFO){
+						if(img.find('.inline-image-info:visible').length == 0){
+							updateInlineImageInfo(img)
+						}
+					} else {
+						img.find('.inline-image-info').remove()
+					}
+				}
+			})
 
 	setupDataBindings()