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