wp-includes/js/imgareaselect/jquery.imgareaselect.dev.js

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