Blame | Letzte Änderung | Log anzeigen | RSS feed
/*! AutoFill 2.0.0* ©2008-2015 SpryMedia Ltd - datatables.net/license*//*** @summary AutoFill* @description Add Excel like click and drag auto-fill options to DataTables* @version 2.0.0* @file dataTables.autoFill.js* @author SpryMedia Ltd (www.sprymedia.co.uk)* @contact www.sprymedia.co.uk/contact* @copyright Copyright 2010-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";var _instance = 0;/*** AutoFill provides Excel like auto-fill features for a DataTable** @class AutoFill* @constructor* @param {object} oTD DataTables settings object* @param {object} oConfig Configuration object for AutoFill*/var AutoFill = function( dt, opts ){if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.8' ) ) {throw( "Warning: AutoFill requires DataTables 1.10.8 or greater");}// User and defaults configuration objectthis.c = $.extend( true, {},DataTable.defaults.autoFill,AutoFill.defaults,opts);/*** @namespace Settings object which contains customisable information for AutoFill instance*/this.s = {/** @type {DataTable.Api} DataTables' API instance */dt: new DataTable.Api( dt ),/** @type {String} Unique namespace for events attached to the document */namespace: '.autoFill'+(_instance++),/** @type {Object} Cached dimension information for use in the mouse move event handler */scroll: {},/** @type {integer} Interval object used for smooth scrolling */scrollInterval: null};/*** @namespace Common and useful DOM elements for the class instance*/this.dom = {/** @type {jQuery} AutoFill handle */handle: $('<div class="dt-autofill-handle"/>'),/*** @type {Object} Selected cells outline - Need to use 4 elements,* otherwise the mouse over if you back into the selected rectangle* will be over that element, rather than the cells!*/select: {top: $('<div class="dt-autofill-select top"/>'),right: $('<div class="dt-autofill-select right"/>'),bottom: $('<div class="dt-autofill-select bottom"/>'),left: $('<div class="dt-autofill-select left"/>')},/** @type {jQuery} Fill type chooser background */background: $('<div class="dt-autofill-background"/>'),/** @type {jQuery} Fill type chooser */list: $('<div class="dt-autofill-list">'+this.s.dt.i18n('autoFill.info', '')+'<ul/></div>'),/** @type {jQuery} DataTables scrolling container */dtScroll: null};/* Constructor logic */this._constructor();};AutoFill.prototype = {/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ** Constructor*//*** Initialise the RowReorder instance** @private*/_constructor: function (){var that = this;var dt = this.s.dt;var dtScroll = $('div.dataTables_scrollBody', this.s.dt.table().container());if ( dtScroll.length ) {this.dom.dtScroll = dtScroll;// Need to scroll container to be the offset parentif ( dtScroll.css('position') === 'static' ) {dtScroll.css( 'position', 'relative' );}}this._focusListener();this.dom.handle.on( 'mousedown', function (e) {that._mousedown( e );return false;} );dt.on( 'destroy.autoFill', function () {dt.off( '.autoFill' );$(dt.table().body()).off( that.s.namespace );$(document.body).off( that.s.namespace );} );},/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ** Private methods*//*** Display the AutoFill drag handle by appending it to a table cell. This* is the opposite of the _detach method.** @param {node} node TD/TH cell to insert the handle into* @private*/_attach: function ( node ){var dt = this.s.dt;var idx = dt.cell( node ).index();if ( ! idx || dt.columns( this.c.columns ).indexes().indexOf( idx.column ) === -1 ) {this._detach();return;}this.dom.attachedTo = node;this.dom.handle.appendTo( node );},/*** Determine can the fill type should be. This can be automatic, or ask the* end user.** @param {array} cells Information about the selected cells from the key* up function* @private*/_actionSelector: function ( cells ){var that = this;var dt = this.s.dt;var actions = AutoFill.actions;var available = [];// "Ask" each plug-in if it wants to handle this data$.each( actions, function ( key, action ) {if ( action.available( dt, cells ) ) {available.push( key );}} );if ( available.length === 1 && this.c.alwaysAsk === false ) {// Only one action available - enact it immediatelyvar result = actions[ available[0] ].execute( dt, cells );this._update( result, cells );}else {// Multiple actions available - ask the end user what they want to dovar list = this.dom.list.children('ul').empty();// Add a cancel optionavailable.push( 'cancel' );$.each( available, function ( i, name ) {list.append( $('<li/>').append('<div class="dt-autofill-question">'+actions[ name ].option( dt, cells )+'<div>').append( $('<div class="dt-autofill-button">' ).append( $('<button class="'+AutoFill.classes.btn+'">'+dt.i18n('autoFill.button', '>')+'</button>').on( 'click', function () {var result = actions[ name ].execute(dt, cells, $(this).closest('li'));that._update( result, cells );that.dom.background.remove();that.dom.list.remove();} ))));} );this.dom.background.appendTo( 'body' );this.dom.list.appendTo( 'body' );this.dom.list.css( 'margin-top', this.dom.list.outerHeight()/2 * -1 );}},/*** Remove the AutoFill handle from the document** @private*/_detach: function (){this.dom.attachedTo = null;this.dom.handle.detach();},/*** Draw the selection outline by calculating the range between the start* and end cells, then placing the highlighting elements to draw a rectangle** @param {node} target End cell* @param {object} e Originating event* @private*/_drawSelection: function ( target, e ){// Calculate boundary for start cell to this onevar dt = this.s.dt;var start = this.s.start;var startCell = $(this.dom.start);var endCell = $(target);var end = {row: endCell.parent().index(),column: endCell.index()};// Be sure that is a DataTables controlled cellif ( ! dt.cell( endCell ).any() ) {return;}// if target is not in the columns available - do nothingif ( dt.columns( this.c.columns ).indexes().indexOf( end.column ) === -1 ) {return;}this.s.end = end;var top, bottom, left, right, height, width;top = start.row < end.row ? startCell : endCell;bottom = start.row < end.row ? endCell : startCell;left = start.column < end.column ? startCell : endCell;right = start.column < end.column ? endCell : startCell;top = top.position().top;left = left.position().left;height = bottom.position().top + bottom.outerHeight() - top;width = right.position().left + right.outerWidth() - left;var dtScroll = this.dom.dtScroll;if ( dtScroll ) {top += dtScroll.scrollTop();left += dtScroll.scrollLeft();}var select = this.dom.select;select.top.css( {top: top,left: left,width: width} );select.left.css( {top: top,left: left,height: height} );select.bottom.css( {top: top + height,left: left,width: width} );select.right.css( {top: top,left: left + width,height: height} );},/*** Use the Editor API to perform an update based on the new data for the* cells** @param {array} cells Information about the selected cells from the key* up function* @private*/_editor: function ( cells ){var dt = this.s.dt;var editor = this.c.editor;if ( ! editor ) {return;}// Build the object structure for Editor's multi-row editingvar idValues = {};var nodes = [];for ( var i=0, ien=cells.length ; i<ien ; i++ ) {for ( var j=0, jen=cells[i].length ; j<jen ; j++ ) {var cell = cells[i][j];// Determine the field name for the cell being editedvar col = dt.settings()[0].aoColumns[ cell.index.column ];var dataSrc = col.editField !== undefined ?col.editField :col.mData;if ( ! dataSrc ) {throw 'Could not automatically determine field name. '+'Please see https://datatables.net/tn/11';}if ( ! idValues[ dataSrc ] ) {idValues[ dataSrc ] = {};}var id = dt.row( cell.index.row ).id();idValues[ dataSrc ][ id ] = cell.set;// Keep a list of cells so we can activate the bubble editing// with themnodes.push( cell.index );}}// Perform the edit using bubble editing as it allows us to specify// the cells to be edited, rather than using full rowseditor.bubble( nodes, false ).multiSet( idValues ).submit();},/*** 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 );} );},/*** Attach suitable listeners (based on the configuration) that will attach* and detach the AutoFill handle in the document.** @private*/_focusListener: function (){var that = this;var dt = this.s.dt;var namespace = this.s.namespace;var focus = this.c.focus !== null ?this.c.focus :dt.settings()[0].keytable ?'focus' :'hover';// All event listeners attached here are removed in the `destroy`// callback in the constructorif ( focus === 'focus' ) {dt.on( 'key-focus.autoFill', function ( e, dt, cell ) {that._attach( cell.node() );} ).on( 'key-blur.autoFill', function ( e, dt, cell ) {that._detach();} );}else if ( focus === 'click' ) {$(dt.table().body()).on( 'click'+namespace, 'td, th', function (e) {that._attach( this );} );$(document.body).on( 'click'+namespace, function (e) {if ( ! $(e.target).parents().filter( dt.table().body() ).length ) {that._detach();}} );}else {$(dt.table().body()).on( 'mouseenter'+namespace, 'td, th', function (e) {that._attach( this );} ).on( 'mouseleave'+namespace, function (e) {that._detach();} );}},/*** Start mouse drag - selects the start cell** @param {object} e Mouse down event* @private*/_mousedown: function ( e ){var that = this;var dt = this.s.dt;this.dom.start = this.dom.attachedTo;this.s.start = {row: $(this.dom.start).parent().index(),column: $(this.dom.start).index()};$(document.body).on( 'mousemove.autoFill', function (e) {that._mousemove( e );} ).on( 'mouseup.autoFill', function (e) {that._mouseup( e );} );var select = this.dom.select;var offsetParent = $(this.s.dt.table().body()).offsetParent();select.top.appendTo( offsetParent );select.left.appendTo( offsetParent );select.right.appendTo( offsetParent );select.bottom.appendTo( offsetParent );this._drawSelection( this.dom.start, e );this.dom.handle.css( 'display', 'none' );// 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 AutoFill drag, which I think is a fair assumptionvar scrollWrapper = this.dom.dtScroll;this.s.scroll = {windowHeight: $(window).height(),windowWidth: $(window).width(),dtTop: scrollWrapper ? scrollWrapper.offset().top : null,dtLeft: scrollWrapper ? scrollWrapper.offset().left : null,dtHeight: scrollWrapper ? scrollWrapper.outerHeight() : null,dtWidth: scrollWrapper ? scrollWrapper.outerWidth() : null};},/*** Mouse drag - selects the end cell and update the selection display for* the end user** @param {object} e Mouse move event* @private*/_mousemove: function ( e ){var that = this;var dt = this.s.dt;var name = e.target.nodeName.toLowerCase();if ( name !== 'td' && name !== 'th' ) {return;}this._drawSelection( e.target, e );this._shiftScroll( e );},/*** End mouse drag - perform the update actions** @param {object} e Mouse up event* @private*/_mouseup: function ( e ){$(document.body).off( '.autoFill' );var dt = this.s.dt;var select = this.dom.select;select.top.remove();select.left.remove();select.right.remove();select.bottom.remove();this.dom.handle.css( 'display', 'block' );// Display complete - now do something useful with the selection!var start = this.s.start;var end = this.s.end;// Haven't selected multiple cells, so nothing to doif ( start.row === end.row && start.column === end.column ) {return;}// Build a matrix representation of the selected rowsvar rows = this._range( start.row, end.row );var columns = this._range( start.column, end.column );var selected = [];// Can't use Array.prototype.map as IE8 doesn't support it// Can't use $.map as jQuery flattens 2D arrays// Need to use a good old fashioned for loopfor ( var rowIdx=0 ; rowIdx<rows.length ; rowIdx++ ) {selected.push($.map( columns, function (column) {var cell = dt.cell( ':eq('+rows[rowIdx]+')', column+':visible', {page:'current'} );return {cell: cell,data: cell.data(),index: cell.index()};} ));}this._actionSelector( selected );},/*** Create an array with a range of numbers defined by the start and end* parameters passed in (inclusive!).** @param {integer} start Start* @param {integer} end End* @private*/_range: function ( start, end ){var out = [];var i;if ( start <= end ) {for ( i=start ; i<=end ; i++ ) {out.push( i );}}else {for ( i=start ; i>=end ; i-- ) {out.push( i );}}return out;},/*** Move the window and DataTables scrolling during a drag to scroll new* content into view. This is done by proximity to the edge of the scrolling* container of the mouse - for example near the top edge of the window* should scroll up. This is a little complicated as there are two elements* that can be scrolled - the window and the DataTables scrolling view port* (if scrollX and / or scrollY is enabled).** @param {object} e Mouse move event object* @private*/_shiftScroll: function ( e ){var that = this;var dt = this.s.dt;var scroll = this.s.scroll;var runInterval = false;var scrollSpeed = 5;var buffer = 65;varwindowY = e.pageY - document.body.scrollTop,windowX = e.pageX - document.body.scrollLeft,windowVert, windowHoriz,dtVert, dtHoriz;// Window calculations - based on the mouse position in the window,// regardless of scrollingif ( windowY < buffer ) {windowVert = scrollSpeed * -1;}else if ( windowY > scroll.windowHeight - buffer ) {windowVert = scrollSpeed;}if ( windowX < buffer ) {windowHoriz = scrollSpeed * -1;}else if ( windowX > scroll.windowWidth - buffer ) {windowHoriz = scrollSpeed;}// DataTables scrolling calculations - based on the table's position in// the document and the mouse position on the pageif ( scroll.dtTop !== null && e.pageY < scroll.dtTop + buffer ) {dtVert = scrollSpeed * -1;}else if ( scroll.dtTop !== null && e.pageY > scroll.dtTop + scroll.dtHeight - buffer ) {dtVert = scrollSpeed;}if ( scroll.dtLeft !== null && e.pageX < scroll.dtLeft + buffer ) {dtHoriz = scrollSpeed * -1;}else if ( scroll.dtLeft !== null && e.pageX > scroll.dtLeft + scroll.dtWidth - buffer ) {dtHoriz = scrollSpeed;}// This is where it gets interesting. We want to continue scrolling// without requiring a mouse move, so we need an interval to be// triggered. The interval should continue until it is no longer needed,// but it must also use the latest scroll commands (for example consider// that the mouse might move from scrolling up to scrolling left, all// with the same interval running. We use the `scroll` object to "pass"// this information to the interval. Can't use local variables as they// wouldn't be the ones that are used by an already existing interval!if ( windowVert || windowHoriz || dtVert || dtHoriz ) {scroll.windowVert = windowVert;scroll.windowHoriz = windowHoriz;scroll.dtVert = dtVert;scroll.dtHoriz = dtHoriz;runInterval = true;}else if ( this.s.scrollInterval ) {// Don't need to scroll - remove any existing timerclearInterval( this.s.scrollInterval );this.s.scrollInterval = null;}// If we need to run the interval to scroll and there is no existing// interval (if there is an existing one, it will continue to run)if ( ! this.s.scrollInterval && runInterval ) {this.s.scrollInterval = setInterval( function () {// Don't need to worry about setting scroll <0 or beyond the// scroll bound as the browser will just reject that.if ( scroll.windowVert ) {document.body.scrollTop += scroll.windowVert;}if ( scroll.windowHoriz ) {document.body.scrollLeft += scroll.windowHoriz;}// DataTables scrollingif ( scroll.dtVert || scroll.dtHoriz ) {var scroller = that.dom.dtScroll[0];if ( scroll.dtVert ) {scroller.scrollTop += scroll.dtVert;}if ( scroll.dtHoriz ) {scroller.scrollLeft += scroll.dtHoriz;}}}, 20 );}},/*** Update the DataTable after the user has selected what they want to do** @param {false|undefined} result Return from the `execute` method - can* be false internally to do nothing. This is not documented for plug-ins* and is used only by the cancel option.* @param {array} cells Information about the selected cells from the key* up function, argumented with the set values* @private*/_update: function ( result, cells ){// Do nothing on `false` return from an execute functionif ( result === false ) {return;}var dt = this.s.dt;var cell;// Potentially allow modifications to the cells matrixthis._emitEvent( 'preAutoFill', [ dt, cells ] );this._editor( cells );// Automatic updates are not performed if `update` is null and the// `editor` parameter is passed in - the reason being that Editor will// update the data once submittedvar update = this.c.update !== null ?this.c.update :this.c.editor ?false :true;if ( update ) {for ( var i=0, ien=cells.length ; i<ien ; i++ ) {for ( var j=0, jen=cells[i].length ; j<jen ; j++ ) {cell = cells[i][j];cell.cell.data( cell.set );}}dt.draw(false);}this._emitEvent( 'autoFill', [ dt, cells ] );}};/*** AutoFill actions. The options here determine how AutoFill will fill the data* in the table when the user has selected a range of cells. Please see the* documentation on the DataTables site for full details on how to create plug-* ins.** @type {Object}*/AutoFill.actions = {increment: {available: function ( dt, cells ) {return $.isNumeric( cells[0][0].data );},option: function ( dt, cells ) {return dt.i18n('autoFill.increment','Increment / decrement each cell by: <input type="number" value="1">');},execute: function ( dt, cells, node ) {var value = cells[0][0].data * 1;var increment = $('input', node).val() * 1;for ( var i=0, ien=cells.length ; i<ien ; i++ ) {for ( var j=0, jen=cells[i].length ; j<jen ; j++ ) {cells[i][j].set = value;value += increment;}}}},fill: {available: function ( dt, cells ) {return true;},option: function ( dt, cells ) {return dt.i18n('autoFill.fill', 'Fill all cells with <i>'+cells[0][0].data+'</i>' );},execute: function ( dt, cells, node ) {var value = cells[0][0].data;for ( var i=0, ien=cells.length ; i<ien ; i++ ) {for ( var j=0, jen=cells[i].length ; j<jen ; j++ ) {cells[i][j].set = value;}}}},fillHorizontal: {available: function ( dt, cells ) {return cells.length > 1 && cells[0].length > 1;},option: function ( dt, cells ) {return dt.i18n('autoFill.fillHorizontal', 'Fill cells horizontally' );},execute: function ( dt, cells, node ) {for ( var i=0, ien=cells.length ; i<ien ; i++ ) {for ( var j=0, jen=cells[i].length ; j<jen ; j++ ) {cells[i][j].set = cells[i][0].data;}}}},fillVertical: {available: function ( dt, cells ) {return cells.length > 1 && cells[0].length > 1;},option: function ( dt, cells ) {return dt.i18n('autoFill.fillVertical', 'Fill cells vertically' );},execute: function ( dt, cells, node ) {for ( var i=0, ien=cells.length ; i<ien ; i++ ) {for ( var j=0, jen=cells[i].length ; j<jen ; j++ ) {cells[i][j].set = cells[0][j].data;}}}},// Special type that does not make itself available, but is added// automatically by AutoFill if a multi-choice list is shown. This allows// sensible code reusecancel: {available: function () {return false;},option: function ( dt ) {return dt.i18n('autoFill.cancel', 'Cancel' );},execute: function () {return false;}}};/*** AutoFill version** @static* @type String*/AutoFill.version = '2.0.0';/*** AutoFill defaults** @namespace*/AutoFill.defaults = {/** @type {Boolean} Ask user what they want to do, even for a single option */alwaysAsk: false,/** @type {string|null} What will trigger a focus */focus: null, // focus, click, hover/** @type {column-selector} Columns to provide auto fill for */columns: '', // all/** @type {boolean|null} Update the cells after a drag */update: null, // false is editor given, true otherwise/** @type {DataTable.Editor} Editor instance for automatic submission */editor: null};/*** Classes used by AutoFill that are configurable** @namespace*/AutoFill.classes = {/** @type {String} Class used by the selection button */btn: 'btn'};// Attach a listener to the document which listens for DataTables initialisation// events so we can automatically initialise$(document).on( 'init.dt.autofill', function (e, settings, json) {if ( e.namespace !== 'dt' ) {return;}var init = settings.oInit.autoFill;var defaults = DataTable.defaults.autoFill;if ( init || defaults ) {var opts = $.extend( {}, init, defaults );if ( init !== false ) {new AutoFill( settings, opts );}}} );// Alias for accessDataTable.AutoFill = AutoFill;DataTable.AutoFill = AutoFill;return AutoFill;};// Define as an AMD module if possibleif ( typeof define === 'function' && define.amd ) {define( ['jquery', 'datatables'], factory );}else if ( typeof exports === 'object' ) {// Node/CommonJSfactory( require('jquery'), require('datatables') );}else if ( jQuery && !jQuery.fn.dataTable.AutoFill ) {// Otherwise simply initialise as normal, stopping multiple evaluationfactory( jQuery, jQuery.fn.dataTable );}}(window, document));