diff --git a/source/UI/js/Image/ImageViewer.js b/source/UI/js/Image/ImageViewer.js index 82da6444..70fe79d2 100644 --- a/source/UI/js/Image/ImageViewer.js +++ b/source/UI/js/Image/ImageViewer.js @@ -3,6 +3,7 @@ /*@ Ox.ImageViewer Image Viewer options Options + area <[n]> [x0, y0, x1, y1], if set this will override center and zoom center <[n]|s|'auto'> Center ([x, y] or 'auto') elasticity Number of pixels to scroll/zoom beyond min/max height Viewer height in px @@ -27,6 +28,7 @@ Ox.ImageViewer = function(options, self) { self = self || {}; var that = Ox.Element({}, self) .defaults({ + area: [], center: 'auto', elasticity: 0, height: 384, @@ -123,6 +125,12 @@ Ox.ImageViewer = function(options, self) { singleclick: onSingleclick }); + if (self.options.area && self.options.area.length == 4) { + var centerAndZoom = getCenterAndZoom(self.options.area); + self.options.center = centerAndZoom.center; + self.options.zoom = centerAndZoom.zoom; + } + self.imageRatio = self.options.imageWidth / self.options.imageHeight; self.overviewHeight = Math.round( self.options.overviewSize / (self.imageRatio > 1 ? self.imageRatio : 1) @@ -282,6 +290,34 @@ Ox.ImageViewer = function(options, self) { }; } + function getArea(center, zoom) { + center = Ox.clone(center); + zoom = Ox.clone(zoom); + self.viewerRatio = self.options.width / self.options.height; + self.imageIsWider = self.imageRatio > self.viewerRatio; + if (center == 'auto') { + center = [ + Math.round(self.options.imageWidth / 2), + Math.round(self.options.imageHeight / 2) + ]; + } + if (zoom == 'fit') { + zoom = self.imageIsWider + ? self.options.width / self.options.imageWidth + : self.options.height / self.options.imageHeight; + } else if (zoom == 'fill') { + zoom = self.imageIsWider + ? self.options.height / self.options.imageHeight + : self.options.width / self.options.imageWidth; + } + return [ + Math.max(center[0] - self.options.width / 2 * zoom, 0), + Math.max(center[1] - self.options.height / 2 * zoom, 0), + Math.min(center[0] + self.options.width / 2 * zoom, self.options.imageWidth), + Math.min(center[1] + self.options.height / 2 * zoom, self.options.imageHeight) + ]; + } + function getCenter(e) { var $target = $(e.target), center, offset, offsetX, offsetY; if ($target.is('.OxImage')) { @@ -297,6 +333,25 @@ Ox.ImageViewer = function(options, self) { return center; } + function getCenterAndZoom(area) { + if (!area || !area.length) { + return {center: 'auto', zoom: 'fit'}; + } + var areaWidth = area[2] - area[0], + areaHeight = area[3] - area[1], + areaRatio = areaWidth / areaHeight; + self.viewerRatio = self.options.width / self.options.height; + return { + center: [ + (area[0] + area[2]) / 2, + (area[1] + area[3]) / 2 + ], + zoom: self.viewerRatio < areaRatio + ? self.options.width / areaWidth + : self.options.height / areaHeight + }; + } + function getImageCSS() { return { left: Math.round(self.options.width / 2 - self.center[0] * self.zoom) + 'px', @@ -573,6 +628,16 @@ Ox.ImageViewer = function(options, self) { } } + that.getArea = function() { + return getArea(self.options.center, self.options.zoom); + }; + + that.setArea = function(area) { + var centerAndZoom = getCenterAndZoom(area); + that.options({center: centerAndZoom.center, zoom: centerAndZoom.zoom}); + return that; + }; + return that; }; \ No newline at end of file