Changes between Initial Version and Version 3 of Ticket #6783


Ignore:
Timestamp:
Jan 11, 2011, 2:30:46 PM (9 years ago)
Author:
Scott González
Comment:

Legend:

Unmodified
Added
Removed
Modified
  • Ticket #6783

    • Property Status changed from new to reopened
    • Property Summary changed from ui.resizable ignored x axis instead of calculating with max difference to Resizable: aspect ratio is only calculated in one direction
  • Ticket #6783 – Description

    initial v3  
    1 Here's an example of my working replacement, since I couldn't use ui.resizable.
    2 
    3 Notable difference is in this piece of code, which is the same as every kind of graphic editor out there.
    4 
    5           var aspect = settings.aspect;
    6 
    7           var diff_x = new_x - start_x;
    8           var diff_y = new_y - start_y;
    9 
    10           if(diff_x < diff_y*aspect) {
    11             diff_x = diff_y * aspect;
    12           }
    13           else {
    14             diff_y = diff_x / aspect;
    15       }
    16 
    17 ------------ whole plugin ---------------------
    18 
    19 (function($){
    20  
    21   var $current = null;
    22  
    23   var start_x = 0;
    24   var start_y = 0;
    25   var start_w = 0;
    26   var start_h = 0;
    27    
    28         $.fn.myresizable = function(settings){
    29          
    30                 //settings = $.extend( {}, $myresizable.defaults, settings );
    31                
    32 
    33     $(window).mouseup(function() {
    34       $current = null;
    35     });
    36    
    37     function update(new_x,new_y) {
    38           if(!$current)
    39             return;
    40                  
    41           var aspect = settings.aspect;
    42 
    43           var diff_x = new_x - start_x;
    44           var diff_y = new_y - start_y;
    45 
    46           if(diff_x < diff_y*aspect) {
    47             diff_x = diff_y * aspect;
    48           }
    49           else {
    50             diff_y = diff_x / aspect;
    51       }
    52 
    53           var new_width = start_w + diff_x;
    54           var new_height = start_h + diff_y;
    55 
    56           $current.width(new_width);
    57           $current.height(new_height);
    58 
    59           if(settings.resize) {
    60             settings.resize.apply($current, [new_width, new_height]);
    61             }
    62     }
    63    
    64         $(window).mousemove(function(e) {
    65           update(e.screenX, e.screenY);
    66         });
    67        
    68     $(window).bind('mousewheel',function(e) {
    69           update(e.screenX, e.screenY);
    70           console.log($current);
    71         });
    72        
    73     this.find('.resizer').mousedown(function(e) {
    74       var $resizer = $(this);
    75       $current = $resizer.parent();
    76       $current.disableSelection();
    77      
    78       start_x = e.screenX;
    79       start_y = e.screenY;
    80       start_w = $current.width();
    81       start_h = $current.height();     
    82                   settings.aspect = settings.aspect || (start_w/start_h);
    83 
    84     });
    85    
    86 
    87           return this;
    88         };
    89 
    90 })( jQuery );
     1See [http://bugs.jqueryui.com/ticket/6783#comment:2 the second comment] for the description.