jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

Fix scrollToRow, Add empty state

Browse Source
This commit is contained in:
Faris Ansari 2017-12-29 14:23:25 +05:30
parent d89f37481f
commit 41995adf6a
7 changed files with 184 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

266
lib/frappe-datatable.js
View File

@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 5);
/******/ return __webpack_require__(__webpack_require__.s = 6);
/******/ })
/************************************************************************/
/******/ ([
@ -286,17 +286,10 @@ $.inViewport = function (el, parentEl) {
return top >= pTop && left >= pLeft && bottom <= pBottom && right <= pRight;
};
$.scrollTop = function scrollTop(element, offset) {
var c = 0;
scroll();
function scroll() {
if (c <= offset) {
c = c + offset / 8;
requestAnimationFrame(scroll);
element.scrollTop = c;
}
}
$.scrollTop = function scrollTop(element, pixels) {
requestAnimationFrame(function () {
element.scrollTop = pixels;
});
};
module.exports = exports['default'];
@ -746,26 +739,28 @@ var RowManager = function () {
}, {
key: 'scrollToRow',
value: function scrollToRow(rowIndex) {
rowIndex = +rowIndex;
this._lastScrollTo = this._lastScrollTo || 0;
var $row = this.getRow$(rowIndex);
if (_dom2.default.inViewport($row, this.bodyScrollable)) return;
var _$row$getBoundingClie = $row.getBoundingClientRect(),
top = _$row$getBoundingClie.top,
height = _$row$getBoundingClie.height;
var _bodyScrollable$getBo = this.bodyScrollable.getBoundingClientRect(),
pTop = _bodyScrollable$getBo.top;
top = _bodyScrollable$getBo.top,
bottom = _bodyScrollable$getBo.bottom;
var offset = void 0;
if (top < pTop) {
offset = this.bodyScrollable.scrollTop - (pTop - top) - height;
if (offset < 0) offset = 0;
var rowsInView = Math.floor((bottom - top) / height);
var offset = 0;
if (rowIndex > this._lastScrollTo) {
offset = height * (rowIndex + 1 - rowsInView);
} else {
offset = this.bodyScrollable.scrollTop + (top - this.bodyScrollable.clientHeight);
offset = height * (rowIndex + 1 - 1);
}
console.log(rowIndex, offset);
this._lastScrollTo = rowIndex;
_dom2.default.scrollTop(this.bodyScrollable, offset);
}
}, {
@ -811,7 +806,7 @@ exports.getEditCellHTML = getEditCellHTML;
var _utils = __webpack_require__(1);
var _keyboard = __webpack_require__(8);
var _keyboard = __webpack_require__(4);
var _keyboard2 = _interopRequireDefault(_keyboard);
@ -819,7 +814,7 @@ var _dom = __webpack_require__(0);
var _dom2 = _interopRequireDefault(_dom);
var _columnmanager = __webpack_require__(4);
var _columnmanager = __webpack_require__(5);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@ -874,7 +869,7 @@ var CellManager = function () {
_this.activateEditing(_this.$focusedCell);
} else if (_this.$editingCell) {
// enter keypress on editing cell
_this.submitEditing(_this.$editingCell);
_this.submitEditing();
_this.deactivateEditing();
}
});
@ -1300,9 +1295,12 @@ var CellManager = function () {
}
}, {
key: 'submitEditing',
value: function submitEditing($cell) {
value: function submitEditing() {
var _this7 = this;
if (!this.$editingCell) return;
var $cell = this.$editingCell;
var _$$data8 = _dom2.default.data($cell),
rowIndex = _$$data8.rowIndex,
colIndex = _$$data8.colIndex;
@ -1533,6 +1531,88 @@ function cellSelector(colIndex, rowIndex) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _dom = __webpack_require__(0);
var _dom2 = _interopRequireDefault(_dom);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var KEYCODES = {
13: 'enter',
91: 'meta',
16: 'shift',
17: 'ctrl',
18: 'alt',
37: 'left',
38: 'up',
39: 'right',
40: 'down',
9: 'tab',
27: 'esc',
67: 'c'
};
var initDone = false;
var handlers = {};
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;
}
if (e.ctrlKey && key !== 'ctrl' || e.metaKey && key !== 'meta') {
key = 'ctrl+' + key;
}
var _handlers = handlers[key];
if (_handlers && _handlers.length > 0) {
_handlers.map(function (handler) {
var preventBubbling = handler();
if (preventBubbling === undefined || preventBubbling === true) {
e.preventDefault();
}
});
}
}
exports.default = {
init: function init(dom) {
bind(dom);
},
on: function on(key, handler) {
var keys = key.split(',').map(function (k) {
return k.trim();
});
keys.map(function (key) {
handlers[key] = handlers[key] || [];
handlers[key].push(handler);
});
}
};
module.exports = exports['default'];
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@ -2123,7 +2203,7 @@ var getDropdownHTML = function getDropdownHTML() {
exports.getDropdownHTML = getDropdownHTML;
/***/ }),
/* 5 */
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@ -2133,7 +2213,7 @@ Object.defineProperty(exports, "__esModule", {
value: true
});
var _datatable = __webpack_require__(6);
var _datatable = __webpack_require__(7);
var _datatable2 = _interopRequireDefault(_datatable);
@ -2149,7 +2229,7 @@ exports.default = _datatable2.default;
module.exports = exports['default'];
/***/ }),
/* 6 */
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@ -2165,7 +2245,7 @@ var _dom = __webpack_require__(0);
var _dom2 = _interopRequireDefault(_dom);
var _datamanager = __webpack_require__(7);
var _datamanager = __webpack_require__(8);
var _datamanager2 = _interopRequireDefault(_datamanager);
@ -2173,7 +2253,7 @@ var _cellmanager = __webpack_require__(3);
var _cellmanager2 = _interopRequireDefault(_cellmanager);
var _columnmanager = __webpack_require__(4);
var _columnmanager = __webpack_require__(5);
var _columnmanager2 = _interopRequireDefault(_columnmanager);
@ -2189,7 +2269,7 @@ var _style = __webpack_require__(12);
var _style2 = _interopRequireDefault(_style);
var _keyboard = __webpack_require__(8);
var _keyboard = __webpack_require__(4);
var _keyboard2 = _interopRequireDefault(_keyboard);
@ -2397,7 +2477,7 @@ exports.default = DataTable;
module.exports = exports['default'];
/***/ }),
/* 7 */
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@ -2948,88 +3028,6 @@ var DataError = exports.DataError = function (_extendableBuiltin2) {
;
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _dom = __webpack_require__(0);
var _dom2 = _interopRequireDefault(_dom);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var KEYCODES = {
13: 'enter',
91: 'meta',
16: 'shift',
17: 'ctrl',
18: 'alt',
37: 'left',
38: 'up',
39: 'right',
40: 'down',
9: 'tab',
27: 'esc',
67: 'c'
};
var initDone = false;
var handlers = {};
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;
}
if (e.ctrlKey && key !== 'ctrl' || e.metaKey && key !== 'meta') {
key = 'ctrl+' + key;
}
var _handlers = handlers[key];
if (_handlers && _handlers.length > 0) {
_handlers.map(function (handler) {
var preventBubbling = handler();
if (preventBubbling === undefined || preventBubbling === true) {
e.preventDefault();
}
});
}
}
exports.default = {
init: function init(dom) {
bind(dom);
},
on: function on(key, handler) {
var keys = key.split(',').map(function (k) {
return k.trim();
});
keys.map(function (key) {
handlers[key] = handlers[key] || [];
handlers[key].push(handler);
});
}
};
module.exports = exports['default'];
/***/ }),
/* 9 */
/***/ (function(module, exports) {
@ -3102,23 +3100,31 @@ var BodyRenderer = function () {
value: function renderBodyWithClusterize() {
var _this = this;
// empty body
this.bodyScrollable.innerHTML = '\n <table class="data-table-body">\n ' + getBodyHTML([]) + '\n </table>\n ';
if (!this.clusterize) {
// empty body
this.bodyScrollable.innerHTML = '\n <table class="data-table-body">\n ' + getBodyHTML([]) + '\n </table>\n ';
// Rows will be appended as promises, so we don't block
// even for the first page render
this.clusterize = new _clusterize2.default({
rows: [],
scrollElem: this.bodyScrollable,
contentElem: (0, _dom2.default)('tbody', this.bodyScrollable),
callbacks: {
clusterChanged: function clusterChanged() {
_this.rowmanager.highlightCheckedRows();
_this.cellmanager.selectAreaOnClusterChanged();
_this.cellmanager.focusCellOnClusterChanged();
}
}
});
// Rows will be appended as promises, so we don't block
// even for the first page render
this.clusterize = new _clusterize2.default({
rows: [],
scrollElem: this.bodyScrollable,
contentElem: (0, _dom2.default)('tbody', this.bodyScrollable),
callbacks: {
clusterChanged: function clusterChanged() {
_this.rowmanager.highlightCheckedRows();
_this.cellmanager.selectAreaOnClusterChanged();
_this.cellmanager.focusCellOnClusterChanged();
}
},
/* eslint-disable */
no_data_text: 'Loading..',
no_data_class: 'empty-state'
/* eslint-enable */
});
} else {
this.clusterize.update([]);
}
this.appendRemainingData();
// setDimensions will work only if there is atleast one row appended

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

File diff suppressed because one or more lines are too long

2
lib/frappe-datatable.min.js vendored
View File

File diff suppressed because one or more lines are too long

48
src/body-renderer.js
View File

@ -35,27 +35,35 @@ export default class BodyRenderer {
renderBodyWithClusterize() {
// empty body
this.bodyScrollable.innerHTML = `
<table class="data-table-body">
${getBodyHTML([])}
</table>
`;
if (!this.clusterize) {
// empty body
this.bodyScrollable.innerHTML = `
<table class="data-table-body">
${getBodyHTML([])}
</table>
`;
// Rows will be appended as promises, so we don't block
// even for the first page render
this.clusterize = new Clusterize({
rows: [],
scrollElem: this.bodyScrollable,
contentElem: $('tbody', this.bodyScrollable),
callbacks: {
clusterChanged: () => {
this.rowmanager.highlightCheckedRows();
this.cellmanager.selectAreaOnClusterChanged();
this.cellmanager.focusCellOnClusterChanged();
}
}
});
// Rows will be appended as promises, so we don't block
// even for the first page render
this.clusterize = new Clusterize({
rows: [],
scrollElem: this.bodyScrollable,
contentElem: $('tbody', this.bodyScrollable),
callbacks: {
clusterChanged: () => {
this.rowmanager.highlightCheckedRows();
this.cellmanager.selectAreaOnClusterChanged();
this.cellmanager.focusCellOnClusterChanged();
}
},
/* eslint-disable */
no_data_text: 'Loading..',
no_data_class: 'empty-state'
/* eslint-enable */
});
} else {
this.clusterize.update([]);
}
this.appendRemainingData();
// setDimensions will work only if there is atleast one row appended

6
src/cellmanager.js
View File

@ -46,7 +46,7 @@ export default class CellManager {
this.activateEditing(this.$focusedCell);
} else if (this.$editingCell) {
// enter keypress on editing cell
this.submitEditing(this.$editingCell);
this.submitEditing();
this.deactivateEditing();
}
});
@ -398,7 +398,9 @@ export default class CellManager {
};
}
submitEditing($cell) {
submitEditing() {
if (!this.$editingCell) return;
const $cell = this.$editingCell;
const { rowIndex, colIndex } = $.data($cell);
if ($cell) {

15
src/dom.js
View File

@ -165,15 +165,8 @@ $.inViewport = (el, parentEl) => {
return top >= pTop && left >= pLeft && bottom <= pBottom && right <= pRight;
};
$.scrollTop = function scrollTop(element, offset) {
let c = 0;
scroll();
function scroll() {
if (c <= offset) {
c = c + offset / 8;
requestAnimationFrame(scroll);
element.scrollTop = c;
}
}
$.scrollTop = function scrollTop(element, pixels) {
requestAnimationFrame(() => {
element.scrollTop = pixels;
});
};

19
src/rowmanager.js
View File

@ -161,22 +161,23 @@ export default class RowManager {
}
scrollToRow(rowIndex) {
rowIndex = +rowIndex;
this._lastScrollTo = this._lastScrollTo || 0;
const $row = this.getRow$(rowIndex);
if ($.inViewport($row, this.bodyScrollable)) return;
const { top, height } = $row.getBoundingClientRect();
const { top: pTop } = this.bodyScrollable.getBoundingClientRect();
const { height } = $row.getBoundingClientRect();
const { top, bottom } = this.bodyScrollable.getBoundingClientRect();
const rowsInView = Math.floor((bottom - top) / height);
let offset;
if (top < pTop) {
offset = this.bodyScrollable.scrollTop - (pTop - top) - height;
if (offset < 0) offset = 0;
let offset = 0;
if (rowIndex > this._lastScrollTo) {
offset = height * ((rowIndex + 1) - rowsInView);
} else {
offset = this.bodyScrollable.scrollTop + (top - this.bodyScrollable.clientHeight);
offset = height * ((rowIndex + 1) - 1);
}
console.log(rowIndex, offset);
this._lastScrollTo = rowIndex;
$.scrollTop(this.bodyScrollable, offset);
}
}