|
1 /* |
|
2 * imgAreaSelect jQuery plugin |
|
3 * version 0.9.10 |
|
4 * |
|
5 * Copyright (c) 2008-2013 Michal Wojciechowski (odyniec.net) |
|
6 * |
|
7 * Dual licensed under the MIT (MIT-LICENSE.txt) |
|
8 * and GPL (GPL-LICENSE.txt) licenses. |
|
9 * |
|
10 * http://odyniec.net/projects/imgareaselect/ |
|
11 * |
|
12 */ |
|
13 |
|
14 (function($) { |
|
15 |
|
16 var abs = Math.abs, |
|
17 max = Math.max, |
|
18 min = Math.min, |
|
19 round = Math.round; |
|
20 |
|
21 function div() { |
|
22 return $('<div/>'); |
|
23 } |
|
24 |
|
25 $.imgAreaSelect = function (img, options) { |
|
26 var |
|
27 |
|
28 $img = $(img), |
|
29 |
|
30 imgLoaded, |
|
31 |
|
32 $box = div(), |
|
33 $area = div(), |
|
34 $border = div().add(div()).add(div()).add(div()), |
|
35 $outer = div().add(div()).add(div()).add(div()), |
|
36 $handles = $([]), |
|
37 |
|
38 $areaOpera, |
|
39 |
|
40 left, top, |
|
41 |
|
42 imgOfs = { left: 0, top: 0 }, |
|
43 |
|
44 imgWidth, imgHeight, |
|
45 |
|
46 $parent, |
|
47 |
|
48 parOfs = { left: 0, top: 0 }, |
|
49 |
|
50 zIndex = 0, |
|
51 |
|
52 position = 'absolute', |
|
53 |
|
54 startX, startY, |
|
55 |
|
56 scaleX, scaleY, |
|
57 |
|
58 resize, |
|
59 |
|
60 minWidth, minHeight, maxWidth, maxHeight, |
|
61 |
|
62 aspectRatio, |
|
63 |
|
64 shown, |
|
65 |
|
66 x1, y1, x2, y2, |
|
67 |
|
68 selection = { x1: 0, y1: 0, x2: 0, y2: 0, width: 0, height: 0 }, |
|
69 |
|
70 docElem = document.documentElement, |
|
71 |
|
72 ua = navigator.userAgent, |
|
73 |
|
74 $p, d, i, o, w, h, adjusted; |
|
75 |
|
76 function viewX(x) { |
|
77 return x + imgOfs.left - parOfs.left; |
|
78 } |
|
79 |
|
80 function viewY(y) { |
|
81 return y + imgOfs.top - parOfs.top; |
|
82 } |
|
83 |
|
84 function selX(x) { |
|
85 return x - imgOfs.left + parOfs.left; |
|
86 } |
|
87 |
|
88 function selY(y) { |
|
89 return y - imgOfs.top + parOfs.top; |
|
90 } |
|
91 |
|
92 function evX(event) { |
|
93 return event.pageX - parOfs.left; |
|
94 } |
|
95 |
|
96 function evY(event) { |
|
97 return event.pageY - parOfs.top; |
|
98 } |
|
99 |
|
100 function getSelection(noScale) { |
|
101 var sx = noScale || scaleX, sy = noScale || scaleY; |
|
102 |
|
103 return { x1: round(selection.x1 * sx), |
|
104 y1: round(selection.y1 * sy), |
|
105 x2: round(selection.x2 * sx), |
|
106 y2: round(selection.y2 * sy), |
|
107 width: round(selection.x2 * sx) - round(selection.x1 * sx), |
|
108 height: round(selection.y2 * sy) - round(selection.y1 * sy) }; |
|
109 } |
|
110 |
|
111 function setSelection(x1, y1, x2, y2, noScale) { |
|
112 var sx = noScale || scaleX, sy = noScale || scaleY; |
|
113 |
|
114 selection = { |
|
115 x1: round(x1 / sx || 0), |
|
116 y1: round(y1 / sy || 0), |
|
117 x2: round(x2 / sx || 0), |
|
118 y2: round(y2 / sy || 0) |
|
119 }; |
|
120 |
|
121 selection.width = selection.x2 - selection.x1; |
|
122 selection.height = selection.y2 - selection.y1; |
|
123 } |
|
124 |
|
125 function adjust() { |
|
126 if (!imgLoaded || !$img.width()) |
|
127 return; |
|
128 |
|
129 imgOfs = { left: round($img.offset().left), top: round($img.offset().top) }; |
|
130 |
|
131 imgWidth = $img.innerWidth(); |
|
132 imgHeight = $img.innerHeight(); |
|
133 |
|
134 imgOfs.top += ($img.outerHeight() - imgHeight) >> 1; |
|
135 imgOfs.left += ($img.outerWidth() - imgWidth) >> 1; |
|
136 |
|
137 minWidth = round(options.minWidth / scaleX) || 0; |
|
138 minHeight = round(options.minHeight / scaleY) || 0; |
|
139 maxWidth = round(min(options.maxWidth / scaleX || 1<<24, imgWidth)); |
|
140 maxHeight = round(min(options.maxHeight / scaleY || 1<<24, imgHeight)); |
|
141 |
|
142 if ($().jquery == '1.3.2' && position == 'fixed' && |
|
143 !docElem['getBoundingClientRect']) |
|
144 { |
|
145 imgOfs.top += max(document.body.scrollTop, docElem.scrollTop); |
|
146 imgOfs.left += max(document.body.scrollLeft, docElem.scrollLeft); |
|
147 } |
|
148 |
|
149 parOfs = /absolute|relative/.test($parent.css('position')) ? |
|
150 { left: round($parent.offset().left) - $parent.scrollLeft(), |
|
151 top: round($parent.offset().top) - $parent.scrollTop() } : |
|
152 position == 'fixed' ? |
|
153 { left: $(document).scrollLeft(), top: $(document).scrollTop() } : |
|
154 { left: 0, top: 0 }; |
|
155 |
|
156 left = viewX(0); |
|
157 top = viewY(0); |
|
158 |
|
159 if (selection.x2 > imgWidth || selection.y2 > imgHeight) |
|
160 doResize(); |
|
161 } |
|
162 |
|
163 function update(resetKeyPress) { |
|
164 if (!shown) return; |
|
165 |
|
166 $box.css({ left: viewX(selection.x1), top: viewY(selection.y1) }) |
|
167 .add($area).width(w = selection.width).height(h = selection.height); |
|
168 |
|
169 $area.add($border).add($handles).css({ left: 0, top: 0 }); |
|
170 |
|
171 $border |
|
172 .width(max(w - $border.outerWidth() + $border.innerWidth(), 0)) |
|
173 .height(max(h - $border.outerHeight() + $border.innerHeight(), 0)); |
|
174 |
|
175 $($outer[0]).css({ left: left, top: top, |
|
176 width: selection.x1, height: imgHeight }); |
|
177 $($outer[1]).css({ left: left + selection.x1, top: top, |
|
178 width: w, height: selection.y1 }); |
|
179 $($outer[2]).css({ left: left + selection.x2, top: top, |
|
180 width: imgWidth - selection.x2, height: imgHeight }); |
|
181 $($outer[3]).css({ left: left + selection.x1, top: top + selection.y2, |
|
182 width: w, height: imgHeight - selection.y2 }); |
|
183 |
|
184 w -= $handles.outerWidth(); |
|
185 h -= $handles.outerHeight(); |
|
186 |
|
187 switch ($handles.length) { |
|
188 case 8: |
|
189 $($handles[4]).css({ left: w >> 1 }); |
|
190 $($handles[5]).css({ left: w, top: h >> 1 }); |
|
191 $($handles[6]).css({ left: w >> 1, top: h }); |
|
192 $($handles[7]).css({ top: h >> 1 }); |
|
193 case 4: |
|
194 $handles.slice(1,3).css({ left: w }); |
|
195 $handles.slice(2,4).css({ top: h }); |
|
196 } |
|
197 |
|
198 if (resetKeyPress !== false) { |
|
199 if ($.imgAreaSelect.onKeyPress != docKeyPress) |
|
200 $(document).unbind($.imgAreaSelect.keyPress, |
|
201 $.imgAreaSelect.onKeyPress); |
|
202 |
|
203 if (options.keys) |
|
204 $(document)[$.imgAreaSelect.keyPress]( |
|
205 $.imgAreaSelect.onKeyPress = docKeyPress); |
|
206 } |
|
207 |
|
208 if (msie && $border.outerWidth() - $border.innerWidth() == 2) { |
|
209 $border.css('margin', 0); |
|
210 setTimeout(function () { $border.css('margin', 'auto'); }, 0); |
|
211 } |
|
212 } |
|
213 |
|
214 function doUpdate(resetKeyPress) { |
|
215 adjust(); |
|
216 update(resetKeyPress); |
|
217 x1 = viewX(selection.x1); y1 = viewY(selection.y1); |
|
218 x2 = viewX(selection.x2); y2 = viewY(selection.y2); |
|
219 } |
|
220 |
|
221 function hide($elem, fn) { |
|
222 options.fadeSpeed ? $elem.fadeOut(options.fadeSpeed, fn) : $elem.hide(); |
|
223 |
|
224 } |
|
225 |
|
226 function areaMouseMove(event) { |
|
227 var x = selX(evX(event)) - selection.x1, |
|
228 y = selY(evY(event)) - selection.y1; |
|
229 |
|
230 if (!adjusted) { |
|
231 adjust(); |
|
232 adjusted = true; |
|
233 |
|
234 $box.one('mouseout', function () { adjusted = false; }); |
|
235 } |
|
236 |
|
237 resize = ''; |
|
238 |
|
239 if (options.resizable) { |
|
240 if (y <= options.resizeMargin) |
|
241 resize = 'n'; |
|
242 else if (y >= selection.height - options.resizeMargin) |
|
243 resize = 's'; |
|
244 if (x <= options.resizeMargin) |
|
245 resize += 'w'; |
|
246 else if (x >= selection.width - options.resizeMargin) |
|
247 resize += 'e'; |
|
248 } |
|
249 |
|
250 $box.css('cursor', resize ? resize + '-resize' : |
|
251 options.movable ? 'move' : ''); |
|
252 if ($areaOpera) |
|
253 $areaOpera.toggle(); |
|
254 } |
|
255 |
|
256 function docMouseUp(event) { |
|
257 $('body').css('cursor', ''); |
|
258 if (options.autoHide || selection.width * selection.height == 0) |
|
259 hide($box.add($outer), function () { $(this).hide(); }); |
|
260 |
|
261 $(document).unbind('mousemove', selectingMouseMove); |
|
262 $box.mousemove(areaMouseMove); |
|
263 |
|
264 options.onSelectEnd(img, getSelection()); |
|
265 } |
|
266 |
|
267 function areaMouseDown(event) { |
|
268 if (event.which != 1) return false; |
|
269 |
|
270 adjust(); |
|
271 |
|
272 if (resize) { |
|
273 $('body').css('cursor', resize + '-resize'); |
|
274 |
|
275 x1 = viewX(selection[/w/.test(resize) ? 'x2' : 'x1']); |
|
276 y1 = viewY(selection[/n/.test(resize) ? 'y2' : 'y1']); |
|
277 |
|
278 $(document).mousemove(selectingMouseMove) |
|
279 .one('mouseup', docMouseUp); |
|
280 $box.unbind('mousemove', areaMouseMove); |
|
281 } |
|
282 else if (options.movable) { |
|
283 startX = left + selection.x1 - evX(event); |
|
284 startY = top + selection.y1 - evY(event); |
|
285 |
|
286 $box.unbind('mousemove', areaMouseMove); |
|
287 |
|
288 $(document).mousemove(movingMouseMove) |
|
289 .one('mouseup', function () { |
|
290 options.onSelectEnd(img, getSelection()); |
|
291 |
|
292 $(document).unbind('mousemove', movingMouseMove); |
|
293 $box.mousemove(areaMouseMove); |
|
294 }); |
|
295 } |
|
296 else |
|
297 $img.mousedown(event); |
|
298 |
|
299 return false; |
|
300 } |
|
301 |
|
302 function fixAspectRatio(xFirst) { |
|
303 if (aspectRatio) |
|
304 if (xFirst) { |
|
305 x2 = max(left, min(left + imgWidth, |
|
306 x1 + abs(y2 - y1) * aspectRatio * (x2 > x1 || -1))); |
|
307 |
|
308 y2 = round(max(top, min(top + imgHeight, |
|
309 y1 + abs(x2 - x1) / aspectRatio * (y2 > y1 || -1)))); |
|
310 x2 = round(x2); |
|
311 } |
|
312 else { |
|
313 y2 = max(top, min(top + imgHeight, |
|
314 y1 + abs(x2 - x1) / aspectRatio * (y2 > y1 || -1))); |
|
315 x2 = round(max(left, min(left + imgWidth, |
|
316 x1 + abs(y2 - y1) * aspectRatio * (x2 > x1 || -1)))); |
|
317 y2 = round(y2); |
|
318 } |
|
319 } |
|
320 |
|
321 function doResize() { |
|
322 x1 = min(x1, left + imgWidth); |
|
323 y1 = min(y1, top + imgHeight); |
|
324 |
|
325 if (abs(x2 - x1) < minWidth) { |
|
326 x2 = x1 - minWidth * (x2 < x1 || -1); |
|
327 |
|
328 if (x2 < left) |
|
329 x1 = left + minWidth; |
|
330 else if (x2 > left + imgWidth) |
|
331 x1 = left + imgWidth - minWidth; |
|
332 } |
|
333 |
|
334 if (abs(y2 - y1) < minHeight) { |
|
335 y2 = y1 - minHeight * (y2 < y1 || -1); |
|
336 |
|
337 if (y2 < top) |
|
338 y1 = top + minHeight; |
|
339 else if (y2 > top + imgHeight) |
|
340 y1 = top + imgHeight - minHeight; |
|
341 } |
|
342 |
|
343 x2 = max(left, min(x2, left + imgWidth)); |
|
344 y2 = max(top, min(y2, top + imgHeight)); |
|
345 |
|
346 fixAspectRatio(abs(x2 - x1) < abs(y2 - y1) * aspectRatio); |
|
347 |
|
348 if (abs(x2 - x1) > maxWidth) { |
|
349 x2 = x1 - maxWidth * (x2 < x1 || -1); |
|
350 fixAspectRatio(); |
|
351 } |
|
352 |
|
353 if (abs(y2 - y1) > maxHeight) { |
|
354 y2 = y1 - maxHeight * (y2 < y1 || -1); |
|
355 fixAspectRatio(true); |
|
356 } |
|
357 |
|
358 selection = { x1: selX(min(x1, x2)), x2: selX(max(x1, x2)), |
|
359 y1: selY(min(y1, y2)), y2: selY(max(y1, y2)), |
|
360 width: abs(x2 - x1), height: abs(y2 - y1) }; |
|
361 |
|
362 update(); |
|
363 |
|
364 options.onSelectChange(img, getSelection()); |
|
365 } |
|
366 |
|
367 function selectingMouseMove(event) { |
|
368 x2 = /w|e|^$/.test(resize) || aspectRatio ? evX(event) : viewX(selection.x2); |
|
369 y2 = /n|s|^$/.test(resize) || aspectRatio ? evY(event) : viewY(selection.y2); |
|
370 |
|
371 doResize(); |
|
372 |
|
373 return false; |
|
374 |
|
375 } |
|
376 |
|
377 function doMove(newX1, newY1) { |
|
378 x2 = (x1 = newX1) + selection.width; |
|
379 y2 = (y1 = newY1) + selection.height; |
|
380 |
|
381 $.extend(selection, { x1: selX(x1), y1: selY(y1), x2: selX(x2), |
|
382 y2: selY(y2) }); |
|
383 |
|
384 update(); |
|
385 |
|
386 options.onSelectChange(img, getSelection()); |
|
387 } |
|
388 |
|
389 function movingMouseMove(event) { |
|
390 x1 = max(left, min(startX + evX(event), left + imgWidth - selection.width)); |
|
391 y1 = max(top, min(startY + evY(event), top + imgHeight - selection.height)); |
|
392 |
|
393 doMove(x1, y1); |
|
394 |
|
395 event.preventDefault(); |
|
396 |
|
397 return false; |
|
398 } |
|
399 |
|
400 function startSelection() { |
|
401 $(document).unbind('mousemove', startSelection); |
|
402 adjust(); |
|
403 |
|
404 x2 = x1; |
|
405 y2 = y1; |
|
406 |
|
407 doResize(); |
|
408 |
|
409 resize = ''; |
|
410 |
|
411 if (!$outer.is(':visible')) |
|
412 $box.add($outer).hide().fadeIn(options.fadeSpeed||0); |
|
413 |
|
414 shown = true; |
|
415 |
|
416 $(document).unbind('mouseup', cancelSelection) |
|
417 .mousemove(selectingMouseMove).one('mouseup', docMouseUp); |
|
418 $box.unbind('mousemove', areaMouseMove); |
|
419 |
|
420 options.onSelectStart(img, getSelection()); |
|
421 } |
|
422 |
|
423 function cancelSelection() { |
|
424 $(document).unbind('mousemove', startSelection) |
|
425 .unbind('mouseup', cancelSelection); |
|
426 hide($box.add($outer)); |
|
427 |
|
428 setSelection(selX(x1), selY(y1), selX(x1), selY(y1)); |
|
429 |
|
430 if (!(this instanceof $.imgAreaSelect)) { |
|
431 options.onSelectChange(img, getSelection()); |
|
432 options.onSelectEnd(img, getSelection()); |
|
433 } |
|
434 } |
|
435 |
|
436 function imgMouseDown(event) { |
|
437 if (event.which != 1 || $outer.is(':animated')) return false; |
|
438 |
|
439 adjust(); |
|
440 startX = x1 = evX(event); |
|
441 startY = y1 = evY(event); |
|
442 |
|
443 $(document).mousemove(startSelection).mouseup(cancelSelection); |
|
444 |
|
445 return false; |
|
446 } |
|
447 |
|
448 function windowResize() { |
|
449 doUpdate(false); |
|
450 } |
|
451 |
|
452 function imgLoad() { |
|
453 imgLoaded = true; |
|
454 |
|
455 setOptions(options = $.extend({ |
|
456 classPrefix: 'imgareaselect', |
|
457 movable: true, |
|
458 parent: 'body', |
|
459 resizable: true, |
|
460 resizeMargin: 10, |
|
461 onInit: function () {}, |
|
462 onSelectStart: function () {}, |
|
463 onSelectChange: function () {}, |
|
464 onSelectEnd: function () {} |
|
465 }, options)); |
|
466 |
|
467 $box.add($outer).css({ visibility: '' }); |
|
468 |
|
469 if (options.show) { |
|
470 shown = true; |
|
471 adjust(); |
|
472 update(); |
|
473 $box.add($outer).hide().fadeIn(options.fadeSpeed||0); |
|
474 } |
|
475 |
|
476 setTimeout(function () { options.onInit(img, getSelection()); }, 0); |
|
477 } |
|
478 |
|
479 var docKeyPress = function(event) { |
|
480 var k = options.keys, d, t, key = event.keyCode; |
|
481 |
|
482 d = !isNaN(k.alt) && (event.altKey || event.originalEvent.altKey) ? k.alt : |
|
483 !isNaN(k.ctrl) && event.ctrlKey ? k.ctrl : |
|
484 !isNaN(k.shift) && event.shiftKey ? k.shift : |
|
485 !isNaN(k.arrows) ? k.arrows : 10; |
|
486 |
|
487 if (k.arrows == 'resize' || (k.shift == 'resize' && event.shiftKey) || |
|
488 (k.ctrl == 'resize' && event.ctrlKey) || |
|
489 (k.alt == 'resize' && (event.altKey || event.originalEvent.altKey))) |
|
490 { |
|
491 switch (key) { |
|
492 case 37: |
|
493 d = -d; |
|
494 case 39: |
|
495 t = max(x1, x2); |
|
496 x1 = min(x1, x2); |
|
497 x2 = max(t + d, x1); |
|
498 fixAspectRatio(); |
|
499 break; |
|
500 case 38: |
|
501 d = -d; |
|
502 case 40: |
|
503 t = max(y1, y2); |
|
504 y1 = min(y1, y2); |
|
505 y2 = max(t + d, y1); |
|
506 fixAspectRatio(true); |
|
507 break; |
|
508 default: |
|
509 return; |
|
510 } |
|
511 |
|
512 doResize(); |
|
513 } |
|
514 else { |
|
515 x1 = min(x1, x2); |
|
516 y1 = min(y1, y2); |
|
517 |
|
518 switch (key) { |
|
519 case 37: |
|
520 doMove(max(x1 - d, left), y1); |
|
521 break; |
|
522 case 38: |
|
523 doMove(x1, max(y1 - d, top)); |
|
524 break; |
|
525 case 39: |
|
526 doMove(x1 + min(d, imgWidth - selX(x2)), y1); |
|
527 break; |
|
528 case 40: |
|
529 doMove(x1, y1 + min(d, imgHeight - selY(y2))); |
|
530 break; |
|
531 default: |
|
532 return; |
|
533 } |
|
534 } |
|
535 |
|
536 return false; |
|
537 }; |
|
538 |
|
539 function styleOptions($elem, props) { |
|
540 for (var option in props) |
|
541 if (options[option] !== undefined) |
|
542 $elem.css(props[option], options[option]); |
|
543 } |
|
544 |
|
545 function setOptions(newOptions) { |
|
546 if (newOptions.parent) |
|
547 ($parent = $(newOptions.parent)).append($box.add($outer)); |
|
548 |
|
549 $.extend(options, newOptions); |
|
550 |
|
551 adjust(); |
|
552 |
|
553 if (newOptions.handles != null) { |
|
554 $handles.remove(); |
|
555 $handles = $([]); |
|
556 |
|
557 i = newOptions.handles ? newOptions.handles == 'corners' ? 4 : 8 : 0; |
|
558 |
|
559 while (i--) |
|
560 $handles = $handles.add(div()); |
|
561 |
|
562 $handles.addClass(options.classPrefix + '-handle').css({ |
|
563 position: 'absolute', |
|
564 fontSize: 0, |
|
565 zIndex: zIndex + 1 || 1 |
|
566 }); |
|
567 |
|
568 if (!parseInt($handles.css('width')) >= 0) |
|
569 $handles.width(5).height(5); |
|
570 |
|
571 if (o = options.borderWidth) |
|
572 $handles.css({ borderWidth: o, borderStyle: 'solid' }); |
|
573 |
|
574 styleOptions($handles, { borderColor1: 'border-color', |
|
575 borderColor2: 'background-color', |
|
576 borderOpacity: 'opacity' }); |
|
577 } |
|
578 |
|
579 scaleX = options.imageWidth / imgWidth || 1; |
|
580 scaleY = options.imageHeight / imgHeight || 1; |
|
581 |
|
582 if (newOptions.x1 != null) { |
|
583 setSelection(newOptions.x1, newOptions.y1, newOptions.x2, |
|
584 newOptions.y2); |
|
585 newOptions.show = !newOptions.hide; |
|
586 } |
|
587 |
|
588 if (newOptions.keys) |
|
589 options.keys = $.extend({ shift: 1, ctrl: 'resize' }, |
|
590 newOptions.keys); |
|
591 |
|
592 $outer.addClass(options.classPrefix + '-outer'); |
|
593 $area.addClass(options.classPrefix + '-selection'); |
|
594 for (i = 0; i++ < 4;) |
|
595 $($border[i-1]).addClass(options.classPrefix + '-border' + i); |
|
596 |
|
597 styleOptions($area, { selectionColor: 'background-color', |
|
598 selectionOpacity: 'opacity' }); |
|
599 styleOptions($border, { borderOpacity: 'opacity', |
|
600 borderWidth: 'border-width' }); |
|
601 styleOptions($outer, { outerColor: 'background-color', |
|
602 outerOpacity: 'opacity' }); |
|
603 if (o = options.borderColor1) |
|
604 $($border[0]).css({ borderStyle: 'solid', borderColor: o }); |
|
605 if (o = options.borderColor2) |
|
606 $($border[1]).css({ borderStyle: 'dashed', borderColor: o }); |
|
607 |
|
608 $box.append($area.add($border).add($areaOpera)).append($handles); |
|
609 |
|
610 if (msie) { |
|
611 if (o = ($outer.css('filter')||'').match(/opacity=(\d+)/)) |
|
612 $outer.css('opacity', o[1]/100); |
|
613 if (o = ($border.css('filter')||'').match(/opacity=(\d+)/)) |
|
614 $border.css('opacity', o[1]/100); |
|
615 } |
|
616 |
|
617 if (newOptions.hide) |
|
618 hide($box.add($outer)); |
|
619 else if (newOptions.show && imgLoaded) { |
|
620 shown = true; |
|
621 $box.add($outer).fadeIn(options.fadeSpeed||0); |
|
622 doUpdate(); |
|
623 } |
|
624 |
|
625 aspectRatio = (d = (options.aspectRatio || '').split(/:/))[0] / d[1]; |
|
626 |
|
627 $img.add($outer).unbind('mousedown', imgMouseDown); |
|
628 |
|
629 if (options.disable || options.enable === false) { |
|
630 $box.unbind('mousemove', areaMouseMove).unbind('mousedown', areaMouseDown); |
|
631 $(window).unbind('resize', windowResize); |
|
632 } |
|
633 else { |
|
634 if (options.enable || options.disable === false) { |
|
635 if (options.resizable || options.movable) |
|
636 $box.mousemove(areaMouseMove).mousedown(areaMouseDown); |
|
637 |
|
638 $(window).resize(windowResize); |
|
639 } |
|
640 |
|
641 if (!options.persistent) |
|
642 $img.add($outer).mousedown(imgMouseDown); |
|
643 } |
|
644 |
|
645 options.enable = options.disable = undefined; |
|
646 } |
|
647 |
|
648 this.remove = function () { |
|
649 setOptions({ disable: true }); |
|
650 $box.add($outer).remove(); |
|
651 }; |
|
652 |
|
653 this.getOptions = function () { return options; }; |
|
654 |
|
655 this.setOptions = setOptions; |
|
656 |
|
657 this.getSelection = getSelection; |
|
658 |
|
659 this.setSelection = setSelection; |
|
660 |
|
661 this.cancelSelection = cancelSelection; |
|
662 |
|
663 this.update = doUpdate; |
|
664 |
|
665 var msie = (/msie ([\w.]+)/i.exec(ua)||[])[1], |
|
666 opera = /opera/i.test(ua), |
|
667 safari = /webkit/i.test(ua) && !/chrome/i.test(ua); |
|
668 |
|
669 $p = $img; |
|
670 |
|
671 while ($p.length) { |
|
672 zIndex = max(zIndex, |
|
673 !isNaN($p.css('z-index')) ? $p.css('z-index') : zIndex); |
|
674 if ($p.css('position') == 'fixed') |
|
675 position = 'fixed'; |
|
676 |
|
677 $p = $p.parent(':not(body)'); |
|
678 } |
|
679 |
|
680 zIndex = options.zIndex || zIndex; |
|
681 |
|
682 if (msie) |
|
683 $img.attr('unselectable', 'on'); |
|
684 |
|
685 $.imgAreaSelect.keyPress = msie || safari ? 'keydown' : 'keypress'; |
|
686 |
|
687 if (opera) |
|
688 |
|
689 $areaOpera = div().css({ width: '100%', height: '100%', |
|
690 position: 'absolute', zIndex: zIndex + 2 || 2 }); |
|
691 |
|
692 $box.add($outer).css({ visibility: 'hidden', position: position, |
|
693 overflow: 'hidden', zIndex: zIndex || '0' }); |
|
694 $box.css({ zIndex: zIndex + 2 || 2 }); |
|
695 $area.add($border).css({ position: 'absolute', fontSize: 0 }); |
|
696 |
|
697 img.complete || img.readyState == 'complete' || !$img.is('img') ? |
|
698 imgLoad() : $img.one('load', imgLoad); |
|
699 |
|
700 if (!imgLoaded && msie && msie >= 7) |
|
701 img.src = img.src; |
|
702 }; |
|
703 |
|
704 $.fn.imgAreaSelect = function (options) { |
|
705 options = options || {}; |
|
706 |
|
707 this.each(function () { |
|
708 if ($(this).data('imgAreaSelect')) { |
|
709 if (options.remove) { |
|
710 $(this).data('imgAreaSelect').remove(); |
|
711 $(this).removeData('imgAreaSelect'); |
|
712 } |
|
713 else |
|
714 $(this).data('imgAreaSelect').setOptions(options); |
|
715 } |
|
716 else if (!options.remove) { |
|
717 if (options.enable === undefined && options.disable === undefined) |
|
718 options.enable = true; |
|
719 |
|
720 $(this).data('imgAreaSelect', new $.imgAreaSelect(this, options)); |
|
721 } |
|
722 }); |
|
723 |
|
724 if (options.instance) |
|
725 return $(this).data('imgAreaSelect'); |
|
726 |
|
727 return this; |
|
728 }; |
|
729 |
|
730 })(jQuery); |