Resize and keyboard navigation fixes

addon/components/ember-table.js

@@ -2,13 +2,11 @@ import Ember from 'ember';
 import StyleBindingsMixin from '../mixins/style-bindings-mixin';
 import RowArrayController from '../controllers/row';
 import RowDefinition from '../row-definition';
-import { addResizeListener } from '../resize-detection';
+import ResizeMixin from 'ember-resize-mixin/main';
 
 /* global $ */
 
-var EmberTableComponent;
-
-EmberTableComponent = Ember.Component.extend(StyleBindingsMixin, {
+var EmberTableComponent = Ember.Component.extend(ResizeMixin, StyleBindingsMixin, {
   classNames: ['ember-table-tables-container'],
   classNameBindings: ['enableContentSelection:ember-table-content-selectable'],
 
@@ -248,26 +246,23 @@ EmberTableComponent = Ember.Component.extend(StyleBindingsMixin, {
   didInsertElement: function() {
     this._super();
     this.set('_tableScrollTop', 0);
-    return this.elementSizeDidChange();
+    Ember.run.next(this, this.elementSizeDidChange);
   },
 
-  addResizeListener: function() {
-    addResizeListener(this.get('element'), Ember.run.bind(this, this.elementSizeDidChange));
-  }.on("didInsertElement"),
-
   elementSizeDidChange: function() {
     if ((this.get('_state') || this.get('state')) !== 'inDOM') {
       return;
     }
+
     this.set('_width', this.$().parent().outerWidth());
     this.set('_height', this.$().parent().outerHeight());
 
     /*
     we need to wait for the table to be fully rendered before antiscroll can
     be used
      */
-    return Ember.run.next(this, this.updateLayout);
-  },
+    Ember.run.next(this, this.updateLayout);
+  }.on('resize'),
 
   updateLayout: function() {
 
@@ -438,6 +433,10 @@ EmberTableComponent = Ember.Component.extend(StyleBindingsMixin, {
     return Math.floor(this.get('_bodyHeight') / this.get('rowHeight'));
   }).property('_bodyHeight', 'rowHeight'),
 
+  _endIndex: Ember.computed(function() {
+    return this.get('_startIndex') + this.get('_numItemsShowing');
+  }).property('_startIndex', '_numItemsShowing'),
+
   _startIndex: Ember.computed(function() {
     var index, numContent, numViews, rowHeight, scrollTop;
     numContent = this.get('bodyContent.length');
@@ -544,6 +543,10 @@ EmberTableComponent = Ember.Component.extend(StyleBindingsMixin, {
     }
   },
 
+  //Super hacky, refactor
+  _scrollToVertical: function(y) {
+    this.$('.ember-table-body-container .antiscroll-inner').scrollTop(y);
+  },
 
   keyDown: function (e) {
     if (e.keyCode === 38) {
@@ -582,9 +585,18 @@ EmberTableComponent = Ember.Component.extend(StyleBindingsMixin, {
     } else if (direction === 'down' && rowIndex !== this.get('bodyContent.length') - 1) {
       futureRowIndex = rowIndex + 1;
     } else {
-      futureRowIndex = rowIndex;
+      //We are at the end or the start so don't want to do anything
+      return;
+    }
+    if (direction === 'down' && futureRowIndex + 1 > this.get('_endIndex')) {
+      this._scrollToVertical(this.get('_tableScrollTop') + this.get('rowHeight') * 4);
     }
 
+    if (direction === 'up' && futureRowIndex - 1 < this.get('_startIndex')) {
+      this._scrollToVertical(this.get('_tableScrollTop') - this.get('rowHeight') * 4);
+    }
+
+
     // Clear current selection
     this.get('persistedSelection').clear();
     this.get('rangeSelection').clear();
@@ -613,8 +625,8 @@ EmberTableComponent = Ember.Component.extend(StyleBindingsMixin, {
   findRow: function(content) {
     var row, _i, _len, _ref;
     _ref = this.get('bodyContent');
-    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-      row = _ref[_i];
+    for (_i = 0, _len = _ref.get('length'); _i < _len; _i++) {
+      row = _ref.objectAt(_i);
       if (row.get('content') === content) {
         return row;
       }