Ox.ImageViewer: add options.area, that.getArea and that.setArea
This commit is contained in:
parent
1554d19f91
commit
c946fa876e
1 changed files with 65 additions and 0 deletions
|
@ -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;
|
||||
|
||||
};
|
Loading…
Reference in a new issue