var Zoom = new Class({
Implements: [Options, Events],
options: {},
initialize: function(elements, options){
this.setOptions(options);
this.elements = $$(elements);
this.enable(this.elements);
this.addEvents({
zoomOut: function(el){
el.retrieve('touch').detach();
},
zoomIn: function(el){
el.retrieve('touch').attach();
}
});
return this;
},
dblClick: function(n){
if(n < 1) return;
this.elements.each(function(el){
el.fnDblClick = (function(e){
this.toggle(el, n, e);
}).bind(this);
el.addEvent('dblclick', el.fnDblClick)
}, this);
return this;
},
mousewheel: function(n){
this.elements.each(function(el){
el.addEvent('mousewheel', (function(e){
e.preventDefault();
this.zoom(el, e.wheel * n, e);
}).bind(this))
}, this);
},
enable: function(elements){
$$(elements).each(function(el){
var touch = new Touch(el);
var kid = el.getFirst();
touch.addEvents({
start: function(e, eX, eY){
touch.left = kid.getPosition(el).x;
touch.top = kid.getPosition(el).y;
},
move: function(e, dX, dY){
var left = dX + touch.left, top = dY + touch.top;
kid.setStyles({
left: left > 0 ? 0 : left,
top: top > 0 ? 0 : top
});
var maxX = kid.getComputedSize().width - el.getComputedSize().width,
maxY = kid.getComputedSize().height - el.getComputedSize().height;
if(kid.getPosition(el).x * -1 > maxX)
kid.setStyle('left', 0 - maxX);
if(kid.getPosition(el).y * -1 > maxY)
kid.setStyle('top', 0 - maxY);
}
});
touch.detach();
el.store('original-dimensions', {
width: el.getComputedSize().width,
height: el.getComputedSize().height
}).store('touch', touch).setStyles({
overflow: 'hidden',
position: 'relative',
fontSize: 0
}).setStyles(el.retrieve('original-dimensions'));
kid.set({
style: 'position: absolute'
});
});
return this;
},
disable: function(elements){
$$(elements).each(function(el){
this.zoom(el, 1);
el.retrieve('touch').detach();
el.eliminate('original-dimensions').eliminate('touch');
el.removeEvent('dblclick', el.fnDblClick);
}, this);
return this;
},
zoom: function(el, n, event){
var el = $(el);
var kid = el.getFirst();
if(!event)
event = {
client: {
x: kid.getLeft() + (kid.getWidth() / 2),
y: kid.getTop() + (kid.getHeight() / 2)
}
};
this.fireEvent('zoom' + (bDir = n == 1 ? 'Out' : 'In'), [el, $merge(kid.getDimensions(), kid.getPosition(el))]);
this.fireEvent('zoomStart', [el, $merge(kid.getDimensions(), kid.getPosition(el))]);
var oW = el.retrieve('original-dimensions').width,
oH = el.retrieve('original-dimensions').height;
var w = oW * n,
h = oH * n;
var morph = {
width: w < oW ? oW : w,
height: h < oH ? oH : h,
left: n == 1 ? 0 : 0 - ((event.client.x - kid.getLeft()) * (n - 1)),
top: n == 1 ? 0 : 0 - (((event.client.y + window.getScroll().y) - kid.getTop()) * (n - 1))
};
kid.set('morph', {
onComplete: (function(){
this.fireEvent('zoomEnd', [el, morph]);
}).bind(this)
}).morph(morph);
return this;
},
toggle: function(el, n, event){
var el = $(el);
if(el.getFirst().getComputedSize().width <= el.retrieve('original-dimensions').width)
return this.zoom(el, n, event);
else
return this.zoom(el, 1, event);
}
});