Bindings

  bindings_set( elm ) {
    function move_up( e ) {
      let input = $( e.target );
      let td = input.closest( 'td' );
      let tr = td.closest( 'tr' ).prev();
      if ( ! tr.length || tr.prop( 'tagName') !== 'TR' ) return false;

      td = tr.find( '>td' ).eq( td.index() );
      if ( attrs.selector ) tm.selector_set( td );

      return td.find( '>div :input' ).focus();
    }

    function move_down( e ) {
      let input = $( e.target );
      let td = input.closest( 'td' );
      let tr = td.closest( 'tr' ).next();
      if ( ! tr.length || tr.prop( 'tagName') !== 'TR' ) return false;

      td = tr.find( '>td' ).eq( td.index() );
      if ( attrs.selector ) tm.selector_set( td );

      return td.find( '>div :input' ).focus();
    }

    function move_left( e ) {
      let input = $( e.target );
      let td = input.closest( 'td' ).prev();

      if ( ! td.length || td.index() - attrs.index < 0 ) return false;
      if ( attrs.selector ) tm.selector_set( td );

      return td.find( '>div :input' ).focus();
    }

    function move_right( e ) {
      let input = $( e.target );
      let td = input.closest( 'td' ).next();

      if ( ! td.length || ! td.index() ) return false;
      if ( attrs.selector ) tm.selector_set( td );

      return td.find( '>div :input' ).focus();
    }

    function key_events() {
      elm.off( 'keyup' ).on( 'keyup', function( e ) {
        let div = $( e.target ).closest( 'div' );
        let input = $( e.target );
        let type = input.prop( 'tagName' );

        switch ( e.keyCode ) {
          case 9: // Tab
            e.preventDefault();

            if ( ! div.hasClass( 'selected' ) ) {
              div.addClass( 'selected' );
              if ( type === 'INPUT' )
                input[ 0 ].setSelectionRange(
                elm[0].selectionStart, elm[0].selectionStart );
            }
          break;
          case 13: // Enter
            if ( e.target.defaultValue === e.target.value
            && ! div.hasClass( 'selected' ) ) {
              div.addClass( 'selected' );
              move_down( e );
              return false;
            }
            if ( e.target.defaultValue === e.target.value )
              return false;

            if ( $(e.target ).closest( 'div').attr('class') !== 'ok_cell'
              || ( e.target.defaultValue === e.target.value ) )
              return false;
          case 27: // ESC
            let selected = tm.elm.find( '>tbody>tr>td>div.selected ' );
            if ( selected.length ) {
              tm.selection_remove();
            } else {
              $( e.target ).closest( 'div' ).addClass('selected');
              $( e.target ).focus();
            }
          break;
        }
      });

      elm.off( 'keydown' ).on( 'keydown', function( e ) {
        if ( ! $( 'table.magic .selected' ).length ) return;

        switch( e.keyCode ) { // Arrow Keys
          case 37: if ( attrs.selector ) move_left( e ); return false;
          case 38: move_up( e ); return false;
          case 39: if ( attrs.selector ) move_right( e ); return false;
          case 40: move_down( e ); return false;
        }
        if ( ! attrs.selector ) return;

        switch( e.keyCode ) {
          case 9: // Tab
            e.preventDefault();
            e.shiftKey ? move_left( e ) : move_right( e );
            return false;
          case 13: // Enter
            e.preventDefault();
            let elm = e.shiftKey && attrs.selector ?
            move_up( e ) : move_down( e );
            tm.selector_set( elm.closest( 'div' ) );

            return false;
          case 113: tm.selection_remove(); break; // F2

          case 27: // ESC
          case 33:
          case 34: //Page Up/Down
          case 91:
          case 92: return false; // Meta Keys

          default:
            let char = String.fromCharCode(e.keyCode)
            .replace(/[\x00-\x07\x0E-\x1F\x7F-\uFFFF]/g, '');

            if ( ! char ) return false;
            tm.selection_remove();
          break;
        }
      } );
    }

    let tm = this;
    let self = this;
    let attrs = this.attrs;
    let thead = this.thead;
    let tbody = this.tbody;

    switch ( elm.prop( 'tagName' ) ) {
      case 'BODY':
        elm.on( 'click', function() {
          if ( $( '.menu.magic' ).is( ':visible' ) ) {
            $( '.menu.magic' ).hide();
          }
        } );
      break;

      case 'THEAD':
        if ( attrs.sortable ) {
          thead.find('>tr>th span').on( 'click', tm.column_sort );
        }
        if ( attrs.column_sizing ) {
          thead.find( 'span' ).on( 'dblclick, mousedown', false );

          thead.find( 'button' ).on( 'dblclick', function( e ) {
            tm.column_set_width( $( e.target ).closest( 'th' ).index() );
          } );

          thead.find( '>tr>th button' ).
          on( 'mousedown', { elm: false }, function( e ) {
            thead.find( 'tr *' ).css( 'cursor', 'col-resize' );
            tbody.find( 'tr *' ).css( 'cursor', 'col-resize' );
            e.data.elm = $( this );
            tm.column_sizer( e );
          } );
        }
      break;

      case 'TBODY':
        tbody.find( '>tr>td>div, >tr>td>div :input' )
        .on( 'contextmenu', function() {
          let div = $( this ).closest( 'div' );
          tm.selector_set( div );
          tm.menu.init( tbody );
          div.find( ':input' ).trigger( 'click' ).focus();
        } );
      break;

      case 'TR':
        if ( attrs.column_sizing ) {
          let div = elm.find( '>td>div' );
          let input = div.find( 'input' );
          let select = div.find( 'select' );

          div.on( 'click', tm.selector_set );
          input.on( 'click', tm.selector_set );
          input.on( 'dblclick', tm.cell_edit );
          elm.find( '>td.index input' ).off( 'click' );

          input.change( function( e ) {
            let elm = $( e.target );
            let td = elm.closest( 'td' );
            let id = td.closest( 'tr' ).attr( 'data-id' );
            let idx = td.index() - 1;

            td.find( '>div ,>div input').addClass( 'ok_cell' );

            tm.data.body.rows[ id ][ idx ] = elm.val();

            setTimeout( () => {
              td.find( '>div ,>div input').removeClass( 'ok_cell' );
            }, 2000);

          } );

          select.on( 'focusout', function( e ) {
            let elm = $( e.target );
            let td = elm.closest( 'td' );

            let row = parseInt( td.closest( 'tr' ).attr( 'data-id' ) );
            let col = parseInt( td.index() ) - 1;
            let val = parseInt( this.value );

            if ( tm.data.body.rows[ row ][ col ] !== val ) {

              td.find( '>div ,>div select').addClass( 'ok_cell' );
              tm.data.body.rows[ row ][ col ] = parseInt( val );

              setTimeout( () => {
                td.find( '>div ,>div select').removeClass( 'ok_cell' );
              }, 2000);
            }
          } );

          select.on( 'mousedown', function( e ) { tm.selector_set( e ); } );
        }

        key_events();
      break
    }

    return this;
  }