flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-31 19:30:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

re-did image/ribbon structure to prevent filters affecting anything but the image (still not done for marks)...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-12-02 08:50:43 +04:00
parent 450631f1a9
commit d6168e60a5
7 changed files with 150 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ui/experiments/seporate-image-and-background.html
View File

@ -32,6 +32,29 @@
border: solid red 5px; 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> </style>
<body> <body>
<div class="image" style="background-image: url(image.jpg)"></div> The current structure...
<div class="current image" style="background-image: url(image.jpg)"></div> <div>
<div class="image" style="background-image: url(image.jpg)"></div>
<div class="current image" style="background-image: url(image.jpg)"></div>
</div>
<hr> <hr>
Image bg transparent while the ribbon's bg is black...<br>
<div class="ribbon"> <div class="ribbon">
<div class="image2" style="background-image: url(image.jpg)"></div> <div class="image2" style="background-image: url(image.jpg)"></div>
<div class="current image2" style="background-image: url(image.jpg)"></div> <div class="current image2" style="background-image: url(image.jpg)"></div>

1
ui/index.html
View File

@ -193,6 +193,7 @@ $(function(){
updateImages() updateImages()
SCROLLER.start() SCROLLER.start()
}) })
}) })

17
ui/info.js
View File

@ -105,9 +105,10 @@ function updateGlobalImageInfo(image){
} }
function updateInlineImageInfo(image){ function updateInlineImageInfo(image, target){
image = image == null ? getImage() : $(image) image = image == null ? getImage() : $(image)
image = image.length == 0 ? getImage() : image image = image.length == 0 ? getImage() : image
target = target == null ? image : target
var elem = $('.inline-image-info') var elem = $('.inline-image-info')
if(elem.length == 0){ if(elem.length == 0){
@ -139,15 +140,21 @@ function updateInlineImageInfo(image){
'<span class="hidden"><b>' + date.toString() + '</b></span>'+ '<span class="hidden"><b>' + date.toString() + '</b></span>'+
'</span>'+ '</span>'+
'', '',
image) target)
} }
function inlineImageInfoHoverHandler(evt){ 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.length > 0){
if(img.find('.inline-image-info:visible').length == 0){ if(target.find('.inline-image-info:visible').length == 0){
updateInlineImageInfo(img) updateInlineImageInfo(img, target)
} }
} }
} }

49
ui/layout.css
View File

@ -242,13 +242,21 @@ button:hover {
.ribbon { .ribbon {
position: relative; position: relative;
display: block; display: block;
/* XXX BUG: setting this will mess up new ribbon creation....
display: inline-block;*/
height: auto; height: auto;
min-width: 0px; min-width: 0px;
overflow: visible; overflow: visible;
white-space: nowrap; white-space: nowrap;
font-size: 0; font-size: 0;
margin-top: 20px; float: left;
margin-bottom: 20px; clear: both;
/* XXX not still sure about this... */
background: black;
margin-top: 10px;
margin-bottom: 10px;
} }
.ribbon:empty { .ribbon:empty {
display: none; display: none;
@ -261,6 +269,7 @@ button:hover {
} }
/*********************************************************** Image ***/ /*********************************************************** Image ***/
.marker, .marker,
.current-marker,
.image { .image {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -273,18 +282,20 @@ button:hover {
box-sizing: border-box; box-sizing: border-box;
color: white; color: white;
text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em; 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; background-size: contain;
/* XXX do we need this? */ border: solid 5px transparent;
border: solid black 5px;
} }
/*
.current.image { .current.image {
background: no-repeat 50% #000000; border: solid 5px red;
background-size: contain; }
/* XXX remove this... */ */
.current-marker {
border: solid red 5px; position: absolute;
border: solid 5px red;
background: none;
z-index: 100;
} }
.marker { .marker {
width: 50px; width: 50px;
@ -583,29 +594,33 @@ button:hover {
opacity: 0.3; opacity: 0.3;
} }
/****************************************************** Image info ***/ /****************************************************** Image info ***/
.image .inline-image-info { .inline-image-info {
display: none; display: none;
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
width: 100%; width: 100%;
background: black; background: black;
opacity: 0.7; opacity: 0.7;
overflow: hidden;
white-space: nowrap;
} }
.image .inline-image-info:hover { .inline-image-info:hover {
-moz-user-select: auto; -moz-user-select: auto;
-webkit-user-select: auto; -webkit-user-select: auto;
-o-user-select: auto; -o-user-select: auto;
-ms-user-select: auto; -ms-user-select: auto;
user-select: auto; user-select: auto;
} }
.image .inline-image-info::selection { .inline-image-info::selection {
color: white; color: white;
background: red; background: red;
} }
.image-info-visible.viewer .global-image-info, .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 { .image-info-visible.viewer .image:hover .inline-image-info {
display: block; display: block;
} }
.single-image-mode.viewer .current-marker:hover .inline-image-info,
.single-image-mode.viewer .image:hover .inline-image-info { .single-image-mode.viewer .image:hover .inline-image-info {
display: none; display: none;
} }
@ -1053,6 +1068,12 @@ button:hover {
opacity: 0.8; opacity: 0.8;
} }
/********************************************** Mode: single image ***/ /********************************************** Mode: single image ***/
.single-image-mode.viewer .ribbon {
background-color: transparent;
}
.single-image-mode.viewer .current-marker {
display: none;
}
.single-image-mode.viewer .image { .single-image-mode.viewer .image {
background-color: transparent; background-color: transparent;
/* NOTE: need to keep a distance from screen borders... */ /* NOTE: need to keep a distance from screen borders... */

48
ui/layout.less
View File

@ -343,14 +343,22 @@ button:hover {
.ribbon { .ribbon {
position: relative; position: relative;
display: block; display: block;
/* XXX BUG: setting this will mess up new ribbon creation....
display: inline-block;*/
height: auto; height: auto;
min-width: 0px; min-width: 0px;
overflow: visible; overflow: visible;
white-space: nowrap; white-space: nowrap;
font-size: 0; font-size: 0;
margin-top: 20px; float: left;
margin-bottom: 20px; clear: both;
/* XXX not still sure about this... */
background: black;
margin-top: 10px;
margin-bottom: 10px;
} }
.ribbon:empty { .ribbon:empty {
display: none; display: none;
@ -366,6 +374,7 @@ button:hover {
/*********************************************************** Image ***/ /*********************************************************** Image ***/
.marker, .marker,
.current-marker,
.image { .image {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -381,17 +390,21 @@ button:hover {
text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em; 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; background-size: contain;
/* XXX do we need this? */ border: solid 5px transparent;
border: solid black 5px;
} }
/*
.current.image { .current.image {
background: no-repeat 50% black; border: solid 5px red;
background-size: contain; }
*/
/* XXX remove this... */ .current-marker {
border: solid red 5px; position: absolute;
border: solid 5px red;
background: none;
z-index: 100;
} }
.marker { .marker {
@ -653,7 +666,7 @@ button:hover {
/****************************************************** Image info ***/ /****************************************************** Image info ***/
.image .inline-image-info { .inline-image-info {
display: none; display: none;
position: absolute; position: absolute;
@ -661,18 +674,23 @@ button:hover {
width: 100%; width: 100%;
background: black; background: black;
opacity: 0.7; opacity: 0.7;
overflow: hidden;
white-space: nowrap;
} }
.image .inline-image-info:hover { .inline-image-info:hover {
.user-select(auto); .user-select(auto);
} }
.image .inline-image-info::selection { .inline-image-info::selection {
color: white; color: white;
background: red; background: red;
} }
.image-info-visible.viewer .global-image-info, .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 { .image-info-visible.viewer .image:hover .inline-image-info {
display: block; display: block;
} }
.single-image-mode.viewer .current-marker:hover .inline-image-info,
.single-image-mode.viewer .image:hover .inline-image-info { .single-image-mode.viewer .image:hover .inline-image-info {
display: none; display: none;
} }
@ -1079,6 +1097,12 @@ button:hover {
/********************************************** Mode: single image ***/ /********************************************** Mode: single image ***/
.single-image-mode.viewer .ribbon {
background-color: transparent;
}
.single-image-mode.viewer .current-marker {
display: none;
}
.single-image-mode.viewer .image { .single-image-mode.viewer .image {
background-color: transparent; background-color: transparent;
/* NOTE: need to keep a distance from screen borders... */ /* NOTE: need to keep a distance from screen borders... */

9
ui/setup.js
View File

@ -74,6 +74,15 @@ function setupDataBindings(viewer){
loadDirectoryDialog() loadDirectoryDialog()
} }
}) })
.on([
'focusingImage',
'fittingImages'
].join(' '),
function(){
updateCurrentMarker()
})
// XXX need to maintain the correct number of images per ribbon // XXX need to maintain the correct number of images per ribbon
// per zoom setting -- things get really odd when a ribbon // per zoom setting -- things get really odd when a ribbon
// is smaller than it should be... // is smaller than it should be...

28
ui/ui.js
View File

@ -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){ function flashIndicator(direction){
var cls = { var cls = {