jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

Mouse Selection

Browse Source
This commit is contained in:
Faris Ansari 2017-11-02 10:40:48 +05:30
parent d55ee1b45f
commit f9145845a9
4 changed files with 94 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -18,7 +18,7 @@
<body> <body>
<h1>Frappé DataTable</h1> <h1>Frappé DataTable</h1>
<button onclick="datatable.render()">Refresh</button> <button onclick="datatable.render()">Refresh</button>
<section style="width: 60%;"> <section style="width: 60%; font-size: 12px;">
</section> </section>
<script src="./node_modules/jquery/dist/jquery.js"></script> <script src="./node_modules/jquery/dist/jquery.js"></script>

69
lib/frappe-datatable.js
View File

@ -1351,6 +1351,7 @@ var CellManager = function () {
this.bindKeyboardNav(); this.bindKeyboardNav();
this.bindKeyboardSelection(); this.bindKeyboardSelection();
this.bindCopyCellContents(); this.bindCopyCellContents();
this.bindMouseEvents();
} }
}, { }, {
key: 'bindFocusCell', key: 'bindFocusCell',
@ -1445,18 +1446,9 @@ var CellManager = function () {
return $selectionCursor; return $selectionCursor;
}; };
var selectArea = function selectArea($selectionCursor) {
if (!_this4.$focusedCell) return;
if (_this4.selectArea(_this4.$focusedCell, $selectionCursor)) {
// valid selection
_this4.$selectionCursor = $selectionCursor;
}
};
['left', 'right', 'up', 'down'].map(function (direction) { ['left', 'right', 'up', 'down'].map(function (direction) {
return _keyboard2.default.on('shift+' + direction, function () { return _keyboard2.default.on('shift+' + direction, function () {
return selectArea(getNextSelectionCursor(direction)); return _this4.selectArea(getNextSelectionCursor(direction));
}); });
}); });
} }
@ -1469,6 +1461,27 @@ var CellManager = function () {
_this5.copyCellContents(_this5.$focusedCell, _this5.$selectionCursor); _this5.copyCellContents(_this5.$focusedCell, _this5.$selectionCursor);
}); });
} }
}, {
key: 'bindMouseEvents',
value: function bindMouseEvents() {
var _this6 = this;
var mouseDown = null;
this.bodyScrollable.on('mousedown', '.data-table-col', function (e) {
mouseDown = true;
_this6.focusCell($(e.currentTarget));
});
this.bodyScrollable.on('mouseup', function () {
mouseDown = false;
});
this.bodyScrollable.on('mousemove', '.data-table-col', function (e) {
if (!mouseDown) return;
_this6.selectArea($(e.currentTarget));
});
}
}, { }, {
key: 'focusCell', key: 'focusCell',
value: function focusCell($cell) { value: function focusCell($cell) {
@ -1477,7 +1490,7 @@ var CellManager = function () {
var _getCellAttr = this.getCellAttr($cell), var _getCellAttr = this.getCellAttr($cell),
colIndex = _getCellAttr.colIndex; colIndex = _getCellAttr.colIndex;
if (colIndex < this.instance.getFirstColumnIndex()) { if (this.isStandardCell(colIndex)) {
return; return;
} }
@ -1528,8 +1541,18 @@ var CellManager = function () {
} }
}, { }, {
key: 'selectArea', key: 'selectArea',
value: function selectArea($cell1, $cell2) { value: function selectArea($selectionCursor) {
var _this6 = this; if (!this.$focusedCell) return;
if (this._selectArea(this.$focusedCell, $selectionCursor)) {
// valid selection
this.$selectionCursor = $selectionCursor;
}
}
}, {
key: '_selectArea',
value: function _selectArea($cell1, $cell2) {
var _this7 = this;
var cells = this.getCellsInRange.apply(this, arguments); var cells = this.getCellsInRange.apply(this, arguments);
@ -1540,7 +1563,7 @@ var CellManager = function () {
c = _ref2[0], c = _ref2[0],
r = _ref2[1]; r = _ref2[1];
return _this6.getCell$(r, c)[0]; return _this7.getCell$(r, c)[0];
}); });
$($cells).addClass('highlight'); $($cells).addClass('highlight');
@ -1588,6 +1611,10 @@ var CellManager = function () {
colIndex2 = _ref4[1]; colIndex2 = _ref4[1];
} }
if (this.isStandardCell(colIndex1) || this.isStandardCell(colIndex2)) {
return false;
}
var cells = []; var cells = [];
var colIndex = colIndex1; var colIndex = colIndex1;
var rowIndex = rowIndex1; var rowIndex = rowIndex1;
@ -1691,7 +1718,7 @@ var CellManager = function () {
}, { }, {
key: 'submitEditing', key: 'submitEditing',
value: function submitEditing($cell) { value: function submitEditing($cell) {
var _this7 = this; var _this8 = this;
var _getCellAttr5 = this.getCellAttr($cell), var _getCellAttr5 = this.getCellAttr($cell),
rowIndex = _getCellAttr5.rowIndex, rowIndex = _getCellAttr5.rowIndex,
@ -1707,7 +1734,7 @@ var CellManager = function () {
if (done && done.then) { if (done && done.then) {
// wait for promise then update internal state // wait for promise then update internal state
done.then(function () { done.then(function () {
return _this7.updateCell(rowIndex, colIndex, value); return _this8.updateCell(rowIndex, colIndex, value);
}); });
} else { } else {
this.updateCell(rowIndex, colIndex, value); this.updateCell(rowIndex, colIndex, value);
@ -1720,7 +1747,7 @@ var CellManager = function () {
}, { }, {
key: 'copyCellContents', key: 'copyCellContents',
value: function copyCellContents($cell1, $cell2) { value: function copyCellContents($cell1, $cell2) {
var _this8 = this; var _this9 = this;
var cells = this.getCellsInRange.apply(this, arguments); var cells = this.getCellsInRange.apply(this, arguments);
@ -1729,7 +1756,7 @@ var CellManager = function () {
var values = cells var values = cells
// get cell objects // get cell objects
.map(function (index) { .map(function (index) {
return _this8.getCell.apply(_this8, _toConsumableArray(index)); return _this9.getCell.apply(_this9, _toConsumableArray(index));
}) })
// convert to array of rows // convert to array of rows
.reduce(function (acc, curr) { .reduce(function (acc, curr) {
@ -1765,6 +1792,12 @@ var CellManager = function () {
$cell.html((0, _utils.getCellContent)(cell)); $cell.html((0, _utils.getCellContent)(cell));
} }
}, {
key: 'isStandardCell',
value: function isStandardCell(colIndex) {
// Standard cells are in Sr. No and Checkbox column
return colIndex < this.instance.getFirstColumnIndex();
}
}, { }, {
key: 'getCell$', key: 'getCell$',
value: function getCell$(rowIndex, colIndex) { value: function getCell$(rowIndex, colIndex) {

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

File diff suppressed because one or more lines are too long

53
src/cellmanager.js
View File

@ -22,6 +22,7 @@ export default class CellManager {
this.bindKeyboardNav(); this.bindKeyboardNav();
this.bindKeyboardSelection(); this.bindKeyboardSelection();
this.bindCopyCellContents(); this.bindCopyCellContents();
this.bindMouseEvents();
} }
bindFocusCell() { bindFocusCell() {
@ -102,18 +103,9 @@ export default class CellManager {
return $selectionCursor; return $selectionCursor;
}; };
const selectArea = ($selectionCursor) => {
if (!this.$focusedCell) return;
if (this.selectArea(this.$focusedCell, $selectionCursor)) {
// valid selection
this.$selectionCursor = $selectionCursor;
}
};
['left', 'right', 'up', 'down'].map( ['left', 'right', 'up', 'down'].map(
direction => keyboard.on('shift+' + direction, direction => keyboard.on('shift+' + direction,
() => selectArea(getNextSelectionCursor(direction))) () => this.selectArea(getNextSelectionCursor(direction)))
); );
} }
@ -123,11 +115,30 @@ export default class CellManager {
}); });
} }
bindMouseEvents() {
let mouseDown = null;
this.bodyScrollable.on('mousedown', '.data-table-col', (e) => {
mouseDown = true;
this.focusCell($(e.currentTarget));
});
this.bodyScrollable.on('mouseup', () => {
mouseDown = false;
});
this.bodyScrollable.on('mousemove', '.data-table-col', (e) => {
if (!mouseDown) return;
this.selectArea($(e.currentTarget));
});
}
focusCell($cell) { focusCell($cell) {
if (!$cell.length) return; if (!$cell.length) return;
const { colIndex } = this.getCellAttr($cell); const { colIndex } = this.getCellAttr($cell);
if (colIndex < this.instance.getFirstColumnIndex()) { if (this.isStandardCell(colIndex)) {
return; return;
} }
@ -173,7 +184,16 @@ export default class CellManager {
}; };
} }
selectArea($cell1, $cell2) { selectArea($selectionCursor) {
if (!this.$focusedCell) return;
if (this._selectArea(this.$focusedCell, $selectionCursor)) {
// valid selection
this.$selectionCursor = $selectionCursor;
}
};
_selectArea($cell1, $cell2) {
const cells = this.getCellsInRange(...arguments); const cells = this.getCellsInRange(...arguments);
if (!cells) return false; if (!cells) return false;
@ -213,6 +233,10 @@ export default class CellManager {
[colIndex1, colIndex2] = [colIndex2, colIndex1]; [colIndex1, colIndex2] = [colIndex2, colIndex1];
} }
if (this.isStandardCell(colIndex1) || this.isStandardCell(colIndex2)) {
return false;
}
let cells = []; let cells = [];
let colIndex = colIndex1; let colIndex = colIndex1;
let rowIndex = rowIndex1; let rowIndex = rowIndex1;
@ -367,6 +391,11 @@ export default class CellManager {
$cell.html(getCellContent(cell)); $cell.html(getCellContent(cell));
} }
isStandardCell(colIndex) {
// Standard cells are in Sr. No and Checkbox column
return colIndex < this.instance.getFirstColumnIndex();
}
getCell$(rowIndex, colIndex) { getCell$(rowIndex, colIndex) {
return this.bodyScrollable.find(`.data-table-col[data-row-index="${rowIndex}"][data-col-index="${colIndex}"]`); return this.bodyScrollable.find(`.data-table-col[data-row-index="${rowIndex}"][data-col-index="${colIndex}"]`);
} }