jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

keyboard and bodyscroller fixes

Browse Source
This commit is contained in:
Rushabh Mehta 2018-02-15 22:05:54 +05:30
parent 507b173243
commit af24f0e679
6 changed files with 115 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
lib/frappe-datatable.js
View File

@ -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 handlers = {};
var Keyboard = function () {
function Keyboard(element) {
_classCallCheck(this, Keyboard);
function bind(dom) {
if (initDone) return;
_dom2.default.on(dom, 'keydown', handler);
initDone = true;
}
function handler(e) {
var key = KEYCODES[e.keyCode];
if (e.shiftKey && key !== 'shift') {
key = 'shift+' + key;
this.listeners = {};
_dom2.default.on(element, 'keydown', this.handler.bind(this));
}
if (e.ctrlKey && key !== 'ctrl' || e.metaKey && key !== 'meta') {
key = 'ctrl+' + key;
}
_createClass(Keyboard, [{
key: 'handler',
value: function handler(e) {
var key = KEYCODES[e.keyCode];
var _handlers = handlers[key];
if (_handlers && _handlers.length > 0) {
_handlers.map(function (handler) {
var preventBubbling = handler();
if (preventBubbling === undefined || preventBubbling === true) {
e.preventDefault();
if (e.shiftKey && key !== 'shift') {
key = 'shift+' + key;
}
});
}
}
exports.default = {
init: function init(dom) {
bind(dom);
},
on: function on(key, handler) {
var keys = key.split(',').map(function (k) {
return k.trim();
});
if (e.ctrlKey && key !== 'ctrl' || e.metaKey && key !== 'meta') {
key = 'ctrl+' + key;
}
keys.map(function (key) {
handlers[key] = handlers[key] || [];
handlers[key].push(handler);
});
}
};
var listeners = this.listeners[key];
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);
});
}

2
lib/frappe-datatable.js.map
View File

File diff suppressed because one or more lines are too long

14
src/cellmanager.js
View File

@ -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);
});
}

2
src/columnmanager.js
View File

@ -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

5
src/datatable.js
View File

@ -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();
}

58
src/keyboard.js
View File

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