/*! RowReorder 1.1.2 * 2015-2016 SpryMedia Ltd - datatables.net/license */ /** * @summary RowReorder * @description Row reordering extension for DataTables * @version 1.1.2 * @file dataTables.rowReorder.js * @author SpryMedia Ltd (www.sprymedia.co.uk) * @contact www.sprymedia.co.uk/contact * @copyright Copyright 2015-2016 SpryMedia Ltd. * * This source file is free software, available under the following license: * MIT license - http://datatables.net/license/mit * * This source file is distributed in the hope that it will be useful, but * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details. * * For details please refer to: http://www.datatables.net */ (function( factory ){ if ( typeof define === 'function' && define.amd ) { // AMD define( ['jquery', 'datatables.net'], function ( $ ) { return factory( $, window, document ); } ); } else if ( typeof exports === 'object' ) { // CommonJS module.exports = function (root, $) { if ( ! root ) { root = window; } if ( ! $ || ! $.fn.dataTable ) { $ = require('datatables.net')(root, $).$; } return factory( $, root, root.document ); }; } else { // Browser factory( jQuery, window, document ); } }(function( $, window, document, undefined ) { 'use strict'; var DataTable = $.fn.dataTable; /** * RowReorder provides the ability in DataTables to click and drag rows to * reorder them. When a row is dropped the data for the rows effected will be * updated to reflect the change. Normally this data point should also be the * column being sorted upon in the DataTable but this does not need to be the * case. RowReorder implements a "data swap" method - so the rows being * reordered take the value of the data point from the row that used to occupy * the row's new position. * * Initialisation is done by either: * * * `rowReorder` parameter in the DataTable initialisation object * * `new $.fn.dataTable.RowReorder( table, opts )` after DataTables * initialisation. * * @class * @param {object} settings DataTables settings object for the host table * @param {object} [opts] Configuration options * @requires jQuery 1.7+ * @requires DataTables 1.10.7+ */ var RowReorder = function ( dt, opts ) { // Sanity check that we are using DataTables 1.10 or newer if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.8' ) ) { throw 'DataTables RowReorder requires DataTables 1.10.8 or newer'; } // User and defaults configuration object this.c = $.extend( true, {}, DataTable.defaults.rowReorder, RowReorder.defaults, opts ); // Internal settings this.s = { /** @type {integer} Scroll body top cache */ bodyTop: null, /** @type {DataTable.Api} DataTables' API instance */ dt: new DataTable.Api( dt ), /** @type {function} Data fetch function */ getDataFn: DataTable.ext.oApi._fnGetObjectDataFn( this.c.dataSrc ), /** @type {array} Pixel positions for row insertion calculation */ middles: null, /** @type {Object} Cached dimension information for use in the mouse move event handler */ scroll: {}, /** @type {integer} Interval object used for smooth scrolling */ scrollInterval: null, /** @type {function} Data set function */ setDataFn: DataTable.ext.oApi._fnSetObjectDataFn( this.c.dataSrc ), /** @type {Object} Mouse down information */ start: { top: 0, left: 0, offsetTop: 0, offsetLeft: 0, nodes: [] }, /** @type {integer} Window height cached value */ windowHeight: 0 }; // DOM items this.dom = { /** @type {jQuery} Cloned row being moved around */ clone: null, /** @type {jQuery} DataTables scrolling container */ dtScroll: $('div.dataTables_scrollBody', this.s.dt.table().container()) }; // Check if row reorder has already been initialised on this table var settings = this.s.dt.settings()[0]; var exisiting = settings.rowreorder; if ( exisiting ) { return exisiting; } settings.rowreorder = this; this._constructor(); }; $.extend( RowReorder.prototype, { /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Constructor */ /** * Initialise the RowReorder instance * * @private */ _constructor: function () { var that = this; var dt = this.s.dt; var table = $( dt.table().node() ); // Need to be able to calculate the row positions relative to the table if ( table.css('position') === 'static' ) { table.css( 'position', 'relative' ); } // listen for mouse down on the target column - we have to implement // this rather than using HTML5 drag and drop as drag and drop doesn't // appear to work on table rows at this time. Also mobile browsers are // not supported. // Use `table().container()` rather than just the table node for IE8 - // otherwise it only works once... $(dt.table().container()).on( 'mousedown.rowReorder touchstart.rowReorder', this.c.selector, function (e) { var tr = $(this).closest('tr'); // Double check that it is a DataTable row if ( dt.row( tr ).any() ) { that._mouseDown( e, tr ); return false; } } ); dt.on( 'destroy.rowReorder', function () { $(dt.table().container()).off( '.rowReorder' ); dt.off( '.rowReorder' ); } ); }, /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Private methods */ /** * Cache the measurements that RowReorder needs in the mouse move handler * to attempt to speed things up, rather than reading from the DOM. * * @private */ _cachePositions: function () { var dt = this.s.dt; // Frustratingly, if we add `position:relative` to the tbody, the // position is still relatively to the parent. So we need to adjust // for that var headerHeight = $( dt.table().node() ).find('thead').outerHeight(); // Need to pass the nodes through jQuery to get them in document order, // not what DataTables thinks it is, since we have been altering the // order var nodes = $.unique( dt.rows( { page: 'current' } ).nodes().toArray() ); var tops = $.map( nodes, function ( node, i ) { return $(node).position().top - headerHeight; } ); var middles = $.map( tops, function ( top, i ) { return tops.length < i-1 ? (top + tops[i+1]) / 2 : (top + top + $( dt.row( ':last-child' ).node() ).outerHeight() ) / 2; } ); this.s.middles = middles; this.s.bodyTop = $( dt.table().body() ).offset().top; this.s.windowHeight = $(window).height(); }, /** * Clone a row so it can be floated around the screen * * @param {jQuery} target Node to be cloned * @private */ _clone: function ( target ) { var dt = this.s.dt; var clone = $( dt.table().node().cloneNode(false) ) .addClass( 'dt-rowReorder-float' ) .append('
') .append( target.clone( false ) ); // Match the table and column widths - read all sizes before setting // to reduce reflows var tableWidth = target.outerWidth(); var tableHeight = target.outerHeight(); var sizes = target.children().map( function () { return $(this).width(); } ); clone .width( tableWidth ) .height( tableHeight ) .find('tr').children().each( function (i) { this.style.width = sizes[i]+'px'; } ); // Insert into the document to have it floating around clone.appendTo( 'body' ); this.dom.clone = clone; }, /** * Update the cloned item's position in the document * * @param {object} e Event giving the mouse's position * @private */ _clonePosition: function ( e ) { var start = this.s.start; var topDiff = this._eventToPage( e, 'Y' ) - start.top; var leftDiff = this._eventToPage( e, 'X' ) - start.left; var snap = this.c.snapX; var left; if ( snap === true ) { left = start.offsetLeft; } else if ( typeof snap === 'number' ) { left = start.offsetLeft + snap; } else { left = leftDiff + start.offsetLeft; } this.dom.clone.css( { top: topDiff + start.offsetTop, left: left } ); }, /** * Emit an event on the DataTable for listeners * * @param {string} name Event name * @param {array} args Event arguments * @private */ _emitEvent: function ( name, args ) { this.s.dt.iterator( 'table', function ( ctx, i ) { $(ctx.nTable).triggerHandler( name+'.dt', args ); } ); }, /** * Get pageX/Y position from an event, regardless of if it is a mouse or * touch event. * * @param {object} e Event * @param {string} pos X or Y (must be a capital) * @private */ _eventToPage: function ( e, pos ) { if ( e.type.indexOf( 'touch' ) !== -1 ) { return e.originalEvent.touches[0][ 'page'+pos ]; } return e[ 'page'+pos ]; }, /** * Mouse down event handler. Read initial positions and add event handlers * for the move. * * @param {object} e Mouse event * @param {jQuery} target TR element that is to be moved * @private */ _mouseDown: function ( e, target ) { var that = this; var dt = this.s.dt; var start = this.s.start; var offset = target.offset(); start.top = this._eventToPage( e, 'Y' ); start.left = this._eventToPage( e, 'X' ); start.offsetTop = offset.top; start.offsetLeft = offset.left; start.nodes = $.unique( dt.rows( { page: 'current' } ).nodes().toArray() ); this._cachePositions(); this._clone( target ); this._clonePosition( e ); this.dom.target = target; target.addClass( 'dt-rowReorder-moving' ); $( document ) .on( 'mouseup.rowReorder touchend.rowReorder', function (e) { that._mouseUp(e); } ) .on( 'mousemove.rowReorder touchmove.rowReorder', function (e) { that._mouseMove(e); } ); // Check if window is x-scrolling - if not, disable it for the duration // of the drag if ( $(window).width() === $(document).width() ) { $(document.body).addClass( 'dt-rowReorder-noOverflow' ); } // Cache scrolling information so mouse move doesn't need to read. // This assumes that the window and DT scroller will not change size // during an row drag, which I think is a fair assumption var scrollWrapper = this.dom.dtScroll; this.s.scroll = { windowHeight: $(window).height(), windowWidth: $(window).width(), dtTop: scrollWrapper.length ? scrollWrapper.offset().top : null, dtLeft: scrollWrapper.length ? scrollWrapper.offset().left : null, dtHeight: scrollWrapper.length ? scrollWrapper.outerHeight() : null, dtWidth: scrollWrapper.length ? scrollWrapper.outerWidth() : null }; }, /** * Mouse move event handler - move the cloned row and shuffle the table's * rows if required. * * @param {object} e Mouse event * @private */ _mouseMove: function ( e ) { this._clonePosition( e ); // Transform the mouse position into a position in the table's body var bodyY = this._eventToPage( e, 'Y' ) - this.s.bodyTop; var middles = this.s.middles; var insertPoint = null; var dt = this.s.dt; var body = dt.table().body(); // Determine where the row should be inserted based on the mouse // position for ( var i=0, ien=middles.length ; i