git.sur5r.net Git - contagged/blob - scripts/interface/iresizable.js

   1 /**
   2  * Interface Elements for jQuery
   3  * Resizable
   4  *
   5  * http://interface.eyecon.ro
   6  *
   7  * Copyright (c) 2006 Stefan Petre
   8  * Dual licensed under the MIT (MIT-LICENSE.txt)
   9  * and GPL (GPL-LICENSE.txt) licenses.
  10  *
  11  *
  12  */
  13
  14 jQuery.iResize = {
  15         resizeElement: null,
  16         resizeDirection: null,
  17         dragged: null,
  18         pointer: null,
  19         sizes: null,
  20         position: null,
  21         /**
  22          * internal: Start function
  23          */
  24         startDrag: function(e) {
  25                 jQuery.iResize.dragged = (this.dragEl) ? this.dragEl: this;
  26                 jQuery.iResize.pointer = jQuery.iUtil.getPointer(e);
  27
  28                 // Save original size
  29                 jQuery.iResize.sizes = {
  30                         width: parseInt(jQuery(jQuery.iResize.dragged).css('width')) || 0,
  31                         height: parseInt(jQuery(jQuery.iResize.dragged).css('height')) || 0
  32                 };
  33
  34                 // Save original position
  35                 jQuery.iResize.position = {
  36                         top: parseInt(jQuery(jQuery.iResize.dragged).css('top')) || 0,
  37                         left: parseInt(jQuery(jQuery.iResize.dragged).css('left')) || 0
  38                 };
  39
  40                 // Assign event handlers
  41                 jQuery(document)
  42                         .bind('mousemove', jQuery.iResize.moveDrag)
  43                         .bind('mouseup', jQuery.iResize.stopDrag);
  44
  45                 // Callback?
  46                 if (typeof jQuery.iResize.dragged.resizeOptions.onDragStart === 'function') {
  47                         jQuery.iResize.dragged.resizeOptions.onDragStart.apply(jQuery.iResize.dragged);
  48                 }
  49                 return false;
  50         },
  51         /**
  52          * internal: Stop function
  53          */
  54         stopDrag: function(e) {
  55                 // Unbind event handlers
  56                 jQuery(document)
  57                         .unbind('mousemove', jQuery.iResize.moveDrag)
  58                         .unbind('mouseup', jQuery.iResize.stopDrag);
  59
  60                 // Callback?
  61                 if (typeof jQuery.iResize.dragged.resizeOptions.onDragStop === 'function') {
  62                         jQuery.iResize.dragged.resizeOptions.onDragStop.apply(jQuery.iResize.dragged);
  63                 }
  64
  65                 // Remove dragged element
  66                 jQuery.iResize.dragged = null;
  67         },
  68         /**
  69          * internal: Move function
  70          */
  71         moveDrag: function(e) {
  72                 if (!jQuery.iResize.dragged) {
  73                         return;
  74                 }
  75
  76                 pointer = jQuery.iUtil.getPointer(e);
  77
  78                 // Calculate new positions
  79                 newTop = jQuery.iResize.position.top - jQuery.iResize.pointer.y + pointer.y;
  80                 newLeft = jQuery.iResize.position.left - jQuery.iResize.pointer.x + pointer.x;
  81                 newTop = Math.max(
  82                                                 Math.min(newTop, jQuery.iResize.dragged.resizeOptions.maxBottom - jQuery.iResize.sizes.height),
  83                                                 jQuery.iResize.dragged.resizeOptions.minTop
  84                                         );
  85                 newLeft = Math.max(
  86                                                 Math.min(newLeft, jQuery.iResize.dragged.resizeOptions.maxRight- jQuery.iResize.sizes.width),
  87                                                 jQuery.iResize.dragged.resizeOptions.minLeft
  88                                         );
  89
  90                 // Callback
  91                 if (typeof jQuery.iResize.dragged.resizeOptions.onDrag === 'function') {
  92                         var newPos = jQuery.iResize.dragged.resizeOptions.onDrag.apply(jQuery.iResize.dragged, [newLeft, newTop]);
  93                         if (typeof newPos == 'array' && newPos.length == 2) {
  94                                 newLeft = newPos[0];
  95                                 newTop = newPos[1];
  96                         }
  97                 }
  98
  99                 // Update the element
 100                 jQuery.iResize.dragged.style.top = newTop + 'px';
 101                 jQuery.iResize.dragged.style.left = newLeft + 'px';
 102
 103                 return false;
 104         },
 105         start: function(e) {
 106                 // Bind event handlers
 107                 jQuery(document)
 108                         .bind('mousemove', jQuery.iResize.move)
 109                         .bind('mouseup', jQuery.iResize.stop);
 110
 111                 // Initialize resizable
 112                 jQuery.iResize.resizeElement = this.resizeElement;
 113                 jQuery.iResize.resizeDirection = this.resizeDirection;
 114                 jQuery.iResize.pointer = jQuery.iUtil.getPointer(e);
 115                 jQuery.iResize.sizes = {
 116                                 width: parseInt(jQuery(this.resizeElement).css('width'))||0,
 117                                 height: parseInt(jQuery(this.resizeElement).css('height'))||0
 118                         };
 119                 jQuery.iResize.position = {
 120                                 top: parseInt(jQuery(this.resizeElement).css('top'))||0,
 121                                 left: parseInt(jQuery(this.resizeElement).css('left'))||0
 122                         };
 123
 124                 // Callback function
 125                 if (jQuery.iResize.resizeElement.resizeOptions.onStart) {
 126                         jQuery.iResize.resizeElement.resizeOptions.onStart.apply(jQuery.iResize.resizeElement, [this]);
 127                 }
 128
 129                 return false;
 130         },
 131         stop: function() {
 132                 // Unbind event handlers
 133                 jQuery(document)
 134                         .unbind('mousemove', jQuery.iResize.move)
 135                         .unbind('mouseup', jQuery.iResize.stop);
 136
 137                 // Callback function
 138                 if (jQuery.iResize.resizeElement.resizeOptions.onStop) {
 139                         jQuery.iResize.resizeElement.resizeOptions.onStop.apply(jQuery.iResize.resizeElement, [jQuery.iResize.resizeDirection]);
 140                 }
 141
 142                 // Unbind
 143                 jQuery.iResize.resizeElement = null;
 144                 jQuery.iResize.resizeDirection = null;
 145         },
 146         getWidth: function(dx, side) {
 147                 return Math.min(
 148                                                 Math.max(jQuery.iResize.sizes.width + dx * side, jQuery.iResize.resizeElement.resizeOptions.minWidth),
 149                                                 jQuery.iResize.resizeElement.resizeOptions.maxWidth
 150                                         );
 151         },
 152         getHeight: function(dy, side) {
 153                 return Math.min(
 154                                                 Math.max(jQuery.iResize.sizes.height + dy * side, jQuery.iResize.resizeElement.resizeOptions.minHeight),
 155                                                 jQuery.iResize.resizeElement.resizeOptions.maxHeight
 156                                         );
 157         },
 158         getHeightMinMax: function(height) {
 159                 return Math.min(
 160                                                 Math.max(height, jQuery.iResize.resizeElement.resizeOptions.minHeight),
 161                                                 jQuery.iResize.resizeElement.resizeOptions.maxHeight
 162                                         );
 163         },
 164         move: function(e) {
 165                 if (jQuery.iResize.resizeElement == null) {
 166                         return;
 167                 }
 168
 169                 pointer = jQuery.iUtil.getPointer(e);
 170                 dx = pointer.x - jQuery.iResize.pointer.x;
 171                 dy = pointer.y - jQuery.iResize.pointer.y;
 172
 173                 newSizes = {
 174                                 width: jQuery.iResize.sizes.width,
 175                                 height: jQuery.iResize.sizes.height
 176                         };
 177                 newPosition = {
 178                                 top: jQuery.iResize.position.top,
 179                                 left: jQuery.iResize.position.left
 180                         };
 181
 182                 switch (jQuery.iResize.resizeDirection){
 183                         case 'e':
 184                                 newSizes.width = jQuery.iResize.getWidth(dx,1);
 185                                 break;
 186                         case 'se':
 187                                 newSizes.width = jQuery.iResize.getWidth(dx,1);
 188                                 newSizes.height = jQuery.iResize.getHeight(dy,1);
 189                                 break;
 190                         case 'w':
 191                                 newSizes.width = jQuery.iResize.getWidth(dx,-1);
 192                                 newPosition.left = jQuery.iResize.position.left - newSizes.width + jQuery.iResize.sizes.width;
 193                                 break;
 194                         case 'sw':
 195                                 newSizes.width = jQuery.iResize.getWidth(dx,-1);
 196                                 newPosition.left = jQuery.iResize.position.left - newSizes.width + jQuery.iResize.sizes.width;
 197                                 newSizes.height = jQuery.iResize.getHeight(dy,1);
 198                                 break;
 199                         case 'nw':
 200                                 newSizes.height = jQuery.iResize.getHeight(dy,-1);
 201                                 newPosition.top = jQuery.iResize.position.top - newSizes.height + jQuery.iResize.sizes.height;
 202                                 newSizes.width = jQuery.iResize.getWidth(dx,-1);
 203                                 newPosition.left = jQuery.iResize.position.left - newSizes.width + jQuery.iResize.sizes.width;
 204                                 break;
 205                         case 'n':
 206                                 newSizes.height = jQuery.iResize.getHeight(dy,-1);
 207                                 newPosition.top = jQuery.iResize.position.top - newSizes.height + jQuery.iResize.sizes.height;
 208                                 break;
 209                         case 'ne':
 210                                 newSizes.height = jQuery.iResize.getHeight(dy,-1);
 211                                 newPosition.top = jQuery.iResize.position.top - newSizes.height + jQuery.iResize.sizes.height;
 212                                 newSizes.width = jQuery.iResize.getWidth(dx,1);
 213                                 break;
 214                         case 's':
 215                                 newSizes.height = jQuery.iResize.getHeight(dy,1);
 216                                 break;
 217                 }
 218
 219                 if (jQuery.iResize.resizeElement.resizeOptions.ratio) {
 220                         if (jQuery.iResize.resizeDirection == 'n' || jQuery.iResize.resizeDirection == 's')
 221                                 nWidth = newSizes.height * jQuery.iResize.resizeElement.resizeOptions.ratio;
 222                         else
 223                                 nWidth = newSizes.width;
 224                         nHeight = jQuery.iResize.getHeightMinMax(nWidth * jQuery.iResize.resizeElement.resizeOptions.ratio);
 225                         nWidth = nHeight / jQuery.iResize.resizeElement.resizeOptions.ratio;
 226
 227                         switch (jQuery.iResize.resizeDirection){
 228                                 case 'n':
 229                                 case 'nw':
 230                                 case 'ne':
 231                                         newPosition.top += newSizes.height - nHeight;
 232                                 break;
 233                         }
 234
 235                         switch (jQuery.iResize.resizeDirection){
 236                                 case 'nw':
 237                                 case 'w':
 238                                 case 'sw':
 239                                         newPosition.left += newSizes.width - nWidth;
 240                                 break;
 241                         }
 242
 243                         newSizes.height = nHeight;
 244                         newSizes.width = nWidth;
 245                 }
 246
 247                 if (newPosition.top < jQuery.iResize.resizeElement.resizeOptions.minTop) {
 248                         nHeight = newSizes.height + newPosition.top - jQuery.iResize.resizeElement.resizeOptions.minTop;
 249                         newPosition.top = jQuery.iResize.resizeElement.resizeOptions.minTop;
 250
 251                         if (jQuery.iResize.resizeElement.resizeOptions.ratio) {
 252                                 nWidth = nHeight / jQuery.iResize.resizeElement.resizeOptions.ratio;
 253                                 switch (jQuery.iResize.resizeDirection){
 254                                         case 'nw':
 255                                         case 'w':
 256                                         case 'sw':
 257                                                 newPosition.left += newSizes.width - nWidth;
 258                                         break;
 259                                 }
 260                                 newSizes.width = nWidth;
 261                         }
 262                         newSizes.height = nHeight;
 263                 }
 264
 265                 if (newPosition.left < jQuery.iResize.resizeElement.resizeOptions.minLeft ) {
 266                         nWidth = newSizes.width + newPosition.left - jQuery.iResize.resizeElement.resizeOptions.minLeft;
 267                         newPosition.left = jQuery.iResize.resizeElement.resizeOptions.minLeft;
 268
 269                         if (jQuery.iResize.resizeElement.resizeOptions.ratio) {
 270                                 nHeight = nWidth * jQuery.iResize.resizeElement.resizeOptions.ratio;
 271                                 switch (jQuery.iResize.resizeDirection){
 272                                         case 'n':
 273                                         case 'nw':
 274                                         case 'ne':
 275                                                 newPosition.top += newSizes.height - nHeight;
 276                                         break;
 277                                 }
 278                                 newSizes.height = nHeight;
 279                         }
 280                         newSizes.width = nWidth;
 281                 }
 282
 283                 if (newPosition.top + newSizes.height > jQuery.iResize.resizeElement.resizeOptions.maxBottom) {
 284                         newSizes.height = jQuery.iResize.resizeElement.resizeOptions.maxBottom - newPosition.top;
 285                         if (jQuery.iResize.resizeElement.resizeOptions.ratio) {
 286                                 newSizes.width = newSizes.height / jQuery.iResize.resizeElement.resizeOptions.ratio;
 287                         }
 288
 289                 }
 290
 291                 if (newPosition.left + newSizes.width > jQuery.iResize.resizeElement.resizeOptions.maxRight) {
 292                         newSizes.width = jQuery.iResize.resizeElement.resizeOptions.maxRight - newPosition.left;
 293                         if (jQuery.iResize.resizeElement.resizeOptions.ratio) {
 294                                 newSizes.height = newSizes.width * jQuery.iResize.resizeElement.resizeOptions.ratio;
 295                         }
 296
 297                 }
 298
 299                 var newDimensions = false;
 300                 if (jQuery.iResize.resizeElement.resizeOptions.onResize) {
 301                         newDimensions = jQuery.iResize.resizeElement.resizeOptions.onResize.apply( jQuery.iResize.resizeElement, [ newSizes, newPosition ] );
 302                         if (newDimensions) {
 303                                 if (newDimensions.sizes) {
 304                                         jQuery.extend(newSizes, newDimensions.sizes);
 305                                 }
 306
 307                                 if (newDimensions.position) {
 308                                         jQuery.extend(newPosition, newDimensions.position);
 309                                 }
 310                         }
 311                 }
 312                         elS = jQuery.iResize.resizeElement.style;
 313                         elS.left = newPosition.left + 'px';
 314                         elS.top = newPosition.top + 'px';
 315                         elS.width = newSizes.width + 'px';
 316                         elS.height = newSizes.height + 'px';
 317
 318                 return false;
 319         },
 320         /**
 321          * Builds the resizable
 322          */
 323         build: function(options) {
 324                 if (!options || !options.handlers || options.handlers.constructor != Object) {
 325                         return;
 326                 }
 327
 328                 return this.each(
 329                         function() {
 330                                 var el = this;
 331                                 el.resizeOptions = options;
 332                                 el.resizeOptions.minWidth = options.minWidth || 10;
 333                                 el.resizeOptions.minHeight = options.minHeight || 10;
 334                                 el.resizeOptions.maxWidth = options.maxWidth || 3000;
 335                                 el.resizeOptions.maxHeight = options.maxHeight || 3000;
 336                                 el.resizeOptions.minTop = options.minTop || -1000;
 337                                 el.resizeOptions.minLeft = options.minLeft || -1000;
 338                                 el.resizeOptions.maxRight = options.maxRight || 3000;
 339                                 el.resizeOptions.maxBottom = options.maxBottom || 3000;
 340                                 elPosition = jQuery(el).css('position');
 341                                 if (!(elPosition == 'relative' || elPosition == 'absolute')) {
 342                                         el.style.position = 'relative';
 343                                 }
 344
 345                                 directions = /n|ne|e|se|s|sw|w|nw/g;
 346                                 for (i in el.resizeOptions.handlers) {
 347                                         if (i.toLowerCase().match(directions) != null) {
 348                                                 if (el.resizeOptions.handlers[i].constructor == String) {
 349                                                         handle = jQuery(el.resizeOptions.handlers[i]);
 350                                                         if (handle.size() > 0) {
 351                                                                 el.resizeOptions.handlers[i] = handle.get(0);
 352                                                         }
 353                                                 }
 354
 355                                                 if (el.resizeOptions.handlers[i].tagName) {
 356                                                         el.resizeOptions.handlers[i].resizeElement = el;
 357                                                         el.resizeOptions.handlers[i].resizeDirection = i;
 358                                                         jQuery(el.resizeOptions.handlers[i]).bind('mousedown', jQuery.iResize.start);
 359                                                 }
 360                                         }
 361                                 }
 362
 363                                 if (el.resizeOptions.dragHandle) {
 364                                         if (typeof el.resizeOptions.dragHandle === 'string') {
 365                                                 handleEl = jQuery(el.resizeOptions.dragHandle);
 366                                                 if (handleEl.size() > 0) {
 367                                                         handleEl.each(function() {
 368                                                                         this.dragEl = el;
 369                                                                 });
 370                                                         handleEl.bind('mousedown', jQuery.iResize.startDrag);
 371                                                 }
 372                                         } else if (el.resizeOptions.dragHandle == true) {
 373                                                 jQuery(this).bind('mousedown', jQuery.iResize.startDrag);
 374                                         }
 375                                 }
 376                         }
 377                 );
 378         },
 379         /**
 380          * Destroys the resizable
 381          */
 382         destroy: function() {
 383                 return this.each(
 384                         function() {
 385                                 var el = this;
 386
 387                                 // Unbind the handlers
 388                                 for (i in el.resizeOptions.handlers) {
 389                                         el.resizeOptions.handlers[i].resizeElement = null;
 390                                         el.resizeOptions.handlers[i].resizeDirection = null;
 391                                         jQuery(el.resizeOptions.handlers[i]).unbind('mousedown', jQuery.iResize.start);
 392                                 }
 393
 394                                 // Remove the draghandle
 395                                 if (el.resizeOptions.dragHandle) {
 396                                         if (typeof el.resizeOptions.dragHandle === 'string') {
 397                                                 handle = jQuery(el.resizeOptions.dragHandle);
 398                                                 if (handle.size() > 0) {
 399                                                         handle.unbind('mousedown', jQuery.iResize.startDrag);
 400                                                 }
 401                                         } else if (el.resizeOptions.dragHandle == true) {
 402                                                 jQuery(this).unbind('mousedown', jQuery.iResize.startDrag);
 403                                         }
 404                                 }
 405
 406                                 // Reset the options
 407                                 el.resizeOptions = null;
 408                         }
 409                 );
 410         }
 411 };
 412
 413
 414 jQuery.fn.extend ({
 415                 /**
 416                  * Create a resizable element with a number of advanced options including callback, dragging
 417                  *
 418                  * @name Resizable
 419                  * @description Create a resizable element with a number of advanced options including callback, dragging
 420                  * @param Hash hash A hash of parameters. All parameters are optional.
 421                  * @option Hash handlers hash with keys for each resize direction (e, es, s, sw, w, nw, n) and value string selection
 422                  * @option Integer minWidth (optional) the minimum width that element can be resized to
 423                  * @option Integer maxWidth (optional) the maximum width that element can be resized to
 424                  * @option Integer minHeight (optional) the minimum height that element can be resized to
 425                  * @option Integer maxHeight (optional) the maximum height that element can be resized to
 426                  * @option Integer minTop (optional) the minmum top position to wich element can be moved to
 427                  * @option Integer minLeft (optional) the minmum left position to wich element can be moved to
 428                  * @option Integer maxRight (optional) the maximum right position to wich element can be moved to
 429                  * @option Integer maxBottom (optional) the maximum bottom position to wich element can be moved to
 430                  * @option Float ratio (optional) the ratio between width and height to constrain elements sizes to that ratio
 431                  * @option Mixed dragHandle (optional) true to make the element draggable, string selection for drag handle
 432                  * @option Function onDragStart (optional) A function to be executed whenever the dragging starts
 433                  * @option Function onDragStop (optional) A function to be executed whenever the dragging stops
 434                  * @option Function onDrag (optional) A function to be executed whenever the element is dragged
 435                  * @option Function onStart (optional) A function to be executed whenever the element starts to be resized
 436                  * @option Function onStop (optional) A function to be executed whenever the element stops to be resized
 437                  * @option Function onResize (optional) A function to be executed whenever the element is resized
 438                  * @type jQuery
 439                  * @cat Plugins/Interface
 440                  * @author Stefan Petre
 441                  */
 442                 Resizable: jQuery.iResize.build,
 443                 /**
 444                  * Destroy a resizable
 445                  *
 446                  * @name ResizableDestroy
 447                  * @description Destroy a resizable
 448                  * @type jQuery
 449                  * @cat Plugins/Interface
 450                  * @author Stefan Petre
 451                  */
 452                 ResizableDestroy: jQuery.iResize.destroy
 453         });