From 7da0ab49dcdbedd512489d79e3543565477aa741 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Thu, 30 May 2013 07:29:07 +0400 Subject: [PATCH] added image info bar at bottom (I)... Signed-off-by: Alex A. Naanou --- ui/base.js | 55 ++++++++++++++++++++++++++++++++ ui/data.js | 81 +++++++++++++++++++++++++++++++++++++++++++++-- ui/index.html | 53 +++++++++++++++++++++++++++++++ ui/keybindings.js | 11 ++++--- ui/lib/jli.js | 13 ++++++++ ui/modes.js | 5 +++ 6 files changed, 210 insertions(+), 8 deletions(-) diff --git a/ui/base.js b/ui/base.js index 99a2e8a1..5839690c 100755 --- a/ui/base.js +++ b/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 = $('
') + //.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 diff --git a/ui/data.js b/ui/data.js index d95966f1..b4cd32cd 100755 --- a/ui/data.js +++ b/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( + 'M'+ + '') : '' + + var orientation = data.orientation + orientation = orientation == null ? 0 : orientation + orientation != 0 ? meta.push( + 'R'+ + '') : '' + + + meta = meta.join(', ') + meta = meta != '' ? '( '+ meta +' )' : '' + + return updateInfo( + // path... + ''+ + ''+ + data.path.split('/').pop() + + ''+ + ''+ + ' '+ + + // metadata... + ''+ + meta + ' GID:'+ + // XXX do we need to display a short gid? + //gid + + ''+ + gid.slice(gid.length-6) + + ''+ + ''+ + ' '+ + + // date... + ''+ + 'TS:' + date.toShortDate() + ''+ + ''+ + ''+ + + // position... + '('+ + (DATA.ribbons[r].indexOf(gid)+1) +'/'+ DATA.ribbons[r].length + + ')') +} + + + /********************************************************************** * 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){ diff --git a/ui/index.html b/ui/index.html index 5d81bd48..9b2e19c8 100755 --- a/ui/index.html +++ b/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; +} + + + diff --git a/ui/keybindings.js b/ui/keybindings.js index 425cbabe..1f29894b 100755 --- a/ui/keybindings.js +++ b/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() }), }, diff --git a/ui/lib/jli.js b/ui/lib/jli.js index 7b1e4c06..5f5645e5 100755 --- a/ui/lib/jli.js +++ b/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 diff --git a/ui/modes.js b/ui/modes.js index 37c3973e..64e17c08 100755 --- a/ui/modes.js +++ b/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 } })