diff --git a/ui/index.html b/ui/index.html
index 826900d3..cdb9caac 100755
--- a/ui/index.html
+++ b/ui/index.html
@@ -193,6 +193,7 @@ $(function(){
updateImages()
SCROLLER.start()
+
})
})
diff --git a/ui/info.js b/ui/info.js
index 62b15713..ff5198d3 100755
--- a/ui/info.js
+++ b/ui/info.js
@@ -105,9 +105,10 @@ function updateGlobalImageInfo(image){
}
-function updateInlineImageInfo(image){
+function updateInlineImageInfo(image, target){
image = image == null ? getImage() : $(image)
image = image.length == 0 ? getImage() : image
+ target = target == null ? image : target
var elem = $('.inline-image-info')
if(elem.length == 0){
@@ -139,15 +140,21 @@ function updateInlineImageInfo(image){
'
' + date.toString() + ''+
''+
'',
- image)
+ target)
}
function inlineImageInfoHoverHandler(evt){
- var img = $(evt.target).closest('.image')
+ if($(evt.target).hasClass('current-marker')){
+ var img = getImage()
+ var target = $('.current-marker')
+ } else {
+ var img = $(evt.target).closest('.image')
+ var target = img
+ }
if(img.length > 0){
- if(img.find('.inline-image-info:visible').length == 0){
- updateInlineImageInfo(img)
+ if(target.find('.inline-image-info:visible').length == 0){
+ updateInlineImageInfo(img, target)
}
}
}
diff --git a/ui/layout.css b/ui/layout.css
index 9dc9ea33..5e0de524 100644
--- a/ui/layout.css
+++ b/ui/layout.css
@@ -242,13 +242,21 @@ button:hover {
.ribbon {
position: relative;
display: block;
+ /* XXX BUG: setting this will mess up new ribbon creation....
+ display: inline-block;*/
+
height: auto;
min-width: 0px;
overflow: visible;
white-space: nowrap;
font-size: 0;
- margin-top: 20px;
- margin-bottom: 20px;
+ float: left;
+ clear: both;
+ /* XXX not still sure about this... */
+
+ background: black;
+ margin-top: 10px;
+ margin-bottom: 10px;
}
.ribbon:empty {
display: none;
@@ -261,6 +269,7 @@ button:hover {
}
/*********************************************************** Image ***/
.marker,
+.current-marker,
.image {
position: relative;
display: inline-block;
@@ -273,18 +282,20 @@ button:hover {
box-sizing: border-box;
color: white;
text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em;
- background: no-repeat 50% #000000;
+ background: no-repeat 50% transparent;
background-size: contain;
- /* XXX do we need this? */
-
- border: solid black 5px;
+ border: solid 5px transparent;
}
+/*
.current.image {
- background: no-repeat 50% #000000;
- background-size: contain;
- /* XXX remove this... */
-
- border: solid red 5px;
+ border: solid 5px red;
+}
+*/
+.current-marker {
+ position: absolute;
+ border: solid 5px red;
+ background: none;
+ z-index: 100;
}
.marker {
width: 50px;
@@ -583,29 +594,33 @@ button:hover {
opacity: 0.3;
}
/****************************************************** Image info ***/
-.image .inline-image-info {
+.inline-image-info {
display: none;
position: absolute;
bottom: 0px;
width: 100%;
background: black;
opacity: 0.7;
+ overflow: hidden;
+ white-space: nowrap;
}
-.image .inline-image-info:hover {
+.inline-image-info:hover {
-moz-user-select: auto;
-webkit-user-select: auto;
-o-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
-.image .inline-image-info::selection {
+.inline-image-info::selection {
color: white;
background: red;
}
.image-info-visible.viewer .global-image-info,
+.image-info-visible.viewer .current-marker:hover .inline-image-info,
.image-info-visible.viewer .image:hover .inline-image-info {
display: block;
}
+.single-image-mode.viewer .current-marker:hover .inline-image-info,
.single-image-mode.viewer .image:hover .inline-image-info {
display: none;
}
@@ -1053,6 +1068,12 @@ button:hover {
opacity: 0.8;
}
/********************************************** Mode: single image ***/
+.single-image-mode.viewer .ribbon {
+ background-color: transparent;
+}
+.single-image-mode.viewer .current-marker {
+ display: none;
+}
.single-image-mode.viewer .image {
background-color: transparent;
/* NOTE: need to keep a distance from screen borders... */
diff --git a/ui/layout.less b/ui/layout.less
index 3a77e19b..9348b073 100755
--- a/ui/layout.less
+++ b/ui/layout.less
@@ -343,14 +343,22 @@ button:hover {
.ribbon {
position: relative;
display: block;
+ /* XXX BUG: setting this will mess up new ribbon creation....
+ display: inline-block;*/
height: auto;
min-width: 0px;
overflow: visible;
white-space: nowrap;
font-size: 0;
- margin-top: 20px;
- margin-bottom: 20px;
+ float: left;
+ clear: both;
+
+ /* XXX not still sure about this... */
+ background: black;
+
+ margin-top: 10px;
+ margin-bottom: 10px;
}
.ribbon:empty {
display: none;
@@ -366,6 +374,7 @@ button:hover {
/*********************************************************** Image ***/
.marker,
+.current-marker,
.image {
position: relative;
display: inline-block;
@@ -381,17 +390,21 @@ button:hover {
text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em;
- background: no-repeat 50% black;
+ background: no-repeat 50% transparent;
background-size: contain;
- /* XXX do we need this? */
- border: solid black 5px;
+ border: solid 5px transparent;
}
+/*
.current.image {
- background: no-repeat 50% black;
- background-size: contain;
+ border: solid 5px red;
+}
+*/
- /* XXX remove this... */
- border: solid red 5px;
+.current-marker {
+ position: absolute;
+ border: solid 5px red;
+ background: none;
+ z-index: 100;
}
.marker {
@@ -653,7 +666,7 @@ button:hover {
/****************************************************** Image info ***/
-.image .inline-image-info {
+.inline-image-info {
display: none;
position: absolute;
@@ -661,18 +674,23 @@ button:hover {
width: 100%;
background: black;
opacity: 0.7;
+
+ overflow: hidden;
+ white-space: nowrap;
}
-.image .inline-image-info:hover {
+.inline-image-info:hover {
.user-select(auto);
}
-.image .inline-image-info::selection {
+.inline-image-info::selection {
color: white;
background: red;
}
.image-info-visible.viewer .global-image-info,
+.image-info-visible.viewer .current-marker:hover .inline-image-info,
.image-info-visible.viewer .image:hover .inline-image-info {
display: block;
}
+.single-image-mode.viewer .current-marker:hover .inline-image-info,
.single-image-mode.viewer .image:hover .inline-image-info {
display: none;
}
@@ -1079,6 +1097,12 @@ button:hover {
/********************************************** Mode: single image ***/
+.single-image-mode.viewer .ribbon {
+ background-color: transparent;
+}
+.single-image-mode.viewer .current-marker {
+ display: none;
+}
.single-image-mode.viewer .image {
background-color: transparent;
/* NOTE: need to keep a distance from screen borders... */
diff --git a/ui/setup.js b/ui/setup.js
index 40fe8abb..adbf02b2 100755
--- a/ui/setup.js
+++ b/ui/setup.js
@@ -74,6 +74,15 @@ function setupDataBindings(viewer){
loadDirectoryDialog()
}
})
+
+ .on([
+ 'focusingImage',
+ 'fittingImages'
+ ].join(' '),
+ function(){
+ updateCurrentMarker()
+ })
+
// XXX need to maintain the correct number of images per ribbon
// per zoom setting -- things get really odd when a ribbon
// is smaller than it should be...
diff --git a/ui/ui.js b/ui/ui.js
index 56031453..432d9293 100755
--- a/ui/ui.js
+++ b/ui/ui.js
@@ -85,6 +85,34 @@ function showCursor(elem){
}
*/
+function showCurrentMarker(){
+ return $('
')
+ .addClass('current-marker')
+ .css({
+ opacity: '0',
+ top: '0px',
+ left: '0px',
+ })
+ .appendTo($('.ribbon-set'))
+ .animate({
+ 'opacity': 1
+ }, 500)
+ .mouseover(function(){
+ $('.current.image')
+ })
+}
+
+function updateCurrentMarker(){
+ var scale = getElementScale($('.ribbon-set'))
+ var marker = $('.current-marker')
+ marker = marker.length == 0 ? showCurrentMarker() : marker
+ var d = getRelativeVisualPosition(marker, $('.current.image'))
+ return marker.css({
+ top: parseFloat(marker.css('top')) + d.top/scale,
+ left: parseFloat(marker.css('left')) + d.left/scale,
+ })
+}
+
function flashIndicator(direction){
var cls = {