jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

focusCell and selectArea on clusterChanged

Browse Source
This commit is contained in:
Faris Ansari 2017-11-17 22:35:13 +05:30
parent 0a08f90740
commit 95371bc86b
5 changed files with 132 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
lib/frappe-datatable.js
View File

@ -672,11 +672,20 @@ var CellManager = function () {
}, {
key: 'focusCell',
value: function focusCell($cell) {
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
_ref$skipClearSelecti = _ref.skipClearSelection,
skipClearSelection = _ref$skipClearSelecti === undefined ? 0 : _ref$skipClearSelecti;
if (!$cell) return;
// don't focus if already editing cell
if ($cell === this.$editingCell) return;
// don't focus checkbox cell
if (this.options.addCheckboxColumn && colIndex === 0) {
return;
}
var _$$data3 = _dom2.default.data($cell),
colIndex = _$$data3.colIndex,
isHeader = _$$data3.isHeader;
@ -686,10 +695,8 @@ var CellManager = function () {
}
this.deactivateEditing();
this.clearSelection();
if (this.options.addCheckboxColumn && colIndex === 0) {
return;
if (!skipClearSelection) {
this.clearSelection();
}
if (this.$focusedCell) {
@ -725,6 +732,42 @@ var CellManager = function () {
this.lastHeaders = [colHeader, rowHeader];
}
}, {
key: 'selectAreaOnClusterChanged',
value: function selectAreaOnClusterChanged() {
if (!(this.$focusedCell && this.$selectionCursor)) return;
var _$$data5 = _dom2.default.data(this.$selectionCursor),
colIndex = _$$data5.colIndex,
rowIndex = _$$data5.rowIndex;
var $cell = this.getCell$(colIndex, rowIndex);
if (!$cell || $cell === this.$selectionCursor) return;
// selectArea needs $focusedCell
var fCell = _dom2.default.data(this.$focusedCell);
this.$focusedCell = this.getCell$(fCell.colIndex, fCell.rowIndex);
this.selectArea($cell);
}
}, {
key: 'focusCellOnClusterChanged',
value: function focusCellOnClusterChanged() {
if (!this.$focusedCell) return;
var _$$data6 = _dom2.default.data(this.$focusedCell),
colIndex = _$$data6.colIndex,
rowIndex = _$$data6.rowIndex;
var $cell = this.getCell$(colIndex, rowIndex);
if (!$cell) return;
// this function is called after selectAreaOnClusterChanged,
// focusCell calls clearSelection which resets the area selection
// so a flag to skip it
this.focusCell($cell, { skipClearSelection: 1 });
}
}, {
key: 'selectArea',
value: function selectArea($selectionCursor) {
@ -784,15 +827,15 @@ var CellManager = function () {
}
if (rowIndex1 > rowIndex2) {
var _ref = [rowIndex2, rowIndex1];
rowIndex1 = _ref[0];
rowIndex2 = _ref[1];
var _ref2 = [rowIndex2, rowIndex1];
rowIndex1 = _ref2[0];
rowIndex2 = _ref2[1];
}
if (colIndex1 > colIndex2) {
var _ref2 = [colIndex2, colIndex1];
colIndex1 = _ref2[0];
colIndex2 = _ref2[1];
var _ref3 = [colIndex2, colIndex1];
colIndex1 = _ref3[0];
colIndex2 = _ref3[1];
}
if (this.isStandardCell(colIndex1) || this.isStandardCell(colIndex2)) {
@ -836,9 +879,9 @@ var CellManager = function () {
}, {
key: 'activateEditing',
value: function activateEditing($cell) {
var _$$data5 = _dom2.default.data($cell),
rowIndex = _$$data5.rowIndex,
colIndex = _$$data5.colIndex;
var _$$data7 = _dom2.default.data($cell),
rowIndex = _$$data7.rowIndex,
colIndex = _$$data7.colIndex;
var col = this.instance.columnmanager.getColumn(colIndex);
@ -847,9 +890,9 @@ var CellManager = function () {
}
if (this.$editingCell) {
var _$$data6 = _dom2.default.data(this.$editingCell),
_rowIndex = _$$data6._rowIndex,
_colIndex = _$$data6._colIndex;
var _$$data8 = _dom2.default.data(this.$editingCell),
_rowIndex = _$$data8._rowIndex,
_colIndex = _$$data8._colIndex;
if (rowIndex === _rowIndex && colIndex === _colIndex) {
// editing the same cell
@ -910,9 +953,9 @@ var CellManager = function () {
value: function submitEditing($cell) {
var _this7 = this;
var _$$data7 = _dom2.default.data($cell),
rowIndex = _$$data7.rowIndex,
colIndex = _$$data7.colIndex;
var _$$data9 = _dom2.default.data($cell),
rowIndex = _$$data9.rowIndex,
colIndex = _$$data9.colIndex;
if ($cell) {
var editing = this.currentCellEditing;
@ -991,13 +1034,13 @@ var CellManager = function () {
}, {
key: 'getCell$',
value: function getCell$(colIndex, rowIndex) {
return (0, _dom2.default)('.data-table-col[data-row-index="' + rowIndex + '"][data-col-index="' + colIndex + '"]', this.bodyScrollable);
return (0, _dom2.default)(cellSelector(colIndex, rowIndex), this.bodyScrollable);
}
}, {
key: 'getAboveCell$',
value: function getAboveCell$($cell) {
var _$$data8 = _dom2.default.data($cell),
colIndex = _$$data8.colIndex;
var _$$data10 = _dom2.default.data($cell),
colIndex = _$$data10.colIndex;
var $aboveRow = $cell.parentElement.previousElementSibling;
@ -1006,8 +1049,8 @@ var CellManager = function () {
}, {
key: 'getBelowCell$',
value: function getBelowCell$($cell) {
var _$$data9 = _dom2.default.data($cell),
colIndex = _$$data9.colIndex;
var _$$data11 = _dom2.default.data($cell),
colIndex = _$$data11.colIndex;
var $belowRow = $cell.parentElement.nextElementSibling;
@ -1091,8 +1134,8 @@ var CellManager = function () {
}, {
key: 'scrollToCell',
value: function scrollToCell($cell) {
var _$$data10 = _dom2.default.data($cell),
rowIndex = _$$data10.rowIndex;
var _$$data12 = _dom2.default.data($cell),
rowIndex = _$$data12.rowIndex;
this.scrollToRow(rowIndex);
}
@ -1141,6 +1184,10 @@ function getEditCellHTML() {
return '\n <div class="edit-cell"></div>\n ';
}
function cellSelector(colIndex, rowIndex) {
return '.data-table-col[data-col-index="' + colIndex + '"][data-row-index="' + rowIndex + '"]';
}
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
@ -1277,7 +1324,8 @@ var RowManager = function () {
value: function highlightRow(rowIndex) {
var toggle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var $row = (0, _dom2.default)('.data-table-row[data-row-index="' + rowIndex + '"]', this.bodyScrollable);
var $row = this.getRow$(rowIndex);
if (!$row) return;
if (toggle) {
$row.classList.add('row-highlight');
@ -1296,6 +1344,11 @@ var RowManager = function () {
this.bodyScrollable.classList.remove('row-highlight-all');
}
}
}, {
key: 'getRow$',
value: function getRow$(rowIndex) {
return (0, _dom2.default)('.data-table-row[data-row-index="' + rowIndex + '"]', this.bodyScrollable);
}
}, {
key: 'getTotalRows',
value: function getTotalRows() {
@ -1517,6 +1570,8 @@ var DataTable = function () {
callbacks: {
clusterChanged: function clusterChanged() {
_this.rowmanager.highlightCheckedRows();
_this.cellmanager.selectAreaOnClusterChanged();
_this.cellmanager.focusCellOnClusterChanged();
}
}
});
@ -3042,7 +3097,7 @@ module.exports = function (css) {
/* 16 */
/***/ (function(module, exports) {
module.exports = {"name":"frappe-datatable","version":"0.0.1","description":"A modern datatable library for the web","main":"lib/frappe-datatable.js","scripts":{"build":"webpack --env build","dev":"webpack --progress --colors --watch --env dev","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"},"devDependencies":{"babel-cli":"6.24.1","babel-core":"6.24.1","babel-eslint":"7.2.3","babel-loader":"7.0.0","babel-plugin-add-module-exports":"0.2.1","babel-preset-env":"^1.6.1","chai":"3.5.0","css-loader":"^0.28.7","eslint":"3.19.0","eslint-loader":"1.7.1","mocha":"3.3.0","node-sass":"^4.5.3","puppeteer":"^0.13.0","sass-loader":"^6.0.6","style-loader":"^0.18.2","webpack":"^3.1.0","yargs":"7.1.0"},"repository":{"type":"git","url":"https://github.com/frappe/datatable.git"},"keywords":["webpack","es6","starter","library","universal","umd","commonjs"],"author":"Faris Ansari","license":"MIT","bugs":{"url":"https://github.com/frappe/datatable/issues"},"homepage":"https://frappe.github.io/datatable","dependencies":{"clusterize.js":"^0.18.0"}}
module.exports = {"name":"frappe-datatable","version":"0.0.1","description":"A modern datatable library for the web","main":"lib/frappe-datatable.js","scripts":{"build":"webpack --env build","dev":"webpack --progress --colors --watch --env dev","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"},"devDependencies":{"babel-cli":"6.24.1","babel-core":"6.24.1","babel-eslint":"7.2.3","babel-loader":"7.0.0","babel-plugin-add-module-exports":"0.2.1","babel-preset-env":"^1.6.1","chai":"3.5.0","css-loader":"^0.28.7","eslint":"3.19.0","eslint-loader":"1.7.1","mocha":"3.3.0","node-sass":"^4.5.3","sass-loader":"^6.0.6","style-loader":"^0.18.2","webpack":"^3.1.0","yargs":"7.1.0"},"repository":{"type":"git","url":"https://github.com/frappe/datatable.git"},"keywords":["webpack","es6","starter","library","universal","umd","commonjs"],"author":"Faris Ansari","license":"MIT","bugs":{"url":"https://github.com/frappe/datatable/issues"},"homepage":"https://frappe.github.io/datatable","dependencies":{"clusterize.js":"^0.18.0"}}
/***/ })
/******/ ]);

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

File diff suppressed because one or more lines are too long

46
src/cellmanager.js
View File

@ -175,12 +175,17 @@ export default class CellManager {
});
}
focusCell($cell) {
focusCell($cell, { skipClearSelection = 0 } = {}) {
if (!$cell) return;
// don't focus if already editing cell
if ($cell === this.$editingCell) return;
// don't focus checkbox cell
if (this.options.addCheckboxColumn && colIndex === 0) {
return;
}
const { colIndex, isHeader } = $.data($cell);
if (this.isStandardCell(colIndex) || isHeader) {
@ -188,10 +193,8 @@ export default class CellManager {
}
this.deactivateEditing();
this.clearSelection();
if (this.options.addCheckboxColumn && colIndex === 0) {
return;
if (!skipClearSelection) {
this.clearSelection();
}
if (this.$focusedCell) {
@ -224,6 +227,33 @@ export default class CellManager {
this.lastHeaders = [colHeader, rowHeader];
}
selectAreaOnClusterChanged() {
if (!(this.$focusedCell && this.$selectionCursor)) return;
const { colIndex, rowIndex } = $.data(this.$selectionCursor);
const $cell = this.getCell$(colIndex, rowIndex);
if (!$cell || $cell === this.$selectionCursor) return;
// selectArea needs $focusedCell
const fCell = $.data(this.$focusedCell);
this.$focusedCell = this.getCell$(fCell.colIndex, fCell.rowIndex);
this.selectArea($cell);
}
focusCellOnClusterChanged() {
if (!this.$focusedCell) return;
const { colIndex, rowIndex } = $.data(this.$focusedCell);
const $cell = this.getCell$(colIndex, rowIndex);
if (!$cell) return;
// this function is called after selectAreaOnClusterChanged,
// focusCell calls clearSelection which resets the area selection
// so a flag to skip it
this.focusCell($cell, { skipClearSelection: 1 });
}
selectArea($selectionCursor) {
if (!this.$focusedCell) return;
@ -442,7 +472,7 @@ export default class CellManager {
}
getCell$(colIndex, rowIndex) {
return $(`.data-table-col[data-row-index="${rowIndex}"][data-col-index="${colIndex}"]`, this.bodyScrollable);
return $(cellSelector(colIndex, rowIndex), this.bodyScrollable);
}
getAboveCell$($cell) {
@ -571,3 +601,7 @@ export function getEditCellHTML() {
<div class="edit-cell"></div>
`;
}
function cellSelector(colIndex, rowIndex) {
return `.data-table-col[data-col-index="${colIndex}"][data-row-index="${rowIndex}"]`;
}

2
src/datatable.js
View File

@ -136,6 +136,8 @@ export default class DataTable {
callbacks: {
clusterChanged: () => {
this.rowmanager.highlightCheckedRows();
this.cellmanager.selectAreaOnClusterChanged();
this.cellmanager.focusCellOnClusterChanged();
}
}
});

7
src/rowmanager.js
View File

@ -95,7 +95,8 @@ export default class RowManager {
}
highlightRow(rowIndex, toggle = true) {
const $row = $(`.data-table-row[data-row-index="${rowIndex}"]`, this.bodyScrollable);
const $row = this.getRow$(rowIndex);
if (!$row) return;
if (toggle) {
$row.classList.add('row-highlight');
@ -112,6 +113,10 @@ export default class RowManager {
}
}
getRow$(rowIndex) {
return $(`.data-table-row[data-row-index="${rowIndex}"]`, this.bodyScrollable);
}
getTotalRows() {
return this.datamanager.getRowCount();
}