Ctrl+direction keyboard navigation

lib/frappe-datatable.js

@@ -998,6 +998,16 @@ var DataTable = function () {
 
       return 0;
     }
+  }, {
+    key: 'getLastColumnIndex',
+    value: function getLastColumnIndex() {
+      return this.datamanager.getColumnCount() - 1;
+    }
+  }, {
+    key: 'getLastRowIndex',
+    value: function getLastRowIndex() {
+      return this.datamanager.getRowCount() - 1;
+    }
   }, {
     key: 'getSerialColumnIndex',
     value: function getSerialColumnIndex() {
@@ -1399,7 +1409,10 @@ var CellManager = function () {
       var _this3 = this;
 
       var focusCell = function focusCell(direction) {
-        if (!_this3.$focusedCell) return;
+        if (!_this3.$focusedCell || _this3.$editingCell) {
+          return false;
+        }
+
         var $cell = _this3.$focusedCell;
 
         if (direction === 'left') {
@@ -1413,6 +1426,32 @@ var CellManager = function () {
         }
 
         _this3.focusCell($cell);
+        return true;
+      };
+
+      var focusLastCell = function focusLastCell(direction) {
+        if (!_this3.$focusedCell || _this3.$editingCell) {
+          return false;
+        }
+
+        var $cell = _this3.$focusedCell;
+
+        var _getCellAttr = _this3.getCellAttr($cell),
+            rowIndex = _getCellAttr.rowIndex,
+            colIndex = _getCellAttr.colIndex;
+
+        if (direction === 'left') {
+          $cell = _this3.getLeftMostCell$(rowIndex);
+        } else if (direction === 'right') {
+          $cell = _this3.getRightMostCell$(rowIndex);
+        } else if (direction === 'up') {
+          $cell = _this3.getTopMostCell$(colIndex);
+        } else if (direction === 'down') {
+          $cell = _this3.getBottomMostCell$(colIndex);
+        }
+
+        _this3.focusCell($cell);
+        return true;
       };
 
       ['left', 'right', 'up', 'down'].map(function (direction) {
@@ -1421,6 +1460,12 @@ var CellManager = function () {
         });
       });
 
+      ['left', 'right', 'up', 'down'].map(function (direction) {
+        return _keyboard2.default.on('ctrl+' + direction, function () {
+          return focusLastCell(direction);
+        });
+      });
+
       _keyboard2.default.on('esc', function () {
         _this3.deactivateEditing();
       });
@@ -1487,8 +1532,8 @@ var CellManager = function () {
     value: function focusCell($cell) {
       if (!$cell.length) return;
 
-      var _getCellAttr = this.getCellAttr($cell),
+      var _getCellAttr2 = this.getCellAttr($cell),
-          colIndex = _getCellAttr.colIndex;
+          colIndex = _getCellAttr2.colIndex;
 
       if (this.isStandardCell(colIndex)) {
         return;
@@ -1513,9 +1558,9 @@ var CellManager = function () {
   }, {
     key: 'highlightRowColumnHeader',
     value: function highlightRowColumnHeader($cell) {
-      var _getCellAttr2 = this.getCellAttr($cell),
+      var _getCellAttr3 = this.getCellAttr($cell),
-          colIndex = _getCellAttr2.colIndex,
+          colIndex = _getCellAttr3.colIndex,
-          rowIndex = _getCellAttr2.rowIndex;
+          rowIndex = _getCellAttr3.rowIndex;
 
       var _colIndex = this.instance.getSerialColumnIndex();
       var colHeaderSelector = '.data-table-header .data-table-col[data-col-index="' + colIndex + '"]';
@@ -1649,9 +1694,9 @@ var CellManager = function () {
   }, {
     key: 'activateEditing',
     value: function activateEditing($cell) {
-      var _getCellAttr3 = this.getCellAttr($cell),
+      var _getCellAttr4 = this.getCellAttr($cell),
-          rowIndex = _getCellAttr3.rowIndex,
+          rowIndex = _getCellAttr4.rowIndex,
-          colIndex = _getCellAttr3.colIndex;
+          colIndex = _getCellAttr4.colIndex;
 
       var col = this.instance.getColumn(colIndex);
 
@@ -1660,9 +1705,9 @@ var CellManager = function () {
       }
 
       if (this.$editingCell) {
-        var _getCellAttr4 = this.getCellAttr(this.$editingCell),
+        var _getCellAttr5 = this.getCellAttr(this.$editingCell),
-            _rowIndex = _getCellAttr4._rowIndex,
+            _rowIndex = _getCellAttr5._rowIndex,
-            _colIndex = _getCellAttr4._colIndex;
+            _colIndex = _getCellAttr5._colIndex;
 
         if (rowIndex === _rowIndex && colIndex === _colIndex) {
           // editing the same cell
@@ -1720,9 +1765,9 @@ var CellManager = function () {
     value: function submitEditing($cell) {
       var _this8 = this;
 
-      var _getCellAttr5 = this.getCellAttr($cell),
+      var _getCellAttr6 = this.getCellAttr($cell),
-          rowIndex = _getCellAttr5.rowIndex,
+          rowIndex = _getCellAttr6.rowIndex,
-          colIndex = _getCellAttr5.colIndex;
+          colIndex = _getCellAttr6.colIndex;
 
       if ($cell) {
         var editing = this.currentCellEditing;
@@ -1806,8 +1851,8 @@ var CellManager = function () {
   }, {
     key: 'getAboveCell$',
     value: function getAboveCell$($cell) {
-      var _getCellAttr6 = this.getCellAttr($cell),
+      var _getCellAttr7 = this.getCellAttr($cell),
-          colIndex = _getCellAttr6.colIndex;
+          colIndex = _getCellAttr7.colIndex;
 
       var $aboveRow = $cell.parent().prev();
 
@@ -1816,8 +1861,8 @@ var CellManager = function () {
   }, {
     key: 'getBelowCell$',
     value: function getBelowCell$($cell) {
-      var _getCellAttr7 = this.getCellAttr($cell),
+      var _getCellAttr8 = this.getCellAttr($cell),
-          colIndex = _getCellAttr7.colIndex;
+          colIndex = _getCellAttr8.colIndex;
 
       var $belowRow = $cell.parent().next();
 
@@ -1833,6 +1878,26 @@ var CellManager = function () {
     value: function getRightCell$($cell) {
       return $cell.next();
     }
+  }, {
+    key: 'getLeftMostCell$',
+    value: function getLeftMostCell$(rowIndex) {
+      return this.getCell$(rowIndex, this.instance.getFirstColumnIndex());
+    }
+  }, {
+    key: 'getRightMostCell$',
+    value: function getRightMostCell$(rowIndex) {
+      return this.getCell$(rowIndex, this.instance.getLastColumnIndex());
+    }
+  }, {
+    key: 'getTopMostCell$',
+    value: function getTopMostCell$(colIndex) {
+      return this.getCell$(0, colIndex);
+    }
+  }, {
+    key: 'getBottomMostCell$',
+    value: function getBottomMostCell$(colIndex) {
+      return this.getCell$(this.instance.getLastRowIndex(), colIndex);
+    }
   }, {
     key: 'getCell',
     value: function getCell(colIndex, rowIndex) {
@@ -1896,13 +1961,15 @@ function handler(e) {
   var _handlers = handlers[key];
 
   if (_handlers && _handlers.length > 0) {
-    _handlers.map(function (h) {
+    _handlers.map(function (handler) {
-      return h();
+      var preventBubbling = handler();
-    });
 
-    if (!e.isDefaultPrevented()) {
+      if (preventBubbling === undefined || preventBubbling === true) {
-      e.preventDefault();
+        if (!e.isDefaultPrevented()) {
-    }
+          e.preventDefault();
+        }
+      }
+    });
   }
 }
 

src/cellmanager.js

@@ -61,7 +61,10 @@ export default class CellManager {
 
   bindKeyboardNav() {
     const focusCell = (direction) => {
-      if (!this.$focusedCell) return;
+      if (!this.$focusedCell || this.$editingCell) {
+        return false;
+      }
+
       let $cell = this.$focusedCell;
 
       if (direction === 'left') {
@@ -75,12 +78,39 @@ export default class CellManager {
       }
 
       this.focusCell($cell);
+      return true;
+    };
+
+    const focusLastCell = (direction) => {
+      if (!this.$focusedCell || this.$editingCell) {
+        return false;
+      }
+
+      let $cell = this.$focusedCell;
+      const { rowIndex, colIndex } = this.getCellAttr($cell);
+
+      if (direction === 'left') {
+        $cell = this.getLeftMostCell$(rowIndex);
+      } else if (direction === 'right') {
+        $cell = this.getRightMostCell$(rowIndex);
+      } else if (direction === 'up') {
+        $cell = this.getTopMostCell$(colIndex);
+      } else if (direction === 'down') {
+        $cell = this.getBottomMostCell$(colIndex);
+      }
+
+      this.focusCell($cell);
+      return true;
     };
 
     ['left', 'right', 'up', 'down'].map(
       direction => keyboard.on(direction, () => focusCell(direction))
     );
 
+    ['left', 'right', 'up', 'down'].map(
+      direction => keyboard.on('ctrl+' + direction, () => focusLastCell(direction))
+    );
+
     keyboard.on('esc', () => {
       this.deactivateEditing();
     });
@@ -422,6 +452,22 @@ export default class CellManager {
     return $cell.next();
   }
 
+  getLeftMostCell$(rowIndex) {
+    return this.getCell$(rowIndex, this.instance.getFirstColumnIndex());
+  }
+
+  getRightMostCell$(rowIndex) {
+    return this.getCell$(rowIndex, this.instance.getLastColumnIndex());
+  }
+
+  getTopMostCell$(colIndex) {
+    return this.getCell$(0, colIndex);
+  }
+
+  getBottomMostCell$(colIndex) {
+    return this.getCell$(this.instance.getLastRowIndex(), colIndex);
+  }
+
   getCell(colIndex, rowIndex) {
     return this.instance.datamanager.getCell(colIndex, rowIndex);
   }

src/datatable.js

@@ -570,6 +570,14 @@ export default class DataTable {
     return 0;
   }
 
+  getLastColumnIndex() {
+    return this.datamanager.getColumnCount() - 1;
+  }
+
+  getLastRowIndex() {
+    return this.datamanager.getRowCount() - 1;
+  }
+
   getSerialColumnIndex() {
     const columns = this.datamanager.getColumns();
 

src/keyboard.js

@@ -33,11 +33,16 @@ function handler(e) {
   const _handlers = handlers[key];
 
   if (_handlers && _handlers.length > 0) {
-    _handlers.map(h => h());
+    _handlers.map(handler => {
+      const preventBubbling = handler();
+
+      if (preventBubbling === undefined || preventBubbling === true) {
+        if (!e.isDefaultPrevented()) {
+          e.preventDefault();
+        }
+      }
+    });
 
-    if (!e.isDefaultPrevented()) {
-      e.preventDefault();
-    }
   }
 }