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