1 | /** |
---|
2 | * jquery.Jcrop.js v0.9.12 |
---|
3 | * jQuery Image Cropping Plugin - released under MIT License |
---|
4 | * Author: Kelly Hallman <khallman@gmail.com> |
---|
5 | * http://github.com/tapmodo/Jcrop |
---|
6 | * Copyright (c) 2008-2013 Tapmodo Interactive LLC {{{ |
---|
7 | * |
---|
8 | * Permission is hereby granted, free of charge, to any person |
---|
9 | * obtaining a copy of this software and associated documentation |
---|
10 | * files (the "Software"), to deal in the Software without |
---|
11 | * restriction, including without limitation the rights to use, |
---|
12 | * copy, modify, merge, publish, distribute, sublicense, and/or sell |
---|
13 | * copies of the Software, and to permit persons to whom the |
---|
14 | * Software is furnished to do so, subject to the following |
---|
15 | * conditions: |
---|
16 | * |
---|
17 | * The above copyright notice and this permission notice shall be |
---|
18 | * included in all copies or substantial portions of the Software. |
---|
19 | * |
---|
20 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, |
---|
21 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES |
---|
22 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND |
---|
23 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT |
---|
24 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, |
---|
25 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING |
---|
26 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR |
---|
27 | * OTHER DEALINGS IN THE SOFTWARE. |
---|
28 | * |
---|
29 | * }}} |
---|
30 | */ |
---|
31 | |
---|
32 | (function ($) { |
---|
33 | |
---|
34 | $.Jcrop = function (obj, opt) { |
---|
35 | var options = $.extend({}, $.Jcrop.defaults), |
---|
36 | docOffset, |
---|
37 | _ua = navigator.userAgent.toLowerCase(), |
---|
38 | is_msie = /msie/.test(_ua), |
---|
39 | ie6mode = /msie [1-6]\./.test(_ua); |
---|
40 | |
---|
41 | // Internal Methods {{{ |
---|
42 | function px(n) { |
---|
43 | return Math.round(n) + 'px'; |
---|
44 | } |
---|
45 | function cssClass(cl) { |
---|
46 | return options.baseClass + '-' + cl; |
---|
47 | } |
---|
48 | function supportsColorFade() { |
---|
49 | return $.fx.step.hasOwnProperty('backgroundColor'); |
---|
50 | } |
---|
51 | function getPos(obj) //{{{ |
---|
52 | { |
---|
53 | var pos = $(obj).offset(); |
---|
54 | return [pos.left, pos.top]; |
---|
55 | } |
---|
56 | //}}} |
---|
57 | function mouseAbs(e) //{{{ |
---|
58 | { |
---|
59 | return [(e.pageX - docOffset[0]), (e.pageY - docOffset[1])]; |
---|
60 | } |
---|
61 | //}}} |
---|
62 | function setOptions(opt) //{{{ |
---|
63 | { |
---|
64 | if (typeof(opt) !== 'object') opt = {}; |
---|
65 | options = $.extend(options, opt); |
---|
66 | |
---|
67 | $.each(['onChange','onSelect','onRelease','onDblClick'],function(i,e) { |
---|
68 | if (typeof(options[e]) !== 'function') options[e] = function () {}; |
---|
69 | }); |
---|
70 | } |
---|
71 | //}}} |
---|
72 | function startDragMode(mode, pos, touch) //{{{ |
---|
73 | { |
---|
74 | docOffset = getPos($img); |
---|
75 | Tracker.setCursor(mode === 'move' ? mode : mode + '-resize'); |
---|
76 | |
---|
77 | if (mode === 'move') { |
---|
78 | return Tracker.activateHandlers(createMover(pos), doneSelect, touch); |
---|
79 | } |
---|
80 | |
---|
81 | var fc = Coords.getFixed(); |
---|
82 | var opp = oppLockCorner(mode); |
---|
83 | var opc = Coords.getCorner(oppLockCorner(opp)); |
---|
84 | |
---|
85 | Coords.setPressed(Coords.getCorner(opp)); |
---|
86 | Coords.setCurrent(opc); |
---|
87 | |
---|
88 | Tracker.activateHandlers(dragmodeHandler(mode, fc), doneSelect, touch); |
---|
89 | } |
---|
90 | //}}} |
---|
91 | function dragmodeHandler(mode, f) //{{{ |
---|
92 | { |
---|
93 | return function (pos) { |
---|
94 | if (!options.aspectRatio) { |
---|
95 | switch (mode) { |
---|
96 | case 'e': |
---|
97 | pos[1] = f.y2; |
---|
98 | break; |
---|
99 | case 'w': |
---|
100 | pos[1] = f.y2; |
---|
101 | break; |
---|
102 | case 'n': |
---|
103 | pos[0] = f.x2; |
---|
104 | break; |
---|
105 | case 's': |
---|
106 | pos[0] = f.x2; |
---|
107 | break; |
---|
108 | } |
---|
109 | } else { |
---|
110 | switch (mode) { |
---|
111 | case 'e': |
---|
112 | pos[1] = f.y + 1; |
---|
113 | break; |
---|
114 | case 'w': |
---|
115 | pos[1] = f.y + 1; |
---|
116 | break; |
---|
117 | case 'n': |
---|
118 | pos[0] = f.x + 1; |
---|
119 | break; |
---|
120 | case 's': |
---|
121 | pos[0] = f.x + 1; |
---|
122 | break; |
---|
123 | } |
---|
124 | } |
---|
125 | Coords.setCurrent(pos); |
---|
126 | Selection.update(); |
---|
127 | }; |
---|
128 | } |
---|
129 | //}}} |
---|
130 | function createMover(pos) //{{{ |
---|
131 | { |
---|
132 | var lloc = pos; |
---|
133 | KeyManager.watchKeys(); |
---|
134 | |
---|
135 | return function (pos) { |
---|
136 | Coords.moveOffset([pos[0] - lloc[0], pos[1] - lloc[1]]); |
---|
137 | lloc = pos; |
---|
138 | |
---|
139 | Selection.update(); |
---|
140 | }; |
---|
141 | } |
---|
142 | //}}} |
---|
143 | function oppLockCorner(ord) //{{{ |
---|
144 | { |
---|
145 | switch (ord) { |
---|
146 | case 'n': |
---|
147 | return 'sw'; |
---|
148 | case 's': |
---|
149 | return 'nw'; |
---|
150 | case 'e': |
---|
151 | return 'nw'; |
---|
152 | case 'w': |
---|
153 | return 'ne'; |
---|
154 | case 'ne': |
---|
155 | return 'sw'; |
---|
156 | case 'nw': |
---|
157 | return 'se'; |
---|
158 | case 'se': |
---|
159 | return 'nw'; |
---|
160 | case 'sw': |
---|
161 | return 'ne'; |
---|
162 | } |
---|
163 | } |
---|
164 | //}}} |
---|
165 | function createDragger(ord) //{{{ |
---|
166 | { |
---|
167 | return function (e) { |
---|
168 | if (options.disabled) { |
---|
169 | return false; |
---|
170 | } |
---|
171 | if ((ord === 'move') && !options.allowMove) { |
---|
172 | return false; |
---|
173 | } |
---|
174 | |
---|
175 | // Fix position of crop area when dragged the very first time. |
---|
176 | // Necessary when crop image is in a hidden element when page is loaded. |
---|
177 | docOffset = getPos($img); |
---|
178 | |
---|
179 | btndown = true; |
---|
180 | startDragMode(ord, mouseAbs(e)); |
---|
181 | e.stopPropagation(); |
---|
182 | e.preventDefault(); |
---|
183 | return false; |
---|
184 | }; |
---|
185 | } |
---|
186 | //}}} |
---|
187 | function presize($obj, w, h) //{{{ |
---|
188 | { |
---|
189 | var nw = $obj.width(), |
---|
190 | nh = $obj.height(); |
---|
191 | if ((nw > w) && w > 0) { |
---|
192 | nw = w; |
---|
193 | nh = (w / $obj.width()) * $obj.height(); |
---|
194 | } |
---|
195 | if ((nh > h) && h > 0) { |
---|
196 | nh = h; |
---|
197 | nw = (h / $obj.height()) * $obj.width(); |
---|
198 | } |
---|
199 | xscale = $obj.width() / nw; |
---|
200 | yscale = $obj.height() / nh; |
---|
201 | $obj.width(nw).height(nh); |
---|
202 | } |
---|
203 | //}}} |
---|
204 | function unscale(c) //{{{ |
---|
205 | { |
---|
206 | return { |
---|
207 | x: c.x * xscale, |
---|
208 | y: c.y * yscale, |
---|
209 | x2: c.x2 * xscale, |
---|
210 | y2: c.y2 * yscale, |
---|
211 | w: c.w * xscale, |
---|
212 | h: c.h * yscale |
---|
213 | }; |
---|
214 | } |
---|
215 | //}}} |
---|
216 | function doneSelect(pos) //{{{ |
---|
217 | { |
---|
218 | var c = Coords.getFixed(); |
---|
219 | if ((c.w > options.minSelect[0]) && (c.h > options.minSelect[1])) { |
---|
220 | Selection.enableHandles(); |
---|
221 | Selection.done(); |
---|
222 | } else { |
---|
223 | Selection.release(); |
---|
224 | } |
---|
225 | Tracker.setCursor(options.allowSelect ? 'crosshair' : 'default'); |
---|
226 | } |
---|
227 | //}}} |
---|
228 | function newSelection(e) //{{{ |
---|
229 | { |
---|
230 | if (options.disabled) { |
---|
231 | return false; |
---|
232 | } |
---|
233 | if (!options.allowSelect) { |
---|
234 | return false; |
---|
235 | } |
---|
236 | btndown = true; |
---|
237 | docOffset = getPos($img); |
---|
238 | Selection.disableHandles(); |
---|
239 | Tracker.setCursor('crosshair'); |
---|
240 | var pos = mouseAbs(e); |
---|
241 | Coords.setPressed(pos); |
---|
242 | Selection.update(); |
---|
243 | Tracker.activateHandlers(selectDrag, doneSelect, e.type.substring(0,5)==='touch'); |
---|
244 | KeyManager.watchKeys(); |
---|
245 | |
---|
246 | e.stopPropagation(); |
---|
247 | e.preventDefault(); |
---|
248 | return false; |
---|
249 | } |
---|
250 | //}}} |
---|
251 | function selectDrag(pos) //{{{ |
---|
252 | { |
---|
253 | Coords.setCurrent(pos); |
---|
254 | Selection.update(); |
---|
255 | } |
---|
256 | //}}} |
---|
257 | function newTracker() //{{{ |
---|
258 | { |
---|
259 | var trk = $('<div></div>').addClass(cssClass('tracker')); |
---|
260 | if (is_msie) { |
---|
261 | trk.css({ |
---|
262 | opacity: 0, |
---|
263 | backgroundColor: 'white' |
---|
264 | }); |
---|
265 | } |
---|
266 | return trk; |
---|
267 | } |
---|
268 | //}}} |
---|
269 | |
---|
270 | // }}} |
---|
271 | // Initialization {{{ |
---|
272 | // Sanitize some options {{{ |
---|
273 | if (typeof(obj) !== 'object') { |
---|
274 | obj = $(obj)[0]; |
---|
275 | } |
---|
276 | if (typeof(opt) !== 'object') { |
---|
277 | opt = {}; |
---|
278 | } |
---|
279 | // }}} |
---|
280 | setOptions(opt); |
---|
281 | // Initialize some jQuery objects {{{ |
---|
282 | // The values are SET on the image(s) for the interface |
---|
283 | // If the original image has any of these set, they will be reset |
---|
284 | // However, if you destroy() the Jcrop instance the original image's |
---|
285 | // character in the DOM will be as you left it. |
---|
286 | var img_css = { |
---|
287 | border: 'none', |
---|
288 | visibility: 'visible', |
---|
289 | margin: 0, |
---|
290 | padding: 0, |
---|
291 | position: 'absolute', |
---|
292 | top: 0, |
---|
293 | left: 0 |
---|
294 | }; |
---|
295 | |
---|
296 | var $origimg = $(obj), |
---|
297 | img_mode = true; |
---|
298 | |
---|
299 | if (obj.tagName == 'IMG') { |
---|
300 | // Fix size of crop image. |
---|
301 | // Necessary when crop image is within a hidden element when page is loaded. |
---|
302 | if ($origimg[0].width != 0 && $origimg[0].height != 0) { |
---|
303 | // Obtain dimensions from contained img element. |
---|
304 | $origimg.width($origimg[0].width); |
---|
305 | $origimg.height($origimg[0].height); |
---|
306 | } else { |
---|
307 | // Obtain dimensions from temporary image in case the original is not loaded yet (e.g. IE 7.0). |
---|
308 | var tempImage = new Image(); |
---|
309 | tempImage.src = $origimg[0].src; |
---|
310 | $origimg.width(tempImage.width); |
---|
311 | $origimg.height(tempImage.height); |
---|
312 | } |
---|
313 | |
---|
314 | var $img = $origimg.clone().removeAttr('id').css(img_css).show(); |
---|
315 | |
---|
316 | $img.width($origimg.width()); |
---|
317 | $img.height($origimg.height()); |
---|
318 | $origimg.after($img).hide(); |
---|
319 | |
---|
320 | } else { |
---|
321 | $img = $origimg.css(img_css).show(); |
---|
322 | img_mode = false; |
---|
323 | if (options.shade === null) { options.shade = true; } |
---|
324 | } |
---|
325 | |
---|
326 | presize($img, options.boxWidth, options.boxHeight); |
---|
327 | |
---|
328 | var boundx = $img.width(), |
---|
329 | boundy = $img.height(), |
---|
330 | |
---|
331 | |
---|
332 | $div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({ |
---|
333 | position: 'relative', |
---|
334 | backgroundColor: options.bgColor |
---|
335 | }).insertAfter($origimg).append($img); |
---|
336 | |
---|
337 | if (options.addClass) { |
---|
338 | $div.addClass(options.addClass); |
---|
339 | } |
---|
340 | |
---|
341 | var $img2 = $('<div />'), |
---|
342 | |
---|
343 | $img_holder = $('<div />') |
---|
344 | .width('100%').height('100%').css({ |
---|
345 | zIndex: 310, |
---|
346 | position: 'absolute', |
---|
347 | overflow: 'hidden' |
---|
348 | }), |
---|
349 | |
---|
350 | $hdl_holder = $('<div />') |
---|
351 | .width('100%').height('100%').css('zIndex', 320), |
---|
352 | |
---|
353 | $sel = $('<div />') |
---|
354 | .css({ |
---|
355 | position: 'absolute', |
---|
356 | zIndex: 600 |
---|
357 | }).dblclick(function(){ |
---|
358 | var c = Coords.getFixed(); |
---|
359 | options.onDblClick.call(api,c); |
---|
360 | }).insertBefore($img).append($img_holder, $hdl_holder); |
---|
361 | |
---|
362 | if (img_mode) { |
---|
363 | |
---|
364 | $img2 = $('<img />') |
---|
365 | .attr('src', $img.attr('src')).css(img_css).width(boundx).height(boundy), |
---|
366 | |
---|
367 | $img_holder.append($img2); |
---|
368 | |
---|
369 | } |
---|
370 | |
---|
371 | if (ie6mode) { |
---|
372 | $sel.css({ |
---|
373 | overflowY: 'hidden' |
---|
374 | }); |
---|
375 | } |
---|
376 | |
---|
377 | var bound = options.boundary; |
---|
378 | var $trk = newTracker().width(boundx + (bound * 2)).height(boundy + (bound * 2)).css({ |
---|
379 | position: 'absolute', |
---|
380 | top: px(-bound), |
---|
381 | left: px(-bound), |
---|
382 | zIndex: 290 |
---|
383 | }).mousedown(newSelection); |
---|
384 | |
---|
385 | /* }}} */ |
---|
386 | // Set more variables {{{ |
---|
387 | var bgcolor = options.bgColor, |
---|
388 | bgopacity = options.bgOpacity, |
---|
389 | xlimit, ylimit, xmin, ymin, xscale, yscale, enabled = true, |
---|
390 | btndown, animating, shift_down; |
---|
391 | |
---|
392 | docOffset = getPos($img); |
---|
393 | // }}} |
---|
394 | // }}} |
---|
395 | // Internal Modules {{{ |
---|
396 | // Touch Module {{{ |
---|
397 | var Touch = (function () { |
---|
398 | // Touch support detection function adapted (under MIT License) |
---|
399 | // from code by Jeffrey Sambells - http://github.com/iamamused/ |
---|
400 | function hasTouchSupport() { |
---|
401 | var support = {}, events = ['touchstart', 'touchmove', 'touchend'], |
---|
402 | el = document.createElement('div'), i; |
---|
403 | |
---|
404 | try { |
---|
405 | for(i=0; i<events.length; i++) { |
---|
406 | var eventName = events[i]; |
---|
407 | eventName = 'on' + eventName; |
---|
408 | var isSupported = (eventName in el); |
---|
409 | if (!isSupported) { |
---|
410 | el.setAttribute(eventName, 'return;'); |
---|
411 | isSupported = typeof el[eventName] == 'function'; |
---|
412 | } |
---|
413 | support[events[i]] = isSupported; |
---|
414 | } |
---|
415 | return support.touchstart && support.touchend && support.touchmove; |
---|
416 | } |
---|
417 | catch(err) { |
---|
418 | return false; |
---|
419 | } |
---|
420 | } |
---|
421 | |
---|
422 | function detectSupport() { |
---|
423 | if ((options.touchSupport === true) || (options.touchSupport === false)) return options.touchSupport; |
---|
424 | else return hasTouchSupport(); |
---|
425 | } |
---|
426 | return { |
---|
427 | createDragger: function (ord) { |
---|
428 | return function (e) { |
---|
429 | if (options.disabled) { |
---|
430 | return false; |
---|
431 | } |
---|
432 | if ((ord === 'move') && !options.allowMove) { |
---|
433 | return false; |
---|
434 | } |
---|
435 | docOffset = getPos($img); |
---|
436 | btndown = true; |
---|
437 | startDragMode(ord, mouseAbs(Touch.cfilter(e)), true); |
---|
438 | e.stopPropagation(); |
---|
439 | e.preventDefault(); |
---|
440 | return false; |
---|
441 | }; |
---|
442 | }, |
---|
443 | newSelection: function (e) { |
---|
444 | return newSelection(Touch.cfilter(e)); |
---|
445 | }, |
---|
446 | cfilter: function (e){ |
---|
447 | e.pageX = e.originalEvent.changedTouches[0].pageX; |
---|
448 | e.pageY = e.originalEvent.changedTouches[0].pageY; |
---|
449 | return e; |
---|
450 | }, |
---|
451 | isSupported: hasTouchSupport, |
---|
452 | support: detectSupport() |
---|
453 | }; |
---|
454 | }()); |
---|
455 | // }}} |
---|
456 | // Coords Module {{{ |
---|
457 | var Coords = (function () { |
---|
458 | var x1 = 0, |
---|
459 | y1 = 0, |
---|
460 | x2 = 0, |
---|
461 | y2 = 0, |
---|
462 | ox, oy; |
---|
463 | |
---|
464 | function setPressed(pos) //{{{ |
---|
465 | { |
---|
466 | pos = rebound(pos); |
---|
467 | x2 = x1 = pos[0]; |
---|
468 | y2 = y1 = pos[1]; |
---|
469 | } |
---|
470 | //}}} |
---|
471 | function setCurrent(pos) //{{{ |
---|
472 | { |
---|
473 | pos = rebound(pos); |
---|
474 | ox = pos[0] - x2; |
---|
475 | oy = pos[1] - y2; |
---|
476 | x2 = pos[0]; |
---|
477 | y2 = pos[1]; |
---|
478 | } |
---|
479 | //}}} |
---|
480 | function getOffset() //{{{ |
---|
481 | { |
---|
482 | return [ox, oy]; |
---|
483 | } |
---|
484 | //}}} |
---|
485 | function moveOffset(offset) //{{{ |
---|
486 | { |
---|
487 | var ox = offset[0], |
---|
488 | oy = offset[1]; |
---|
489 | |
---|
490 | if (0 > x1 + ox) { |
---|
491 | ox -= ox + x1; |
---|
492 | } |
---|
493 | if (0 > y1 + oy) { |
---|
494 | oy -= oy + y1; |
---|
495 | } |
---|
496 | |
---|
497 | if (boundy < y2 + oy) { |
---|
498 | oy += boundy - (y2 + oy); |
---|
499 | } |
---|
500 | if (boundx < x2 + ox) { |
---|
501 | ox += boundx - (x2 + ox); |
---|
502 | } |
---|
503 | |
---|
504 | x1 += ox; |
---|
505 | x2 += ox; |
---|
506 | y1 += oy; |
---|
507 | y2 += oy; |
---|
508 | } |
---|
509 | //}}} |
---|
510 | function getCorner(ord) //{{{ |
---|
511 | { |
---|
512 | var c = getFixed(); |
---|
513 | switch (ord) { |
---|
514 | case 'ne': |
---|
515 | return [c.x2, c.y]; |
---|
516 | case 'nw': |
---|
517 | return [c.x, c.y]; |
---|
518 | case 'se': |
---|
519 | return [c.x2, c.y2]; |
---|
520 | case 'sw': |
---|
521 | return [c.x, c.y2]; |
---|
522 | } |
---|
523 | } |
---|
524 | //}}} |
---|
525 | function getFixed() //{{{ |
---|
526 | { |
---|
527 | if (!options.aspectRatio) { |
---|
528 | return getRect(); |
---|
529 | } |
---|
530 | // This function could use some optimization I think... |
---|
531 | var aspect = options.aspectRatio, |
---|
532 | min_x = options.minSize[0] / xscale, |
---|
533 | |
---|
534 | |
---|
535 | //min_y = options.minSize[1]/yscale, |
---|
536 | max_x = options.maxSize[0] / xscale, |
---|
537 | max_y = options.maxSize[1] / yscale, |
---|
538 | rw = x2 - x1, |
---|
539 | rh = y2 - y1, |
---|
540 | rwa = Math.abs(rw), |
---|
541 | rha = Math.abs(rh), |
---|
542 | real_ratio = rwa / rha, |
---|
543 | xx, yy, w, h; |
---|
544 | |
---|
545 | if (max_x === 0) { |
---|
546 | max_x = boundx * 10; |
---|
547 | } |
---|
548 | if (max_y === 0) { |
---|
549 | max_y = boundy * 10; |
---|
550 | } |
---|
551 | if (real_ratio < aspect) { |
---|
552 | yy = y2; |
---|
553 | w = rha * aspect; |
---|
554 | xx = rw < 0 ? x1 - w : w + x1; |
---|
555 | |
---|
556 | if (xx < 0) { |
---|
557 | xx = 0; |
---|
558 | h = Math.abs((xx - x1) / aspect); |
---|
559 | yy = rh < 0 ? y1 - h : h + y1; |
---|
560 | } else if (xx > boundx) { |
---|
561 | xx = boundx; |
---|
562 | h = Math.abs((xx - x1) / aspect); |
---|
563 | yy = rh < 0 ? y1 - h : h + y1; |
---|
564 | } |
---|
565 | } else { |
---|
566 | xx = x2; |
---|
567 | h = rwa / aspect; |
---|
568 | yy = rh < 0 ? y1 - h : y1 + h; |
---|
569 | if (yy < 0) { |
---|
570 | yy = 0; |
---|
571 | w = Math.abs((yy - y1) * aspect); |
---|
572 | xx = rw < 0 ? x1 - w : w + x1; |
---|
573 | } else if (yy > boundy) { |
---|
574 | yy = boundy; |
---|
575 | w = Math.abs(yy - y1) * aspect; |
---|
576 | xx = rw < 0 ? x1 - w : w + x1; |
---|
577 | } |
---|
578 | } |
---|
579 | |
---|
580 | // Magic %-) |
---|
581 | if (xx > x1) { // right side |
---|
582 | if (xx - x1 < min_x) { |
---|
583 | xx = x1 + min_x; |
---|
584 | } else if (xx - x1 > max_x) { |
---|
585 | xx = x1 + max_x; |
---|
586 | } |
---|
587 | if (yy > y1) { |
---|
588 | yy = y1 + (xx - x1) / aspect; |
---|
589 | } else { |
---|
590 | yy = y1 - (xx - x1) / aspect; |
---|
591 | } |
---|
592 | } else if (xx < x1) { // left side |
---|
593 | if (x1 - xx < min_x) { |
---|
594 | xx = x1 - min_x; |
---|
595 | } else if (x1 - xx > max_x) { |
---|
596 | xx = x1 - max_x; |
---|
597 | } |
---|
598 | if (yy > y1) { |
---|
599 | yy = y1 + (x1 - xx) / aspect; |
---|
600 | } else { |
---|
601 | yy = y1 - (x1 - xx) / aspect; |
---|
602 | } |
---|
603 | } |
---|
604 | |
---|
605 | if (xx < 0) { |
---|
606 | x1 -= xx; |
---|
607 | xx = 0; |
---|
608 | } else if (xx > boundx) { |
---|
609 | x1 -= xx - boundx; |
---|
610 | xx = boundx; |
---|
611 | } |
---|
612 | |
---|
613 | if (yy < 0) { |
---|
614 | y1 -= yy; |
---|
615 | yy = 0; |
---|
616 | } else if (yy > boundy) { |
---|
617 | y1 -= yy - boundy; |
---|
618 | yy = boundy; |
---|
619 | } |
---|
620 | |
---|
621 | return makeObj(flipCoords(x1, y1, xx, yy)); |
---|
622 | } |
---|
623 | //}}} |
---|
624 | function rebound(p) //{{{ |
---|
625 | { |
---|
626 | if (p[0] < 0) p[0] = 0; |
---|
627 | if (p[1] < 0) p[1] = 0; |
---|
628 | |
---|
629 | if (p[0] > boundx) p[0] = boundx; |
---|
630 | if (p[1] > boundy) p[1] = boundy; |
---|
631 | |
---|
632 | return [Math.round(p[0]), Math.round(p[1])]; |
---|
633 | } |
---|
634 | //}}} |
---|
635 | function flipCoords(x1, y1, x2, y2) //{{{ |
---|
636 | { |
---|
637 | var xa = x1, |
---|
638 | xb = x2, |
---|
639 | ya = y1, |
---|
640 | yb = y2; |
---|
641 | if (x2 < x1) { |
---|
642 | xa = x2; |
---|
643 | xb = x1; |
---|
644 | } |
---|
645 | if (y2 < y1) { |
---|
646 | ya = y2; |
---|
647 | yb = y1; |
---|
648 | } |
---|
649 | return [xa, ya, xb, yb]; |
---|
650 | } |
---|
651 | //}}} |
---|
652 | function getRect() //{{{ |
---|
653 | { |
---|
654 | var xsize = x2 - x1, |
---|
655 | ysize = y2 - y1, |
---|
656 | delta; |
---|
657 | |
---|
658 | if (xlimit && (Math.abs(xsize) > xlimit)) { |
---|
659 | x2 = (xsize > 0) ? (x1 + xlimit) : (x1 - xlimit); |
---|
660 | } |
---|
661 | if (ylimit && (Math.abs(ysize) > ylimit)) { |
---|
662 | y2 = (ysize > 0) ? (y1 + ylimit) : (y1 - ylimit); |
---|
663 | } |
---|
664 | |
---|
665 | if (ymin / yscale && (Math.abs(ysize) < ymin / yscale)) { |
---|
666 | y2 = (ysize > 0) ? (y1 + ymin / yscale) : (y1 - ymin / yscale); |
---|
667 | } |
---|
668 | if (xmin / xscale && (Math.abs(xsize) < xmin / xscale)) { |
---|
669 | x2 = (xsize > 0) ? (x1 + xmin / xscale) : (x1 - xmin / xscale); |
---|
670 | } |
---|
671 | |
---|
672 | if (x1 < 0) { |
---|
673 | x2 -= x1; |
---|
674 | x1 -= x1; |
---|
675 | } |
---|
676 | if (y1 < 0) { |
---|
677 | y2 -= y1; |
---|
678 | y1 -= y1; |
---|
679 | } |
---|
680 | if (x2 < 0) { |
---|
681 | x1 -= x2; |
---|
682 | x2 -= x2; |
---|
683 | } |
---|
684 | if (y2 < 0) { |
---|
685 | y1 -= y2; |
---|
686 | y2 -= y2; |
---|
687 | } |
---|
688 | if (x2 > boundx) { |
---|
689 | delta = x2 - boundx; |
---|
690 | x1 -= delta; |
---|
691 | x2 -= delta; |
---|
692 | } |
---|
693 | if (y2 > boundy) { |
---|
694 | delta = y2 - boundy; |
---|
695 | y1 -= delta; |
---|
696 | y2 -= delta; |
---|
697 | } |
---|
698 | if (x1 > boundx) { |
---|
699 | delta = x1 - boundy; |
---|
700 | y2 -= delta; |
---|
701 | y1 -= delta; |
---|
702 | } |
---|
703 | if (y1 > boundy) { |
---|
704 | delta = y1 - boundy; |
---|
705 | y2 -= delta; |
---|
706 | y1 -= delta; |
---|
707 | } |
---|
708 | |
---|
709 | return makeObj(flipCoords(x1, y1, x2, y2)); |
---|
710 | } |
---|
711 | //}}} |
---|
712 | function makeObj(a) //{{{ |
---|
713 | { |
---|
714 | return { |
---|
715 | x: a[0], |
---|
716 | y: a[1], |
---|
717 | x2: a[2], |
---|
718 | y2: a[3], |
---|
719 | w: a[2] - a[0], |
---|
720 | h: a[3] - a[1] |
---|
721 | }; |
---|
722 | } |
---|
723 | //}}} |
---|
724 | |
---|
725 | return { |
---|
726 | flipCoords: flipCoords, |
---|
727 | setPressed: setPressed, |
---|
728 | setCurrent: setCurrent, |
---|
729 | getOffset: getOffset, |
---|
730 | moveOffset: moveOffset, |
---|
731 | getCorner: getCorner, |
---|
732 | getFixed: getFixed |
---|
733 | }; |
---|
734 | }()); |
---|
735 | |
---|
736 | //}}} |
---|
737 | // Shade Module {{{ |
---|
738 | var Shade = (function() { |
---|
739 | var enabled = false, |
---|
740 | holder = $('<div />').css({ |
---|
741 | position: 'absolute', |
---|
742 | zIndex: 240, |
---|
743 | opacity: 0 |
---|
744 | }), |
---|
745 | shades = { |
---|
746 | top: createShade(), |
---|
747 | left: createShade().height(boundy), |
---|
748 | right: createShade().height(boundy), |
---|
749 | bottom: createShade() |
---|
750 | }; |
---|
751 | |
---|
752 | function resizeShades(w,h) { |
---|
753 | shades.left.css({ height: px(h) }); |
---|
754 | shades.right.css({ height: px(h) }); |
---|
755 | } |
---|
756 | function updateAuto() |
---|
757 | { |
---|
758 | return updateShade(Coords.getFixed()); |
---|
759 | } |
---|
760 | function updateShade(c) |
---|
761 | { |
---|
762 | shades.top.css({ |
---|
763 | left: px(c.x), |
---|
764 | width: px(c.w), |
---|
765 | height: px(c.y) |
---|
766 | }); |
---|
767 | shades.bottom.css({ |
---|
768 | top: px(c.y2), |
---|
769 | left: px(c.x), |
---|
770 | width: px(c.w), |
---|
771 | height: px(boundy-c.y2) |
---|
772 | }); |
---|
773 | shades.right.css({ |
---|
774 | left: px(c.x2), |
---|
775 | width: px(boundx-c.x2) |
---|
776 | }); |
---|
777 | shades.left.css({ |
---|
778 | width: px(c.x) |
---|
779 | }); |
---|
780 | } |
---|
781 | function createShade() { |
---|
782 | return $('<div />').css({ |
---|
783 | position: 'absolute', |
---|
784 | backgroundColor: options.shadeColor||options.bgColor |
---|
785 | }).appendTo(holder); |
---|
786 | } |
---|
787 | function enableShade() { |
---|
788 | if (!enabled) { |
---|
789 | enabled = true; |
---|
790 | holder.insertBefore($img); |
---|
791 | updateAuto(); |
---|
792 | Selection.setBgOpacity(1,0,1); |
---|
793 | $img2.hide(); |
---|
794 | |
---|
795 | setBgColor(options.shadeColor||options.bgColor,1); |
---|
796 | if (Selection.isAwake()) |
---|
797 | { |
---|
798 | setOpacity(options.bgOpacity,1); |
---|
799 | } |
---|
800 | else setOpacity(1,1); |
---|
801 | } |
---|
802 | } |
---|
803 | function setBgColor(color,now) { |
---|
804 | colorChangeMacro(getShades(),color,now); |
---|
805 | } |
---|
806 | function disableShade() { |
---|
807 | if (enabled) { |
---|
808 | holder.remove(); |
---|
809 | $img2.show(); |
---|
810 | enabled = false; |
---|
811 | if (Selection.isAwake()) { |
---|
812 | Selection.setBgOpacity(options.bgOpacity,1,1); |
---|
813 | } else { |
---|
814 | Selection.setBgOpacity(1,1,1); |
---|
815 | Selection.disableHandles(); |
---|
816 | } |
---|
817 | colorChangeMacro($div,0,1); |
---|
818 | } |
---|
819 | } |
---|
820 | function setOpacity(opacity,now) { |
---|
821 | if (enabled) { |
---|
822 | if (options.bgFade && !now) { |
---|
823 | holder.animate({ |
---|
824 | opacity: 1-opacity |
---|
825 | },{ |
---|
826 | queue: false, |
---|
827 | duration: options.fadeTime |
---|
828 | }); |
---|
829 | } |
---|
830 | else holder.css({opacity:1-opacity}); |
---|
831 | } |
---|
832 | } |
---|
833 | function refreshAll() { |
---|
834 | options.shade ? enableShade() : disableShade(); |
---|
835 | if (Selection.isAwake()) setOpacity(options.bgOpacity); |
---|
836 | } |
---|
837 | function getShades() { |
---|
838 | return holder.children(); |
---|
839 | } |
---|
840 | |
---|
841 | return { |
---|
842 | update: updateAuto, |
---|
843 | updateRaw: updateShade, |
---|
844 | getShades: getShades, |
---|
845 | setBgColor: setBgColor, |
---|
846 | enable: enableShade, |
---|
847 | disable: disableShade, |
---|
848 | resize: resizeShades, |
---|
849 | refresh: refreshAll, |
---|
850 | opacity: setOpacity |
---|
851 | }; |
---|
852 | }()); |
---|
853 | // }}} |
---|
854 | // Selection Module {{{ |
---|
855 | var Selection = (function () { |
---|
856 | var awake, |
---|
857 | hdep = 370, |
---|
858 | borders = {}, |
---|
859 | handle = {}, |
---|
860 | dragbar = {}, |
---|
861 | seehandles = false; |
---|
862 | |
---|
863 | // Private Methods |
---|
864 | function insertBorder(type) //{{{ |
---|
865 | { |
---|
866 | var jq = $('<div />').css({ |
---|
867 | position: 'absolute', |
---|
868 | opacity: options.borderOpacity |
---|
869 | }).addClass(cssClass(type)); |
---|
870 | $img_holder.append(jq); |
---|
871 | return jq; |
---|
872 | } |
---|
873 | //}}} |
---|
874 | function dragDiv(ord, zi) //{{{ |
---|
875 | { |
---|
876 | var jq = $('<div />').mousedown(createDragger(ord)).css({ |
---|
877 | cursor: ord + '-resize', |
---|
878 | position: 'absolute', |
---|
879 | zIndex: zi |
---|
880 | }).addClass('ord-'+ord); |
---|
881 | |
---|
882 | if (Touch.support) { |
---|
883 | jq.bind('touchstart.jcrop', Touch.createDragger(ord)); |
---|
884 | } |
---|
885 | |
---|
886 | $hdl_holder.append(jq); |
---|
887 | return jq; |
---|
888 | } |
---|
889 | //}}} |
---|
890 | function insertHandle(ord) //{{{ |
---|
891 | { |
---|
892 | var hs = options.handleSize, |
---|
893 | |
---|
894 | div = dragDiv(ord, hdep++).css({ |
---|
895 | opacity: options.handleOpacity |
---|
896 | }).addClass(cssClass('handle')); |
---|
897 | |
---|
898 | if (hs) { div.width(hs).height(hs); } |
---|
899 | |
---|
900 | return div; |
---|
901 | } |
---|
902 | //}}} |
---|
903 | function insertDragbar(ord) //{{{ |
---|
904 | { |
---|
905 | return dragDiv(ord, hdep++).addClass('jcrop-dragbar'); |
---|
906 | } |
---|
907 | //}}} |
---|
908 | function createDragbars(li) //{{{ |
---|
909 | { |
---|
910 | var i; |
---|
911 | for (i = 0; i < li.length; i++) { |
---|
912 | dragbar[li[i]] = insertDragbar(li[i]); |
---|
913 | } |
---|
914 | } |
---|
915 | //}}} |
---|
916 | function createBorders(li) //{{{ |
---|
917 | { |
---|
918 | var cl,i; |
---|
919 | for (i = 0; i < li.length; i++) { |
---|
920 | switch(li[i]){ |
---|
921 | case'n': cl='hline'; break; |
---|
922 | case's': cl='hline bottom'; break; |
---|
923 | case'e': cl='vline right'; break; |
---|
924 | case'w': cl='vline'; break; |
---|
925 | } |
---|
926 | borders[li[i]] = insertBorder(cl); |
---|
927 | } |
---|
928 | } |
---|
929 | //}}} |
---|
930 | function createHandles(li) //{{{ |
---|
931 | { |
---|
932 | var i; |
---|
933 | for (i = 0; i < li.length; i++) { |
---|
934 | handle[li[i]] = insertHandle(li[i]); |
---|
935 | } |
---|
936 | } |
---|
937 | //}}} |
---|
938 | function moveto(x, y) //{{{ |
---|
939 | { |
---|
940 | if (!options.shade) { |
---|
941 | $img2.css({ |
---|
942 | top: px(-y), |
---|
943 | left: px(-x) |
---|
944 | }); |
---|
945 | } |
---|
946 | $sel.css({ |
---|
947 | top: px(y), |
---|
948 | left: px(x) |
---|
949 | }); |
---|
950 | } |
---|
951 | //}}} |
---|
952 | function resize(w, h) //{{{ |
---|
953 | { |
---|
954 | $sel.width(Math.round(w)).height(Math.round(h)); |
---|
955 | } |
---|
956 | //}}} |
---|
957 | function refresh() //{{{ |
---|
958 | { |
---|
959 | var c = Coords.getFixed(); |
---|
960 | |
---|
961 | Coords.setPressed([c.x, c.y]); |
---|
962 | Coords.setCurrent([c.x2, c.y2]); |
---|
963 | |
---|
964 | updateVisible(); |
---|
965 | } |
---|
966 | //}}} |
---|
967 | |
---|
968 | // Internal Methods |
---|
969 | function updateVisible(select) //{{{ |
---|
970 | { |
---|
971 | if (awake) { |
---|
972 | return update(select); |
---|
973 | } |
---|
974 | } |
---|
975 | //}}} |
---|
976 | function update(select) //{{{ |
---|
977 | { |
---|
978 | var c = Coords.getFixed(); |
---|
979 | |
---|
980 | resize(c.w, c.h); |
---|
981 | moveto(c.x, c.y); |
---|
982 | if (options.shade) Shade.updateRaw(c); |
---|
983 | |
---|
984 | awake || show(); |
---|
985 | |
---|
986 | if (select) { |
---|
987 | options.onSelect.call(api, unscale(c)); |
---|
988 | } else { |
---|
989 | options.onChange.call(api, unscale(c)); |
---|
990 | } |
---|
991 | } |
---|
992 | //}}} |
---|
993 | function setBgOpacity(opacity,force,now) //{{{ |
---|
994 | { |
---|
995 | if (!awake && !force) return; |
---|
996 | if (options.bgFade && !now) { |
---|
997 | $img.animate({ |
---|
998 | opacity: opacity |
---|
999 | },{ |
---|
1000 | queue: false, |
---|
1001 | duration: options.fadeTime |
---|
1002 | }); |
---|
1003 | } else { |
---|
1004 | $img.css('opacity', opacity); |
---|
1005 | } |
---|
1006 | } |
---|
1007 | //}}} |
---|
1008 | function show() //{{{ |
---|
1009 | { |
---|
1010 | $sel.show(); |
---|
1011 | |
---|
1012 | if (options.shade) Shade.opacity(bgopacity); |
---|
1013 | else setBgOpacity(bgopacity,true); |
---|
1014 | |
---|
1015 | awake = true; |
---|
1016 | } |
---|
1017 | //}}} |
---|
1018 | function release() //{{{ |
---|
1019 | { |
---|
1020 | disableHandles(); |
---|
1021 | $sel.hide(); |
---|
1022 | |
---|
1023 | if (options.shade) Shade.opacity(1); |
---|
1024 | else setBgOpacity(1); |
---|
1025 | |
---|
1026 | awake = false; |
---|
1027 | options.onRelease.call(api); |
---|
1028 | } |
---|
1029 | //}}} |
---|
1030 | function showHandles() //{{{ |
---|
1031 | { |
---|
1032 | if (seehandles) { |
---|
1033 | $hdl_holder.show(); |
---|
1034 | } |
---|
1035 | } |
---|
1036 | //}}} |
---|
1037 | function enableHandles() //{{{ |
---|
1038 | { |
---|
1039 | seehandles = true; |
---|
1040 | if (options.allowResize) { |
---|
1041 | $hdl_holder.show(); |
---|
1042 | return true; |
---|
1043 | } |
---|
1044 | } |
---|
1045 | //}}} |
---|
1046 | function disableHandles() //{{{ |
---|
1047 | { |
---|
1048 | seehandles = false; |
---|
1049 | $hdl_holder.hide(); |
---|
1050 | } |
---|
1051 | //}}} |
---|
1052 | function animMode(v) //{{{ |
---|
1053 | { |
---|
1054 | if (v) { |
---|
1055 | animating = true; |
---|
1056 | disableHandles(); |
---|
1057 | } else { |
---|
1058 | animating = false; |
---|
1059 | enableHandles(); |
---|
1060 | } |
---|
1061 | } |
---|
1062 | //}}} |
---|
1063 | function done() //{{{ |
---|
1064 | { |
---|
1065 | animMode(false); |
---|
1066 | refresh(); |
---|
1067 | } |
---|
1068 | //}}} |
---|
1069 | // Insert draggable elements {{{ |
---|
1070 | // Insert border divs for outline |
---|
1071 | |
---|
1072 | if (options.dragEdges && $.isArray(options.createDragbars)) |
---|
1073 | createDragbars(options.createDragbars); |
---|
1074 | |
---|
1075 | if ($.isArray(options.createHandles)) |
---|
1076 | createHandles(options.createHandles); |
---|
1077 | |
---|
1078 | if (options.drawBorders && $.isArray(options.createBorders)) |
---|
1079 | createBorders(options.createBorders); |
---|
1080 | |
---|
1081 | //}}} |
---|
1082 | |
---|
1083 | // This is a hack for iOS5 to support drag/move touch functionality |
---|
1084 | $(document).bind('touchstart.jcrop-ios',function(e) { |
---|
1085 | if ($(e.currentTarget).hasClass('jcrop-tracker')) e.stopPropagation(); |
---|
1086 | }); |
---|
1087 | |
---|
1088 | var $track = newTracker().mousedown(createDragger('move')).css({ |
---|
1089 | cursor: 'move', |
---|
1090 | position: 'absolute', |
---|
1091 | zIndex: 360 |
---|
1092 | }); |
---|
1093 | |
---|
1094 | if (Touch.support) { |
---|
1095 | $track.bind('touchstart.jcrop', Touch.createDragger('move')); |
---|
1096 | } |
---|
1097 | |
---|
1098 | $img_holder.append($track); |
---|
1099 | disableHandles(); |
---|
1100 | |
---|
1101 | return { |
---|
1102 | updateVisible: updateVisible, |
---|
1103 | update: update, |
---|
1104 | release: release, |
---|
1105 | refresh: refresh, |
---|
1106 | isAwake: function () { |
---|
1107 | return awake; |
---|
1108 | }, |
---|
1109 | setCursor: function (cursor) { |
---|
1110 | $track.css('cursor', cursor); |
---|
1111 | }, |
---|
1112 | enableHandles: enableHandles, |
---|
1113 | enableOnly: function () { |
---|
1114 | seehandles = true; |
---|
1115 | }, |
---|
1116 | showHandles: showHandles, |
---|
1117 | disableHandles: disableHandles, |
---|
1118 | animMode: animMode, |
---|
1119 | setBgOpacity: setBgOpacity, |
---|
1120 | done: done |
---|
1121 | }; |
---|
1122 | }()); |
---|
1123 | |
---|
1124 | //}}} |
---|
1125 | // Tracker Module {{{ |
---|
1126 | var Tracker = (function () { |
---|
1127 | var onMove = function () {}, |
---|
1128 | onDone = function () {}, |
---|
1129 | trackDoc = options.trackDocument; |
---|
1130 | |
---|
1131 | function toFront(touch) //{{{ |
---|
1132 | { |
---|
1133 | $trk.css({ |
---|
1134 | zIndex: 450 |
---|
1135 | }); |
---|
1136 | |
---|
1137 | if (touch) |
---|
1138 | $(document) |
---|
1139 | .bind('touchmove.jcrop', trackTouchMove) |
---|
1140 | .bind('touchend.jcrop', trackTouchEnd); |
---|
1141 | |
---|
1142 | else if (trackDoc) |
---|
1143 | $(document) |
---|
1144 | .bind('mousemove.jcrop',trackMove) |
---|
1145 | .bind('mouseup.jcrop',trackUp); |
---|
1146 | } |
---|
1147 | //}}} |
---|
1148 | function toBack() //{{{ |
---|
1149 | { |
---|
1150 | $trk.css({ |
---|
1151 | zIndex: 290 |
---|
1152 | }); |
---|
1153 | $(document).unbind('.jcrop'); |
---|
1154 | } |
---|
1155 | //}}} |
---|
1156 | function trackMove(e) //{{{ |
---|
1157 | { |
---|
1158 | onMove(mouseAbs(e)); |
---|
1159 | return false; |
---|
1160 | } |
---|
1161 | //}}} |
---|
1162 | function trackUp(e) //{{{ |
---|
1163 | { |
---|
1164 | e.preventDefault(); |
---|
1165 | e.stopPropagation(); |
---|
1166 | |
---|
1167 | if (btndown) { |
---|
1168 | btndown = false; |
---|
1169 | |
---|
1170 | onDone(mouseAbs(e)); |
---|
1171 | |
---|
1172 | if (Selection.isAwake()) { |
---|
1173 | options.onSelect.call(api, unscale(Coords.getFixed())); |
---|
1174 | } |
---|
1175 | |
---|
1176 | toBack(); |
---|
1177 | onMove = function () {}; |
---|
1178 | onDone = function () {}; |
---|
1179 | } |
---|
1180 | |
---|
1181 | return false; |
---|
1182 | } |
---|
1183 | //}}} |
---|
1184 | function activateHandlers(move, done, touch) //{{{ |
---|
1185 | { |
---|
1186 | btndown = true; |
---|
1187 | onMove = move; |
---|
1188 | onDone = done; |
---|
1189 | toFront(touch); |
---|
1190 | return false; |
---|
1191 | } |
---|
1192 | //}}} |
---|
1193 | function trackTouchMove(e) //{{{ |
---|
1194 | { |
---|
1195 | onMove(mouseAbs(Touch.cfilter(e))); |
---|
1196 | return false; |
---|
1197 | } |
---|
1198 | //}}} |
---|
1199 | function trackTouchEnd(e) //{{{ |
---|
1200 | { |
---|
1201 | return trackUp(Touch.cfilter(e)); |
---|
1202 | } |
---|
1203 | //}}} |
---|
1204 | function setCursor(t) //{{{ |
---|
1205 | { |
---|
1206 | $trk.css('cursor', t); |
---|
1207 | } |
---|
1208 | //}}} |
---|
1209 | |
---|
1210 | if (!trackDoc) { |
---|
1211 | $trk.mousemove(trackMove).mouseup(trackUp).mouseout(trackUp); |
---|
1212 | } |
---|
1213 | |
---|
1214 | $img.before($trk); |
---|
1215 | return { |
---|
1216 | activateHandlers: activateHandlers, |
---|
1217 | setCursor: setCursor |
---|
1218 | }; |
---|
1219 | }()); |
---|
1220 | //}}} |
---|
1221 | // KeyManager Module {{{ |
---|
1222 | var KeyManager = (function () { |
---|
1223 | var $keymgr = $('<input type="radio" />').css({ |
---|
1224 | position: 'fixed', |
---|
1225 | left: '-120px', |
---|
1226 | width: '12px' |
---|
1227 | }).addClass('jcrop-keymgr'), |
---|
1228 | |
---|
1229 | $keywrap = $('<div />').css({ |
---|
1230 | position: 'absolute', |
---|
1231 | overflow: 'hidden' |
---|
1232 | }).append($keymgr); |
---|
1233 | |
---|
1234 | function watchKeys() //{{{ |
---|
1235 | { |
---|
1236 | if (options.keySupport) { |
---|
1237 | $keymgr.show(); |
---|
1238 | $keymgr.focus(); |
---|
1239 | } |
---|
1240 | } |
---|
1241 | //}}} |
---|
1242 | function onBlur(e) //{{{ |
---|
1243 | { |
---|
1244 | $keymgr.hide(); |
---|
1245 | } |
---|
1246 | //}}} |
---|
1247 | function doNudge(e, x, y) //{{{ |
---|
1248 | { |
---|
1249 | if (options.allowMove) { |
---|
1250 | Coords.moveOffset([x, y]); |
---|
1251 | Selection.updateVisible(true); |
---|
1252 | } |
---|
1253 | e.preventDefault(); |
---|
1254 | e.stopPropagation(); |
---|
1255 | } |
---|
1256 | //}}} |
---|
1257 | function parseKey(e) //{{{ |
---|
1258 | { |
---|
1259 | if (e.ctrlKey || e.metaKey) { |
---|
1260 | return true; |
---|
1261 | } |
---|
1262 | shift_down = e.shiftKey ? true : false; |
---|
1263 | var nudge = shift_down ? 10 : 1; |
---|
1264 | |
---|
1265 | switch (e.keyCode) { |
---|
1266 | case 37: |
---|
1267 | doNudge(e, -nudge, 0); |
---|
1268 | break; |
---|
1269 | case 39: |
---|
1270 | doNudge(e, nudge, 0); |
---|
1271 | break; |
---|
1272 | case 38: |
---|
1273 | doNudge(e, 0, -nudge); |
---|
1274 | break; |
---|
1275 | case 40: |
---|
1276 | doNudge(e, 0, nudge); |
---|
1277 | break; |
---|
1278 | case 27: |
---|
1279 | if (options.allowSelect) Selection.release(); |
---|
1280 | break; |
---|
1281 | case 9: |
---|
1282 | return true; |
---|
1283 | } |
---|
1284 | |
---|
1285 | return false; |
---|
1286 | } |
---|
1287 | //}}} |
---|
1288 | |
---|
1289 | if (options.keySupport) { |
---|
1290 | $keymgr.keydown(parseKey).blur(onBlur); |
---|
1291 | if (ie6mode || !options.fixedSupport) { |
---|
1292 | $keymgr.css({ |
---|
1293 | position: 'absolute', |
---|
1294 | left: '-20px' |
---|
1295 | }); |
---|
1296 | $keywrap.append($keymgr).insertBefore($img); |
---|
1297 | } else { |
---|
1298 | $keymgr.insertBefore($img); |
---|
1299 | } |
---|
1300 | } |
---|
1301 | |
---|
1302 | |
---|
1303 | return { |
---|
1304 | watchKeys: watchKeys |
---|
1305 | }; |
---|
1306 | }()); |
---|
1307 | //}}} |
---|
1308 | // }}} |
---|
1309 | // API methods {{{ |
---|
1310 | function setClass(cname) //{{{ |
---|
1311 | { |
---|
1312 | $div.removeClass().addClass(cssClass('holder')).addClass(cname); |
---|
1313 | } |
---|
1314 | //}}} |
---|
1315 | function animateTo(a, callback) //{{{ |
---|
1316 | { |
---|
1317 | var x1 = a[0] / xscale, |
---|
1318 | y1 = a[1] / yscale, |
---|
1319 | x2 = a[2] / xscale, |
---|
1320 | y2 = a[3] / yscale; |
---|
1321 | |
---|
1322 | if (animating) { |
---|
1323 | return; |
---|
1324 | } |
---|
1325 | |
---|
1326 | var animto = Coords.flipCoords(x1, y1, x2, y2), |
---|
1327 | c = Coords.getFixed(), |
---|
1328 | initcr = [c.x, c.y, c.x2, c.y2], |
---|
1329 | animat = initcr, |
---|
1330 | interv = options.animationDelay, |
---|
1331 | ix1 = animto[0] - initcr[0], |
---|
1332 | iy1 = animto[1] - initcr[1], |
---|
1333 | ix2 = animto[2] - initcr[2], |
---|
1334 | iy2 = animto[3] - initcr[3], |
---|
1335 | pcent = 0, |
---|
1336 | velocity = options.swingSpeed; |
---|
1337 | |
---|
1338 | x1 = animat[0]; |
---|
1339 | y1 = animat[1]; |
---|
1340 | x2 = animat[2]; |
---|
1341 | y2 = animat[3]; |
---|
1342 | |
---|
1343 | Selection.animMode(true); |
---|
1344 | var anim_timer; |
---|
1345 | |
---|
1346 | function queueAnimator() { |
---|
1347 | window.setTimeout(animator, interv); |
---|
1348 | } |
---|
1349 | var animator = (function () { |
---|
1350 | return function () { |
---|
1351 | pcent += (100 - pcent) / velocity; |
---|
1352 | |
---|
1353 | animat[0] = Math.round(x1 + ((pcent / 100) * ix1)); |
---|
1354 | animat[1] = Math.round(y1 + ((pcent / 100) * iy1)); |
---|
1355 | animat[2] = Math.round(x2 + ((pcent / 100) * ix2)); |
---|
1356 | animat[3] = Math.round(y2 + ((pcent / 100) * iy2)); |
---|
1357 | |
---|
1358 | if (pcent >= 99.8) { |
---|
1359 | pcent = 100; |
---|
1360 | } |
---|
1361 | if (pcent < 100) { |
---|
1362 | setSelectRaw(animat); |
---|
1363 | queueAnimator(); |
---|
1364 | } else { |
---|
1365 | Selection.done(); |
---|
1366 | Selection.animMode(false); |
---|
1367 | if (typeof(callback) === 'function') { |
---|
1368 | callback.call(api); |
---|
1369 | } |
---|
1370 | } |
---|
1371 | }; |
---|
1372 | }()); |
---|
1373 | queueAnimator(); |
---|
1374 | } |
---|
1375 | //}}} |
---|
1376 | function setSelect(rect) //{{{ |
---|
1377 | { |
---|
1378 | setSelectRaw([rect[0] / xscale, rect[1] / yscale, rect[2] / xscale, rect[3] / yscale]); |
---|
1379 | options.onSelect.call(api, unscale(Coords.getFixed())); |
---|
1380 | Selection.enableHandles(); |
---|
1381 | } |
---|
1382 | //}}} |
---|
1383 | function setSelectRaw(l) //{{{ |
---|
1384 | { |
---|
1385 | Coords.setPressed([l[0], l[1]]); |
---|
1386 | Coords.setCurrent([l[2], l[3]]); |
---|
1387 | Selection.update(); |
---|
1388 | } |
---|
1389 | //}}} |
---|
1390 | function tellSelect() //{{{ |
---|
1391 | { |
---|
1392 | return unscale(Coords.getFixed()); |
---|
1393 | } |
---|
1394 | //}}} |
---|
1395 | function tellScaled() //{{{ |
---|
1396 | { |
---|
1397 | return Coords.getFixed(); |
---|
1398 | } |
---|
1399 | //}}} |
---|
1400 | function setOptionsNew(opt) //{{{ |
---|
1401 | { |
---|
1402 | setOptions(opt); |
---|
1403 | interfaceUpdate(); |
---|
1404 | } |
---|
1405 | //}}} |
---|
1406 | function disableCrop() //{{{ |
---|
1407 | { |
---|
1408 | options.disabled = true; |
---|
1409 | Selection.disableHandles(); |
---|
1410 | Selection.setCursor('default'); |
---|
1411 | Tracker.setCursor('default'); |
---|
1412 | } |
---|
1413 | //}}} |
---|
1414 | function enableCrop() //{{{ |
---|
1415 | { |
---|
1416 | options.disabled = false; |
---|
1417 | interfaceUpdate(); |
---|
1418 | } |
---|
1419 | //}}} |
---|
1420 | function cancelCrop() //{{{ |
---|
1421 | { |
---|
1422 | Selection.done(); |
---|
1423 | Tracker.activateHandlers(null, null); |
---|
1424 | } |
---|
1425 | //}}} |
---|
1426 | function destroy() //{{{ |
---|
1427 | { |
---|
1428 | $div.remove(); |
---|
1429 | $origimg.show(); |
---|
1430 | $origimg.css('visibility','visible'); |
---|
1431 | $(obj).removeData('Jcrop'); |
---|
1432 | } |
---|
1433 | //}}} |
---|
1434 | function setImage(src, callback) //{{{ |
---|
1435 | { |
---|
1436 | Selection.release(); |
---|
1437 | disableCrop(); |
---|
1438 | var img = new Image(); |
---|
1439 | img.onload = function () { |
---|
1440 | var iw = img.width; |
---|
1441 | var ih = img.height; |
---|
1442 | var bw = options.boxWidth; |
---|
1443 | var bh = options.boxHeight; |
---|
1444 | $img.width(iw).height(ih); |
---|
1445 | $img.attr('src', src); |
---|
1446 | $img2.attr('src', src); |
---|
1447 | presize($img, bw, bh); |
---|
1448 | boundx = $img.width(); |
---|
1449 | boundy = $img.height(); |
---|
1450 | $img2.width(boundx).height(boundy); |
---|
1451 | $trk.width(boundx + (bound * 2)).height(boundy + (bound * 2)); |
---|
1452 | $div.width(boundx).height(boundy); |
---|
1453 | Shade.resize(boundx,boundy); |
---|
1454 | enableCrop(); |
---|
1455 | |
---|
1456 | if (typeof(callback) === 'function') { |
---|
1457 | callback.call(api); |
---|
1458 | } |
---|
1459 | }; |
---|
1460 | img.src = src; |
---|
1461 | } |
---|
1462 | //}}} |
---|
1463 | function colorChangeMacro($obj,color,now) { |
---|
1464 | var mycolor = color || options.bgColor; |
---|
1465 | if (options.bgFade && supportsColorFade() && options.fadeTime && !now) { |
---|
1466 | $obj.animate({ |
---|
1467 | backgroundColor: mycolor |
---|
1468 | }, { |
---|
1469 | queue: false, |
---|
1470 | duration: options.fadeTime |
---|
1471 | }); |
---|
1472 | } else { |
---|
1473 | $obj.css('backgroundColor', mycolor); |
---|
1474 | } |
---|
1475 | } |
---|
1476 | function interfaceUpdate(alt) //{{{ |
---|
1477 | // This method tweaks the interface based on options object. |
---|
1478 | // Called when options are changed and at end of initialization. |
---|
1479 | { |
---|
1480 | if (options.allowResize) { |
---|
1481 | if (alt) { |
---|
1482 | Selection.enableOnly(); |
---|
1483 | } else { |
---|
1484 | Selection.enableHandles(); |
---|
1485 | } |
---|
1486 | } else { |
---|
1487 | Selection.disableHandles(); |
---|
1488 | } |
---|
1489 | |
---|
1490 | Tracker.setCursor(options.allowSelect ? 'crosshair' : 'default'); |
---|
1491 | Selection.setCursor(options.allowMove ? 'move' : 'default'); |
---|
1492 | |
---|
1493 | if (options.hasOwnProperty('trueSize')) { |
---|
1494 | xscale = options.trueSize[0] / boundx; |
---|
1495 | yscale = options.trueSize[1] / boundy; |
---|
1496 | } |
---|
1497 | |
---|
1498 | if (options.hasOwnProperty('setSelect')) { |
---|
1499 | setSelect(options.setSelect); |
---|
1500 | Selection.done(); |
---|
1501 | delete(options.setSelect); |
---|
1502 | } |
---|
1503 | |
---|
1504 | Shade.refresh(); |
---|
1505 | |
---|
1506 | if (options.bgColor != bgcolor) { |
---|
1507 | colorChangeMacro( |
---|
1508 | options.shade? Shade.getShades(): $div, |
---|
1509 | options.shade? |
---|
1510 | (options.shadeColor || options.bgColor): |
---|
1511 | options.bgColor |
---|
1512 | ); |
---|
1513 | bgcolor = options.bgColor; |
---|
1514 | } |
---|
1515 | |
---|
1516 | if (bgopacity != options.bgOpacity) { |
---|
1517 | bgopacity = options.bgOpacity; |
---|
1518 | if (options.shade) Shade.refresh(); |
---|
1519 | else Selection.setBgOpacity(bgopacity); |
---|
1520 | } |
---|
1521 | |
---|
1522 | xlimit = options.maxSize[0] || 0; |
---|
1523 | ylimit = options.maxSize[1] || 0; |
---|
1524 | xmin = options.minSize[0] || 0; |
---|
1525 | ymin = options.minSize[1] || 0; |
---|
1526 | |
---|
1527 | if (options.hasOwnProperty('outerImage')) { |
---|
1528 | $img.attr('src', options.outerImage); |
---|
1529 | delete(options.outerImage); |
---|
1530 | } |
---|
1531 | |
---|
1532 | Selection.refresh(); |
---|
1533 | } |
---|
1534 | //}}} |
---|
1535 | //}}} |
---|
1536 | |
---|
1537 | if (Touch.support) $trk.bind('touchstart.jcrop', Touch.newSelection); |
---|
1538 | |
---|
1539 | $hdl_holder.hide(); |
---|
1540 | interfaceUpdate(true); |
---|
1541 | |
---|
1542 | var api = { |
---|
1543 | setImage: setImage, |
---|
1544 | animateTo: animateTo, |
---|
1545 | setSelect: setSelect, |
---|
1546 | setOptions: setOptionsNew, |
---|
1547 | tellSelect: tellSelect, |
---|
1548 | tellScaled: tellScaled, |
---|
1549 | setClass: setClass, |
---|
1550 | |
---|
1551 | disable: disableCrop, |
---|
1552 | enable: enableCrop, |
---|
1553 | cancel: cancelCrop, |
---|
1554 | release: Selection.release, |
---|
1555 | destroy: destroy, |
---|
1556 | |
---|
1557 | focus: KeyManager.watchKeys, |
---|
1558 | |
---|
1559 | getBounds: function () { |
---|
1560 | return [boundx * xscale, boundy * yscale]; |
---|
1561 | }, |
---|
1562 | getWidgetSize: function () { |
---|
1563 | return [boundx, boundy]; |
---|
1564 | }, |
---|
1565 | getScaleFactor: function () { |
---|
1566 | return [xscale, yscale]; |
---|
1567 | }, |
---|
1568 | getOptions: function() { |
---|
1569 | // careful: internal values are returned |
---|
1570 | return options; |
---|
1571 | }, |
---|
1572 | |
---|
1573 | ui: { |
---|
1574 | holder: $div, |
---|
1575 | selection: $sel |
---|
1576 | } |
---|
1577 | }; |
---|
1578 | |
---|
1579 | if (is_msie) $div.bind('selectstart', function () { return false; }); |
---|
1580 | |
---|
1581 | $origimg.data('Jcrop', api); |
---|
1582 | return api; |
---|
1583 | }; |
---|
1584 | $.fn.Jcrop = function (options, callback) //{{{ |
---|
1585 | { |
---|
1586 | var api; |
---|
1587 | // Iterate over each object, attach Jcrop |
---|
1588 | this.each(function () { |
---|
1589 | // If we've already attached to this object |
---|
1590 | if ($(this).data('Jcrop')) { |
---|
1591 | // The API can be requested this way (undocumented) |
---|
1592 | if (options === 'api') return $(this).data('Jcrop'); |
---|
1593 | // Otherwise, we just reset the options... |
---|
1594 | else $(this).data('Jcrop').setOptions(options); |
---|
1595 | } |
---|
1596 | // If we haven't been attached, preload and attach |
---|
1597 | else { |
---|
1598 | if (this.tagName == 'IMG') |
---|
1599 | $.Jcrop.Loader(this,function(){ |
---|
1600 | $(this).css({display:'block',visibility:'hidden'}); |
---|
1601 | api = $.Jcrop(this, options); |
---|
1602 | if ($.isFunction(callback)) callback.call(api); |
---|
1603 | }); |
---|
1604 | else { |
---|
1605 | $(this).css({display:'block',visibility:'hidden'}); |
---|
1606 | api = $.Jcrop(this, options); |
---|
1607 | if ($.isFunction(callback)) callback.call(api); |
---|
1608 | } |
---|
1609 | } |
---|
1610 | }); |
---|
1611 | |
---|
1612 | // Return "this" so the object is chainable (jQuery-style) |
---|
1613 | return this; |
---|
1614 | }; |
---|
1615 | //}}} |
---|
1616 | // $.Jcrop.Loader - basic image loader {{{ |
---|
1617 | |
---|
1618 | $.Jcrop.Loader = function(imgobj,success,error){ |
---|
1619 | var $img = $(imgobj), img = $img[0]; |
---|
1620 | |
---|
1621 | function completeCheck(){ |
---|
1622 | if (img.complete) { |
---|
1623 | $img.unbind('.jcloader'); |
---|
1624 | if ($.isFunction(success)) success.call(img); |
---|
1625 | } |
---|
1626 | else window.setTimeout(completeCheck,50); |
---|
1627 | } |
---|
1628 | |
---|
1629 | $img |
---|
1630 | .bind('load.jcloader',completeCheck) |
---|
1631 | .bind('error.jcloader',function(e){ |
---|
1632 | $img.unbind('.jcloader'); |
---|
1633 | if ($.isFunction(error)) error.call(img); |
---|
1634 | }); |
---|
1635 | |
---|
1636 | if (img.complete && $.isFunction(success)){ |
---|
1637 | $img.unbind('.jcloader'); |
---|
1638 | success.call(img); |
---|
1639 | } |
---|
1640 | }; |
---|
1641 | |
---|
1642 | //}}} |
---|
1643 | // Global Defaults {{{ |
---|
1644 | $.Jcrop.defaults = { |
---|
1645 | |
---|
1646 | // Basic Settings |
---|
1647 | allowSelect: true, |
---|
1648 | allowMove: true, |
---|
1649 | allowResize: true, |
---|
1650 | |
---|
1651 | trackDocument: true, |
---|
1652 | |
---|
1653 | // Styling Options |
---|
1654 | baseClass: 'jcrop', |
---|
1655 | addClass: null, |
---|
1656 | bgColor: 'black', |
---|
1657 | bgOpacity: 0.6, |
---|
1658 | bgFade: false, |
---|
1659 | borderOpacity: 0.4, |
---|
1660 | handleOpacity: 0.5, |
---|
1661 | handleSize: null, |
---|
1662 | |
---|
1663 | aspectRatio: 0, |
---|
1664 | keySupport: true, |
---|
1665 | createHandles: ['n','s','e','w','nw','ne','se','sw'], |
---|
1666 | createDragbars: ['n','s','e','w'], |
---|
1667 | createBorders: ['n','s','e','w'], |
---|
1668 | drawBorders: true, |
---|
1669 | dragEdges: true, |
---|
1670 | fixedSupport: true, |
---|
1671 | touchSupport: null, |
---|
1672 | |
---|
1673 | shade: null, |
---|
1674 | |
---|
1675 | boxWidth: 0, |
---|
1676 | boxHeight: 0, |
---|
1677 | boundary: 2, |
---|
1678 | fadeTime: 400, |
---|
1679 | animationDelay: 20, |
---|
1680 | swingSpeed: 3, |
---|
1681 | |
---|
1682 | minSelect: [0, 0], |
---|
1683 | maxSize: [0, 0], |
---|
1684 | minSize: [0, 0], |
---|
1685 | |
---|
1686 | // Callbacks / Event Handlers |
---|
1687 | onChange: function () {}, |
---|
1688 | onSelect: function () {}, |
---|
1689 | onDblClick: function () {}, |
---|
1690 | onRelease: function () {} |
---|
1691 | }; |
---|
1692 | |
---|
1693 | // }}} |
---|
1694 | }(jQuery)); |
---|