]> scripts.mit.edu Git - autoinstalls/wordpress.git/blobdiff - wp-includes/js/imgareaselect/jquery.imgareaselect.dev.js
Wordpress 3.2
[autoinstalls/wordpress.git] / wp-includes / js / imgareaselect / jquery.imgareaselect.dev.js
index aa3ff78c571d8e760704fb27fc73235a3638d9e4..5fc41c7b57ab66de3ec19dfc251fd5cbcd6bb9aa 100644 (file)
@@ -1,8 +1,8 @@
 /*
  * imgAreaSelect jQuery plugin
- * version 0.9.1
+ * version 0.9.6
  *
- * Copyright (c) 2008-2009 Michal Wojciechowski (odyniec.net)
+ * Copyright (c) 2008-2011 Michal Wojciechowski (odyniec.net)
  *
  * Dual licensed under the MIT (MIT-LICENSE.txt)
  * and GPL (GPL-LICENSE.txt) licenses.
@@ -39,13 +39,13 @@ $.imgAreaSelect = function (img, options) {
 
         left, top,
 
-        imgOfs,
+        imgOfs = { left: 0, top: 0 },
 
         imgWidth, imgHeight,
 
         $parent,
 
-        parOfs,
+        parOfs = { left: 0, top: 0 },
 
         zIndex = 0,
 
@@ -59,6 +59,8 @@ $.imgAreaSelect = function (img, options) {
 
         resize,
 
+        minWidth, minHeight, maxWidth, maxHeight,
+
         aspectRatio,
 
         shown,
@@ -67,6 +69,8 @@ $.imgAreaSelect = function (img, options) {
 
         selection = { x1: 0, y1: 0, x2: 0, y2: 0, width: 0, height: 0 },
 
+        docElem = document.documentElement,
+
         $p, d, i, o, w, h, adjusted;
 
     function viewX(x) {
@@ -108,14 +112,14 @@ $.imgAreaSelect = function (img, options) {
         var sx = noScale || scaleX, sy = noScale || scaleY;
 
         selection = {
-            x1: round(x1 / sx),
-            y1: round(y1 / sy),
-            x2: round(x2 / sx),
-            y2: round(y2 / sy)
+            x1: round(x1 / sx || 0),
+            y1: round(y1 / sy || 0),
+            x2: round(x2 / sx || 0),
+            y2: round(y2 / sy || 0)
         };
 
-        selection.width = (x2 = viewX(selection.x2)) - (x1 = viewX(selection.x1));
-        selection.height = (y2 = viewX(selection.y2)) - (y1 = viewX(selection.y1));
+        selection.width = selection.x2 - selection.x1;
+        selection.height = selection.y2 - selection.y1;
     }
 
     function adjust() {
@@ -124,13 +128,22 @@ $.imgAreaSelect = function (img, options) {
 
         imgOfs = { left: round($img.offset().left), top: round($img.offset().top) };
 
-        imgWidth = $img.width();
-        imgHeight = $img.height();
+        imgWidth = $img.innerWidth();
+        imgHeight = $img.innerHeight();
+
+        imgOfs.top += ($img.outerHeight() - imgHeight) >> 1;
+        imgOfs.left += ($img.outerWidth() - imgWidth) >> 1;
 
-        if ($().jquery == '1.3.2' && $.browser.safari && position == 'fixed') {
-            imgOfs.top += max(document.documentElement.scrollTop, $('body').scrollTop());
+        minWidth = options.minWidth || 0;
+        minHeight = options.minHeight || 0;
+        maxWidth = min(options.maxWidth || 1<<24, imgWidth);
+        maxHeight = min(options.maxHeight || 1<<24, imgHeight);
 
-            imgOfs.left += max(document.documentElement.scrollLeft, $('body').scrollLeft());
+        if ($().jquery == '1.3.2' && position == 'fixed' &&
+            !docElem['getBoundingClientRect'])
+        {
+            imgOfs.top += max(document.body.scrollTop, docElem.scrollTop);
+            imgOfs.left += max(document.body.scrollLeft, docElem.scrollLeft);
         }
 
         parOfs = $.inArray($parent.css('position'), ['absolute', 'relative']) + 1 ?
@@ -142,6 +155,9 @@ $.imgAreaSelect = function (img, options) {
 
         left = viewX(0);
         top = viewY(0);
+
+        if (selection.x2 > imgWidth || selection.y2 > imgHeight)
+            doResize();
     }
 
     function update(resetKeyPress) {
@@ -170,10 +186,10 @@ $.imgAreaSelect = function (img, options) {
 
         switch ($handles.length) {
         case 8:
-            $($handles[4]).css({ left: w / 2 });
-            $($handles[5]).css({ left: w, top: h / 2 });
-            $($handles[6]).css({ left: w / 2, top: h });
-            $($handles[7]).css({ top: h / 2 });
+            $($handles[4]).css({ left: w >> 1 });
+            $($handles[5]).css({ left: w, top: h >> 1 });
+            $($handles[6]).css({ left: w >> 1, top: h });
+            $($handles[7]).css({ top: h >> 1 });
         case 4:
             $handles.slice(1,3).css({ left: w });
             $handles.slice(2,4).css({ top: h });
@@ -221,13 +237,13 @@ $.imgAreaSelect = function (img, options) {
         resize = '';
 
         if (options.resizable) {
-            if (y <= resizeMargin)
+            if (y <= options.resizeMargin)
                 resize = 'n';
-            else if (y >= selection.height - resizeMargin)
+            else if (y >= selection.height - options.resizeMargin)
                 resize = 's';
-            if (x <= resizeMargin)
+            if (x <= options.resizeMargin)
                 resize += 'w';
-            else if (x >= selection.width - resizeMargin)
+            else if (x >= selection.width - options.resizeMargin)
                 resize += 'e';
         }
 
@@ -239,14 +255,13 @@ $.imgAreaSelect = function (img, options) {
 
     function docMouseUp(event) {
         $('body').css('cursor', '');
-
         if (options.autoHide || selection.width * selection.height == 0)
             hide($box.add($outer), function () { $(this).hide(); });
 
-        options.onSelectEnd(img, getSelection());
-
         $(document).unbind('mousemove', selectingMouseMove);
         $box.mousemove(areaMouseMove);
+
+        options.onSelectEnd(img, getSelection());
     }
 
     function areaMouseDown(event) {
@@ -284,59 +299,60 @@ $.imgAreaSelect = function (img, options) {
         return false;
     }
 
-    function aspectRatioXY() {
-        x2 = max(left, min(left + imgWidth,
-            x1 + abs(y2 - y1) * aspectRatio * (x2 > x1 || -1)));
-
-        y2 = round(max(top, min(top + imgHeight,
-            y1 + abs(x2 - x1) / aspectRatio * (y2 > y1 || -1))));
-        x2 = round(x2);
-    }
+    function fixAspectRatio(xFirst) {
+        if (aspectRatio)
+            if (xFirst) {
+                x2 = max(left, min(left + imgWidth,
+                    x1 + abs(y2 - y1) * aspectRatio * (x2 > x1 || -1)));
 
-    function aspectRatioYX() {
-        y2 = max(top, min(top + imgHeight,
-            y1 + abs(x2 - x1) / aspectRatio * (y2 > y1 || -1)));
-        x2 = round(max(left, min(left + imgWidth,
-            x1 + abs(y2 - y1) * aspectRatio * (x2 > x1 || -1))));
-        y2 = round(y2);
+                y2 = round(max(top, min(top + imgHeight,
+                    y1 + abs(x2 - x1) / aspectRatio * (y2 > y1 || -1))));
+                x2 = round(x2);
+            }
+            else {
+                y2 = max(top, min(top + imgHeight,
+                    y1 + abs(x2 - x1) / aspectRatio * (y2 > y1 || -1)));
+                x2 = round(max(left, min(left + imgWidth,
+                    x1 + abs(y2 - y1) * aspectRatio * (x2 > x1 || -1))));
+                y2 = round(y2);
+            }
     }
 
     function doResize() {
-        if (abs(x2 - x1) < options.minWidth) {
-            x2 = x1 - options.minWidth * (x2 < x1 || -1);
+        x1 = min(x1, left + imgWidth);
+        y1 = min(y1, top + imgHeight);
+
+        if (abs(x2 - x1) < minWidth) {
+            x2 = x1 - minWidth * (x2 < x1 || -1);
 
             if (x2 < left)
-                x1 = left + options.minWidth;
+                x1 = left + minWidth;
             else if (x2 > left + imgWidth)
-                x1 = left + imgWidth - options.minWidth;
+                x1 = left + imgWidth - minWidth;
         }
 
-        if (abs(y2 - y1) < options.minHeight) {
-            y2 = y1 - options.minHeight * (y2 < y1 || -1);
+        if (abs(y2 - y1) < minHeight) {
+            y2 = y1 - minHeight * (y2 < y1 || -1);
 
             if (y2 < top)
-                y1 = top + options.minHeight;
+                y1 = top + minHeight;
             else if (y2 > top + imgHeight)
-                y1 = top + imgHeight - options.minHeight;
+                y1 = top + imgHeight - minHeight;
         }
 
         x2 = max(left, min(x2, left + imgWidth));
         y2 = max(top, min(y2, top + imgHeight));
 
-        if (aspectRatio)
-            if (abs(x2 - x1) / aspectRatio > abs(y2 - y1))
-                aspectRatioYX();
-            else
-                aspectRatioXY();
+        fixAspectRatio(abs(x2 - x1) < abs(y2 - y1) * aspectRatio);
 
-        if (abs(x2 - x1) > options.maxWidth) {
-            x2 = x1 - options.maxWidth * (x2 < x1 || -1);
-            if (aspectRatio) aspectRatioYX();
+        if (abs(x2 - x1) > maxWidth) {
+            x2 = x1 - maxWidth * (x2 < x1 || -1);
+            fixAspectRatio();
         }
 
-        if (abs(y2 - y1) > options.maxHeight) {
-            y2 = y1 - options.maxHeight * (y2 < y1 || -1);
-            if (aspectRatio) aspectRatioXY();
+        if (abs(y2 - y1) > maxHeight) {
+            y2 = y1 - maxHeight * (y2 < y1 || -1);
+            fixAspectRatio(true);
         }
 
         selection = { x1: selX(min(x1, x2)), x2: selX(max(x1, x2)),
@@ -362,8 +378,8 @@ $.imgAreaSelect = function (img, options) {
         x2 = (x1 = newX1) + selection.width;
         y2 = (y1 = newY1) + selection.height;
 
-        selection = $.extend(selection, { x1: selX(x1), y1: selY(y1),
-            x2: selX(x2), y2: selY(y2) });
+        $.extend(selection, { x1: selX(x1), y1: selY(y1), x2: selX(x2),
+            y2: selY(y2) });
 
         update();
 
@@ -382,6 +398,7 @@ $.imgAreaSelect = function (img, options) {
     }
 
     function startSelection() {
+        $(document).unbind('mousemove', startSelection);
         adjust();
 
         x2 = x1;
@@ -404,11 +421,11 @@ $.imgAreaSelect = function (img, options) {
     }
 
     function cancelSelection() {
-        $(document).unbind('mousemove', startSelection);
+        $(document).unbind('mousemove', startSelection)
+            .unbind('mouseup', cancelSelection);
         hide($box.add($outer));
 
-        selection = { x1: selX(x1), y1: selY(y1), x2: selX(x1), y2: selY(y1),
-                width: 0, height: 0 };
+        setSelection(selX(x1), selY(y1), selX(x1), selY(y1));
 
         options.onSelectChange(img, getSelection());
         options.onSelectEnd(img, getSelection());
@@ -421,13 +438,12 @@ $.imgAreaSelect = function (img, options) {
         startX = x1 = evX(event);
         startY = y1 = evY(event);
 
-        $(document).one('mousemove', startSelection)
-            .one('mouseup', cancelSelection);
+        $(document).mousemove(startSelection).mouseup(cancelSelection);
 
         return false;
     }
 
-    function parentScroll() {
+    function windowResize() {
         doUpdate(false);
     }
 
@@ -437,8 +453,9 @@ $.imgAreaSelect = function (img, options) {
         setOptions(options = $.extend({
             classPrefix: 'imgareaselect',
             movable: true,
-            resizable: true,
             parent: 'body',
+            resizable: true,
+            resizeMargin: 10,
             onInit: function () {},
             onSelectStart: function () {},
             onSelectChange: function () {},
@@ -458,7 +475,7 @@ $.imgAreaSelect = function (img, options) {
     }
 
     var docKeyPress = function(event) {
-        var k = options.keys, d, t, key = event.keyCode || event.which;
+        var k = options.keys, d, t, key = event.keyCode;
 
         d = !isNaN(k.alt) && (event.altKey || event.originalEvent.altKey) ? k.alt :
             !isNaN(k.ctrl) && event.ctrlKey ? k.ctrl :
@@ -476,7 +493,7 @@ $.imgAreaSelect = function (img, options) {
                 t = max(x1, x2);
                 x1 = min(x1, x2);
                 x2 = max(t + d, x1);
-                if (aspectRatio) aspectRatioYX();
+                fixAspectRatio();
                 break;
             case 38:
                 d = -d;
@@ -484,7 +501,7 @@ $.imgAreaSelect = function (img, options) {
                 t = max(y1, y2);
                 y1 = min(y1, y2);
                 y2 = max(t + d, y1);
-                if (aspectRatio) aspectRatioXY();
+                fixAspectRatio(true);
                 break;
             default:
                 return;
@@ -527,7 +544,7 @@ $.imgAreaSelect = function (img, options) {
         if (newOptions.parent)
             ($parent = $(newOptions.parent)).append($box.add($outer));
 
-        options = $.extend(options, newOptions);
+        $.extend(options, newOptions);
 
         adjust();
 
@@ -546,7 +563,7 @@ $.imgAreaSelect = function (img, options) {
                 zIndex: zIndex + 1 || 1
             });
 
-            if (!parseInt($handles.css('width')))
+            if (!parseInt($handles.css('width')) >= 0)
                 $handles.width(5).height(5);
 
             if (o = options.borderWidth)
@@ -562,7 +579,7 @@ $.imgAreaSelect = function (img, options) {
 
         if (newOptions.x1 != null) {
             setSelection(newOptions.x1, newOptions.y1, newOptions.x2,
-                    newOptions.y2);
+                newOptions.y2);
             newOptions.show = !newOptions.hide;
         }
 
@@ -586,7 +603,7 @@ $.imgAreaSelect = function (img, options) {
         if (o = options.borderColor2)
             $($border[1]).css({ borderStyle: 'dashed', borderColor: o });
 
-        $box.append($area.add($border).add($handles).add($areaOpera));
+        $box.append($area.add($border).add($areaOpera).add($handles));
 
         if ($.browser.msie) {
             if (o = $outer.css('filter').match(/opacity=([0-9]+)/))
@@ -605,25 +622,32 @@ $.imgAreaSelect = function (img, options) {
 
         aspectRatio = (d = (options.aspectRatio || '').split(/:/))[0] / d[1];
 
+        $img.add($outer).unbind('mousedown', imgMouseDown);
+
         if (options.disable || options.enable === false) {
             $box.unbind('mousemove', areaMouseMove).unbind('mousedown', areaMouseDown);
-            $img.add($outer).unbind('mousedown', imgMouseDown);
-            $(window).unbind('resize', parentScroll);
-            $img.add($img.parents()).unbind('scroll', parentScroll);
+            $(window).unbind('resize', windowResize);
         }
-        else if (options.enable || options.disable === false) {
-            if (options.resizable || options.movable)
-                $box.mousemove(areaMouseMove).mousedown(areaMouseDown);
+        else {
+            if (options.enable || options.disable === false) {
+                if (options.resizable || options.movable)
+                    $box.mousemove(areaMouseMove).mousedown(areaMouseDown);
+
+                $(window).resize(windowResize);
+            }
 
             if (!options.persistent)
                 $img.add($outer).mousedown(imgMouseDown);
-            $(window).resize(parentScroll);
-            $img.add($img.parents()).scroll(parentScroll);
         }
 
         options.enable = options.disable = undefined;
     }
 
+    this.remove = function () {
+        setOptions({ disable: true });
+        $box.add($outer).remove();
+    };
+
     this.getOptions = function () { return options; };
 
     this.setOptions = setOptions;
@@ -636,17 +660,16 @@ $.imgAreaSelect = function (img, options) {
 
     $p = $img;
 
-    while ($p.length && !$p.is('body')) {
-        if (!isNaN($p.css('z-index')) && $p.css('z-index') > zIndex)
-            zIndex = $p.css('z-index');
+    while ($p.length) {
+        zIndex = max(zIndex,
+            !isNaN($p.css('z-index')) ? $p.css('z-index') : zIndex);
         if ($p.css('position') == 'fixed')
             position = 'fixed';
 
-        $p = $p.parent();
+        $p = $p.parent(':not(body)');
     }
 
-    if (!isNaN(options.zIndex))
-        zIndex = options.zIndex;
+    zIndex = options.zIndex || zIndex;
 
     if ($.browser.msie)
         $img.attr('unselectable', 'on');
@@ -661,20 +684,28 @@ $.imgAreaSelect = function (img, options) {
     $box.add($outer).css({ visibility: 'hidden', position: position,
         overflow: 'hidden', zIndex: zIndex || '0' });
     $box.css({ zIndex: zIndex + 2 || 2 });
-    $area.add($border).css({ position: 'absolute' });
+    $area.add($border).css({ position: 'absolute', fontSize: 0 });
 
     img.complete || img.readyState == 'complete' || !$img.is('img') ?
         imgLoad() : $img.one('load', imgLoad);
 
+    if ($.browser.msie && $.browser.version >= 9)
+        img.src = img.src;
 };
 
 $.fn.imgAreaSelect = function (options) {
     options = options || {};
 
     this.each(function () {
-        if ($(this).data('imgAreaSelect'))
-            $(this).data('imgAreaSelect').setOptions(options);
-        else {
+        if ($(this).data('imgAreaSelect')) {
+            if (options.remove) {
+                $(this).data('imgAreaSelect').remove();
+                $(this).removeData('imgAreaSelect');
+            }
+            else
+                $(this).data('imgAreaSelect').setOptions(options);
+        }
+        else if (!options.remove) {
             if (options.enable === undefined && options.disable === undefined)
                 options.enable = true;