ImageViewer: show overview only when needed (part 2, better animation)

This commit is contained in:
rolux 2014-01-17 13:48:19 +00:00
parent c29e0c0eaf
commit db05e4b403

View file

@ -227,6 +227,7 @@ Ox.ImageViewer = function(options, self) {
height: self.overviewHeight + 'px',
width: self.overviewWidth + 'px'
})
.hide()
.on({
mouseenter: function() {
self.mouseIsInInterface = true;
@ -259,7 +260,6 @@ Ox.ImageViewer = function(options, self) {
});
setSize();
setCenterAndZoom();
function getAreaCSS(area) {
return area == 'bottom' ? {
@ -537,8 +537,9 @@ Ox.ImageViewer = function(options, self) {
}
function updateInterface() {
var isFitZoom = self.zoom == self.fitZoom;
self.$scaleButton[
self.zoom == self.fitZoom ? 'disableButton' : 'enableButton'
isFitZoom ? 'disableButton' : 'enableButton'
]('fit');
self.$scaleButton[
self.zoom == self.fillZoom
@ -547,7 +548,7 @@ Ox.ImageViewer = function(options, self) {
? 'disableButton' : 'enableButton'
]('fill');
self.$zoomButton[
self.zoom == self.fitZoom ? 'disableButton' : 'enableButton'
isFitZoom ? 'disableButton' : 'enableButton'
]('out');
self.$zoomButton[
self.zoom == 1 ? 'disableButton' : 'enableButton'
@ -555,9 +556,12 @@ Ox.ImageViewer = function(options, self) {
self.$zoomButton[
self.zoom == self.maxZoom ? 'disableButton' : 'enableButton'
]('in');
self.$overview[
self.zoom == self.fitZoom ? 'hide' : 'show'
]();
!isFitZoom && self.$overview.show();
self.$overview.stop().animate({
opacity: isFitZoom ? 0 : 1
}, 250, function() {
isFitZoom && self.$overview.hide();
});
}
function updateSize() {