From c946fa876e1d8f586eb645eb0b33b726a758c20f Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Thu, 5 Feb 2015 07:18:25 +0000
Subject: [PATCH] Ox.ImageViewer: add options.area, that.getArea and
 that.setArea

---
 source/UI/js/Image/ImageViewer.js | 65 +++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)

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 <f> Image Viewer
     options <o> 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 <n|0> Number of pixels to scroll/zoom beyond min/max
         height <n|384> 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