init commit2
This commit is contained in:
zino
952
website/DataTables/extensions/KeyTable/js/dataTables.keyTable.js
Normal file
952
website/DataTables/extensions/KeyTable/js/dataTables.keyTable.js
Normal file
@@ -0,0 +1,952 @@
|
||||
/*! KeyTable 2.2.0
|
||||
* ©2009-2016 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
/**
|
||||
* @summary KeyTable
|
||||
* @description Spreadsheet like keyboard navigation for DataTables
|
||||
* @version 2.2.0
|
||||
* @file dataTables.keyTable.js
|
||||
* @author SpryMedia Ltd (www.sprymedia.co.uk)
|
||||
* @contact www.sprymedia.co.uk/contact
|
||||
* @copyright Copyright 2009-2016 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 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
|
||||
};
|
||||
|
||||
// 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;
|
||||
},
|
||||
|
||||
/**
|
||||
* 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() );
|
||||
|
||||
// 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.keyTable', '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.keyTable', function (e) {
|
||||
that._key( e );
|
||||
} );
|
||||
|
||||
// Click blur
|
||||
if ( this.c.blurable ) {
|
||||
$( document ).on( 'mousedown.keyTable', 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;
|
||||
}
|
||||
|
||||
//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 ) {
|
||||
dt.on( 'key.keyTable', function ( e, dt, key, cell, orig ) {
|
||||
that._editor( key, orig );
|
||||
} );
|
||||
}
|
||||
|
||||
// Stave saving
|
||||
if ( dt.settings()[0].oFeatures.bStateSave ) {
|
||||
dt.on( 'stateSaveParams.keyTable', function (e, s, d) {
|
||||
d.keyTable = that.s.lastFocus ?
|
||||
that.s.lastFocus.cell.index() :
|
||||
null;
|
||||
} );
|
||||
}
|
||||
|
||||
// Redraw - retain focus on the current cell
|
||||
dt.on( 'draw.keyTable', function (e) {
|
||||
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;
|
||||
|
||||
// Reverse if needed
|
||||
if ( row >= info.recordsDisplay ) {
|
||||
row = info.recordsDisplay - 1;
|
||||
}
|
||||
|
||||
that._focus( row, relative.column, true, e );
|
||||
}
|
||||
} );
|
||||
|
||||
dt.on( 'destroy.keyTable', function () {
|
||||
dt.off( '.keyTable' );
|
||||
$( dt.table().body() ).off( 'click.keyTable', 'th, td' );
|
||||
$( document.body )
|
||||
.off( 'keydown.keyTable' )
|
||||
.off( 'click.keyTable' );
|
||||
} );
|
||||
|
||||
// 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
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_blur: function ()
|
||||
{
|
||||
if ( ! this.s.enable || ! this.s.lastFocus ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var cell = this.s.lastFocus.cell;
|
||||
|
||||
$( cell.node() ).removeClass( this.c.className );
|
||||
this.s.lastFocus = null;
|
||||
|
||||
this._updateFixedColumns(cell.index().column);
|
||||
|
||||
this._emitEvent( 'key-blur', [ this.s.dt, cell ] );
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 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 )
|
||||
{
|
||||
var dt = this.s.dt;
|
||||
var editor = this.c.editor;
|
||||
|
||||
// Don't activate inline editing when the shift key is pressed
|
||||
if ( key === 16 ) {
|
||||
return;
|
||||
}
|
||||
|
||||
orig.stopPropagation();
|
||||
|
||||
// Return key should do nothing - for textareas's it would empty the
|
||||
// contents
|
||||
if ( key === 13 ) {
|
||||
orig.preventDefault();
|
||||
}
|
||||
|
||||
editor.inline( this.s.lastFocus.cell.index() );
|
||||
|
||||
// Excel style - select all text
|
||||
$('div.DTE input, div.DTE textarea').select();
|
||||
|
||||
// Reduce the keys the Keys listens for
|
||||
dt.keys.enable( this.c.editorKeys );
|
||||
|
||||
// On blur of the navigation submit
|
||||
dt.one( 'key-blur.editor', function () {
|
||||
if ( editor.displayed() ) {
|
||||
editor.submit();
|
||||
}
|
||||
} );
|
||||
|
||||
// Restore full key navigation on close
|
||||
editor.one( 'close', function () {
|
||||
dt.keys.enable( true );
|
||||
dt.off( 'key-blur.editor' );
|
||||
} );
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 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' ) {
|
||||
// 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 );
|
||||
|
||||
// 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 );
|
||||
} )
|
||||
.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;
|
||||
}
|
||||
|
||||
var cell = dt.cell( ':eq('+row+')', column, {search: 'applied'} );
|
||||
|
||||
if ( lastFocus ) {
|
||||
// Don't trigger a refocus on the same cell
|
||||
if ( lastFocus.node === cell.node() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Otherwise blur the old focus
|
||||
this._blur();
|
||||
}
|
||||
|
||||
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;
|
||||
var navEnable = enable === true || enable === 'navigation-only';
|
||||
if ( ! enable ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( e.keyCode === 0 || e.ctrlKey || e.metaKey || e.altKey ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If not focused, then there is no key action to take
|
||||
var lastFocus = this.s.lastFocus;
|
||||
if ( ! lastFocus ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var that = this;
|
||||
var dt = this.s.dt;
|
||||
|
||||
// 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.s.blurable && enable === true ) {
|
||||
this._blur();
|
||||
}
|
||||
break;
|
||||
|
||||
case 33: // page up (previous page)
|
||||
case 34: // page down (next page)
|
||||
if ( navEnable ) {
|
||||
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;
|
||||
|
||||
default:
|
||||
// Everything else - pass through only when fully enabled
|
||||
if ( enable === true ) {
|
||||
this._emitEvent( 'key', [ dt, e.keyCode, this.s.lastFocus.cell, e ] );
|
||||
}
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 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();
|
||||
|
||||
// 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 currentCell = this.s.lastFocus.cell;
|
||||
var columns = this._columns();
|
||||
|
||||
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 ( 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
|
||||
) {
|
||||
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
|
||||
e.preventDefault();
|
||||
}
|
||||
else {
|
||||
this._blur();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Create 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;
|
||||
}
|
||||
|
||||
var div = $('<div><input type="text" tabindex="'+tabIndex+'"/></div>')
|
||||
.css( {
|
||||
position: 'absolute',
|
||||
height: 1,
|
||||
width: 0,
|
||||
overflow: 'hidden'
|
||||
} )
|
||||
.insertBefore( dt.table().node() );
|
||||
|
||||
div.children().on( 'focus', function (e) {
|
||||
that._focus( dt.cell(':eq(0)', '0:visible', {page: 'current'}), null, true, e );
|
||||
} );
|
||||
},
|
||||
/**
|
||||
* 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',
|
||||
|
||||
/**
|
||||
* 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,
|
||||
|
||||
/**
|
||||
* Option that defines what KeyTable's behaviour will be when used with
|
||||
* Editor's inline editing. Can be `navigation-only` or `tab-only`.
|
||||
* @type {String}
|
||||
*/
|
||||
editorKeys: 'navigation-only',
|
||||
|
||||
/**
|
||||
* 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.2.0";
|
||||
|
||||
|
||||
$.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 );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
// 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<ien ; i++ ) {
|
||||
if ( (focused === true && kt.focused( cells[i] ) ) ||
|
||||
(focused === false && ! kt.focused( cells[i] ) )
|
||||
) {
|
||||
out.push( cells[i] );
|
||||
}
|
||||
}
|
||||
|
||||
return out;
|
||||
} );
|
||||
|
||||
|
||||
// Attach a listener to the document which listens for DataTables initialisation
|
||||
// events so we can automatically initialise
|
||||
$(document).on( 'preInit.dt.dtk', function (e, settings, json) {
|
||||
if ( e.namespace !== 'dt' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var init = settings.oInit.keys;
|
||||
var defaults = DataTable.defaults.keys;
|
||||
|
||||
if ( init || defaults ) {
|
||||
var opts = $.extend( {}, defaults, init );
|
||||
|
||||
if ( init !== false ) {
|
||||
new KeyTable( settings, opts );
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
return KeyTable;
|
||||
}));
|
||||
19
website/DataTables/extensions/KeyTable/js/dataTables.keyTable.min.js
vendored
Normal file
19
website/DataTables/extensions/KeyTable/js/dataTables.keyTable.min.js
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
/*!
|
||||
KeyTable 2.2.0
|
||||
©2009-2016 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
(function(e){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(m){return e(m,window,document)}):"object"===typeof exports?module.exports=function(m,k){m||(m=window);if(!k||!k.fn.dataTable)k=require("datatables.net")(m,k).$;return e(k,m,m.document)}:e(jQuery,window,document)})(function(e,m,k,o){var l=e.fn.dataTable,n=function(a,b){if(!l.versionCheck||!l.versionCheck("1.10.8"))throw"KeyTable requires DataTables 1.10.8 or newer";this.c=e.extend(!0,{},l.defaults.keyTable,
|
||||
n.defaults,b);this.s={dt:new l.Api(a),enable:!0,focusDraw:!1,waitingForDraw:!1,lastFocus:null};this.dom={};var c=this.s.dt.settings()[0],d=c.keytable;if(d)return d;c.keytable=this;this._constructor()};e.extend(n.prototype,{blur:function(){this._blur()},enable:function(a){this.s.enable=a},focus:function(a,b){this._focus(this.s.dt.cell(a,b))},focused:function(a){if(!this.s.lastFocus)return!1;var b=this.s.lastFocus.cell.index();return a.row===b.row&&a.column===b.column},_constructor:function(){this._tabInput();
|
||||
var a=this,b=this.s.dt,c=e(b.table().node());"static"===c.css("position")&&c.css("position","relative");e(b.table().body()).on("click.keyTable","th, td",function(c){if(!1!==a.s.enable){var d=b.cell(this);d.any()&&a._focus(d,null,!1,c)}});e(k).on("keydown.keyTable",function(b){a._key(b)});if(this.c.blurable)e(k).on("mousedown.keyTable",function(c){e(c.target).parents(".dataTables_filter").length&&a._blur();e(c.target).parents().filter(b.table().container()).length||e(c.target).parents("div.DTE").length||
|
||||
e(c.target).parents().filter(".DTFC_Cloned").length||a._blur()});if(this.c.editor)b.on("key.keyTable",function(b,c,d,e,j){a._editor(d,j)});if(b.settings()[0].oFeatures.bStateSave)b.on("stateSaveParams.keyTable",function(b,c,d){d.keyTable=a.s.lastFocus?a.s.lastFocus.cell.index():null});b.on("draw.keyTable",function(c){if(!a.s.focusDraw&&a.s.lastFocus){var d=a.s.lastFocus.relative,e=b.page.info(),g=d.row+e.start;g>=e.recordsDisplay&&(g=e.recordsDisplay-1);a._focus(g,d.column,!0,c)}});b.on("destroy.keyTable",
|
||||
function(){b.off(".keyTable");e(b.table().body()).off("click.keyTable","th, td");e(k.body).off("keydown.keyTable").off("click.keyTable")});var d=b.state.loaded();if(d&&d.keyTable)b.one("init",function(){var a=b.cell(d.keyTable);a.any()&&a.focus()});else this.c.focus&&b.cell(this.c.focus).focus()},_blur:function(){if(this.s.enable&&this.s.lastFocus){var a=this.s.lastFocus.cell;e(a.node()).removeClass(this.c.className);this.s.lastFocus=null;this._updateFixedColumns(a.index().column);this._emitEvent("key-blur",
|
||||
[this.s.dt,a])}},_columns:function(){var a=this.s.dt,b=a.columns(this.c.columns).indexes(),c=[];a.columns(":visible").every(function(a){-1!==b.indexOf(a)&&c.push(a)});return c},_editor:function(a,b){var c=this.s.dt,d=this.c.editor;16!==a&&(b.stopPropagation(),13===a&&b.preventDefault(),d.inline(this.s.lastFocus.cell.index()),e("div.DTE input, div.DTE textarea").select(),c.keys.enable(this.c.editorKeys),c.one("key-blur.editor",function(){d.displayed()&&d.submit()}),d.one("close",function(){c.keys.enable(!0);
|
||||
c.off("key-blur.editor")}))},_emitEvent:function(a,b){this.s.dt.iterator("table",function(c){e(c.nTable).triggerHandler(a,b)})},_focus:function(a,b,c,d){var i=this,h=this.s.dt,f=h.page.info(),g=this.s.lastFocus;d||(d=null);if(this.s.enable){if("number"!==typeof a){var j=a.index(),b=j.column,a=h.rows({filter:"applied",order:"applied"}).indexes().indexOf(j.row);f.serverSide&&(a+=f.start)}if(-1!==f.length&&(a<f.start||a>=f.start+f.length))this.s.focusDraw=!0,this.s.waitingForDraw=!0,h.one("draw",function(){i.s.focusDraw=
|
||||
!1;i.s.waitingForDraw=!1;i._focus(a,b)}).page(Math.floor(a/f.length)).draw(!1);else if(-1!==e.inArray(b,this._columns())){f.serverSide&&(a-=f.start);f=h.cell(":eq("+a+")",b,{search:"applied"});if(g){if(g.node===f.node())return;this._blur()}g=e(f.node());g.addClass(this.c.className);this._updateFixedColumns(b);if(c===o||!0===c)this._scroll(e(m),e(k.body),g,"offset"),c=h.table().body().parentNode,c!==h.table().header().parentNode&&(c=e(c.parentNode),this._scroll(c,c,g,"position"));this.s.lastFocus=
|
||||
{cell:f,node:f.node(),relative:{row:h.rows({page:"current"}).indexes().indexOf(f.index().row),column:f.index().column}};this._emitEvent("key-focus",[this.s.dt,f,d||null]);h.state.save()}}},_key:function(a){if(this.s.waitingForDraw)a.preventDefault();else{var b=this.s.enable,c=!0===b||"navigation-only"===b;if(b&&!(0===a.keyCode||a.ctrlKey||a.metaKey||a.altKey)&&this.s.lastFocus){var d=this.s.dt;if(!(this.c.keys&&-1===e.inArray(a.keyCode,this.c.keys)))switch(a.keyCode){case 9:this._shift(a,a.shiftKey?
|
||||
"left":"right",!0);break;case 27:this.s.blurable&&!0===b&&this._blur();break;case 33:case 34:c&&(a.preventDefault(),d.page(33===a.keyCode?"previous":"next").draw(!1));break;case 35:case 36:c&&(a.preventDefault(),b=d.cells({page:"current"}).indexes(),c=this._columns(),this._focus(d.cell(b[35===a.keyCode?b.length-1:c[0]]),null,!0,a));break;case 37:c&&this._shift(a,"left");break;case 38:c&&this._shift(a,"up");break;case 39:c&&this._shift(a,"right");break;case 40:c&&this._shift(a,"down");break;default:!0===
|
||||
b&&this._emitEvent("key",[d,a.keyCode,this.s.lastFocus.cell,a])}}}},_scroll:function(a,b,c,d){var d=c[d](),e=c.outerHeight(),c=c.outerWidth(),h=b.scrollTop(),f=b.scrollLeft(),g=a.height(),a=a.width();d.top<h&&b.scrollTop(d.top);d.left<f&&b.scrollLeft(d.left);d.top+e>h+g&&e<g&&b.scrollTop(d.top+e-g);d.left+c>f+a&&c<a&&b.scrollLeft(d.left+c-a)},_shift:function(a,b,c){var d=this.s.dt,i=d.page.info(),h=i.recordsDisplay,f=this.s.lastFocus.cell,g=this._columns();if(f){var j=d.rows({filter:"applied",order:"applied"}).indexes().indexOf(f.index().row);
|
||||
i.serverSide&&(j+=i.start);d=d.columns(g).indexes().indexOf(f.index().column);i=g[d];"right"===b?d>=g.length-1?(j++,i=g[0]):i=g[d+1]:"left"===b?0===d?(j--,i=g[g.length-1]):i=g[d-1]:"up"===b?j--:"down"===b&&j++;0<=j&&j<h&&-1!==e.inArray(i,g)?(a.preventDefault(),this._focus(j,i,!0,a)):!c||!this.c.blurable?a.preventDefault():this._blur()}},_tabInput:function(){var a=this,b=this.s.dt,c=null!==this.c.tabIndex?this.c.tabIndex:b.settings()[0].iTabIndex;if(-1!=c)e('<div><input type="text" tabindex="'+c+'"/></div>').css({position:"absolute",
|
||||
height:1,width:0,overflow:"hidden"}).insertBefore(b.table().node()).children().on("focus",function(c){a._focus(b.cell(":eq(0)","0:visible",{page:"current"}),null,!0,c)})},_updateFixedColumns:function(a){var b=this.s.dt,c=b.settings()[0];if(c._oFixedColumns){var d=c.aoColumns.length-c._oFixedColumns.s.iRightColumns;(a<c._oFixedColumns.s.iLeftColumns||a>d)&&b.fixedColumns().update()}}});n.defaults={blurable:!0,className:"focus",columns:"",editor:null,editorKeys:"navigation-only",focus:null,keys:null,
|
||||
tabIndex:null};n.version="2.2.0";e.fn.dataTable.KeyTable=n;e.fn.DataTable.KeyTable=n;l.Api.register("cell.blur()",function(){return this.iterator("table",function(a){a.keytable&&a.keytable.blur()})});l.Api.register("cell().focus()",function(){return this.iterator("cell",function(a,b,c){a.keytable&&a.keytable.focus(b,c)})});l.Api.register("keys.disable()",function(){return this.iterator("table",function(a){a.keytable&&a.keytable.enable(!1)})});l.Api.register("keys.enable()",function(a){return this.iterator("table",
|
||||
function(b){b.keytable&&b.keytable.enable(a===o?!0:a)})});l.ext.selector.cell.push(function(a,b,c){var b=b.focused,a=a.keytable,d=[];if(!a||b===o)return c;for(var e=0,h=c.length;e<h;e++)(!0===b&&a.focused(c[e])||!1===b&&!a.focused(c[e]))&&d.push(c[e]);return d});e(k).on("preInit.dt.dtk",function(a,b){if("dt"===a.namespace){var c=b.oInit.keys,d=l.defaults.keys;if(c||d)d=e.extend({},d,c),!1!==c&&new n(b,d)}});return n});
|
||||
Reference in New Issue
Block a user