[7304c7f] | 1 | /*! RowReorder 1.2.6
|
---|
| 2 | * 2015-2019 SpryMedia Ltd - datatables.net/license
|
---|
| 3 | */
|
---|
| 4 |
|
---|
| 5 | /**
|
---|
| 6 | * @summary RowReorder
|
---|
| 7 | * @description Row reordering extension for DataTables
|
---|
| 8 | * @version 1.2.6
|
---|
| 9 | * @file dataTables.rowReorder.js
|
---|
| 10 | * @author SpryMedia Ltd (www.sprymedia.co.uk)
|
---|
| 11 | * @contact www.sprymedia.co.uk/contact
|
---|
| 12 | * @copyright Copyright 2015-2019 SpryMedia Ltd.
|
---|
| 13 | *
|
---|
| 14 | * This source file is free software, available under the following license:
|
---|
| 15 | * MIT license - http://datatables.net/license/mit
|
---|
| 16 | *
|
---|
| 17 | * This source file is distributed in the hope that it will be useful, but
|
---|
| 18 | * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
|
---|
| 19 | * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
|
---|
| 20 | *
|
---|
| 21 | * For details please refer to: http://www.datatables.net
|
---|
| 22 | */
|
---|
| 23 |
|
---|
| 24 | (function( factory ){
|
---|
| 25 | if ( typeof define === 'function' && define.amd ) {
|
---|
| 26 | // AMD
|
---|
| 27 | define( ['jquery', 'datatables.net'], function ( $ ) {
|
---|
| 28 | return factory( $, window, document );
|
---|
| 29 | } );
|
---|
| 30 | }
|
---|
| 31 | else if ( typeof exports === 'object' ) {
|
---|
| 32 | // CommonJS
|
---|
| 33 | module.exports = function (root, $) {
|
---|
| 34 | if ( ! root ) {
|
---|
| 35 | root = window;
|
---|
| 36 | }
|
---|
| 37 |
|
---|
| 38 | if ( ! $ || ! $.fn.dataTable ) {
|
---|
| 39 | $ = require('datatables.net')(root, $).$;
|
---|
| 40 | }
|
---|
| 41 |
|
---|
| 42 | return factory( $, root, root.document );
|
---|
| 43 | };
|
---|
| 44 | }
|
---|
| 45 | else {
|
---|
| 46 | // Browser
|
---|
| 47 | factory( jQuery, window, document );
|
---|
| 48 | }
|
---|
| 49 | }(function( $, window, document, undefined ) {
|
---|
| 50 | 'use strict';
|
---|
| 51 | var DataTable = $.fn.dataTable;
|
---|
| 52 |
|
---|
| 53 |
|
---|
| 54 | /**
|
---|
| 55 | * RowReorder provides the ability in DataTables to click and drag rows to
|
---|
| 56 | * reorder them. When a row is dropped the data for the rows effected will be
|
---|
| 57 | * updated to reflect the change. Normally this data point should also be the
|
---|
| 58 | * column being sorted upon in the DataTable but this does not need to be the
|
---|
| 59 | * case. RowReorder implements a "data swap" method - so the rows being
|
---|
| 60 | * reordered take the value of the data point from the row that used to occupy
|
---|
| 61 | * the row's new position.
|
---|
| 62 | *
|
---|
| 63 | * Initialisation is done by either:
|
---|
| 64 | *
|
---|
| 65 | * * `rowReorder` parameter in the DataTable initialisation object
|
---|
| 66 | * * `new $.fn.dataTable.RowReorder( table, opts )` after DataTables
|
---|
| 67 | * initialisation.
|
---|
[c6b84df] | 68 | *
|
---|
[7304c7f] | 69 | * @class
|
---|
| 70 | * @param {object} settings DataTables settings object for the host table
|
---|
| 71 | * @param {object} [opts] Configuration options
|
---|
| 72 | * @requires jQuery 1.7+
|
---|
| 73 | * @requires DataTables 1.10.7+
|
---|
| 74 | */
|
---|
| 75 | var RowReorder = function ( dt, opts ) {
|
---|
| 76 | // Sanity check that we are using DataTables 1.10 or newer
|
---|
| 77 | if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.8' ) ) {
|
---|
| 78 | throw 'DataTables RowReorder requires DataTables 1.10.8 or newer';
|
---|
| 79 | }
|
---|
| 80 |
|
---|
| 81 | // User and defaults configuration object
|
---|
| 82 | this.c = $.extend( true, {},
|
---|
| 83 | DataTable.defaults.rowReorder,
|
---|
| 84 | RowReorder.defaults,
|
---|
| 85 | opts
|
---|
| 86 | );
|
---|
| 87 |
|
---|
| 88 | // Internal settings
|
---|
| 89 | this.s = {
|
---|
| 90 | /** @type {integer} Scroll body top cache */
|
---|
| 91 | bodyTop: null,
|
---|
| 92 |
|
---|
| 93 | /** @type {DataTable.Api} DataTables' API instance */
|
---|
| 94 | dt: new DataTable.Api( dt ),
|
---|
| 95 |
|
---|
| 96 | /** @type {function} Data fetch function */
|
---|
| 97 | getDataFn: DataTable.ext.oApi._fnGetObjectDataFn( this.c.dataSrc ),
|
---|
| 98 |
|
---|
| 99 | /** @type {array} Pixel positions for row insertion calculation */
|
---|
| 100 | middles: null,
|
---|
| 101 |
|
---|
| 102 | /** @type {Object} Cached dimension information for use in the mouse move event handler */
|
---|
| 103 | scroll: {},
|
---|
| 104 |
|
---|
| 105 | /** @type {integer} Interval object used for smooth scrolling */
|
---|
| 106 | scrollInterval: null,
|
---|
| 107 |
|
---|
| 108 | /** @type {function} Data set function */
|
---|
| 109 | setDataFn: DataTable.ext.oApi._fnSetObjectDataFn( this.c.dataSrc ),
|
---|
| 110 |
|
---|
| 111 | /** @type {Object} Mouse down information */
|
---|
| 112 | start: {
|
---|
| 113 | top: 0,
|
---|
| 114 | left: 0,
|
---|
| 115 | offsetTop: 0,
|
---|
| 116 | offsetLeft: 0,
|
---|
| 117 | nodes: []
|
---|
| 118 | },
|
---|
| 119 |
|
---|
| 120 | /** @type {integer} Window height cached value */
|
---|
| 121 | windowHeight: 0,
|
---|
| 122 |
|
---|
[c6b84df] | 123 | /** @type {integer} Folder outer height cached value */
|
---|
[7304c7f] | 124 | documentOuterHeight: 0,
|
---|
| 125 |
|
---|
| 126 | /** @type {integer} DOM clone outer height cached value */
|
---|
| 127 | domCloneOuterHeight: 0
|
---|
| 128 | };
|
---|
| 129 |
|
---|
| 130 | // DOM items
|
---|
| 131 | this.dom = {
|
---|
| 132 | /** @type {jQuery} Cloned row being moved around */
|
---|
| 133 | clone: null,
|
---|
| 134 |
|
---|
| 135 | /** @type {jQuery} DataTables scrolling container */
|
---|
| 136 | dtScroll: $('div.dataTables_scrollBody', this.s.dt.table().container())
|
---|
| 137 | };
|
---|
| 138 |
|
---|
| 139 | // Check if row reorder has already been initialised on this table
|
---|
| 140 | var settings = this.s.dt.settings()[0];
|
---|
| 141 | var exisiting = settings.rowreorder;
|
---|
| 142 | if ( exisiting ) {
|
---|
| 143 | return exisiting;
|
---|
| 144 | }
|
---|
| 145 |
|
---|
| 146 | settings.rowreorder = this;
|
---|
| 147 | this._constructor();
|
---|
| 148 | };
|
---|
| 149 |
|
---|
| 150 |
|
---|
| 151 | $.extend( RowReorder.prototype, {
|
---|
| 152 | /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
---|
| 153 | * Constructor
|
---|
| 154 | */
|
---|
| 155 |
|
---|
| 156 | /**
|
---|
| 157 | * Initialise the RowReorder instance
|
---|
| 158 | *
|
---|
| 159 | * @private
|
---|
| 160 | */
|
---|
| 161 | _constructor: function ()
|
---|
| 162 | {
|
---|
| 163 | var that = this;
|
---|
| 164 | var dt = this.s.dt;
|
---|
| 165 | var table = $( dt.table().node() );
|
---|
| 166 |
|
---|
| 167 | // Need to be able to calculate the row positions relative to the table
|
---|
| 168 | if ( table.css('position') === 'static' ) {
|
---|
| 169 | table.css( 'position', 'relative' );
|
---|
| 170 | }
|
---|
| 171 |
|
---|
| 172 | // listen for mouse down on the target column - we have to implement
|
---|
| 173 | // this rather than using HTML5 drag and drop as drag and drop doesn't
|
---|
| 174 | // appear to work on table rows at this time. Also mobile browsers are
|
---|
| 175 | // not supported.
|
---|
| 176 | // Use `table().container()` rather than just the table node for IE8 -
|
---|
| 177 | // otherwise it only works once...
|
---|
| 178 | $(dt.table().container()).on( 'mousedown.rowReorder touchstart.rowReorder', this.c.selector, function (e) {
|
---|
| 179 | if ( ! that.c.enable ) {
|
---|
| 180 | return;
|
---|
| 181 | }
|
---|
| 182 |
|
---|
| 183 | // Ignore excluded children of the selector
|
---|
| 184 | if ( $(e.target).is(that.c.excludedChildren) ) {
|
---|
| 185 | return true;
|
---|
| 186 | }
|
---|
| 187 |
|
---|
| 188 | var tr = $(this).closest('tr');
|
---|
| 189 | var row = dt.row( tr );
|
---|
| 190 |
|
---|
| 191 | // Double check that it is a DataTable row
|
---|
| 192 | if ( row.any() ) {
|
---|
| 193 | that._emitEvent( 'pre-row-reorder', {
|
---|
| 194 | node: row.node(),
|
---|
| 195 | index: row.index()
|
---|
| 196 | } );
|
---|
| 197 |
|
---|
| 198 | that._mouseDown( e, tr );
|
---|
| 199 | return false;
|
---|
| 200 | }
|
---|
| 201 | } );
|
---|
| 202 |
|
---|
| 203 | dt.on( 'destroy.rowReorder', function () {
|
---|
| 204 | $(dt.table().container()).off( '.rowReorder' );
|
---|
| 205 | dt.off( '.rowReorder' );
|
---|
| 206 | } );
|
---|
| 207 | },
|
---|
| 208 |
|
---|
| 209 |
|
---|
| 210 | /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
---|
| 211 | * Private methods
|
---|
| 212 | */
|
---|
[c6b84df] | 213 |
|
---|
[7304c7f] | 214 | /**
|
---|
| 215 | * Cache the measurements that RowReorder needs in the mouse move handler
|
---|
| 216 | * to attempt to speed things up, rather than reading from the DOM.
|
---|
| 217 | *
|
---|
| 218 | * @private
|
---|
| 219 | */
|
---|
| 220 | _cachePositions: function ()
|
---|
| 221 | {
|
---|
| 222 | var dt = this.s.dt;
|
---|
| 223 |
|
---|
| 224 | // Frustratingly, if we add `position:relative` to the tbody, the
|
---|
| 225 | // position is still relatively to the parent. So we need to adjust
|
---|
| 226 | // for that
|
---|
| 227 | var headerHeight = $( dt.table().node() ).find('thead').outerHeight();
|
---|
| 228 |
|
---|
| 229 | // Need to pass the nodes through jQuery to get them in document order,
|
---|
| 230 | // not what DataTables thinks it is, since we have been altering the
|
---|
| 231 | // order
|
---|
| 232 | var nodes = $.unique( dt.rows( { page: 'current' } ).nodes().toArray() );
|
---|
| 233 | var tops = $.map( nodes, function ( node, i ) {
|
---|
| 234 | return $(node).position().top - headerHeight;
|
---|
| 235 | } );
|
---|
| 236 |
|
---|
| 237 | var middles = $.map( tops, function ( top, i ) {
|
---|
| 238 | return tops.length < i-1 ?
|
---|
| 239 | (top + tops[i+1]) / 2 :
|
---|
| 240 | (top + top + $( dt.row( ':last-child' ).node() ).outerHeight() ) / 2;
|
---|
| 241 | } );
|
---|
| 242 |
|
---|
| 243 | this.s.middles = middles;
|
---|
| 244 | this.s.bodyTop = $( dt.table().body() ).offset().top;
|
---|
| 245 | this.s.windowHeight = $(window).height();
|
---|
| 246 | this.s.documentOuterHeight = $(document).outerHeight();
|
---|
| 247 | },
|
---|
| 248 |
|
---|
| 249 |
|
---|
| 250 | /**
|
---|
| 251 | * Clone a row so it can be floated around the screen
|
---|
| 252 | *
|
---|
| 253 | * @param {jQuery} target Node to be cloned
|
---|
| 254 | * @private
|
---|
| 255 | */
|
---|
| 256 | _clone: function ( target )
|
---|
| 257 | {
|
---|
| 258 | var dt = this.s.dt;
|
---|
| 259 | var clone = $( dt.table().node().cloneNode(false) )
|
---|
| 260 | .addClass( 'dt-rowReorder-float' )
|
---|
| 261 | .append('<tbody/>')
|
---|
| 262 | .append( target.clone( false ) );
|
---|
| 263 |
|
---|
| 264 | // Match the table and column widths - read all sizes before setting
|
---|
| 265 | // to reduce reflows
|
---|
| 266 | var tableWidth = target.outerWidth();
|
---|
| 267 | var tableHeight = target.outerHeight();
|
---|
| 268 | var sizes = target.children().map( function () {
|
---|
| 269 | return $(this).width();
|
---|
| 270 | } );
|
---|
| 271 |
|
---|
| 272 | clone
|
---|
| 273 | .width( tableWidth )
|
---|
| 274 | .height( tableHeight )
|
---|
| 275 | .find('tr').children().each( function (i) {
|
---|
| 276 | this.style.width = sizes[i]+'px';
|
---|
| 277 | } );
|
---|
| 278 |
|
---|
| 279 | // Insert into the document to have it floating around
|
---|
| 280 | clone.appendTo( 'body' );
|
---|
| 281 |
|
---|
| 282 | this.dom.clone = clone;
|
---|
| 283 | this.s.domCloneOuterHeight = clone.outerHeight();
|
---|
| 284 | },
|
---|
| 285 |
|
---|
| 286 |
|
---|
| 287 | /**
|
---|
| 288 | * Update the cloned item's position in the document
|
---|
| 289 | *
|
---|
| 290 | * @param {object} e Event giving the mouse's position
|
---|
| 291 | * @private
|
---|
| 292 | */
|
---|
| 293 | _clonePosition: function ( e )
|
---|
| 294 | {
|
---|
| 295 | var start = this.s.start;
|
---|
| 296 | var topDiff = this._eventToPage( e, 'Y' ) - start.top;
|
---|
| 297 | var leftDiff = this._eventToPage( e, 'X' ) - start.left;
|
---|
| 298 | var snap = this.c.snapX;
|
---|
| 299 | var left;
|
---|
| 300 | var top = topDiff + start.offsetTop;
|
---|
| 301 |
|
---|
| 302 | if ( snap === true ) {
|
---|
| 303 | left = start.offsetLeft;
|
---|
| 304 | }
|
---|
| 305 | else if ( typeof snap === 'number' ) {
|
---|
| 306 | left = start.offsetLeft + snap;
|
---|
| 307 | }
|
---|
| 308 | else {
|
---|
| 309 | left = leftDiff + start.offsetLeft;
|
---|
| 310 | }
|
---|
| 311 |
|
---|
| 312 | if(top < 0) {
|
---|
| 313 | top = 0
|
---|
| 314 | }
|
---|
| 315 | else if(top + this.s.domCloneOuterHeight > this.s.documentOuterHeight) {
|
---|
| 316 | top = this.s.documentOuterHeight - this.s.domCloneOuterHeight;
|
---|
| 317 | }
|
---|
| 318 |
|
---|
| 319 | this.dom.clone.css( {
|
---|
| 320 | top: top,
|
---|
| 321 | left: left
|
---|
| 322 | } );
|
---|
| 323 | },
|
---|
| 324 |
|
---|
| 325 |
|
---|
| 326 | /**
|
---|
| 327 | * Emit an event on the DataTable for listeners
|
---|
| 328 | *
|
---|
| 329 | * @param {string} name Event name
|
---|
| 330 | * @param {array} args Event arguments
|
---|
| 331 | * @private
|
---|
| 332 | */
|
---|
| 333 | _emitEvent: function ( name, args )
|
---|
| 334 | {
|
---|
| 335 | this.s.dt.iterator( 'table', function ( ctx, i ) {
|
---|
| 336 | $(ctx.nTable).triggerHandler( name+'.dt', args );
|
---|
| 337 | } );
|
---|
| 338 | },
|
---|
| 339 |
|
---|
| 340 |
|
---|
| 341 | /**
|
---|
| 342 | * Get pageX/Y position from an event, regardless of if it is a mouse or
|
---|
| 343 | * touch event.
|
---|
| 344 | *
|
---|
| 345 | * @param {object} e Event
|
---|
| 346 | * @param {string} pos X or Y (must be a capital)
|
---|
| 347 | * @private
|
---|
| 348 | */
|
---|
| 349 | _eventToPage: function ( e, pos )
|
---|
| 350 | {
|
---|
| 351 | if ( e.type.indexOf( 'touch' ) !== -1 ) {
|
---|
| 352 | return e.originalEvent.touches[0][ 'page'+pos ];
|
---|
| 353 | }
|
---|
| 354 |
|
---|
| 355 | return e[ 'page'+pos ];
|
---|
| 356 | },
|
---|
| 357 |
|
---|
| 358 |
|
---|
| 359 | /**
|
---|
| 360 | * Mouse down event handler. Read initial positions and add event handlers
|
---|
| 361 | * for the move.
|
---|
| 362 | *
|
---|
| 363 | * @param {object} e Mouse event
|
---|
| 364 | * @param {jQuery} target TR element that is to be moved
|
---|
| 365 | * @private
|
---|
| 366 | */
|
---|
| 367 | _mouseDown: function ( e, target )
|
---|
| 368 | {
|
---|
| 369 | var that = this;
|
---|
| 370 | var dt = this.s.dt;
|
---|
| 371 | var start = this.s.start;
|
---|
| 372 |
|
---|
| 373 | var offset = target.offset();
|
---|
| 374 | start.top = this._eventToPage( e, 'Y' );
|
---|
| 375 | start.left = this._eventToPage( e, 'X' );
|
---|
| 376 | start.offsetTop = offset.top;
|
---|
| 377 | start.offsetLeft = offset.left;
|
---|
| 378 | start.nodes = $.unique( dt.rows( { page: 'current' } ).nodes().toArray() );
|
---|
| 379 |
|
---|
| 380 | this._cachePositions();
|
---|
| 381 | this._clone( target );
|
---|
| 382 | this._clonePosition( e );
|
---|
| 383 |
|
---|
| 384 | this.dom.target = target;
|
---|
| 385 | target.addClass( 'dt-rowReorder-moving' );
|
---|
| 386 |
|
---|
| 387 | $( document )
|
---|
| 388 | .on( 'mouseup.rowReorder touchend.rowReorder', function (e) {
|
---|
| 389 | that._mouseUp(e);
|
---|
| 390 | } )
|
---|
| 391 | .on( 'mousemove.rowReorder touchmove.rowReorder', function (e) {
|
---|
| 392 | that._mouseMove(e);
|
---|
| 393 | } );
|
---|
| 394 |
|
---|
| 395 | // Check if window is x-scrolling - if not, disable it for the duration
|
---|
| 396 | // of the drag
|
---|
| 397 | if ( $(window).width() === $(document).width() ) {
|
---|
| 398 | $(document.body).addClass( 'dt-rowReorder-noOverflow' );
|
---|
| 399 | }
|
---|
| 400 |
|
---|
| 401 | // Cache scrolling information so mouse move doesn't need to read.
|
---|
| 402 | // This assumes that the window and DT scroller will not change size
|
---|
| 403 | // during an row drag, which I think is a fair assumption
|
---|
| 404 | var scrollWrapper = this.dom.dtScroll;
|
---|
| 405 | this.s.scroll = {
|
---|
| 406 | windowHeight: $(window).height(),
|
---|
| 407 | windowWidth: $(window).width(),
|
---|
| 408 | dtTop: scrollWrapper.length ? scrollWrapper.offset().top : null,
|
---|
| 409 | dtLeft: scrollWrapper.length ? scrollWrapper.offset().left : null,
|
---|
| 410 | dtHeight: scrollWrapper.length ? scrollWrapper.outerHeight() : null,
|
---|
| 411 | dtWidth: scrollWrapper.length ? scrollWrapper.outerWidth() : null
|
---|
| 412 | };
|
---|
| 413 | },
|
---|
| 414 |
|
---|
| 415 |
|
---|
| 416 | /**
|
---|
| 417 | * Mouse move event handler - move the cloned row and shuffle the table's
|
---|
| 418 | * rows if required.
|
---|
| 419 | *
|
---|
| 420 | * @param {object} e Mouse event
|
---|
| 421 | * @private
|
---|
| 422 | */
|
---|
| 423 | _mouseMove: function ( e )
|
---|
| 424 | {
|
---|
| 425 | this._clonePosition( e );
|
---|
| 426 |
|
---|
| 427 | // Transform the mouse position into a position in the table's body
|
---|
| 428 | var bodyY = this._eventToPage( e, 'Y' ) - this.s.bodyTop;
|
---|
| 429 | var middles = this.s.middles;
|
---|
| 430 | var insertPoint = null;
|
---|
| 431 | var dt = this.s.dt;
|
---|
| 432 | var body = dt.table().body();
|
---|
| 433 |
|
---|
| 434 | // Determine where the row should be inserted based on the mouse
|
---|
| 435 | // position
|
---|
| 436 | for ( var i=0, ien=middles.length ; i<ien ; i++ ) {
|
---|
| 437 | if ( bodyY < middles[i] ) {
|
---|
| 438 | insertPoint = i;
|
---|
| 439 | break;
|
---|
| 440 | }
|
---|
| 441 | }
|
---|
| 442 |
|
---|
| 443 | if ( insertPoint === null ) {
|
---|
| 444 | insertPoint = middles.length;
|
---|
| 445 | }
|
---|
| 446 |
|
---|
| 447 | // Perform the DOM shuffle if it has changed from last time
|
---|
| 448 | if ( this.s.lastInsert === null || this.s.lastInsert !== insertPoint ) {
|
---|
| 449 | if ( insertPoint === 0 ) {
|
---|
| 450 | this.dom.target.prependTo( body );
|
---|
| 451 | }
|
---|
| 452 | else {
|
---|
| 453 | var nodes = $.unique( dt.rows( { page: 'current' } ).nodes().toArray() );
|
---|
| 454 |
|
---|
| 455 | if ( insertPoint > this.s.lastInsert ) {
|
---|
| 456 | this.dom.target.insertAfter( nodes[ insertPoint-1 ] );
|
---|
| 457 | }
|
---|
| 458 | else {
|
---|
| 459 | this.dom.target.insertBefore( nodes[ insertPoint ] );
|
---|
| 460 | }
|
---|
| 461 | }
|
---|
| 462 |
|
---|
| 463 | this._cachePositions();
|
---|
| 464 |
|
---|
| 465 | this.s.lastInsert = insertPoint;
|
---|
| 466 | }
|
---|
| 467 |
|
---|
| 468 | this._shiftScroll( e );
|
---|
| 469 | },
|
---|
| 470 |
|
---|
| 471 |
|
---|
| 472 | /**
|
---|
| 473 | * Mouse up event handler - release the event handlers and perform the
|
---|
| 474 | * table updates
|
---|
| 475 | *
|
---|
| 476 | * @param {object} e Mouse event
|
---|
| 477 | * @private
|
---|
| 478 | */
|
---|
| 479 | _mouseUp: function ( e )
|
---|
| 480 | {
|
---|
| 481 | var that = this;
|
---|
| 482 | var dt = this.s.dt;
|
---|
| 483 | var i, ien;
|
---|
| 484 | var dataSrc = this.c.dataSrc;
|
---|
| 485 |
|
---|
| 486 | this.dom.clone.remove();
|
---|
| 487 | this.dom.clone = null;
|
---|
| 488 |
|
---|
| 489 | this.dom.target.removeClass( 'dt-rowReorder-moving' );
|
---|
| 490 | //this.dom.target = null;
|
---|
| 491 |
|
---|
| 492 | $(document).off( '.rowReorder' );
|
---|
| 493 | $(document.body).removeClass( 'dt-rowReorder-noOverflow' );
|
---|
| 494 |
|
---|
| 495 | clearInterval( this.s.scrollInterval );
|
---|
| 496 | this.s.scrollInterval = null;
|
---|
| 497 |
|
---|
| 498 | // Calculate the difference
|
---|
| 499 | var startNodes = this.s.start.nodes;
|
---|
| 500 | var endNodes = $.unique( dt.rows( { page: 'current' } ).nodes().toArray() );
|
---|
| 501 | var idDiff = {};
|
---|
| 502 | var fullDiff = [];
|
---|
| 503 | var diffNodes = [];
|
---|
| 504 | var getDataFn = this.s.getDataFn;
|
---|
| 505 | var setDataFn = this.s.setDataFn;
|
---|
| 506 |
|
---|
| 507 | for ( i=0, ien=startNodes.length ; i<ien ; i++ ) {
|
---|
| 508 | if ( startNodes[i] !== endNodes[i] ) {
|
---|
| 509 | var id = dt.row( endNodes[i] ).id();
|
---|
| 510 | var endRowData = dt.row( endNodes[i] ).data();
|
---|
| 511 | var startRowData = dt.row( startNodes[i] ).data();
|
---|
| 512 |
|
---|
| 513 | if ( id ) {
|
---|
| 514 | idDiff[ id ] = getDataFn( startRowData );
|
---|
| 515 | }
|
---|
| 516 |
|
---|
| 517 | fullDiff.push( {
|
---|
| 518 | node: endNodes[i],
|
---|
| 519 | oldData: getDataFn( endRowData ),
|
---|
| 520 | newData: getDataFn( startRowData ),
|
---|
| 521 | newPosition: i,
|
---|
| 522 | oldPosition: $.inArray( endNodes[i], startNodes )
|
---|
| 523 | } );
|
---|
| 524 |
|
---|
| 525 | diffNodes.push( endNodes[i] );
|
---|
| 526 | }
|
---|
| 527 | }
|
---|
[c6b84df] | 528 |
|
---|
[7304c7f] | 529 | // Create event args
|
---|
| 530 | var eventArgs = [ fullDiff, {
|
---|
| 531 | dataSrc: dataSrc,
|
---|
| 532 | nodes: diffNodes,
|
---|
| 533 | values: idDiff,
|
---|
| 534 | triggerRow: dt.row( this.dom.target ),
|
---|
| 535 | originalEvent: e
|
---|
| 536 | } ];
|
---|
[c6b84df] | 537 |
|
---|
[7304c7f] | 538 | // Emit event
|
---|
| 539 | this._emitEvent( 'row-reorder', eventArgs );
|
---|
| 540 |
|
---|
| 541 | var update = function () {
|
---|
| 542 | if ( that.c.update ) {
|
---|
| 543 | for ( i=0, ien=fullDiff.length ; i<ien ; i++ ) {
|
---|
| 544 | var row = dt.row( fullDiff[i].node );
|
---|
| 545 | var rowData = row.data();
|
---|
| 546 |
|
---|
| 547 | setDataFn( rowData, fullDiff[i].newData );
|
---|
| 548 |
|
---|
| 549 | // Invalidate the cell that has the same data source as the dataSrc
|
---|
| 550 | dt.columns().every( function () {
|
---|
| 551 | if ( this.dataSrc() === dataSrc ) {
|
---|
| 552 | dt.cell( fullDiff[i].node, this.index() ).invalidate( 'data' );
|
---|
| 553 | }
|
---|
| 554 | } );
|
---|
| 555 | }
|
---|
| 556 |
|
---|
| 557 | // Trigger row reordered event
|
---|
| 558 | that._emitEvent( 'row-reordered', eventArgs );
|
---|
| 559 |
|
---|
| 560 | dt.draw( false );
|
---|
| 561 | }
|
---|
| 562 | };
|
---|
| 563 |
|
---|
| 564 | // Editor interface
|
---|
| 565 | if ( this.c.editor ) {
|
---|
| 566 | // Disable user interaction while Editor is submitting
|
---|
| 567 | this.c.enable = false;
|
---|
| 568 |
|
---|
| 569 | this.c.editor
|
---|
| 570 | .edit(
|
---|
| 571 | diffNodes,
|
---|
| 572 | false,
|
---|
| 573 | $.extend( {submit: 'changed'}, this.c.formOptions )
|
---|
| 574 | )
|
---|
| 575 | .multiSet( dataSrc, idDiff )
|
---|
| 576 | .one( 'preSubmitCancelled.rowReorder', function () {
|
---|
| 577 | that.c.enable = true;
|
---|
| 578 | that.c.editor.off( '.rowReorder' );
|
---|
| 579 | dt.draw( false );
|
---|
| 580 | } )
|
---|
| 581 | .one( 'submitUnsuccessful.rowReorder', function () {
|
---|
| 582 | dt.draw( false );
|
---|
| 583 | } )
|
---|
| 584 | .one( 'submitSuccess.rowReorder', function () {
|
---|
| 585 | update();
|
---|
| 586 | } )
|
---|
| 587 | .one( 'submitComplete', function () {
|
---|
| 588 | that.c.enable = true;
|
---|
| 589 | that.c.editor.off( '.rowReorder' );
|
---|
| 590 | } )
|
---|
| 591 | .submit();
|
---|
| 592 | }
|
---|
| 593 | else {
|
---|
| 594 | update();
|
---|
| 595 | }
|
---|
| 596 | },
|
---|
| 597 |
|
---|
| 598 |
|
---|
| 599 | /**
|
---|
| 600 | * Move the window and DataTables scrolling during a drag to scroll new
|
---|
| 601 | * content into view.
|
---|
| 602 | *
|
---|
| 603 | * This matches the `_shiftScroll` method used in AutoFill, but only
|
---|
| 604 | * horizontal scrolling is considered here.
|
---|
| 605 | *
|
---|
| 606 | * @param {object} e Mouse move event object
|
---|
| 607 | * @private
|
---|
| 608 | */
|
---|
| 609 | _shiftScroll: function ( e )
|
---|
| 610 | {
|
---|
| 611 | var that = this;
|
---|
| 612 | var dt = this.s.dt;
|
---|
| 613 | var scroll = this.s.scroll;
|
---|
| 614 | var runInterval = false;
|
---|
| 615 | var scrollSpeed = 5;
|
---|
| 616 | var buffer = 65;
|
---|
| 617 | var
|
---|
| 618 | windowY = e.pageY - document.body.scrollTop,
|
---|
| 619 | windowVert,
|
---|
| 620 | dtVert;
|
---|
| 621 |
|
---|
| 622 | // Window calculations - based on the mouse position in the window,
|
---|
| 623 | // regardless of scrolling
|
---|
| 624 | if ( windowY < buffer ) {
|
---|
| 625 | windowVert = scrollSpeed * -1;
|
---|
| 626 | }
|
---|
| 627 | else if ( windowY > scroll.windowHeight - buffer ) {
|
---|
| 628 | windowVert = scrollSpeed;
|
---|
| 629 | }
|
---|
| 630 |
|
---|
| 631 | // DataTables scrolling calculations - based on the table's position in
|
---|
| 632 | // the document and the mouse position on the page
|
---|
| 633 | if ( scroll.dtTop !== null && e.pageY < scroll.dtTop + buffer ) {
|
---|
| 634 | dtVert = scrollSpeed * -1;
|
---|
| 635 | }
|
---|
| 636 | else if ( scroll.dtTop !== null && e.pageY > scroll.dtTop + scroll.dtHeight - buffer ) {
|
---|
| 637 | dtVert = scrollSpeed;
|
---|
| 638 | }
|
---|
| 639 |
|
---|
| 640 | // This is where it gets interesting. We want to continue scrolling
|
---|
| 641 | // without requiring a mouse move, so we need an interval to be
|
---|
| 642 | // triggered. The interval should continue until it is no longer needed,
|
---|
| 643 | // but it must also use the latest scroll commands (for example consider
|
---|
| 644 | // that the mouse might move from scrolling up to scrolling left, all
|
---|
| 645 | // with the same interval running. We use the `scroll` object to "pass"
|
---|
| 646 | // this information to the interval. Can't use local variables as they
|
---|
| 647 | // wouldn't be the ones that are used by an already existing interval!
|
---|
| 648 | if ( windowVert || dtVert ) {
|
---|
| 649 | scroll.windowVert = windowVert;
|
---|
| 650 | scroll.dtVert = dtVert;
|
---|
| 651 | runInterval = true;
|
---|
| 652 | }
|
---|
| 653 | else if ( this.s.scrollInterval ) {
|
---|
| 654 | // Don't need to scroll - remove any existing timer
|
---|
| 655 | clearInterval( this.s.scrollInterval );
|
---|
| 656 | this.s.scrollInterval = null;
|
---|
| 657 | }
|
---|
| 658 |
|
---|
| 659 | // If we need to run the interval to scroll and there is no existing
|
---|
| 660 | // interval (if there is an existing one, it will continue to run)
|
---|
| 661 | if ( ! this.s.scrollInterval && runInterval ) {
|
---|
| 662 | this.s.scrollInterval = setInterval( function () {
|
---|
| 663 | // Don't need to worry about setting scroll <0 or beyond the
|
---|
| 664 | // scroll bound as the browser will just reject that.
|
---|
| 665 | if ( scroll.windowVert ) {
|
---|
| 666 | document.body.scrollTop += scroll.windowVert;
|
---|
| 667 | }
|
---|
| 668 |
|
---|
| 669 | // DataTables scrolling
|
---|
| 670 | if ( scroll.dtVert ) {
|
---|
| 671 | var scroller = that.dom.dtScroll[0];
|
---|
| 672 |
|
---|
| 673 | if ( scroll.dtVert ) {
|
---|
| 674 | scroller.scrollTop += scroll.dtVert;
|
---|
| 675 | }
|
---|
| 676 | }
|
---|
| 677 | }, 20 );
|
---|
| 678 | }
|
---|
| 679 | }
|
---|
| 680 | } );
|
---|
| 681 |
|
---|
| 682 |
|
---|
| 683 |
|
---|
| 684 | /**
|
---|
| 685 | * RowReorder default settings for initialisation
|
---|
| 686 | *
|
---|
| 687 | * @namespace
|
---|
| 688 | * @name RowReorder.defaults
|
---|
| 689 | * @static
|
---|
| 690 | */
|
---|
| 691 | RowReorder.defaults = {
|
---|
| 692 | /**
|
---|
| 693 | * Data point in the host row's data source object for where to get and set
|
---|
| 694 | * the data to reorder. This will normally also be the sorting column.
|
---|
| 695 | *
|
---|
| 696 | * @type {Number}
|
---|
| 697 | */
|
---|
| 698 | dataSrc: 0,
|
---|
| 699 |
|
---|
| 700 | /**
|
---|
| 701 | * Editor instance that will be used to perform the update
|
---|
| 702 | *
|
---|
| 703 | * @type {DataTable.Editor}
|
---|
| 704 | */
|
---|
| 705 | editor: null,
|
---|
| 706 |
|
---|
| 707 | /**
|
---|
| 708 | * Enable / disable RowReorder's user interaction
|
---|
| 709 | * @type {Boolean}
|
---|
| 710 | */
|
---|
| 711 | enable: true,
|
---|
| 712 |
|
---|
| 713 | /**
|
---|
| 714 | * Form options to pass to Editor when submitting a change in the row order.
|
---|
| 715 | * See the Editor `from-options` object for details of the options
|
---|
| 716 | * available.
|
---|
| 717 | * @type {Object}
|
---|
| 718 | */
|
---|
| 719 | formOptions: {},
|
---|
| 720 |
|
---|
| 721 | /**
|
---|
| 722 | * Drag handle selector. This defines the element that when dragged will
|
---|
| 723 | * reorder a row.
|
---|
| 724 | *
|
---|
| 725 | * @type {String}
|
---|
| 726 | */
|
---|
| 727 | selector: 'td:first-child',
|
---|
| 728 |
|
---|
| 729 | /**
|
---|
| 730 | * Optionally lock the dragged row's x-position. This can be `true` to
|
---|
| 731 | * fix the position match the host table's, `false` to allow free movement
|
---|
| 732 | * of the row, or a number to define an offset from the host table.
|
---|
| 733 | *
|
---|
| 734 | * @type {Boolean|number}
|
---|
| 735 | */
|
---|
| 736 | snapX: false,
|
---|
| 737 |
|
---|
| 738 | /**
|
---|
| 739 | * Update the table's data on drop
|
---|
| 740 | *
|
---|
| 741 | * @type {Boolean}
|
---|
| 742 | */
|
---|
| 743 | update: true,
|
---|
| 744 |
|
---|
| 745 | /**
|
---|
| 746 | * Selector for children of the drag handle selector that mouseDown events
|
---|
| 747 | * will be passed through to and drag will not activate
|
---|
| 748 | *
|
---|
| 749 | * @type {String}
|
---|
| 750 | */
|
---|
| 751 | excludedChildren: 'a'
|
---|
| 752 | };
|
---|
| 753 |
|
---|
| 754 |
|
---|
| 755 | /*
|
---|
| 756 | * API
|
---|
| 757 | */
|
---|
| 758 | var Api = $.fn.dataTable.Api;
|
---|
| 759 |
|
---|
| 760 | // Doesn't do anything - work around for a bug in DT... Not documented
|
---|
| 761 | Api.register( 'rowReorder()', function () {
|
---|
| 762 | return this;
|
---|
| 763 | } );
|
---|
| 764 |
|
---|
| 765 | Api.register( 'rowReorder.enable()', function ( toggle ) {
|
---|
| 766 | if ( toggle === undefined ) {
|
---|
| 767 | toggle = true;
|
---|
| 768 | }
|
---|
| 769 |
|
---|
| 770 | return this.iterator( 'table', function ( ctx ) {
|
---|
| 771 | if ( ctx.rowreorder ) {
|
---|
| 772 | ctx.rowreorder.c.enable = toggle;
|
---|
| 773 | }
|
---|
| 774 | } );
|
---|
| 775 | } );
|
---|
| 776 |
|
---|
| 777 | Api.register( 'rowReorder.disable()', function () {
|
---|
| 778 | return this.iterator( 'table', function ( ctx ) {
|
---|
| 779 | if ( ctx.rowreorder ) {
|
---|
| 780 | ctx.rowreorder.c.enable = false;
|
---|
| 781 | }
|
---|
| 782 | } );
|
---|
| 783 | } );
|
---|
| 784 |
|
---|
| 785 |
|
---|
| 786 | /**
|
---|
| 787 | * Version information
|
---|
| 788 | *
|
---|
| 789 | * @name RowReorder.version
|
---|
| 790 | * @static
|
---|
| 791 | */
|
---|
| 792 | RowReorder.version = '1.2.6';
|
---|
| 793 |
|
---|
| 794 |
|
---|
| 795 | $.fn.dataTable.RowReorder = RowReorder;
|
---|
| 796 | $.fn.DataTable.RowReorder = RowReorder;
|
---|
| 797 |
|
---|
| 798 | // Attach a listener to the document which listens for DataTables initialisation
|
---|
| 799 | // events so we can automatically initialise
|
---|
| 800 | $(document).on( 'init.dt.dtr', function (e, settings, json) {
|
---|
| 801 | if ( e.namespace !== 'dt' ) {
|
---|
| 802 | return;
|
---|
| 803 | }
|
---|
| 804 |
|
---|
| 805 | var init = settings.oInit.rowReorder;
|
---|
| 806 | var defaults = DataTable.defaults.rowReorder;
|
---|
| 807 |
|
---|
| 808 | if ( init || defaults ) {
|
---|
| 809 | var opts = $.extend( {}, init, defaults );
|
---|
| 810 |
|
---|
| 811 | if ( init !== false ) {
|
---|
| 812 | new RowReorder( settings, opts );
|
---|
| 813 | }
|
---|
| 814 | }
|
---|
| 815 | } );
|
---|
| 816 |
|
---|
| 817 |
|
---|
| 818 | return RowReorder;
|
---|
| 819 | }));
|
---|