<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[54903] trunk/src/js/_enqueues/vendor/imgareaselect: Media: Fix the initialization of `imgAreaSelect` when cropping a header image or a site icon or logo.</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/54903">54903</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/54903","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>azaozz</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2022-11-29 22:12:53 +0000 (Tue, 29 Nov 2022)</dd>
</dl>

<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Media: Fix the initialization of `imgAreaSelect` when cropping a header image or a site icon or logo.

Props alshakero, arthur791004, nmutua, desrosj, audrasjb, ironprogrammer, obenland, costdev, ajmaurya.
Fixes <a href="https://core.trac.wordpress.org/ticket/54308">#54308</a>, <a href="https://core.trac.wordpress.org/ticket/55377">#55377</a>.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcjs_enqueuesvendorimgareaselectjqueryimgareaselectjs">trunk/src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.js</a></li>
<li><a href="#trunksrcjs_enqueuesvendorimgareaselectjqueryimgareaselectminjs">trunk/src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.min.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcjs_enqueuesvendorimgareaselectjqueryimgareaselectjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.js       2022-11-29 22:10:04 UTC (rev 54902)
+++ trunk/src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.js 2022-11-29 22:12:53 UTC (rev 54903)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,6 +1,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /*
</span><span class="cx" style="display: block; padding: 0 10px">  * imgAreaSelect jQuery plugin
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * version 0.9.10-wp
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * version 0.9.10-wp2
</ins><span class="cx" style="display: block; padding: 0 10px">  *
</span><span class="cx" style="display: block; padding: 0 10px">  * Copyright (c) 2008-2013 Michal Wojciechowski (odyniec.net)
</span><span class="cx" style="display: block; padding: 0 10px">  *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -20,7 +20,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var abs = Math.abs,
</span><span class="cx" style="display: block; padding: 0 10px">     max = Math.max,
</span><span class="cx" style="display: block; padding: 0 10px">     min = Math.min,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-    round = Math.round;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+    floor = Math.floor;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px">  * Create a new HTML div element
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -230,12 +230,12 @@
</span><span class="cx" style="display: block; padding: 0 10px">     function getSelection(noScale) {
</span><span class="cx" style="display: block; padding: 0 10px">         var sx = noScale || scaleX, sy = noScale || scaleY;
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        return { x1: round(selection.x1 * sx),
-            y1: round(selection.y1 * sy),
-            x2: round(selection.x2 * sx),
-            y2: round(selection.y2 * sy),
-            width: round(selection.x2 * sx) - round(selection.x1 * sx),
-            height: round(selection.y2 * sy) - round(selection.y1 * sy) };
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        return { x1: floor(selection.x1 * sx),
+            y1: floor(selection.y1 * sy),
+            x2: floor(selection.x2 * sx),
+            y2: floor(selection.y2 * sy),
+            width: floor(selection.x2 * sx) - floor(selection.x1 * sx),
+            height: floor(selection.y2 * sy) - floor(selection.y1 * sy) };
</ins><span class="cx" style="display: block; padding: 0 10px">     }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">     /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -257,10 +257,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">         var sx = noScale || scaleX, sy = noScale || scaleY;
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">         selection = {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-            x1: round(x1 / sx || 0),
-            y1: round(y1 / sy || 0),
-            x2: round(x2 / sx || 0),
-            y2: round(y2 / sy || 0)
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+            x1: floor(x1 / sx || 0),
+            y1: floor(y1 / sy || 0),
+            x2: floor(x2 / sx || 0),
+            y2: floor(y2 / sy || 0)
</ins><span class="cx" style="display: block; padding: 0 10px">         };
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">         selection.width = selection.x2 - selection.x1;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -283,7 +283,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">          * Get image offset. The .offset() method returns float values, so they
</span><span class="cx" style="display: block; padding: 0 10px">          * need to be rounded.
</span><span class="cx" style="display: block; padding: 0 10px">          */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        imgOfs = { left: round($img.offset().left), top: round($img.offset().top) };
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        imgOfs = { left: floor($img.offset().left), top: floor($img.offset().top) };
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">         /* Get image dimensions */
</span><span class="cx" style="display: block; padding: 0 10px">         imgWidth = $img.innerWidth();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -293,10 +293,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">         imgOfs.left += ($img.outerWidth() - imgWidth) >> 1;
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">         /* Set minimum and maximum selection area dimensions */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        minWidth = round(options.minWidth / scaleX) || 0;
-        minHeight = round(options.minHeight / scaleY) || 0;
-        maxWidth = round(min(options.maxWidth / scaleX || 1<<24, imgWidth));
-        maxHeight = round(min(options.maxHeight / scaleY || 1<<24, imgHeight));
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        minWidth = floor(options.minWidth / scaleX) || 0;
+        minHeight = floor(options.minHeight / scaleY) || 0;
+        maxWidth = floor(min(options.maxWidth / scaleX || 1<<24, imgWidth));
+        maxHeight = floor(min(options.maxHeight / scaleY || 1<<24, imgHeight));
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">         /*
</span><span class="cx" style="display: block; padding: 0 10px">          * Workaround for jQuery 1.3.2 incorrect offset calculation, originally
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -311,8 +311,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">         /* Determine parent element offset */
</span><span class="cx" style="display: block; padding: 0 10px">         parOfs = /absolute|relative/.test($parent.css('position')) ?
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-            { left: round($parent.offset().left) - $parent.scrollLeft(),
-                top: round($parent.offset().top) - $parent.scrollTop() } :
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+            { left: floor($parent.offset().left) - $parent.scrollLeft(),
+                top: floor($parent.offset().top) - $parent.scrollTop() } :
</ins><span class="cx" style="display: block; padding: 0 10px">             position == 'fixed' ?
</span><span class="cx" style="display: block; padding: 0 10px">                 { left: $(document).scrollLeft(), top: $(document).scrollTop() } :
</span><span class="cx" style="display: block; padding: 0 10px">                 { left: 0, top: 0 };
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -430,6 +430,13 @@
</span><span class="cx" style="display: block; padding: 0 10px">     function doUpdate(resetKeyPress) {
</span><span class="cx" style="display: block; padding: 0 10px">         adjust();
</span><span class="cx" style="display: block; padding: 0 10px">         update(resetKeyPress);
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        updateSelectionRelativeToParentElement();
+    }
+
+    /**
+     * Set the correct values of x1, y1, x2, and y2.
+     */
+    function updateSelectionRelativeToParentElement() {
</ins><span class="cx" style="display: block; padding: 0 10px">         x1 = viewX(selection.x1); y1 = viewY(selection.y1);
</span><span class="cx" style="display: block; padding: 0 10px">         x2 = viewX(selection.x2); y2 = viewY(selection.y2);
</span><span class="cx" style="display: block; padding: 0 10px">     }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -571,16 +578,16 @@
</span><span class="cx" style="display: block; padding: 0 10px">             if (xFirst) {
</span><span class="cx" style="display: block; padding: 0 10px">                 x2 = max(left, min(left + imgWidth,
</span><span class="cx" style="display: block; padding: 0 10px">                     x1 + abs(y2 - y1) * aspectRatio * (x2 > x1 || -1)));
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                y2 = round(max(top, min(top + imgHeight,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                y2 = floor(max(top, min(top + imgHeight,
</ins><span class="cx" style="display: block; padding: 0 10px">                     y1 + abs(x2 - x1) / aspectRatio * (y2 > y1 || -1))));
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                x2 = round(x2);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                x2 = floor(x2);
</ins><span class="cx" style="display: block; padding: 0 10px">             }
</span><span class="cx" style="display: block; padding: 0 10px">             else {
</span><span class="cx" style="display: block; padding: 0 10px">                 y2 = max(top, min(top + imgHeight,
</span><span class="cx" style="display: block; padding: 0 10px">                     y1 + abs(x2 - x1) / aspectRatio * (y2 > y1 || -1)));
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                x2 = round(max(left, min(left + imgWidth,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                x2 = floor(max(left, min(left + imgWidth,
</ins><span class="cx" style="display: block; padding: 0 10px">                     x1 + abs(y2 - y1) * aspectRatio * (x2 > x1 || -1))));
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                y2 = round(y2);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                y2 = floor(y2);
</ins><span class="cx" style="display: block; padding: 0 10px">             }
</span><span class="cx" style="display: block; padding: 0 10px">     }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -590,6 +597,14 @@
</span><span class="cx" style="display: block; padding: 0 10px">      */
</span><span class="cx" style="display: block; padding: 0 10px">     function doResize() {
</span><span class="cx" style="display: block; padding: 0 10px">         /*
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * Make sure x1, x2, y1, y2 are initialized to avoid the following calculation
+         * getting incorrect results.
+         */
+        if ( x1 == null || x2 == null || y1 == null || y2 == null ) {
+            updateSelectionRelativeToParentElement();
+        }
+
+        /*
</ins><span class="cx" style="display: block; padding: 0 10px">          * Make sure the top left corner of the selection area stays within
</span><span class="cx" style="display: block; padding: 0 10px">          * image boundaries (it might not if the image source was dynamically
</span><span class="cx" style="display: block; padding: 0 10px">          * changed).
</span></span></pre></div>
<a id="trunksrcjs_enqueuesvendorimgareaselectjqueryimgareaselectminjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.min.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.min.js   2022-11-29 22:10:04 UTC (rev 54902)
+++ trunk/src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.min.js     2022-11-29 22:12:53 UTC (rev 54903)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1 +1 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-!function(xe){var we=Math.abs,Se=Math.max,ze=Math.min,ke=Math.round;function Ce(){return xe("<div/>")}xe.imgAreaSelect=function(o,n){var t,i,r,c,d,a,s,u,l,h,f,m,e,p,y,g,v,b,x,w,S,z,k,C,A,W,I,K=xe(o),P=Ce(),N=Ce(),H=Ce().add(Ce()).add(Ce()).add(Ce()),M=Ce().add(Ce()).add(Ce()).add(Ce()),E=xe([]),O={left:0,top:0},T={left:0,top:0},L=0,j="absolute",D={x1:0,y1:0,x2:0,y2:0,width:0,height:0},R=document.documentElement,X=navigator.userAgent;function Y(e){return e+O.left-T.left}function $(e){return e+O.top-T.top}function q(e){return e-O.left+T.left}function B(e){return e-O.top+T.top}function Q(e){return Se(e.pageX||0,G(e).x)-T.left}function F(e){return Se(e.pageY||0,G(e).y)-T.top}function G(e){e=e.originalEvent||{};return e.touches&&e.touches.length?{x:e.touches[0].pageX,y:e.touches[0].pageY}:{x:0,y:0}}function J(e){var t=e||h,e=e||f;return{x1:ke(D.x1*t),y1:ke(D.
 y1*e),x2:ke(D.x2*t),y2:ke(D.y2*e),width:ke(D.x2*t)-ke(D.x1*t),height:ke(D.y2*e)-ke(D.y1*e)}}function U(e,t,o,i,s){var n=s||h,s=s||f;(D={x1:ke(e/n||0),y1:ke(t/s||0),x2:ke(o/n||0),y2:ke(i/s||0)}).width=D.x2-D.x1,D.height=D.y2-D.y1}function V(){t&&K.width()&&(O={left:ke(K.offset().left),top:ke(K.offset().top)},d=K.innerWidth(),a=K.innerHeight(),O.top+=K.outerHeight()-a>>1,O.left+=K.outerWidth()-d>>1,e=ke(n.minWidth/h)||0,p=ke(n.minHeight/f)||0,y=ke(ze(n.maxWidth/h||1<<24,d)),g=ke(ze(n.maxHeight/f||1<<24,a)),"1.3.2"!=xe().jquery||"fixed"!=j||R.getBoundingClientRect||(O.top+=Se(document.body.scrollTop,R.scrollTop),O.left+=Se(document.body.scrollLeft,R.scrollLeft)),T=/absolute|relative/.test(s.css("position"))?{left:ke(s.offset().left)-s.scrollLeft(),top:ke(s.offset().top)-s.scrollTop()}:"fixed"==j?{left:xe(document).scrollLeft(),top:xe(document).scrollTop()}:{left:0,top:0},r=Y(0),c=$(0),(D.x2>d||D.y2>a)
 &&ne())}function Z(e){if(b){switch(P.css({left:Y(D.x1),top:$(D.y1)}).add(N).width(A=D.width).height(W=D.height),N.add(H).add(E).css({left:0,top:0}),H.width(Se(A-H.outerWidth()+H.innerWidth(),0)).height(Se(W-H.outerHeight()+H.innerHeight(),0)),xe(M[0]).css({left:r,top:c,width:D.x1,height:a}),xe(M[1]).css({left:r+D.x1,top:c,width:A,height:D.y1}),xe(M[2]).css({left:r+D.x2,top:c,width:d-D.x2,height:a}),xe(M[3]).css({left:r+D.x1,top:c+D.y2,width:A,height:a-D.y2}),A-=E.outerWidth(),W-=E.outerHeight(),E.length){case 8:xe(E[4]).css({left:A>>1}),xe(E[5]).css({left:A,top:W>>1}),xe(E[6]).css({left:A>>1,top:W}),xe(E[7]).css({top:W>>1});case 4:E.slice(1,3).css({left:A}),E.slice(2,4).css({top:W})}!1!==e&&(xe.imgAreaSelect.onKeyPress!=me&&xe(document).off(xe.imgAreaSelect.keyPress,xe.imgAreaSelect.onKeyPress),n.keys&&xe(document).on(xe.imgAreaSelect.keyPress,function(){xe.imgAreaSelect.onKeyPress=me})),ge&&H.outerWidth()-H.innerWidth(
 )==2&&(H.css("margin",0),setTimeout(function(){H.css("margin","auto")},0))}}function _(e){V(),Z(e),x=Y(D.x1),w=$(D.y1),S=Y(D.x2),z=$(D.y2)}function ee(e,t){n.fadeSpeed?e.fadeOut(n.fadeSpeed,t):e.hide()}function te(e){var t=q(Q(e))-D.x1,e=B(F(e))-D.y1;I||(V(),I=!0,P.one("mouseout",function(){I=!1})),m="",n.resizable&&(e<=n.resizeMargin?m="n":e>=D.height-n.resizeMargin&&(m="s"),t<=n.resizeMargin?m+="w":t>=D.width-n.resizeMargin&&(m+="e")),P.css("cursor",m?m+"-resize":n.movable?"move":""),i&&i.toggle()}function oe(e){xe("body").css("cursor",""),!n.autoHide&&D.width*D.height!=0||ee(P.add(M),function(){xe(this).hide()}),xe(document).off("mousemove touchmove",re),P.on("mousemove touchmove",te),n.onSelectEnd(o,J())}function ie(e){return"mousedown&qu
 ot;==e.type&&1!=e.which||(te(e),V(),m?(xe("body").css("cursor",m+"-resize"),x=Y(D[/w/.test(m)?"x2":"x1"]),w=$(D[/n/.test(m)?"y2":"y1"]),xe(document).on("mousemove touchmove",re).one("mouseup touchend",oe),P.off("mousemove touchmove",te)):n.movable?(u=r+D.x1-Q(e),l=c+D.y1-F(e),P.off("mousemove touchmove",te),xe(document).on("mousemove touchmove",de).one("mouseup touchend",function(){n.onSelectEnd(o,J()),xe(document).off("mousemove touchmove",de),P.on("mousemove touchmove",te)})):K.mousedown(e)),!1}function se(e){v&&(e?(S=Se(r,ze(r+d,x+we(z-w)*v*(x<S||-1))),z=ke(Se(c,ze(c+a,w+we(S-x)/v*(w<z||-1)))),S=ke(S)):(z=Se(c,ze(c+a,w+we(S-x)/v*(w<z||-1))),S=ke(Se(r,ze(r+d,x+we(z-w)*v*(x<S||-1)))),z=ke(z)))}function ne(){x=ze(x,r+d),w=ze(w,c+a),we(S-x)<e&&((S=x-e*(S<x||-1))<r?x=r+e:r+d<S&&(x=r
 +d-e)),we(z-w)<p&&((z=w-p*(z<w||-1))<c?w=c+p:c+a<z&&(w=c+a-p)),S=Se(r,ze(S,r+d)),z=Se(c,ze(z,c+a)),se(we(S-x)<we(z-w)*v),we(S-x)>y&&(S=x-y*(S<x||-1),se()),we(z-w)>g&&(z=w-g*(z<w||-1),se(!0)),D={x1:q(ze(x,S)),x2:q(Se(x,S)),y1:B(ze(w,z)),y2:B(Se(w,z)),width:we(S-x),height:we(z-w)},Z(),n.onSelectChange(o,J())}function re(e){return S=/w|e|^$/.test(m)||v?Q(e):Y(D.x2),z=/n|s|^$/.test(m)||v?F(e):$(D.y2),ne(),!1}function ce(e,t){S=(x=e)+D.width,z=(w=t)+D.height,xe.extend(D,{x1:q(x),y1:B(w),x2:q(S),y2:B(z)}),Z(),n.onSelectChange(o,J())}function de(e){return x=Se(r,ze(u+Q(e),r+d-D.width)),w=Se(c,ze(l+F(e),c+a-D.height)),ce(x,w),e.preventDefault(),!1}function ae(){xe(document).off("mousemove touchmove",ae),V(),S=x,z=w,ne(),m="",M.is(":visible")||P.add(M).hide().fadeIn(n.fadeSpeed||0),b=!0,xe(document).off("mouseup touchend",ue).on("mousemove touchmove",re).one("mouseup touchend&quo
 t;,oe),P.off("mousemove touchmove",te),n.onSelectStart(o,J())}function ue(){xe(document).off("mousemove touchmove",ae).off("mouseup touchend",ue),ee(P.add(M)),U(q(x),B(w),q(x),B(w)),this instanceof xe.imgAreaSelect||(n.onSelectChange(o,J()),n.onSelectEnd(o,J()))}function le(e){return 1<e.which||M.is(":animated")||(V(),u=x=Q(e),l=w=F(e),xe(document).on({"mousemove touchmove":ae,"mouseup touchend":ue})),!1}function he(){_(!1)}function fe(){t=!0,ye(n=xe.extend({classPrefix:"imgareaselect",movable:!0,parent:"body",resizable:!0,resizeMargin:10,onInit:function(){},onSelectStart:function(){},onSelectChange:function(){},onSelectEnd:function(){}},n)),P.add(M).css({visibility:""}),n.show&&(b=!0,V(),Z(),P.add(M).hide().fadeIn(n.fadeSpeed||0)),setTimeout(function(){n.onInit(o,J())},0)}var me=function(e){var t,o=n.keys,i=e.keyCode,s=isNaN(o.alt)||!e.altKey&&!e.originalEvent.altKey?!isNaN(
 o.ctrl)&&e.ctrlKey?o.ctrl:!isNaN(o.shift)&&e.shiftKey?o.shift:isNaN(o.arrows)?10:o.arrows:o.alt;if("resize"==o.arrows||"resize"==o.shift&&e.shiftKey||"resize"==o.ctrl&&e.ctrlKey||"resize"==o.alt&&(e.altKey||e.originalEvent.altKey)){switch(i){case 37:s=-s;case 39:t=Se(x,S),x=ze(x,S),S=Se(t+s,x),se();break;case 38:s=-s;case 40:t=Se(w,z),w=ze(w,z),z=Se(t+s,w),se(!0);break;default:return}ne()}else switch(x=ze(x,S),w=ze(w,z),i){case 37:ce(Se(x-s,r),w);break;case 38:ce(x,Se(w-s,c));break;case 39:ce(x+ze(s,d-q(S)),w);break;case 40:ce(x,w+ze(s,a-B(z)));break;default:return}return!1};function pe(e,t){for(var o in t)void 0!==n[o]&&e.css(t[o],n[o])}function ye(e){if(e.parent&&(s=xe(e.parent)).append(P.add(M)),xe.extend(n,e),V(),null!=e.handles){for(E.remove(),E=xe([]),k=e.handles?"corners"==e.handles?4:8:0;k--;)E=E.add(Ce());E.addClass(n.classPrefix+"-handle").css({position:&quot
 ;absolute",fontSize:"0",zIndex:L+1||1}),0<=!parseInt(E.css("width"))&&E.width(5).height(5),(C=n.borderWidth)&&E.css({borderWidth:C,borderStyle:"solid"}),pe(E,{borderColor1:"border-color",borderColor2:"background-color",borderOpacity:"opacity"})}for(h=n.imageWidth/d||1,f=n.imageHeight/a||1,null!=e.x1&&(U(e.x1,e.y1,e.x2,e.y2),e.show=!e.hide),e.keys&&(n.keys=xe.extend({shift:1,ctrl:"resize"},e.keys)),M.addClass(n.classPrefix+"-outer"),N.addClass(n.classPrefix+"-selection"),k=0;k++<4;)xe(H[k-1]).addClass(n.classPrefix+"-border"+k);pe(N,{selectionColor:"background-color",selectionOpacity:"opacity"}),pe(H,{borderOpacity:"opacity",borderWidth:"border-width"}),pe(M,{outerColor:"background-color",outerOpacity:"opacity"}),(C=n.borderColor1)&&xe(H[0]).css({borderStyle:"solid",
 borderColor:C}),(C=n.borderColor2)&&xe(H[1]).css({borderStyle:"dashed",borderColor:C}),P.append(N.add(H).add(i)).append(E),ge&&((C=(M.css("filter")||"").match(/opacity=(\d+)/))&&M.css("opacity",C[1]/100),(C=(H.css("filter")||"").match(/opacity=(\d+)/))&&H.css("opacity",C[1]/100)),e.hide?ee(P.add(M)):e.show&&t&&(b=!0,P.add(M).fadeIn(n.fadeSpeed||0),_()),v=(C=(n.aspectRatio||"").split(/:/))[0]/C[1],K.add(M).off("mousedown",le),n.disable||!1===n.enable?(P.off({"mousemove touchmove":te,"mousedown touchstart":ie}),xe(window).off("resize",he)):(!n.enable&&!1!==n.disable||((n.resizable||n.movable)&&P.on({"mousemove touchmove":te,"mousedown touchstart":ie}),xe(window).on("resize",he)),n.persistent||K.add(M).on("mousedown touchstart",le)),n.enable=n.disable=void 0}this.re
 move=function(){ye({disable:!0}),P.add(M).remove()},this.getOptions=function(){return n},this.setOptions=ye,this.getSelection=J,this.setSelection=U,this.cancelSelection=ue,this.update=_;for(var ge=(/msie ([\w.]+)/i.exec(X)||[])[1],ve=/opera/i.test(X),X=/webkit/i.test(X)&&!/chrome/i.test(X),be=K;be.length;)L=Se(L,isNaN(be.css("z-index"))?L:be.css("z-index")),"fixed"==be.css("position")&&(j="fixed"),be=be.parent(":not(body)");L=n.zIndex||L,ge&&K.attr("unselectable","on"),xe.imgAreaSelect.keyPress=ge||X?"keydown":"keypress",ve&&(i=Ce().css({width:"100%",height:"100%",position:"absolute",zIndex:L+2||2})),P.add(M).css({visibility:"hidden",position:j,overflow:"hidden",zIndex:L||"0"}),P.css({zIndex:L+2||2}),N.add(H).css({position:"absolute",fontSize:"0"}),o.complete||"complete
 "==o.readyState||!K.is("img")?fe():K.one("load",fe),!t&&ge&&7<=ge&&(o.src=o.src)},xe.fn.imgAreaSelect=function(e){return e=e||{},this.each(function(){xe(this).data("imgAreaSelect")?e.remove?(xe(this).data("imgAreaSelect").remove(),xe(this).removeData("imgAreaSelect")):xe(this).data("imgAreaSelect").setOptions(e):e.remove||(void 0===e.enable&&void 0===e.disable&&(e.enable=!0),xe(this).data("imgAreaSelect",new xe.imgAreaSelect(this,e)))}),e.instance?xe(this).data("imgAreaSelect"):this}}(jQuery);
</del><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+!function(Se){var ze=Math.abs,ke=Math.max,Ce=Math.min,Ae=Math.floor;function We(){return Se("<div/>")}Se.imgAreaSelect=function(o,s){var T,L,r,c,d,a,t,j,D,R,X,i,Y,$,q,B,n,Q,u,l,h,f,F,m,p,y,g,G,v=Se(o),b=We(),x=We(),w=We().add(We()).add(We()).add(We()),S=We().add(We()).add(We()).add(We()),z=Se([]),k={left:0,top:0},C={left:0,top:0},A=0,J="absolute",W={x1:0,y1:0,x2:0,y2:0,width:0,height:0},U=document.documentElement,V=navigator.userAgent;function I(e){return e+k.left-C.left}function K(e){return e+k.top-C.top}function P(e){return e-k.left+C.left}function N(e){return e-k.top+C.top}function Z(e){return ke(e.pageX||0,ee(e).x)-C.left}function _(e){return ke(e.pageY||0,ee(e).y)-C.top}function ee(e){e=e.originalEvent||{};return e.touches&&e.touches.length?{x:e.touches[0].pageX,y:e.touches[0].pageY}:{x:0,y:0}}function H(e){var t=e||R,e=e||X;return{x1:Ae(W.x1*t),y1:
 Ae(W.y1*e),x2:Ae(W.x2*t),y2:Ae(W.y2*e),width:Ae(W.x2*t)-Ae(W.x1*t),height:Ae(W.y2*e)-Ae(W.y1*e)}}function te(e,t,o,i,n){var s=n||R,n=n||X;(W={x1:Ae(e/s||0),y1:Ae(t/n||0),x2:Ae(o/s||0),y2:Ae(i/n||0)}).width=W.x2-W.x1,W.height=W.y2-W.y1}function M(){T&&v.width()&&(k={left:Ae(v.offset().left),top:Ae(v.offset().top)},d=v.innerWidth(),a=v.innerHeight(),k.top+=v.outerHeight()-a>>1,k.left+=v.outerWidth()-d>>1,Y=Ae(s.minWidth/R)||0,$=Ae(s.minHeight/X)||0,q=Ae(Ce(s.maxWidth/R||1<<24,d)),B=Ae(Ce(s.maxHeight/X||1<<24,a)),"1.3.2"!=Se().jquery||"fixed"!=J||U.getBoundingClientRect||(k.top+=ke(document.body.scrollTop,U.scrollTop),k.left+=ke(document.body.scrollLeft,U.scrollLeft)),C=/absolute|relative/.test(t.css("position"))?{left:Ae(t.offset().left)-t.scrollLeft(),top:Ae(t.offset().top)-t.scrollTop()}:"fixed"==J?{left:Se(document).scrollLeft(),top:Se(document).scrollTop()}:{left:0,top:0},r=I(0),c=K(0),(W.x2>d||W.y2
 >a)&&ae())}function oe(e){if(Q){switch(b.css({left:I(W.x1),top:K(W.y1)}).add(x).width(y=W.width).height(g=W.height),x.add(w).add(z).css({left:0,top:0}),w.width(ke(y-w.outerWidth()+w.innerWidth(),0)).height(ke(g-w.outerHeight()+w.innerHeight(),0)),Se(S[0]).css({left:r,top:c,width:W.x1,height:a}),Se(S[1]).css({left:r+W.x1,top:c,width:y,height:W.y1}),Se(S[2]).css({left:r+W.x2,top:c,width:d-W.x2,height:a}),Se(S[3]).css({left:r+W.x1,top:c+W.y2,width:y,height:a-W.y2}),y-=z.outerWidth(),g-=z.outerHeight(),z.length){case 8:Se(z[4]).css({left:y>>1}),Se(z[5]).css({left:y,top:g>>1}),Se(z[6]).css({left:y>>1,top:g}),Se(z[7]).css({top:g>>1});case 4:z.slice(1,3).css({left:y}),z.slice(2,4).css({top:g})}!1!==e&&(Se.imgAreaSelect.onKeyPress!=ve&&Se(document).off(Se.imgAreaSelect.keyPress,Se.imgAreaSelect.onKeyPress),s.keys&&Se(document).on(Se.imgAreaSelect.keyPress,function(){Se.imgAreaSelect.onKeyPress=ve})),O&&w.outerWidth()-w.inner
 Width()==2&&(w.css("margin",0),setTimeout(function(){w.css("margin","auto")},0))}}function ie(e){M(),oe(e),ne()}function ne(){u=I(W.x1),l=K(W.y1),h=I(W.x2),f=K(W.y2)}function se(e,t){s.fadeSpeed?e.fadeOut(s.fadeSpeed,t):e.hide()}function E(e){var t=P(Z(e))-W.x1,e=N(_(e))-W.y1;G||(M(),G=!0,b.one("mouseout",function(){G=!1})),i="",s.resizable&&(e<=s.resizeMargin?i="n":e>=W.height-s.resizeMargin&&(i="s"),t<=s.resizeMargin?i+="w":t>=W.width-s.resizeMargin&&(i+="e")),b.css("cursor",i?i+"-resize":s.movable?"move":""),L&&L.toggle()}function re(e){Se("body").css("cursor",""),!s.autoHide&&W.width*W.height!=0||se(b.add(S),function(){Se(this).hide()}),Se(document).off("mousemove touchmove",ue),b.on("mousemove touchmove",E),s.onSelectEnd(o,H())}function ce(e)
 {return"mousedown"==e.type&&1!=e.which||(E(e),M(),i?(Se("body").css("cursor",i+"-resize"),u=I(W[/w/.test(i)?"x2":"x1"]),l=K(W[/n/.test(i)?"y2":"y1"]),Se(document).on("mousemove touchmove",ue).one("mouseup touchend",re),b.off("mousemove touchmove",E)):s.movable?(j=r+W.x1-Z(e),D=c+W.y1-_(e),b.off("mousemove touchmove",E),Se(document).on("mousemove touchmove",he).one("mouseup touchend",function(){s.onSelectEnd(o,H()),Se(document).off("mousemove touchmove",he),b.on("mousemove touchmove",E)})):v.mousedown(e)),!1}function de(e){n&&(e?(h=ke(r,Ce(r+d,u+ze(f-l)*n*(u<h||-1))),f=Ae(ke(c,Ce(c+a,l+ze(h-u)/n*(l<f||-1)))),h=Ae(h)):(f=ke(c,Ce(c+a,l+ze(h-u)/n*(l<f||-1))),h=Ae(ke(r,Ce(r+d,u+ze(f-l)*n*(u<h||-1)))),f=Ae(f)))}function ae(){null!=u&&null!=h&&null!=l&&null!=f||ne(),u=Ce(u,r+d),l=C
 e(l,c+a),ze(h-u)<Y&&((h=u-Y*(h<u||-1))<r?u=r+Y:r+d<h&&(u=r+d-Y)),ze(f-l)<$&&((f=l-$*(f<l||-1))<c?l=c+$:c+a<f&&(l=c+a-$)),h=ke(r,Ce(h,r+d)),f=ke(c,Ce(f,c+a)),de(ze(h-u)<ze(f-l)*n),ze(h-u)>q&&(h=u-q*(h<u||-1),de()),ze(f-l)>B&&(f=l-B*(f<l||-1),de(!0)),W={x1:P(Ce(u,h)),x2:P(ke(u,h)),y1:N(Ce(l,f)),y2:N(ke(l,f)),width:ze(h-u),height:ze(f-l)},oe(),s.onSelectChange(o,H())}function ue(e){return h=/w|e|^$/.test(i)||n?Z(e):I(W.x2),f=/n|s|^$/.test(i)||n?_(e):K(W.y2),ae(),!1}function le(e,t){h=(u=e)+W.width,f=(l=t)+W.height,Se.extend(W,{x1:P(u),y1:N(l),x2:P(h),y2:N(f)}),oe(),s.onSelectChange(o,H())}function he(e){return u=ke(r,Ce(j+Z(e),r+d-W.width)),l=ke(c,Ce(D+_(e),c+a-W.height)),le(u,l),e.preventDefault(),!1}function fe(){Se(document).off("mousemove touchmove",fe),M(),h=u,f=l,ae(),i="",S.is(":visible")||b.add(S).hide().fadeIn(s.fadeSpeed||0),Q=!0,Se(document).off("mouseup 
 touchend",me).on("mousemove touchmove",ue).one("mouseup touchend",re),b.off("mousemove touchmove",E),s.onSelectStart(o,H())}function me(){Se(document).off("mousemove touchmove",fe).off("mouseup touchend",me),se(b.add(S)),te(P(u),N(l),P(u),N(l)),this instanceof Se.imgAreaSelect||(s.onSelectChange(o,H()),s.onSelectEnd(o,H()))}function pe(e){return 1<e.which||S.is(":animated")||(M(),j=u=Z(e),D=l=_(e),Se(document).on({"mousemove touchmove":fe,"mouseup touchend":me})),!1}function ye(){ie(!1)}function ge(){T=!0,xe(s=Se.extend({classPrefix:"imgareaselect",movable:!0,parent:"body",resizable:!0,resizeMargin:10,onInit:function(){},onSelectStart:function(){},onSelectChange:function(){},onSelectEnd:function(){}},s)),b.add(S).css({visibility:""}),s.show&&(Q=!0,M(),oe(),b.add(S).hide().fadeIn(s.fadeSpeed||0)),setTimeout(function(){s.onInit(o,H())},0)}var ve=function(e){var
  t,o=s.keys,i=e.keyCode,n=isNaN(o.alt)||!e.altKey&&!e.originalEvent.altKey?!isNaN(o.ctrl)&&e.ctrlKey?o.ctrl:!isNaN(o.shift)&&e.shiftKey?o.shift:isNaN(o.arrows)?10:o.arrows:o.alt;if("resize"==o.arrows||"resize"==o.shift&&e.shiftKey||"resize"==o.ctrl&&e.ctrlKey||"resize"==o.alt&&(e.altKey||e.originalEvent.altKey)){switch(i){case 37:n=-n;case 39:t=ke(u,h),u=Ce(u,h),h=ke(t+n,u),de();break;case 38:n=-n;case 40:t=ke(l,f),l=Ce(l,f),f=ke(t+n,l),de(!0);break;default:return}ae()}else switch(u=Ce(u,h),l=Ce(l,f),i){case 37:le(ke(u-n,r),l);break;case 38:le(u,ke(l-n,c));break;case 39:le(u+Ce(n,d-P(h)),l);break;case 40:le(u,l+Ce(n,a-N(f)));break;default:return}return!1};function be(e,t){for(var o in t)void 0!==s[o]&&e.css(t[o],s[o])}function xe(e){if(e.parent&&(t=Se(e.parent)).append(b.add(S)),Se.extend(s,e),M(),null!=e.handles){for(z.remove(),z=Se([]),m=e.handles?"corners"==e.handles?
 4:8:0;m--;)z=z.add(We());z.addClass(s.classPrefix+"-handle").css({position:"absolute",fontSize:"0",zIndex:A+1||1}),0<=!parseInt(z.css("width"))&&z.width(5).height(5),(p=s.borderWidth)&&z.css({borderWidth:p,borderStyle:"solid"}),be(z,{borderColor1:"border-color",borderColor2:"background-color",borderOpacity:"opacity"})}for(R=s.imageWidth/d||1,X=s.imageHeight/a||1,null!=e.x1&&(te(e.x1,e.y1,e.x2,e.y2),e.show=!e.hide),e.keys&&(s.keys=Se.extend({shift:1,ctrl:"resize"},e.keys)),S.addClass(s.classPrefix+"-outer"),x.addClass(s.classPrefix+"-selection"),m=0;m++<4;)Se(w[m-1]).addClass(s.classPrefix+"-border"+m);be(x,{selectionColor:"background-color",selectionOpacity:"opacity"}),be(w,{borderOpacity:"opacity",borderWidth:"border-width"}),be(S,{outerColor:"background-color",outerOpacity:&qu
 ot;opacity"}),(p=s.borderColor1)&&Se(w[0]).css({borderStyle:"solid",borderColor:p}),(p=s.borderColor2)&&Se(w[1]).css({borderStyle:"dashed",borderColor:p}),b.append(x.add(w).add(L)).append(z),O&&((p=(S.css("filter")||"").match(/opacity=(\d+)/))&&S.css("opacity",p[1]/100),(p=(w.css("filter")||"").match(/opacity=(\d+)/))&&w.css("opacity",p[1]/100)),e.hide?se(b.add(S)):e.show&&T&&(Q=!0,b.add(S).fadeIn(s.fadeSpeed||0),ie()),n=(F=(s.aspectRatio||"").split(/:/))[0]/F[1],v.add(S).off("mousedown",pe),s.disable||!1===s.enable?(b.off({"mousemove touchmove":E,"mousedown touchstart":ce}),Se(window).off("resize",ye)):(!s.enable&&!1!==s.disable||((s.resizable||s.movable)&&b.on({"mousemove touchmove":E,"mousedown touchstart":ce}),Se(window).on("resize",ye)),s.persis
 tent||v.add(S).on("mousedown touchstart",pe)),s.enable=s.disable=void 0}this.remove=function(){xe({disable:!0}),b.add(S).remove()},this.getOptions=function(){return s},this.setOptions=xe,this.getSelection=H,this.setSelection=te,this.cancelSelection=me,this.update=ie;for(var O=(/msie ([\w.]+)/i.exec(V)||[])[1],we=/opera/i.test(V),V=/webkit/i.test(V)&&!/chrome/i.test(V),e=v;e.length;)A=ke(A,isNaN(e.css("z-index"))?A:e.css("z-index")),"fixed"==e.css("position")&&(J="fixed"),e=e.parent(":not(body)");A=s.zIndex||A,O&&v.attr("unselectable","on"),Se.imgAreaSelect.keyPress=O||V?"keydown":"keypress",we&&(L=We().css({width:"100%",height:"100%",position:"absolute",zIndex:A+2||2})),b.add(S).css({visibility:"hidden",position:J,overflow:"hidden",zIndex:A||"0"}),b.css({zIndex:A+2||2}),x.add(w).css({
 position:"absolute",fontSize:"0"}),o.complete||"complete"==o.readyState||!v.is("img")?ge():v.one("load",ge),!T&&O&&7<=O&&(o.src=o.src)},Se.fn.imgAreaSelect=function(e){return e=e||{},this.each(function(){Se(this).data("imgAreaSelect")?e.remove?(Se(this).data("imgAreaSelect").remove(),Se(this).removeData("imgAreaSelect")):Se(this).data("imgAreaSelect").setOptions(e):e.remove||(void 0===e.enable&&void 0===e.disable&&(e.enable=!0),Se(this).data("imgAreaSelect",new Se.imgAreaSelect(this,e)))}),e.instance?Se(this).data("imgAreaSelect"):this}}(jQuery);
</ins></span></pre>
</div>
</div>

</body>
</html>