diff --git a/ui/base.js b/ui/base.js index 9f2d1185..730bf38c 100755 --- a/ui/base.js +++ b/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){ diff --git a/ui/data.js b/ui/data.js index acb35c9e..cbd730fa 100755 --- a/ui/data.js +++ b/ui/data.js @@ -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){ diff --git a/ui/layout.css b/ui/layout.css index 34d50f5f..c3ea45e7 100644 --- a/ui/layout.css +++ b/ui/layout.css @@ -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 : */ diff --git a/ui/layout.less b/ui/layout.less index 52b91c99..544fcd16 100755 --- a/ui/layout.less +++ b/ui/layout.less @@ -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 : */ diff --git a/ui/setup.js b/ui/setup.js index 228dcc5d..ad1ee905 100755 --- a/ui/setup.js +++ b/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...