Subversion-Projekte lars-tiefland.ci

/*! KeyTable 2.0.0
 * ©2009-2015 SpryMedia Ltd - datatables.net/license
 */

/**
 * @summary     KeyTable
 * @description Spreadsheet like keyboard navigation for DataTables
 * @version     2.0.0
 * @file        dataTables.keyTable.js
 * @author      SpryMedia Ltd (www.sprymedia.co.uk)
 * @contact     www.sprymedia.co.uk/contact
 * @copyright   Copyright 2009-2015 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(window, document, undefined) {


var factory = function( $, DataTable ) {
"use strict";



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
        };

        // 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();
};


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 ) );
        },


        /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
         * 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 () {
                        if ( that.s.enable === false ) {
                                return;
                        }

                        var cell = dt.cell( this );

                        if ( ! cell.any() ) {
                                return;
                        }

                        that._focus( cell );
                } );

                // Key events
                $( document.body ).on( 'keydown.keyTable', function (e) {
                        that._key( e );
                } );

                // Click blur
                if ( this.c.blurable ) {
                        $( document.body ).on( 'click.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;
                                }

                                that._blur();
                        } );
                }

                if ( this.c.editor ) {
                        dt.on( 'key.kt', 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.index() :
                                        null;
                        } );
                }

                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 ) {
                        dt.cell( state.keyTable ).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.node() ).removeClass( this.c.className );
                this.s.lastFocus = null;

                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;

                orig.stopPropagation();

                editor.inline( this.s.lastFocus.index() );

                // Excel style - select all text
                var input = $('div.DTE input');
                if ( input.length ) {
                        input[0].select();
                }

                // Reduce the keys the Keys listens for
                dt.keys.enable( 'navigation-only' );

                // 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 - 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
         * @private
         */
        _focus: function ( row, column )
        {
                var that = this;
                var dt = this.s.dt;
                var pageInfo = dt.page.info();
                var lastFocus = this.s.lastFocus;

                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 ( row < pageInfo.start || row >= pageInfo.start+pageInfo.length ) {
                        dt
                                .one( 'draw', function () {
                                        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 );

                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 );

                // Shift viewpoint and page to make cell visible
                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;

                this._emitEvent( 'key-focus', [ this.s.dt, cell ] );
                dt.state.save();
        },


        /**
         * Handle key press
         *
         * @param  {object} e Event
         * @private
         */
        _key: function ( e )
        {
                if ( ! this.s.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 cell = this.s.lastFocus;
                if ( ! cell ) {
                        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
                                this._shift( e, e.shiftKey ? 'left' : 'right', true );
                                break;

                        case 27: // esc
                                if ( this.s.blurable && this.s.enable === true ) {
                                        this._blur();
                                }
                                break;

                        case 33: // page up (previous page)
                        case 34: // page down (next page)
                                e.preventDefault();
                                var index = dt.cells( {page: 'current'} ).nodes().indexOf( cell.node() );

                                dt
                                        .one( 'draw', function () {
                                                var nodes = dt.cells( {page: 'current'} ).nodes();

                                                that._focus( dt.cell( index < nodes.length ?
                                                        nodes[ index ] :
                                                        nodes[ nodes.length-1 ]
                                                ) );
                                        } )
                                        .page( e.keyCode === 33 ? 'previous' : 'next' )
                                        .draw( false );
                                break;

                        case 35: // end (end of current page)
                        case 36: // home (start of current page)
                                e.preventDefault();
                                var indexes = dt.cells( {page: 'current'} ).indexes();

                                this._focus( dt.cell(
                                        indexes[ e.keyCode === 35 ? indexes.length-1 : 0 ]
                                ) );
                                break;

                        case 37: // left arrow
                                this._shift( e, 'left' );
                                break;

                        case 38: // up arrow
                                this._shift( e, 'up' );
                                break;

                        case 39: // right arrow
                                this._shift( e, 'right' );
                                break;

                        case 40: // down arrow
                                this._shift( e, 'down' );
                                break;

                        default:
                                // Everything else - pass through only when fully enabled
                                if ( this.s.enable === true ) {
                                        this._emitEvent( 'key', [ dt, e.keyCode, this.s.lastFocus, 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 ) {
                        scroller.scrollTop( offset.top + height - containerHeight );
                }

                // Right correction
                if ( offset.left + width > scrollLeft + 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;
                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 &&
                         column >= 0 && column <= columns.length
                ) {
                        e.preventDefault();

                        this._focus( row, column );
                }
                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 () {
                        that._focus( dt.cell(':eq(0)', {page: 'current'}) );
                } );
        }
};


/**
 * 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,

        /**
         * 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.0.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 );
                }
        } );
} );


// 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( {}, init, defaults );

                if ( init !== false ) {
                        new KeyTable( settings, opts  );
                }
        }
} );


return KeyTable;
}; // /factory


// Define as an AMD module if possible
if ( typeof define === 'function' && define.amd ) {
        define( ['jquery', 'datatables'], factory );
}
else if ( typeof exports === 'object' ) {
    // Node/CommonJS
    factory( require('jquery'), require('datatables') );
}
else if ( jQuery && !jQuery.fn.dataTable.KeyTable ) {
        // Otherwise simply initialise as normal, stopping multiple evaluation
        factory( jQuery, jQuery.fn.dataTable );
}


})(window, document);