« back to all changes in this revision
Viewing changes to web_mail_img/static/src/js/zoomit.jquery.js
- browse files at revision 1.4.440
- compare with another revision
- download diff
- download tarball
- view history from revision 1.4.440
- Committer: Parth Gajjar (Open ERP)
- Date: 2013-06-14 13:47:59 UTC
- mto: (1.10.29 trunk-nco)
- mto: This revision was merged to the branch mainline in revision 8.
- Revision ID: pga@tinyerp.com-20130614134759-r272xs9j4d85zoyy
[ADD]added 5 modules. attachment_size_limit, web_gui, web_keyboard_shortcuts, web_mail_img, web_pdf_viewer
- files added:
- attachment_size_limit
- attachment_size_limit/static
- attachment_size_limit/static/src
- attachment_size_limit/static/src/img
- attachment_size_limit/static/src/js
- web_gui
- web_gui/static
- web_gui/static/src
- web_gui/static/src/css
- web_gui/static/src/img
- web_gui/static/src/js
- web_gui/static/src/xml
- web_keyboard_shortcuts
- web_keyboard_shortcuts/static
- web_keyboard_shortcuts/static/src
- web_keyboard_shortcuts/static/src/css
- web_keyboard_shortcuts/static/src/img
- web_keyboard_shortcuts/static/src/js
- web_mail_img
- web_mail_img/static
- web_mail_img/static/src
- web_mail_img/static/src/css
- web_mail_img/static/src/img
- web_mail_img/static/src/js
- web_pdf_viewer
- web_pdf_viewer/static
- web_pdf_viewer/static/src
- web_pdf_viewer/static/src/css
- web_pdf_viewer/static/src/img
- web_pdf_viewer/static/src/js
added
removed
web_mail_img/static/src/js/zoomit.jquery.js
1
/**
2
* Author: Constantin Boiangiu (services[at]constantinb.com)
3
* Homepage: http://www.constantinb.com/project/jquery-image-zoom-zoomit/
4
* Forum : http://www.constantinb.com/forums/forum/jquery-zoomit-plugin/
5
* jQuery version: 1.6
6
* Copyright (c) author
7
* License: MIT (http://www.opensource.org/licenses/mit-license.php)
8
*/
9
10
;(function($){
11
12
$.fn.jqZoomIt = function(options){
13
if (this.length > 1){
14
this.each(function() {
15
$(this).jqZoomIt(options);
16
});
17
return this;
18
}
19
20
var defaults = {
21
mouseEvent : 'mouseenter', // click, mouseenter, mouseover
22
zoomAreaMove : 'mousemove', // drag or mousemove
23
zoomPosition : 'right', // left, right, top, bottom
24
// CSS
25
zoomClass : 'zoomIt_zoomed', // additional styling on zoom container
26
zoomLoadingClass : 'zoomIt_loading', // css class to apply before the big image is fully loaded
27
zoomAreaClass : 'zoomIt_area', // additional styling on zoomed area
28
zoomAreaColor : '#FFF', // zoomed area bg color
29
30
zoomAreaOpacity : .5, // zoomed area opacity
31
zoomDistance : 10, // distance of the zoomer from the trigger
32
// full image multipliers based on small preview image size
33
multiplierX : 1.2, // how much of the big image width will be displayed
34
multiplierY : 1.2, // how much of the big image height will be displayed
35
// events
36
init : function(){},
37
zoom : function(){},
38
close : function(){},
39
// conditional
40
is_touch : null // if left to null it will use an internal detection process. If bool, it will take the option and bypass internal functionality
41
};
42
43
var options = $.extend({}, defaults, options),
44
self = this,
45
bigImg = $(this).attr('href'),
46
smallImg = $('img', this);
47
48
// if element doesn't have href attribute
49
// or small image isn't within main element,
50
// bail out
51
if( '' == bigImg || 0 == smallImg.length ){
52
return false;
53
}
54
55
// start the plugin
56
var initialize = function(){
57
// set the small image size
58
set_small_size();
59
// prepare the preview wrapper element
60
add_preview_area();
61
// add the events
62
var enterEvent = is_touch() ? 'touchstart' : ( 'click' == options.mouseEvent ? 'click' : 'mouseenter' ),
63
leaveEvent = is_touch() ? 'touchend' : 'mouseleave';
64
65
$(self).bind( enterEvent, function(event){
66
event.preventDefault();
67
startZoom();
68
options.zoom.call(self, {});
69
});
70
$(self).bind(leaveEvent, function(){
71
closeZoom();
72
options.close.call(self, {});
73
});
74
75
$(window).resize( set_small_size );// reset positions on window resize
76
options.init.call(self, {});
77
return self;
78
}
79
80
var startZoom = function(){
81
var elems = get_preview_areas(), // returns object with keys zoomer and preview containing elements needed to create the zoom
82
sizes = get_small_size();
83
84
$(elems.zoomer).show().css({
85
'top' : sizes.zTop,
86
'left' : sizes.zLeft
87
});
88
// if no zoom is needed stop here
89
if( $.data( self, 'no_zoom') ){
90
return;
91
}
92
93
// show and position preview area
94
$(elems.preview).show();
95
96
if( $.data( self, 'loaded' ) ){
97
return;
98
}
99
100
// add loading class to big image container
101
$( elems.zoomer ).addClass( options.zoomLoadingClass );
102
// load the big image
103
var fullImg = $('<img />', {
104
'src' : bigImg
105
}).load( function(){
106
// remove loader from zoom area
107
$( elems.zoomer ).removeClass( options.zoomLoadingClass );
108
// inject full image
109
fullImg.css({
110
'position' : 'absolute',
111
'top' : 0,
112
'left' : 0
113
}).appendTo( $(elems.zoomer) );
114
115
$.data( self, 'loaded', true );
116
117
var fullWidth = fullImg.width(),
118
fullHeight = fullImg.height(),
119
ratioX = fullWidth / sizes.width,
120
ratioY = fullHeight / sizes.height,
121
dw = sizes.width / ratioX * ( options.multiplierX||1 ),
122
dh = sizes.height / ratioY * ( options.multiplierY||1 );
123
124
// if image doesn't need zooming according to multiplier, set full img container size to image size
125
if( options.multiplierX > ratioX && options.multiplierY > ratioY ){
126
$(elems.zoomer).css({
127
'width' :fullWidth,
128
'height':fullHeight
129
});
130
$.data( self, 'no_zoom', true );
131
return;
132
}
133
134
if( 'drag' == options.zoomAreaMove && $.fn.draggable && !is_touch() ){
135
// start drag
136
$(self).removeAttr('href');
137
138
$(elems.preview).draggable({
139
containment : 'parent',
140
drag: function(event, ui){
141
var pos = $(elems.preview).position(),
142
left = -(pos.left * ratioX),
143
top = -(pos.top * ratioY);
144
fullImg.css({
145
'left':left,
146
'top':top
147
});
148
}
149
})
150
151
}else{
152
153
var moveEvent = is_touch() ? 'touchmove' : 'mousemove';
154
155
$(self).bind( moveEvent, function( e ){
156
// used to store current mouse position
157
var mouseX = 0,
158
mouseY = 0;
159
// get position on touch
160
if( is_touch() ){
161
e.preventDefault();
162
event = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
163
mouseX = event.pageX;
164
mouseY = event.pageY;
165
}else{
166
// get position on non-touch
167
mouseX = e.pageX;
168
mouseY = e.pageY;
169
}
170
171
var sizes = get_small_size(),
172
mX = mouseX - sizes.left - dw/2,
173
mY = mouseY - sizes.top - dh/2;
174
175
// horizontal left limit
176
if( mouseX < sizes.left + dw/2 ){
177
mX = 0;
178
}
179
// vertical top limit
180
if( mouseY < sizes.top + dh/2 ){
181
mY = 0;
182
}
183
// horizontal right limit
184
if( mouseX > ( sizes.left + sizes.width - dw/2 )){
185
mX = sizes.width - dw;
186
}
187
// vertical bottom limit
188
if( mouseY > ( sizes.top + sizes.height - dh/2 )){
189
mY = sizes.height - dh;
190
}
191
192
// move zoomed area
193
$(elems.preview).css({
194
'left':mX,
195
'top':mY
196
});
197
198
// move full image
199
fullImg.css({
200
'left' : -(mX * ratioX),
201
'top' : -(mY * ratioY)
202
});
203
})
204
}
205
206
// resize drag area that shows the position on small image
207
$(elems.preview).css({
208
'width' : dw,
209
'height' : dh
210
});
211
});
212
}
213
214
var closeZoom = function(){
215
var elems = get_preview_areas();
216
$(elems.zoomer).css({
217
'top' : -5000,
218
'left': -5000
219
});
220
$(elems.preview).hide();
221
}
222
223
// set small image size
224
var set_small_size = function(){
225
226
var position = $(smallImg[0]).offset(),
227
data = {
228
'width' : $(smallImg[0]).outerWidth(),
229
'height' : $(smallImg[0]).outerHeight(),
230
'top' : position.top,
231
'left' : position.left,
232
'zTop' : position.top,
233
'zLeft' : position.left
234
};
235
// make some position calculations based on position option
236
switch( options.zoomPosition ){
237
case 'right':
238
default:
239
data.zLeft += data.width + options.zoomDistance;
240
break;
241
case 'left':
242
data.zLeft -= data.width * ( options.multiplierX || 1 ) + options.zoomDistance;
243
break;
244
case 'bottom':
245
data.zTop += data.height + options.zoomDistance;
246
break;
247
case 'top':
248
data.zTop -= data.height * ( options.multiplierY || 1 ) + options.zoomDistance;
249
break;
250
}
251
252
$.data( smallImg[0], 'size', data );
253
return data;
254
}
255
256
// helper function to get small image size stored on element
257
var get_small_size = function(){
258
return $.data( smallImg[0], 'size' );
259
}
260
261
// creates an element that overlaps the image to highlight the area being zoomed
262
var add_preview_area = function(){
263
var dragger = $('<div />',{
264
'class': options.zoomAreaClass,
265
'css':{
266
'background-color' : options.zoomAreaColor || '#999',
267
'opacity' : options.zoomAreaOpacity || .7,
268
'display' : 'none',
269
'position' : 'absolute',
270
'top' : 0,
271
'left' : 0,
272
'cursor' : 'move',
273
'z-index' : 1000
274
}
275
}).appendTo( $(self) );
276
277
var sizes = get_small_size();
278
279
var zoomer = $('<div />', {
280
'class' : options.zoomClass,
281
'css' :{
282
'display' : 'none',
283
'position' : 'absolute',
284
'top' : -1000,
285
'overflow' : 'hidden',
286
'width' : sizes.width * ( options.multiplierX || 1 ),
287
'height' : sizes.height * ( options.multiplierY || 1 ),
288
'z-index' : 1050
289
}
290
}).appendTo( $(document.body) );
291
292
var data = {
293
'zoomer' : zoomer,
294
'preview' : dragger
295
};
296
$.data( smallImg[0], 'elems', data );
297
}
298
299
// helper function to return element that highlights the zoomed area
300
var get_preview_areas = function(){
301
return $.data( smallImg[0], 'elems');
302
}
303
304
/**
305
* Verifies if browser has touch capabilities. Testing isn't bullet proof, you're encouraged
306
* to override the functionality by setting the parameter is_touch in options to a value determined
307
* by a third-party, more comprehensive browser testing script.
308
*/
309
var is_touch = function(){
310
if( options.is_touch !== null ){
311
return options.is_touch;
312
}
313
return /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
314
}
315
316
return initialize();
317
}
318
})(jQuery);
b'\\ No newline at end of file'
Loggerhead is a web-based interface for Breezy
Version: 2.0.1