From f0c1c816e9be2ed524ea6918057e046dec091f3e Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Thu, 30 May 2013 15:04:16 +0400 Subject: [PATCH] more work on image info display... Signed-off-by: Alex A. Naanou --- ui/base.js | 38 +++++++++----------------- ui/data.js | 76 +++++++++++++++++++++++++++++++-------------------- ui/index.html | 31 ++++++++++++++------- 3 files changed, 81 insertions(+), 64 deletions(-) diff --git a/ui/base.js b/ui/base.js index 5839690c..459397e9 100755 --- a/ui/base.js +++ b/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')){ - info = target - - } else if(info == null) { - var info = $('.overlay-info') - if(force_new || info.length == 0){ - info = $('
') - //.click(function(){ hideInfo(info) }) - .appendTo(viewer) - } - - info - //.attr({ - //class: '', - //style: '', - //}) - .addClass('overlay-info') - .appendTo(target) + if(elem.length == 0){ + elem = $('
') } - info + elem + .addClass('overlay-info') .html('') - if(typeof(elem) == typeof('abc')){ - info.html(elem) + if(typeof(data) == typeof('abc')){ + 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){ diff --git a/ui/data.js b/ui/data.js index e95a65ba..d7f876ca 100755 --- a/ui/data.js +++ b/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 = $('
') - .addClass('info') - .appendTo(image) - } - info.html( - 'Image: ' + name + - '
Order: ' + DATA.order.indexOf(gid) + - '
GID: '+ gid + - (window.DEBUG ? '
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... -function updateImageInfo(image){ +// XXX do we need a full rewrite here, or will it be better to just fill +// 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 = $('
') + } - return updateInfo( + return updateInfo(elem, // path... - ''+ + ''+ ''+ data.path.split('/').pop() + ''+ @@ -1252,7 +1239,7 @@ function updateImageInfo(image){ ' '+ // metadata... - ''+ + ''+ meta + ' GID:'+ // XXX do we need to display a short gid? //gid + @@ -1267,18 +1254,49 @@ function updateImageInfo(image){ ' '+ // date... - ''+ + ''+ 'TS:' + date.toShortDate() + ''+ ''+ ''+ // position... - '('+ + '('+ (DATA.ribbons[r].indexOf(gid)+1) +'/'+ DATA.ribbons[r].length + ')') } +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 = $('
') + } + + return updateInfo(elem, + // name... + data.path.split('/').pop() +'
'+ + + // date... + ''+ + //date.toShortDate() + + '' + date.toShortDate() + ''+ + ''+ + ''+ + '', + 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){ diff --git a/ui/index.html b/ui/index.html index 9b2e19c8..8700b7ae 100755 --- a/ui/index.html +++ b/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()