Skip to content

Commit

Permalink
Resizable: handles properly align in tables with margins. Fixes #864
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mottie
Mottie committed Apr 8, 2015
1 parent cfc18ac commit 5065356
Show file tree
Hide file tree
Showing 9 changed files with 34 additions and 33 deletions.
12 changes: 6 additions & 6 deletions dist/js/jquery.tablesorter.combined.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4215,11 +4215,11 @@ ts.resizable = {
},

setHandlePosition : function( c, wo ) {
var tableWidth = c.$table.outerWidth(),
var startPosition,
hasScroller = ts.hasWidget( c.table, 'scroller' ),
tableHeight = c.$table.height(),
$handles = wo.$resizable_container.children(),
handleCenter = Math.floor( $handles.width() / 2 - parseFloat( c.$headers.css( 'border-right-width' ) ) * 2 );
handleCenter = Math.floor( $handles.width() / 2 );

if ( hasScroller ) {
tableHeight = 0;
Expand All @@ -4229,6 +4229,8 @@ ts.resizable = {
tableHeight += $this.filter('[style*="height"]').length ? $this.height() : $this.children('table').height();
});
}
// subtract out table left position from resizable handles. Fixes #864
startPosition = c.$table.position().left;
$handles.each( function() {
var $this = $(this),
column = parseInt( $this.attr( 'data-column' ), 10 ),
Expand All @@ -4241,7 +4243,7 @@ ts.resizable = {
$this.css({
display: 'inline-block',
height : tableHeight,
left : $header.position().left + $header.width() - handleCenter
left : $header.position().left - startPosition + $header.outerWidth() - handleCenter
});
}
});
Expand Down Expand Up @@ -4342,10 +4344,8 @@ ts.resizable = {
if ( wo.resizable_.mouseXPosition === 0 || !wo.resizable_.$target ) { return; }
// resize columns
var vars = wo.resizable_,
$target = vars.$target,
$next = vars.$next,
leftEdge = event.pageX - vars.mouseXPosition,
targetWidth = $target.width();
leftEdge = event.pageX - vars.mouseXPosition;
if ( vars.fullWidth ) {
vars.storedSizes[ vars.target ] += leftEdge;
vars.storedSizes[ vars.next ] -= leftEdge;
Expand Down
2 changes: 1 addition & 1 deletion dist/js/jquery.tablesorter.combined.min.js
View file

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions dist/js/jquery.tablesorter.widgets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2086,11 +2086,11 @@ ts.resizable = {
},

setHandlePosition : function( c, wo ) {
var tableWidth = c.$table.outerWidth(),
var startPosition,
hasScroller = ts.hasWidget( c.table, 'scroller' ),
tableHeight = c.$table.height(),
$handles = wo.$resizable_container.children(),
handleCenter = Math.floor( $handles.width() / 2 - parseFloat( c.$headers.css( 'border-right-width' ) ) * 2 );
handleCenter = Math.floor( $handles.width() / 2 );

if ( hasScroller ) {
tableHeight = 0;
Expand All @@ -2100,6 +2100,8 @@ ts.resizable = {
tableHeight += $this.filter('[style*="height"]').length ? $this.height() : $this.children('table').height();
});
}
// subtract out table left position from resizable handles. Fixes #864
startPosition = c.$table.position().left;
$handles.each( function() {
var $this = $(this),
column = parseInt( $this.attr( 'data-column' ), 10 ),
Expand All @@ -2112,7 +2114,7 @@ ts.resizable = {
$this.css({
display: 'inline-block',
height : tableHeight,
left : $header.position().left + $header.width() - handleCenter
left : $header.position().left - startPosition + $header.outerWidth() - handleCenter
});
}
});
Expand Down Expand Up @@ -2213,10 +2215,8 @@ ts.resizable = {
if ( wo.resizable_.mouseXPosition === 0 || !wo.resizable_.$target ) { return; }
// resize columns
var vars = wo.resizable_,
$target = vars.$target,
$next = vars.$next,
leftEdge = event.pageX - vars.mouseXPosition,
targetWidth = $target.width();
leftEdge = event.pageX - vars.mouseXPosition;
if ( vars.fullWidth ) {
vars.storedSizes[ vars.target ] += leftEdge;
vars.storedSizes[ vars.next ] -= leftEdge;
Expand Down
2 changes: 1 addition & 1 deletion dist/js/jquery.tablesorter.widgets.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/js/widgets/widget-resizable.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions docs/example-widget-resizable.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ <h3><a href="#">Notes</a></h3>
<li><span class="label label-info">IMPORTANT</span> If using jQuery versions older than 1.8, css box-sizing for the table <em>MUST</em> be set as <code>box-sizing: content-box;</code> or the resizable widget will not work properly.</li>
<li><span class="label label-info">IMPORTANT</span> The resize div ends up with a zero height if the header cell is empty. Please include at least a <code>&amp;nbsp;</code> in the cell to allow it to render properly (<a href="https://github.com/Mottie/tablesorter/issues/844" title="Thanks gigib82!">ref</a>).<br><br></li>

<li>In <span class="version">v2.21.5</span>, this widget now works with the columnSelector widget &amp; tables with margins (see <a href="https://github.com/Mottie/tablesorter/issues/864">issue #864</a>).</li>
<li>In <span class="version">v2.21.3</span>
<ul>
<li>Performed a major overhaul on the resizable widget to add resizable handles outside of the table, so now the resizable handles can be used over the entire height of the table!</li>
Expand Down
12 changes: 6 additions & 6 deletions js/jquery.tablesorter.combined.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4221,11 +4221,11 @@ ts.resizable = {
},

setHandlePosition : function( c, wo ) {
var tableWidth = c.$table.outerWidth(),
var startPosition,
hasScroller = ts.hasWidget( c.table, 'scroller' ),
tableHeight = c.$table.height(),
$handles = wo.$resizable_container.children(),
handleCenter = Math.floor( $handles.width() / 2 - parseFloat( c.$headers.css( 'border-right-width' ) ) * 2 );
handleCenter = Math.floor( $handles.width() / 2 );

if ( hasScroller ) {
tableHeight = 0;
Expand All @@ -4235,6 +4235,8 @@ ts.resizable = {
tableHeight += $this.filter('[style*="height"]').length ? $this.height() : $this.children('table').height();
});
}
// subtract out table left position from resizable handles. Fixes #864
startPosition = c.$table.position().left;
$handles.each( function() {
var $this = $(this),
column = parseInt( $this.attr( 'data-column' ), 10 ),
Expand All @@ -4247,7 +4249,7 @@ ts.resizable = {
$this.css({
display: 'inline-block',
height : tableHeight,
left : $header.position().left + $header.width() - handleCenter
left : $header.position().left - startPosition + $header.outerWidth() - handleCenter
});
}
});
Expand Down Expand Up @@ -4348,10 +4350,8 @@ ts.resizable = {
if ( wo.resizable_.mouseXPosition === 0 || !wo.resizable_.$target ) { return; }
// resize columns
var vars = wo.resizable_,
$target = vars.$target,
$next = vars.$next,
leftEdge = event.pageX - vars.mouseXPosition,
targetWidth = $target.width();
leftEdge = event.pageX - vars.mouseXPosition;
if ( vars.fullWidth ) {
vars.storedSizes[ vars.target ] += leftEdge;
vars.storedSizes[ vars.next ] -= leftEdge;
Expand Down
Loading

0 comments on commit 5065356

Please sign in to comment.