_source/plugins/tableresize/plugin.js

   1 /*
   2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
   3 For licensing, see LICENSE.html or http://ckeditor.com/license
   4 */
   5
   6 (function()
   7 {
   8         var pxUnit = CKEDITOR.tools.cssLength,
   9                 needsIEHacks = CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.quirks || CKEDITOR.env.version < 7 );
  10
  11         function getWidth( el )
  12         {
  13                 return CKEDITOR.env.ie ? el.$.clientWidth : parseInt( el.getComputedStyle( 'width' ), 10 );
  14         }
  15
  16         function getBorderWidth( element, side )
  17         {
  18                 var computed = element.getComputedStyle( 'border-' + side + '-width' ),
  19                         borderMap =
  20                         {
  21                                 thin: '0px',
  22                                 medium: '1px',
  23                                 thick: '2px'
  24                         };
  25
  26                 if ( computed.indexOf( 'px' ) < 0 )
  27                 {
  28                         // look up keywords
  29                         if ( computed in borderMap && element.getComputedStyle( 'border-style' ) != 'none' )
  30                                 computed = borderMap[ computed ];
  31                         else
  32                                 computed = 0;
  33                 }
  34
  35                 return parseInt( computed, 10 );
  36         }
  37
  38         // Gets the table row that contains the most columns.
  39         function getMasterPillarRow( table )
  40         {
  41                 var $rows = table.$.rows,
  42                         maxCells = 0, cellsCount,
  43                         $elected, $tr;
  44
  45                 for ( var i = 0, len = $rows.length ; i < len; i++ )
  46                 {
  47                         $tr = $rows[ i ];
  48                         cellsCount = $tr.cells.length;
  49
  50                         if ( cellsCount > maxCells )
  51                         {
  52                                 maxCells = cellsCount;
  53                                 $elected = $tr;
  54                         }
  55                 }
  56
  57                 return $elected;
  58         }
  59
  60         function buildTableColumnPillars( table )
  61         {
  62                 var pillars = [],
  63                         pillarIndex = -1,
  64                         rtl = ( table.getComputedStyle( 'direction' ) == 'rtl' );
  65
  66                 // Get the raw row element that cointains the most columns.
  67                 var $tr = getMasterPillarRow( table );
  68
  69                 // Get the tbody element and position, which will be used to set the
  70                 // top and bottom boundaries.
  71                 var tbody = new CKEDITOR.dom.element( table.$.tBodies[ 0 ] ),
  72                         tbodyPosition = tbody.getDocumentPosition();
  73
  74                 // Loop thorugh all cells, building pillars after each one of them.
  75                 for ( var i = 0, len = $tr.cells.length ; i < len ; i++ )
  76                 {
  77                         // Both the current cell and the successive one will be used in the
  78                         // pillar size calculation.
  79                         var td = new CKEDITOR.dom.element( $tr.cells[ i ] ),
  80                                 nextTd = $tr.cells[ i + 1 ] && new CKEDITOR.dom.element( $tr.cells[ i + 1 ] );
  81
  82                         pillarIndex += td.$.colSpan || 1;
  83
  84                         // Calculate the pillar boundary positions.
  85                         var pillarLeft, pillarRight, pillarWidth;
  86
  87                         var x = td.getDocumentPosition().x;
  88
  89                         // Calculate positions based on the current cell.
  90                         rtl ?
  91                                 pillarRight = x + getBorderWidth( td, 'left' ) :
  92                                 pillarLeft  = x + td.$.offsetWidth - getBorderWidth( td, 'right' );
  93
  94                         // Calculate positions based on the next cell, if available.
  95                         if ( nextTd )
  96                         {
  97                                 x =  nextTd.getDocumentPosition().x;
  98
  99                                 rtl ?
 100                                         pillarLeft      = x + nextTd.$.offsetWidth - getBorderWidth( nextTd, 'right' ) :
 101                                         pillarRight     = x + getBorderWidth( nextTd, 'left' );
 102                         }
 103                         // Otherwise calculate positions based on the table (for last cell).
 104                         else
 105                         {
 106                                 x =  table.getDocumentPosition().x;
 107
 108                                 rtl ?
 109                                         pillarLeft      = x :
 110                                         pillarRight     = x + table.$.offsetWidth;
 111                         }
 112
 113                         pillarWidth = Math.max( pillarRight - pillarLeft, 3 );
 114
 115                         // The pillar should reflects exactly the shape of the hovered
 116                         // column border line.
 117                         pillars.push( {
 118                                 table : table,
 119                                 index : pillarIndex,
 120                                 x : pillarLeft,
 121                                 y : tbodyPosition.y,
 122                                 width : pillarWidth,
 123                                 height : tbody.$.offsetHeight,
 124                                 rtl : rtl } );
 125                 }
 126
 127                 return pillars;
 128         }
 129
 130         function getPillarAtPosition( pillars, positionX )
 131         {
 132                 for ( var i = 0, len = pillars.length ; i < len ; i++ )
 133                 {
 134                         var pillar = pillars[ i ];
 135
 136                         if ( positionX >= pillar.x && positionX <= ( pillar.x + pillar.width ) )
 137                                 return pillar;
 138                 }
 139
 140                 return null;
 141         }
 142
 143         function cancel( evt )
 144         {
 145                 ( evt.data || evt ).preventDefault();
 146         }
 147
 148         function columnResizer( editor )
 149         {
 150                 var pillar,
 151                         document,
 152                         resizer,
 153                         isResizing,
 154                         startOffset,
 155                         currentShift;
 156
 157                 var leftSideCells, rightSideCells, leftShiftBoundary, rightShiftBoundary;
 158
 159                 function detach()
 160                 {
 161                         pillar = null;
 162                         currentShift = 0;
 163                         isResizing = 0;
 164
 165                         document.removeListener( 'mouseup', onMouseUp );
 166                         resizer.removeListener( 'mousedown', onMouseDown );
 167                         resizer.removeListener( 'mousemove', onMouseMove );
 168
 169                         document.getBody().setStyle( 'cursor', 'auto' );
 170
 171                         // Hide the resizer (remove it on IE7 - #5890).
 172                         needsIEHacks ? resizer.remove() : resizer.hide();
 173                 }
 174
 175                 function resizeStart()
 176                 {
 177                         // Before starting to resize, figure out which cells to change
 178                         // and the boundaries of this resizing shift.
 179
 180                         var columnIndex = pillar.index,
 181                                 map = CKEDITOR.tools.buildTableMap( pillar.table ),
 182                                 leftColumnCells = [],
 183                                 rightColumnCells = [],
 184                                 leftMinSize = Number.MAX_VALUE,
 185                                 rightMinSize = leftMinSize,
 186                                 rtl = pillar.rtl;
 187
 188                         for ( var i = 0, len = map.length ; i < len ; i++ )
 189                         {
 190                                 var row                 = map[ i ],
 191                                         leftCell        = row[ columnIndex + ( rtl ? 1 : 0 ) ],
 192                                         rightCell       = row[ columnIndex + ( rtl ? 0 : 1 ) ];
 193
 194                                 leftCell        = leftCell && new CKEDITOR.dom.element( leftCell );
 195                                 rightCell       = rightCell && new CKEDITOR.dom.element( rightCell );
 196
 197                                 if ( !leftCell || !rightCell || !leftCell.equals( rightCell ) )
 198                                 {
 199                                         leftCell && ( leftMinSize = Math.min( leftMinSize, getWidth( leftCell ) ) );
 200                                         rightCell && ( rightMinSize = Math.min( rightMinSize, getWidth( rightCell ) ) );
 201
 202                                         leftColumnCells.push( leftCell );
 203                                         rightColumnCells.push( rightCell );
 204                                 }
 205                         }
 206
 207                         // Cache the list of cells to be resized.
 208                         leftSideCells = leftColumnCells;
 209                         rightSideCells = rightColumnCells;
 210
 211                         // Cache the resize limit boundaries.
 212                         leftShiftBoundary =  pillar.x - leftMinSize;
 213                         rightShiftBoundary = pillar.x + rightMinSize;
 214
 215                         resizer.setOpacity( 0.5 );
 216                         startOffset = parseInt( resizer.getStyle( 'left' ), 10 );
 217                         currentShift = 0;
 218                         isResizing = 1;
 219
 220                         resizer.on( 'mousemove', onMouseMove );
 221
 222                         // Prevent the native drag behavior otherwise 'mousemove' won't fire.
 223                         document.on( 'dragstart', cancel );
 224                 }
 225
 226                 function resizeEnd()
 227                 {
 228                         isResizing = 0;
 229
 230                         resizer.setOpacity( 0 );
 231
 232                         currentShift && resizeColumn();
 233
 234                         var table = pillar.table;
 235                         setTimeout( function () { table.removeCustomData( '_cke_table_pillars' ); }, 0 );
 236
 237                         document.removeListener( 'dragstart', cancel );
 238                 }
 239
 240                 function resizeColumn()
 241                 {
 242                         var rtl = pillar.rtl,
 243                                 cellsCount = rtl ? rightSideCells.length : leftSideCells.length;
 244
 245                         // Perform the actual resize to table cells, only for those by side of the pillar.
 246                         for ( var i = 0 ; i < cellsCount ; i++ )
 247                         {
 248                                 var leftCell = leftSideCells[ i ],
 249                                         rightCell = rightSideCells[ i ],
 250                                         table = pillar.table;
 251
 252                                 // Defer the resizing to avoid any interference among cells.
 253                                 CKEDITOR.tools.setTimeout(
 254                                         function( leftCell, leftOldWidth, rightCell, rightOldWidth, tableWidth, sizeShift )
 255                                         {
 256                                                 leftCell && leftCell.setStyle( 'width', pxUnit( Math.max( leftOldWidth + sizeShift, 0 ) ) );
 257                                                 rightCell && rightCell.setStyle( 'width', pxUnit( Math.max( rightOldWidth - sizeShift, 0 ) ) );
 258
 259                                                 // If we're in the last cell, we need to resize the table as well
 260                                                 if ( tableWidth )
 261                                                         table.setStyle( 'width', pxUnit( tableWidth + sizeShift * ( rtl ? -1 : 1 ) ) );
 262                                         }
 263                                         , 0,
 264                                         this, [
 265                                                 leftCell, leftCell && getWidth( leftCell ),
 266                                                 rightCell, rightCell && getWidth( rightCell ),
 267                                                 ( !leftCell || !rightCell ) && ( getWidth( table ) + getBorderWidth( table, 'left' ) + getBorderWidth( table, 'right' ) ),
 268                                                 currentShift ] );
 269                         }
 270                 }
 271
 272                 function onMouseDown( evt )
 273                 {
 274                         cancel( evt );
 275
 276                         resizeStart();
 277
 278                         document.on( 'mouseup', onMouseUp, this );
 279                 }
 280
 281                 function onMouseUp( evt )
 282                 {
 283                         evt.removeListener();
 284
 285                         resizeEnd();
 286                 }
 287
 288                 function onMouseMove( evt )
 289                 {
 290                         move( evt.data.$.clientX );
 291                 }
 292
 293                 document = editor.document;
 294
 295                 resizer = CKEDITOR.dom.element.createFromHtml(
 296                         '<div data-cke-temp=1 contenteditable=false unselectable=on '+
 297                         'style="position:absolute;cursor:col-resize;filter:alpha(opacity=0);opacity:0;' +
 298                                 'padding:0;background-color:#004;background-image:none;border:0px none;z-index:10"></div>', document );
 299
 300                 // Except on IE6/7 (#5890), place the resizer after body to prevent it
 301                 // from being editable.
 302                 if ( !needsIEHacks )
 303                         document.getDocumentElement().append( resizer );
 304
 305                 this.attachTo = function( targetPillar )
 306                 {
 307                         // Accept only one pillar at a time.
 308                         if ( isResizing )
 309                                 return;
 310
 311                         // On IE6/7, we append the resizer everytime we need it. (#5890)
 312                         if ( needsIEHacks )
 313                         {
 314                                 document.getBody().append( resizer );
 315                                 currentShift = 0;
 316                         }
 317
 318                         pillar = targetPillar;
 319
 320                         resizer.setStyles(
 321                                 {
 322                                         width: pxUnit( targetPillar.width ),
 323                                         height : pxUnit( targetPillar.height ),
 324                                         left : pxUnit( targetPillar.x ),
 325                                         top : pxUnit( targetPillar.y )
 326                                 });
 327
 328                         // In IE6/7, it's not possible to have custom cursors for floating
 329                         // elements in an editable document. Show the resizer in that case,
 330                         // to give the user a visual clue.
 331                         needsIEHacks && resizer.setOpacity( 0.25 );
 332
 333                         resizer.on( 'mousedown', onMouseDown, this );
 334
 335                         document.getBody().setStyle( 'cursor', 'col-resize' );
 336
 337                         // Display the resizer to receive events but don't show it,
 338                         // only change the cursor to resizable shape.
 339                         resizer.show();
 340                 };
 341
 342                 var move = this.move = function( posX )
 343                 {
 344                         if ( !pillar )
 345                                 return 0;
 346
 347                         if ( !isResizing && ( posX < pillar.x || posX > ( pillar.x + pillar.width ) ) )
 348                         {
 349                                 detach();
 350                                 return 0;
 351                         }
 352
 353                         var resizerNewPosition = posX - Math.round( resizer.$.offsetWidth / 2 );
 354
 355                         if ( isResizing )
 356                         {
 357                                 if ( resizerNewPosition == leftShiftBoundary || resizerNewPosition == rightShiftBoundary )
 358                                         return 1;
 359
 360                                 resizerNewPosition = Math.max( resizerNewPosition, leftShiftBoundary );
 361                                 resizerNewPosition = Math.min( resizerNewPosition, rightShiftBoundary );
 362
 363                                 currentShift = resizerNewPosition - startOffset;
 364                         }
 365
 366                         resizer.setStyle( 'left', pxUnit( resizerNewPosition ) );
 367
 368                         return 1;
 369                 };
 370         }
 371
 372         function clearPillarsCache( evt )
 373         {
 374                 var target = evt.data.getTarget();
 375
 376                 if ( evt.name == 'mouseout' )
 377                 {
 378                         // Bypass interal mouse move.
 379                         if ( !target.is ( 'table' ) )
 380                                 return;
 381
 382                         var dest = new CKEDITOR.dom.element( evt.data.$.relatedTarget || evt.data.$.toElement );
 383                         while( dest && dest.$ && !dest.equals( target ) && !dest.is( 'body' ) )
 384                                 dest = dest.getParent();
 385                         if ( !dest || dest.equals( target ) )
 386                                 return;
 387                 }
 388
 389                 target.getAscendant( 'table', 1 ).removeCustomData( '_cke_table_pillars' );
 390                 evt.removeListener();
 391         }
 392
 393         CKEDITOR.plugins.add( 'tableresize',
 394         {
 395                 requires : [ 'tabletools' ],
 396                 init : function( editor )
 397                 {
 398                         editor.on( 'contentDom', function()
 399                         {
 400                                 var resizer;
 401
 402                                 editor.document.getBody().on( 'mousemove', function( evt )
 403                                         {
 404                                                 evt = evt.data;
 405
 406                                                 // If we're already attached to a pillar, simply move the
 407                                                 // resizer.
 408                                                 if ( resizer && resizer.move( evt.$.clientX ) )
 409                                                 {
 410                                                         cancel( evt );
 411                                                         return;
 412                                                 }
 413
 414                                                 // Considering table, tr, td, tbody but nothing else.
 415                                                 var target = evt.getTarget(),
 416                                                         table,
 417                                                         pillars;
 418
 419                                                 if ( !target.is( 'table' ) && !target.getAscendant( 'tbody', 1 ) )
 420                                                         return;
 421
 422                                                 table = target.getAscendant( 'table', 1 );
 423
 424                                                 if ( !( pillars = table.getCustomData( '_cke_table_pillars' ) ) )
 425                                                 {
 426                                                         // Cache table pillars calculation result.
 427                                                         table.setCustomData( '_cke_table_pillars', ( pillars = buildTableColumnPillars( table ) ) );
 428                                                         table.on( 'mouseout', clearPillarsCache );
 429                                                         table.on( 'mousedown', clearPillarsCache );
 430                                                 }
 431
 432                                                 var pillar = getPillarAtPosition( pillars, evt.$.clientX );
 433                                                 if ( pillar )
 434                                                 {
 435                                                         !resizer && ( resizer = new columnResizer( editor ) );
 436                                                         resizer.attachTo( pillar );
 437                                                 }
 438                                         });
 439                         });
 440                 }
 441         });
 442
 443 })();