Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tableresize plugin should check if table body exists. #448

Merged
merged 8 commits into from
Jun 8, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGES.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ Fixed Issues:
* [#457](https://github.com/ckeditor/ckeditor-dev/issues/457): Fixed: Error thrown when deleting content from the editor with no selection.
* [#450](https://github.com/ckeditor/ckeditor-dev/issues/450): Fixed: [`CKEDITOR.filter`](http://docs.ckeditor.com/#!/api/CKEDITOR.filter) incorrectly transforms `margin` CSS property.
* [#478](https://github.com/ckeditor/ckeditor-dev/issues/478): Fixed: [Chrome] Error thrown by [Enter Key](http://ckeditor.com/addon/enterkey) plugin when pressing enter with no selection.
* [#417](https://github.com/ckeditor/ckeditor-dev/issues/417): Fixed: [Table Resize](http://ckeditor.com/addon/tableresize) plugin throws an error when used with a table with only header or footer rows.

## CKEditor 4.7

Expand Down
29 changes: 16 additions & 13 deletions plugins/tableresize/plugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,26 +52,29 @@
function buildTableColumnPillars( table ) {
var pillars = [],
pillarIndex = -1,
pillarHeight = 0,
pillarPosition = null,
rtl = ( table.getComputedStyle( 'direction' ) == 'rtl' );

// Get the raw row element that cointains the most columns.
// Get the raw row element that contains the most columns.
var $tr = getMasterPillarRow( table );

// Get the tbody element and position, which will be used to set the
// top and bottom boundaries.
var tbody = new CKEDITOR.dom.element( table.$.tBodies[ 0 ] ),
pillarPosition = tbody.getDocumentPosition(),
pillarHeight = tbody.$.offsetHeight;
// Sets pillar height and position based on given table element (head, body, footer).
function setPillarDimensions( nativeTableElement ) {
if ( nativeTableElement ) {
var tableElement = new CKEDITOR.dom.element( nativeTableElement );
pillarHeight += tableElement.$.offsetHeight;

if ( table.$.tHead ) {
var tHead = new CKEDITOR.dom.element( table.$.tHead );
pillarPosition = tHead.getDocumentPosition();
pillarHeight += tHead.$.offsetHeight;
if ( !pillarPosition ) {
pillarPosition = tableElement.getDocumentPosition();
}
}
}

if ( table.$.tFoot ) {
pillarHeight += table.$.tFoot.offsetHeight;
}
// Table may contain only one of thead, tbody or tfoot elements so its existence should be checked (#417).
setPillarDimensions( table.$.tHead );
setPillarDimensions( table.$.tBodies[ 0 ] );
setPillarDimensions( table.$.tFoot );

if ( $tr ) {
// Loop thorugh all cells, building pillars after each one of them.
Expand Down
19 changes: 19 additions & 0 deletions tests/plugins/tableresize/manual/footeronly.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<div id="editor">

<table border="1" style="width:500px">
<tfoot>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tfoot>
</table>

<p>Foo Bar...</p>

</div>

<script>
CKEDITOR.replace( 'editor' );
</script>
12 changes: 12 additions & 0 deletions tests/plugins/tableresize/manual/footeronly.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
@bender-ui: collapsed
@bender-tags: bug, 4.7.1, 417
@bender-ckeditor-plugins: wysiwygarea, toolbar, table, tableresize

1. Focus editor.
2. Move mouse over the table.
* **Expected**: No error is thrown in the browser console.
3. Try to resize one of the table columns.
* **Expected**: The cursor changes to horizontal resize cursor when hovering over table borders. It is possible to
resize table. The `column pillar` is visible while resizing table.

**Unexpected**: An error in the browser console occurs. Not possible to resize table.
19 changes: 19 additions & 0 deletions tests/plugins/tableresize/manual/headeronly.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<div id="editor">

<table border="1" style="width:500px">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
</table>

<p>Foo Bar...</p>

</div>

<script>
CKEDITOR.replace( 'editor' );
</script>
12 changes: 12 additions & 0 deletions tests/plugins/tableresize/manual/headeronly.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
@bender-ui: collapsed
@bender-tags: bug, 4.7.1, 417
@bender-ckeditor-plugins: wysiwygarea, toolbar, table, tableresize

1. Focus editor.
2. Move mouse over the table.
* **Expected**: No error is thrown in the browser console.
3. Try to resize one of the table columns.
* **Expected**: The cursor changes to horizontal resize cursor when hovering over table borders. It is possible to
resize table. The `column pillar` is visible while resizing table.

**Unexpected**: An error in the browser console occurs. Not possible to resize table.
20 changes: 20 additions & 0 deletions tests/plugins/tableresize/tableresize.html
Original file line number Diff line number Diff line change
Expand Up @@ -51,3 +51,23 @@ <h1>Foo</h1>
<table id="empty" border="1" style="width:500px">
<tbody> </tbody>
</table>

<table id="headeronly">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
</table>

<table id="footeronly">
<tfoot>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tfoot>
</table>
42 changes: 42 additions & 0 deletions tests/plugins/tableresize/tableresize.js
Original file line number Diff line number Diff line change
Expand Up @@ -259,6 +259,48 @@ bender.test( {
}
} );

wait();
},

// #417
'test resizing table with thead only': function() {
var editor = this.editors.classic2,
editable = editor.editable();

editor.setData( CKEDITOR.document.findOne( '#headeronly' ).getOuterHtml(), {

callback: function() {
resume( function() {
editor.document.fire( 'mousemove', new CKEDITOR.dom.event( {
target: editable.findOne( 'table' ).$
} ) );

assert.pass();
} );
}
} );

wait();
},

// #417
'test resizing table with tfoot only': function() {
var editor = this.editors.classic2,
editable = editor.editable();

editor.setData( CKEDITOR.document.findOne( '#footeronly' ).getOuterHtml(), {

callback: function() {
resume( function() {
editor.document.fire( 'mousemove', new CKEDITOR.dom.event( {
target: editable.findOne( 'table' ).$
} ) );

assert.pass();
} );
}
} );

wait();
}
} );