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

Ox.ImageViewer: add options.area, that.getArea and that.setArea

Browse source
This commit is contained in:
rolux 2015-02-05 07:18:25 +00:00
parent 1554d19f91
commit c946fa876e
1 changed files with 65 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
source/UI/js/Image/ImageViewer.js
View file

@ -3,6 +3,7 @@
/*@ /*@
Ox.ImageViewer <f> Image Viewer Ox.ImageViewer <f> Image Viewer
options <o> Options 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') center <[n]|s|'auto'> Center ([x, y] or 'auto')
elasticity <n|0> Number of pixels to scroll/zoom beyond min/max elasticity <n|0> Number of pixels to scroll/zoom beyond min/max
height <n|384> Viewer height in px height <n|384> Viewer height in px
@ -27,6 +28,7 @@ Ox.ImageViewer = function(options, self) {
self = self || {}; self = self || {};
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
area: [],
center: 'auto', center: 'auto',
elasticity: 0, elasticity: 0,
height: 384, height: 384,
@ -123,6 +125,12 @@ Ox.ImageViewer = function(options, self) {
singleclick: onSingleclick 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.imageRatio = self.options.imageWidth / self.options.imageHeight;
self.overviewHeight = Math.round( self.overviewHeight = Math.round(
self.options.overviewSize / (self.imageRatio > 1 ? self.imageRatio : 1) 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) { function getCenter(e) {
var $target = $(e.target), center, offset, offsetX, offsetY; var $target = $(e.target), center, offset, offsetX, offsetY;
if ($target.is('.OxImage')) { if ($target.is('.OxImage')) {
@ -297,6 +333,25 @@ Ox.ImageViewer = function(options, self) {
return center; 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() { function getImageCSS() {
return { return {
left: Math.round(self.options.width / 2 - self.center[0] * self.zoom) + 'px', 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; return that;
}; };