mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 19:30:07 +00:00
more work on image info display...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
9b215d7d03
commit
f0c1c816e9
38
ui/base.js
38
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 = $('<div/>')
|
||||
//.click(function(){ hideInfo(info) })
|
||||
.appendTo(viewer)
|
||||
}
|
||||
|
||||
info
|
||||
//.attr({
|
||||
//class: '',
|
||||
//style: '',
|
||||
//})
|
||||
.addClass('overlay-info')
|
||||
.appendTo(target)
|
||||
if(elem.length == 0){
|
||||
elem = $('<div/>')
|
||||
}
|
||||
|
||||
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){
|
||||
|
||||
76
ui/data.js
76
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...
|
||||
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 = $('<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){
|
||||
|
||||
@ -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()
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user