Resizable: major overhaul! Now compatible with stickyHeaders

This commit is contained in:
Mottie 2015-03-25 15:21:12 -05:00
parent a09f151104
commit 673d7cbbb5
7 changed files with 978 additions and 468 deletions

View File

@ -1947,15 +1947,264 @@ ts.addWidget({
})(jQuery, window); })(jQuery, window);
/*! Widget: resizable */ /*! Widget: resizable - updated 3/25/2015 (v2.21.3) */
;(function ($, window) { ;(function ($, window) {
'use strict'; 'use strict';
var ts = $.tablesorter = $.tablesorter || {}; var ts = $.tablesorter = $.tablesorter || {};
$.extend(ts.css, { $.extend(ts.css, {
resizer : 'tablesorter-resizer' // resizable resizableContainer : 'tablesorter-resizable-container',
resizableHandle : 'tablesorter-resizable-handle',
resizableNoSelect : 'tablesorter-disableSelection',
resizableStorage : 'tablesorter-resizable'
}); });
// Add extra scroller css
$(function(){
var s = '<style>' +
'body.' + ts.css.resizableNoSelect + ' { -ms-user-select: none; -moz-user-select: -moz-none;' +
'-khtml-user-select: none; -webkit-user-select: none; user-select: none; }' +
'.' + ts.css.resizableContainer + ' { position: relative; height: 1px; }' +
// make handle z-index > than stickyHeader z-index, so the handle stays above sticky header
'.' + ts.css.resizableHandle + ' { position: absolute; display: inline-block; width: 8px; top: 1px;' +
'cursor: ew-resize; z-index: 3; user-select: none; -moz-user-select: none; }' +
'</style>';
$(s).appendTo('body');
});
ts.resizable = {
init : function( c, wo ) {
if ( c.$table.hasClass( 'hasResizable' ) ) { return; }
c.$table.addClass( 'hasResizable' );
ts.resizableReset( c.table, true ); // set default widths
// internal variables
wo.resizable_ = {
$wrap : c.$table.parent(),
mouseXPosition : 0,
$target : null,
$next : null,
overflow : c.$table.parent().css('overflow') === 'auto',
fullWidth : Math.abs(c.$table.parent().width() - c.$table.width()) < 20,
storedSizes : []
};
var noResize, $header, column, storedSizes,
marginTop = parseInt( c.$table.css( 'margin-top' ), 10 );
wo.resizable_.storedSizes = storedSizes = ( ( ts.storage && wo.resizable !== false ) ?
ts.storage( c.table, ts.css.resizableStorage ) :
[] ) || [];
ts.resizable.setWidths( c, wo, storedSizes );
wo.$resizable_container = $( '<div class="' + ts.css.resizableContainer + '">' )
.css({ top : marginTop })
.insertBefore( c.$table );
// add container
for ( column = 0; column < c.columns; column++ ) {
$header = c.$headerIndexed[ column ];
noResize = ts.getData( $header, ts.getColumnData( c.table, c.headers, column ), 'resizable' ) === 'false';
if ( !noResize ) {
$( '<div class="' + ts.css.resizableHandle + '">' )
.appendTo( wo.$resizable_container )
.attr({
'data-column' : column,
'unselectable' : 'on'
})
.data( 'header', $header )
.bind( 'selectstart', false );
}
}
c.$table.one('tablesorter-initialized', function() {
ts.resizable.setHandlePosition( c, wo );
ts.resizable.bindings( this.config, this.config.widgetOptions );
});
},
setWidth : function( $el, width ) {
$el.css({
'width' : width,
'min-width' : '',
'max-width' : ''
});
},
setWidths : function( c, wo, storedSizes ) {
var column,
$extra = $( c.namespace + '_extra_headers' ),
$col = c.$table.children( 'colgroup' ).children( 'col' );
storedSizes = storedSizes || wo.resizable_.storedSizes || [];
// process only if table ID or url match
if ( storedSizes.length ) {
for ( column = 0; column < c.columns; column++ ) {
// set saved resizable widths
c.$headers.eq( column ).width( storedSizes[ column ] );
if ( $extra.length ) {
// stickyHeaders needs to modify min & max width as well
ts.resizable.setWidth( $extra.eq( column ).add( $col.eq( column ) ), storedSizes[ column ] );
}
}
if ( $( c.namespace + '_extra_table' ).length && !ts.hasWidget( c.table, 'scroller' ) ) {
ts.resizable.setWidth( $( c.namespace + '_extra_table' ), c.$table.outerWidth() );
}
}
},
setHandlePosition : function( c, wo ) {
var tableWidth = c.$table.outerWidth(),
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 );
if ( hasScroller ) {
tableHeight = 0;
c.$table.closest( '.' + ts.css.scrollerWrap ).children().each(function(){
var $this = $(this);
// center table has a max-height set
tableHeight += $this.filter('[style*="height"]').length ? $this.height() : $this.children('table').height();
});
}
$handles.each( function() {
var $this = $(this),
column = parseInt( $this.attr( 'data-column' ), 10 ),
columns = c.columns - 1,
$header = $this.data( 'header' );
if ( column < columns || column === columns && wo.resizable_addLastColumn ) {
$this.css({
height : tableHeight,
left : $header.position().left + $header.width() - handleCenter
});
}
});
},
// prevent text selection while dragging resize bar
toggleTextSelection : function( c, toggle ) {
var namespace = c.namespace + 'tsresize';
c.widgetOptions.resizable_.disabled = toggle;
$( 'body' ).toggleClass( ts.css.resizableNoSelect, toggle );
if ( toggle ) {
$( 'body' )
.attr( 'unselectable', 'on' )
.bind( 'selectstart' + namespace, false );
} else {
$( 'body' )
.removeAttr( 'unselectable' )
.unbind( 'selectstart' + namespace );
}
},
bindings : function( c, wo ) {
var namespace = c.namespace + 'tsresize';
wo.$resizable_container.children().bind( 'mousedown', function( event ) {
// save header cell and mouse position
var column,
vars = wo.resizable_,
$extras = $( c.namespace + '_extra_headers' ),
$header = $( event.target ).data( 'header' );
column = parseInt( $header.attr( 'data-column' ), 10 );
vars.$target = $header = $header.add( $extras.filter('[data-column="' + column + '"]') );
vars.target = column;
// if table is not as wide as it's parent, then resize the table
vars.$next = event.shiftKey || wo.resizable_targetLast ?
$header.parent().children().not( '.resizable-false' ).filter( ':last' ) :
$header.nextAll( ':not(.resizable-false)' ).eq( 0 );
column = parseInt( vars.$next.attr( 'data-column' ), 10 );
vars.$next = vars.$next.add( $extras.filter('[data-column="' + column + '"]') );
vars.next = column;
vars.mouseXPosition = event.pageX;
vars.storedSizes = c.$headers.map(function(){ return $(this).width(); }).get();
ts.resizable.toggleTextSelection( c, true );
});
$( document )
.bind( 'mousemove' + namespace, function( event ) {
var vars = wo.resizable_;
// ignore mousemove if no mousedown
if ( !vars.disabled || vars.mouseXPosition === 0 || !vars.$target ) { return; }
if ( wo.resizable_throttle ) {
clearTimeout( vars.timer );
vars.timer = setTimeout( function() {
ts.resizable.mouseMove( c, wo, event );
}, isNaN( wo.resizable_throttle ) ? 5 : wo.resizable_throttle );
} else {
ts.resizable.mouseMove( c, wo, event );
}
})
.bind( 'mouseup' + namespace, function() {
if (!wo.resizable_.disabled) { return; }
ts.resizable.toggleTextSelection( c, false );
ts.resizable.stopResize( c, wo );
ts.resizable.setHandlePosition( c, wo );
});
// resizeEnd event triggered by scroller widget
$( window ).bind( 'resize' + namespace + ' resizeEnd' + namespace, function() {
ts.resizable.setHandlePosition( c, wo );
});
// right click to reset columns to default widths
c.$table.find( 'thead:first' ).add( $( c.namespace + '_extra_table' ).find( 'thead:first' ) )
.bind( 'contextmenu' + namespace, function() {
// $.isEmptyObject() needs jQuery 1.4+; allow right click if already reset
var allowClick = wo.resizable_.storedSizes.length === 0;
ts.resizableReset( c.table );
ts.resizable.setHandlePosition( c, wo );
wo.resizable_.storedSizes = [];
return allowClick;
});
},
mouseMove : function( c, wo, event ) {
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();
if ( vars.fullWidth ) {
vars.storedSizes[ vars.target ] += leftEdge;
vars.storedSizes[ vars.next ] -= leftEdge;
ts.resizable.setWidths( c, wo );
} else if ( vars.overflow ) {
c.$table.add( $( c.namespace + '_extra_table' ) ).width(function(i, w){
return w + leftEdge;
});
if ( !$next.length ) {
// if expanding right-most column, scroll the wrapper
vars.$wrap[0].scrollLeft = c.$table.width();
}
} else {
vars.storedSizes[ vars.target ] += leftEdge;
ts.resizable.setWidths( c, wo );
}
vars.mouseXPosition = event.pageX;
},
stopResize : function( c, wo ) {
var vars = wo.resizable_;
vars.storedSizes = [];
if ( ts.storage ) {
vars.storedSizes = c.$headers.map(function(){ return $(this).width(); }).get();
if ( wo.resizable !== false ) {
// save all column widths
ts.storage( c.table, ts.css.resizableStorage, vars.storedSizes );
}
}
vars.mouseXPosition = 0;
vars.$target = vars.$next = null;
$(window).trigger('resize'); // will update stickyHeaders, just in case
}
};
// this widget saves the column widths if // this widget saves the column widths if
// $.tablesorter.storage function is included // $.tablesorter.storage function is included
// ************************** // **************************
@ -1966,163 +2215,52 @@ ts.addWidget({
resizable : true, resizable : true,
resizable_addLastColumn : false, resizable_addLastColumn : false,
resizable_widths : [], resizable_widths : [],
resizable_throttle : false // set to true (5ms) or any number 0-10 range resizable_throttle : false, // set to true (5ms) or any number 0-10 range
resizable_targetLast : false
}, },
format: function(table, c, wo) { init: function(table, thisWidget, c, wo) {
if (c.$table.hasClass('hasResizable')) { return; } ts.resizable.init( c, wo );
c.$table.addClass('hasResizable');
ts.resizableReset(table, true); // set default widths
var $rows, $columns, $column, column, timer,
storedSizes = {},
$table = c.$table,
$wrap = $table.parent(),
overflow = $table.parent().css('overflow') === 'auto',
mouseXPosition = 0,
$target = null,
$next = null,
fullWidth = Math.abs($table.parent().width() - $table.width()) < 20,
mouseMove = function(event){
if (mouseXPosition === 0 || !$target) { return; }
// resize columns
var leftEdge = event.pageX - mouseXPosition,
targetWidth = $target.width();
$target.width( targetWidth + leftEdge );
if ($target.width() !== targetWidth && fullWidth) {
$next.width( $next.width() - leftEdge );
} else if (overflow) {
$table.width(function(i, w){
return w + leftEdge;
});
if (!$next.length) {
// if expanding right-most column, scroll the wrapper
$wrap[0].scrollLeft = $table.width();
}
}
mouseXPosition = event.pageX;
}, },
stopResize = function() { remove: function( table, c, wo ) {
if (ts.storage && $target && $next) { if (wo.$resizable_container) {
storedSizes = {}; var namespace = c.namespace + 'tsresize';
storedSizes[$target.index()] = $target.width(); c.$table.add( $( c.namespace + '_extra_table' ) )
storedSizes[$next.index()] = $next.width();
$target.width( storedSizes[$target.index()] );
$next.width( storedSizes[$next.index()] );
if (wo.resizable !== false) {
// save all column widths
ts.storage(table, 'tablesorter-resizable', c.$headers.map(function(){ return $(this).width(); }).get() );
}
}
mouseXPosition = 0;
$target = $next = null;
$(window).trigger('resize'); // will update stickyHeaders, just in case
};
storedSizes = (ts.storage && wo.resizable !== false) ? ts.storage(table, 'tablesorter-resizable') : {};
// process only if table ID or url match
if (storedSizes) {
for (column in storedSizes) {
if (!isNaN(column) && column < c.$headers.length) {
c.$headers.eq(column).width(storedSizes[column]); // set saved resizable widths
}
}
}
$rows = $table.children('thead:first').children('tr');
// add resizable-false class name to headers (across rows as needed)
$rows.children().each(function() {
var canResize,
$column = $(this);
column = $column.attr('data-column');
canResize = ts.getData( $column, ts.getColumnData( table, c.headers, column ), 'resizable') === "false";
$rows.children().filter('[data-column="' + column + '"]')[canResize ? 'addClass' : 'removeClass']('resizable-false');
});
// add wrapper inside each cell to allow for positioning of the resizable target block
$rows.each(function() {
$column = $(this).children().not('.resizable-false');
if (!$(this).find('.' + ts.css.wrapper).length) {
// Firefox needs this inner div to position the resizer correctly
$column.wrapInner('<div class="' + ts.css.wrapper + '" style="position:relative;height:100%;width:100%"></div>');
}
// don't include the last column of the row
if (!wo.resizable_addLastColumn) { $column = $column.slice(0,-1); }
$columns = $columns ? $columns.add($column) : $column;
});
$columns
.each(function() {
var $column = $(this),
padding = parseInt($column.css('padding-right'), 10) + 10; // 10 is 1/2 of the 20px wide resizer
$column
.find('.' + ts.css.wrapper)
.append('<div class="' + ts.css.resizer + '" style="cursor:w-resize;position:absolute;z-index:1;right:-' +
padding + 'px;top:0;height:100%;width:20px;"></div>');
})
.find('.' + ts.css.resizer)
.bind('mousedown', function(event) {
// save header cell and mouse position
$target = $(event.target).closest('th');
var $header = c.$headers.filter('[data-column="' + $target.attr('data-column') + '"]');
if ($header.length > 1) { $target = $target.add($header); }
// if table is not as wide as it's parent, then resize the table
$next = event.shiftKey ? $target.parent().find('th').not('.resizable-false').filter(':last') : $target.nextAll(':not(.resizable-false)').eq(0);
mouseXPosition = event.pageX;
});
$(document)
.bind('mousemove.tsresize', function(event) {
// ignore mousemove if no mousedown
if (mouseXPosition === 0 || !$target) { return; }
if (wo.resizable_throttle) {
clearTimeout(timer);
timer = setTimeout(function(){
mouseMove(event);
}, isNaN(wo.resizable_throttle) ? 5 : wo.resizable_throttle );
} else {
mouseMove(event);
}
})
.bind('mouseup.tsresize', function() {
stopResize();
});
// right click to reset columns to default widths
$table.find('thead:first').bind('contextmenu.tsresize', function() {
ts.resizableReset(table);
// $.isEmptyObject() needs jQuery 1.4+; allow right click if already reset
var allowClick = $.isEmptyObject ? $.isEmptyObject(storedSizes) : true;
storedSizes = {};
return allowClick;
});
},
remove: function(table, c) {
c.$table
.removeClass('hasResizable') .removeClass('hasResizable')
.children('thead') .children( 'thead' ).unbind( 'contextmenu' + namespace );
.unbind('mouseup.tsresize mouseleave.tsresize contextmenu.tsresize')
.children('tr').children() wo.$resizable_container.remove();
.unbind('mousemove.tsresize mouseup.tsresize') ts.resizable.toggleTextSelection( c, false );
// don't remove "tablesorter-wrapper" as uitheme uses it too ts.resizableReset( table );
.find('.' + ts.css.resizer).remove(); $( document ).unbind( 'mousemove' + namespace + ' mouseup' + namespace );
ts.resizableReset(table); }
} }
}); });
ts.resizableReset = function(table, nosave) {
$(table).each(function(){ ts.resizableReset = function( table, nosave ) {
$( table ).each(function(){
var $t, var $t,
c = this.config, c = this.config,
wo = c && c.widgetOptions; wo = c && c.widgetOptions;
if (table && c) { if ( table && c ) {
c.$headers.each(function(i){ c.$headers.each( function( i ) {
$t = $(this); $t = $(this);
if (wo.resizable_widths && wo.resizable_widths[i]) { if ( wo.resizable_widths && wo.resizable_widths[ i ] ) {
$t.css('width', wo.resizable_widths[i]); $t.css( 'width', wo.resizable_widths[ i ] );
} else if (!$t.hasClass('resizable-false')) { } else if ( !$t.hasClass( 'resizable-false' ) ) {
// don't clear the width of any column that is not resizable // don't clear the width of any column that is not resizable
$t.css('width',''); $t.css( 'width', '' );
} }
}); });
if (ts.storage && !nosave) { ts.storage(this, 'tablesorter-resizable', {}); } // reset stickyHeader widths
$( window ).trigger( 'resize' );
if ( ts.storage && !nosave ) {
ts.storage( this, ts.css.resizableStorage, {} );
}
} }
}); });
}; };
})(jQuery, window); })( jQuery, window );
/*! Widget: saveSort */ /*! Widget: saveSort */
;(function ($) { ;(function ($) {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -8,6 +8,8 @@
<script src="js/jquery-1.4.4.min.js"></script> <script src="js/jquery-1.4.4.min.js"></script>
<!-- Demo stuff --> <!-- Demo stuff -->
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="css/jq.css"> <link rel="stylesheet" href="css/jq.css">
<link href="css/prettify.css" rel="stylesheet"> <link href="css/prettify.css" rel="stylesheet">
<script src="js/prettify.js"></script> <script src="js/prettify.js"></script>
@ -34,19 +36,19 @@
<script id="js">$(function() { <script id="js">$(function() {
$("table:first").tablesorter({ $('.narrow-table').tablesorter({
theme : 'blue', theme : 'blue',
// initialize zebra striping and resizable widgets on the table // initialize zebra striping and resizable widgets on the table
widgets: [ "zebra", "resizable" ], widgets: [ "zebra", "resizable", "stickyHeaders" ],
widgetOptions: { widgetOptions: {
resizable_addLastColumn : true resizable_addLastColumn : true
} }
}); });
$("table:last").tablesorter({ $('.full-width-table').tablesorter({
theme : 'blue', theme : 'blue',
// initialize zebra striping and resizable widgets on the table // initialize zebra striping and resizable widgets on the table
widgets: [ "zebra", "resizable" ], widgets: [ "zebra", "resizable", "stickyHeaders" ],
widgetOptions: { widgetOptions: {
resizable: true, resizable: true,
// These are the default column widths which are used when the table is // These are the default column widths which are used when the table is
@ -67,11 +69,23 @@
</div> </div>
<div id="main"> <div id="main">
<p class="tip">
<em>NOTE!</em> <p></p>
<br>
<div id="root" class="accordion">
<h3><a href="#">Notes</a></h3>
<div>
<ul> <ul>
<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> 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>).</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.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>
<li>This change allows the resizable widget to work seemlessly with the <strong>stickyHeaders</strong> widget (included in this demo); sadly, to make it work with the scroller widget will require more work.</li>
</ul>
</li>
<li>In <span class="version">v2.17.4</span>, modified the bindings so the mouse move will now work on the document instead of only within the table header; this makes interaction consistent with what the user expects.</li> <li>In <span class="version">v2.17.4</span>, modified the bindings so the mouse move will now work on the document instead of only within the table header; this makes interaction consistent with what the user expects.</li>
<li>In <span class="version">v2.15.12</span>, added <code>resizable_widths</code> option which allows the setting of default &amp; reset header widths.</li> <li>In <span class="version">v2.15.12</span>, added <code>resizable_widths</code> option which allows the setting of default &amp; reset header widths.</li>
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li> <li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
@ -92,12 +106,94 @@
<li>In order to save the resized widths, jQuery version 1.4.1+ should be used because jQuery's <code>parseJson()</code> function is needed.</li> <li>In order to save the resized widths, jQuery version 1.4.1+ should be used because jQuery's <code>parseJson()</code> function is needed.</li>
<li>Setting the <code>resizable_addLastColumn</code> widget option to <code>true</code> will add the resizable handle to the last column, see the "non-full" width table below (<span class="version">v2.9.0</span>).</li> <li>Setting the <code>resizable_addLastColumn</code> widget option to <code>true</code> will add the resizable handle to the last column, see the "non-full" width table below (<span class="version">v2.9.0</span>).</li>
</ul> </ul>
<p> </div>
<h3><a href="#">Options</a></h3>
<div>
<h4>Resizable widget defaults (added inside of tablesorter <code>widgetOptions</code>)</h4>
<div>
<span class="label label-info">TIP!</span> Click on the link in the function column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
</div>
<table class="options tablesorter-blue" data-sortlist="[[0,0]]">
<thead>
<tr><th>Option</th><th class="defaults">Default</th><th class="sorter-false">Description</th></tr>
</thead>
<tbody>
<tr id="resizable">
<td><a href="#" class="permalink">resizable</a></td>
<td>true</td>
<td>When <code>true</code> and the storage widget is included, all column widths will be saved to storage.
<div class="collapsible">
<p>This means that when the page is reloaded, any adjusted column widths will be restored.</p>
<p>The adjusted column sizes can be reset at any time by right-clicking on the table header.</p>
</div>
</td>
</tr>
<tr id="resizable-add-last-column">
<td><a href="#" class="permalink">resizable_addLastColumn</a></td>
<td>false</td>
<td>When <code>true</code>, the last column of the table is made resizable.
<div class="collapsible">
<p>If the table is full width, adjusting the right edge would actually shrink or stretch <em>all</em> columns without moving the right border.</p>
<p>On narrower tables, the table width will be adjusted.</p>
</div>
</td>
</tr>
<tr id="resizable-widths">
<td><a href="#" class="permalink">resizable_widths</a></td>
<td>[ ]</td>
<td>Set any default column widths within this zero-based-column-indexed array
<div class="collapsible">
<p>This option allows the setting of column widths initially (before any resizing occurs, or if there are no saved column widths) and when resetting (right-click on the column header).</p>
<p>The array may contain any css allowed width definitions (e.g. percentage, pixels, em, etc).</p>
<p>Undefined column widths to not add a specified width to the column</p>
<p>Here is an example from the second table in this demo showing how to set this option:</p>
<pre class="prettyprint lang-js">// Note that the "Age" column is not resizable,
// but the width can still be set to 40px here
resizable_widths : [ '10%', '10%', '40px', '10%', '100px' ]</pre>
</div>
</td>
</tr>
<tr id="resizable-throttle">
<td><a href="#" class="permalink">resizable_throttle</a></td>
<td>false</td>
<td>When this option is set to a number, or true, the resizing event from the window is throttled.
<div class="collapsible">
<p>Essentially, throttling the resize event limits the number of times the javascript is executed while resizing the window.</p>
<p>Without any throttling, slower browsers may lag while the javascript adjusts the column widths of the table.</p>
<p>With excessive throttling, the user will notice the table column width lag (while will be seen as the width jumping sporatically to catch up to the mouse) behind the mouse movement.</p>
<p>When this option is set to <code>true</code>, a default of <code>5</code> (milliseconds) is used.</p>
<p>If setting a number, try to keep this number in the <code>0</code> to <code>10</code> range.</p>
</div>
</td>
</tr>
<tr id="resizable-target-last">
<td><a href="#" class="permalink">resizable_targetLast</a></td>
<td>false</td>
<td>When <code>true</code>, the last column will be targetted for resizing.
<div class="collapsible">
<p>When <code>true</code>, resizing a column will change the size of the selected column, and the last column, not the selected column's neighbor.</p>
<p>When <code>false</code>, resizing a column will move the column border between it's neighbors.</p>
<p>Also, in a <em>full width table</em>, if this option is <code>false</code>, the same behavior as when this option is <code>true</code> can be seen when resizing a column while holding down the <kbd>Shift</kbd> key on the keyboard - the last column is resized.</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"> <div id="demo">
<h3>Non-full width table <small>(individual columns resize)</small></h3> <h3>Non-full width table <small>(individual columns resize)</small></h3>
<table class="tablesorter" style="width:auto"> <table class="narrow-table" style="width:auto">
<thead> <thead>
<tr> <tr>
<th>First Name</th> <th>First Name</th>
@ -153,7 +249,7 @@
</table> </table>
<h3>Full width table <small>(use shift to force last column to resize)</small></h3> <h3>Full width table <small>(use shift to force last column to resize)</small></h3>
<table class="tablesorter"> <table class="full-width-table">
<thead> <thead>
<tr> <tr>
<th>First Name</th> <th>First Name</th>

View File

@ -517,7 +517,7 @@
<li><a href="example-widget-print.html">Print widget</a> (<span class="version">v2.16.4</span>; <span class="version updated">v2.19.0</span>)</li> <li><a href="example-widget-print.html">Print widget</a> (<span class="version">v2.16.4</span>; <span class="version updated">v2.19.0</span>)</li>
<li><a href="example-widget-reflow.html">Reflow widget</a> (<span class="version">v2.16</span>; <span class="version updated">v2.19.0</span>)</li> <li><a href="example-widget-reflow.html">Reflow widget</a> (<span class="version">v2.16</span>; <span class="version updated">v2.19.0</span>)</li>
<li><a href="example-widgets.html">Repeat Headers widget</a> (v2.0.5; <span class="version updated">v2.19.0</span>)</li> <li><a href="example-widgets.html">Repeat Headers widget</a> (v2.0.5; <span class="version updated">v2.19.0</span>)</li>
<li><span class="results">&dagger;</span> <a href="example-widget-resizable.html">Resizable Columns widget</a> (v2.0.23.1; <span class="version updated">v2.19.0</span>)</li> <li><span class="results">&dagger;</span> <a href="example-widget-resizable.html">Resizable Columns widget</a> (v2.0.23.1; <span class="version updated">v2.21.3</span>)</li>
<li><span class="results">&dagger;</span> <a href="example-widget-savesort.html">Save sort widget</a> (v2.0.27)</li> <li><span class="results">&dagger;</span> <a href="example-widget-savesort.html">Save sort widget</a> (v2.0.27)</li>
<li><a href="example-widget-scroller.html">Scroller widget</a> (<span class="version">v2.9</span>; <span class="version updated">v2.21.3</span>).</li> <li><a href="example-widget-scroller.html">Scroller widget</a> (<span class="version">v2.9</span>; <span class="version updated">v2.21.3</span>).</li>
<li><a href="example-widget-static-row.html">StaticRow widget</a> (<span class="version">v2.16</span>; <span class="version updated">v2.19.1</span>).</li> <li><a href="example-widget-static-row.html">StaticRow widget</a> (<span class="version">v2.16</span>; <span class="version updated">v2.19.1</span>).</li>

View File

@ -1953,15 +1953,264 @@ ts.addWidget({
})(jQuery, window); })(jQuery, window);
/*! Widget: resizable */ /*! Widget: resizable - updated 3/25/2015 (v2.21.3) */
;(function ($, window) { ;(function ($, window) {
'use strict'; 'use strict';
var ts = $.tablesorter = $.tablesorter || {}; var ts = $.tablesorter = $.tablesorter || {};
$.extend(ts.css, { $.extend(ts.css, {
resizer : 'tablesorter-resizer' // resizable resizableContainer : 'tablesorter-resizable-container',
resizableHandle : 'tablesorter-resizable-handle',
resizableNoSelect : 'tablesorter-disableSelection',
resizableStorage : 'tablesorter-resizable'
}); });
// Add extra scroller css
$(function(){
var s = '<style>' +
'body.' + ts.css.resizableNoSelect + ' { -ms-user-select: none; -moz-user-select: -moz-none;' +
'-khtml-user-select: none; -webkit-user-select: none; user-select: none; }' +
'.' + ts.css.resizableContainer + ' { position: relative; height: 1px; }' +
// make handle z-index > than stickyHeader z-index, so the handle stays above sticky header
'.' + ts.css.resizableHandle + ' { position: absolute; display: inline-block; width: 8px; top: 1px;' +
'cursor: ew-resize; z-index: 3; user-select: none; -moz-user-select: none; }' +
'</style>';
$(s).appendTo('body');
});
ts.resizable = {
init : function( c, wo ) {
if ( c.$table.hasClass( 'hasResizable' ) ) { return; }
c.$table.addClass( 'hasResizable' );
ts.resizableReset( c.table, true ); // set default widths
// internal variables
wo.resizable_ = {
$wrap : c.$table.parent(),
mouseXPosition : 0,
$target : null,
$next : null,
overflow : c.$table.parent().css('overflow') === 'auto',
fullWidth : Math.abs(c.$table.parent().width() - c.$table.width()) < 20,
storedSizes : []
};
var noResize, $header, column, storedSizes,
marginTop = parseInt( c.$table.css( 'margin-top' ), 10 );
wo.resizable_.storedSizes = storedSizes = ( ( ts.storage && wo.resizable !== false ) ?
ts.storage( c.table, ts.css.resizableStorage ) :
[] ) || [];
ts.resizable.setWidths( c, wo, storedSizes );
wo.$resizable_container = $( '<div class="' + ts.css.resizableContainer + '">' )
.css({ top : marginTop })
.insertBefore( c.$table );
// add container
for ( column = 0; column < c.columns; column++ ) {
$header = c.$headerIndexed[ column ];
noResize = ts.getData( $header, ts.getColumnData( c.table, c.headers, column ), 'resizable' ) === 'false';
if ( !noResize ) {
$( '<div class="' + ts.css.resizableHandle + '">' )
.appendTo( wo.$resizable_container )
.attr({
'data-column' : column,
'unselectable' : 'on'
})
.data( 'header', $header )
.bind( 'selectstart', false );
}
}
c.$table.one('tablesorter-initialized', function() {
ts.resizable.setHandlePosition( c, wo );
ts.resizable.bindings( this.config, this.config.widgetOptions );
});
},
setWidth : function( $el, width ) {
$el.css({
'width' : width,
'min-width' : '',
'max-width' : ''
});
},
setWidths : function( c, wo, storedSizes ) {
var column,
$extra = $( c.namespace + '_extra_headers' ),
$col = c.$table.children( 'colgroup' ).children( 'col' );
storedSizes = storedSizes || wo.resizable_.storedSizes || [];
// process only if table ID or url match
if ( storedSizes.length ) {
for ( column = 0; column < c.columns; column++ ) {
// set saved resizable widths
c.$headers.eq( column ).width( storedSizes[ column ] );
if ( $extra.length ) {
// stickyHeaders needs to modify min & max width as well
ts.resizable.setWidth( $extra.eq( column ).add( $col.eq( column ) ), storedSizes[ column ] );
}
}
if ( $( c.namespace + '_extra_table' ).length && !ts.hasWidget( c.table, 'scroller' ) ) {
ts.resizable.setWidth( $( c.namespace + '_extra_table' ), c.$table.outerWidth() );
}
}
},
setHandlePosition : function( c, wo ) {
var tableWidth = c.$table.outerWidth(),
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 );
if ( hasScroller ) {
tableHeight = 0;
c.$table.closest( '.' + ts.css.scrollerWrap ).children().each(function(){
var $this = $(this);
// center table has a max-height set
tableHeight += $this.filter('[style*="height"]').length ? $this.height() : $this.children('table').height();
});
}
$handles.each( function() {
var $this = $(this),
column = parseInt( $this.attr( 'data-column' ), 10 ),
columns = c.columns - 1,
$header = $this.data( 'header' );
if ( column < columns || column === columns && wo.resizable_addLastColumn ) {
$this.css({
height : tableHeight,
left : $header.position().left + $header.width() - handleCenter
});
}
});
},
// prevent text selection while dragging resize bar
toggleTextSelection : function( c, toggle ) {
var namespace = c.namespace + 'tsresize';
c.widgetOptions.resizable_.disabled = toggle;
$( 'body' ).toggleClass( ts.css.resizableNoSelect, toggle );
if ( toggle ) {
$( 'body' )
.attr( 'unselectable', 'on' )
.bind( 'selectstart' + namespace, false );
} else {
$( 'body' )
.removeAttr( 'unselectable' )
.unbind( 'selectstart' + namespace );
}
},
bindings : function( c, wo ) {
var namespace = c.namespace + 'tsresize';
wo.$resizable_container.children().bind( 'mousedown', function( event ) {
// save header cell and mouse position
var column,
vars = wo.resizable_,
$extras = $( c.namespace + '_extra_headers' ),
$header = $( event.target ).data( 'header' );
column = parseInt( $header.attr( 'data-column' ), 10 );
vars.$target = $header = $header.add( $extras.filter('[data-column="' + column + '"]') );
vars.target = column;
// if table is not as wide as it's parent, then resize the table
vars.$next = event.shiftKey || wo.resizable_targetLast ?
$header.parent().children().not( '.resizable-false' ).filter( ':last' ) :
$header.nextAll( ':not(.resizable-false)' ).eq( 0 );
column = parseInt( vars.$next.attr( 'data-column' ), 10 );
vars.$next = vars.$next.add( $extras.filter('[data-column="' + column + '"]') );
vars.next = column;
vars.mouseXPosition = event.pageX;
vars.storedSizes = c.$headers.map(function(){ return $(this).width(); }).get();
ts.resizable.toggleTextSelection( c, true );
});
$( document )
.bind( 'mousemove' + namespace, function( event ) {
var vars = wo.resizable_;
// ignore mousemove if no mousedown
if ( !vars.disabled || vars.mouseXPosition === 0 || !vars.$target ) { return; }
if ( wo.resizable_throttle ) {
clearTimeout( vars.timer );
vars.timer = setTimeout( function() {
ts.resizable.mouseMove( c, wo, event );
}, isNaN( wo.resizable_throttle ) ? 5 : wo.resizable_throttle );
} else {
ts.resizable.mouseMove( c, wo, event );
}
})
.bind( 'mouseup' + namespace, function() {
if (!wo.resizable_.disabled) { return; }
ts.resizable.toggleTextSelection( c, false );
ts.resizable.stopResize( c, wo );
ts.resizable.setHandlePosition( c, wo );
});
// resizeEnd event triggered by scroller widget
$( window ).bind( 'resize' + namespace + ' resizeEnd' + namespace, function() {
ts.resizable.setHandlePosition( c, wo );
});
// right click to reset columns to default widths
c.$table.find( 'thead:first' ).add( $( c.namespace + '_extra_table' ).find( 'thead:first' ) )
.bind( 'contextmenu' + namespace, function() {
// $.isEmptyObject() needs jQuery 1.4+; allow right click if already reset
var allowClick = wo.resizable_.storedSizes.length === 0;
ts.resizableReset( c.table );
ts.resizable.setHandlePosition( c, wo );
wo.resizable_.storedSizes = [];
return allowClick;
});
},
mouseMove : function( c, wo, event ) {
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();
if ( vars.fullWidth ) {
vars.storedSizes[ vars.target ] += leftEdge;
vars.storedSizes[ vars.next ] -= leftEdge;
ts.resizable.setWidths( c, wo );
} else if ( vars.overflow ) {
c.$table.add( $( c.namespace + '_extra_table' ) ).width(function(i, w){
return w + leftEdge;
});
if ( !$next.length ) {
// if expanding right-most column, scroll the wrapper
vars.$wrap[0].scrollLeft = c.$table.width();
}
} else {
vars.storedSizes[ vars.target ] += leftEdge;
ts.resizable.setWidths( c, wo );
}
vars.mouseXPosition = event.pageX;
},
stopResize : function( c, wo ) {
var vars = wo.resizable_;
vars.storedSizes = [];
if ( ts.storage ) {
vars.storedSizes = c.$headers.map(function(){ return $(this).width(); }).get();
if ( wo.resizable !== false ) {
// save all column widths
ts.storage( c.table, ts.css.resizableStorage, vars.storedSizes );
}
}
vars.mouseXPosition = 0;
vars.$target = vars.$next = null;
$(window).trigger('resize'); // will update stickyHeaders, just in case
}
};
// this widget saves the column widths if // this widget saves the column widths if
// $.tablesorter.storage function is included // $.tablesorter.storage function is included
// ************************** // **************************
@ -1972,163 +2221,52 @@ ts.addWidget({
resizable : true, resizable : true,
resizable_addLastColumn : false, resizable_addLastColumn : false,
resizable_widths : [], resizable_widths : [],
resizable_throttle : false // set to true (5ms) or any number 0-10 range resizable_throttle : false, // set to true (5ms) or any number 0-10 range
resizable_targetLast : false
}, },
format: function(table, c, wo) { init: function(table, thisWidget, c, wo) {
if (c.$table.hasClass('hasResizable')) { return; } ts.resizable.init( c, wo );
c.$table.addClass('hasResizable');
ts.resizableReset(table, true); // set default widths
var $rows, $columns, $column, column, timer,
storedSizes = {},
$table = c.$table,
$wrap = $table.parent(),
overflow = $table.parent().css('overflow') === 'auto',
mouseXPosition = 0,
$target = null,
$next = null,
fullWidth = Math.abs($table.parent().width() - $table.width()) < 20,
mouseMove = function(event){
if (mouseXPosition === 0 || !$target) { return; }
// resize columns
var leftEdge = event.pageX - mouseXPosition,
targetWidth = $target.width();
$target.width( targetWidth + leftEdge );
if ($target.width() !== targetWidth && fullWidth) {
$next.width( $next.width() - leftEdge );
} else if (overflow) {
$table.width(function(i, w){
return w + leftEdge;
});
if (!$next.length) {
// if expanding right-most column, scroll the wrapper
$wrap[0].scrollLeft = $table.width();
}
}
mouseXPosition = event.pageX;
}, },
stopResize = function() { remove: function( table, c, wo ) {
if (ts.storage && $target && $next) { if (wo.$resizable_container) {
storedSizes = {}; var namespace = c.namespace + 'tsresize';
storedSizes[$target.index()] = $target.width(); c.$table.add( $( c.namespace + '_extra_table' ) )
storedSizes[$next.index()] = $next.width();
$target.width( storedSizes[$target.index()] );
$next.width( storedSizes[$next.index()] );
if (wo.resizable !== false) {
// save all column widths
ts.storage(table, 'tablesorter-resizable', c.$headers.map(function(){ return $(this).width(); }).get() );
}
}
mouseXPosition = 0;
$target = $next = null;
$(window).trigger('resize'); // will update stickyHeaders, just in case
};
storedSizes = (ts.storage && wo.resizable !== false) ? ts.storage(table, 'tablesorter-resizable') : {};
// process only if table ID or url match
if (storedSizes) {
for (column in storedSizes) {
if (!isNaN(column) && column < c.$headers.length) {
c.$headers.eq(column).width(storedSizes[column]); // set saved resizable widths
}
}
}
$rows = $table.children('thead:first').children('tr');
// add resizable-false class name to headers (across rows as needed)
$rows.children().each(function() {
var canResize,
$column = $(this);
column = $column.attr('data-column');
canResize = ts.getData( $column, ts.getColumnData( table, c.headers, column ), 'resizable') === "false";
$rows.children().filter('[data-column="' + column + '"]')[canResize ? 'addClass' : 'removeClass']('resizable-false');
});
// add wrapper inside each cell to allow for positioning of the resizable target block
$rows.each(function() {
$column = $(this).children().not('.resizable-false');
if (!$(this).find('.' + ts.css.wrapper).length) {
// Firefox needs this inner div to position the resizer correctly
$column.wrapInner('<div class="' + ts.css.wrapper + '" style="position:relative;height:100%;width:100%"></div>');
}
// don't include the last column of the row
if (!wo.resizable_addLastColumn) { $column = $column.slice(0,-1); }
$columns = $columns ? $columns.add($column) : $column;
});
$columns
.each(function() {
var $column = $(this),
padding = parseInt($column.css('padding-right'), 10) + 10; // 10 is 1/2 of the 20px wide resizer
$column
.find('.' + ts.css.wrapper)
.append('<div class="' + ts.css.resizer + '" style="cursor:w-resize;position:absolute;z-index:1;right:-' +
padding + 'px;top:0;height:100%;width:20px;"></div>');
})
.find('.' + ts.css.resizer)
.bind('mousedown', function(event) {
// save header cell and mouse position
$target = $(event.target).closest('th');
var $header = c.$headers.filter('[data-column="' + $target.attr('data-column') + '"]');
if ($header.length > 1) { $target = $target.add($header); }
// if table is not as wide as it's parent, then resize the table
$next = event.shiftKey ? $target.parent().find('th').not('.resizable-false').filter(':last') : $target.nextAll(':not(.resizable-false)').eq(0);
mouseXPosition = event.pageX;
});
$(document)
.bind('mousemove.tsresize', function(event) {
// ignore mousemove if no mousedown
if (mouseXPosition === 0 || !$target) { return; }
if (wo.resizable_throttle) {
clearTimeout(timer);
timer = setTimeout(function(){
mouseMove(event);
}, isNaN(wo.resizable_throttle) ? 5 : wo.resizable_throttle );
} else {
mouseMove(event);
}
})
.bind('mouseup.tsresize', function() {
stopResize();
});
// right click to reset columns to default widths
$table.find('thead:first').bind('contextmenu.tsresize', function() {
ts.resizableReset(table);
// $.isEmptyObject() needs jQuery 1.4+; allow right click if already reset
var allowClick = $.isEmptyObject ? $.isEmptyObject(storedSizes) : true;
storedSizes = {};
return allowClick;
});
},
remove: function(table, c) {
c.$table
.removeClass('hasResizable') .removeClass('hasResizable')
.children('thead') .children( 'thead' ).unbind( 'contextmenu' + namespace );
.unbind('mouseup.tsresize mouseleave.tsresize contextmenu.tsresize')
.children('tr').children() wo.$resizable_container.remove();
.unbind('mousemove.tsresize mouseup.tsresize') ts.resizable.toggleTextSelection( c, false );
// don't remove "tablesorter-wrapper" as uitheme uses it too ts.resizableReset( table );
.find('.' + ts.css.resizer).remove(); $( document ).unbind( 'mousemove' + namespace + ' mouseup' + namespace );
ts.resizableReset(table); }
} }
}); });
ts.resizableReset = function(table, nosave) {
$(table).each(function(){ ts.resizableReset = function( table, nosave ) {
$( table ).each(function(){
var $t, var $t,
c = this.config, c = this.config,
wo = c && c.widgetOptions; wo = c && c.widgetOptions;
if (table && c) { if ( table && c ) {
c.$headers.each(function(i){ c.$headers.each( function( i ) {
$t = $(this); $t = $(this);
if (wo.resizable_widths && wo.resizable_widths[i]) { if ( wo.resizable_widths && wo.resizable_widths[ i ] ) {
$t.css('width', wo.resizable_widths[i]); $t.css( 'width', wo.resizable_widths[ i ] );
} else if (!$t.hasClass('resizable-false')) { } else if ( !$t.hasClass( 'resizable-false' ) ) {
// don't clear the width of any column that is not resizable // don't clear the width of any column that is not resizable
$t.css('width',''); $t.css( 'width', '' );
} }
}); });
if (ts.storage && !nosave) { ts.storage(this, 'tablesorter-resizable', {}); } // reset stickyHeader widths
$( window ).trigger( 'resize' );
if ( ts.storage && !nosave ) {
ts.storage( this, ts.css.resizableStorage, {} );
}
} }
}); });
}; };
})(jQuery, window); })( jQuery, window );
/*! Widget: saveSort */ /*! Widget: saveSort */
;(function ($) { ;(function ($) {

View File

@ -1,12 +1,261 @@
/*! Widget: resizable */ /*! Widget: resizable - updated 3/25/2015 (v2.21.3) */
;(function ($, window) { ;(function ($, window) {
'use strict'; 'use strict';
var ts = $.tablesorter = $.tablesorter || {}; var ts = $.tablesorter = $.tablesorter || {};
$.extend(ts.css, { $.extend(ts.css, {
resizer : 'tablesorter-resizer' // resizable resizableContainer : 'tablesorter-resizable-container',
resizableHandle : 'tablesorter-resizable-handle',
resizableNoSelect : 'tablesorter-disableSelection',
resizableStorage : 'tablesorter-resizable'
}); });
// Add extra scroller css
$(function(){
var s = '<style>' +
'body.' + ts.css.resizableNoSelect + ' { -ms-user-select: none; -moz-user-select: -moz-none;' +
'-khtml-user-select: none; -webkit-user-select: none; user-select: none; }' +
'.' + ts.css.resizableContainer + ' { position: relative; height: 1px; }' +
// make handle z-index > than stickyHeader z-index, so the handle stays above sticky header
'.' + ts.css.resizableHandle + ' { position: absolute; display: inline-block; width: 8px; top: 1px;' +
'cursor: ew-resize; z-index: 3; user-select: none; -moz-user-select: none; }' +
'</style>';
$(s).appendTo('body');
});
ts.resizable = {
init : function( c, wo ) {
if ( c.$table.hasClass( 'hasResizable' ) ) { return; }
c.$table.addClass( 'hasResizable' );
ts.resizableReset( c.table, true ); // set default widths
// internal variables
wo.resizable_ = {
$wrap : c.$table.parent(),
mouseXPosition : 0,
$target : null,
$next : null,
overflow : c.$table.parent().css('overflow') === 'auto',
fullWidth : Math.abs(c.$table.parent().width() - c.$table.width()) < 20,
storedSizes : []
};
var noResize, $header, column, storedSizes,
marginTop = parseInt( c.$table.css( 'margin-top' ), 10 );
wo.resizable_.storedSizes = storedSizes = ( ( ts.storage && wo.resizable !== false ) ?
ts.storage( c.table, ts.css.resizableStorage ) :
[] ) || [];
ts.resizable.setWidths( c, wo, storedSizes );
wo.$resizable_container = $( '<div class="' + ts.css.resizableContainer + '">' )
.css({ top : marginTop })
.insertBefore( c.$table );
// add container
for ( column = 0; column < c.columns; column++ ) {
$header = c.$headerIndexed[ column ];
noResize = ts.getData( $header, ts.getColumnData( c.table, c.headers, column ), 'resizable' ) === 'false';
if ( !noResize ) {
$( '<div class="' + ts.css.resizableHandle + '">' )
.appendTo( wo.$resizable_container )
.attr({
'data-column' : column,
'unselectable' : 'on'
})
.data( 'header', $header )
.bind( 'selectstart', false );
}
}
c.$table.one('tablesorter-initialized', function() {
ts.resizable.setHandlePosition( c, wo );
ts.resizable.bindings( this.config, this.config.widgetOptions );
});
},
setWidth : function( $el, width ) {
$el.css({
'width' : width,
'min-width' : '',
'max-width' : ''
});
},
setWidths : function( c, wo, storedSizes ) {
var column,
$extra = $( c.namespace + '_extra_headers' ),
$col = c.$table.children( 'colgroup' ).children( 'col' );
storedSizes = storedSizes || wo.resizable_.storedSizes || [];
// process only if table ID or url match
if ( storedSizes.length ) {
for ( column = 0; column < c.columns; column++ ) {
// set saved resizable widths
c.$headers.eq( column ).width( storedSizes[ column ] );
if ( $extra.length ) {
// stickyHeaders needs to modify min & max width as well
ts.resizable.setWidth( $extra.eq( column ).add( $col.eq( column ) ), storedSizes[ column ] );
}
}
if ( $( c.namespace + '_extra_table' ).length && !ts.hasWidget( c.table, 'scroller' ) ) {
ts.resizable.setWidth( $( c.namespace + '_extra_table' ), c.$table.outerWidth() );
}
}
},
setHandlePosition : function( c, wo ) {
var tableWidth = c.$table.outerWidth(),
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 );
if ( hasScroller ) {
tableHeight = 0;
c.$table.closest( '.' + ts.css.scrollerWrap ).children().each(function(){
var $this = $(this);
// center table has a max-height set
tableHeight += $this.filter('[style*="height"]').length ? $this.height() : $this.children('table').height();
});
}
$handles.each( function() {
var $this = $(this),
column = parseInt( $this.attr( 'data-column' ), 10 ),
columns = c.columns - 1,
$header = $this.data( 'header' );
if ( column < columns || column === columns && wo.resizable_addLastColumn ) {
$this.css({
height : tableHeight,
left : $header.position().left + $header.width() - handleCenter
});
}
});
},
// prevent text selection while dragging resize bar
toggleTextSelection : function( c, toggle ) {
var namespace = c.namespace + 'tsresize';
c.widgetOptions.resizable_.disabled = toggle;
$( 'body' ).toggleClass( ts.css.resizableNoSelect, toggle );
if ( toggle ) {
$( 'body' )
.attr( 'unselectable', 'on' )
.bind( 'selectstart' + namespace, false );
} else {
$( 'body' )
.removeAttr( 'unselectable' )
.unbind( 'selectstart' + namespace );
}
},
bindings : function( c, wo ) {
var namespace = c.namespace + 'tsresize';
wo.$resizable_container.children().bind( 'mousedown', function( event ) {
// save header cell and mouse position
var column,
vars = wo.resizable_,
$extras = $( c.namespace + '_extra_headers' ),
$header = $( event.target ).data( 'header' );
column = parseInt( $header.attr( 'data-column' ), 10 );
vars.$target = $header = $header.add( $extras.filter('[data-column="' + column + '"]') );
vars.target = column;
// if table is not as wide as it's parent, then resize the table
vars.$next = event.shiftKey || wo.resizable_targetLast ?
$header.parent().children().not( '.resizable-false' ).filter( ':last' ) :
$header.nextAll( ':not(.resizable-false)' ).eq( 0 );
column = parseInt( vars.$next.attr( 'data-column' ), 10 );
vars.$next = vars.$next.add( $extras.filter('[data-column="' + column + '"]') );
vars.next = column;
vars.mouseXPosition = event.pageX;
vars.storedSizes = c.$headers.map(function(){ return $(this).width(); }).get();
ts.resizable.toggleTextSelection( c, true );
});
$( document )
.bind( 'mousemove' + namespace, function( event ) {
var vars = wo.resizable_;
// ignore mousemove if no mousedown
if ( !vars.disabled || vars.mouseXPosition === 0 || !vars.$target ) { return; }
if ( wo.resizable_throttle ) {
clearTimeout( vars.timer );
vars.timer = setTimeout( function() {
ts.resizable.mouseMove( c, wo, event );
}, isNaN( wo.resizable_throttle ) ? 5 : wo.resizable_throttle );
} else {
ts.resizable.mouseMove( c, wo, event );
}
})
.bind( 'mouseup' + namespace, function() {
if (!wo.resizable_.disabled) { return; }
ts.resizable.toggleTextSelection( c, false );
ts.resizable.stopResize( c, wo );
ts.resizable.setHandlePosition( c, wo );
});
// resizeEnd event triggered by scroller widget
$( window ).bind( 'resize' + namespace + ' resizeEnd' + namespace, function() {
ts.resizable.setHandlePosition( c, wo );
});
// right click to reset columns to default widths
c.$table.find( 'thead:first' ).add( $( c.namespace + '_extra_table' ).find( 'thead:first' ) )
.bind( 'contextmenu' + namespace, function() {
// $.isEmptyObject() needs jQuery 1.4+; allow right click if already reset
var allowClick = wo.resizable_.storedSizes.length === 0;
ts.resizableReset( c.table );
ts.resizable.setHandlePosition( c, wo );
wo.resizable_.storedSizes = [];
return allowClick;
});
},
mouseMove : function( c, wo, event ) {
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();
if ( vars.fullWidth ) {
vars.storedSizes[ vars.target ] += leftEdge;
vars.storedSizes[ vars.next ] -= leftEdge;
ts.resizable.setWidths( c, wo );
} else if ( vars.overflow ) {
c.$table.add( $( c.namespace + '_extra_table' ) ).width(function(i, w){
return w + leftEdge;
});
if ( !$next.length ) {
// if expanding right-most column, scroll the wrapper
vars.$wrap[0].scrollLeft = c.$table.width();
}
} else {
vars.storedSizes[ vars.target ] += leftEdge;
ts.resizable.setWidths( c, wo );
}
vars.mouseXPosition = event.pageX;
},
stopResize : function( c, wo ) {
var vars = wo.resizable_;
vars.storedSizes = [];
if ( ts.storage ) {
vars.storedSizes = c.$headers.map(function(){ return $(this).width(); }).get();
if ( wo.resizable !== false ) {
// save all column widths
ts.storage( c.table, ts.css.resizableStorage, vars.storedSizes );
}
}
vars.mouseXPosition = 0;
vars.$target = vars.$next = null;
$(window).trigger('resize'); // will update stickyHeaders, just in case
}
};
// this widget saves the column widths if // this widget saves the column widths if
// $.tablesorter.storage function is included // $.tablesorter.storage function is included
// ************************** // **************************
@ -17,160 +266,49 @@ ts.addWidget({
resizable : true, resizable : true,
resizable_addLastColumn : false, resizable_addLastColumn : false,
resizable_widths : [], resizable_widths : [],
resizable_throttle : false // set to true (5ms) or any number 0-10 range resizable_throttle : false, // set to true (5ms) or any number 0-10 range
resizable_targetLast : false
}, },
format: function(table, c, wo) { init: function(table, thisWidget, c, wo) {
if (c.$table.hasClass('hasResizable')) { return; } ts.resizable.init( c, wo );
c.$table.addClass('hasResizable');
ts.resizableReset(table, true); // set default widths
var $rows, $columns, $column, column, timer,
storedSizes = {},
$table = c.$table,
$wrap = $table.parent(),
overflow = $table.parent().css('overflow') === 'auto',
mouseXPosition = 0,
$target = null,
$next = null,
fullWidth = Math.abs($table.parent().width() - $table.width()) < 20,
mouseMove = function(event){
if (mouseXPosition === 0 || !$target) { return; }
// resize columns
var leftEdge = event.pageX - mouseXPosition,
targetWidth = $target.width();
$target.width( targetWidth + leftEdge );
if ($target.width() !== targetWidth && fullWidth) {
$next.width( $next.width() - leftEdge );
} else if (overflow) {
$table.width(function(i, w){
return w + leftEdge;
});
if (!$next.length) {
// if expanding right-most column, scroll the wrapper
$wrap[0].scrollLeft = $table.width();
}
}
mouseXPosition = event.pageX;
}, },
stopResize = function() { remove: function( table, c, wo ) {
if (ts.storage && $target && $next) { if (wo.$resizable_container) {
storedSizes = {}; var namespace = c.namespace + 'tsresize';
storedSizes[$target.index()] = $target.width(); c.$table.add( $( c.namespace + '_extra_table' ) )
storedSizes[$next.index()] = $next.width();
$target.width( storedSizes[$target.index()] );
$next.width( storedSizes[$next.index()] );
if (wo.resizable !== false) {
// save all column widths
ts.storage(table, 'tablesorter-resizable', c.$headers.map(function(){ return $(this).width(); }).get() );
}
}
mouseXPosition = 0;
$target = $next = null;
$(window).trigger('resize'); // will update stickyHeaders, just in case
};
storedSizes = (ts.storage && wo.resizable !== false) ? ts.storage(table, 'tablesorter-resizable') : {};
// process only if table ID or url match
if (storedSizes) {
for (column in storedSizes) {
if (!isNaN(column) && column < c.$headers.length) {
c.$headers.eq(column).width(storedSizes[column]); // set saved resizable widths
}
}
}
$rows = $table.children('thead:first').children('tr');
// add resizable-false class name to headers (across rows as needed)
$rows.children().each(function() {
var canResize,
$column = $(this);
column = $column.attr('data-column');
canResize = ts.getData( $column, ts.getColumnData( table, c.headers, column ), 'resizable') === "false";
$rows.children().filter('[data-column="' + column + '"]')[canResize ? 'addClass' : 'removeClass']('resizable-false');
});
// add wrapper inside each cell to allow for positioning of the resizable target block
$rows.each(function() {
$column = $(this).children().not('.resizable-false');
if (!$(this).find('.' + ts.css.wrapper).length) {
// Firefox needs this inner div to position the resizer correctly
$column.wrapInner('<div class="' + ts.css.wrapper + '" style="position:relative;height:100%;width:100%"></div>');
}
// don't include the last column of the row
if (!wo.resizable_addLastColumn) { $column = $column.slice(0,-1); }
$columns = $columns ? $columns.add($column) : $column;
});
$columns
.each(function() {
var $column = $(this),
padding = parseInt($column.css('padding-right'), 10) + 10; // 10 is 1/2 of the 20px wide resizer
$column
.find('.' + ts.css.wrapper)
.append('<div class="' + ts.css.resizer + '" style="cursor:w-resize;position:absolute;z-index:1;right:-' +
padding + 'px;top:0;height:100%;width:20px;"></div>');
})
.find('.' + ts.css.resizer)
.bind('mousedown', function(event) {
// save header cell and mouse position
$target = $(event.target).closest('th');
var $header = c.$headers.filter('[data-column="' + $target.attr('data-column') + '"]');
if ($header.length > 1) { $target = $target.add($header); }
// if table is not as wide as it's parent, then resize the table
$next = event.shiftKey ? $target.parent().find('th').not('.resizable-false').filter(':last') : $target.nextAll(':not(.resizable-false)').eq(0);
mouseXPosition = event.pageX;
});
$(document)
.bind('mousemove.tsresize', function(event) {
// ignore mousemove if no mousedown
if (mouseXPosition === 0 || !$target) { return; }
if (wo.resizable_throttle) {
clearTimeout(timer);
timer = setTimeout(function(){
mouseMove(event);
}, isNaN(wo.resizable_throttle) ? 5 : wo.resizable_throttle );
} else {
mouseMove(event);
}
})
.bind('mouseup.tsresize', function() {
stopResize();
});
// right click to reset columns to default widths
$table.find('thead:first').bind('contextmenu.tsresize', function() {
ts.resizableReset(table);
// $.isEmptyObject() needs jQuery 1.4+; allow right click if already reset
var allowClick = $.isEmptyObject ? $.isEmptyObject(storedSizes) : true;
storedSizes = {};
return allowClick;
});
},
remove: function(table, c) {
c.$table
.removeClass('hasResizable') .removeClass('hasResizable')
.children('thead') .children( 'thead' ).unbind( 'contextmenu' + namespace );
.unbind('mouseup.tsresize mouseleave.tsresize contextmenu.tsresize')
.children('tr').children() wo.$resizable_container.remove();
.unbind('mousemove.tsresize mouseup.tsresize') ts.resizable.toggleTextSelection( c, false );
// don't remove "tablesorter-wrapper" as uitheme uses it too ts.resizableReset( table );
.find('.' + ts.css.resizer).remove(); $( document ).unbind( 'mousemove' + namespace + ' mouseup' + namespace );
ts.resizableReset(table); }
} }
}); });
ts.resizableReset = function(table, nosave) {
$(table).each(function(){ ts.resizableReset = function( table, nosave ) {
$( table ).each(function(){
var $t, var $t,
c = this.config, c = this.config,
wo = c && c.widgetOptions; wo = c && c.widgetOptions;
if (table && c) { if ( table && c ) {
c.$headers.each(function(i){ c.$headers.each( function( i ) {
$t = $(this); $t = $(this);
if (wo.resizable_widths && wo.resizable_widths[i]) { if ( wo.resizable_widths && wo.resizable_widths[ i ] ) {
$t.css('width', wo.resizable_widths[i]); $t.css( 'width', wo.resizable_widths[ i ] );
} else if (!$t.hasClass('resizable-false')) { } else if ( !$t.hasClass( 'resizable-false' ) ) {
// don't clear the width of any column that is not resizable // don't clear the width of any column that is not resizable
$t.css('width',''); $t.css( 'width', '' );
} }
}); });
if (ts.storage && !nosave) { ts.storage(this, 'tablesorter-resizable', {}); } // reset stickyHeader widths
$( window ).trigger( 'resize' );
if ( ts.storage && !nosave ) {
ts.storage( this, ts.css.resizableStorage, {} );
}
} }
}); });
}; };
})(jQuery, window); })( jQuery, window );