選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

dataTables.keyTable.js 31KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349
  1. /*! KeyTable 2.6.4
  2. * ©2009-2021 SpryMedia Ltd - datatables.net/license
  3. */
  4. /**
  5. * @summary KeyTable
  6. * @description Spreadsheet like keyboard navigation for DataTables
  7. * @version 2.6.4
  8. * @file dataTables.keyTable.js
  9. * @author SpryMedia Ltd (www.sprymedia.co.uk)
  10. * @contact www.sprymedia.co.uk/contact
  11. * @copyright Copyright 2009-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 namespaceCounter = 0;
  49. var editorNamespaceCounter = 0;
  50. var KeyTable = function ( dt, opts ) {
  51. // Sanity check that we are using DataTables 1.10 or newer
  52. if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.8' ) ) {
  53. throw 'KeyTable requires DataTables 1.10.8 or newer';
  54. }
  55. // User and defaults configuration object
  56. this.c = $.extend( true, {},
  57. DataTable.defaults.keyTable,
  58. KeyTable.defaults,
  59. opts
  60. );
  61. // Internal settings
  62. this.s = {
  63. /** @type {DataTable.Api} DataTables' API instance */
  64. dt: new DataTable.Api( dt ),
  65. enable: true,
  66. /** @type {bool} Flag for if a draw is triggered by focus */
  67. focusDraw: false,
  68. /** @type {bool} Flag to indicate when waiting for a draw to happen.
  69. * Will ignore key presses at this point
  70. */
  71. waitingForDraw: false,
  72. /** @type {object} Information about the last cell that was focused */
  73. lastFocus: null,
  74. /** @type {string} Unique namespace per instance */
  75. namespace: '.keyTable-'+(namespaceCounter++),
  76. /** @type {Node} Input element for tabbing into the table */
  77. tabInput: null
  78. };
  79. // DOM items
  80. this.dom = {
  81. };
  82. // Check if row reorder has already been initialised on this table
  83. var settings = this.s.dt.settings()[0];
  84. var exisiting = settings.keytable;
  85. if ( exisiting ) {
  86. return exisiting;
  87. }
  88. settings.keytable = this;
  89. this._constructor();
  90. };
  91. $.extend( KeyTable.prototype, {
  92. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  93. * API methods for DataTables API interface
  94. */
  95. /**
  96. * Blur the table's cell focus
  97. */
  98. blur: function ()
  99. {
  100. this._blur();
  101. },
  102. /**
  103. * Enable cell focus for the table
  104. *
  105. * @param {string} state Can be `true`, `false` or `-string navigation-only`
  106. */
  107. enable: function ( state )
  108. {
  109. this.s.enable = state;
  110. },
  111. /**
  112. * Get enable status
  113. */
  114. enabled: function () {
  115. return this.s.enable;
  116. },
  117. /**
  118. * Focus on a cell
  119. * @param {integer} row Row index
  120. * @param {integer} column Column index
  121. */
  122. focus: function ( row, column )
  123. {
  124. this._focus( this.s.dt.cell( row, column ) );
  125. },
  126. /**
  127. * Is the cell focused
  128. * @param {object} cell Cell index to check
  129. * @returns {boolean} true if focused, false otherwise
  130. */
  131. focused: function ( cell )
  132. {
  133. var lastFocus = this.s.lastFocus;
  134. if ( ! lastFocus ) {
  135. return false;
  136. }
  137. var lastIdx = this.s.lastFocus.cell.index();
  138. return cell.row === lastIdx.row && cell.column === lastIdx.column;
  139. },
  140. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  141. * Constructor
  142. */
  143. /**
  144. * Initialise the KeyTable instance
  145. *
  146. * @private
  147. */
  148. _constructor: function ()
  149. {
  150. this._tabInput();
  151. var that = this;
  152. var dt = this.s.dt;
  153. var table = $( dt.table().node() );
  154. var namespace = this.s.namespace;
  155. var editorBlock = false;
  156. // Need to be able to calculate the cell positions relative to the table
  157. if ( table.css('position') === 'static' ) {
  158. table.css( 'position', 'relative' );
  159. }
  160. // Click to focus
  161. $( dt.table().body() ).on( 'click'+namespace, 'th, td', function (e) {
  162. if ( that.s.enable === false ) {
  163. return;
  164. }
  165. var cell = dt.cell( this );
  166. if ( ! cell.any() ) {
  167. return;
  168. }
  169. that._focus( cell, null, false, e );
  170. } );
  171. // Key events
  172. $( document ).on( 'keydown'+namespace, function (e) {
  173. if ( ! editorBlock ) {
  174. that._key( e );
  175. }
  176. } );
  177. // Click blur
  178. if ( this.c.blurable ) {
  179. $( document ).on( 'mousedown'+namespace, function ( e ) {
  180. // Click on the search input will blur focus
  181. if ( $(e.target).parents( '.dataTables_filter' ).length ) {
  182. that._blur();
  183. }
  184. // If the click was inside the DataTables container, don't blur
  185. if ( $(e.target).parents().filter( dt.table().container() ).length ) {
  186. return;
  187. }
  188. // Don't blur in Editor form
  189. if ( $(e.target).parents('div.DTE').length ) {
  190. return;
  191. }
  192. // Or an Editor date input
  193. if (
  194. $(e.target).parents('div.editor-datetime').length ||
  195. $(e.target).parents('div.dt-datetime').length
  196. ) {
  197. return;
  198. }
  199. //If the click was inside the fixed columns container, don't blur
  200. if ( $(e.target).parents().filter('.DTFC_Cloned').length ) {
  201. return;
  202. }
  203. that._blur();
  204. } );
  205. }
  206. if ( this.c.editor ) {
  207. var editor = this.c.editor;
  208. // Need to disable KeyTable when the main editor is shown
  209. editor.on( 'open.keyTableMain', function (e, mode, action) {
  210. if ( mode !== 'inline' && that.s.enable ) {
  211. that.enable( false );
  212. editor.one( 'close'+namespace, function () {
  213. that.enable( true );
  214. } );
  215. }
  216. } );
  217. if ( this.c.editOnFocus ) {
  218. dt.on( 'key-focus'+namespace+' key-refocus'+namespace, function ( e, dt, cell, orig ) {
  219. that._editor( null, orig, true );
  220. } );
  221. }
  222. // Activate Editor when a key is pressed (will be ignored, if
  223. // already active).
  224. dt.on( 'key'+namespace, function ( e, dt, key, cell, orig ) {
  225. that._editor( key, orig, false );
  226. } );
  227. // Active editing on double click - it will already have focus from
  228. // the click event handler above
  229. $( dt.table().body() ).on( 'dblclick'+namespace, 'th, td', function (e) {
  230. if ( that.s.enable === false ) {
  231. return;
  232. }
  233. var cell = dt.cell( this );
  234. if ( ! cell.any() ) {
  235. return;
  236. }
  237. if ( that.s.lastFocus && this !== that.s.lastFocus.cell.node() ) {
  238. return;
  239. }
  240. that._editor( null, e, true );
  241. } );
  242. // While Editor is busy processing, we don't want to process any key events
  243. editor
  244. .on('preSubmit', function () {
  245. editorBlock = true;
  246. } )
  247. .on('preSubmitCancelled', function () {
  248. editorBlock = false;
  249. } )
  250. .on('submitComplete', function () {
  251. editorBlock = false;
  252. } );
  253. }
  254. // Stave saving
  255. if ( dt.settings()[0].oFeatures.bStateSave ) {
  256. dt.on( 'stateSaveParams'+namespace, function (e, s, d) {
  257. d.keyTable = that.s.lastFocus ?
  258. that.s.lastFocus.cell.index() :
  259. null;
  260. } );
  261. }
  262. dt.on( 'column-visibility'+namespace, function (e) {
  263. that._tabInput();
  264. } );
  265. // Redraw - retain focus on the current cell
  266. dt.on( 'draw'+namespace, function (e) {
  267. that._tabInput();
  268. if ( that.s.focusDraw ) {
  269. return;
  270. }
  271. var lastFocus = that.s.lastFocus;
  272. if ( lastFocus ) {
  273. var relative = that.s.lastFocus.relative;
  274. var info = dt.page.info();
  275. var row = relative.row + info.start;
  276. if ( info.recordsDisplay === 0 ) {
  277. return;
  278. }
  279. // Reverse if needed
  280. if ( row >= info.recordsDisplay ) {
  281. row = info.recordsDisplay - 1;
  282. }
  283. that._focus( row, relative.column, true, e );
  284. }
  285. } );
  286. // Clipboard support
  287. if ( this.c.clipboard ) {
  288. this._clipboard();
  289. }
  290. dt.on( 'destroy'+namespace, function () {
  291. that._blur( true );
  292. // Event tidy up
  293. dt.off( namespace );
  294. $( dt.table().body() )
  295. .off( 'click'+namespace, 'th, td' )
  296. .off( 'dblclick'+namespace, 'th, td' );
  297. $( document )
  298. .off( 'mousedown'+namespace )
  299. .off( 'keydown'+namespace )
  300. .off( 'copy'+namespace )
  301. .off( 'paste'+namespace );
  302. } );
  303. // Initial focus comes from state or options
  304. var state = dt.state.loaded();
  305. if ( state && state.keyTable ) {
  306. // Wait until init is done
  307. dt.one( 'init', function () {
  308. var cell = dt.cell( state.keyTable );
  309. // Ensure that the saved cell still exists
  310. if ( cell.any() ) {
  311. cell.focus();
  312. }
  313. } );
  314. }
  315. else if ( this.c.focus ) {
  316. dt.cell( this.c.focus ).focus();
  317. }
  318. },
  319. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  320. * Private methods
  321. */
  322. /**
  323. * Blur the control
  324. *
  325. * @param {boolean} [noEvents=false] Don't trigger updates / events (for destroying)
  326. * @private
  327. */
  328. _blur: function (noEvents)
  329. {
  330. if ( ! this.s.enable || ! this.s.lastFocus ) {
  331. return;
  332. }
  333. var cell = this.s.lastFocus.cell;
  334. $( cell.node() ).removeClass( this.c.className );
  335. this.s.lastFocus = null;
  336. if ( ! noEvents ) {
  337. this._updateFixedColumns(cell.index().column);
  338. this._emitEvent( 'key-blur', [ this.s.dt, cell ] );
  339. }
  340. },
  341. /**
  342. * Clipboard interaction handlers
  343. *
  344. * @private
  345. */
  346. _clipboard: function () {
  347. var dt = this.s.dt;
  348. var that = this;
  349. var namespace = this.s.namespace;
  350. // IE8 doesn't support getting selected text
  351. if ( ! window.getSelection ) {
  352. return;
  353. }
  354. $(document).on( 'copy'+namespace, function (ejq) {
  355. var e = ejq.originalEvent;
  356. var selection = window.getSelection().toString();
  357. var focused = that.s.lastFocus;
  358. // Only copy cell text to clipboard if there is no other selection
  359. // and there is a focused cell
  360. if ( ! selection && focused ) {
  361. e.clipboardData.setData(
  362. 'text/plain',
  363. focused.cell.render( that.c.clipboardOrthogonal )
  364. );
  365. e.preventDefault();
  366. }
  367. } );
  368. $(document).on( 'paste'+namespace, function (ejq) {
  369. var e = ejq.originalEvent;
  370. var focused = that.s.lastFocus;
  371. var activeEl = document.activeElement;
  372. var editor = that.c.editor;
  373. var pastedText;
  374. if ( focused && (! activeEl || activeEl.nodeName.toLowerCase() === 'body') ) {
  375. e.preventDefault();
  376. if ( window.clipboardData && window.clipboardData.getData ) {
  377. // IE
  378. pastedText = window.clipboardData.getData('Text');
  379. }
  380. else if ( e.clipboardData && e.clipboardData.getData ) {
  381. // Everything else
  382. pastedText = e.clipboardData.getData('text/plain');
  383. }
  384. if ( editor ) {
  385. // Got Editor - need to activate inline editing,
  386. // set the value and submit
  387. var options = that._inlineOptions(focused.cell.index());
  388. editor
  389. .inline(options.cell, options.field, options.options)
  390. .set( editor.displayed()[0], pastedText )
  391. .submit();
  392. }
  393. else {
  394. // No editor, so just dump the data in
  395. focused.cell.data( pastedText );
  396. dt.draw(false);
  397. }
  398. }
  399. } );
  400. },
  401. /**
  402. * Get an array of the column indexes that KeyTable can operate on. This
  403. * is a merge of the user supplied columns and the visible columns.
  404. *
  405. * @private
  406. */
  407. _columns: function ()
  408. {
  409. var dt = this.s.dt;
  410. var user = dt.columns( this.c.columns ).indexes();
  411. var out = [];
  412. dt.columns( ':visible' ).every( function (i) {
  413. if ( user.indexOf( i ) !== -1 ) {
  414. out.push( i );
  415. }
  416. } );
  417. return out;
  418. },
  419. /**
  420. * Perform excel like navigation for Editor by triggering an edit on key
  421. * press
  422. *
  423. * @param {integer} key Key code for the pressed key
  424. * @param {object} orig Original event
  425. * @private
  426. */
  427. _editor: function ( key, orig, hardEdit )
  428. {
  429. // If nothing focused, we can't take any action
  430. if (! this.s.lastFocus) {
  431. return;
  432. }
  433. // DataTables draw event
  434. if (orig && orig.type === 'draw') {
  435. return;
  436. }
  437. var that = this;
  438. var dt = this.s.dt;
  439. var editor = this.c.editor;
  440. var editCell = this.s.lastFocus.cell;
  441. var namespace = this.s.namespace + 'e' + editorNamespaceCounter++;
  442. // Do nothing if there is already an inline edit in this cell
  443. if ( $('div.DTE', editCell.node()).length ) {
  444. return;
  445. }
  446. // Don't activate Editor on control key presses
  447. if ( key !== null && (
  448. (key >= 0x00 && key <= 0x09) ||
  449. key === 0x0b ||
  450. key === 0x0c ||
  451. (key >= 0x0e && key <= 0x1f) ||
  452. (key >= 0x70 && key <= 0x7b) ||
  453. (key >= 0x7f && key <= 0x9f)
  454. ) ) {
  455. return;
  456. }
  457. if ( orig ) {
  458. orig.stopPropagation();
  459. // Return key should do nothing - for textareas it would empty the
  460. // contents
  461. if ( key === 13 ) {
  462. orig.preventDefault();
  463. }
  464. }
  465. var editInline = function () {
  466. var options = that._inlineOptions(editCell.index());
  467. editor
  468. .one( 'open'+namespace, function () {
  469. // Remove cancel open
  470. editor.off( 'cancelOpen'+namespace );
  471. // Excel style - select all text
  472. if ( ! hardEdit ) {
  473. $('div.DTE_Field_InputControl input, div.DTE_Field_InputControl textarea').select();
  474. }
  475. // Reduce the keys the Keys listens for
  476. dt.keys.enable( hardEdit ? 'tab-only' : 'navigation-only' );
  477. // On blur of the navigation submit
  478. dt.on( 'key-blur.editor', function (e, dt, cell) {
  479. if ( editor.displayed() && cell.node() === editCell.node() ) {
  480. editor.submit();
  481. }
  482. } );
  483. // Highlight the cell a different colour on full edit
  484. if ( hardEdit ) {
  485. $( dt.table().container() ).addClass('dtk-focus-alt');
  486. }
  487. // If the dev cancels the submit, we need to return focus
  488. editor.on( 'preSubmitCancelled'+namespace, function () {
  489. setTimeout( function () {
  490. that._focus( editCell, null, false );
  491. }, 50 );
  492. } );
  493. editor.on( 'submitUnsuccessful'+namespace, function () {
  494. that._focus( editCell, null, false );
  495. } );
  496. // Restore full key navigation on close
  497. editor.one( 'close'+namespace, function () {
  498. dt.keys.enable( true );
  499. dt.off( 'key-blur.editor' );
  500. editor.off( namespace );
  501. $( dt.table().container() ).removeClass('dtk-focus-alt');
  502. if (that.s.returnSubmit) {
  503. that.s.returnSubmit = false;
  504. that._emitEvent( 'key-return-submit', [dt, editCell] );
  505. }
  506. } );
  507. } )
  508. .one( 'cancelOpen'+namespace, function () {
  509. // `preOpen` can cancel the display of the form, so it
  510. // might be that the open event handler isn't needed
  511. editor.off( namespace );
  512. } )
  513. .inline(options.cell, options.field, options.options);
  514. };
  515. // Editor 1.7 listens for `return` on keyup, so if return is the trigger
  516. // key, we need to wait for `keyup` otherwise Editor would just submit
  517. // the content triggered by this keypress.
  518. if ( key === 13 ) {
  519. hardEdit = true;
  520. $(document).one( 'keyup', function () { // immediately removed
  521. editInline();
  522. } );
  523. }
  524. else {
  525. editInline();
  526. }
  527. },
  528. _inlineOptions: function (cellIdx)
  529. {
  530. if (this.c.editorOptions) {
  531. return this.c.editorOptions(cellIdx);
  532. }
  533. return {
  534. cell: cellIdx,
  535. field: undefined,
  536. options: undefined
  537. };
  538. },
  539. /**
  540. * Emit an event on the DataTable for listeners
  541. *
  542. * @param {string} name Event name
  543. * @param {array} args Event arguments
  544. * @private
  545. */
  546. _emitEvent: function ( name, args )
  547. {
  548. this.s.dt.iterator( 'table', function ( ctx, i ) {
  549. $(ctx.nTable).triggerHandler( name, args );
  550. } );
  551. },
  552. /**
  553. * Focus on a particular cell, shifting the table's paging if required
  554. *
  555. * @param {DataTables.Api|integer} row Can be given as an API instance that
  556. * contains the cell to focus or as an integer. As the latter it is the
  557. * visible row index (from the whole data set) - NOT the data index
  558. * @param {integer} [column] Not required if a cell is given as the first
  559. * parameter. Otherwise this is the column data index for the cell to
  560. * focus on
  561. * @param {boolean} [shift=true] Should the viewport be moved to show cell
  562. * @private
  563. */
  564. _focus: function ( row, column, shift, originalEvent )
  565. {
  566. var that = this;
  567. var dt = this.s.dt;
  568. var pageInfo = dt.page.info();
  569. var lastFocus = this.s.lastFocus;
  570. if ( ! originalEvent) {
  571. originalEvent = null;
  572. }
  573. if ( ! this.s.enable ) {
  574. return;
  575. }
  576. if ( typeof row !== 'number' ) {
  577. // Its an API instance - check that there is actually a row
  578. if ( ! row.any() ) {
  579. return;
  580. }
  581. // Convert the cell to a row and column
  582. var index = row.index();
  583. column = index.column;
  584. row = dt
  585. .rows( { filter: 'applied', order: 'applied' } )
  586. .indexes()
  587. .indexOf( index.row );
  588. // Don't focus rows that were filtered out.
  589. if ( row < 0 ) {
  590. return;
  591. }
  592. // For server-side processing normalise the row by adding the start
  593. // point, since `rows().indexes()` includes only rows that are
  594. // available at the client-side
  595. if ( pageInfo.serverSide ) {
  596. row += pageInfo.start;
  597. }
  598. }
  599. // Is the row on the current page? If not, we need to redraw to show the
  600. // page
  601. if ( pageInfo.length !== -1 && (row < pageInfo.start || row >= pageInfo.start+pageInfo.length) ) {
  602. this.s.focusDraw = true;
  603. this.s.waitingForDraw = true;
  604. dt
  605. .one( 'draw', function () {
  606. that.s.focusDraw = false;
  607. that.s.waitingForDraw = false;
  608. that._focus( row, column, undefined, originalEvent );
  609. } )
  610. .page( Math.floor( row / pageInfo.length ) )
  611. .draw( false );
  612. return;
  613. }
  614. // In the available columns?
  615. if ( $.inArray( column, this._columns() ) === -1 ) {
  616. return;
  617. }
  618. // De-normalise the server-side processing row, so we select the row
  619. // in its displayed position
  620. if ( pageInfo.serverSide ) {
  621. row -= pageInfo.start;
  622. }
  623. // Get the cell from the current position - ignoring any cells which might
  624. // not have been rendered (therefore can't use `:eq()` selector).
  625. var cells = dt.cells( null, column, {search: 'applied', order: 'applied'} ).flatten();
  626. var cell = dt.cell( cells[ row ] );
  627. if ( lastFocus ) {
  628. // Don't trigger a refocus on the same cell
  629. if ( lastFocus.node === cell.node() ) {
  630. this._emitEvent( 'key-refocus', [ this.s.dt, cell, originalEvent || null ] );
  631. return;
  632. }
  633. // Otherwise blur the old focus
  634. this._blur();
  635. }
  636. // Clear focus from other tables
  637. this._removeOtherFocus();
  638. var node = $( cell.node() );
  639. node.addClass( this.c.className );
  640. this._updateFixedColumns(column);
  641. // Shift viewpoint and page to make cell visible
  642. if ( shift === undefined || shift === true ) {
  643. this._scroll( $(window), $(document.body), node, 'offset' );
  644. var bodyParent = dt.table().body().parentNode;
  645. if ( bodyParent !== dt.table().header().parentNode ) {
  646. var parent = $(bodyParent.parentNode);
  647. this._scroll( parent, parent, node, 'position' );
  648. }
  649. }
  650. // Event and finish
  651. this.s.lastFocus = {
  652. cell: cell,
  653. node: cell.node(),
  654. relative: {
  655. row: dt.rows( { page: 'current' } ).indexes().indexOf( cell.index().row ),
  656. column: cell.index().column
  657. }
  658. };
  659. this._emitEvent( 'key-focus', [ this.s.dt, cell, originalEvent || null ] );
  660. dt.state.save();
  661. },
  662. /**
  663. * Handle key press
  664. *
  665. * @param {object} e Event
  666. * @private
  667. */
  668. _key: function ( e )
  669. {
  670. // If we are waiting for a draw to happen from another key event, then
  671. // do nothing for this new key press.
  672. if ( this.s.waitingForDraw ) {
  673. e.preventDefault();
  674. return;
  675. }
  676. var enable = this.s.enable;
  677. this.s.returnSubmit = (enable === 'navigation-only' || enable === 'tab-only') && e.keyCode === 13
  678. ? true
  679. : false;
  680. var navEnable = enable === true || enable === 'navigation-only';
  681. if ( ! enable ) {
  682. return;
  683. }
  684. if ( (e.keyCode === 0 || e.ctrlKey || e.metaKey || e.altKey) && !(e.ctrlKey && e.altKey) ) {
  685. return;
  686. }
  687. // If not focused, then there is no key action to take
  688. var lastFocus = this.s.lastFocus;
  689. if ( ! lastFocus ) {
  690. return;
  691. }
  692. // And the last focus still exists!
  693. if ( ! this.s.dt.cell(lastFocus.node).any() ) {
  694. this.s.lastFocus = null;
  695. return;
  696. }
  697. var that = this;
  698. var dt = this.s.dt;
  699. var scrolling = this.s.dt.settings()[0].oScroll.sY ? true : false;
  700. // If we are not listening for this key, do nothing
  701. if ( this.c.keys && $.inArray( e.keyCode, this.c.keys ) === -1 ) {
  702. return;
  703. }
  704. switch( e.keyCode ) {
  705. case 9: // tab
  706. // `enable` can be tab-only
  707. this._shift( e, e.shiftKey ? 'left' : 'right', true );
  708. break;
  709. case 27: // esc
  710. if ( this.c.blurable && enable === true ) {
  711. this._blur();
  712. }
  713. break;
  714. case 33: // page up (previous page)
  715. case 34: // page down (next page)
  716. if ( navEnable && !scrolling ) {
  717. e.preventDefault();
  718. dt
  719. .page( e.keyCode === 33 ? 'previous' : 'next' )
  720. .draw( false );
  721. }
  722. break;
  723. case 35: // end (end of current page)
  724. case 36: // home (start of current page)
  725. if ( navEnable ) {
  726. e.preventDefault();
  727. var indexes = dt.cells( {page: 'current'} ).indexes();
  728. var colIndexes = this._columns();
  729. this._focus( dt.cell(
  730. indexes[ e.keyCode === 35 ? indexes.length-1 : colIndexes[0] ]
  731. ), null, true, e );
  732. }
  733. break;
  734. case 37: // left arrow
  735. if ( navEnable ) {
  736. this._shift( e, 'left' );
  737. }
  738. break;
  739. case 38: // up arrow
  740. if ( navEnable ) {
  741. this._shift( e, 'up' );
  742. }
  743. break;
  744. case 39: // right arrow
  745. if ( navEnable ) {
  746. this._shift( e, 'right' );
  747. }
  748. break;
  749. case 40: // down arrow
  750. if ( navEnable ) {
  751. this._shift( e, 'down' );
  752. }
  753. break;
  754. case 113: // F2 - Excel like hard edit
  755. if ( this.c.editor ) {
  756. this._editor(null, e, true);
  757. break;
  758. }
  759. // else fallthrough
  760. default:
  761. // Everything else - pass through only when fully enabled
  762. if ( enable === true ) {
  763. this._emitEvent( 'key', [ dt, e.keyCode, this.s.lastFocus.cell, e ] );
  764. }
  765. break;
  766. }
  767. },
  768. /**
  769. * Remove focus from all tables other than this one
  770. */
  771. _removeOtherFocus: function ()
  772. {
  773. var thisTable = this.s.dt.table().node();
  774. $.fn.dataTable.tables({api:true}).iterator('table', function (settings) {
  775. if (this.table().node() !== thisTable) {
  776. this.cell.blur();
  777. }
  778. });
  779. },
  780. /**
  781. * Scroll a container to make a cell visible in it. This can be used for
  782. * both DataTables scrolling and native window scrolling.
  783. *
  784. * @param {jQuery} container Scrolling container
  785. * @param {jQuery} scroller Item being scrolled
  786. * @param {jQuery} cell Cell in the scroller
  787. * @param {string} posOff `position` or `offset` - which to use for the
  788. * calculation. `offset` for the document, otherwise `position`
  789. * @private
  790. */
  791. _scroll: function ( container, scroller, cell, posOff )
  792. {
  793. var offset = cell[posOff]();
  794. var height = cell.outerHeight();
  795. var width = cell.outerWidth();
  796. var scrollTop = scroller.scrollTop();
  797. var scrollLeft = scroller.scrollLeft();
  798. var containerHeight = container.height();
  799. var containerWidth = container.width();
  800. // If Scroller is being used, the table can be `position: absolute` and that
  801. // needs to be taken account of in the offset. If no Scroller, this will be 0
  802. if ( posOff === 'position' ) {
  803. offset.top += parseInt( cell.closest('table').css('top'), 10 );
  804. }
  805. // Top correction
  806. if ( offset.top < scrollTop ) {
  807. scroller.scrollTop( offset.top );
  808. }
  809. // Left correction
  810. if ( offset.left < scrollLeft ) {
  811. scroller.scrollLeft( offset.left );
  812. }
  813. // Bottom correction
  814. if ( offset.top + height > scrollTop + containerHeight && height < containerHeight ) {
  815. scroller.scrollTop( offset.top + height - containerHeight );
  816. }
  817. // Right correction
  818. if ( offset.left + width > scrollLeft + containerWidth && width < containerWidth ) {
  819. scroller.scrollLeft( offset.left + width - containerWidth );
  820. }
  821. },
  822. /**
  823. * Calculate a single offset movement in the table - up, down, left and
  824. * right and then perform the focus if possible
  825. *
  826. * @param {object} e Event object
  827. * @param {string} direction Movement direction
  828. * @param {boolean} keyBlurable `true` if the key press can result in the
  829. * table being blurred. This is so arrow keys won't blur the table, but
  830. * tab will.
  831. * @private
  832. */
  833. _shift: function ( e, direction, keyBlurable )
  834. {
  835. var that = this;
  836. var dt = this.s.dt;
  837. var pageInfo = dt.page.info();
  838. var rows = pageInfo.recordsDisplay;
  839. var columns = this._columns();
  840. var last = this.s.lastFocus;
  841. if ( ! last ) {
  842. return;
  843. }
  844. var currentCell = last.cell;
  845. if ( ! currentCell ) {
  846. return;
  847. }
  848. var currRow = dt
  849. .rows( { filter: 'applied', order: 'applied' } )
  850. .indexes()
  851. .indexOf( currentCell.index().row );
  852. // When server-side processing, `rows().indexes()` only gives the rows
  853. // that are available at the client-side, so we need to normalise the
  854. // row's current position by the display start point
  855. if ( pageInfo.serverSide ) {
  856. currRow += pageInfo.start;
  857. }
  858. var currCol = dt
  859. .columns( columns )
  860. .indexes()
  861. .indexOf( currentCell.index().column );
  862. var
  863. row = currRow,
  864. column = columns[ currCol ]; // row is the display, column is an index
  865. // If the direction is rtl then the logic needs to be inverted from this point forwards
  866. if($(dt.table().node()).css('direction') === 'rtl') {
  867. if(direction === 'right') {
  868. direction = 'left';
  869. }
  870. else if(direction === 'left'){
  871. direction = 'right';
  872. }
  873. }
  874. if ( direction === 'right' ) {
  875. if ( currCol >= columns.length - 1 ) {
  876. row++;
  877. column = columns[0];
  878. }
  879. else {
  880. column = columns[ currCol+1 ];
  881. }
  882. }
  883. else if ( direction === 'left' ) {
  884. if ( currCol === 0 ) {
  885. row--;
  886. column = columns[ columns.length - 1 ];
  887. }
  888. else {
  889. column = columns[ currCol-1 ];
  890. }
  891. }
  892. else if ( direction === 'up' ) {
  893. row--;
  894. }
  895. else if ( direction === 'down' ) {
  896. row++;
  897. }
  898. if ( row >= 0 && row < rows && $.inArray( column, columns ) !== -1 ) {
  899. if (e) {
  900. e.preventDefault();
  901. }
  902. this._focus( row, column, true, e );
  903. }
  904. else if ( ! keyBlurable || ! this.c.blurable ) {
  905. // No new focus, but if the table isn't blurable, then don't loose
  906. // focus
  907. if (e) {
  908. e.preventDefault();
  909. }
  910. }
  911. else {
  912. this._blur();
  913. }
  914. },
  915. /**
  916. * Create and insert a hidden input element that can receive focus on behalf
  917. * of the table
  918. *
  919. * @private
  920. */
  921. _tabInput: function ()
  922. {
  923. var that = this;
  924. var dt = this.s.dt;
  925. var tabIndex = this.c.tabIndex !== null ?
  926. this.c.tabIndex :
  927. dt.settings()[0].iTabIndex;
  928. if ( tabIndex == -1 ) {
  929. return;
  930. }
  931. // Only create the input element once on first class
  932. if (! this.s.tabInput) {
  933. var div = $('<div><input type="text" tabindex="'+tabIndex+'"/></div>')
  934. .css( {
  935. position: 'absolute',
  936. height: 1,
  937. width: 0,
  938. overflow: 'hidden'
  939. } );
  940. div.children().on( 'focus', function (e) {
  941. var cell = dt.cell(':eq(0)', that._columns(), {page: 'current'});
  942. if ( cell.any() ) {
  943. that._focus( cell, null, true, e );
  944. }
  945. } );
  946. this.s.tabInput = div;
  947. }
  948. // Insert the input element into the first cell in the table's body
  949. var cell = this.s.dt.cell(':eq(0)', '0:visible', {page: 'current', order: 'current'}).node();
  950. if (cell) {
  951. $(cell).prepend(this.s.tabInput);
  952. }
  953. },
  954. /**
  955. * Update fixed columns if they are enabled and if the cell we are
  956. * focusing is inside a fixed column
  957. * @param {integer} column Index of the column being changed
  958. * @private
  959. */
  960. _updateFixedColumns: function( column )
  961. {
  962. var dt = this.s.dt;
  963. var settings = dt.settings()[0];
  964. if ( settings._oFixedColumns ) {
  965. var leftCols = settings._oFixedColumns.s.iLeftColumns;
  966. var rightCols = settings.aoColumns.length - settings._oFixedColumns.s.iRightColumns;
  967. if (column < leftCols || column >= rightCols) {
  968. dt.fixedColumns().update();
  969. }
  970. }
  971. }
  972. } );
  973. /**
  974. * KeyTable default settings for initialisation
  975. *
  976. * @namespace
  977. * @name KeyTable.defaults
  978. * @static
  979. */
  980. KeyTable.defaults = {
  981. /**
  982. * Can focus be removed from the table
  983. * @type {Boolean}
  984. */
  985. blurable: true,
  986. /**
  987. * Class to give to the focused cell
  988. * @type {String}
  989. */
  990. className: 'focus',
  991. /**
  992. * Enable or disable clipboard support
  993. * @type {Boolean}
  994. */
  995. clipboard: true,
  996. /**
  997. * Orthogonal data that should be copied to clipboard
  998. * @type {string}
  999. */
  1000. clipboardOrthogonal: 'display',
  1001. /**
  1002. * Columns that can be focused. This is automatically merged with the
  1003. * visible columns as only visible columns can gain focus.
  1004. * @type {String}
  1005. */
  1006. columns: '', // all
  1007. /**
  1008. * Editor instance to automatically perform Excel like navigation
  1009. * @type {Editor}
  1010. */
  1011. editor: null,
  1012. /**
  1013. * Trigger editing immediately on focus
  1014. * @type {boolean}
  1015. */
  1016. editOnFocus: false,
  1017. /**
  1018. * Options to pass to Editor's inline method
  1019. * @type {function}
  1020. */
  1021. editorOptions: null,
  1022. /**
  1023. * Select a cell to automatically select on start up. `null` for no
  1024. * automatic selection
  1025. * @type {cell-selector}
  1026. */
  1027. focus: null,
  1028. /**
  1029. * Array of keys to listen for
  1030. * @type {null|array}
  1031. */
  1032. keys: null,
  1033. /**
  1034. * Tab index for where the table should sit in the document's tab flow
  1035. * @type {integer|null}
  1036. */
  1037. tabIndex: null
  1038. };
  1039. KeyTable.version = "2.6.4";
  1040. $.fn.dataTable.KeyTable = KeyTable;
  1041. $.fn.DataTable.KeyTable = KeyTable;
  1042. DataTable.Api.register( 'cell.blur()', function () {
  1043. return this.iterator( 'table', function (ctx) {
  1044. if ( ctx.keytable ) {
  1045. ctx.keytable.blur();
  1046. }
  1047. } );
  1048. } );
  1049. DataTable.Api.register( 'cell().focus()', function () {
  1050. return this.iterator( 'cell', function (ctx, row, column) {
  1051. if ( ctx.keytable ) {
  1052. ctx.keytable.focus( row, column );
  1053. }
  1054. } );
  1055. } );
  1056. DataTable.Api.register( 'keys.disable()', function () {
  1057. return this.iterator( 'table', function (ctx) {
  1058. if ( ctx.keytable ) {
  1059. ctx.keytable.enable( false );
  1060. }
  1061. } );
  1062. } );
  1063. DataTable.Api.register( 'keys.enable()', function ( opts ) {
  1064. return this.iterator( 'table', function (ctx) {
  1065. if ( ctx.keytable ) {
  1066. ctx.keytable.enable( opts === undefined ? true : opts );
  1067. }
  1068. } );
  1069. } );
  1070. DataTable.Api.register( 'keys.enabled()', function ( opts ) {
  1071. var ctx = this.context;
  1072. if (ctx.length) {
  1073. return ctx[0].keytable
  1074. ? ctx[0].keytable.enabled()
  1075. : false;
  1076. }
  1077. return false;
  1078. } );
  1079. DataTable.Api.register( 'keys.move()', function ( dir ) {
  1080. return this.iterator( 'table', function (ctx) {
  1081. if ( ctx.keytable ) {
  1082. ctx.keytable._shift( null, dir, false );
  1083. }
  1084. } );
  1085. } );
  1086. // Cell selector
  1087. DataTable.ext.selector.cell.push( function ( settings, opts, cells ) {
  1088. var focused = opts.focused;
  1089. var kt = settings.keytable;
  1090. var out = [];
  1091. if ( ! kt || focused === undefined ) {
  1092. return cells;
  1093. }
  1094. for ( var i=0, ien=cells.length ; i<ien ; i++ ) {
  1095. if ( (focused === true && kt.focused( cells[i] ) ) ||
  1096. (focused === false && ! kt.focused( cells[i] ) )
  1097. ) {
  1098. out.push( cells[i] );
  1099. }
  1100. }
  1101. return out;
  1102. } );
  1103. // Attach a listener to the document which listens for DataTables initialisation
  1104. // events so we can automatically initialise
  1105. $(document).on( 'preInit.dt.dtk', function (e, settings, json) {
  1106. if ( e.namespace !== 'dt' ) {
  1107. return;
  1108. }
  1109. var init = settings.oInit.keys;
  1110. var defaults = DataTable.defaults.keys;
  1111. if ( init || defaults ) {
  1112. var opts = $.extend( {}, defaults, init );
  1113. if ( init !== false ) {
  1114. new KeyTable( settings, opts );
  1115. }
  1116. }
  1117. } );
  1118. return KeyTable;
  1119. }));