You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

dataTables.autoFill.js 30KB

2 年之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212
  1. /*! AutoFill 2.3.9
  2. * ©2008-2021 SpryMedia Ltd - datatables.net/license
  3. */
  4. /**
  5. * @summary AutoFill
  6. * @description Add Excel like click and drag auto-fill options to DataTables
  7. * @version 2.3.9
  8. * @file dataTables.autoFill.js
  9. * @author SpryMedia Ltd (www.sprymedia.co.uk)
  10. * @contact www.sprymedia.co.uk/contact
  11. * @copyright Copyright 2010-2021 SpryMedia Ltd.
  12. *
  13. * This source file is free software, available under the following license:
  14. * MIT license - http://datatables.net/license/mit
  15. *
  16. * This source file is distributed in the hope that it will be useful, but
  17. * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
  18. * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
  19. *
  20. * For details please refer to: http://www.datatables.net
  21. */
  22. (function( factory ){
  23. if ( typeof define === 'function' && define.amd ) {
  24. // AMD
  25. define( ['jquery', 'datatables.net'], function ( $ ) {
  26. return factory( $, window, document );
  27. } );
  28. }
  29. else if ( typeof exports === 'object' ) {
  30. // CommonJS
  31. module.exports = function (root, $) {
  32. if ( ! root ) {
  33. root = window;
  34. }
  35. if ( ! $ || ! $.fn.dataTable ) {
  36. $ = require('datatables.net')(root, $).$;
  37. }
  38. return factory( $, root, root.document );
  39. };
  40. }
  41. else {
  42. // Browser
  43. factory( jQuery, window, document );
  44. }
  45. }(function( $, window, document, undefined ) {
  46. 'use strict';
  47. var DataTable = $.fn.dataTable;
  48. var _instance = 0;
  49. /**
  50. * AutoFill provides Excel like auto-fill features for a DataTable
  51. *
  52. * @class AutoFill
  53. * @constructor
  54. * @param {object} oTD DataTables settings object
  55. * @param {object} oConfig Configuration object for AutoFill
  56. */
  57. var AutoFill = function( dt, opts )
  58. {
  59. if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.8' ) ) {
  60. throw( "Warning: AutoFill requires DataTables 1.10.8 or greater");
  61. }
  62. // User and defaults configuration object
  63. this.c = $.extend( true, {},
  64. DataTable.defaults.autoFill,
  65. AutoFill.defaults,
  66. opts
  67. );
  68. /**
  69. * @namespace Settings object which contains customisable information for AutoFill instance
  70. */
  71. this.s = {
  72. /** @type {DataTable.Api} DataTables' API instance */
  73. dt: new DataTable.Api( dt ),
  74. /** @type {String} Unique namespace for events attached to the document */
  75. namespace: '.autoFill'+(_instance++),
  76. /** @type {Object} Cached dimension information for use in the mouse move event handler */
  77. scroll: {},
  78. /** @type {integer} Interval object used for smooth scrolling */
  79. scrollInterval: null,
  80. handle: {
  81. height: 0,
  82. width: 0
  83. },
  84. /**
  85. * Enabled setting
  86. * @type {Boolean}
  87. */
  88. enabled: false
  89. };
  90. /**
  91. * @namespace Common and useful DOM elements for the class instance
  92. */
  93. this.dom = {
  94. /** @type {jQuery} AutoFill handle */
  95. handle: $('<div class="dt-autofill-handle"/>'),
  96. /**
  97. * @type {Object} Selected cells outline - Need to use 4 elements,
  98. * otherwise the mouse over if you back into the selected rectangle
  99. * will be over that element, rather than the cells!
  100. */
  101. select: {
  102. top: $('<div class="dt-autofill-select top"/>'),
  103. right: $('<div class="dt-autofill-select right"/>'),
  104. bottom: $('<div class="dt-autofill-select bottom"/>'),
  105. left: $('<div class="dt-autofill-select left"/>')
  106. },
  107. /** @type {jQuery} Fill type chooser background */
  108. background: $('<div class="dt-autofill-background"/>'),
  109. /** @type {jQuery} Fill type chooser */
  110. list: $('<div class="dt-autofill-list">'+this.s.dt.i18n('autoFill.info', '')+'<ul/></div>'),
  111. /** @type {jQuery} DataTables scrolling container */
  112. dtScroll: null,
  113. /** @type {jQuery} Offset parent element */
  114. offsetParent: null
  115. };
  116. /* Constructor logic */
  117. this._constructor();
  118. };
  119. $.extend( AutoFill.prototype, {
  120. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  121. * Public methods (exposed via the DataTables API below)
  122. */
  123. enabled: function ()
  124. {
  125. return this.s.enabled;
  126. },
  127. enable: function ( flag )
  128. {
  129. var that = this;
  130. if ( flag === false ) {
  131. return this.disable();
  132. }
  133. this.s.enabled = true;
  134. this._focusListener();
  135. this.dom.handle.on( 'mousedown', function (e) {
  136. that._mousedown( e );
  137. return false;
  138. } );
  139. return this;
  140. },
  141. disable: function ()
  142. {
  143. this.s.enabled = false;
  144. this._focusListenerRemove();
  145. return this;
  146. },
  147. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  148. * Constructor
  149. */
  150. /**
  151. * Initialise the RowReorder instance
  152. *
  153. * @private
  154. */
  155. _constructor: function ()
  156. {
  157. var that = this;
  158. var dt = this.s.dt;
  159. var dtScroll = $('div.dataTables_scrollBody', this.s.dt.table().container());
  160. // Make the instance accessible to the API
  161. dt.settings()[0].autoFill = this;
  162. if ( dtScroll.length ) {
  163. this.dom.dtScroll = dtScroll;
  164. // Need to scroll container to be the offset parent
  165. if ( dtScroll.css('position') === 'static' ) {
  166. dtScroll.css( 'position', 'relative' );
  167. }
  168. }
  169. if ( this.c.enable !== false ) {
  170. this.enable();
  171. }
  172. dt.on( 'destroy.autoFill', function () {
  173. that._focusListenerRemove();
  174. } );
  175. },
  176. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  177. * Private methods
  178. */
  179. /**
  180. * Display the AutoFill drag handle by appending it to a table cell. This
  181. * is the opposite of the _detach method.
  182. *
  183. * @param {node} node TD/TH cell to insert the handle into
  184. * @private
  185. */
  186. _attach: function ( node )
  187. {
  188. var dt = this.s.dt;
  189. var idx = dt.cell( node ).index();
  190. var handle = this.dom.handle;
  191. var handleDim = this.s.handle;
  192. if ( ! idx || dt.columns( this.c.columns ).indexes().indexOf( idx.column ) === -1 ) {
  193. this._detach();
  194. return;
  195. }
  196. if ( ! this.dom.offsetParent ) {
  197. // We attach to the table's offset parent
  198. this.dom.offsetParent = $( dt.table().node() ).offsetParent();
  199. }
  200. if ( ! handleDim.height || ! handleDim.width ) {
  201. // Append to document so we can get its size. Not expecting it to
  202. // change during the life time of the page
  203. handle.appendTo( 'body' );
  204. handleDim.height = handle.outerHeight();
  205. handleDim.width = handle.outerWidth();
  206. }
  207. // Might need to go through multiple offset parents
  208. var offset = this._getPosition( node, this.dom.offsetParent );
  209. this.dom.attachedTo = node;
  210. handle
  211. .css( {
  212. top: offset.top + node.offsetHeight - handleDim.height,
  213. left: offset.left + node.offsetWidth - handleDim.width
  214. } )
  215. .appendTo( this.dom.offsetParent );
  216. },
  217. /**
  218. * Determine can the fill type should be. This can be automatic, or ask the
  219. * end user.
  220. *
  221. * @param {array} cells Information about the selected cells from the key
  222. * up function
  223. * @private
  224. */
  225. _actionSelector: function ( cells )
  226. {
  227. var that = this;
  228. var dt = this.s.dt;
  229. var actions = AutoFill.actions;
  230. var available = [];
  231. // "Ask" each plug-in if it wants to handle this data
  232. $.each( actions, function ( key, action ) {
  233. if ( action.available( dt, cells ) ) {
  234. available.push( key );
  235. }
  236. } );
  237. if ( available.length === 1 && this.c.alwaysAsk === false ) {
  238. // Only one action available - enact it immediately
  239. var result = actions[ available[0] ].execute( dt, cells );
  240. this._update( result, cells );
  241. }
  242. else if ( available.length > 1 ) {
  243. // Multiple actions available - ask the end user what they want to do
  244. var list = this.dom.list.children('ul').empty();
  245. // Add a cancel option
  246. available.push( 'cancel' );
  247. $.each( available, function ( i, name ) {
  248. list.append( $('<li/>')
  249. .append(
  250. '<div class="dt-autofill-question">'+
  251. actions[ name ].option( dt, cells )+
  252. '<div>'
  253. )
  254. .append( $('<div class="dt-autofill-button">' )
  255. .append( $('<button class="'+AutoFill.classes.btn+'">'+dt.i18n('autoFill.button', '&gt;')+'</button>')
  256. .on( 'click', function () {
  257. var result = actions[ name ].execute(
  258. dt, cells, $(this).closest('li')
  259. );
  260. that._update( result, cells );
  261. that.dom.background.remove();
  262. that.dom.list.remove();
  263. } )
  264. )
  265. )
  266. );
  267. } );
  268. this.dom.background.appendTo( 'body' );
  269. this.dom.list.appendTo( 'body' );
  270. this.dom.list.css( 'margin-top', this.dom.list.outerHeight()/2 * -1 );
  271. }
  272. },
  273. /**
  274. * Remove the AutoFill handle from the document
  275. *
  276. * @private
  277. */
  278. _detach: function ()
  279. {
  280. this.dom.attachedTo = null;
  281. this.dom.handle.detach();
  282. },
  283. /**
  284. * Draw the selection outline by calculating the range between the start
  285. * and end cells, then placing the highlighting elements to draw a rectangle
  286. *
  287. * @param {node} target End cell
  288. * @param {object} e Originating event
  289. * @private
  290. */
  291. _drawSelection: function ( target, e )
  292. {
  293. // Calculate boundary for start cell to this one
  294. var dt = this.s.dt;
  295. var start = this.s.start;
  296. var startCell = $(this.dom.start);
  297. var end = {
  298. row: this.c.vertical ?
  299. dt.rows( { page: 'current' } ).nodes().indexOf( target.parentNode ) :
  300. start.row,
  301. column: this.c.horizontal ?
  302. $(target).index() :
  303. start.column
  304. };
  305. var colIndx = dt.column.index( 'toData', end.column );
  306. var endRow = dt.row( ':eq('+end.row+')', { page: 'current' } ); // Workaround for M581
  307. var endCell = $( dt.cell( endRow.index(), colIndx ).node() );
  308. // Be sure that is a DataTables controlled cell
  309. if ( ! dt.cell( endCell ).any() ) {
  310. return;
  311. }
  312. // if target is not in the columns available - do nothing
  313. if ( dt.columns( this.c.columns ).indexes().indexOf( colIndx ) === -1 ) {
  314. return;
  315. }
  316. this.s.end = end;
  317. var top, bottom, left, right, height, width;
  318. top = start.row < end.row ? startCell : endCell;
  319. bottom = start.row < end.row ? endCell : startCell;
  320. left = start.column < end.column ? startCell : endCell;
  321. right = start.column < end.column ? endCell : startCell;
  322. top = this._getPosition( top.get(0) ).top;
  323. left = this._getPosition( left.get(0) ).left;
  324. height = this._getPosition( bottom.get(0) ).top + bottom.outerHeight() - top;
  325. width = this._getPosition( right.get(0) ).left + right.outerWidth() - left;
  326. var select = this.dom.select;
  327. select.top.css( {
  328. top: top,
  329. left: left,
  330. width: width
  331. } );
  332. select.left.css( {
  333. top: top,
  334. left: left,
  335. height: height
  336. } );
  337. select.bottom.css( {
  338. top: top + height,
  339. left: left,
  340. width: width
  341. } );
  342. select.right.css( {
  343. top: top,
  344. left: left + width,
  345. height: height
  346. } );
  347. },
  348. /**
  349. * Use the Editor API to perform an update based on the new data for the
  350. * cells
  351. *
  352. * @param {array} cells Information about the selected cells from the key
  353. * up function
  354. * @private
  355. */
  356. _editor: function ( cells )
  357. {
  358. var dt = this.s.dt;
  359. var editor = this.c.editor;
  360. if ( ! editor ) {
  361. return;
  362. }
  363. // Build the object structure for Editor's multi-row editing
  364. var idValues = {};
  365. var nodes = [];
  366. var fields = editor.fields();
  367. for ( var i=0, ien=cells.length ; i<ien ; i++ ) {
  368. for ( var j=0, jen=cells[i].length ; j<jen ; j++ ) {
  369. var cell = cells[i][j];
  370. // Determine the field name for the cell being edited
  371. var col = dt.settings()[0].aoColumns[ cell.index.column ];
  372. var fieldName = col.editField;
  373. if ( fieldName === undefined ) {
  374. var dataSrc = col.mData;
  375. // dataSrc is the `field.data` property, but we need to set
  376. // using the field name, so we need to translate from the
  377. // data to the name
  378. for ( var k=0, ken=fields.length ; k<ken ; k++ ) {
  379. var field = editor.field( fields[k] );
  380. if ( field.dataSrc() === dataSrc ) {
  381. fieldName = field.name();
  382. break;
  383. }
  384. }
  385. }
  386. if ( ! fieldName ) {
  387. throw 'Could not automatically determine field data. '+
  388. 'Please see https://datatables.net/tn/11';
  389. }
  390. if ( ! idValues[ fieldName ] ) {
  391. idValues[ fieldName ] = {};
  392. }
  393. var id = dt.row( cell.index.row ).id();
  394. idValues[ fieldName ][ id ] = cell.set;
  395. // Keep a list of cells so we can activate the bubble editing
  396. // with them
  397. nodes.push( cell.index );
  398. }
  399. }
  400. // Perform the edit using bubble editing as it allows us to specify
  401. // the cells to be edited, rather than using full rows
  402. editor
  403. .bubble( nodes, false )
  404. .multiSet( idValues )
  405. .submit();
  406. },
  407. /**
  408. * Emit an event on the DataTable for listeners
  409. *
  410. * @param {string} name Event name
  411. * @param {array} args Event arguments
  412. * @private
  413. */
  414. _emitEvent: function ( name, args )
  415. {
  416. this.s.dt.iterator( 'table', function ( ctx, i ) {
  417. $(ctx.nTable).triggerHandler( name+'.dt', args );
  418. } );
  419. },
  420. /**
  421. * Attach suitable listeners (based on the configuration) that will attach
  422. * and detach the AutoFill handle in the document.
  423. *
  424. * @private
  425. */
  426. _focusListener: function ()
  427. {
  428. var that = this;
  429. var dt = this.s.dt;
  430. var namespace = this.s.namespace;
  431. var focus = this.c.focus !== null ?
  432. this.c.focus :
  433. dt.init().keys || dt.settings()[0].keytable ?
  434. 'focus' :
  435. 'hover';
  436. // All event listeners attached here are removed in the `destroy`
  437. // callback in the constructor
  438. if ( focus === 'focus' ) {
  439. dt
  440. .on( 'key-focus.autoFill', function ( e, dt, cell ) {
  441. that._attach( cell.node() );
  442. } )
  443. .on( 'key-blur.autoFill', function ( e, dt, cell ) {
  444. that._detach();
  445. } );
  446. }
  447. else if ( focus === 'click' ) {
  448. $(dt.table().body()).on( 'click'+namespace, 'td, th', function (e) {
  449. that._attach( this );
  450. } );
  451. $(document.body).on( 'click'+namespace, function (e) {
  452. if ( ! $(e.target).parents().filter( dt.table().body() ).length ) {
  453. that._detach();
  454. }
  455. } );
  456. }
  457. else {
  458. $(dt.table().body())
  459. .on( 'mouseenter'+namespace, 'td, th', function (e) {
  460. that._attach( this );
  461. } )
  462. .on( 'mouseleave'+namespace, function (e) {
  463. if ( $(e.relatedTarget).hasClass('dt-autofill-handle') ) {
  464. return;
  465. }
  466. that._detach();
  467. } );
  468. }
  469. },
  470. _focusListenerRemove: function ()
  471. {
  472. var dt = this.s.dt;
  473. dt.off( '.autoFill' );
  474. $(dt.table().body()).off( this.s.namespace );
  475. $(document.body).off( this.s.namespace );
  476. },
  477. /**
  478. * Get the position of a node, relative to another, including any scrolling
  479. * offsets.
  480. * @param {Node} node Node to get the position of
  481. * @param {jQuery} targetParent Node to use as the parent
  482. * @return {object} Offset calculation
  483. * @private
  484. */
  485. _getPosition: function ( node, targetParent )
  486. {
  487. var
  488. currNode = node,
  489. currOffsetParent,
  490. top = 0,
  491. left = 0;
  492. if ( ! targetParent ) {
  493. targetParent = $( $( this.s.dt.table().node() )[0].offsetParent );
  494. }
  495. do {
  496. // Don't use jQuery().position() the behaviour changes between 1.x and 3.x for
  497. // tables
  498. var positionTop = currNode.offsetTop;
  499. var positionLeft = currNode.offsetLeft;
  500. // jQuery doesn't give a `table` as the offset parent oddly, so use DOM directly
  501. currOffsetParent = $( currNode.offsetParent );
  502. top += positionTop + parseInt( currOffsetParent.css('border-top-width') || 0 ) * 1;
  503. left += positionLeft + parseInt( currOffsetParent.css('border-left-width') || 0 ) * 1;
  504. // Emergency fall back. Shouldn't happen, but just in case!
  505. if ( currNode.nodeName.toLowerCase() === 'body' ) {
  506. break;
  507. }
  508. currNode = currOffsetParent.get(0); // for next loop
  509. }
  510. while ( currOffsetParent.get(0) !== targetParent.get(0) )
  511. return {
  512. top: top,
  513. left: left
  514. };
  515. },
  516. /**
  517. * Start mouse drag - selects the start cell
  518. *
  519. * @param {object} e Mouse down event
  520. * @private
  521. */
  522. _mousedown: function ( e )
  523. {
  524. var that = this;
  525. var dt = this.s.dt;
  526. this.dom.start = this.dom.attachedTo;
  527. this.s.start = {
  528. row: dt.rows( { page: 'current' } ).nodes().indexOf( $(this.dom.start).parent()[0] ),
  529. column: $(this.dom.start).index()
  530. };
  531. $(document.body)
  532. .on( 'mousemove.autoFill', function (e) {
  533. that._mousemove( e );
  534. } )
  535. .on( 'mouseup.autoFill', function (e) {
  536. that._mouseup( e );
  537. } );
  538. var select = this.dom.select;
  539. var offsetParent = $( dt.table().node() ).offsetParent();
  540. select.top.appendTo( offsetParent );
  541. select.left.appendTo( offsetParent );
  542. select.right.appendTo( offsetParent );
  543. select.bottom.appendTo( offsetParent );
  544. this._drawSelection( this.dom.start, e );
  545. this.dom.handle.css( 'display', 'none' );
  546. // Cache scrolling information so mouse move doesn't need to read.
  547. // This assumes that the window and DT scroller will not change size
  548. // during an AutoFill drag, which I think is a fair assumption
  549. var scrollWrapper = this.dom.dtScroll;
  550. this.s.scroll = {
  551. windowHeight: $(window).height(),
  552. windowWidth: $(window).width(),
  553. dtTop: scrollWrapper ? scrollWrapper.offset().top : null,
  554. dtLeft: scrollWrapper ? scrollWrapper.offset().left : null,
  555. dtHeight: scrollWrapper ? scrollWrapper.outerHeight() : null,
  556. dtWidth: scrollWrapper ? scrollWrapper.outerWidth() : null
  557. };
  558. },
  559. /**
  560. * Mouse drag - selects the end cell and update the selection display for
  561. * the end user
  562. *
  563. * @param {object} e Mouse move event
  564. * @private
  565. */
  566. _mousemove: function ( e )
  567. {
  568. var that = this;
  569. var dt = this.s.dt;
  570. var name = e.target.nodeName.toLowerCase();
  571. if ( name !== 'td' && name !== 'th' ) {
  572. return;
  573. }
  574. this._drawSelection( e.target, e );
  575. this._shiftScroll( e );
  576. },
  577. /**
  578. * End mouse drag - perform the update actions
  579. *
  580. * @param {object} e Mouse up event
  581. * @private
  582. */
  583. _mouseup: function ( e )
  584. {
  585. $(document.body).off( '.autoFill' );
  586. var that = this;
  587. var dt = this.s.dt;
  588. var select = this.dom.select;
  589. select.top.remove();
  590. select.left.remove();
  591. select.right.remove();
  592. select.bottom.remove();
  593. this.dom.handle.css( 'display', 'block' );
  594. // Display complete - now do something useful with the selection!
  595. var start = this.s.start;
  596. var end = this.s.end;
  597. // Haven't selected multiple cells, so nothing to do
  598. if ( start.row === end.row && start.column === end.column ) {
  599. return;
  600. }
  601. var startDt = dt.cell( ':eq('+start.row+')', start.column+':visible', {page:'current'} );
  602. // If Editor is active inside this cell (inline editing) we need to wait for Editor to
  603. // submit and then we can loop back and trigger the fill.
  604. if ( $('div.DTE', startDt.node()).length ) {
  605. var editor = dt.editor();
  606. editor
  607. .on( 'submitSuccess.dtaf close.dtaf', function () {
  608. editor.off( '.dtaf');
  609. setTimeout( function () {
  610. that._mouseup( e );
  611. }, 100 );
  612. } )
  613. .on( 'submitComplete.dtaf preSubmitCancelled.dtaf close.dtaf', function () {
  614. editor.off( '.dtaf');
  615. } );
  616. // Make the current input submit
  617. editor.submit();
  618. return;
  619. }
  620. // Build a matrix representation of the selected rows
  621. var rows = this._range( start.row, end.row );
  622. var columns = this._range( start.column, end.column );
  623. var selected = [];
  624. var dtSettings = dt.settings()[0];
  625. var dtColumns = dtSettings.aoColumns;
  626. var enabledColumns = dt.columns( this.c.columns ).indexes();
  627. // Can't use Array.prototype.map as IE8 doesn't support it
  628. // Can't use $.map as jQuery flattens 2D arrays
  629. // Need to use a good old fashioned for loop
  630. for ( var rowIdx=0 ; rowIdx<rows.length ; rowIdx++ ) {
  631. selected.push(
  632. $.map( columns, function (column) {
  633. var row = dt.row( ':eq('+rows[rowIdx]+')', {page:'current'} ); // Workaround for M581
  634. var cell = dt.cell( row.index(), column+':visible' );
  635. var data = cell.data();
  636. var cellIndex = cell.index();
  637. var editField = dtColumns[ cellIndex.column ].editField;
  638. if ( editField !== undefined ) {
  639. data = dtSettings.oApi._fnGetObjectDataFn( editField )( dt.row( cellIndex.row ).data() );
  640. }
  641. if ( enabledColumns.indexOf(cellIndex.column) === -1 ) {
  642. return;
  643. }
  644. return {
  645. cell: cell,
  646. data: data,
  647. label: cell.data(),
  648. index: cellIndex
  649. };
  650. } )
  651. );
  652. }
  653. this._actionSelector( selected );
  654. // Stop shiftScroll
  655. clearInterval( this.s.scrollInterval );
  656. this.s.scrollInterval = null;
  657. },
  658. /**
  659. * Create an array with a range of numbers defined by the start and end
  660. * parameters passed in (inclusive!).
  661. *
  662. * @param {integer} start Start
  663. * @param {integer} end End
  664. * @private
  665. */
  666. _range: function ( start, end )
  667. {
  668. var out = [];
  669. var i;
  670. if ( start <= end ) {
  671. for ( i=start ; i<=end ; i++ ) {
  672. out.push( i );
  673. }
  674. }
  675. else {
  676. for ( i=start ; i>=end ; i-- ) {
  677. out.push( i );
  678. }
  679. }
  680. return out;
  681. },
  682. /**
  683. * Move the window and DataTables scrolling during a drag to scroll new
  684. * content into view. This is done by proximity to the edge of the scrolling
  685. * container of the mouse - for example near the top edge of the window
  686. * should scroll up. This is a little complicated as there are two elements
  687. * that can be scrolled - the window and the DataTables scrolling view port
  688. * (if scrollX and / or scrollY is enabled).
  689. *
  690. * @param {object} e Mouse move event object
  691. * @private
  692. */
  693. _shiftScroll: function ( e )
  694. {
  695. var that = this;
  696. var dt = this.s.dt;
  697. var scroll = this.s.scroll;
  698. var runInterval = false;
  699. var scrollSpeed = 5;
  700. var buffer = 65;
  701. var
  702. windowY = e.pageY - document.body.scrollTop,
  703. windowX = e.pageX - document.body.scrollLeft,
  704. windowVert, windowHoriz,
  705. dtVert, dtHoriz;
  706. // Window calculations - based on the mouse position in the window,
  707. // regardless of scrolling
  708. if ( windowY < buffer ) {
  709. windowVert = scrollSpeed * -1;
  710. }
  711. else if ( windowY > scroll.windowHeight - buffer ) {
  712. windowVert = scrollSpeed;
  713. }
  714. if ( windowX < buffer ) {
  715. windowHoriz = scrollSpeed * -1;
  716. }
  717. else if ( windowX > scroll.windowWidth - buffer ) {
  718. windowHoriz = scrollSpeed;
  719. }
  720. // DataTables scrolling calculations - based on the table's position in
  721. // the document and the mouse position on the page
  722. if ( scroll.dtTop !== null && e.pageY < scroll.dtTop + buffer ) {
  723. dtVert = scrollSpeed * -1;
  724. }
  725. else if ( scroll.dtTop !== null && e.pageY > scroll.dtTop + scroll.dtHeight - buffer ) {
  726. dtVert = scrollSpeed;
  727. }
  728. if ( scroll.dtLeft !== null && e.pageX < scroll.dtLeft + buffer ) {
  729. dtHoriz = scrollSpeed * -1;
  730. }
  731. else if ( scroll.dtLeft !== null && e.pageX > scroll.dtLeft + scroll.dtWidth - buffer ) {
  732. dtHoriz = scrollSpeed;
  733. }
  734. // This is where it gets interesting. We want to continue scrolling
  735. // without requiring a mouse move, so we need an interval to be
  736. // triggered. The interval should continue until it is no longer needed,
  737. // but it must also use the latest scroll commands (for example consider
  738. // that the mouse might move from scrolling up to scrolling left, all
  739. // with the same interval running. We use the `scroll` object to "pass"
  740. // this information to the interval. Can't use local variables as they
  741. // wouldn't be the ones that are used by an already existing interval!
  742. if ( windowVert || windowHoriz || dtVert || dtHoriz ) {
  743. scroll.windowVert = windowVert;
  744. scroll.windowHoriz = windowHoriz;
  745. scroll.dtVert = dtVert;
  746. scroll.dtHoriz = dtHoriz;
  747. runInterval = true;
  748. }
  749. else if ( this.s.scrollInterval ) {
  750. // Don't need to scroll - remove any existing timer
  751. clearInterval( this.s.scrollInterval );
  752. this.s.scrollInterval = null;
  753. }
  754. // If we need to run the interval to scroll and there is no existing
  755. // interval (if there is an existing one, it will continue to run)
  756. if ( ! this.s.scrollInterval && runInterval ) {
  757. this.s.scrollInterval = setInterval( function () {
  758. // Don't need to worry about setting scroll <0 or beyond the
  759. // scroll bound as the browser will just reject that.
  760. if ( scroll.windowVert ) {
  761. document.body.scrollTop += scroll.windowVert;
  762. }
  763. if ( scroll.windowHoriz ) {
  764. document.body.scrollLeft += scroll.windowHoriz;
  765. }
  766. // DataTables scrolling
  767. if ( scroll.dtVert || scroll.dtHoriz ) {
  768. var scroller = that.dom.dtScroll[0];
  769. if ( scroll.dtVert ) {
  770. scroller.scrollTop += scroll.dtVert;
  771. }
  772. if ( scroll.dtHoriz ) {
  773. scroller.scrollLeft += scroll.dtHoriz;
  774. }
  775. }
  776. }, 20 );
  777. }
  778. },
  779. /**
  780. * Update the DataTable after the user has selected what they want to do
  781. *
  782. * @param {false|undefined} result Return from the `execute` method - can
  783. * be false internally to do nothing. This is not documented for plug-ins
  784. * and is used only by the cancel option.
  785. * @param {array} cells Information about the selected cells from the key
  786. * up function, argumented with the set values
  787. * @private
  788. */
  789. _update: function ( result, cells )
  790. {
  791. // Do nothing on `false` return from an execute function
  792. if ( result === false ) {
  793. return;
  794. }
  795. var dt = this.s.dt;
  796. var cell;
  797. var columns = dt.columns( this.c.columns ).indexes();
  798. // Potentially allow modifications to the cells matrix
  799. this._emitEvent( 'preAutoFill', [ dt, cells ] );
  800. this._editor( cells );
  801. // Automatic updates are not performed if `update` is null and the
  802. // `editor` parameter is passed in - the reason being that Editor will
  803. // update the data once submitted
  804. var update = this.c.update !== null ?
  805. this.c.update :
  806. this.c.editor ?
  807. false :
  808. true;
  809. if ( update ) {
  810. for ( var i=0, ien=cells.length ; i<ien ; i++ ) {
  811. for ( var j=0, jen=cells[i].length ; j<jen ; j++ ) {
  812. cell = cells[i][j];
  813. if ( columns.indexOf(cell.index.column) !== -1 ) {
  814. cell.cell.data( cell.set );
  815. }
  816. }
  817. }
  818. dt.draw(false);
  819. }
  820. this._emitEvent( 'autoFill', [ dt, cells ] );
  821. }
  822. } );
  823. /**
  824. * AutoFill actions. The options here determine how AutoFill will fill the data
  825. * in the table when the user has selected a range of cells. Please see the
  826. * documentation on the DataTables site for full details on how to create plug-
  827. * ins.
  828. *
  829. * @type {Object}
  830. */
  831. AutoFill.actions = {
  832. increment: {
  833. available: function ( dt, cells ) {
  834. var d = cells[0][0].label;
  835. // is numeric test based on jQuery's old `isNumeric` function
  836. return !isNaN( d - parseFloat( d ) );
  837. },
  838. option: function ( dt, cells ) {
  839. return dt.i18n(
  840. 'autoFill.increment',
  841. 'Increment / decrement each cell by: <input type="number" value="1">'
  842. );
  843. },
  844. execute: function ( dt, cells, node ) {
  845. var value = cells[0][0].data * 1;
  846. var increment = $('input', node).val() * 1;
  847. for ( var i=0, ien=cells.length ; i<ien ; i++ ) {
  848. for ( var j=0, jen=cells[i].length ; j<jen ; j++ ) {
  849. cells[i][j].set = value;
  850. value += increment;
  851. }
  852. }
  853. }
  854. },
  855. fill: {
  856. available: function ( dt, cells ) {
  857. return true;
  858. },
  859. option: function ( dt, cells ) {
  860. return dt.i18n('autoFill.fill', 'Fill all cells with <i>%d</i>', cells[0][0].label );
  861. },
  862. execute: function ( dt, cells, node ) {
  863. var value = cells[0][0].data;
  864. for ( var i=0, ien=cells.length ; i<ien ; i++ ) {
  865. for ( var j=0, jen=cells[i].length ; j<jen ; j++ ) {
  866. cells[i][j].set = value;
  867. }
  868. }
  869. }
  870. },
  871. fillHorizontal: {
  872. available: function ( dt, cells ) {
  873. return cells.length > 1 && cells[0].length > 1;
  874. },
  875. option: function ( dt, cells ) {
  876. return dt.i18n('autoFill.fillHorizontal', 'Fill cells horizontally' );
  877. },
  878. execute: function ( dt, cells, node ) {
  879. for ( var i=0, ien=cells.length ; i<ien ; i++ ) {
  880. for ( var j=0, jen=cells[i].length ; j<jen ; j++ ) {
  881. cells[i][j].set = cells[i][0].data;
  882. }
  883. }
  884. }
  885. },
  886. fillVertical: {
  887. available: function ( dt, cells ) {
  888. return cells.length > 1;
  889. },
  890. option: function ( dt, cells ) {
  891. return dt.i18n('autoFill.fillVertical', 'Fill cells vertically' );
  892. },
  893. execute: function ( dt, cells, node ) {
  894. for ( var i=0, ien=cells.length ; i<ien ; i++ ) {
  895. for ( var j=0, jen=cells[i].length ; j<jen ; j++ ) {
  896. cells[i][j].set = cells[0][j].data;
  897. }
  898. }
  899. }
  900. },
  901. // Special type that does not make itself available, but is added
  902. // automatically by AutoFill if a multi-choice list is shown. This allows
  903. // sensible code reuse
  904. cancel: {
  905. available: function () {
  906. return false;
  907. },
  908. option: function ( dt ) {
  909. return dt.i18n('autoFill.cancel', 'Cancel' );
  910. },
  911. execute: function () {
  912. return false;
  913. }
  914. }
  915. };
  916. /**
  917. * AutoFill version
  918. *
  919. * @static
  920. * @type String
  921. */
  922. AutoFill.version = '2.3.9';
  923. /**
  924. * AutoFill defaults
  925. *
  926. * @namespace
  927. */
  928. AutoFill.defaults = {
  929. /** @type {Boolean} Ask user what they want to do, even for a single option */
  930. alwaysAsk: false,
  931. /** @type {string|null} What will trigger a focus */
  932. focus: null, // focus, click, hover
  933. /** @type {column-selector} Columns to provide auto fill for */
  934. columns: '', // all
  935. /** @type {Boolean} Enable AutoFill on load */
  936. enable: true,
  937. /** @type {boolean|null} Update the cells after a drag */
  938. update: null, // false is editor given, true otherwise
  939. /** @type {DataTable.Editor} Editor instance for automatic submission */
  940. editor: null,
  941. /** @type {boolean} Enable vertical fill */
  942. vertical: true,
  943. /** @type {boolean} Enable horizontal fill */
  944. horizontal: true
  945. };
  946. /**
  947. * Classes used by AutoFill that are configurable
  948. *
  949. * @namespace
  950. */
  951. AutoFill.classes = {
  952. /** @type {String} Class used by the selection button */
  953. btn: 'btn'
  954. };
  955. /*
  956. * API
  957. */
  958. var Api = $.fn.dataTable.Api;
  959. // Doesn't do anything - Not documented
  960. Api.register( 'autoFill()', function () {
  961. return this;
  962. } );
  963. Api.register( 'autoFill().enabled()', function () {
  964. var ctx = this.context[0];
  965. return ctx.autoFill ?
  966. ctx.autoFill.enabled() :
  967. false;
  968. } );
  969. Api.register( 'autoFill().enable()', function ( flag ) {
  970. return this.iterator( 'table', function ( ctx ) {
  971. if ( ctx.autoFill ) {
  972. ctx.autoFill.enable( flag );
  973. }
  974. } );
  975. } );
  976. Api.register( 'autoFill().disable()', function () {
  977. return this.iterator( 'table', function ( ctx ) {
  978. if ( ctx.autoFill ) {
  979. ctx.autoFill.disable();
  980. }
  981. } );
  982. } );
  983. // Attach a listener to the document which listens for DataTables initialisation
  984. // events so we can automatically initialise
  985. $(document).on( 'preInit.dt.autofill', function (e, settings, json) {
  986. if ( e.namespace !== 'dt' ) {
  987. return;
  988. }
  989. var init = settings.oInit.autoFill;
  990. var defaults = DataTable.defaults.autoFill;
  991. if ( init || defaults ) {
  992. var opts = $.extend( {}, init, defaults );
  993. if ( init !== false ) {
  994. new AutoFill( settings, opts );
  995. }
  996. }
  997. } );
  998. // Alias for access
  999. DataTable.AutoFill = AutoFill;
  1000. DataTable.AutoFill = AutoFill;
  1001. return AutoFill;
  1002. }));