Subversion-Projekte lars-tiefland.cienc

/*! RowReorder 1.0.0

 * 2015 SpryMedia Ltd - datatables.net/license

 */

/**

 * @summary     RowReorder

 * @description Row reordering extension for DataTables

 * @version     1.0.0

 * @file        dataTables.rowReorder.js

 * @author      SpryMedia Ltd (www.sprymedia.co.uk)

 * @contact     www.sprymedia.co.uk/contact

 * @copyright   Copyright 2015 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(window, document, undefined) {

var factory = function( $, DataTable ) {

"use strict";

/**

 * 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 {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

	};

	// 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();

};

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

		$( table ).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', function () {

			table.off( 'mousedown.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('<tbody/>')

			.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' );

		}

	},

	/**

	 * 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<ien ; i++ ) {

			if ( bodyY < middles[i] ) {

				insertPoint = i;

				break;

			}

		}

		if ( insertPoint === null ) {

			insertPoint = middles.length;

		}

		// Perform the DOM shuffle if it has changed from last time

		if ( this.s.lastInsert === null || this.s.lastInsert !== insertPoint ) {

			if ( insertPoint === 0 ) {

				this.dom.target.prependTo( body );

			}

			else {

				var nodes = $.unique( dt.rows( { page: 'current' } ).nodes().toArray() );

				if ( insertPoint > this.s.lastInsert ) {

					this.dom.target.before( nodes[ insertPoint-1 ] );

				}

				else {

					this.dom.target.after( nodes[ insertPoint ] );

				}

			}

			this._cachePositions();

			this.s.lastInsert = insertPoint;

		}

		// scroll window up and down when reaching the edges

		var windowY = this._eventToPage( e, 'Y' ) - document.body.scrollTop;

		var scrollInterval = this.s.scrollInterval;

		if ( windowY < 65 ) {

			if ( ! scrollInterval ) {

				this.s.scrollInterval = setInterval( function () {

					document.body.scrollTop -= 5;

				}, 15 );

			}

		}

		else if ( this.s.windowHeight - windowY < 65 ) {

			if ( ! scrollInterval ) {

				this.s.scrollInterval = setInterval( function () {

					document.body.scrollTop += 5;

				}, 15 );

			}

		}

		else {

			clearInterval( scrollInterval );

			this.s.scrollInterval = null;

		}

	},

	/**

	 * Mouse up event handler - release the event handlers and perform the

	 * table updates

	 *

	 * @param  {object} e Mouse event

	 * @private

	 */

	_mouseUp: function ( e )

	{

		var dt = this.s.dt;

		var i, ien;

		this.dom.clone.remove();

		this.dom.clone = null;

		this.dom.target.removeClass( 'dt-rowReorder-moving' );

		//this.dom.target = null;

		$(document).off( '.rowReorder' );

		$(document.body).removeClass( 'dt-rowReorder-noOverflow' );

		// Calculate the difference

		var startNodes = this.s.start.nodes;

		var endNodes = $.unique( dt.rows( { page: 'current' } ).nodes().toArray() );

		var idDiff = {};

		var fullDiff = [];

		var diffNodes = [];

		var getDataFn = this.s.getDataFn;

		var setDataFn = this.s.setDataFn;

		for ( i=0, ien=startNodes.length ; i<ien ; i++ ) {

			if ( startNodes[i] !== endNodes[i] ) {

				var id = dt.row( endNodes[i] ).id();

				var endRowData = dt.row( endNodes[i] ).data();

				var startRowData = dt.row( startNodes[i] ).data();

				if ( id ) {

					idDiff[ id ] = getDataFn( startRowData );

				}

				fullDiff.push( {

					node: endNodes[i],

					oldData: getDataFn( endRowData ),

					newData: getDataFn( startRowData ),

					newPosition: i,

					oldPosition: $.inArray( endNodes[i], startNodes )

				} );

				diffNodes.push( endNodes[i] );

			}

		}

		// Emit event

		this._emitEvent( 'row-reorder', [ fullDiff, {

			dataSrc: this.c.dataSrc,

			nodes:   diffNodes,

			values:  idDiff

		} ] );

		// Editor interface

		if ( this.c.editor ) {

			this.c.editor

				.edit( diffNodes, false, {

					submit: 'changed'

				} )

				.multiSet( this.c.dataSrc, idDiff )

				.submit();

		}

		// Do update if required

		if ( this.c.update ) {

			for ( i=0, ien=fullDiff.length ; i<ien ; i++ ) {

				var row = dt.row( fullDiff[i].node );

				var rowData = row.data();

				setDataFn( rowData, fullDiff[i].newData );

				row.invalidate( 'data' );

			}

			dt.draw( false );

		}

	}

};

/**

 * RowReorder default settings for initialisation

 *

 * @namespace

 * @name RowReorder.defaults

 * @static

 */

RowReorder.defaults = {

	/**

	 * Data point in the host row's data source object for where to get and set

	 * the data to reorder. This will normally also be the sorting column.

	 *

	 * @type {Number}

	 */

	dataSrc: 0,

	/**

	 * Editor instance that will be used to perform the update

	 *

	 * @type {DataTable.Editor}

	 */

	editor: null,

	/**

	 * Drag handle selector. This defines the element that when dragged will

	 * reorder a row.

	 *

	 * @type {String}

	 */

	selector: 'td:first-child',

	/**

	 * Optionally lock the dragged row's x-position. This can be `true` to

	 * fix the position match the host table's, `false` to allow free movement

	 * of the row, or a number to define an offset from the host table.

	 *

	 * @type {Boolean|number}

	 */

	snapX: false,

	/**

	 * Update the table's data on drop

	 *

	 * @type {Boolean}

	 */

	update: true

};

/**

 * Version information

 *

 * @name RowReorder.version

 * @static

 */

RowReorder.version = '1.0.0';

$.fn.dataTable.RowReorder = RowReorder;

$.fn.DataTable.RowReorder = RowReorder;

// Attach a listener to the document which listens for DataTables initialisation

// events so we can automatically initialise

$(document).on( 'init.dt.dtr', function (e, settings, json) {

	if ( e.namespace !== 'dt' ) {

		return;

	}

	var init = settings.oInit.rowReorder;

	var defaults = DataTable.defaults.rowReorder;

	if ( init || defaults ) {

		var opts = $.extend( {}, init, defaults );

		if ( init !== false ) {

			new RowReorder( settings, opts  );

		}

	}

} );

return RowReorder;

}; // /factory

// Define as an AMD module if possible

if ( typeof define === 'function' && define.amd ) {

	define( ['jquery', 'datatables'], factory );

}

else if ( typeof exports === 'object' ) {

    // Node/CommonJS

    factory( require('jquery'), require('datatables') );

}

else if ( jQuery && !jQuery.fn.dataTable.RowReorder ) {

	// Otherwise simply initialise as normal, stopping multiple evaluation

	factory( jQuery, jQuery.fn.dataTable );

}

})(window, document);