[wip] Scroll to Cell

lib/frappe-datatable.js

@@ -1017,6 +1017,15 @@ var DataTable = function () {
         return column.content.includes('Sr. No');
       });
     }
+  }, {
+    key: 'getViewportHeight',
+    value: function getViewportHeight() {
+      if (!this.viewportHeight) {
+        this.viewportHeight = this.bodyScrollable.height();
+      }
+
+      return this.viewportHeight;
+    }
   }, {
     key: 'log',
     value: function log() {
@@ -1454,6 +1463,20 @@ var CellManager = function () {
         return true;
       };
 
+      var scrollToCell = function scrollToCell(direction) {
+        if (!_this3.$focusedCell) return false;
+
+        if (!_this3.inViewport(_this3.$focusedCell)) {
+          var _getCellAttr2 = _this3.getCellAttr(_this3.$focusedCell),
+              rowIndex = _getCellAttr2.rowIndex;
+
+          _this3.scrollToRow(rowIndex - _this3.getRowCountPerPage() + 2);
+          return true;
+        }
+
+        return false;
+      };
+
       ['left', 'right', 'up', 'down'].map(function (direction) {
         return _keyboard2.default.on(direction, function () {
           return focusCell(direction);
@@ -1466,6 +1489,12 @@ var CellManager = function () {
         });
       });
 
+      ['left', 'right', 'up', 'down'].map(function (direction) {
+        return _keyboard2.default.on(direction, function () {
+          return scrollToCell(direction);
+        });
+      });
+
       _keyboard2.default.on('esc', function () {
         _this3.deactivateEditing();
       });
@@ -1532,8 +1561,8 @@ var CellManager = function () {
     value: function focusCell($cell) {
       if (!$cell.length) return;
 
-      var _getCellAttr2 = this.getCellAttr($cell),
-          colIndex = _getCellAttr2.colIndex;
+      var _getCellAttr3 = this.getCellAttr($cell),
+          colIndex = _getCellAttr3.colIndex;
 
       if (this.isStandardCell(colIndex)) {
         return;
@@ -1558,9 +1587,9 @@ var CellManager = function () {
   }, {
     key: 'highlightRowColumnHeader',
     value: function highlightRowColumnHeader($cell) {
-      var _getCellAttr3 = this.getCellAttr($cell),
-          colIndex = _getCellAttr3.colIndex,
-          rowIndex = _getCellAttr3.rowIndex;
+      var _getCellAttr4 = this.getCellAttr($cell),
+          colIndex = _getCellAttr4.colIndex,
+          rowIndex = _getCellAttr4.rowIndex;
 
       var _colIndex = this.instance.getSerialColumnIndex();
       var colHeaderSelector = '.data-table-header .data-table-col[data-col-index="' + colIndex + '"]';
@@ -1694,9 +1723,9 @@ var CellManager = function () {
   }, {
     key: 'activateEditing',
     value: function activateEditing($cell) {
-      var _getCellAttr4 = this.getCellAttr($cell),
-          rowIndex = _getCellAttr4.rowIndex,
-          colIndex = _getCellAttr4.colIndex;
+      var _getCellAttr5 = this.getCellAttr($cell),
+          rowIndex = _getCellAttr5.rowIndex,
+          colIndex = _getCellAttr5.colIndex;
 
       var col = this.instance.getColumn(colIndex);
 
@@ -1705,9 +1734,9 @@ var CellManager = function () {
       }
 
       if (this.$editingCell) {
-        var _getCellAttr5 = this.getCellAttr(this.$editingCell),
-            _rowIndex = _getCellAttr5._rowIndex,
-            _colIndex = _getCellAttr5._colIndex;
+        var _getCellAttr6 = this.getCellAttr(this.$editingCell),
+            _rowIndex = _getCellAttr6._rowIndex,
+            _colIndex = _getCellAttr6._colIndex;
 
         if (rowIndex === _rowIndex && colIndex === _colIndex) {
           // editing the same cell
@@ -1765,9 +1794,9 @@ var CellManager = function () {
     value: function submitEditing($cell) {
       var _this8 = this;
 
-      var _getCellAttr6 = this.getCellAttr($cell),
-          rowIndex = _getCellAttr6.rowIndex,
-          colIndex = _getCellAttr6.colIndex;
+      var _getCellAttr7 = this.getCellAttr($cell),
+          rowIndex = _getCellAttr7.rowIndex,
+          colIndex = _getCellAttr7.colIndex;
 
       if ($cell) {
         var editing = this.currentCellEditing;
@@ -1851,8 +1880,8 @@ var CellManager = function () {
   }, {
     key: 'getAboveCell$',
     value: function getAboveCell$($cell) {
-      var _getCellAttr7 = this.getCellAttr($cell),
-          colIndex = _getCellAttr7.colIndex;
+      var _getCellAttr8 = this.getCellAttr($cell),
+          colIndex = _getCellAttr8.colIndex;
 
       var $aboveRow = $cell.parent().prev();
 
@@ -1861,8 +1890,8 @@ var CellManager = function () {
   }, {
     key: 'getBelowCell$',
     value: function getBelowCell$($cell) {
-      var _getCellAttr8 = this.getCellAttr($cell),
-          colIndex = _getCellAttr8.colIndex;
+      var _getCellAttr9 = this.getCellAttr($cell),
+          colIndex = _getCellAttr9.colIndex;
 
       var $belowRow = $cell.parent().next();
 
@@ -1908,6 +1937,61 @@ var CellManager = function () {
     value: function getCellAttr($cell) {
       return $cell.data();
     }
+  }, {
+    key: 'getRowHeight',
+    value: function getRowHeight() {
+      return this.bodyScrollable.find('.data-table-row:first').height();
+    }
+  }, {
+    key: 'inViewport',
+    value: function inViewport($cell) {
+      var colIndex = void 0,
+          rowIndex = void 0;
+
+      if (typeof $cell === 'number') {
+        var _arguments2 = Array.prototype.slice.call(arguments);
+
+        colIndex = _arguments2[0];
+        rowIndex = _arguments2[1];
+      } else {
+        var cell = this.getCellAttr($cell);
+
+        colIndex = cell.colIndex;
+        rowIndex = cell.rowIndex;
+      }
+
+      var viewportHeight = this.instance.getViewportHeight();
+      var rowHeight = this.getRowHeight();
+      var rowOffset = rowIndex * rowHeight;
+
+      var scrollTopOffset = this.bodyScrollable[0].scrollTop;
+
+      if (rowOffset - scrollTopOffset + rowHeight < viewportHeight) {
+        return true;
+      }
+
+      return false;
+    }
+  }, {
+    key: 'scrollToCell',
+    value: function scrollToCell($cell) {
+      var _getCellAttr10 = this.getCellAttr($cell),
+          rowIndex = _getCellAttr10.rowIndex;
+
+      this.scrollToRow(rowIndex);
+    }
+  }, {
+    key: 'getRowCountPerPage',
+    value: function getRowCountPerPage() {
+      return Math.ceil(this.instance.getViewportHeight() / this.getRowHeight());
+    }
+  }, {
+    key: 'scrollToRow',
+    value: function scrollToRow(rowIndex) {
+      var offset = rowIndex * this.getRowHeight();
+
+      this.bodyScrollable[0].scrollTop = offset;
+    }
   }]);
 
   return CellManager;

src/cellmanager.js

@@ -103,6 +103,19 @@ export default class CellManager {
       return true;
     };
 
+    const scrollToCell = (direction) => {
+      if (!this.$focusedCell) return false;
+
+      if (!this.inViewport(this.$focusedCell)) {
+        const { rowIndex } = this.getCellAttr(this.$focusedCell);
+
+        this.scrollToRow(rowIndex - this.getRowCountPerPage() + 2);
+        return true;
+      }
+
+      return false;
+    };
+
     ['left', 'right', 'up', 'down'].map(
       direction => keyboard.on(direction, () => focusCell(direction))
     );
@@ -111,6 +124,10 @@ export default class CellManager {
       direction => keyboard.on('ctrl+' + direction, () => focusLastCell(direction))
     );
 
+    ['left', 'right', 'up', 'down'].map(
+      direction => keyboard.on(direction, () => scrollToCell(direction))
+    );
+
     keyboard.on('esc', () => {
       this.deactivateEditing();
     });
@@ -475,5 +492,50 @@ export default class CellManager {
   getCellAttr($cell) {
     return $cell.data();
   }
+
+  getRowHeight() {
+    return this.bodyScrollable.find('.data-table-row:first').height();
+  }
+
+  inViewport($cell) {
+    let colIndex, rowIndex;
+
+    if (typeof $cell === 'number') {
+      [colIndex, rowIndex] = arguments;
+    } else {
+      let cell = this.getCellAttr($cell);
+
+      colIndex = cell.colIndex;
+      rowIndex = cell.rowIndex;
+    }
+
+    const viewportHeight = this.instance.getViewportHeight();
+    const rowHeight = this.getRowHeight();
+    const rowOffset = rowIndex * rowHeight;
+
+    const scrollTopOffset = this.bodyScrollable[0].scrollTop;
+
+    if (rowOffset - scrollTopOffset + rowHeight < viewportHeight) {
+      return true;
+    }
+
+    return false;
+  }
+
+  scrollToCell($cell) {
+    const { rowIndex } = this.getCellAttr($cell);
+
+    this.scrollToRow(rowIndex);
+  }
+
+  getRowCountPerPage() {
+    return Math.ceil(this.instance.getViewportHeight() / this.getRowHeight());
+  }
+
+  scrollToRow(rowIndex) {
+    const offset = rowIndex * this.getRowHeight();
+
+    this.bodyScrollable[0].scrollTop = offset;
+  }
 }
 

src/datatable.js

@@ -584,6 +584,14 @@ export default class DataTable {
     return columns.findIndex(column => column.content.includes('Sr. No'));
   }
 
+  getViewportHeight() {
+    if (!this.viewportHeight) {
+      this.viewportHeight = this.bodyScrollable.height();
+    }
+
+    return this.viewportHeight;
+  }
+
   log() {
     if (this.options.enableLogs) {
       console.log.apply(console, arguments);