wp/wp-includes/js/imgareaselect/jquery.imgareaselect.js
changeset 21 48c4eec2b7e6
parent 18 be944660c56a
equal deleted inserted replaced
20:7b1b88e27a20 21:48c4eec2b7e6
     1 /*
     1 /*
     2  * imgAreaSelect jQuery plugin
     2  * imgAreaSelect jQuery plugin
     3  * version 0.9.10-wp
     3  * version 0.9.10-wp-6.2
     4  *
     4  *
     5  * Copyright (c) 2008-2013 Michal Wojciechowski (odyniec.net)
     5  * Copyright (c) 2008-2013 Michal Wojciechowski (odyniec.net)
     6  *
     6  *
     7  * Dual licensed under the MIT (MIT-LICENSE.txt)
     7  * Dual licensed under the MIT (MIT-LICENSE.txt)
     8  * and GPL (GPL-LICENSE.txt) licenses.
     8  * and GPL (GPL-LICENSE.txt) licenses.
    18  * shortcuts
    18  * shortcuts
    19  */
    19  */
    20 var abs = Math.abs,
    20 var abs = Math.abs,
    21     max = Math.max,
    21     max = Math.max,
    22     min = Math.min,
    22     min = Math.min,
    23     round = Math.round;
    23     floor = Math.floor;
    24 
    24 
    25 /**
    25 /**
    26  * Create a new HTML div element
    26  * Create a new HTML div element
    27  *
    27  *
    28  * @return A jQuery object representing the new element
    28  * @return A jQuery object representing the new element
   228      * @return Selection object
   228      * @return Selection object
   229      */
   229      */
   230     function getSelection(noScale) {
   230     function getSelection(noScale) {
   231         var sx = noScale || scaleX, sy = noScale || scaleY;
   231         var sx = noScale || scaleX, sy = noScale || scaleY;
   232 
   232 
   233         return { x1: round(selection.x1 * sx),
   233         return { x1: floor(selection.x1 * sx),
   234             y1: round(selection.y1 * sy),
   234             y1: floor(selection.y1 * sy),
   235             x2: round(selection.x2 * sx),
   235             x2: floor(selection.x2 * sx),
   236             y2: round(selection.y2 * sy),
   236             y2: floor(selection.y2 * sy),
   237             width: round(selection.x2 * sx) - round(selection.x1 * sx),
   237             width: floor(selection.x2 * sx) - floor(selection.x1 * sx),
   238             height: round(selection.y2 * sy) - round(selection.y1 * sy) };
   238             height: floor(selection.y2 * sy) - floor(selection.y1 * sy) };
   239     }
   239     }
   240 
   240 
   241     /**
   241     /**
   242      * Set the current selection
   242      * Set the current selection
   243      *
   243      *
   255      */
   255      */
   256     function setSelection(x1, y1, x2, y2, noScale) {
   256     function setSelection(x1, y1, x2, y2, noScale) {
   257         var sx = noScale || scaleX, sy = noScale || scaleY;
   257         var sx = noScale || scaleX, sy = noScale || scaleY;
   258 
   258 
   259         selection = {
   259         selection = {
   260             x1: round(x1 / sx || 0),
   260             x1: floor(x1 / sx || 0),
   261             y1: round(y1 / sy || 0),
   261             y1: floor(y1 / sy || 0),
   262             x2: round(x2 / sx || 0),
   262             x2: floor(x2 / sx || 0),
   263             y2: round(y2 / sy || 0)
   263             y2: floor(y2 / sy || 0)
   264         };
   264         };
   265 
   265 
   266         selection.width = selection.x2 - selection.x1;
   266         selection.width = selection.x2 - selection.x1;
   267         selection.height = selection.y2 - selection.y1;
   267         selection.height = selection.y2 - selection.y1;
   268     }
   268     }
   281 
   281 
   282         /*
   282         /*
   283          * Get image offset. The .offset() method returns float values, so they
   283          * Get image offset. The .offset() method returns float values, so they
   284          * need to be rounded.
   284          * need to be rounded.
   285          */
   285          */
   286         imgOfs = { left: round($img.offset().left), top: round($img.offset().top) };
   286         imgOfs = { left: floor($img.offset().left), top: floor($img.offset().top) };
   287 
   287 
   288         /* Get image dimensions */
   288         /* Get image dimensions */
   289         imgWidth = $img.innerWidth();
   289         imgWidth = $img.innerWidth();
   290         imgHeight = $img.innerHeight();
   290         imgHeight = $img.innerHeight();
   291 
   291 
   292         imgOfs.top += ($img.outerHeight() - imgHeight) >> 1;
   292         imgOfs.top += ($img.outerHeight() - imgHeight) >> 1;
   293         imgOfs.left += ($img.outerWidth() - imgWidth) >> 1;
   293         imgOfs.left += ($img.outerWidth() - imgWidth) >> 1;
   294 
   294 
   295         /* Set minimum and maximum selection area dimensions */
   295         /* Set minimum and maximum selection area dimensions */
   296         minWidth = round(options.minWidth / scaleX) || 0;
   296         minWidth = floor(options.minWidth / scaleX) || 0;
   297         minHeight = round(options.minHeight / scaleY) || 0;
   297         minHeight = floor(options.minHeight / scaleY) || 0;
   298         maxWidth = round(min(options.maxWidth / scaleX || 1<<24, imgWidth));
   298         maxWidth = floor(min(options.maxWidth / scaleX || 1<<24, imgWidth));
   299         maxHeight = round(min(options.maxHeight / scaleY || 1<<24, imgHeight));
   299         maxHeight = floor(min(options.maxHeight / scaleY || 1<<24, imgHeight));
   300 
   300 
   301         /*
   301         /*
   302          * Workaround for jQuery 1.3.2 incorrect offset calculation, originally
   302          * Workaround for jQuery 1.3.2 incorrect offset calculation, originally
   303          * observed in Safari 3. Firefox 2 is also affected.
   303          * observed in Safari 3. Firefox 2 is also affected.
   304          */
   304          */
   309             imgOfs.left += max(document.body.scrollLeft, docElem.scrollLeft);
   309             imgOfs.left += max(document.body.scrollLeft, docElem.scrollLeft);
   310         }
   310         }
   311 
   311 
   312         /* Determine parent element offset */
   312         /* Determine parent element offset */
   313         parOfs = /absolute|relative/.test($parent.css('position')) ?
   313         parOfs = /absolute|relative/.test($parent.css('position')) ?
   314             { left: round($parent.offset().left) - $parent.scrollLeft(),
   314             { left: floor($parent.offset().left) - $parent.scrollLeft(),
   315                 top: round($parent.offset().top) - $parent.scrollTop() } :
   315                 top: floor($parent.offset().top) - $parent.scrollTop() } :
   316             position == 'fixed' ?
   316             position == 'fixed' ?
   317                 { left: $(document).scrollLeft(), top: $(document).scrollTop() } :
   317                 { left: $(document).scrollLeft(), top: $(document).scrollTop() } :
   318                 { left: 0, top: 0 };
   318                 { left: 0, top: 0 };
   319 
   319 
   320         left = viewX(0);
   320         left = viewX(0);
   428      *            event handler is not activated
   428      *            event handler is not activated
   429      */
   429      */
   430     function doUpdate(resetKeyPress) {
   430     function doUpdate(resetKeyPress) {
   431         adjust();
   431         adjust();
   432         update(resetKeyPress);
   432         update(resetKeyPress);
       
   433         updateSelectionRelativeToParentElement();
       
   434     }
       
   435 
       
   436     /**
       
   437      * Set the correct values of x1, y1, x2, and y2.
       
   438      */
       
   439     function updateSelectionRelativeToParentElement() {
   433         x1 = viewX(selection.x1); y1 = viewY(selection.y1);
   440         x1 = viewX(selection.x1); y1 = viewY(selection.y1);
   434         x2 = viewX(selection.x2); y2 = viewY(selection.y2);
   441         x2 = viewX(selection.x2); y2 = viewY(selection.y2);
   435     }
   442     }
   436 
   443 
   437     /**
   444     /**
   569     function fixAspectRatio(xFirst) {
   576     function fixAspectRatio(xFirst) {
   570         if (aspectRatio)
   577         if (aspectRatio)
   571             if (xFirst) {
   578             if (xFirst) {
   572                 x2 = max(left, min(left + imgWidth,
   579                 x2 = max(left, min(left + imgWidth,
   573                     x1 + abs(y2 - y1) * aspectRatio * (x2 > x1 || -1)));
   580                     x1 + abs(y2 - y1) * aspectRatio * (x2 > x1 || -1)));
   574                 y2 = round(max(top, min(top + imgHeight,
   581                 y2 = floor(max(top, min(top + imgHeight,
   575                     y1 + abs(x2 - x1) / aspectRatio * (y2 > y1 || -1))));
   582                     y1 + abs(x2 - x1) / aspectRatio * (y2 > y1 || -1))));
   576                 x2 = round(x2);
   583                 x2 = floor(x2);
   577             }
   584             }
   578             else {
   585             else {
   579                 y2 = max(top, min(top + imgHeight,
   586                 y2 = max(top, min(top + imgHeight,
   580                     y1 + abs(x2 - x1) / aspectRatio * (y2 > y1 || -1)));
   587                     y1 + abs(x2 - x1) / aspectRatio * (y2 > y1 || -1)));
   581                 x2 = round(max(left, min(left + imgWidth,
   588                 x2 = floor(max(left, min(left + imgWidth,
   582                     x1 + abs(y2 - y1) * aspectRatio * (x2 > x1 || -1))));
   589                     x1 + abs(y2 - y1) * aspectRatio * (x2 > x1 || -1))));
   583                 y2 = round(y2);
   590                 y2 = floor(y2);
   584             }
   591             }
   585     }
   592     }
   586 
   593 
   587     /**
   594     /**
   588      * Resize the selection area respecting the minimum/maximum dimensions and
   595      * Resize the selection area respecting the minimum/maximum dimensions and
   589      * aspect ratio
   596      * aspect ratio
   590      */
   597      */
   591     function doResize() {
   598     function doResize() {
       
   599         /*
       
   600          * Make sure x1, x2, y1, y2 are initialized to avoid the following calculation
       
   601          * getting incorrect results.
       
   602          */
       
   603         if ( x1 == null || x2 == null || y1 == null || y2 == null ) {
       
   604             updateSelectionRelativeToParentElement();
       
   605         }
       
   606 
   592         /*
   607         /*
   593          * Make sure the top left corner of the selection area stays within
   608          * Make sure the top left corner of the selection area stays within
   594          * image boundaries (it might not if the image source was dynamically
   609          * image boundaries (it might not if the image source was dynamically
   595          * changed).
   610          * changed).
   596          */
   611          */
   939             /*
   954             /*
   940              * If handle width/height has not been set with CSS rules, set the
   955              * If handle width/height has not been set with CSS rules, set the
   941              * default 5px
   956              * default 5px
   942              */
   957              */
   943             if (!parseInt($handles.css('width')) >= 0)
   958             if (!parseInt($handles.css('width')) >= 0)
   944                 $handles.width(5).height(5);
   959                 $handles.width(10).height(10);
   945 
   960 
   946             /*
   961             /*
   947              * If the borderWidth option is in use, add a solid border to
   962              * If the borderWidth option is in use, add a solid border to
   948              * handles
   963              * handles
   949              */
   964              */