dataTables.keyTable.js 29 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175
  1. /*! KeyTable 1.2.1
  2. * ©2010-2014 SpryMedia Ltd - datatables.net/license
  3. */
  4. /**
  5. * @summary KeyTable
  6. * @description Spreadsheet like keyboard navigation for DataTables
  7. * @version 1.2.1
  8. * @file dataTables.keyTable.js
  9. * @author SpryMedia Ltd (www.sprymedia.co.uk)
  10. * @contact www.sprymedia.co.uk/contact
  11. * @copyright Copyright 2009-2014 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. // Global scope for KeyTable for backwards compatibility. Will be removed in 1.3
  23. var KeyTable;
  24. (function(window, document, undefined) {
  25. var factory = function( $, DataTable ) {
  26. "use strict";
  27. KeyTable = function ( oInit )
  28. {
  29. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  30. * API parameters
  31. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  32. /*
  33. * Variable: block
  34. * Purpose: Flag whether or not KeyTable events should be processed
  35. * Scope: KeyTable - public
  36. */
  37. this.block = false;
  38. /*
  39. * Variable: event
  40. * Purpose: Container for all event application methods
  41. * Scope: KeyTable - public
  42. * Notes: This object contains all the public methods for adding and removing events - these
  43. * are dynamically added later on
  44. */
  45. this.event = {
  46. "remove": {}
  47. };
  48. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  49. * API methods
  50. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  51. /*
  52. * Function: fnGetCurrentPosition
  53. * Purpose: Get the currently focused cell's position
  54. * Returns: array int: [ x, y ]
  55. * Inputs: void
  56. */
  57. this.fnGetCurrentPosition = function ()
  58. {
  59. return [ _iOldX, _iOldY ];
  60. };
  61. /*
  62. * Function: fnGetCurrentData
  63. * Purpose: Get the currently focused cell's data (innerHTML)
  64. * Returns: string: - data requested
  65. * Inputs: void
  66. */
  67. this.fnGetCurrentData = function ()
  68. {
  69. return _nOldFocus.innerHTML;
  70. };
  71. /*
  72. * Function: fnGetCurrentTD
  73. * Purpose: Get the currently focused cell
  74. * Returns: node: - focused element
  75. * Inputs: void
  76. */
  77. this.fnGetCurrentTD = function ()
  78. {
  79. return _nOldFocus;
  80. };
  81. /*
  82. * Function: fnSetPosition
  83. * Purpose: Set the position of the focused cell
  84. * Returns: -
  85. * Inputs: int:x - x coordinate
  86. * int:y - y coordinate
  87. * Notes: Thanks to Rohan Daxini for the basis of this function
  88. */
  89. this.fnSetPosition = function( x, y )
  90. {
  91. if ( typeof x == 'object' && x.nodeName )
  92. {
  93. _fnSetFocus( x );
  94. }
  95. else
  96. {
  97. _fnSetFocus( _fnCellFromCoords(x, y) );
  98. }
  99. };
  100. /*
  101. * Function: fnBlur
  102. * Purpose: Blur the current focus
  103. * Returns: -
  104. * Inputs: -
  105. */
  106. this.fnBlur = function()
  107. {
  108. _fnBlur();
  109. };
  110. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  111. * Private parameters
  112. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  113. /*
  114. * Variable: _nBody
  115. * Purpose: Body node of the table - cached for renference
  116. * Scope: KeyTable - private
  117. */
  118. var _nBody = null;
  119. /*
  120. * Variable:
  121. * Purpose:
  122. * Scope: KeyTable - private
  123. */
  124. var _nOldFocus = null;
  125. /*
  126. * Variable: _iOldX and _iOldY
  127. * Purpose: X and Y coords of the old elemet that was focused on
  128. * Scope: KeyTable - private
  129. */
  130. var _iOldX = null;
  131. var _iOldY = null;
  132. /*
  133. * Variable: _that
  134. * Purpose: Scope saving for 'this' after a jQuery event
  135. * Scope: KeyTable - private
  136. */
  137. var _that = null;
  138. /*
  139. * Variable: sFocusClass
  140. * Purpose: Class that should be used for focusing on a cell
  141. * Scope: KeyTable - private
  142. */
  143. var _sFocusClass = "focus";
  144. /*
  145. * Variable: _bKeyCapture
  146. * Purpose: Flag for should KeyTable capture key events or not
  147. * Scope: KeyTable - private
  148. */
  149. var _bKeyCapture = false;
  150. /*
  151. * Variable: _oaoEvents
  152. * Purpose: Event cache object, one array for each supported event for speed of searching
  153. * Scope: KeyTable - private
  154. */
  155. var _oaoEvents = {
  156. "action": [],
  157. "esc": [],
  158. "focus": [],
  159. "blur": []
  160. };
  161. /*
  162. * Variable: _oDatatable
  163. * Purpose: DataTables settings object for if we are actually using a
  164. * DataTables table
  165. * Scope: KeyTable - private
  166. */
  167. var _oDatatable = null;
  168. var _bForm;
  169. var _nInput;
  170. var _bInputFocused = false;
  171. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  172. * Private methods
  173. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  174. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  175. * Key table events
  176. */
  177. /*
  178. * Function: _fnEventAddTemplate
  179. * Purpose: Create a function (with closure for sKey) event addition API
  180. * Returns: function: - template function
  181. * Inputs: string:sKey - type of event to detect
  182. */
  183. function _fnEventAddTemplate( sKey )
  184. {
  185. /*
  186. * Function: -
  187. * Purpose: API function for adding event to cache
  188. * Returns: -
  189. * Inputs: 1. node:x - target node to add event for
  190. * 2. function:y - callback function to apply
  191. * or
  192. * 1. int:x - x coord. of target cell (can be null for live events)
  193. * 2. int:y - y coord. of target cell (can be null for live events)
  194. * 3. function:z - callback function to apply
  195. * Notes: This function is (interally) overloaded (in as much as javascript allows for
  196. * that) - the target cell can be given by either node or coords.
  197. */
  198. return function ( x, y, z ) {
  199. if ( (x===null || typeof x == "number") &&
  200. (y===null || typeof y == "number") &&
  201. typeof z == "function" )
  202. {
  203. _fnEventAdd( sKey, x, y, z );
  204. }
  205. else if ( typeof x == "object" && typeof y == "function" )
  206. {
  207. var aCoords = _fnCoordsFromCell( x );
  208. _fnEventAdd( sKey, aCoords[0], aCoords[1], y );
  209. }
  210. else
  211. {
  212. alert( "Unhandable event type was added: x" +x+ " y:" +y+ " z:" +z );
  213. }
  214. };
  215. }
  216. /*
  217. * Function: _fnEventRemoveTemplate
  218. * Purpose: Create a function (with closure for sKey) event removal API
  219. * Returns: function: - template function
  220. * Inputs: string:sKey - type of event to detect
  221. */
  222. function _fnEventRemoveTemplate( sKey )
  223. {
  224. /*
  225. * Function: -
  226. * Purpose: API function for removing event from cache
  227. * Returns: int: - number of events removed
  228. * Inputs: 1. node:x - target node to remove event from
  229. * 2. function:y - callback function to apply
  230. * or
  231. * 1. int:x - x coord. of target cell (can be null for live events)
  232. * 2. int:y - y coord. of target cell (can be null for live events)
  233. * 3. function:z - callback function to remove - optional
  234. * Notes: This function is (interally) overloaded (in as much as javascript allows for
  235. * that) - the target cell can be given by either node or coords and the function
  236. * to remove is optional
  237. */
  238. return function ( x, y, z ) {
  239. if ( (x===null || typeof arguments[0] == "number") &&
  240. (y===null || typeof arguments[1] == "number" ) )
  241. {
  242. if ( typeof arguments[2] == "function" )
  243. {
  244. _fnEventRemove( sKey, x, y, z );
  245. }
  246. else
  247. {
  248. _fnEventRemove( sKey, x, y );
  249. }
  250. }
  251. else if ( typeof arguments[0] == "object" )
  252. {
  253. var aCoords = _fnCoordsFromCell( x );
  254. if ( typeof arguments[1] == "function" )
  255. {
  256. _fnEventRemove( sKey, aCoords[0], aCoords[1], y );
  257. }
  258. else
  259. {
  260. _fnEventRemove( sKey, aCoords[0], aCoords[1] );
  261. }
  262. }
  263. else
  264. {
  265. alert( "Unhandable event type was removed: x" +x+ " y:" +y+ " z:" +z );
  266. }
  267. };
  268. }
  269. /* Use the template functions to add the event API functions */
  270. for ( var sKey in _oaoEvents )
  271. {
  272. if ( sKey )
  273. {
  274. this.event[sKey] = _fnEventAddTemplate( sKey );
  275. this.event.remove[sKey] = _fnEventRemoveTemplate( sKey );
  276. }
  277. }
  278. /*
  279. * Function: _fnEventAdd
  280. * Purpose: Add an event to the internal cache
  281. * Returns: -
  282. * Inputs: string:sType - type of event to add, given by the available elements in _oaoEvents
  283. * int:x - x-coords to add event to - can be null for "blanket" event
  284. * int:y - y-coords to add event to - can be null for "blanket" event
  285. * function:fn - callback function for when triggered
  286. */
  287. function _fnEventAdd( sType, x, y, fn )
  288. {
  289. _oaoEvents[sType].push( {
  290. "x": x,
  291. "y": y,
  292. "fn": fn
  293. } );
  294. }
  295. /*
  296. * Function: _fnEventRemove
  297. * Purpose: Remove an event from the event cache
  298. * Returns: int: - number of matching events removed
  299. * Inputs: string:sType - type of event to look for
  300. * node:nTarget - target table cell
  301. * function:fn - optional - remove this function. If not given all handlers of this
  302. * type will be removed
  303. */
  304. function _fnEventRemove( sType, x, y, fn )
  305. {
  306. var iCorrector = 0;
  307. for ( var i=0, iLen=_oaoEvents[sType].length ; i<iLen-iCorrector ; i++ )
  308. {
  309. if ( typeof fn != 'undefined' )
  310. {
  311. if ( _oaoEvents[sType][i-iCorrector].x == x &&
  312. _oaoEvents[sType][i-iCorrector].y == y &&
  313. _oaoEvents[sType][i-iCorrector].fn == fn )
  314. {
  315. _oaoEvents[sType].splice( i-iCorrector, 1 );
  316. iCorrector++;
  317. }
  318. }
  319. else
  320. {
  321. if ( _oaoEvents[sType][i-iCorrector].x == x &&
  322. _oaoEvents[sType][i-iCorrector].y == y )
  323. {
  324. _oaoEvents[sType].splice( i, 1 );
  325. return 1;
  326. }
  327. }
  328. }
  329. return iCorrector;
  330. }
  331. /*
  332. * Function: _fnEventFire
  333. * Purpose: Look thought the events cache and fire off the event of interest
  334. * Returns: int:iFired - number of events fired
  335. * Inputs: string:sType - type of event to look for
  336. * int:x - x coord of cell
  337. * int:y - y coord of ell
  338. * Notes: It might be more efficient to return after the first event has been tirggered,
  339. * but that would mean that only one function of a particular type can be
  340. * subscribed to a particular node.
  341. */
  342. function _fnEventFire ( sType, x, y )
  343. {
  344. var iFired = 0;
  345. var aEvents = _oaoEvents[sType];
  346. for ( var i=0 ; i<aEvents.length ; i++ )
  347. {
  348. if ( (aEvents[i].x == x && aEvents[i].y == y ) ||
  349. (aEvents[i].x === null && aEvents[i].y == y ) ||
  350. (aEvents[i].x == x && aEvents[i].y === null ) ||
  351. (aEvents[i].x === null && aEvents[i].y === null )
  352. )
  353. {
  354. aEvents[i].fn( _fnCellFromCoords(x,y), x, y );
  355. iFired++;
  356. }
  357. }
  358. return iFired;
  359. }
  360. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  361. * Focus functions
  362. */
  363. /*
  364. * Function: _fnSetFocus
  365. * Purpose: Set focus on a node, and remove from an old node if needed
  366. * Returns: -
  367. * Inputs: node:nTarget - node we want to focus on
  368. * bool:bAutoScroll - optional - should we scroll the view port to the display
  369. */
  370. function _fnSetFocus( nTarget, bAutoScroll )
  371. {
  372. /* If node already has focus, just ignore this call */
  373. if ( _nOldFocus == nTarget )
  374. {
  375. return;
  376. }
  377. if ( typeof bAutoScroll == 'undefined' )
  378. {
  379. bAutoScroll = true;
  380. }
  381. /* Remove old focus (with blur event if needed) */
  382. if ( _nOldFocus !== null )
  383. {
  384. _fnRemoveFocus( _nOldFocus );
  385. }
  386. /* Add the new class to highlight the focused cell */
  387. $(nTarget).addClass( _sFocusClass );
  388. $(nTarget).parent().addClass( _sFocusClass );
  389. /* If it's a DataTable then we need to jump the paging to the relevant page */
  390. var oSettings;
  391. if ( _oDatatable )
  392. {
  393. oSettings = _oDatatable;
  394. var iRow = _fnFindDtCell( nTarget )[1];
  395. var bKeyCaptureCache = _bKeyCapture;
  396. /* Page forwards */
  397. while ( iRow >= oSettings.fnDisplayEnd() )
  398. {
  399. if ( oSettings._iDisplayLength >= 0 )
  400. {
  401. /* Make sure we are not over running the display array */
  402. if ( oSettings._iDisplayStart + oSettings._iDisplayLength < oSettings.fnRecordsDisplay() )
  403. {
  404. oSettings._iDisplayStart += oSettings._iDisplayLength;
  405. }
  406. }
  407. else
  408. {
  409. oSettings._iDisplayStart = 0;
  410. }
  411. _oDatatable.oApi._fnCalculateEnd( oSettings );
  412. }
  413. /* Page backwards */
  414. while ( iRow < oSettings._iDisplayStart )
  415. {
  416. oSettings._iDisplayStart = oSettings._iDisplayLength>=0 ?
  417. oSettings._iDisplayStart - oSettings._iDisplayLength :
  418. 0;
  419. if ( oSettings._iDisplayStart < 0 )
  420. {
  421. oSettings._iDisplayStart = 0;
  422. }
  423. _oDatatable.oApi._fnCalculateEnd( oSettings );
  424. }
  425. /* Re-draw the table */
  426. _oDatatable.oApi._fnDraw( oSettings );
  427. /* Restore the key capture */
  428. _bKeyCapture = bKeyCaptureCache;
  429. }
  430. /* Cache the information that we are interested in */
  431. var aNewPos = _fnCoordsFromCell( nTarget );
  432. _nOldFocus = nTarget;
  433. _iOldX = aNewPos[0];
  434. _iOldY = aNewPos[1];
  435. var iViewportHeight, iViewportWidth, iScrollTop, iScrollLeft, iHeight, iWidth, aiPos;
  436. if ( bAutoScroll )
  437. {
  438. /* Scroll the viewport such that the new cell is fully visible in the rendered window */
  439. iViewportHeight = $(window).height();
  440. iViewportWidth = $(window).width();
  441. iScrollTop = $(document).scrollTop();
  442. iScrollLeft = $(document).scrollLeft();
  443. iHeight = nTarget.offsetHeight;
  444. iWidth = nTarget.offsetWidth;
  445. aiPos = _fnGetPos( nTarget );
  446. /* Take account of scrolling in DataTables 1.7 - remove scrolling since that would add to
  447. * the positioning calculation
  448. */
  449. if ( _oDatatable && typeof oSettings.oScroll != 'undefined' &&
  450. (oSettings.oScroll.sX !== "" || oSettings.oScroll.sY !== "") )
  451. {
  452. aiPos[1] -= $(oSettings.nTable.parentNode).scrollTop();
  453. aiPos[0] -= $(oSettings.nTable.parentNode).scrollLeft();
  454. }
  455. /* Correct viewport positioning for vertical scrolling */
  456. if ( aiPos[1]+iHeight > iScrollTop+iViewportHeight )
  457. {
  458. /* Displayed element if off the bottom of the viewport */
  459. _fnSetScrollTop( aiPos[1]+iHeight - iViewportHeight );
  460. }
  461. else if ( aiPos[1] < iScrollTop )
  462. {
  463. /* Displayed element if off the top of the viewport */
  464. _fnSetScrollTop( aiPos[1] );
  465. }
  466. /* Correct viewport positioning for horizontal scrolling */
  467. if ( aiPos[0]+iWidth > iScrollLeft+iViewportWidth )
  468. {
  469. /* Displayed element is off the bottom of the viewport */
  470. _fnSetScrollLeft( aiPos[0]+iWidth - iViewportWidth );
  471. }
  472. else if ( aiPos[0] < iScrollLeft )
  473. {
  474. /* Displayed element if off the Left of the viewport */
  475. _fnSetScrollLeft( aiPos[0] );
  476. }
  477. }
  478. /* Take account of scrolling in DataTables 1.7 */
  479. if ( _oDatatable && typeof oSettings.oScroll != 'undefined' &&
  480. (oSettings.oScroll.sX !== "" || oSettings.oScroll.sY !== "") )
  481. {
  482. var dtScrollBody = oSettings.nTable.parentNode;
  483. iViewportHeight = dtScrollBody.clientHeight;
  484. iViewportWidth = dtScrollBody.clientWidth;
  485. iScrollTop = dtScrollBody.scrollTop;
  486. iScrollLeft = dtScrollBody.scrollLeft;
  487. iHeight = nTarget.offsetHeight;
  488. iWidth = nTarget.offsetWidth;
  489. /* Correct for vertical scrolling */
  490. if ( nTarget.offsetTop + iHeight > iViewportHeight+iScrollTop )
  491. {
  492. dtScrollBody.scrollTop = (nTarget.offsetTop + iHeight) - iViewportHeight;
  493. }
  494. else if ( nTarget.offsetTop < iScrollTop )
  495. {
  496. dtScrollBody.scrollTop = nTarget.offsetTop;
  497. }
  498. /* Correct for horizontal scrolling */
  499. if ( nTarget.offsetLeft + iWidth > iViewportWidth+iScrollLeft )
  500. {
  501. dtScrollBody.scrollLeft = (nTarget.offsetLeft + iWidth) - iViewportWidth;
  502. }
  503. else if ( nTarget.offsetLeft < iScrollLeft )
  504. {
  505. dtScrollBody.scrollLeft = nTarget.offsetLeft;
  506. }
  507. }
  508. /* Focused - so we want to capture the keys */
  509. _fnCaptureKeys();
  510. /* Fire of the focus event if there is one */
  511. _fnEventFire( "focus", _iOldX, _iOldY );
  512. }
  513. /*
  514. * Function: _fnBlur
  515. * Purpose: Blur focus from the whole table
  516. * Returns: -
  517. * Inputs: -
  518. */
  519. function _fnBlur()
  520. {
  521. _fnRemoveFocus( _nOldFocus );
  522. _iOldX = null;
  523. _iOldY = null;
  524. _nOldFocus = null;
  525. _fnReleaseKeys();
  526. }
  527. /*
  528. * Function: _fnRemoveFocus
  529. * Purpose: Remove focus from a cell and fire any blur events which are attached
  530. * Returns: -
  531. * Inputs: node:nTarget - cell of interest
  532. */
  533. function _fnRemoveFocus( nTarget )
  534. {
  535. $(nTarget).removeClass( _sFocusClass );
  536. $(nTarget).parent().removeClass( _sFocusClass );
  537. _fnEventFire( "blur", _iOldX, _iOldY );
  538. }
  539. /*
  540. * Function: _fnClick
  541. * Purpose: Focus on the element that has been clicked on by the user
  542. * Returns: -
  543. * Inputs: event:e - click event
  544. */
  545. function _fnClick ( e )
  546. {
  547. var nTarget = this;
  548. while ( nTarget.nodeName != "TD" )
  549. {
  550. nTarget = nTarget.parentNode;
  551. }
  552. _fnSetFocus( nTarget );
  553. _fnCaptureKeys();
  554. }
  555. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  556. * Key events
  557. */
  558. /*
  559. * Function: _fnKey
  560. * Purpose: Deal with a key events, be it moving the focus or return etc.
  561. * Returns: bool: - allow browser default action
  562. * Inputs: event:e - key event
  563. */
  564. function _fnKey ( e )
  565. {
  566. /* If user or system has blocked KeyTable from doing anything, just ignore this event */
  567. if ( _that.block || !_bKeyCapture )
  568. {
  569. return true;
  570. }
  571. /* If a modifier key is pressed (exapct shift), ignore the event */
  572. if ( e.metaKey || e.altKey || e.ctrlKey )
  573. {
  574. return true;
  575. }
  576. var
  577. x, y,
  578. iTableWidth = _nBody.getElementsByTagName('tr')[0].getElementsByTagName('td').length,
  579. iTableHeight;
  580. /* Get table height and width - done here so as to be dynamic (if table is updated) */
  581. if ( _oDatatable )
  582. {
  583. /*
  584. * Locate the current node in the DataTable overriding the old positions - the reason for
  585. * is is that there might have been some DataTables interaction between the last focus and
  586. * now
  587. */
  588. iTableHeight = _oDatatable.aiDisplay.length;
  589. var aDtPos = _fnFindDtCell( _nOldFocus );
  590. if ( aDtPos === null )
  591. {
  592. /* If the table has been updated such that the focused cell can't be seen - do nothing */
  593. return;
  594. }
  595. _iOldX = aDtPos[ 0 ];
  596. _iOldY = aDtPos[ 1 ];
  597. }
  598. else
  599. {
  600. iTableHeight = _nBody.getElementsByTagName('tr').length;
  601. }
  602. /* Capture shift+tab to match the left arrow key */
  603. var iKey = (e.keyCode == 9 && e.shiftKey) ? -1 : e.keyCode;
  604. switch( iKey )
  605. {
  606. case 13: /* return */
  607. e.preventDefault();
  608. e.stopPropagation();
  609. _fnEventFire( "action", _iOldX, _iOldY );
  610. return true;
  611. case 27: /* esc */
  612. if ( !_fnEventFire( "esc", _iOldX, _iOldY ) )
  613. {
  614. /* Only lose focus if there isn't an escape handler on the cell */
  615. _fnBlur();
  616. return;
  617. }
  618. x = _iOldX;
  619. y = _iOldY;
  620. break;
  621. case -1:
  622. case 37: /* left arrow */
  623. if ( _iOldX > 0 ) {
  624. x = _iOldX - 1;
  625. y = _iOldY;
  626. } else if ( _iOldY > 0 ) {
  627. x = iTableWidth-1;
  628. y = _iOldY - 1;
  629. } else {
  630. /* at start of table */
  631. if ( iKey == -1 && _bForm )
  632. {
  633. /* If we are in a form, return focus to the 'input' element such that tabbing will
  634. * follow correctly in the browser
  635. */
  636. _bInputFocused = true;
  637. _nInput.focus();
  638. /* This timeout is a little nasty - but IE appears to have some asyhnc behaviour for
  639. * focus
  640. */
  641. setTimeout( function(){ _bInputFocused = false; }, 0 );
  642. _bKeyCapture = false;
  643. _fnBlur();
  644. return true;
  645. }
  646. else
  647. {
  648. return false;
  649. }
  650. }
  651. break;
  652. case 38: /* up arrow */
  653. if ( _iOldY > 0 ) {
  654. x = _iOldX;
  655. y = _iOldY - 1;
  656. } else {
  657. return false;
  658. }
  659. break;
  660. case 36: /* home */
  661. x = _iOldX;
  662. y = 0;
  663. break;
  664. case 33: /* page up */
  665. x = _iOldX;
  666. y = _iOldY - 10;
  667. if (y < 0) {
  668. y = 0;
  669. }
  670. break;
  671. case 9: /* tab */
  672. case 39: /* right arrow */
  673. if ( _iOldX < iTableWidth-1 ) {
  674. x = _iOldX + 1;
  675. y = _iOldY;
  676. } else if ( _iOldY < iTableHeight-1 ) {
  677. x = 0;
  678. y = _iOldY + 1;
  679. } else {
  680. /* at end of table */
  681. if ( iKey == 9 && _bForm )
  682. {
  683. /* If we are in a form, return focus to the 'input' element such that tabbing will
  684. * follow correctly in the browser
  685. */
  686. _bInputFocused = true;
  687. _nInput.focus();
  688. /* This timeout is a little nasty - but IE appears to have some asyhnc behaviour for
  689. * focus
  690. */
  691. setTimeout( function(){ _bInputFocused = false; }, 0 );
  692. _bKeyCapture = false;
  693. _fnBlur();
  694. return true;
  695. }
  696. else
  697. {
  698. return false;
  699. }
  700. }
  701. break;
  702. case 40: /* down arrow */
  703. if ( _iOldY < iTableHeight-1 ) {
  704. x = _iOldX;
  705. y = _iOldY + 1;
  706. } else {
  707. return false;
  708. }
  709. break;
  710. case 35: /* end */
  711. x = _iOldX;
  712. y = iTableHeight-1;
  713. break;
  714. case 34: /* page down */
  715. x = _iOldX;
  716. y = _iOldY+10;
  717. if (y > iTableHeight-1) {
  718. y = iTableHeight-1;
  719. }
  720. break;
  721. default: /* Nothing we are interested in */
  722. return true;
  723. }
  724. _fnSetFocus( _fnCellFromCoords(x, y) );
  725. return false;
  726. }
  727. /*
  728. * Function: _fnCaptureKeys
  729. * Purpose: Start capturing key events for this table
  730. * Returns: -
  731. * Inputs: -
  732. */
  733. function _fnCaptureKeys( )
  734. {
  735. if ( !_bKeyCapture )
  736. {
  737. _bKeyCapture = true;
  738. }
  739. }
  740. /*
  741. * Function: _fnReleaseKeys
  742. * Purpose: Stop capturing key events for this table
  743. * Returns: -
  744. * Inputs: -
  745. */
  746. function _fnReleaseKeys( )
  747. {
  748. _bKeyCapture = false;
  749. }
  750. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  751. * Support functions
  752. */
  753. /*
  754. * Function: _fnCellFromCoords
  755. * Purpose: Calulate the target TD cell from x and y coordinates
  756. * Returns: node: - TD target
  757. * Inputs: int:x - x coordinate
  758. * int:y - y coordinate
  759. */
  760. function _fnCellFromCoords( x, y )
  761. {
  762. if ( _oDatatable )
  763. {
  764. if ( typeof _oDatatable.aoData[ _oDatatable.aiDisplay[ y ] ] != 'undefined' )
  765. {
  766. return _oDatatable.aoData[ _oDatatable.aiDisplay[ y ] ].nTr.getElementsByTagName('td')[x];
  767. }
  768. else
  769. {
  770. return null;
  771. }
  772. }
  773. else
  774. {
  775. return $('tr:eq('+y+')>td:eq('+x+')', _nBody )[0];
  776. }
  777. }
  778. /*
  779. * Function: _fnCoordsFromCell
  780. * Purpose: Calculate the x and y position in a table from a TD cell
  781. * Returns: array[2] int: [x, y]
  782. * Inputs: node:n - TD cell of interest
  783. * Notes: Not actually interested in this for DataTables since it might go out of date
  784. */
  785. function _fnCoordsFromCell( n )
  786. {
  787. if ( _oDatatable )
  788. {
  789. return [
  790. $('td', n.parentNode).index(n),
  791. $('tr', n.parentNode.parentNode).index(n.parentNode) + _oDatatable._iDisplayStart
  792. ];
  793. }
  794. else
  795. {
  796. return [
  797. $('td', n.parentNode).index(n),
  798. $('tr', n.parentNode.parentNode).index(n.parentNode)
  799. ];
  800. }
  801. }
  802. /*
  803. * Function: _fnSetScrollTop
  804. * Purpose: Set the vertical scrolling position
  805. * Returns: -
  806. * Inputs: int:iPos - scrolltop
  807. * Notes: This is so nasty, but without browser detection you can't tell which you should set
  808. * So on browsers that support both, the scroll top will be set twice. I can live with
  809. * that :-)
  810. */
  811. function _fnSetScrollTop( iPos )
  812. {
  813. document.documentElement.scrollTop = iPos;
  814. document.body.scrollTop = iPos;
  815. }
  816. /*
  817. * Function: _fnSetScrollLeft
  818. * Purpose: Set the horizontal scrolling position
  819. * Returns: -
  820. * Inputs: int:iPos - scrollleft
  821. */
  822. function _fnSetScrollLeft( iPos )
  823. {
  824. document.documentElement.scrollLeft = iPos;
  825. document.body.scrollLeft = iPos;
  826. }
  827. /*
  828. * Function: _fnGetPos
  829. * Purpose: Get the position of an object on the rendered page
  830. * Returns: array[2] int: [left, right]
  831. * Inputs: node:obj - element of interest
  832. */
  833. function _fnGetPos ( obj )
  834. {
  835. var iLeft = 0;
  836. var iTop = 0;
  837. if (obj.offsetParent)
  838. {
  839. iLeft = obj.offsetLeft;
  840. iTop = obj.offsetTop;
  841. obj = obj.offsetParent;
  842. while (obj)
  843. {
  844. iLeft += obj.offsetLeft;
  845. iTop += obj.offsetTop;
  846. obj = obj.offsetParent;
  847. }
  848. }
  849. return [iLeft,iTop];
  850. }
  851. /*
  852. * Function: _fnFindDtCell
  853. * Purpose: Get the coords. of a cell from the DataTables internal information
  854. * Returns: array[2] int: [x, y] coords. or null if not found
  855. * Inputs: node:nTarget - the node of interest
  856. */
  857. function _fnFindDtCell( nTarget )
  858. {
  859. for ( var i=0, iLen=_oDatatable.aiDisplay.length ; i<iLen ; i++ )
  860. {
  861. var nTr = _oDatatable.aoData[ _oDatatable.aiDisplay[i] ].nTr;
  862. var nTds = nTr.getElementsByTagName('td');
  863. for ( var j=0, jLen=nTds.length ; j<jLen ; j++ )
  864. {
  865. if ( nTds[j] == nTarget )
  866. {
  867. return [ j, i ];
  868. }
  869. }
  870. }
  871. return null;
  872. }
  873. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  874. * Initialisation
  875. */
  876. /*
  877. * Function: _fnInit
  878. * Purpose: Initialise the KeyTable
  879. * Returns: -
  880. * Inputs: object:oInit - optional - Initalisation object with the following parameters:
  881. * array[2] int:focus - x and y coordinates of the initial target
  882. * or
  883. * node:focus - the node to set initial focus on
  884. * node:table - the table to use, if not given, first table with class 'KeyTable' will be used
  885. * string:focusClass - focusing class to give to table elements
  886. * object:that - focus
  887. * bool:initScroll - scroll the view port on load, default true
  888. * int:tabIndex - the tab index to give the hidden input element
  889. */
  890. function _fnInit( table, datatable, oInit, that )
  891. {
  892. /* Save scope */
  893. _that = that;
  894. /* Capture undefined initialisation and apply the defaults */
  895. if ( typeof oInit == 'undefined' ) {
  896. oInit = {};
  897. }
  898. if ( typeof oInit.focus == 'undefined' ) {
  899. oInit.focus = [0,0];
  900. }
  901. oInit.table = table;
  902. $(oInit.table).addClass('KeyTable');
  903. if ( typeof oInit.focusClass != 'undefined' ) {
  904. _sFocusClass = oInit.focusClass;
  905. }
  906. if ( typeof datatable != 'undefined' ) {
  907. _oDatatable = datatable;
  908. }
  909. if ( typeof oInit.initScroll == 'undefined' ) {
  910. oInit.initScroll = true;
  911. }
  912. if ( typeof oInit.form == 'undefined' ) {
  913. oInit.form = false;
  914. }
  915. _bForm = oInit.form;
  916. /* Cache the tbody node of interest */
  917. _nBody = oInit.table.getElementsByTagName('tbody')[0];
  918. /* If the table is inside a form, then we need a hidden input box which can be used by the
  919. * browser to catch the browser tabbing for our table
  920. */
  921. if ( _bForm )
  922. {
  923. var nDiv = document.createElement('div');
  924. _nInput = document.createElement('input');
  925. nDiv.style.height = "1px"; /* Opera requires a little something */
  926. nDiv.style.width = "0px";
  927. nDiv.style.overflow = "hidden";
  928. if ( typeof oInit.tabIndex != 'undefined' )
  929. {
  930. _nInput.tabIndex = oInit.tabIndex;
  931. }
  932. nDiv.appendChild(_nInput);
  933. oInit.table.parentNode.insertBefore( nDiv, oInit.table.nextSibling );
  934. $(_nInput).focus( function () {
  935. /* See if we want to 'tab into' the table or out */
  936. if ( !_bInputFocused )
  937. {
  938. _bKeyCapture = true;
  939. _bInputFocused = false;
  940. if ( typeof oInit.focus.nodeName != "undefined" )
  941. {
  942. _fnSetFocus( oInit.focus, oInit.initScroll );
  943. }
  944. else
  945. {
  946. _fnSetFocus( _fnCellFromCoords( oInit.focus[0], oInit.focus[1]), oInit.initScroll );
  947. }
  948. /* Need to interup the thread for this to work */
  949. setTimeout( function() { _nInput.blur(); }, 0 );
  950. }
  951. } );
  952. _bKeyCapture = false;
  953. }
  954. else
  955. {
  956. /* Set the initial focus on the table */
  957. if ( typeof oInit.focus.nodeName != "undefined" )
  958. {
  959. _fnSetFocus( oInit.focus, oInit.initScroll );
  960. }
  961. else
  962. {
  963. _fnSetFocus( _fnCellFromCoords( oInit.focus[0], oInit.focus[1]), oInit.initScroll );
  964. }
  965. _fnCaptureKeys();
  966. }
  967. /* Add event listeners */
  968. $(document).bind( "keydown", _fnKey );
  969. if ( _oDatatable )
  970. {
  971. $(_oDatatable.nTable).on( 'click', 'td', _fnClick );
  972. }
  973. else
  974. {
  975. $(_nBody).on( 'click', 'td', _fnClick );
  976. }
  977. /* Loose table focus when click outside the table */
  978. $(document).click( function(e) {
  979. var nTarget = e.target;
  980. var bTableClick = false;
  981. while ( nTarget )
  982. {
  983. if ( nTarget == oInit.table )
  984. {
  985. bTableClick = true;
  986. break;
  987. }
  988. nTarget = nTarget.parentNode;
  989. }
  990. if ( !bTableClick )
  991. {
  992. _fnBlur();
  993. }
  994. } );
  995. }
  996. var table, datatable;
  997. if ( oInit === undefined ) {
  998. table = $('table.KeyTable')[0];
  999. datatable = null;
  1000. }
  1001. else if ( $.isPlainObject( oInit ) ) {
  1002. table = oInit.table;
  1003. datatable = oInit.datatable;
  1004. }
  1005. else {
  1006. datatable = new $.fn.dataTable.Api( oInit ).settings()[0];
  1007. table = datatable.nTable;
  1008. }
  1009. /* Initialise our new object */
  1010. _fnInit( table, datatable, oInit, this );
  1011. };
  1012. KeyTable.version = "1.2.1";
  1013. $.fn.dataTable.KeyTable = KeyTable;
  1014. $.fn.DataTable.KeyTable = KeyTable;
  1015. return KeyTable;
  1016. }; // /factory
  1017. // Define as an AMD module if possible
  1018. if ( typeof define === 'function' && define.amd ) {
  1019. define( ['jquery', 'datatables'], factory );
  1020. }
  1021. else if ( typeof exports === 'object' ) {
  1022. // Node/CommonJS
  1023. factory( require('jquery'), require('datatables') );
  1024. }
  1025. else if ( jQuery && !jQuery.fn.dataTable.KeyTable ) {
  1026. // Otherwise simply initialise as normal, stopping multiple evaluation
  1027. factory( jQuery, jQuery.fn.dataTable );
  1028. }
  1029. })(window, document);