mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 10:20:08 +00:00
minor tweaking...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
577fae1a28
commit
bd7ff349f6
26
ui/base.js
26
ui/base.js
@ -864,6 +864,9 @@ var _ccw = {
|
||||
270: 180,
|
||||
}
|
||||
|
||||
// NOTE: this works only on loaded images, if something more global is
|
||||
// needed, then one should write a GID based version (data.js)
|
||||
// XXX do we need a GID based version?
|
||||
function rotateImage(direction, image){
|
||||
var r_table = direction == 'left' ? _cw : _ccw
|
||||
image = image == null ? getImage() : $(image)
|
||||
@ -920,6 +923,10 @@ function setImageFlipState(image, state){
|
||||
// direction can be:
|
||||
// - 'vertical'
|
||||
// - 'horizontal'
|
||||
//
|
||||
// NOTE: this works only on loaded images, if something more global is
|
||||
// needed, then one should write a GID based version (data.js)
|
||||
// XXX do we need a GID based version?
|
||||
function flipImage(direction, image){
|
||||
image = image == null ? getImage() : $(image)
|
||||
image.each(function(i, e){
|
||||
@ -950,6 +957,25 @@ function flipHorizontal(image){
|
||||
|
||||
|
||||
|
||||
/***************************************************** Image reset ***/
|
||||
|
||||
// NOTE: this works only on loaded images, if something more global is
|
||||
// needed, then one should write a GID based version (data.js)
|
||||
// XXX do we need a GID based version?
|
||||
function resetToOriginalImage(image){
|
||||
image = image == null ? getImage() : $(image)
|
||||
|
||||
image.each(function(i, e){
|
||||
$(e).removeAttr('flipped orientation')
|
||||
})
|
||||
|
||||
$('.viewer').trigger('resetToOriginalImage' + direction.capitalize(), [image])
|
||||
|
||||
return image
|
||||
}
|
||||
|
||||
|
||||
|
||||
/********************************************************* Zooming ***/
|
||||
|
||||
function fitNImages(n){
|
||||
|
||||
@ -764,9 +764,7 @@ function updateImage(image, gid, size){
|
||||
})
|
||||
|
||||
// flip...
|
||||
if(img_data.flipped != null){
|
||||
setImageFlipState(image, img_data.flipped)
|
||||
}
|
||||
setImageFlipState(image, img_data.flipped == null ? [] : img_data.flipped)
|
||||
|
||||
// marks...
|
||||
if(MARKED.indexOf(gid) != -1){
|
||||
|
||||
@ -2,6 +2,16 @@
|
||||
*
|
||||
**********************************************************************/
|
||||
/********************************************************** Mixins ***/
|
||||
/********************************************************* utility ***/
|
||||
.expanding-text .hidden {
|
||||
display: none;
|
||||
}
|
||||
.expanding-text:hover .shown {
|
||||
display: none;
|
||||
}
|
||||
.expanding-text:hover .hidden {
|
||||
display: inline;
|
||||
}
|
||||
/*********************************************************************/
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
@ -303,41 +313,6 @@ body {
|
||||
right: -15px;
|
||||
}
|
||||
*/
|
||||
/*.marks-visible.viewer:not(.single-image-mode):after {*/
|
||||
/*
|
||||
.marks-visible.viewer:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
font-size: 0pt;
|
||||
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
border: solid 2px blue;
|
||||
border-radius: 50%;
|
||||
background: blue;
|
||||
}
|
||||
.marked-only-view.viewer:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
font-size: 0pt;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
border: solid 2px blue;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
}
|
||||
.marked-only-view.marks-visible.viewer:after {
|
||||
background: blue;
|
||||
}
|
||||
*/
|
||||
/* XXX should we use opacity??? */
|
||||
.marked-only-view.viewer:not(.marks-visible) .image:not(.marked) {
|
||||
opacity: 0.3;
|
||||
@ -567,9 +542,6 @@ body {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
/*overflow: hidden;*/
|
||||
|
||||
background: black;
|
||||
color: white;
|
||||
opacity: 0.6;
|
||||
@ -667,6 +639,7 @@ body {
|
||||
height: 20px;
|
||||
width: auto;
|
||||
font-size: small;
|
||||
vertical-align: center;
|
||||
}
|
||||
.global-mode-indicators > * {
|
||||
margin-left: 10px;
|
||||
@ -698,6 +671,7 @@ body {
|
||||
height: 20px;
|
||||
width: auto;
|
||||
font-size: small;
|
||||
vertical-align: center;
|
||||
}
|
||||
.context-mode-indicators > * {
|
||||
margin-left: 10px;
|
||||
@ -715,6 +689,8 @@ body {
|
||||
.context-mode-indicators .current-image-marked {
|
||||
display: none;
|
||||
color: blue;
|
||||
height: 20px;
|
||||
vertical-align: center;
|
||||
}
|
||||
.global-mode-indicators .marked-only-visible .shown,
|
||||
.global-mode-indicators .marks-visible .shown,
|
||||
@ -725,13 +701,15 @@ body {
|
||||
.global-mode-indicators .marks-visible:after,
|
||||
.context-mode-indicators .current-image-marked:after {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
background-color: blue;
|
||||
border: solid 2px blue;
|
||||
margin-left: 5px;
|
||||
margin-top: 3px;
|
||||
top: 50%;
|
||||
}
|
||||
.marks-visible.viewer .global-mode-indicators .marks-visible {
|
||||
display: inline-block;
|
||||
@ -844,15 +822,5 @@ body {
|
||||
padding-right: 0px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
/********************************************************* utility ***/
|
||||
.expanding-text .hidden {
|
||||
display: none;
|
||||
}
|
||||
.expanding-text:hover .shown {
|
||||
display: none;
|
||||
}
|
||||
.expanding-text:hover .hidden {
|
||||
display: inline;
|
||||
}
|
||||
/**********************************************************************
|
||||
* vim:set spell ft=css : */
|
||||
|
||||
@ -39,6 +39,18 @@
|
||||
|
||||
|
||||
|
||||
/********************************************************* utility ***/
|
||||
.expanding-text .hidden {
|
||||
display: none;
|
||||
}
|
||||
.expanding-text:hover .shown {
|
||||
display: none;
|
||||
}
|
||||
.expanding-text:hover .hidden {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
|
||||
@ -311,42 +323,6 @@ body {
|
||||
*/
|
||||
|
||||
|
||||
/*.marks-visible.viewer:not(.single-image-mode):after {*/
|
||||
/*
|
||||
.marks-visible.viewer:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
font-size: 0pt;
|
||||
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
border: solid 2px blue;
|
||||
border-radius: 50%;
|
||||
background: blue;
|
||||
}
|
||||
.marked-only-view.viewer:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
font-size: 0pt;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
border: solid 2px blue;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
}
|
||||
.marked-only-view.marks-visible.viewer:after {
|
||||
background: blue;
|
||||
}
|
||||
*/
|
||||
|
||||
/* XXX should we use opacity??? */
|
||||
.marked-only-view.viewer:not(.marks-visible) .image:not(.marked) {
|
||||
opacity: 0.3;
|
||||
@ -608,6 +584,7 @@ body {
|
||||
width: auto;
|
||||
|
||||
font-size: small;
|
||||
vertical-align: center;
|
||||
}
|
||||
.global-mode-indicators>* {
|
||||
margin-left: 10px;
|
||||
@ -641,6 +618,7 @@ body {
|
||||
width: auto;
|
||||
|
||||
font-size: small;
|
||||
vertical-align: center;
|
||||
}
|
||||
.context-mode-indicators>* {
|
||||
margin-left: 10px;
|
||||
@ -660,6 +638,8 @@ body {
|
||||
.context-mode-indicators .current-image-marked {
|
||||
display: none;
|
||||
color: blue;
|
||||
height: 20px;
|
||||
vertical-align: center;
|
||||
}
|
||||
.global-mode-indicators .marked-only-visible .shown,
|
||||
.global-mode-indicators .marks-visible .shown,
|
||||
@ -670,13 +650,16 @@ body {
|
||||
.global-mode-indicators .marks-visible:after,
|
||||
.context-mode-indicators .current-image-marked:after {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
background-color: blue;
|
||||
border: solid 2px blue;
|
||||
margin-left: 5px;
|
||||
|
||||
margin-top: 3px;
|
||||
top: 50%;
|
||||
}
|
||||
.marks-visible.viewer .global-mode-indicators .marks-visible {
|
||||
display: inline-block;
|
||||
@ -806,19 +789,5 @@ body {
|
||||
|
||||
|
||||
|
||||
/********************************************************* utility ***/
|
||||
.expanding-text .hidden {
|
||||
display: none;
|
||||
}
|
||||
.expanding-text:hover .shown {
|
||||
display: none;
|
||||
}
|
||||
.expanding-text:hover .hidden {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/**********************************************************************
|
||||
* vim:set spell ft=css : */
|
||||
|
||||
15
ui/setup.js
15
ui/setup.js
@ -192,14 +192,25 @@ function setupDataBindings(viewer){
|
||||
var gid = getImageGID(img)
|
||||
var flip = getImageFlipState(img)
|
||||
|
||||
// change the image orientation status and add to
|
||||
// updated list...
|
||||
IMAGES[gid].flipped = flip
|
||||
if(IMAGES_UPDATED.indexOf(gid) == -1){
|
||||
IMAGES_UPDATED.push(gid)
|
||||
}
|
||||
})
|
||||
})
|
||||
.on('resetToOriginalImage', function(evt, image){
|
||||
$(image).each(function(i, e){
|
||||
var img = $(this)
|
||||
var gid = getImageGID(img)
|
||||
|
||||
IMAGES[gid].flipped = null
|
||||
IMAGES[gid].orientation = 0
|
||||
|
||||
if(IMAGES_UPDATED.indexOf(gid) == -1){
|
||||
IMAGES_UPDATED.push(gid)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
// marks...
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user