mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-30 19:00:09 +00:00
re-did image/ribbon structure to prevent filters affecting anything but the image (still not done for marks)...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
450631f1a9
commit
d6168e60a5
@ -32,6 +32,29 @@
|
||||
border: solid red 5px;
|
||||
}
|
||||
|
||||
.ribbon {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
min-width: 0px;
|
||||
overflow: visible;
|
||||
white-space: nowrap;
|
||||
font-size: 0;
|
||||
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.ribbon:empty {
|
||||
display: none;
|
||||
}
|
||||
.ribbon:first-child {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.ribbon:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
|
||||
@ -78,11 +101,15 @@
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="image" style="background-image: url(image.jpg)"></div>
|
||||
<div class="current image" style="background-image: url(image.jpg)"></div>
|
||||
The current structure...
|
||||
<div>
|
||||
<div class="image" style="background-image: url(image.jpg)"></div>
|
||||
<div class="current image" style="background-image: url(image.jpg)"></div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
Image bg transparent while the ribbon's bg is black...<br>
|
||||
<div class="ribbon">
|
||||
<div class="image2" style="background-image: url(image.jpg)"></div>
|
||||
<div class="current image2" style="background-image: url(image.jpg)"></div>
|
||||
|
||||
@ -193,6 +193,7 @@ $(function(){
|
||||
updateImages()
|
||||
|
||||
SCROLLER.start()
|
||||
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
17
ui/info.js
17
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){
|
||||
'<span class="hidden"><b>' + date.toString() + '</b></span>'+
|
||||
'</span>'+
|
||||
'',
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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... */
|
||||
|
||||
@ -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... */
|
||||
|
||||
@ -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...
|
||||
|
||||
28
ui/ui.js
28
ui/ui.js
@ -85,6 +85,34 @@ function showCursor(elem){
|
||||
}
|
||||
*/
|
||||
|
||||
function showCurrentMarker(){
|
||||
return $('<div/>')
|
||||
.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 = {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user