0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

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

Browse source
This commit is contained in:
rolux 2014-01-17 13:48:19 +00:00
parent c29e0c0eaf
commit db05e4b403
1 changed files with 10 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
source/Ox.UI/js/Image/ImageViewer.js
View file

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