added image info bar at bottom (I)...

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

ui/base.js

@@ -194,6 +194,8 @@ function getRelativeVisualPosition(outer, inner){
 // 	- 'min'
 // 	- 'max'
 //
+// NOTE: we do not need to worry about rotation here as the size change is 
+// 		compensated with margins...
 function getVisibleImageSize(dim){
 	dim = dim == null ? 'width' : dim
 	var scale = getElementScale($('.ribbon-set'))
@@ -289,6 +291,59 @@ function shiftImage(direction, image, force_create_ribbon){
 }
 
 
+// align can be:
+// 	- top
+// 	- bottom
+//
+// If target is an existing info container (class: overlay-info) then 
+// just fill that.
+//
+// XXX revise...
+function updateInfo(elem, target, info, force_new){
+	var viewer = $('.viewer')
+	target = target == null ? viewer : $(target)
+
+	if(target.hasClass('overlay-info')){
+		info = target
+
+	} 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
+		.html('')
+
+	if(typeof(elem) == typeof('abc')){
+		info.html(elem)
+	} else {
+		info.append(elem)
+	}
+
+	return info 
+}
+function showInfo(elem){
+	elem = elem == null ? $('.overlay-info') : elem
+	return elem.fadeIn()
+}
+function hideInfo(elem){
+	elem = elem == null ? $('.overlay-info') : elem
+	return elem.fadeOut()
+}
+
+
 
 /**********************************************************************
 * Constructors

ui/data.js

@@ -14,8 +14,7 @@ var DEFAULT_SCREEN_IMAGES = 4
 var MAX_SCREEN_IMAGES = 12
 
 // if set to true each image will have basic info written to its html 
-// title attr.
-var IMAGE_INFO = true
+var IMAGE_INFO = false
 
 var CACHE_DIR = '.ImageGridCache'
 
@@ -71,6 +70,7 @@ var SETTINGS = {
 	'screen-images-ribbon-mode': null,
 	'screen-images-single-image-mode': null,
 	'single-image-mode-proportions': null,
+	'image-info-ribbon-mode': 'off',
 }
 
 var BASE_URL = '.'
@@ -788,6 +788,7 @@ function loadSettings(){
 		toggleImageProportions(p)
 	} else {
 		var w = SETTINGS['screen-images-ribbon-mode']
+		toggleImageInfo(SETTINGS['image-info-ribbon-mode'] == 'on' ? 'on' : 'off')
 	}
 	fitNImages(w)
 }
@@ -1210,6 +1211,73 @@ function openImage(){
 
 
 
+/**********************************************************************
+* Actions
+*/
+
+// XXX show date...
+function updateImageInfo(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 meta = []
+
+	image.hasClass('marked') ? meta.push(
+			'<span class="shown">M</span>'+
+			'<span class="hidden"><b>M</b>arked</span>') : ''
+
+	var orientation = data.orientation
+	orientation = orientation == null ? 0 : orientation
+	orientation != 0 ? meta.push(
+			'<span class="shown">R</span>'+
+			'<span class="hidden"><b>R</b>otated: '+orientation+'&deg;CW</span>') : ''
+
+
+	meta = meta.join(', ') 
+	meta = meta != '' ? '( '+ meta +' )' : ''
+ 
+	return updateInfo(
+			// path...
+			'<span class="expanding-text">'+
+				'<span class="shown">'+
+					data.path.split('/').pop() +
+				'</span>'+
+				'<span class="hidden" style="position:absolute; background: black; padding: 3px; top: 0px; left: 0px; width: 100%; height: 100%">'+
+					normalizePath(data.path) +
+				'</span>'+ 
+			'</span> '+ 
+
+			// metadata...
+			'<span class="secondary expanding-text">'+
+				meta + ' GID:'+
+				// XXX do we need to display a short gid?
+				//gid +
+				'<span class="shown">'+ 
+					gid.slice(gid.length-6) +
+				'</span>'+
+				'<span class="hidden"> '+
+					gid.slice(0, gid.length-6) +'<b>'+ gid.slice(gid.length-6) +'</b>'+
+				'</span>'+
+			'</span> '+
+
+			// date...
+			'<span class="secondary expanding-text">'+
+				'<span class="shown">TS:' + date.toShortDate() + '</span>'+
+				'<span class="hidden"><b>' + date.toString() + '</b></span>'+
+			'</span>'+
+
+			// position...
+			'<span class="float-right">('+ 
+				(DATA.ribbons[r].indexOf(gid)+1) +'/'+ DATA.ribbons[r].length +
+			')<span/>')
+}
+
+
+
 /**********************************************************************
 * Setup
 */
@@ -1354,7 +1422,10 @@ function setupDataBindings(viewer){
 
 
 		.on('focusingImage', function(evt, image){
-			DATA.current = getImageGID($(image))
+			image = $(image)
+			DATA.current = getImageGID(image)
+
+			updateImageInfo(image)
 		})
 
 
@@ -1371,6 +1442,8 @@ function setupDataBindings(viewer){
 					IMAGES_UPDATED.push(gid)
 				}
 			})
+
+			updateImageInfo(image)
 		})
 
 
@@ -1387,6 +1460,8 @@ function setupDataBindings(viewer){
 			} else {
 				MARKED.splice(MARKED.indexOf(gid), 1)
 			}
+
+			updateImageInfo(img)
 		})
 		.on('removeingRibbonMarks', function(evt, ribbon){
 			$.each(DATA.ribbons[getRibbonIndex(ribbon)], function(_, e){

ui/index.html

@@ -310,6 +310,45 @@ body {
 	-ms-transform: rotate(90deg);
 	transform: rotate(90deg);
 }
+.overlay-info {
+	display: none;
+	position: absolute;
+
+	bottom: 0px;
+	left: 0px;
+	width: 100%;
+	padding: 2px;
+	padding-left: 10px;
+	padding-right: 10px;
+	box-sizing: border-box;
+
+	background: black;
+	color: white;
+
+	opacity: 0.6;
+
+	-moz-user-select: auto;
+	-webkit-user-select: auto;
+	-o-user-select: auto;
+	-ms-user-select: auto;
+	user-select: auto;
+}
+.overlay-info .float-right {
+	float: right;
+}
+.overlay-info .secondary {
+	font-style: italic;
+	font-size: small;
+	color: silver;
+}
+.overlay-info::selection,
+.overlay-info ::selection {
+	color: white;
+	background: red;
+}
+.image-info-visible.viewer .overlay-info {
+	display: block;
+}
 
 
 
@@ -476,6 +515,20 @@ body {
 	padding-left: 0px;
 }
 
+
+/* utility */
+.expanding-text .hidden {
+	display: none;
+}
+.expanding-text:hover .shown {
+	display: none;
+}
+.expanding-text:hover .hidden {
+	display: inline;
+}
+
+
+
 </style>
 
 

ui/keybindings.js

@@ -66,7 +66,8 @@ var KEYBOARD_CONFIG = {
 				function(){ 
 					toggleMarkedOnlyView('off') 
 					return false
-				})
+				}),
+		Q: 'Esc',
 	},
 
 
@@ -283,8 +284,11 @@ var KEYBOARD_CONFIG = {
 					}),
 			},
 		I: {
+				// XXX group this with other info stuff into a single on/off toggle...
+				default: doc('Toggle image info visibility (on hover)',
+					function(){ toggleImageInfo() }),
 				// XXX STUB -- replace with a real info window...
-				default: doc('Show current image info',
+				shift: doc('Show current image info',
 					function(){
 						var gid = getImageGID(getImage())
 						var r = getRibbonIndex(getRibbon())
@@ -303,9 +307,6 @@ 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/lib/jli.js

@@ -597,6 +597,19 @@ var cancelAnimationFrame = (window.cancelRequestAnimationFrame
 		|| clearTimeout)
 
 
+Date.prototype.toShortDate = function(){
+	var y = this.getFullYear()
+	var M = this.getMonth()+1
+	M = M < 10 ? '0'+M : M
+	var D = this.getDate()
+	D = D < 10 ? '0'+D : D
+	var H = this.getHours()
+	H = H < 10 ? '0'+H : H
+	var m = this.getMinutes()
+	m = m < 10 ? '0'+m : m
+
+	return ''+y+'-'+M+'-'+D+' '+H+':'+m
+}
 Date.prototype.getTimeStamp = function(){
 	var y = this.getFullYear()
 	var M = this.getMonth()+1

ui/modes.js

@@ -21,6 +21,7 @@ var toggleSingleImageMode = createCSSClassToggler('.viewer',
 
 				// save things...
 				SETTINGS['screen-images-ribbon-mode'] = w
+				SETTINGS['image-info-ribbon-mode'] = toggleImageInfo('?')
 
 				// load things...
 				w = SETTINGS['screen-images-single-image-mode']
@@ -31,6 +32,7 @@ var toggleSingleImageMode = createCSSClassToggler('.viewer',
 				// set stuff...
 				toggleImageProportions(p)
 				fitNImages(w)
+				toggleImageInfo('off')
 
 			// ribbon mode...
 			} else {
@@ -46,6 +48,9 @@ var toggleSingleImageMode = createCSSClassToggler('.viewer',
 
 				toggleImageProportions('square')
 				fitNImages(w)
+				var i = SETTINGS['image-info-ribbon-mode'] == 'on' ? 'on' : 'off'
+				toggleImageInfo(i)
+				SETTINGS['image-info-ribbon-mode'] = i
 			}
 		})