From 0225bdb772d1334cc1aa7ab0fc3678df0864df6b Mon Sep 17 00:00:00 2001 From: AlisaLinUwU Date: Sun, 26 Jan 2025 10:42:28 +0500 Subject: Initialize --- .../css/keyTable.bootstrap4.css | 9 + .../css/keyTable.bootstrap4.min.css | 1 + .../datatables-keytable/js/dataTables.keyTable.js | 1349 ++++++++++++++++++++ .../js/dataTables.keyTable.min.js | 47 + .../datatables-keytable/js/keyTable.bootstrap4.js | 38 + .../js/keyTable.bootstrap4.min.js | 5 + 6 files changed, 1449 insertions(+) create mode 100644 build/resources/main/static/plugins/datatables-keytable/css/keyTable.bootstrap4.css create mode 100644 build/resources/main/static/plugins/datatables-keytable/css/keyTable.bootstrap4.min.css create mode 100644 build/resources/main/static/plugins/datatables-keytable/js/dataTables.keyTable.js create mode 100644 build/resources/main/static/plugins/datatables-keytable/js/dataTables.keyTable.min.js create mode 100644 build/resources/main/static/plugins/datatables-keytable/js/keyTable.bootstrap4.js create mode 100644 build/resources/main/static/plugins/datatables-keytable/js/keyTable.bootstrap4.min.js (limited to 'build/resources/main/static/plugins/datatables-keytable') diff --git a/build/resources/main/static/plugins/datatables-keytable/css/keyTable.bootstrap4.css b/build/resources/main/static/plugins/datatables-keytable/css/keyTable.bootstrap4.css new file mode 100644 index 0000000..cef2bc3 --- /dev/null +++ b/build/resources/main/static/plugins/datatables-keytable/css/keyTable.bootstrap4.css @@ -0,0 +1,9 @@ +table.dataTable tbody th.focus, +table.dataTable tbody td.focus { + box-shadow: inset 0 0 1px 2px #0275d8; +} + +div.dtk-focus-alt table.dataTable tbody th.focus, +div.dtk-focus-alt table.dataTable tbody td.focus { + box-shadow: inset 0 0 1px 2px #ff8b33; +} diff --git a/build/resources/main/static/plugins/datatables-keytable/css/keyTable.bootstrap4.min.css b/build/resources/main/static/plugins/datatables-keytable/css/keyTable.bootstrap4.min.css new file mode 100644 index 0000000..1441db8 --- /dev/null +++ b/build/resources/main/static/plugins/datatables-keytable/css/keyTable.bootstrap4.min.css @@ -0,0 +1 @@ +table.dataTable tbody th.focus,table.dataTable tbody td.focus{box-shadow:inset 0 0 1px 2px #0275d8}div.dtk-focus-alt table.dataTable tbody th.focus,div.dtk-focus-alt table.dataTable tbody td.focus{box-shadow:inset 0 0 1px 2px #ff8b33} diff --git a/build/resources/main/static/plugins/datatables-keytable/js/dataTables.keyTable.js b/build/resources/main/static/plugins/datatables-keytable/js/dataTables.keyTable.js new file mode 100644 index 0000000..abab02e --- /dev/null +++ b/build/resources/main/static/plugins/datatables-keytable/js/dataTables.keyTable.js @@ -0,0 +1,1349 @@ +/*! KeyTable 2.6.4 + * ©2009-2021 SpryMedia Ltd - datatables.net/license + */ + +/** + * @summary KeyTable + * @description Spreadsheet like keyboard navigation for DataTables + * @version 2.6.4 + * @file dataTables.keyTable.js + * @author SpryMedia Ltd (www.sprymedia.co.uk) + * @contact www.sprymedia.co.uk/contact + * @copyright Copyright 2009-2021 SpryMedia Ltd. + * + * This source file is free software, available under the following license: + * MIT license - http://datatables.net/license/mit + * + * This source file is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY + * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details. + * + * For details please refer to: http://www.datatables.net + */ + +(function( factory ){ + if ( typeof define === 'function' && define.amd ) { + // AMD + define( ['jquery', 'datatables.net'], function ( $ ) { + return factory( $, window, document ); + } ); + } + else if ( typeof exports === 'object' ) { + // CommonJS + module.exports = function (root, $) { + if ( ! root ) { + root = window; + } + + if ( ! $ || ! $.fn.dataTable ) { + $ = require('datatables.net')(root, $).$; + } + + return factory( $, root, root.document ); + }; + } + else { + // Browser + factory( jQuery, window, document ); + } +}(function( $, window, document, undefined ) { +'use strict'; +var DataTable = $.fn.dataTable; +var namespaceCounter = 0; +var editorNamespaceCounter = 0; + + +var KeyTable = function ( dt, opts ) { + // Sanity check that we are using DataTables 1.10 or newer + if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.8' ) ) { + throw 'KeyTable requires DataTables 1.10.8 or newer'; + } + + // User and defaults configuration object + this.c = $.extend( true, {}, + DataTable.defaults.keyTable, + KeyTable.defaults, + opts + ); + + // Internal settings + this.s = { + /** @type {DataTable.Api} DataTables' API instance */ + dt: new DataTable.Api( dt ), + + enable: true, + + /** @type {bool} Flag for if a draw is triggered by focus */ + focusDraw: false, + + /** @type {bool} Flag to indicate when waiting for a draw to happen. + * Will ignore key presses at this point + */ + waitingForDraw: false, + + /** @type {object} Information about the last cell that was focused */ + lastFocus: null, + + /** @type {string} Unique namespace per instance */ + namespace: '.keyTable-'+(namespaceCounter++), + + /** @type {Node} Input element for tabbing into the table */ + tabInput: null + }; + + // DOM items + this.dom = { + + }; + + // Check if row reorder has already been initialised on this table + var settings = this.s.dt.settings()[0]; + var exisiting = settings.keytable; + if ( exisiting ) { + return exisiting; + } + + settings.keytable = this; + this._constructor(); +}; + + +$.extend( KeyTable.prototype, { + /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * API methods for DataTables API interface + */ + + /** + * Blur the table's cell focus + */ + blur: function () + { + this._blur(); + }, + + /** + * Enable cell focus for the table + * + * @param {string} state Can be `true`, `false` or `-string navigation-only` + */ + enable: function ( state ) + { + this.s.enable = state; + }, + + /** + * Get enable status + */ + enabled: function () { + return this.s.enable; + }, + + /** + * Focus on a cell + * @param {integer} row Row index + * @param {integer} column Column index + */ + focus: function ( row, column ) + { + this._focus( this.s.dt.cell( row, column ) ); + }, + + /** + * Is the cell focused + * @param {object} cell Cell index to check + * @returns {boolean} true if focused, false otherwise + */ + focused: function ( cell ) + { + var lastFocus = this.s.lastFocus; + + if ( ! lastFocus ) { + return false; + } + + var lastIdx = this.s.lastFocus.cell.index(); + return cell.row === lastIdx.row && cell.column === lastIdx.column; + }, + + + /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Constructor + */ + + /** + * Initialise the KeyTable instance + * + * @private + */ + _constructor: function () + { + this._tabInput(); + + var that = this; + var dt = this.s.dt; + var table = $( dt.table().node() ); + var namespace = this.s.namespace; + var editorBlock = false; + + // Need to be able to calculate the cell positions relative to the table + if ( table.css('position') === 'static' ) { + table.css( 'position', 'relative' ); + } + + // Click to focus + $( dt.table().body() ).on( 'click'+namespace, 'th, td', function (e) { + if ( that.s.enable === false ) { + return; + } + + var cell = dt.cell( this ); + + if ( ! cell.any() ) { + return; + } + + that._focus( cell, null, false, e ); + } ); + + // Key events + $( document ).on( 'keydown'+namespace, function (e) { + if ( ! editorBlock ) { + that._key( e ); + } + } ); + + // Click blur + if ( this.c.blurable ) { + $( document ).on( 'mousedown'+namespace, function ( e ) { + // Click on the search input will blur focus + if ( $(e.target).parents( '.dataTables_filter' ).length ) { + that._blur(); + } + + // If the click was inside the DataTables container, don't blur + if ( $(e.target).parents().filter( dt.table().container() ).length ) { + return; + } + + // Don't blur in Editor form + if ( $(e.target).parents('div.DTE').length ) { + return; + } + + // Or an Editor date input + if ( + $(e.target).parents('div.editor-datetime').length || + $(e.target).parents('div.dt-datetime').length + ) { + return; + } + + //If the click was inside the fixed columns container, don't blur + if ( $(e.target).parents().filter('.DTFC_Cloned').length ) { + return; + } + + that._blur(); + } ); + } + + if ( this.c.editor ) { + var editor = this.c.editor; + + // Need to disable KeyTable when the main editor is shown + editor.on( 'open.keyTableMain', function (e, mode, action) { + if ( mode !== 'inline' && that.s.enable ) { + that.enable( false ); + + editor.one( 'close'+namespace, function () { + that.enable( true ); + } ); + } + } ); + + if ( this.c.editOnFocus ) { + dt.on( 'key-focus'+namespace+' key-refocus'+namespace, function ( e, dt, cell, orig ) { + that._editor( null, orig, true ); + } ); + } + + // Activate Editor when a key is pressed (will be ignored, if + // already active). + dt.on( 'key'+namespace, function ( e, dt, key, cell, orig ) { + that._editor( key, orig, false ); + } ); + + // Active editing on double click - it will already have focus from + // the click event handler above + $( dt.table().body() ).on( 'dblclick'+namespace, 'th, td', function (e) { + if ( that.s.enable === false ) { + return; + } + + var cell = dt.cell( this ); + + if ( ! cell.any() ) { + return; + } + + if ( that.s.lastFocus && this !== that.s.lastFocus.cell.node() ) { + return; + } + + that._editor( null, e, true ); + } ); + + // While Editor is busy processing, we don't want to process any key events + editor + .on('preSubmit', function () { + editorBlock = true; + } ) + .on('preSubmitCancelled', function () { + editorBlock = false; + } ) + .on('submitComplete', function () { + editorBlock = false; + } ); + } + + // Stave saving + if ( dt.settings()[0].oFeatures.bStateSave ) { + dt.on( 'stateSaveParams'+namespace, function (e, s, d) { + d.keyTable = that.s.lastFocus ? + that.s.lastFocus.cell.index() : + null; + } ); + } + + dt.on( 'column-visibility'+namespace, function (e) { + that._tabInput(); + } ); + + // Redraw - retain focus on the current cell + dt.on( 'draw'+namespace, function (e) { + that._tabInput(); + + if ( that.s.focusDraw ) { + return; + } + + var lastFocus = that.s.lastFocus; + + if ( lastFocus ) { + var relative = that.s.lastFocus.relative; + var info = dt.page.info(); + var row = relative.row + info.start; + + if ( info.recordsDisplay === 0 ) { + return; + } + + // Reverse if needed + if ( row >= info.recordsDisplay ) { + row = info.recordsDisplay - 1; + } + + that._focus( row, relative.column, true, e ); + } + } ); + + // Clipboard support + if ( this.c.clipboard ) { + this._clipboard(); + } + + dt.on( 'destroy'+namespace, function () { + that._blur( true ); + + // Event tidy up + dt.off( namespace ); + + $( dt.table().body() ) + .off( 'click'+namespace, 'th, td' ) + .off( 'dblclick'+namespace, 'th, td' ); + + $( document ) + .off( 'mousedown'+namespace ) + .off( 'keydown'+namespace ) + .off( 'copy'+namespace ) + .off( 'paste'+namespace ); + } ); + + // Initial focus comes from state or options + var state = dt.state.loaded(); + + if ( state && state.keyTable ) { + // Wait until init is done + dt.one( 'init', function () { + var cell = dt.cell( state.keyTable ); + + // Ensure that the saved cell still exists + if ( cell.any() ) { + cell.focus(); + } + } ); + } + else if ( this.c.focus ) { + dt.cell( this.c.focus ).focus(); + } + }, + + + /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Private methods + */ + + /** + * Blur the control + * + * @param {boolean} [noEvents=false] Don't trigger updates / events (for destroying) + * @private + */ + _blur: function (noEvents) + { + if ( ! this.s.enable || ! this.s.lastFocus ) { + return; + } + + var cell = this.s.lastFocus.cell; + + $( cell.node() ).removeClass( this.c.className ); + this.s.lastFocus = null; + + if ( ! noEvents ) { + this._updateFixedColumns(cell.index().column); + + this._emitEvent( 'key-blur', [ this.s.dt, cell ] ); + } + }, + + + /** + * Clipboard interaction handlers + * + * @private + */ + _clipboard: function () { + var dt = this.s.dt; + var that = this; + var namespace = this.s.namespace; + + // IE8 doesn't support getting selected text + if ( ! window.getSelection ) { + return; + } + + $(document).on( 'copy'+namespace, function (ejq) { + var e = ejq.originalEvent; + var selection = window.getSelection().toString(); + var focused = that.s.lastFocus; + + // Only copy cell text to clipboard if there is no other selection + // and there is a focused cell + if ( ! selection && focused ) { + e.clipboardData.setData( + 'text/plain', + focused.cell.render( that.c.clipboardOrthogonal ) + ); + e.preventDefault(); + } + } ); + + $(document).on( 'paste'+namespace, function (ejq) { + var e = ejq.originalEvent; + var focused = that.s.lastFocus; + var activeEl = document.activeElement; + var editor = that.c.editor; + var pastedText; + + if ( focused && (! activeEl || activeEl.nodeName.toLowerCase() === 'body') ) { + e.preventDefault(); + + if ( window.clipboardData && window.clipboardData.getData ) { + // IE + pastedText = window.clipboardData.getData('Text'); + } + else if ( e.clipboardData && e.clipboardData.getData ) { + // Everything else + pastedText = e.clipboardData.getData('text/plain'); + } + + if ( editor ) { + // Got Editor - need to activate inline editing, + // set the value and submit + var options = that._inlineOptions(focused.cell.index()); + + editor + .inline(options.cell, options.field, options.options) + .set( editor.displayed()[0], pastedText ) + .submit(); + } + else { + // No editor, so just dump the data in + focused.cell.data( pastedText ); + dt.draw(false); + } + } + } ); + }, + + + /** + * Get an array of the column indexes that KeyTable can operate on. This + * is a merge of the user supplied columns and the visible columns. + * + * @private + */ + _columns: function () + { + var dt = this.s.dt; + var user = dt.columns( this.c.columns ).indexes(); + var out = []; + + dt.columns( ':visible' ).every( function (i) { + if ( user.indexOf( i ) !== -1 ) { + out.push( i ); + } + } ); + + return out; + }, + + + /** + * Perform excel like navigation for Editor by triggering an edit on key + * press + * + * @param {integer} key Key code for the pressed key + * @param {object} orig Original event + * @private + */ + _editor: function ( key, orig, hardEdit ) + { + // If nothing focused, we can't take any action + if (! this.s.lastFocus) { + return; + } + + // DataTables draw event + if (orig && orig.type === 'draw') { + return; + } + + var that = this; + var dt = this.s.dt; + var editor = this.c.editor; + var editCell = this.s.lastFocus.cell; + var namespace = this.s.namespace + 'e' + editorNamespaceCounter++; + + // Do nothing if there is already an inline edit in this cell + if ( $('div.DTE', editCell.node()).length ) { + return; + } + + // Don't activate Editor on control key presses + if ( key !== null && ( + (key >= 0x00 && key <= 0x09) || + key === 0x0b || + key === 0x0c || + (key >= 0x0e && key <= 0x1f) || + (key >= 0x70 && key <= 0x7b) || + (key >= 0x7f && key <= 0x9f) + ) ) { + return; + } + + if ( orig ) { + orig.stopPropagation(); + + // Return key should do nothing - for textareas it would empty the + // contents + if ( key === 13 ) { + orig.preventDefault(); + } + } + + var editInline = function () { + var options = that._inlineOptions(editCell.index()); + + editor + .one( 'open'+namespace, function () { + // Remove cancel open + editor.off( 'cancelOpen'+namespace ); + + // Excel style - select all text + if ( ! hardEdit ) { + $('div.DTE_Field_InputControl input, div.DTE_Field_InputControl textarea').select(); + } + + // Reduce the keys the Keys listens for + dt.keys.enable( hardEdit ? 'tab-only' : 'navigation-only' ); + + // On blur of the navigation submit + dt.on( 'key-blur.editor', function (e, dt, cell) { + if ( editor.displayed() && cell.node() === editCell.node() ) { + editor.submit(); + } + } ); + + // Highlight the cell a different colour on full edit + if ( hardEdit ) { + $( dt.table().container() ).addClass('dtk-focus-alt'); + } + + // If the dev cancels the submit, we need to return focus + editor.on( 'preSubmitCancelled'+namespace, function () { + setTimeout( function () { + that._focus( editCell, null, false ); + }, 50 ); + } ); + + editor.on( 'submitUnsuccessful'+namespace, function () { + that._focus( editCell, null, false ); + } ); + + // Restore full key navigation on close + editor.one( 'close'+namespace, function () { + dt.keys.enable( true ); + dt.off( 'key-blur.editor' ); + editor.off( namespace ); + $( dt.table().container() ).removeClass('dtk-focus-alt'); + + if (that.s.returnSubmit) { + that.s.returnSubmit = false; + that._emitEvent( 'key-return-submit', [dt, editCell] ); + } + } ); + } ) + .one( 'cancelOpen'+namespace, function () { + // `preOpen` can cancel the display of the form, so it + // might be that the open event handler isn't needed + editor.off( namespace ); + } ) + .inline(options.cell, options.field, options.options); + }; + + // Editor 1.7 listens for `return` on keyup, so if return is the trigger + // key, we need to wait for `keyup` otherwise Editor would just submit + // the content triggered by this keypress. + if ( key === 13 ) { + hardEdit = true; + + $(document).one( 'keyup', function () { // immediately removed + editInline(); + } ); + } + else { + editInline(); + } + }, + + + _inlineOptions: function (cellIdx) + { + if (this.c.editorOptions) { + return this.c.editorOptions(cellIdx); + } + + return { + cell: cellIdx, + field: undefined, + options: undefined + }; + }, + + + /** + * Emit an event on the DataTable for listeners + * + * @param {string} name Event name + * @param {array} args Event arguments + * @private + */ + _emitEvent: function ( name, args ) + { + this.s.dt.iterator( 'table', function ( ctx, i ) { + $(ctx.nTable).triggerHandler( name, args ); + } ); + }, + + + /** + * Focus on a particular cell, shifting the table's paging if required + * + * @param {DataTables.Api|integer} row Can be given as an API instance that + * contains the cell to focus or as an integer. As the latter it is the + * visible row index (from the whole data set) - NOT the data index + * @param {integer} [column] Not required if a cell is given as the first + * parameter. Otherwise this is the column data index for the cell to + * focus on + * @param {boolean} [shift=true] Should the viewport be moved to show cell + * @private + */ + _focus: function ( row, column, shift, originalEvent ) + { + var that = this; + var dt = this.s.dt; + var pageInfo = dt.page.info(); + var lastFocus = this.s.lastFocus; + + if ( ! originalEvent) { + originalEvent = null; + } + + if ( ! this.s.enable ) { + return; + } + + if ( typeof row !== 'number' ) { + // Its an API instance - check that there is actually a row + if ( ! row.any() ) { + return; + } + + // Convert the cell to a row and column + var index = row.index(); + column = index.column; + row = dt + .rows( { filter: 'applied', order: 'applied' } ) + .indexes() + .indexOf( index.row ); + + // Don't focus rows that were filtered out. + if ( row < 0 ) { + return; + } + + // For server-side processing normalise the row by adding the start + // point, since `rows().indexes()` includes only rows that are + // available at the client-side + if ( pageInfo.serverSide ) { + row += pageInfo.start; + } + } + + // Is the row on the current page? If not, we need to redraw to show the + // page + if ( pageInfo.length !== -1 && (row < pageInfo.start || row >= pageInfo.start+pageInfo.length) ) { + this.s.focusDraw = true; + this.s.waitingForDraw = true; + + dt + .one( 'draw', function () { + that.s.focusDraw = false; + that.s.waitingForDraw = false; + that._focus( row, column, undefined, originalEvent ); + } ) + .page( Math.floor( row / pageInfo.length ) ) + .draw( false ); + + return; + } + + // In the available columns? + if ( $.inArray( column, this._columns() ) === -1 ) { + return; + } + + // De-normalise the server-side processing row, so we select the row + // in its displayed position + if ( pageInfo.serverSide ) { + row -= pageInfo.start; + } + + // Get the cell from the current position - ignoring any cells which might + // not have been rendered (therefore can't use `:eq()` selector). + var cells = dt.cells( null, column, {search: 'applied', order: 'applied'} ).flatten(); + var cell = dt.cell( cells[ row ] ); + + if ( lastFocus ) { + // Don't trigger a refocus on the same cell + if ( lastFocus.node === cell.node() ) { + this._emitEvent( 'key-refocus', [ this.s.dt, cell, originalEvent || null ] ); + return; + } + + // Otherwise blur the old focus + this._blur(); + } + + // Clear focus from other tables + this._removeOtherFocus(); + + var node = $( cell.node() ); + node.addClass( this.c.className ); + + this._updateFixedColumns(column); + + // Shift viewpoint and page to make cell visible + if ( shift === undefined || shift === true ) { + this._scroll( $(window), $(document.body), node, 'offset' ); + + var bodyParent = dt.table().body().parentNode; + if ( bodyParent !== dt.table().header().parentNode ) { + var parent = $(bodyParent.parentNode); + + this._scroll( parent, parent, node, 'position' ); + } + } + + // Event and finish + this.s.lastFocus = { + cell: cell, + node: cell.node(), + relative: { + row: dt.rows( { page: 'current' } ).indexes().indexOf( cell.index().row ), + column: cell.index().column + } + }; + + this._emitEvent( 'key-focus', [ this.s.dt, cell, originalEvent || null ] ); + dt.state.save(); + }, + + + /** + * Handle key press + * + * @param {object} e Event + * @private + */ + _key: function ( e ) + { + // If we are waiting for a draw to happen from another key event, then + // do nothing for this new key press. + if ( this.s.waitingForDraw ) { + e.preventDefault(); + return; + } + + var enable = this.s.enable; + this.s.returnSubmit = (enable === 'navigation-only' || enable === 'tab-only') && e.keyCode === 13 + ? true + : false; + + var navEnable = enable === true || enable === 'navigation-only'; + if ( ! enable ) { + return; + } + + if ( (e.keyCode === 0 || e.ctrlKey || e.metaKey || e.altKey) && !(e.ctrlKey && e.altKey) ) { + return; + } + + // If not focused, then there is no key action to take + var lastFocus = this.s.lastFocus; + if ( ! lastFocus ) { + return; + } + + // And the last focus still exists! + if ( ! this.s.dt.cell(lastFocus.node).any() ) { + this.s.lastFocus = null; + return; + } + + var that = this; + var dt = this.s.dt; + var scrolling = this.s.dt.settings()[0].oScroll.sY ? true : false; + + // If we are not listening for this key, do nothing + if ( this.c.keys && $.inArray( e.keyCode, this.c.keys ) === -1 ) { + return; + } + + switch( e.keyCode ) { + case 9: // tab + // `enable` can be tab-only + this._shift( e, e.shiftKey ? 'left' : 'right', true ); + break; + + case 27: // esc + if ( this.c.blurable && enable === true ) { + this._blur(); + } + break; + + case 33: // page up (previous page) + case 34: // page down (next page) + if ( navEnable && !scrolling ) { + e.preventDefault(); + + dt + .page( e.keyCode === 33 ? 'previous' : 'next' ) + .draw( false ); + } + break; + + case 35: // end (end of current page) + case 36: // home (start of current page) + if ( navEnable ) { + e.preventDefault(); + var indexes = dt.cells( {page: 'current'} ).indexes(); + var colIndexes = this._columns(); + + this._focus( dt.cell( + indexes[ e.keyCode === 35 ? indexes.length-1 : colIndexes[0] ] + ), null, true, e ); + } + break; + + case 37: // left arrow + if ( navEnable ) { + this._shift( e, 'left' ); + } + break; + + case 38: // up arrow + if ( navEnable ) { + this._shift( e, 'up' ); + } + break; + + case 39: // right arrow + if ( navEnable ) { + this._shift( e, 'right' ); + } + break; + + case 40: // down arrow + if ( navEnable ) { + this._shift( e, 'down' ); + } + break; + + case 113: // F2 - Excel like hard edit + if ( this.c.editor ) { + this._editor(null, e, true); + break; + } + // else fallthrough + + default: + // Everything else - pass through only when fully enabled + if ( enable === true ) { + this._emitEvent( 'key', [ dt, e.keyCode, this.s.lastFocus.cell, e ] ); + } + break; + } + }, + + /** + * Remove focus from all tables other than this one + */ + _removeOtherFocus: function () + { + var thisTable = this.s.dt.table().node(); + + $.fn.dataTable.tables({api:true}).iterator('table', function (settings) { + if (this.table().node() !== thisTable) { + this.cell.blur(); + } + }); + }, + + /** + * Scroll a container to make a cell visible in it. This can be used for + * both DataTables scrolling and native window scrolling. + * + * @param {jQuery} container Scrolling container + * @param {jQuery} scroller Item being scrolled + * @param {jQuery} cell Cell in the scroller + * @param {string} posOff `position` or `offset` - which to use for the + * calculation. `offset` for the document, otherwise `position` + * @private + */ + _scroll: function ( container, scroller, cell, posOff ) + { + var offset = cell[posOff](); + var height = cell.outerHeight(); + var width = cell.outerWidth(); + + var scrollTop = scroller.scrollTop(); + var scrollLeft = scroller.scrollLeft(); + var containerHeight = container.height(); + var containerWidth = container.width(); + + // If Scroller is being used, the table can be `position: absolute` and that + // needs to be taken account of in the offset. If no Scroller, this will be 0 + if ( posOff === 'position' ) { + offset.top += parseInt( cell.closest('table').css('top'), 10 ); + } + + // Top correction + if ( offset.top < scrollTop ) { + scroller.scrollTop( offset.top ); + } + + // Left correction + if ( offset.left < scrollLeft ) { + scroller.scrollLeft( offset.left ); + } + + // Bottom correction + if ( offset.top + height > scrollTop + containerHeight && height < containerHeight ) { + scroller.scrollTop( offset.top + height - containerHeight ); + } + + // Right correction + if ( offset.left + width > scrollLeft + containerWidth && width < containerWidth ) { + scroller.scrollLeft( offset.left + width - containerWidth ); + } + }, + + + /** + * Calculate a single offset movement in the table - up, down, left and + * right and then perform the focus if possible + * + * @param {object} e Event object + * @param {string} direction Movement direction + * @param {boolean} keyBlurable `true` if the key press can result in the + * table being blurred. This is so arrow keys won't blur the table, but + * tab will. + * @private + */ + _shift: function ( e, direction, keyBlurable ) + { + var that = this; + var dt = this.s.dt; + var pageInfo = dt.page.info(); + var rows = pageInfo.recordsDisplay; + var columns = this._columns(); + var last = this.s.lastFocus; + if ( ! last ) { + return; + } + + var currentCell = last.cell; + if ( ! currentCell ) { + return; + } + + var currRow = dt + .rows( { filter: 'applied', order: 'applied' } ) + .indexes() + .indexOf( currentCell.index().row ); + + // When server-side processing, `rows().indexes()` only gives the rows + // that are available at the client-side, so we need to normalise the + // row's current position by the display start point + if ( pageInfo.serverSide ) { + currRow += pageInfo.start; + } + + var currCol = dt + .columns( columns ) + .indexes() + .indexOf( currentCell.index().column ); + + var + row = currRow, + column = columns[ currCol ]; // row is the display, column is an index + + // If the direction is rtl then the logic needs to be inverted from this point forwards + if($(dt.table().node()).css('direction') === 'rtl') { + if(direction === 'right') { + direction = 'left'; + } + else if(direction === 'left'){ + direction = 'right'; + } + } + + if ( direction === 'right' ) { + if ( currCol >= columns.length - 1 ) { + row++; + column = columns[0]; + } + else { + column = columns[ currCol+1 ]; + } + } + else if ( direction === 'left' ) { + if ( currCol === 0 ) { + row--; + column = columns[ columns.length - 1 ]; + } + else { + column = columns[ currCol-1 ]; + } + } + else if ( direction === 'up' ) { + row--; + } + else if ( direction === 'down' ) { + row++; + } + + if ( row >= 0 && row < rows && $.inArray( column, columns ) !== -1 ) { + if (e) { + e.preventDefault(); + } + + this._focus( row, column, true, e ); + } + else if ( ! keyBlurable || ! this.c.blurable ) { + // No new focus, but if the table isn't blurable, then don't loose + // focus + if (e) { + e.preventDefault(); + } + } + else { + this._blur(); + } + }, + + + /** + * Create and insert a hidden input element that can receive focus on behalf + * of the table + * + * @private + */ + _tabInput: function () + { + var that = this; + var dt = this.s.dt; + var tabIndex = this.c.tabIndex !== null ? + this.c.tabIndex : + dt.settings()[0].iTabIndex; + + if ( tabIndex == -1 ) { + return; + } + + // Only create the input element once on first class + if (! this.s.tabInput) { + var div = $('
') + .css( { + position: 'absolute', + height: 1, + width: 0, + overflow: 'hidden' + } ); + + div.children().on( 'focus', function (e) { + var cell = dt.cell(':eq(0)', that._columns(), {page: 'current'}); + + if ( cell.any() ) { + that._focus( cell, null, true, e ); + } + } ); + + this.s.tabInput = div; + } + + // Insert the input element into the first cell in the table's body + var cell = this.s.dt.cell(':eq(0)', '0:visible', {page: 'current', order: 'current'}).node(); + if (cell) { + $(cell).prepend(this.s.tabInput); + } + }, + + /** + * Update fixed columns if they are enabled and if the cell we are + * focusing is inside a fixed column + * @param {integer} column Index of the column being changed + * @private + */ + _updateFixedColumns: function( column ) + { + var dt = this.s.dt; + var settings = dt.settings()[0]; + + if ( settings._oFixedColumns ) { + var leftCols = settings._oFixedColumns.s.iLeftColumns; + var rightCols = settings.aoColumns.length - settings._oFixedColumns.s.iRightColumns; + + if (column < leftCols || column >= rightCols) { + dt.fixedColumns().update(); + } + } + } +} ); + + +/** + * KeyTable default settings for initialisation + * + * @namespace + * @name KeyTable.defaults + * @static + */ +KeyTable.defaults = { + /** + * Can focus be removed from the table + * @type {Boolean} + */ + blurable: true, + + /** + * Class to give to the focused cell + * @type {String} + */ + className: 'focus', + + /** + * Enable or disable clipboard support + * @type {Boolean} + */ + clipboard: true, + + /** + * Orthogonal data that should be copied to clipboard + * @type {string} + */ + clipboardOrthogonal: 'display', + + /** + * Columns that can be focused. This is automatically merged with the + * visible columns as only visible columns can gain focus. + * @type {String} + */ + columns: '', // all + + /** + * Editor instance to automatically perform Excel like navigation + * @type {Editor} + */ + editor: null, + + /** + * Trigger editing immediately on focus + * @type {boolean} + */ + editOnFocus: false, + + /** + * Options to pass to Editor's inline method + * @type {function} + */ + editorOptions: null, + + /** + * Select a cell to automatically select on start up. `null` for no + * automatic selection + * @type {cell-selector} + */ + focus: null, + + /** + * Array of keys to listen for + * @type {null|array} + */ + keys: null, + + /** + * Tab index for where the table should sit in the document's tab flow + * @type {integer|null} + */ + tabIndex: null +}; + + + +KeyTable.version = "2.6.4"; + + +$.fn.dataTable.KeyTable = KeyTable; +$.fn.DataTable.KeyTable = KeyTable; + + +DataTable.Api.register( 'cell.blur()', function () { + return this.iterator( 'table', function (ctx) { + if ( ctx.keytable ) { + ctx.keytable.blur(); + } + } ); +} ); + +DataTable.Api.register( 'cell().focus()', function () { + return this.iterator( 'cell', function (ctx, row, column) { + if ( ctx.keytable ) { + ctx.keytable.focus( row, column ); + } + } ); +} ); + +DataTable.Api.register( 'keys.disable()', function () { + return this.iterator( 'table', function (ctx) { + if ( ctx.keytable ) { + ctx.keytable.enable( false ); + } + } ); +} ); + +DataTable.Api.register( 'keys.enable()', function ( opts ) { + return this.iterator( 'table', function (ctx) { + if ( ctx.keytable ) { + ctx.keytable.enable( opts === undefined ? true : opts ); + } + } ); +} ); + +DataTable.Api.register( 'keys.enabled()', function ( opts ) { + var ctx = this.context; + + if (ctx.length) { + return ctx[0].keytable + ? ctx[0].keytable.enabled() + : false; + } + + return false; +} ); + +DataTable.Api.register( 'keys.move()', function ( dir ) { + return this.iterator( 'table', function (ctx) { + if ( ctx.keytable ) { + ctx.keytable._shift( null, dir, false ); + } + } ); +} ); + +// Cell selector +DataTable.ext.selector.cell.push( function ( settings, opts, cells ) { + var focused = opts.focused; + var kt = settings.keytable; + var out = []; + + if ( ! kt || focused === undefined ) { + return cells; + } + + for ( var i=0, ien=cells.length ; i=r.recordsDisplay&&(v=r.recordsDisplay-1),a._focus(v,q.column,!0,g))}});this.c.clipboard&&this._clipboard();b.on("destroy"+d,function(){a._blur(!0);b.off(d);c(b.table().body()).off("click"+d,"th, td").off("dblclick"+d,"th, td");c(k).off("mousedown"+d).off("keydown"+d).off("copy"+d).off("paste"+d)});var l=b.state.loaded();if(l&&l.keyTable)b.one("init",function(){var g=b.cell(l.keyTable); +g.any()&&g.focus()});else this.c.focus&&b.cell(this.c.focus).focus()},_blur:function(a){if(this.s.enable&&this.s.lastFocus){var b=this.s.lastFocus.cell;c(b.node()).removeClass(this.c.className);this.s.lastFocus=null;a||(this._updateFixedColumns(b.index().column),this._emitEvent("key-blur",[this.s.dt,b]))}},_clipboard:function(){var a=this.s.dt,b=this,e=this.s.namespace;h.getSelection&&(c(k).on("copy"+e,function(d){d=d.originalEvent;var f=h.getSelection().toString(),p=b.s.lastFocus;!f&&p&&(d.clipboardData.setData("text/plain", +p.cell.render(b.c.clipboardOrthogonal)),d.preventDefault())}),c(k).on("paste"+e,function(d){var f=d.originalEvent,p=b.s.lastFocus,l=k.activeElement;d=b.c.editor;var g;!p||l&&"body"!==l.nodeName.toLowerCase()||(f.preventDefault(),h.clipboardData&&h.clipboardData.getData?g=h.clipboardData.getData("Text"):f.clipboardData&&f.clipboardData.getData&&(g=f.clipboardData.getData("text/plain")),d?(f=b._inlineOptions(p.cell.index()),d.inline(f.cell,f.field,f.options).set(d.displayed()[0],g).submit()):(p.cell.data(g), +a.draw(!1)))}))},_columns:function(){var a=this.s.dt,b=a.columns(this.c.columns).indexes(),e=[];a.columns(":visible").every(function(d){-1!==b.indexOf(d)&&e.push(d)});return e},_editor:function(a,b,e){if(this.s.lastFocus&&(!b||"draw"!==b.type)){var d=this,f=this.s.dt,p=this.c.editor,l=this.s.lastFocus.cell,g=this.s.namespace+"e"+w++;if(!(c("div.DTE",l.node()).length||null!==a&&(0<=a&&9>=a||11===a||12===a||14<=a&&31>=a||112<=a&&123>=a||127<=a&&159>=a))){b&&(b.stopPropagation(),13===a&&b.preventDefault()); +var q=function(){var r=d._inlineOptions(l.index());p.one("open"+g,function(){p.off("cancelOpen"+g);e||c("div.DTE_Field_InputControl input, div.DTE_Field_InputControl textarea").select();f.keys.enable(e?"tab-only":"navigation-only");f.on("key-blur.editor",function(v,x,y){p.displayed()&&y.node()===l.node()&&p.submit()});e&&c(f.table().container()).addClass("dtk-focus-alt");p.on("preSubmitCancelled"+g,function(){setTimeout(function(){d._focus(l,null,!1)},50)});p.on("submitUnsuccessful"+g,function(){d._focus(l, +null,!1)});p.one("close"+g,function(){f.keys.enable(!0);f.off("key-blur.editor");p.off(g);c(f.table().container()).removeClass("dtk-focus-alt");d.s.returnSubmit&&(d.s.returnSubmit=!1,d._emitEvent("key-return-submit",[f,l]))})}).one("cancelOpen"+g,function(){p.off(g)}).inline(r.cell,r.field,r.options)};13===a?(e=!0,c(k).one("keyup",function(){q()})):q()}}},_inlineOptions:function(a){return this.c.editorOptions?this.c.editorOptions(a):{cell:a,field:m,options:m}},_emitEvent:function(a,b){this.s.dt.iterator("table", +function(e,d){c(e.nTable).triggerHandler(a,b)})},_focus:function(a,b,e,d){var f=this,p=this.s.dt,l=p.page.info(),g=this.s.lastFocus;d||(d=null);if(this.s.enable){if("number"!==typeof a){if(!a.any())return;var q=a.index();b=q.column;a=p.rows({filter:"applied",order:"applied"}).indexes().indexOf(q.row);if(0>a)return;l.serverSide&&(a+=l.start)}if(-1!==l.length&&(a=l.start+l.length))this.s.focusDraw=!0,this.s.waitingForDraw=!0,p.one("draw",function(){f.s.focusDraw=!1;f.s.waitingForDraw=!1; +f._focus(a,b,m,d)}).page(Math.floor(a/l.length)).draw(!1);else if(-1!==c.inArray(b,this._columns())){l.serverSide&&(a-=l.start);l=p.cells(null,b,{search:"applied",order:"applied"}).flatten();l=p.cell(l[a]);if(g){if(g.node===l.node()){this._emitEvent("key-refocus",[this.s.dt,l,d||null]);return}this._blur()}this._removeOtherFocus();g=c(l.node());g.addClass(this.c.className);this._updateFixedColumns(b);if(e===m||!0===e)this._scroll(c(h),c(k.body),g,"offset"),e=p.table().body().parentNode,e!==p.table().header().parentNode&& +(e=c(e.parentNode),this._scroll(e,e,g,"position"));this.s.lastFocus={cell:l,node:l.node(),relative:{row:p.rows({page:"current"}).indexes().indexOf(l.index().row),column:l.index().column}};this._emitEvent("key-focus",[this.s.dt,l,d||null]);p.state.save()}}},_key:function(a){if(this.s.waitingForDraw)a.preventDefault();else{var b=this.s.enable;this.s.returnSubmit="navigation-only"!==b&&"tab-only"!==b||13!==a.keyCode?!1:!0;var e=!0===b||"navigation-only"===b;if(b&&(!(0===a.keyCode||a.ctrlKey||a.metaKey|| +a.altKey)||a.ctrlKey&&a.altKey)){var d=this.s.lastFocus;if(d)if(this.s.dt.cell(d.node).any()){d=this.s.dt;var f=this.s.dt.settings()[0].oScroll.sY?!0:!1;if(!this.c.keys||-1!==c.inArray(a.keyCode,this.c.keys))switch(a.keyCode){case 9:this._shift(a,a.shiftKey?"left":"right",!0);break;case 27:this.c.blurable&&!0===b&&this._blur();break;case 33:case 34:e&&!f&&(a.preventDefault(),d.page(33===a.keyCode?"previous":"next").draw(!1));break;case 35:case 36:e&&(a.preventDefault(),b=d.cells({page:"current"}).indexes(), +e=this._columns(),this._focus(d.cell(b[35===a.keyCode?b.length-1:e[0]]),null,!0,a));break;case 37:e&&this._shift(a,"left");break;case 38:e&&this._shift(a,"up");break;case 39:e&&this._shift(a,"right");break;case 40:e&&this._shift(a,"down");break;case 113:if(this.c.editor){this._editor(null,a,!0);break}default:!0===b&&this._emitEvent("key",[d,a.keyCode,this.s.lastFocus.cell,a])}}else this.s.lastFocus=null}}},_removeOtherFocus:function(){var a=this.s.dt.table().node();c.fn.dataTable.tables({api:!0}).iterator("table", +function(b){this.table().node()!==a&&this.cell.blur()})},_scroll:function(a,b,e,d){var f=e[d](),p=e.outerHeight(),l=e.outerWidth(),g=b.scrollTop(),q=b.scrollLeft(),r=a.height();a=a.width();"position"===d&&(f.top+=parseInt(e.closest("table").css("top"),10));f.topg+r&&pq+a&&l=l.length-1?(g++,q=l[0]):q=l[f+1]:"left"===b?0===f?(g--,q=l[l.length-1]):q=l[f-1]:"up"===b?g--:"down"===b&&g++,0<=g&&g').css({position:"absolute",height:1,width:0,overflow:"hidden"}),e.children().on("focus",function(d){var f=b.cell(":eq(0)",a._columns(),{page:"current"});f.any()&&a._focus(f,null,!0,d)}),this.s.tabInput=e),(e=this.s.dt.cell(":eq(0)","0:visible",{page:"current",order:"current"}).node())&& +c(e).prepend(this.s.tabInput))},_updateFixedColumns:function(a){var b=this.s.dt,e=b.settings()[0];if(e._oFixedColumns){var d=e.aoColumns.length-e._oFixedColumns.s.iRightColumns;(a=d)&&b.fixedColumns().update()}}});t.defaults={blurable:!0,className:"focus",clipboard:!0,clipboardOrthogonal:"display",columns:"",editor:null,editOnFocus:!1,editorOptions:null,focus:null,keys:null,tabIndex:null};t.version="2.6.4";c.fn.dataTable.KeyTable=t;c.fn.DataTable.KeyTable=t;n.Api.register("cell.blur()", +function(){return this.iterator("table",function(a){a.keytable&&a.keytable.blur()})});n.Api.register("cell().focus()",function(){return this.iterator("cell",function(a,b,e){a.keytable&&a.keytable.focus(b,e)})});n.Api.register("keys.disable()",function(){return this.iterator("table",function(a){a.keytable&&a.keytable.enable(!1)})});n.Api.register("keys.enable()",function(a){return this.iterator("table",function(b){b.keytable&&b.keytable.enable(a===m?!0:a)})});n.Api.register("keys.enabled()",function(a){a= +this.context;return a.length?a[0].keytable?a[0].keytable.enabled():!1:!1});n.Api.register("keys.move()",function(a){return this.iterator("table",function(b){b.keytable&&b.keytable._shift(null,a,!1)})});n.ext.selector.cell.push(function(a,b,e){b=b.focused;a=a.keytable;var d=[];if(!a||b===m)return e;for(var f=0,p=e.length;f