library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-10-08 13:44:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Resizable: handles properly align in tables with margins. Fixes #864

Browse Source
This commit is contained in:
Mottie 2015-04-07 23:50:22 -05:00
parent cfc18ac71b
commit 5065356bf8
9 changed files with 34 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
dist/js/jquery.tablesorter.combined.js vendored
View File

@ -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;
@ -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 ),
@ -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
});
}
});
@ -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;

2
dist/js/jquery.tablesorter.combined.min.js vendored
View File

File diff suppressed because one or more lines are too long

12
dist/js/jquery.tablesorter.widgets.js vendored
View File

@ -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;
@ -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 ),
@ -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
});
}
});
@ -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;

2
dist/js/jquery.tablesorter.widgets.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/widgets/widget-resizable.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
docs/example-widget-resizable.html
View File

@ -81,6 +81,7 @@
<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>

12
js/jquery.tablesorter.combined.js
View File

@ -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;
@ -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 ),
@ -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
});
}
});
@ -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;

12
js/jquery.tablesorter.widgets.js
View File

@ -2092,11 +2092,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;
@ -2106,6 +2106,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 ),
@ -2118,7 +2120,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
});
}
});
@ -2219,10 +2221,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;

12
js/widgets/widget-resizable.js
View File

@ -102,11 +102,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;
@ -116,6 +116,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 ),
@ -128,7 +130,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
});
}
});
@ -229,10 +231,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;