library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-11-15 23:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Resizable: add resizable_throttle option to throttle mousemove event. Fixes #662

Browse Source
This commit is contained in:
Mottie 2014-07-03 23:04:15 -05:00
parent b83f67a965
commit 10b0f4e7f2
2 changed files with 50 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
docs/index.html
View File

@ -1680,6 +1680,8 @@ $(function(){
resizable_addLastColumn: false,
// Add the starting & reset header widths
resizable_widths : [],
// throttle resizable event (needed for slow browsers)
resizable_throttle : false,
// *** savesort widget ***
// if false, the sort will not be saved for next page reload
@ -2879,6 +2881,33 @@ $('table').trigger('search', false);</pre></div>
<td><a href="example-widget-resizable.html">Example</a></td>
</tr>
<tr id="widget-resizable-throttle">
<td><a href="#" class="permalink">resizable_throttle</a></td>
<td>Boolean</td>
<td>false</td>
<td>
Resizable widget: Set this option to throttle the resizable events (<span class="version">v2.17.4</span>).
<div class="collapsible">
<br>
When <code>false</code> throttling of the mousemove (resizing) event is not applied.<br>
<br>
Set this option to either <code>true</code> for a default 5 millisecond delay, or set it to any number less than 10 to adjust the throttling delay that is applied to the mousemove/resizing event.<br>
<br>
Use the <a href="#widget-resizable-throttle"><code>&quot;resizable_widths&quot;</code></a> option as follows:
<pre class="prettyprint lang-js">$(function(){
$("table").tablesorter({
widgets: ["resizable"],
widgetOptions : {
// set to true for a default 5ms throttling delay
// or set to a number < 10 (more than that makes the resizing adjustment unusable
resizable_throttle : true
}
});
});</pre></div>
</td>
<td></td>
</tr>
<tr id="widget-savesort">
<td><a href="#" class="permalink">saveSort</a></td>
<td>Boolean</td>

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

@ -1506,19 +1506,31 @@ ts.addWidget({
options: {
resizable : true,
resizable_addLastColumn : false,
resizable_widths : []
resizable_widths : [],
resizable_throttle : false // set to true (5ms) or any number 0-10 range
},
format: function(table, c, wo) {
if (c.$table.hasClass('hasResizable')) { return; }
c.$table.addClass('hasResizable');
ts.resizableReset(table, true); // set default widths
var $rows, $columns, $column, column,
var $rows, $columns, $column, column, timer,
storedSizes = {},
$table = c.$table,
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 );
}
mouseXPosition = event.pageX;
},
stopResize = function() {
if (ts.storage && $target && $next) {
storedSizes = {};
@ -1587,14 +1599,14 @@ ts.addWidget({
.bind('mousemove.tsresize', function(event) {
// ignore mousemove if no mousedown
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 );
if (wo.resizable_throttle) {
clearTimeout(timer);
timer = setTimeout(function(){
mouseMove(event);
}, isNaN(wo.resizable_throttle) ? 5 : wo.resizable_throttle );
} else {
mouseMove(event);
}
mouseXPosition = event.pageX;
})
.bind('mouseup.tsresize', function() {
stopResize();