2 Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
8 var pxUnit = CKEDITOR.tools.cssLength,
\r
9 needsIEHacks = CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.quirks || CKEDITOR.env.version < 7 );
\r
11 function getWidth( el )
\r
13 return CKEDITOR.env.ie ? el.$.clientWidth : parseInt( el.getComputedStyle( 'width' ), 10 );
\r
16 function getBorderWidth( element, side )
\r
18 var computed = element.getComputedStyle( 'border-' + side + '-width' ),
\r
26 if ( computed.indexOf( 'px' ) < 0 )
\r
29 if ( computed in borderMap && element.getComputedStyle( 'border-style' ) != 'none' )
\r
30 computed = borderMap[ computed ];
\r
35 return parseInt( computed, 10 );
\r
38 // Gets the table row that contains the most columns.
\r
39 function getMasterPillarRow( table )
\r
41 var $rows = table.$.rows,
\r
42 maxCells = 0, cellsCount,
\r
45 for ( var i = 0, len = $rows.length ; i < len; i++ )
\r
48 cellsCount = $tr.cells.length;
\r
50 if ( cellsCount > maxCells )
\r
52 maxCells = cellsCount;
\r
60 function buildTableColumnPillars( table )
\r
64 rtl = ( table.getComputedStyle( 'direction' ) == 'rtl' );
\r
66 // Get the raw row element that cointains the most columns.
\r
67 var $tr = getMasterPillarRow( table );
\r
69 // Get the tbody element and position, which will be used to set the
\r
70 // top and bottom boundaries.
\r
71 var tbody = new CKEDITOR.dom.element( table.$.tBodies[ 0 ] ),
\r
72 tbodyPosition = tbody.getDocumentPosition();
\r
74 // Loop thorugh all cells, building pillars after each one of them.
\r
75 for ( var i = 0, len = $tr.cells.length ; i < len ; i++ )
\r
77 // Both the current cell and the successive one will be used in the
\r
78 // pillar size calculation.
\r
79 var td = new CKEDITOR.dom.element( $tr.cells[ i ] ),
\r
80 nextTd = $tr.cells[ i + 1 ] && new CKEDITOR.dom.element( $tr.cells[ i + 1 ] );
\r
82 pillarIndex += td.$.colSpan || 1;
\r
84 // Calculate the pillar boundary positions.
\r
85 var pillarLeft, pillarRight, pillarWidth, pillarPadding;
\r
87 var x = td.getDocumentPosition().x;
\r
89 // Calculate positions based on the current cell.
\r
91 pillarRight = x + getBorderWidth( td, 'left' ) :
\r
92 pillarLeft = x + td.$.offsetWidth - getBorderWidth( td, 'right' );
\r
94 // Calculate positions based on the next cell, if available.
\r
97 x = nextTd.getDocumentPosition().x;
\r
100 pillarLeft = x + nextTd.$.offsetWidth - getBorderWidth( nextTd, 'right' ) :
\r
101 pillarRight = x + getBorderWidth( nextTd, 'left' );
\r
103 // Otherwise calculate positions based on the table (for last cell).
\r
106 x = table.getDocumentPosition().x;
\r
110 pillarRight = x + table.$.offsetWidth;
\r
113 pillarWidth = Math.max( pillarRight - pillarLeft, 3 );
\r
115 // Make the pillar touch area at least 14 pixels wide, for easy to use.
\r
116 pillarPadding = Math.max( Math.round( 7 - ( pillarWidth / 2 ) ), 0 );
\r
118 // The pillar should reflects exactly the shape of the hovered
\r
119 // column border line.
\r
122 index : pillarIndex,
\r
124 y : tbodyPosition.y,
\r
125 width : pillarWidth,
\r
126 height: tbody.$.offsetHeight,
\r
127 padding : pillarPadding,
\r
134 function getPillarAtPosition( pillars, positionX )
\r
136 for ( var i = 0, len = pillars.length ; i < len ; i++ )
\r
138 var pillar = pillars[ i ],
\r
139 pad = pillar.padding;
\r
141 if ( positionX >= pillar.x - pad && positionX <= ( pillar.x + pillar.width + pad ) )
\r
148 function cancel( evt )
\r
150 ( evt.data || evt ).preventDefault();
\r
153 function columnResizer( editor )
\r
162 var leftSideCells, rightSideCells, leftShiftBoundary, rightShiftBoundary;
\r
170 document.removeListener( 'mouseup', onMouseUp );
\r
171 resizer.removeListener( 'mousedown', onMouseDown );
\r
172 resizer.removeListener( 'mousemove', onMouseMove );
\r
174 document.getBody().setStyle( 'cursor', 'auto' );
\r
176 // Hide the resizer (remove it on IE7 - #5890).
\r
177 needsIEHacks ? resizer.remove() : resizer.hide();
\r
180 function resizeStart()
\r
182 // Before starting to resize, figure out which cells to change
\r
183 // and the boundaries of this resizing shift.
\r
185 var columnIndex = pillar.index,
\r
186 map = CKEDITOR.tools.buildTableMap( pillar.table ),
\r
187 leftColumnCells = [],
\r
188 rightColumnCells = [],
\r
189 leftMinSize = Number.MAX_VALUE,
\r
190 rightMinSize = leftMinSize,
\r
193 for ( var i = 0, len = map.length ; i < len ; i++ )
\r
195 var row = map[ i ],
\r
196 leftCell = row[ columnIndex + ( rtl ? 1 : 0 ) ],
\r
197 rightCell = row[ columnIndex + ( rtl ? 0 : 1 ) ];
\r
199 leftCell = leftCell && new CKEDITOR.dom.element( leftCell );
\r
200 rightCell = rightCell && new CKEDITOR.dom.element( rightCell );
\r
202 if ( !leftCell || !rightCell || !leftCell.equals( rightCell ) )
\r
204 leftCell && ( leftMinSize = Math.min( leftMinSize, getWidth( leftCell ) ) );
\r
205 rightCell && ( rightMinSize = Math.min( rightMinSize, getWidth( rightCell ) ) );
\r
207 leftColumnCells.push( leftCell );
\r
208 rightColumnCells.push( rightCell );
\r
212 // Cache the list of cells to be resized.
\r
213 leftSideCells = leftColumnCells;
\r
214 rightSideCells = rightColumnCells;
\r
216 // Cache the resize limit boundaries.
\r
217 leftShiftBoundary = pillar.x - leftMinSize;
\r
218 rightShiftBoundary = pillar.x + rightMinSize;
\r
220 resizer.setOpacity( 0.5 );
\r
221 startOffset = parseInt( resizer.getStyle( 'left' ), 10 );
\r
225 resizer.on( 'mousemove', onMouseMove );
\r
227 // Prevent the native drag behavior otherwise 'mousemove' won't fire.
\r
228 document.on( 'dragstart', cancel );
\r
231 function resizeEnd()
\r
235 resizer.setOpacity( 0 );
\r
237 currentShift && resizeColumn();
\r
239 var table = pillar.table;
\r
240 setTimeout( function () { table.removeCustomData( '_cke_table_pillars' ); }, 0 );
\r
242 document.removeListener( 'dragstart', cancel );
\r
245 function resizeColumn()
\r
247 var rtl = pillar.rtl,
\r
248 cellsCount = rtl ? rightSideCells.length : leftSideCells.length;
\r
250 // Perform the actual resize to table cells, only for those by side of the pillar.
\r
251 for ( var i = 0 ; i < cellsCount ; i++ )
\r
253 var leftCell = leftSideCells[ i ],
\r
254 rightCell = rightSideCells[ i ],
\r
255 table = pillar.table;
\r
257 // Defer the resizing to avoid any interference among cells.
\r
258 CKEDITOR.tools.setTimeout(
\r
259 function( leftCell, leftOldWidth, rightCell, rightOldWidth, tableWidth, sizeShift )
\r
261 leftCell && leftCell.setStyle( 'width', pxUnit( Math.max( leftOldWidth + sizeShift, 0 ) ) );
\r
262 rightCell && rightCell.setStyle( 'width', pxUnit( Math.max( rightOldWidth - sizeShift, 0 ) ) );
\r
264 // If we're in the last cell, we need to resize the table as well
\r
266 table.setStyle( 'width', pxUnit( tableWidth + sizeShift * ( rtl ? -1 : 1 ) ) );
\r
270 leftCell, leftCell && getWidth( leftCell ),
\r
271 rightCell, rightCell && getWidth( rightCell ),
\r
272 ( !leftCell || !rightCell ) && ( getWidth( table ) + getBorderWidth( table, 'left' ) + getBorderWidth( table, 'right' ) ),
\r
277 function onMouseDown( evt )
\r
283 document.on( 'mouseup', onMouseUp, this );
\r
286 function onMouseUp( evt )
\r
288 evt.removeListener();
\r
293 function onMouseMove( evt )
\r
295 move( evt.data.$.clientX );
\r
298 document = editor.document;
\r
300 resizer = CKEDITOR.dom.element.createFromHtml(
\r
301 '<div cke_temp=1 contenteditable=false unselectable=on '+
\r
302 'style="position:absolute;cursor:col-resize;filter:alpha(opacity=0);opacity:0;' +
\r
303 'padding:0;background-color:#004;background-image:none;border:0px none;z-index:10"></div>', document );
\r
305 // Except on IE6/7 (#5890), place the resizer after body to prevent it
\r
306 // from being editable.
\r
307 if ( !needsIEHacks )
\r
308 document.getDocumentElement().append( resizer );
\r
310 this.attachTo = function( targetPillar )
\r
312 // Accept only one pillar at a time.
\r
316 // On IE6/7, we append the resizer everytime we need it. (#5890)
\r
317 if ( needsIEHacks )
\r
319 document.getBody().append( resizer );
\r
323 pillar = targetPillar;
\r
327 width: pxUnit( targetPillar.width ),
\r
328 height : pxUnit( targetPillar.height ),
\r
329 left : pxUnit( targetPillar.x ),
\r
330 top : pxUnit( targetPillar.y )
\r
333 // In IE6/7, it's not possible to have custom cursors for floating
\r
334 // elements in an editable document. Show the resizer in that case,
\r
335 // to give the user a visual clue.
\r
336 needsIEHacks && resizer.setOpacity( 0.25 );
\r
338 resizer.on( 'mousedown', onMouseDown, this );
\r
340 document.getBody().setStyle( 'cursor', 'col-resize' );
\r
342 // Display the resizer to receive events but don't show it,
\r
343 // only change the cursor to resizable shape.
\r
347 var move = this.move = function( posX )
\r
352 var pad = pillar.padding;
\r
354 if ( !isResizing && ( posX < pillar.x - pad || posX > ( pillar.x + pillar.width + pad ) ) )
\r
360 var resizerNewPosition = posX - Math.round( resizer.$.offsetWidth / 2 );
\r
364 if ( resizerNewPosition == leftShiftBoundary || resizerNewPosition == rightShiftBoundary )
\r
367 resizerNewPosition = Math.max( resizerNewPosition, leftShiftBoundary );
\r
368 resizerNewPosition = Math.min( resizerNewPosition, rightShiftBoundary );
\r
370 currentShift = resizerNewPosition - startOffset;
\r
373 resizer.setStyle( 'left', pxUnit( resizerNewPosition ) );
\r
379 function clearPillarsCache( evt )
\r
381 var target = evt.data.getTarget();
\r
383 if ( evt.name == 'mouseout' )
\r
385 // Bypass interal mouse move.
\r
386 if ( !target.is ( 'table' ) )
\r
389 var dest = new CKEDITOR.dom.element( evt.data.$.relatedTarget || evt.data.$.toElement );
\r
390 while( dest && dest.$ && !dest.equals( target ) && !dest.is( 'body' ) )
\r
391 dest = dest.getParent();
\r
392 if ( !dest || dest.equals( target ) )
\r
396 target.getAscendant( 'table', 1 ).removeCustomData( '_cke_table_pillars' );
\r
397 evt.removeListener();
\r
400 CKEDITOR.plugins.add( 'tableresize',
\r
402 requires : [ 'tabletools' ],
\r
403 init : function( editor )
\r
405 editor.on( 'contentDom', function()
\r
409 editor.document.getBody().on( 'mousemove', function( evt )
\r
413 // If we're already attached to a pillar, simply move the
\r
415 if ( resizer && resizer.move( evt.$.clientX ) )
\r
421 // Considering table, tr, td, tbody but nothing else.
\r
422 var target = evt.getTarget(),
\r
426 if ( !target.is( 'table' ) && !target.getAscendant( 'tbody', 1 ) )
\r
429 table = target.getAscendant( 'table', 1 );
\r
431 if ( !( pillars = table.getCustomData( '_cke_table_pillars' ) ) )
\r
433 // Cache table pillars calculation result.
\r
434 table.setCustomData( '_cke_table_pillars', ( pillars = buildTableColumnPillars( table ) ) );
\r
435 table.on( 'mouseout', clearPillarsCache );
\r
436 table.on( 'mousedown', clearPillarsCache );
\r
439 var pillar = getPillarAtPosition( pillars, evt.$.clientX );
\r
442 !resizer && ( resizer = new columnResizer( editor ) );
\r
443 resizer.attachTo( pillar );
\r