123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695 |
- /**
- * jquery.Jcrop.js v0.9.12
- * jQuery Image Cropping Plugin - released under MIT License
- * Author: Kelly Hallman <khallman@gmail.com>
- * http://github.com/tapmodo/Jcrop
- * Copyright (c) 2008-2013 Tapmodo Interactive LLC {{{
- *
- * Permission is hereby granted, free of charge, to any person
- * obtaining a copy of this software and associated documentation
- * files (the "Software"), to deal in the Software without
- * restriction, including without limitation the rights to use,
- * copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the
- * Software is furnished to do so, subject to the following
- * conditions:
- *
- * The above copyright notice and this permission notice shall be
- * included in all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
- * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
- * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
- * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
- * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
- * OTHER DEALINGS IN THE SOFTWARE.
- *
- * }}}
- */
- (function ($) {
- $.Jcrop = function (obj, opt) {
- var options = $.extend({}, $.Jcrop.defaults),
- docOffset,
- _ua = navigator.userAgent.toLowerCase(),
- is_msie = /msie/.test(_ua),
- ie6mode = /msie [1-6]\./.test(_ua);
- // Internal Methods {{{
- function px(n) {
- return Math.round(n) + 'px';
- }
- function cssClass(cl) {
- return options.baseClass + '-' + cl;
- }
- function supportsColorFade() {
- return $.fx.step.hasOwnProperty('backgroundColor');
- }
- function getPos(obj) //{{{
- {
- var pos = $(obj).offset();
- return [pos.left, pos.top];
- }
- //}}}
- function mouseAbs(e) //{{{
- {
- return [(e.pageX - docOffset[0]), (e.pageY - docOffset[1])];
- }
- //}}}
- function setOptions(opt) //{{{
- {
- if (typeof(opt) !== 'object') opt = {};
- options = $.extend(options, opt);
- $.each(['onChange','onSelect','onRelease','onDblClick'],function(i,e) {
- if (typeof(options[e]) !== 'function') options[e] = function () {};
- });
- }
- //}}}
- function startDragMode(mode, pos, touch) //{{{
- {
- docOffset = getPos($img);
- Tracker.setCursor(mode === 'move' ? mode : mode + '-resize');
- if (mode === 'move') {
- return Tracker.activateHandlers(createMover(pos), doneSelect, touch);
- }
- var fc = Coords.getFixed();
- var opp = oppLockCorner(mode);
- var opc = Coords.getCorner(oppLockCorner(opp));
- Coords.setPressed(Coords.getCorner(opp));
- Coords.setCurrent(opc);
- Tracker.activateHandlers(dragmodeHandler(mode, fc), doneSelect, touch);
- }
- //}}}
- function dragmodeHandler(mode, f) //{{{
- {
- return function (pos) {
- if (!options.aspectRatio) {
- switch (mode) {
- case 'e':
- pos[1] = f.y2;
- break;
- case 'w':
- pos[1] = f.y2;
- break;
- case 'n':
- pos[0] = f.x2;
- break;
- case 's':
- pos[0] = f.x2;
- break;
- }
- } else {
- switch (mode) {
- case 'e':
- pos[1] = f.y + 1;
- break;
- case 'w':
- pos[1] = f.y + 1;
- break;
- case 'n':
- pos[0] = f.x + 1;
- break;
- case 's':
- pos[0] = f.x + 1;
- break;
- }
- }
- Coords.setCurrent(pos);
- Selection.update();
- };
- }
- //}}}
- function createMover(pos) //{{{
- {
- var lloc = pos;
- KeyManager.watchKeys();
- return function (pos) {
- Coords.moveOffset([pos[0] - lloc[0], pos[1] - lloc[1]]);
- lloc = pos;
- Selection.update();
- };
- }
- //}}}
- function oppLockCorner(ord) //{{{
- {
- switch (ord) {
- case 'n':
- return 'sw';
- case 's':
- return 'nw';
- case 'e':
- return 'nw';
- case 'w':
- return 'ne';
- case 'ne':
- return 'sw';
- case 'nw':
- return 'se';
- case 'se':
- return 'nw';
- case 'sw':
- return 'ne';
- }
- }
- //}}}
- function createDragger(ord) //{{{
- {
- return function (e) {
- if (options.disabled) {
- return false;
- }
- if ((ord === 'move') && !options.allowMove) {
- return false;
- }
-
- // Fix position of crop area when dragged the very first time.
- // Necessary when crop image is in a hidden element when page is loaded.
- docOffset = getPos($img);
- btndown = true;
- startDragMode(ord, mouseAbs(e));
- e.stopPropagation();
- e.preventDefault();
- return false;
- };
- }
- //}}}
- function presize($obj, w, h) //{{{
- {
- var nw = $obj.width(),
- nh = $obj.height();
- if ((nw > w) && w > 0) {
- nw = w;
- nh = (w / $obj.width()) * $obj.height();
- }
- if ((nh > h) && h > 0) {
- nh = h;
- nw = (h / $obj.height()) * $obj.width();
- }
- xscale = $obj.width() / nw;
- yscale = $obj.height() / nh;
- $obj.width(nw).height(nh);
- }
- //}}}
- function unscale(c) //{{{
- {
- return {
- x: c.x * xscale,
- y: c.y * yscale,
- x2: c.x2 * xscale,
- y2: c.y2 * yscale,
- w: c.w * xscale,
- h: c.h * yscale
- };
- }
- //}}}
- function doneSelect(pos) //{{{
- {
- var c = Coords.getFixed();
- if ((c.w > options.minSelect[0]) && (c.h > options.minSelect[1])) {
- Selection.enableHandles();
- Selection.done();
- } else {
- Selection.release();
- }
- Tracker.setCursor(options.allowSelect ? 'crosshair' : 'default');
- }
- //}}}
- function newSelection(e) //{{{
- {
- if (options.disabled) {
- return false;
- }
- if (!options.allowSelect) {
- return false;
- }
- btndown = true;
- docOffset = getPos($img);
- Selection.disableHandles();
- Tracker.setCursor('crosshair');
- var pos = mouseAbs(e);
- Coords.setPressed(pos);
- Selection.update();
- Tracker.activateHandlers(selectDrag, doneSelect, e.type.substring(0,5)==='touch');
- KeyManager.watchKeys();
- e.stopPropagation();
- e.preventDefault();
- return false;
- }
- //}}}
- function selectDrag(pos) //{{{
- {
- Coords.setCurrent(pos);
- Selection.update();
- }
- //}}}
- function newTracker() //{{{
- {
- var trk = $('<div></div>').addClass(cssClass('tracker'));
- if (is_msie) {
- trk.css({
- opacity: 0,
- backgroundColor: 'white'
- });
- }
- return trk;
- }
- //}}}
- // }}}
- // Initialization {{{
- // Sanitize some options {{{
- if (typeof(obj) !== 'object') {
- obj = $(obj)[0];
- }
- if (typeof(opt) !== 'object') {
- opt = {};
- }
- // }}}
- setOptions(opt);
- // Initialize some jQuery objects {{{
- // The values are SET on the image(s) for the interface
- // If the original image has any of these set, they will be reset
- // However, if you destroy() the Jcrop instance the original image's
- // character in the DOM will be as you left it.
- var img_css = {
- border: 'none',
- visibility: 'visible',
- margin: 0,
- padding: 0,
- position: 'absolute',
- top: 0,
- left: 0
- };
- var $origimg = $(obj),
- img_mode = true;
- if (obj.tagName == 'IMG') {
- // Fix size of crop image.
- // Necessary when crop image is within a hidden element when page is loaded.
- if ($origimg[0].width != 0 && $origimg[0].height != 0) {
- // Obtain dimensions from contained img element.
- $origimg.width($origimg[0].width);
- $origimg.height($origimg[0].height);
- } else {
- // Obtain dimensions from temporary image in case the original is not loaded yet (e.g. IE 7.0).
- var tempImage = new Image();
- tempImage.src = $origimg[0].src;
- $origimg.width(tempImage.width);
- $origimg.height(tempImage.height);
- }
- var $img = $origimg.clone().removeAttr('id').css(img_css).show();
- $img.width($origimg.width());
- $img.height($origimg.height());
- $origimg.after($img).hide();
- } else {
- $img = $origimg.css(img_css).show();
- img_mode = false;
- if (options.shade === null) { options.shade = true; }
- }
- presize($img, options.boxWidth, options.boxHeight);
- var boundx = $img.width(),
- boundy = $img.height(),
-
-
- $div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({
- position: 'relative',
- backgroundColor: options.bgColor
- }).insertAfter($origimg).append($img);
- if (options.addClass) {
- $div.addClass(options.addClass);
- }
- var $img2 = $('<div />'),
- $img_holder = $('<div />')
- .width('100%').height('100%').css({
- zIndex: 310,
- position: 'absolute',
- overflow: 'hidden'
- }),
- $hdl_holder = $('<div />')
- .width('100%').height('100%').css('zIndex', 320),
- $sel = $('<div />')
- .css({
- position: 'absolute',
- zIndex: 600
- }).dblclick(function(){
- var c = Coords.getFixed();
- options.onDblClick.call(api,c);
- }).insertBefore($img).append($img_holder, $hdl_holder);
- if (img_mode) {
- $img2 = $('<img />')
- .attr('src', $img.attr('src')).css(img_css).width(boundx).height(boundy),
- $img_holder.append($img2);
- }
- if (ie6mode) {
- $sel.css({
- overflowY: 'hidden'
- });
- }
- var bound = options.boundary;
- var $trk = newTracker().width(boundx + (bound * 2)).height(boundy + (bound * 2)).css({
- position: 'absolute',
- top: px(-bound),
- left: px(-bound),
- zIndex: 290
- }).mousedown(newSelection);
- /* }}} */
- // Set more variables {{{
- var bgcolor = options.bgColor,
- bgopacity = options.bgOpacity,
- xlimit, ylimit, xmin, ymin, xscale, yscale, enabled = true,
- btndown, animating, shift_down;
- docOffset = getPos($img);
- // }}}
- // }}}
- // Internal Modules {{{
- // Touch Module {{{
- var Touch = (function () {
- // Touch support detection function adapted (under MIT License)
- // from code by Jeffrey Sambells - http://github.com/iamamused/
- function hasTouchSupport() {
- var support = {}, events = ['touchstart', 'touchmove', 'touchend'],
- el = document.createElement('div'), i;
- try {
- for(i=0; i<events.length; i++) {
- var eventName = events[i];
- eventName = 'on' + eventName;
- var isSupported = (eventName in el);
- if (!isSupported) {
- el.setAttribute(eventName, 'return;');
- isSupported = typeof el[eventName] == 'function';
- }
- support[events[i]] = isSupported;
- }
- return support.touchstart && support.touchend && support.touchmove;
- }
- catch(err) {
- return false;
- }
- }
- function detectSupport() {
- if ((options.touchSupport === true) || (options.touchSupport === false)) return options.touchSupport;
- else return hasTouchSupport();
- }
- return {
- createDragger: function (ord) {
- return function (e) {
- if (options.disabled) {
- return false;
- }
- if ((ord === 'move') && !options.allowMove) {
- return false;
- }
- docOffset = getPos($img);
- btndown = true;
- startDragMode(ord, mouseAbs(Touch.cfilter(e)), true);
- e.stopPropagation();
- e.preventDefault();
- return false;
- };
- },
- newSelection: function (e) {
- return newSelection(Touch.cfilter(e));
- },
- cfilter: function (e){
- e.pageX = e.originalEvent.changedTouches[0].pageX;
- e.pageY = e.originalEvent.changedTouches[0].pageY;
- return e;
- },
- isSupported: hasTouchSupport,
- support: detectSupport()
- };
- }());
- // }}}
- // Coords Module {{{
- var Coords = (function () {
- var x1 = 0,
- y1 = 0,
- x2 = 0,
- y2 = 0,
- ox, oy;
- function setPressed(pos) //{{{
- {
- pos = rebound(pos);
- x2 = x1 = pos[0];
- y2 = y1 = pos[1];
- }
- //}}}
- function setCurrent(pos) //{{{
- {
- pos = rebound(pos);
- ox = pos[0] - x2;
- oy = pos[1] - y2;
- x2 = pos[0];
- y2 = pos[1];
- }
- //}}}
- function getOffset() //{{{
- {
- return [ox, oy];
- }
- //}}}
- function moveOffset(offset) //{{{
- {
- var ox = offset[0],
- oy = offset[1];
- if (0 > x1 + ox) {
- ox -= ox + x1;
- }
- if (0 > y1 + oy) {
- oy -= oy + y1;
- }
- if (boundy < y2 + oy) {
- oy += boundy - (y2 + oy);
- }
- if (boundx < x2 + ox) {
- ox += boundx - (x2 + ox);
- }
- x1 += ox;
- x2 += ox;
- y1 += oy;
- y2 += oy;
- }
- //}}}
- function getCorner(ord) //{{{
- {
- var c = getFixed();
- switch (ord) {
- case 'ne':
- return [c.x2, c.y];
- case 'nw':
- return [c.x, c.y];
- case 'se':
- return [c.x2, c.y2];
- case 'sw':
- return [c.x, c.y2];
- }
- }
- //}}}
- function getFixed() //{{{
- {
- if (!options.aspectRatio) {
- return getRect();
- }
- // This function could use some optimization I think...
- var aspect = options.aspectRatio,
- min_x = options.minSize[0] / xscale,
-
-
- //min_y = options.minSize[1]/yscale,
- max_x = options.maxSize[0] / xscale,
- max_y = options.maxSize[1] / yscale,
- rw = x2 - x1,
- rh = y2 - y1,
- rwa = Math.abs(rw),
- rha = Math.abs(rh),
- real_ratio = rwa / rha,
- xx, yy, w, h;
- if (max_x === 0) {
- max_x = boundx * 10;
- }
- if (max_y === 0) {
- max_y = boundy * 10;
- }
- if (real_ratio < aspect) {
- yy = y2;
- w = rha * aspect;
- xx = rw < 0 ? x1 - w : w + x1;
- if (xx < 0) {
- xx = 0;
- h = Math.abs((xx - x1) / aspect);
- yy = rh < 0 ? y1 - h : h + y1;
- } else if (xx > boundx) {
- xx = boundx;
- h = Math.abs((xx - x1) / aspect);
- yy = rh < 0 ? y1 - h : h + y1;
- }
- } else {
- xx = x2;
- h = rwa / aspect;
- yy = rh < 0 ? y1 - h : y1 + h;
- if (yy < 0) {
- yy = 0;
- w = Math.abs((yy - y1) * aspect);
- xx = rw < 0 ? x1 - w : w + x1;
- } else if (yy > boundy) {
- yy = boundy;
- w = Math.abs(yy - y1) * aspect;
- xx = rw < 0 ? x1 - w : w + x1;
- }
- }
- // Magic %-)
- if (xx > x1) { // right side
- if (xx - x1 < min_x) {
- xx = x1 + min_x;
- } else if (xx - x1 > max_x) {
- xx = x1 + max_x;
- }
- if (yy > y1) {
- yy = y1 + (xx - x1) / aspect;
- } else {
- yy = y1 - (xx - x1) / aspect;
- }
- } else if (xx < x1) { // left side
- if (x1 - xx < min_x) {
- xx = x1 - min_x;
- } else if (x1 - xx > max_x) {
- xx = x1 - max_x;
- }
- if (yy > y1) {
- yy = y1 + (x1 - xx) / aspect;
- } else {
- yy = y1 - (x1 - xx) / aspect;
- }
- }
- if (xx < 0) {
- x1 -= xx;
- xx = 0;
- } else if (xx > boundx) {
- x1 -= xx - boundx;
- xx = boundx;
- }
- if (yy < 0) {
- y1 -= yy;
- yy = 0;
- } else if (yy > boundy) {
- y1 -= yy - boundy;
- yy = boundy;
- }
- return makeObj(flipCoords(x1, y1, xx, yy));
- }
- //}}}
- function rebound(p) //{{{
- {
- if (p[0] < 0) p[0] = 0;
- if (p[1] < 0) p[1] = 0;
- if (p[0] > boundx) p[0] = boundx;
- if (p[1] > boundy) p[1] = boundy;
- return [Math.round(p[0]), Math.round(p[1])];
- }
- //}}}
- function flipCoords(x1, y1, x2, y2) //{{{
- {
- var xa = x1,
- xb = x2,
- ya = y1,
- yb = y2;
- if (x2 < x1) {
- xa = x2;
- xb = x1;
- }
- if (y2 < y1) {
- ya = y2;
- yb = y1;
- }
- return [xa, ya, xb, yb];
- }
- //}}}
- function getRect() //{{{
- {
- var xsize = x2 - x1,
- ysize = y2 - y1,
- delta;
- if (xlimit && (Math.abs(xsize) > xlimit)) {
- x2 = (xsize > 0) ? (x1 + xlimit) : (x1 - xlimit);
- }
- if (ylimit && (Math.abs(ysize) > ylimit)) {
- y2 = (ysize > 0) ? (y1 + ylimit) : (y1 - ylimit);
- }
- if (ymin / yscale && (Math.abs(ysize) < ymin / yscale)) {
- y2 = (ysize > 0) ? (y1 + ymin / yscale) : (y1 - ymin / yscale);
- }
- if (xmin / xscale && (Math.abs(xsize) < xmin / xscale)) {
- x2 = (xsize > 0) ? (x1 + xmin / xscale) : (x1 - xmin / xscale);
- }
- if (x1 < 0) {
- x2 -= x1;
- x1 -= x1;
- }
- if (y1 < 0) {
- y2 -= y1;
- y1 -= y1;
- }
- if (x2 < 0) {
- x1 -= x2;
- x2 -= x2;
- }
- if (y2 < 0) {
- y1 -= y2;
- y2 -= y2;
- }
- if (x2 > boundx) {
- delta = x2 - boundx;
- x1 -= delta;
- x2 -= delta;
- }
- if (y2 > boundy) {
- delta = y2 - boundy;
- y1 -= delta;
- y2 -= delta;
- }
- if (x1 > boundx) {
- delta = x1 - boundy;
- y2 -= delta;
- y1 -= delta;
- }
- if (y1 > boundy) {
- delta = y1 - boundy;
- y2 -= delta;
- y1 -= delta;
- }
- return makeObj(flipCoords(x1, y1, x2, y2));
- }
- //}}}
- function makeObj(a) //{{{
- {
- return {
- x: a[0],
- y: a[1],
- x2: a[2],
- y2: a[3],
- w: a[2] - a[0],
- h: a[3] - a[1]
- };
- }
- //}}}
- return {
- flipCoords: flipCoords,
- setPressed: setPressed,
- setCurrent: setCurrent,
- getOffset: getOffset,
- moveOffset: moveOffset,
- getCorner: getCorner,
- getFixed: getFixed
- };
- }());
- //}}}
- // Shade Module {{{
- var Shade = (function() {
- var enabled = false,
- holder = $('<div />').css({
- position: 'absolute',
- zIndex: 240,
- opacity: 0
- }),
- shades = {
- top: createShade(),
- left: createShade().height(boundy),
- right: createShade().height(boundy),
- bottom: createShade()
- };
- function resizeShades(w,h) {
- shades.left.css({ height: px(h) });
- shades.right.css({ height: px(h) });
- }
- function updateAuto()
- {
- return updateShade(Coords.getFixed());
- }
- function updateShade(c)
- {
- shades.top.css({
- left: px(c.x),
- width: px(c.w),
- height: px(c.y)
- });
- shades.bottom.css({
- top: px(c.y2),
- left: px(c.x),
- width: px(c.w),
- height: px(boundy-c.y2)
- });
- shades.right.css({
- left: px(c.x2),
- width: px(boundx-c.x2)
- });
- shades.left.css({
- width: px(c.x)
- });
- }
- function createShade() {
- return $('<div />').css({
- position: 'absolute',
- backgroundColor: options.shadeColor||options.bgColor
- }).appendTo(holder);
- }
- function enableShade() {
- if (!enabled) {
- enabled = true;
- holder.insertBefore($img);
- updateAuto();
- Selection.setBgOpacity(1,0,1);
- $img2.hide();
- setBgColor(options.shadeColor||options.bgColor,1);
- if (Selection.isAwake())
- {
- setOpacity(options.bgOpacity,1);
- }
- else setOpacity(1,1);
- }
- }
- function setBgColor(color,now) {
- colorChangeMacro(getShades(),color,now);
- }
- function disableShade() {
- if (enabled) {
- holder.remove();
- $img2.show();
- enabled = false;
- if (Selection.isAwake()) {
- Selection.setBgOpacity(options.bgOpacity,1,1);
- } else {
- Selection.setBgOpacity(1,1,1);
- Selection.disableHandles();
- }
- colorChangeMacro($div,0,1);
- }
- }
- function setOpacity(opacity,now) {
- if (enabled) {
- if (options.bgFade && !now) {
- holder.animate({
- opacity: 1-opacity
- },{
- queue: false,
- duration: options.fadeTime
- });
- }
- else holder.css({opacity:1-opacity});
- }
- }
- function refreshAll() {
- options.shade ? enableShade() : disableShade();
- if (Selection.isAwake()) setOpacity(options.bgOpacity);
- }
- function getShades() {
- return holder.children();
- }
- return {
- update: updateAuto,
- updateRaw: updateShade,
- getShades: getShades,
- setBgColor: setBgColor,
- enable: enableShade,
- disable: disableShade,
- resize: resizeShades,
- refresh: refreshAll,
- opacity: setOpacity
- };
- }());
- // }}}
- // Selection Module {{{
- var Selection = (function () {
- var awake,
- hdep = 370,
- borders = {},
- handle = {},
- dragbar = {},
- seehandles = false;
- // Private Methods
- function insertBorder(type) //{{{
- {
- var jq = $('<div />').css({
- position: 'absolute',
- opacity: options.borderOpacity
- }).addClass(cssClass(type));
- $img_holder.append(jq);
- return jq;
- }
- //}}}
- function dragDiv(ord, zi) //{{{
- {
- var jq = $('<div />').mousedown(createDragger(ord)).css({
- cursor: ord + '-resize',
- position: 'absolute',
- zIndex: zi
- }).addClass('ord-'+ord);
- if (Touch.support) {
- jq.bind('touchstart.jcrop', Touch.createDragger(ord));
- }
- $hdl_holder.append(jq);
- return jq;
- }
- //}}}
- function insertHandle(ord) //{{{
- {
- var hs = options.handleSize,
- div = dragDiv(ord, hdep++).css({
- opacity: options.handleOpacity
- }).addClass(cssClass('handle'));
- if (hs) { div.width(hs).height(hs); }
- return div;
- }
- //}}}
- function insertDragbar(ord) //{{{
- {
- return dragDiv(ord, hdep++).addClass('jcrop-dragbar');
- }
- //}}}
- function createDragbars(li) //{{{
- {
- var i;
- for (i = 0; i < li.length; i++) {
- dragbar[li[i]] = insertDragbar(li[i]);
- }
- }
- //}}}
- function createBorders(li) //{{{
- {
- var cl,i;
- for (i = 0; i < li.length; i++) {
- switch(li[i]){
- case'n': cl='hline'; break;
- case's': cl='hline bottom'; break;
- case'e': cl='vline right'; break;
- case'w': cl='vline'; break;
- }
- borders[li[i]] = insertBorder(cl);
- }
- }
- //}}}
- function createHandles(li) //{{{
- {
- var i;
- for (i = 0; i < li.length; i++) {
- handle[li[i]] = insertHandle(li[i]);
- }
- }
- //}}}
- function moveto(x, y) //{{{
- {
- if (!options.shade) {
- $img2.css({
- top: px(-y),
- left: px(-x)
- });
- }
- $sel.css({
- top: px(y),
- left: px(x)
- });
- }
- //}}}
- function resize(w, h) //{{{
- {
- $sel.width(Math.round(w)).height(Math.round(h));
- }
- //}}}
- function refresh() //{{{
- {
- var c = Coords.getFixed();
- Coords.setPressed([c.x, c.y]);
- Coords.setCurrent([c.x2, c.y2]);
- updateVisible();
- }
- //}}}
- // Internal Methods
- function updateVisible(select) //{{{
- {
- if (awake) {
- return update(select);
- }
- }
- //}}}
- function update(select) //{{{
- {
- var c = Coords.getFixed();
- resize(c.w, c.h);
- moveto(c.x, c.y);
- if (options.shade) Shade.updateRaw(c);
- awake || show();
- if (select) {
- options.onSelect.call(api, unscale(c));
- } else {
- options.onChange.call(api, unscale(c));
- }
- }
- //}}}
- function setBgOpacity(opacity,force,now) //{{{
- {
- if (!awake && !force) return;
- if (options.bgFade && !now) {
- $img.animate({
- opacity: opacity
- },{
- queue: false,
- duration: options.fadeTime
- });
- } else {
- $img.css('opacity', opacity);
- }
- }
- //}}}
- function show() //{{{
- {
- $sel.show();
- if (options.shade) Shade.opacity(bgopacity);
- else setBgOpacity(bgopacity,true);
- awake = true;
- }
- //}}}
- function release() //{{{
- {
- disableHandles();
- $sel.hide();
- if (options.shade) Shade.opacity(1);
- else setBgOpacity(1);
- awake = false;
- options.onRelease.call(api);
- }
- //}}}
- function showHandles() //{{{
- {
- if (seehandles) {
- $hdl_holder.show();
- }
- }
- //}}}
- function enableHandles() //{{{
- {
- seehandles = true;
- if (options.allowResize) {
- $hdl_holder.show();
- return true;
- }
- }
- //}}}
- function disableHandles() //{{{
- {
- seehandles = false;
- $hdl_holder.hide();
- }
- //}}}
- function animMode(v) //{{{
- {
- if (v) {
- animating = true;
- disableHandles();
- } else {
- animating = false;
- enableHandles();
- }
- }
- //}}}
- function done() //{{{
- {
- animMode(false);
- refresh();
- }
- //}}}
- // Insert draggable elements {{{
- // Insert border divs for outline
- if (options.dragEdges && $.isArray(options.createDragbars))
- createDragbars(options.createDragbars);
- if ($.isArray(options.createHandles))
- createHandles(options.createHandles);
- if (options.drawBorders && $.isArray(options.createBorders))
- createBorders(options.createBorders);
- //}}}
- // This is a hack for iOS5 to support drag/move touch functionality
- $(document).bind('touchstart.jcrop-ios',function(e) {
- if ($(e.currentTarget).hasClass('jcrop-tracker')) e.stopPropagation();
- });
- var $track = newTracker().mousedown(createDragger('move')).css({
- cursor: 'move',
- position: 'absolute',
- zIndex: 360
- });
- if (Touch.support) {
- $track.bind('touchstart.jcrop', Touch.createDragger('move'));
- }
- $img_holder.append($track);
- disableHandles();
- return {
- updateVisible: updateVisible,
- update: update,
- release: release,
- refresh: refresh,
- isAwake: function () {
- return awake;
- },
- setCursor: function (cursor) {
- $track.css('cursor', cursor);
- },
- enableHandles: enableHandles,
- enableOnly: function () {
- seehandles = true;
- },
- showHandles: showHandles,
- disableHandles: disableHandles,
- animMode: animMode,
- setBgOpacity: setBgOpacity,
- done: done
- };
- }());
-
- //}}}
- // Tracker Module {{{
- var Tracker = (function () {
- var onMove = function () {},
- onDone = function () {},
- trackDoc = options.trackDocument;
- function toFront(touch) //{{{
- {
- $trk.css({
- zIndex: 450
- });
- if (touch)
- $(document)
- .bind('touchmove.jcrop', trackTouchMove)
- .bind('touchend.jcrop', trackTouchEnd);
- else if (trackDoc)
- $(document)
- .bind('mousemove.jcrop',trackMove)
- .bind('mouseup.jcrop',trackUp);
- }
- //}}}
- function toBack() //{{{
- {
- $trk.css({
- zIndex: 290
- });
- $(document).unbind('.jcrop');
- }
- //}}}
- function trackMove(e) //{{{
- {
- onMove(mouseAbs(e));
- return false;
- }
- //}}}
- function trackUp(e) //{{{
- {
- e.preventDefault();
- e.stopPropagation();
- if (btndown) {
- btndown = false;
- onDone(mouseAbs(e));
- if (Selection.isAwake()) {
- options.onSelect.call(api, unscale(Coords.getFixed()));
- }
- toBack();
- onMove = function () {};
- onDone = function () {};
- }
- return false;
- }
- //}}}
- function activateHandlers(move, done, touch) //{{{
- {
- btndown = true;
- onMove = move;
- onDone = done;
- toFront(touch);
- return false;
- }
- //}}}
- function trackTouchMove(e) //{{{
- {
- onMove(mouseAbs(Touch.cfilter(e)));
- return false;
- }
- //}}}
- function trackTouchEnd(e) //{{{
- {
- return trackUp(Touch.cfilter(e));
- }
- //}}}
- function setCursor(t) //{{{
- {
- $trk.css('cursor', t);
- }
- //}}}
- if (!trackDoc) {
- $trk.mousemove(trackMove).mouseup(trackUp).mouseout(trackUp);
- }
- $img.before($trk);
- return {
- activateHandlers: activateHandlers,
- setCursor: setCursor
- };
- }());
- //}}}
- // KeyManager Module {{{
- var KeyManager = (function () {
- var $keymgr = $('<input type="radio" />').css({
- position: 'fixed',
- left: '-120px',
- width: '12px'
- }).addClass('jcrop-keymgr'),
- $keywrap = $('<div />').css({
- position: 'absolute',
- overflow: 'hidden'
- }).append($keymgr);
- function watchKeys() //{{{
- {
- if (options.keySupport) {
- $keymgr.show();
- $keymgr.focus();
- }
- }
- //}}}
- function onBlur(e) //{{{
- {
- $keymgr.hide();
- }
- //}}}
- function doNudge(e, x, y) //{{{
- {
- if (options.allowMove) {
- Coords.moveOffset([x, y]);
- Selection.updateVisible(true);
- }
- e.preventDefault();
- e.stopPropagation();
- }
- //}}}
- function parseKey(e) //{{{
- {
- if (e.ctrlKey || e.metaKey) {
- return true;
- }
- shift_down = e.shiftKey ? true : false;
- var nudge = shift_down ? 10 : 1;
- switch (e.keyCode) {
- case 37:
- doNudge(e, -nudge, 0);
- break;
- case 39:
- doNudge(e, nudge, 0);
- break;
- case 38:
- doNudge(e, 0, -nudge);
- break;
- case 40:
- doNudge(e, 0, nudge);
- break;
- case 27:
- if (options.allowSelect) Selection.release();
- break;
- case 9:
- return true;
- }
- return false;
- }
- //}}}
- if (options.keySupport) {
- $keymgr.keydown(parseKey).blur(onBlur);
- if (ie6mode || !options.fixedSupport) {
- $keymgr.css({
- position: 'absolute',
- left: '-20px'
- });
- $keywrap.append($keymgr).insertBefore($img);
- } else {
- $keymgr.insertBefore($img);
- }
- }
- return {
- watchKeys: watchKeys
- };
- }());
- //}}}
- // }}}
- // API methods {{{
- function setClass(cname) //{{{
- {
- $div.removeClass().addClass(cssClass('holder')).addClass(cname);
- }
- //}}}
- function animateTo(a, callback) //{{{
- {
- var x1 = a[0] / xscale,
- y1 = a[1] / yscale,
- x2 = a[2] / xscale,
- y2 = a[3] / yscale;
- if (animating) {
- return;
- }
- var animto = Coords.flipCoords(x1, y1, x2, y2),
- c = Coords.getFixed(),
- initcr = [c.x, c.y, c.x2, c.y2],
- animat = initcr,
- interv = options.animationDelay,
- ix1 = animto[0] - initcr[0],
- iy1 = animto[1] - initcr[1],
- ix2 = animto[2] - initcr[2],
- iy2 = animto[3] - initcr[3],
- pcent = 0,
- velocity = options.swingSpeed;
- x1 = animat[0];
- y1 = animat[1];
- x2 = animat[2];
- y2 = animat[3];
- Selection.animMode(true);
- var anim_timer;
- function queueAnimator() {
- window.setTimeout(animator, interv);
- }
- var animator = (function () {
- return function () {
- pcent += (100 - pcent) / velocity;
- animat[0] = Math.round(x1 + ((pcent / 100) * ix1));
- animat[1] = Math.round(y1 + ((pcent / 100) * iy1));
- animat[2] = Math.round(x2 + ((pcent / 100) * ix2));
- animat[3] = Math.round(y2 + ((pcent / 100) * iy2));
- if (pcent >= 99.8) {
- pcent = 100;
- }
- if (pcent < 100) {
- setSelectRaw(animat);
- queueAnimator();
- } else {
- Selection.done();
- Selection.animMode(false);
- if (typeof(callback) === 'function') {
- callback.call(api);
- }
- }
- };
- }());
- queueAnimator();
- }
- //}}}
- function setSelect(rect) //{{{
- {
- setSelectRaw([rect[0] / xscale, rect[1] / yscale, rect[2] / xscale, rect[3] / yscale]);
- options.onSelect.call(api, unscale(Coords.getFixed()));
- Selection.enableHandles();
- }
- //}}}
- function setSelectRaw(l) //{{{
- {
- Coords.setPressed([l[0], l[1]]);
- Coords.setCurrent([l[2], l[3]]);
- Selection.update();
- }
- //}}}
- function tellSelect() //{{{
- {
- return unscale(Coords.getFixed());
- }
- //}}}
- function tellScaled() //{{{
- {
- return Coords.getFixed();
- }
- //}}}
- function setOptionsNew(opt) //{{{
- {
- setOptions(opt);
- interfaceUpdate();
- }
- //}}}
- function disableCrop() //{{{
- {
- options.disabled = true;
- Selection.disableHandles();
- Selection.setCursor('default');
- Tracker.setCursor('default');
- }
- //}}}
- function enableCrop() //{{{
- {
- options.disabled = false;
- interfaceUpdate();
- }
- //}}}
- function cancelCrop() //{{{
- {
- Selection.done();
- Tracker.activateHandlers(null, null);
- }
- //}}}
- function destroy() //{{{
- {
- $div.remove();
- $origimg.show();
- $origimg.css('visibility','visible');
- $(obj).removeData('Jcrop');
- }
- //}}}
- function setImage(src, callback) //{{{
- {
- Selection.release();
- disableCrop();
- var img = new Image();
- img.onload = function () {
- var iw = img.width;
- var ih = img.height;
- var bw = options.boxWidth;
- var bh = options.boxHeight;
- $img.width(iw).height(ih);
- $img.attr('src', src);
- $img2.attr('src', src);
- presize($img, bw, bh);
- boundx = $img.width();
- boundy = $img.height();
- $img2.width(boundx).height(boundy);
- $trk.width(boundx + (bound * 2)).height(boundy + (bound * 2));
- $div.width(boundx).height(boundy);
- Shade.resize(boundx,boundy);
- enableCrop();
- if (typeof(callback) === 'function') {
- callback.call(api);
- }
- };
- img.src = src;
- }
- //}}}
- function colorChangeMacro($obj,color,now) {
- var mycolor = color || options.bgColor;
- if (options.bgFade && supportsColorFade() && options.fadeTime && !now) {
- $obj.animate({
- backgroundColor: mycolor
- }, {
- queue: false,
- duration: options.fadeTime
- });
- } else {
- $obj.css('backgroundColor', mycolor);
- }
- }
- function interfaceUpdate(alt) //{{{
- // This method tweaks the interface based on options object.
- // Called when options are changed and at end of initialization.
- {
- if (options.allowResize) {
- if (alt) {
- Selection.enableOnly();
- } else {
- Selection.enableHandles();
- }
- } else {
- Selection.disableHandles();
- }
- Tracker.setCursor(options.allowSelect ? 'crosshair' : 'default');
- Selection.setCursor(options.allowMove ? 'move' : 'default');
- if (options.hasOwnProperty('trueSize')) {
- xscale = options.trueSize[0] / boundx;
- yscale = options.trueSize[1] / boundy;
- }
- if (options.hasOwnProperty('setSelect')) {
- setSelect(options.setSelect);
- Selection.done();
- delete(options.setSelect);
- }
- Shade.refresh();
- if (options.bgColor != bgcolor) {
- colorChangeMacro(
- options.shade? Shade.getShades(): $div,
- options.shade?
- (options.shadeColor || options.bgColor):
- options.bgColor
- );
- bgcolor = options.bgColor;
- }
- if (bgopacity != options.bgOpacity) {
- bgopacity = options.bgOpacity;
- if (options.shade) Shade.refresh();
- else Selection.setBgOpacity(bgopacity);
- }
- xlimit = options.maxSize[0] || 0;
- ylimit = options.maxSize[1] || 0;
- xmin = options.minSize[0] || 0;
- ymin = options.minSize[1] || 0;
- if (options.hasOwnProperty('outerImage')) {
- $img.attr('src', options.outerImage);
- delete(options.outerImage);
- }
- Selection.refresh();
- }
- //}}}
- //}}}
- if (Touch.support) $trk.bind('touchstart.jcrop', Touch.newSelection);
- $hdl_holder.hide();
- interfaceUpdate(true);
- var api = {
- setImage: setImage,
- animateTo: animateTo,
- setSelect: setSelect,
- setOptions: setOptionsNew,
- tellSelect: tellSelect,
- tellScaled: tellScaled,
- setClass: setClass,
- disable: disableCrop,
- enable: enableCrop,
- cancel: cancelCrop,
- release: Selection.release,
- destroy: destroy,
- focus: KeyManager.watchKeys,
- getBounds: function () {
- return [boundx * xscale, boundy * yscale];
- },
- getWidgetSize: function () {
- return [boundx, boundy];
- },
- getScaleFactor: function () {
- return [xscale, yscale];
- },
- getOptions: function() {
- // careful: internal values are returned
- return options;
- },
- ui: {
- holder: $div,
- selection: $sel
- }
- };
- if (is_msie) $div.bind('selectstart', function () { return false; });
- $origimg.data('Jcrop', api);
- return api;
- };
- $.fn.Jcrop = function (options, callback) //{{{
- {
- var api;
- // Iterate over each object, attach Jcrop
- this.each(function () {
- // If we've already attached to this object
- if ($(this).data('Jcrop')) {
- // The API can be requested this way (undocumented)
- if (options === 'api') return $(this).data('Jcrop');
- // Otherwise, we just reset the options...
- else $(this).data('Jcrop').setOptions(options);
- }
- // If we haven't been attached, preload and attach
- else {
- if (this.tagName == 'IMG')
- $.Jcrop.Loader(this,function(){
- $(this).css({display:'block',visibility:'hidden'});
- api = $.Jcrop(this, options);
- if ($.isFunction(callback)) callback.call(api);
- });
- else {
- $(this).css({display:'block',visibility:'hidden'});
- api = $.Jcrop(this, options);
- if ($.isFunction(callback)) callback.call(api);
- }
- }
- });
- // Return "this" so the object is chainable (jQuery-style)
- return this;
- };
- //}}}
- // $.Jcrop.Loader - basic image loader {{{
- $.Jcrop.Loader = function(imgobj,success,error){
- var $img = $(imgobj), img = $img[0];
- function completeCheck(){
- if (img.complete) {
- $img.unbind('.jcloader');
- if ($.isFunction(success)) success.call(img);
- }
- else window.setTimeout(completeCheck,50);
- }
- $img
- .bind('load.jcloader',completeCheck)
- .bind('error.jcloader',function(e){
- $img.unbind('.jcloader');
- if ($.isFunction(error)) error.call(img);
- });
- if (img.complete && $.isFunction(success)){
- $img.unbind('.jcloader');
- success.call(img);
- }
- };
- //}}}
- // Global Defaults {{{
- $.Jcrop.defaults = {
- // Basic Settings
- allowSelect: true,
- allowMove: true,
- allowResize: true,
- trackDocument: true,
- // Styling Options
- baseClass: 'jcrop',
- addClass: null,
- bgColor: 'black',
- bgOpacity: 0.6,
- bgFade: false,
- borderOpacity: 0.4,
- handleOpacity: 0.5,
- handleSize: null,
- aspectRatio: 0,
- keySupport: true,
- createHandles: ['n','s','e','w','nw','ne','se','sw'],
- createDragbars: ['n','s','e','w'],
- createBorders: ['n','s','e','w'],
- drawBorders: true,
- dragEdges: true,
- fixedSupport: true,
- touchSupport: null,
- shade: null,
- boxWidth: 0,
- boxHeight: 0,
- boundary: 2,
- fadeTime: 400,
- animationDelay: 20,
- swingSpeed: 3,
- minSelect: [0, 0],
- maxSize: [0, 0],
- minSize: [0, 0],
- // Callbacks / Event Handlers
- onChange: function () {},
- onSelect: function () {},
- onDblClick: function () {},
- onRelease: function () {}
- };
- // }}}
- }(jQuery));
|