Merge pull request #15 from rmehta/focus-on-activate

focus before activate editing

lib/frappe-datatable.js

@@ -541,12 +541,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _dom = __webpack_require__(0);
 
 var _dom2 = _interopRequireDefault(_dom);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
 var KEYCODES = {
   13: 'enter',
   91: 'meta',
@@ -562,54 +566,79 @@ var KEYCODES = {
   67: 'c'
 };
 
-var initDone = false;
+var Keyboard = function () {
-var handlers = {};
+  function Keyboard(element) {
+    _classCallCheck(this, Keyboard);
 
-function bind(dom) {
+    this.listeners = {};
-  if (initDone) return;
+    _dom2.default.on(element, 'keydown', this.handler.bind(this));
-  _dom2.default.on(dom, 'keydown', handler);
-  initDone = true;
-}
-
-function handler(e) {
-  var key = KEYCODES[e.keyCode];
-
-  if (e.shiftKey && key !== 'shift') {
-    key = 'shift+' + key;
   }
 
-  if (e.ctrlKey && key !== 'ctrl' || e.metaKey && key !== 'meta') {
+  _createClass(Keyboard, [{
-    key = 'ctrl+' + key;
+    key: 'handler',
-  }
+    value: function handler(e) {
+      var key = KEYCODES[e.keyCode];
 
-  var _handlers = handlers[key];
+      if (e.shiftKey && key !== 'shift') {
-
+        key = 'shift+' + key;
-  if (_handlers && _handlers.length > 0) {
-    _handlers.map(function (handler) {
-      var preventBubbling = handler();
-
-      if (preventBubbling === undefined || preventBubbling === true) {
-        e.preventDefault();
       }
-    });
-  }
-}
 
-exports.default = {
+      if (e.ctrlKey && key !== 'ctrl' || e.metaKey && key !== 'meta') {
-  init: function init(dom) {
+        key = 'ctrl+' + key;
-    bind(dom);
+      }
-  },
-  on: function on(key, handler) {
-    var keys = key.split(',').map(function (k) {
-      return k.trim();
-    });
 
-    keys.map(function (key) {
+      var listeners = this.listeners[key];
-      handlers[key] = handlers[key] || [];
+
-      handlers[key].push(handler);
+      if (listeners && listeners.length > 0) {
-    });
+        var _iteratorNormalCompletion = true;
-  }
+        var _didIteratorError = false;
-};
+        var _iteratorError = undefined;
+
+        try {
+          for (var _iterator = listeners[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+            var listener = _step.value;
+
+            var preventBubbling = listener();
+            if (preventBubbling === undefined || preventBubbling === true) {
+              e.preventDefault();
+            }
+          }
+        } catch (err) {
+          _didIteratorError = true;
+          _iteratorError = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion && _iterator.return) {
+              _iterator.return();
+            }
+          } finally {
+            if (_didIteratorError) {
+              throw _iteratorError;
+            }
+          }
+        }
+      }
+    }
+  }, {
+    key: 'on',
+    value: function on(key, listener) {
+      var _this = this;
+
+      var keys = key.split(',').map(function (k) {
+        return k.trim();
+      });
+
+      keys.map(function (key) {
+        _this.listeners[key] = _this.listeners[key] || [];
+        _this.listeners[key].push(listener);
+      });
+    }
+  }]);
+
+  return Keyboard;
+}();
+
+exports.default = Keyboard;
 module.exports = exports['default'];
 
 /***/ }),
@@ -652,6 +681,7 @@ var ColumnManager = function () {
     this.style = this.instance.style;
     this.wrapper = this.instance.wrapper;
     this.rowmanager = this.instance.rowmanager;
+    this.bodyScrollable = this.instance.bodyScrollable;
 
     this.bindEvents();
     exports.getDropdownHTML = getDropdownHTML = getDropdownHTML.bind(this, this.options.dropdownButton);
@@ -1314,14 +1344,13 @@ var DataTable = function () {
     this.prepare();
 
     this.style = new _style2.default(this);
+    this.keyboard = new _keyboard2.default(this.wrapper);
     this.datamanager = new _datamanager2.default(this.options);
     this.rowmanager = new _rowmanager2.default(this);
     this.columnmanager = new _columnmanager2.default(this);
     this.cellmanager = new _cellmanager2.default(this);
     this.bodyRenderer = new _bodyRenderer2.default(this);
 
-    _keyboard2.default.init(this.wrapper);
-
     if (this.options.data) {
       this.refresh();
     }
@@ -2130,10 +2159,6 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 var _utils = __webpack_require__(1);
 
-var _keyboard = __webpack_require__(2);
-
-var _keyboard2 = _interopRequireDefault(_keyboard);
-
 var _dom = __webpack_require__(0);
 
 var _dom2 = _interopRequireDefault(_dom);
@@ -2158,6 +2183,7 @@ var CellManager = function () {
     this.columnmanager = this.instance.columnmanager;
     this.rowmanager = this.instance.rowmanager;
     this.datamanager = this.instance.datamanager;
+    this.keyboard = this.instance.keyboard;
 
     this.bindEvents();
   }
@@ -2187,7 +2213,7 @@ var CellManager = function () {
         _this.activateEditing(cell);
       });
 
-      _keyboard2.default.on('enter', function (e) {
+      this.keyboard.on('enter', function (e) {
         if (_this.$focusedCell && !_this.$editingCell) {
           // enter keypress on focused cell
           _this.activateEditing(_this.$focusedCell);
@@ -2250,18 +2276,18 @@ var CellManager = function () {
       };
 
       ['left', 'right', 'up', 'down', 'tab'].map(function (direction) {
-        return _keyboard2.default.on(direction, function () {
+        return _this2.keyboard.on(direction, function () {
           return focusCell(direction);
         });
       });
 
       ['left', 'right', 'up', 'down'].map(function (direction) {
-        return _keyboard2.default.on('ctrl+' + direction, function () {
+        return _this2.keyboard.on('ctrl+' + direction, function () {
           return focusLastCell(direction);
         });
       });
 
-      _keyboard2.default.on('esc', function () {
+      this.keyboard.on('esc', function () {
         _this2.deactivateEditing();
       });
     }
@@ -2287,7 +2313,7 @@ var CellManager = function () {
       };
 
       ['left', 'right', 'up', 'down'].map(function (direction) {
-        return _keyboard2.default.on('shift+' + direction, function () {
+        return _this3.keyboard.on('shift+' + direction, function () {
           return _this3.selectArea(getNextSelectionCursor(direction));
         });
       });
@@ -2297,7 +2323,7 @@ var CellManager = function () {
     value: function bindCopyCellContents() {
       var _this4 = this;
 
-      _keyboard2.default.on('ctrl+c', function () {
+      this.keyboard.on('ctrl+c', function () {
         _this4.copyCellContents(_this4.$focusedCell, _this4.$selectionCursor);
       });
     }
@@ -2538,6 +2564,8 @@ var CellManager = function () {
   }, {
     key: 'activateEditing',
     value: function activateEditing($cell) {
+      this.focusCell($cell);
+
       var _$$data6 = _dom2.default.data($cell),
           rowIndex = _$$data6.rowIndex,
           colIndex = _$$data6.colIndex;

src/cellmanager.js

@@ -3,7 +3,6 @@ import {
   makeDataAttributeString,
   throttle
 } from './utils';
-import keyboard from './keyboard';
 import $ from './dom';
 import { getDropdownHTML } from './columnmanager';
 
@@ -17,6 +16,7 @@ export default class CellManager {
     this.columnmanager = this.instance.columnmanager;
     this.rowmanager = this.instance.rowmanager;
     this.datamanager = this.instance.datamanager;
+    this.keyboard = this.instance.keyboard;
 
     this.bindEvents();
   }
@@ -40,7 +40,7 @@ export default class CellManager {
       this.activateEditing(cell);
     });
 
-    keyboard.on('enter', (e) => {
+    this.keyboard.on('enter', (e) => {
       if (this.$focusedCell && !this.$editingCell) {
         // enter keypress on focused cell
         this.activateEditing(this.$focusedCell);
@@ -97,14 +97,14 @@ export default class CellManager {
     };
 
     ['left', 'right', 'up', 'down', 'tab'].map(
-      direction => keyboard.on(direction, () => focusCell(direction))
+      direction => this.keyboard.on(direction, () => focusCell(direction))
     );
 
     ['left', 'right', 'up', 'down'].map(
-      direction => keyboard.on('ctrl+' + direction, () => focusLastCell(direction))
+      direction => this.keyboard.on('ctrl+' + direction, () => focusLastCell(direction))
     );
 
-    keyboard.on('esc', () => {
+    this.keyboard.on('esc', () => {
       this.deactivateEditing();
     });
   }
@@ -127,13 +127,13 @@ export default class CellManager {
     };
 
     ['left', 'right', 'up', 'down'].map(
-      direction => keyboard.on('shift+' + direction,
+      direction => this.keyboard.on('shift+' + direction,
         () => this.selectArea(getNextSelectionCursor(direction)))
     );
   }
 
   bindCopyCellContents() {
-    keyboard.on('ctrl+c', () => {
+    this.keyboard.on('ctrl+c', () => {
       this.copyCellContents(this.$focusedCell, this.$selectionCursor);
     });
   }
@@ -326,6 +326,7 @@ export default class CellManager {
   }
 
   activateEditing($cell) {
+    this.focusCell($cell);
     const { rowIndex, colIndex } = $.data($cell);
 
     const col = this.columnmanager.getColumn(colIndex);

src/columnmanager.js

@@ -12,6 +12,7 @@ export default class ColumnManager {
     this.style = this.instance.style;
     this.wrapper = this.instance.wrapper;
     this.rowmanager = this.instance.rowmanager;
+    this.bodyScrollable = this.instance.bodyScrollable;
 
     this.bindEvents();
     getDropdownHTML = getDropdownHTML.bind(this, this.options.dropdownButton);
@@ -311,7 +312,6 @@ export default class ColumnManager {
   setupNaturalColumnWidth() {
     // set initial width as naturally calculated by table's first row
     $.each('.data-table-row[data-row-index="0"] .data-table-col', this.bodyScrollable).map($cell => {
-
       const { colIndex } = $.data($cell);
       if (this.getColumn(colIndex).width > 0) {
         // already set

src/datatable.js

@@ -5,7 +5,7 @@ import ColumnManager from './columnmanager';
 import RowManager from './rowmanager';
 import BodyRenderer from './body-renderer';
 import Style from './style';
-import keyboard from './keyboard';
+import Keyboard from './keyboard';
 import DEFAULT_OPTIONS from './defaults';
 import './style.scss';
 
@@ -35,14 +35,13 @@ class DataTable {
     this.prepare();
 
     this.style = new Style(this);
+    this.keyboard = new Keyboard(this.wrapper);
     this.datamanager = new DataManager(this.options);
     this.rowmanager = new RowManager(this);
     this.columnmanager = new ColumnManager(this);
     this.cellmanager = new CellManager(this);
     this.bodyRenderer = new BodyRenderer(this);
 
-    keyboard.init(this.wrapper);
-
     if (this.options.data) {
       this.refresh();
     }

src/keyboard.js

@@ -15,49 +15,41 @@ const KEYCODES = {
   67: 'c'
 };
 
-let initDone = false;
+export default class Keyboard {
-const handlers = {};
+  constructor(element) {
-
+    this.listeners = {};
-function bind(dom) {
+    $.on(element, 'keydown', this.handler.bind(this));
-  if (initDone) return;
-  $.on(dom, 'keydown', handler);
-  initDone = true;
-}
-
-function handler(e) {
-  let key = KEYCODES[e.keyCode];
-
-  if (e.shiftKey && key !== 'shift') {
-    key = 'shift+' + key;
   }
 
-  if ((e.ctrlKey && key !== 'ctrl') || (e.metaKey && key !== 'meta')) {
+  handler(e) {
-    key = 'ctrl+' + key;
+    let key = KEYCODES[e.keyCode];
-  }
 
-  const _handlers = handlers[key];
+    if (e.shiftKey && key !== 'shift') {
+      key = 'shift+' + key;
+    }
 
-  if (_handlers && _handlers.length > 0) {
+    if ((e.ctrlKey && key !== 'ctrl') || (e.metaKey && key !== 'meta')) {
-    _handlers.map(handler => {
+      key = 'ctrl+' + key;
-      const preventBubbling = handler();
+    }
 
-      if (preventBubbling === undefined || preventBubbling === true) {
+    const listeners = this.listeners[key];
-        e.preventDefault();
+
+    if (listeners && listeners.length > 0) {
+      for (let listener of listeners) {
+        const preventBubbling = listener();
+        if (preventBubbling === undefined || preventBubbling === true) {
+          e.preventDefault();
+        }
       }
-    });
+    }
   }
-}
 
-export default {
+  on(key, listener) {
-  init(dom) {
-    bind(dom);
-  },
-  on(key, handler) {
     const keys = key.split(',').map(k => k.trim());
 
     keys.map(key => {
-      handlers[key] = handlers[key] || [];
+      this.listeners[key] = this.listeners[key] || [];
-      handlers[key].push(handler);
+      this.listeners[key].push(listener);
     });
   }
-};
+}