diff --git a/lib/frappe-datatable.js b/lib/frappe-datatable.js
index 9b8fd22..fe8c8bb 100644
--- a/lib/frappe-datatable.js
+++ b/lib/frappe-datatable.js
@@ -1,13 +1,13 @@
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
- module.exports = factory(require("clusterize.js"), require("sortablejs"));
+ module.exports = factory(require("sortablejs"), require("clusterize.js"));
else if(typeof define === 'function' && define.amd)
define("DataTable", [, ], factory);
else if(typeof exports === 'object')
- exports["DataTable"] = factory(require("clusterize.js"), require("sortablejs"));
+ exports["DataTable"] = factory(require("sortablejs"), require("clusterize.js"));
else
- root["DataTable"] = factory(root["Clusterize"], root["Sortable"]);
-})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_10__) {
+ root["DataTable"] = factory(root["Sortable"], root["Clusterize"]);
+})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_9__, __WEBPACK_EXTERNAL_MODULE_11__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@@ -269,6 +269,35 @@ $.closest = function (selector, element) {
return $.closest(selector, element.parentNode);
};
+
+$.inViewport = function (el, parentEl) {
+ var _el$getBoundingClient = el.getBoundingClientRect(),
+ top = _el$getBoundingClient.top,
+ left = _el$getBoundingClient.left,
+ bottom = _el$getBoundingClient.bottom,
+ right = _el$getBoundingClient.right;
+
+ var _parentEl$getBounding = parentEl.getBoundingClientRect(),
+ pTop = _parentEl$getBounding.top,
+ pLeft = _parentEl$getBounding.left,
+ pBottom = _parentEl$getBounding.bottom,
+ pRight = _parentEl$getBounding.right;
+
+ 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;
+ }
+ }
+};
module.exports = exports['default'];
/***/ }),
@@ -508,6 +537,243 @@ function promisify(fn) {
"use strict";
+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; }; }();
+
+exports.getRowHTML = getRowHTML;
+
+var _dom = __webpack_require__(0);
+
+var _dom2 = _interopRequireDefault(_dom);
+
+var _utils = __webpack_require__(1);
+
+var _cellmanager = __webpack_require__(3);
+
+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 RowManager = function () {
+ function RowManager(instance) {
+ _classCallCheck(this, RowManager);
+
+ this.instance = instance;
+ this.options = this.instance.options;
+ this.wrapper = this.instance.wrapper;
+ this.bodyScrollable = this.instance.bodyScrollable;
+
+ this.bindEvents();
+ this.refreshRows = (0, _utils.promisify)(this.refreshRows, this);
+ }
+
+ _createClass(RowManager, [{
+ key: 'bindEvents',
+ value: function bindEvents() {
+ this.bindCheckbox();
+ }
+ }, {
+ key: 'bindCheckbox',
+ value: function bindCheckbox() {
+ var _this = this;
+
+ if (!this.options.addCheckboxColumn) return;
+
+ // map of checked rows
+ this.checkMap = [];
+
+ _dom2.default.on(this.wrapper, 'click', '.data-table-col[data-col-index="0"] [type="checkbox"]', function (e, $checkbox) {
+ var $cell = $checkbox.closest('.data-table-col');
+
+ var _$$data = _dom2.default.data($cell),
+ rowIndex = _$$data.rowIndex,
+ isHeader = _$$data.isHeader;
+
+ var checked = $checkbox.checked;
+
+ if (isHeader) {
+ _this.checkAll(checked);
+ } else {
+ _this.checkRow(rowIndex, checked);
+ }
+ });
+ }
+ }, {
+ key: 'refreshRows',
+ value: function refreshRows() {
+ this.instance.renderBody();
+ this.instance.setDimensions();
+ }
+ }, {
+ key: 'getCheckedRows',
+ value: function getCheckedRows() {
+ return this.checkMap.map(function (c, rowIndex) {
+ if (c) {
+ return rowIndex;
+ }
+ return null;
+ }).filter(function (c) {
+ return c !== null || c !== undefined;
+ });
+ }
+ }, {
+ key: 'highlightCheckedRows',
+ value: function highlightCheckedRows() {
+ var _this2 = this;
+
+ this.getCheckedRows().map(function (rowIndex) {
+ return _this2.checkRow(rowIndex, true);
+ });
+ }
+ }, {
+ key: 'checkRow',
+ value: function checkRow(rowIndex, toggle) {
+ var value = toggle ? 1 : 0;
+
+ // update internal map
+ this.checkMap[rowIndex] = value;
+ // set checkbox value explicitly
+ _dom2.default.each('.data-table-col[data-row-index="' + rowIndex + '"][data-col-index="0"] [type="checkbox"]', this.bodyScrollable).map(function (input) {
+ input.checked = toggle;
+ });
+ // highlight row
+ this.highlightRow(rowIndex, toggle);
+ }
+ }, {
+ key: 'checkAll',
+ value: function checkAll(toggle) {
+ var value = toggle ? 1 : 0;
+
+ // update internal map
+ if (toggle) {
+ this.checkMap = Array.from(Array(this.getTotalRows())).map(function (c) {
+ return value;
+ });
+ } else {
+ this.checkMap = [];
+ }
+ // set checkbox value
+ _dom2.default.each('.data-table-col[data-col-index="0"] [type="checkbox"]', this.bodyScrollable).map(function (input) {
+ input.checked = toggle;
+ });
+ // highlight all
+ this.highlightAll(toggle);
+ }
+ }, {
+ key: 'highlightRow',
+ value: function highlightRow(rowIndex) {
+ var toggle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+
+ var $row = this.getRow$(rowIndex);
+ if (!$row) return;
+
+ if (!toggle && this.bodyScrollable.classList.contains('row-highlight-all')) {
+ $row.classList.add('row-unhighlight');
+ return;
+ }
+
+ if (toggle && $row.classList.contains('row-unhighlight')) {
+ $row.classList.remove('row-unhighlight');
+ }
+
+ this._highlightedRows = this._highlightedRows || {};
+
+ if (toggle) {
+ $row.classList.add('row-highlight');
+ this._highlightedRows[rowIndex] = $row;
+ } else {
+ $row.classList.remove('row-highlight');
+ delete this._highlightedRows[rowIndex];
+ }
+ }
+ }, {
+ key: 'highlightAll',
+ value: function highlightAll() {
+ var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+
+ if (toggle) {
+ this.bodyScrollable.classList.add('row-highlight-all');
+ } else {
+ this.bodyScrollable.classList.remove('row-highlight-all');
+ for (var rowIndex in this._highlightedRows) {
+ var $row = this._highlightedRows[rowIndex];
+ $row.classList.remove('row-highlight');
+ }
+ this._highlightedRows = {};
+ }
+ }
+ }, {
+ key: 'getRow$',
+ value: function getRow$(rowIndex) {
+ return (0, _dom2.default)('.data-table-row[data-row-index="' + rowIndex + '"]', this.bodyScrollable);
+ }
+ }, {
+ key: 'getTotalRows',
+ value: function getTotalRows() {
+ return this.datamanager.getRowCount();
+ }
+ }, {
+ key: 'getFirstRowIndex',
+ value: function getFirstRowIndex() {
+ return 0;
+ }
+ }, {
+ key: 'getLastRowIndex',
+ value: function getLastRowIndex() {
+ return this.datamanager.getRowCount() - 1;
+ }
+ }, {
+ key: 'scrollToRow',
+ value: function scrollToRow(rowIndex) {
+ 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;
+
+ var offset = void 0;
+ if (top < pTop) {
+ offset = this.bodyScrollable.scrollTop - (pTop - top) - height;
+ if (offset < 0) offset = 0;
+ } else {
+ offset = this.bodyScrollable.scrollTop + (top - this.bodyScrollable.clientHeight);
+ }
+
+ console.log(rowIndex, offset);
+
+ _dom2.default.scrollTop(this.bodyScrollable, offset);
+ }
+ }, {
+ key: 'datamanager',
+ get: function get() {
+ return this.instance.datamanager;
+ }
+ }]);
+
+ return RowManager;
+}();
+
+exports.default = RowManager;
+function getRowHTML(columns, props) {
+ var dataAttr = (0, _utils.makeDataAttributeString)(props);
+
+ return '\n \n ' + columns.map(_cellmanager.getCellHTML).join('') + '\n
\n ';
+}
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -522,7 +788,7 @@ exports.getEditCellHTML = getEditCellHTML;
var _utils = __webpack_require__(1);
-var _keyboard = __webpack_require__(9);
+var _keyboard = __webpack_require__(8);
var _keyboard2 = _interopRequireDefault(_keyboard);
@@ -530,7 +796,7 @@ var _dom = __webpack_require__(0);
var _dom2 = _interopRequireDefault(_dom);
-var _columnmanager = __webpack_require__(3);
+var _columnmanager = __webpack_require__(4);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -645,20 +911,6 @@ var CellManager = function () {
return true;
};
- var scrollToCell = function scrollToCell(direction) {
- if (!_this2.$focusedCell) return false;
-
- if (!_this2.inViewport(_this2.$focusedCell)) {
- var _$$data2 = _dom2.default.data(_this2.$focusedCell),
- rowIndex = _$$data2.rowIndex;
-
- _this2.scrollToRow(rowIndex - _this2.getRowCountPerPage() + 2);
- return true;
- }
-
- return false;
- };
-
['left', 'right', 'up', 'down'].map(function (direction) {
return _keyboard2.default.on(direction, function () {
return focusCell(direction);
@@ -673,7 +925,7 @@ var CellManager = function () {
['left', 'right', 'up', 'down'].map(function (direction) {
return _keyboard2.default.on(direction, function () {
- return scrollToCell(direction);
+ return _this2.scrollToCell(_this2.$focusedCell);
});
});
@@ -752,9 +1004,9 @@ var CellManager = function () {
// don't focus if already editing cell
if ($cell === this.$editingCell) return;
- var _$$data3 = _dom2.default.data($cell),
- colIndex = _$$data3.colIndex,
- isHeader = _$$data3.isHeader;
+ var _$$data2 = _dom2.default.data($cell),
+ colIndex = _$$data2.colIndex,
+ isHeader = _$$data2.isHeader;
if (isHeader) {
return;
@@ -782,9 +1034,9 @@ var CellManager = function () {
}, {
key: 'highlightRowColumnHeader',
value: function highlightRowColumnHeader($cell) {
- var _$$data4 = _dom2.default.data($cell),
- colIndex = _$$data4.colIndex,
- rowIndex = _$$data4.rowIndex;
+ var _$$data3 = _dom2.default.data($cell),
+ colIndex = _$$data3.colIndex,
+ rowIndex = _$$data3.rowIndex;
var _colIndex = this.columnmanager.getSerialColumnIndex();
var colHeaderSelector = '.data-table-header .data-table-col[data-col-index="' + colIndex + '"]';
@@ -798,7 +1050,7 @@ var CellManager = function () {
var rowHeader = (0, _dom2.default)(rowHeaderSelector, this.wrapper);
_dom2.default.style([colHeader, rowHeader], {
- backgroundColor: 'var(--light-bg)'
+ backgroundColor: '#f5f7fa' // light-bg
});
this.lastHeaders = [colHeader, rowHeader];
@@ -808,9 +1060,9 @@ var CellManager = function () {
value: function selectAreaOnClusterChanged() {
if (!(this.$focusedCell && this.$selectionCursor)) return;
- var _$$data5 = _dom2.default.data(this.$selectionCursor),
- colIndex = _$$data5.colIndex,
- rowIndex = _$$data5.rowIndex;
+ var _$$data4 = _dom2.default.data(this.$selectionCursor),
+ colIndex = _$$data4.colIndex,
+ rowIndex = _$$data4.rowIndex;
var $cell = this.getCell$(colIndex, rowIndex);
@@ -827,9 +1079,9 @@ var CellManager = function () {
value: function focusCellOnClusterChanged() {
if (!this.$focusedCell) return;
- var _$$data6 = _dom2.default.data(this.$focusedCell),
- colIndex = _$$data6.colIndex,
- rowIndex = _$$data6.rowIndex;
+ var _$$data5 = _dom2.default.data(this.$focusedCell),
+ colIndex = _$$data5.colIndex,
+ rowIndex = _$$data5.rowIndex;
var $cell = this.getCell$(colIndex, rowIndex);
@@ -950,9 +1202,9 @@ var CellManager = function () {
}, {
key: 'activateEditing',
value: function activateEditing($cell) {
- var _$$data7 = _dom2.default.data($cell),
- rowIndex = _$$data7.rowIndex,
- colIndex = _$$data7.colIndex;
+ var _$$data6 = _dom2.default.data($cell),
+ rowIndex = _$$data6.rowIndex,
+ colIndex = _$$data6.colIndex;
var col = this.columnmanager.getColumn(colIndex);
@@ -961,9 +1213,9 @@ var CellManager = function () {
}
if (this.$editingCell) {
- var _$$data8 = _dom2.default.data(this.$editingCell),
- _rowIndex = _$$data8._rowIndex,
- _colIndex = _$$data8._colIndex;
+ var _$$data7 = _dom2.default.data(this.$editingCell),
+ _rowIndex = _$$data7._rowIndex,
+ _colIndex = _$$data7._colIndex;
if (rowIndex === _rowIndex && colIndex === _colIndex) {
// editing the same cell
@@ -1024,9 +1276,9 @@ var CellManager = function () {
value: function submitEditing($cell) {
var _this7 = this;
- var _$$data9 = _dom2.default.data($cell),
- rowIndex = _$$data9.rowIndex,
- colIndex = _$$data9.colIndex;
+ var _$$data8 = _dom2.default.data($cell),
+ rowIndex = _$$data8.rowIndex,
+ colIndex = _$$data8.colIndex;
if ($cell) {
var editing = this.currentCellEditing;
@@ -1058,9 +1310,9 @@ var CellManager = function () {
if (!$cell2 && $cell1) {
// copy only focusedCell
- var _$$data10 = _dom2.default.data($cell1),
- colIndex = _$$data10.colIndex,
- rowIndex = _$$data10.rowIndex;
+ var _$$data9 = _dom2.default.data($cell1),
+ colIndex = _$$data9.colIndex,
+ rowIndex = _$$data9.rowIndex;
var cell = this.getCell(colIndex, rowIndex);
(0, _utils.copyTextToClipboard)(cell.content);
@@ -1123,8 +1375,8 @@ var CellManager = function () {
}, {
key: 'getAboveCell$',
value: function getAboveCell$($cell) {
- var _$$data11 = _dom2.default.data($cell),
- colIndex = _$$data11.colIndex;
+ var _$$data10 = _dom2.default.data($cell),
+ colIndex = _$$data10.colIndex;
var $aboveRow = $cell.parentElement.previousElementSibling;
@@ -1133,8 +1385,8 @@ var CellManager = function () {
}, {
key: 'getBelowCell$',
value: function getBelowCell$($cell) {
- var _$$data12 = _dom2.default.data($cell),
- colIndex = _$$data12.colIndex;
+ var _$$data11 = _dom2.default.data($cell),
+ colIndex = _$$data11.colIndex;
var $belowRow = $cell.parentElement.nextElementSibling;
@@ -1185,56 +1437,21 @@ var CellManager = function () {
value: function getRowHeight() {
return _dom2.default.style((0, _dom2.default)('.data-table-row', this.bodyScrollable), 'height');
}
- }, {
- key: 'inViewport',
- value: function inViewport($cell) {
- var colIndex = void 0,
- rowIndex = void 0; // eslint-disable-line
-
- if (typeof $cell === 'number') {
- var _arguments2 = Array.prototype.slice.call(arguments);
-
- colIndex = _arguments2[0];
- rowIndex = _arguments2[1];
- } else {
- var cell = _dom2.default.data($cell);
-
- colIndex = cell.colIndex;
- rowIndex = cell.rowIndex;
- }
-
- var viewportHeight = this.instance.getViewportHeight();
- var rowHeight = this.getRowHeight();
- var rowOffset = rowIndex * rowHeight;
-
- var scrollTopOffset = this.bodyScrollable.scrollTop;
-
- if (rowOffset - scrollTopOffset + rowHeight < viewportHeight) {
- return true;
- }
-
- return false;
- }
}, {
key: 'scrollToCell',
value: function scrollToCell($cell) {
- var _$$data13 = _dom2.default.data($cell),
- rowIndex = _$$data13.rowIndex;
+ if (_dom2.default.inViewport($cell, this.bodyScrollable)) return;
- this.scrollToRow(rowIndex);
+ var _$$data12 = _dom2.default.data($cell),
+ rowIndex = _$$data12.rowIndex;
+
+ this.rowmanager.scrollToRow(rowIndex);
}
}, {
key: 'getRowCountPerPage',
value: function getRowCountPerPage() {
return Math.ceil(this.instance.getViewportHeight() / this.getRowHeight());
}
- }, {
- key: 'scrollToRow',
- value: function scrollToRow(rowIndex) {
- var offset = rowIndex * this.getRowHeight();
-
- this.bodyScrollable.scrollTop = offset;
- }
}]);
return CellManager;
@@ -1283,7 +1500,7 @@ function cellSelector(colIndex, rowIndex) {
}
/***/ }),
-/* 3 */
+/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -1300,11 +1517,11 @@ var _dom = __webpack_require__(0);
var _dom2 = _interopRequireDefault(_dom);
-var _sortablejs = __webpack_require__(10);
+var _sortablejs = __webpack_require__(9);
var _sortablejs2 = _interopRequireDefault(_sortablejs);
-var _rowmanager = __webpack_require__(4);
+var _rowmanager = __webpack_require__(2);
var _utils = __webpack_require__(1);
@@ -1434,6 +1651,7 @@ var ColumnManager = function () {
startX = void 0;
_dom2.default.on(this.header, 'mousedown', '.data-table-col .column-resizer', function (e, $handle) {
+ document.body.classList.add('data-table-resize');
var $cell = $handle.parentNode.parentNode;
$resizingCell = $cell;
@@ -1452,6 +1670,7 @@ var ColumnManager = function () {
});
_dom2.default.on(document.body, 'mouseup', function (e) {
+ document.body.classList.remove('data-table-resize');
if (!$resizingCell) return;
isDragging = false;
@@ -1871,218 +2090,6 @@ var getDropdownHTML = function getDropdownHTML() {
exports.getDropdownHTML = getDropdownHTML;
-/***/ }),
-/* 4 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-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; }; }();
-
-exports.getRowHTML = getRowHTML;
-
-var _dom = __webpack_require__(0);
-
-var _dom2 = _interopRequireDefault(_dom);
-
-var _utils = __webpack_require__(1);
-
-var _cellmanager = __webpack_require__(2);
-
-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 RowManager = function () {
- function RowManager(instance) {
- _classCallCheck(this, RowManager);
-
- this.instance = instance;
- this.options = this.instance.options;
- this.wrapper = this.instance.wrapper;
- this.bodyScrollable = this.instance.bodyScrollable;
-
- this.bindEvents();
- this.refreshRows = (0, _utils.promisify)(this.refreshRows, this);
- }
-
- _createClass(RowManager, [{
- key: 'bindEvents',
- value: function bindEvents() {
- this.bindCheckbox();
- }
- }, {
- key: 'bindCheckbox',
- value: function bindCheckbox() {
- var _this = this;
-
- if (!this.options.addCheckboxColumn) return;
-
- // map of checked rows
- this.checkMap = [];
-
- _dom2.default.on(this.wrapper, 'click', '.data-table-col[data-col-index="0"] [type="checkbox"]', function (e, $checkbox) {
- var $cell = $checkbox.closest('.data-table-col');
-
- var _$$data = _dom2.default.data($cell),
- rowIndex = _$$data.rowIndex,
- isHeader = _$$data.isHeader;
-
- var checked = $checkbox.checked;
-
- if (isHeader) {
- _this.checkAll(checked);
- } else {
- _this.checkRow(rowIndex, checked);
- }
- });
- }
- }, {
- key: 'refreshRows',
- value: function refreshRows() {
- this.instance.renderBody();
- this.instance.setDimensions();
- }
- }, {
- key: 'getCheckedRows',
- value: function getCheckedRows() {
- return this.checkMap.map(function (c, rowIndex) {
- if (c) {
- return rowIndex;
- }
- return null;
- }).filter(function (c) {
- return c !== null || c !== undefined;
- });
- }
- }, {
- key: 'highlightCheckedRows',
- value: function highlightCheckedRows() {
- var _this2 = this;
-
- this.getCheckedRows().map(function (rowIndex) {
- return _this2.checkRow(rowIndex, true);
- });
- }
- }, {
- key: 'checkRow',
- value: function checkRow(rowIndex, toggle) {
- var value = toggle ? 1 : 0;
-
- // update internal map
- this.checkMap[rowIndex] = value;
- // set checkbox value explicitly
- _dom2.default.each('.data-table-col[data-row-index="' + rowIndex + '"][data-col-index="0"] [type="checkbox"]', this.bodyScrollable).map(function (input) {
- input.checked = toggle;
- });
- // highlight row
- this.highlightRow(rowIndex, toggle);
- }
- }, {
- key: 'checkAll',
- value: function checkAll(toggle) {
- var value = toggle ? 1 : 0;
-
- // update internal map
- if (toggle) {
- this.checkMap = Array.from(Array(this.getTotalRows())).map(function (c) {
- return value;
- });
- } else {
- this.checkMap = [];
- }
- // set checkbox value
- _dom2.default.each('.data-table-col[data-col-index="0"] [type="checkbox"]', this.bodyScrollable).map(function (input) {
- input.checked = toggle;
- });
- // highlight all
- this.highlightAll(toggle);
- }
- }, {
- key: 'highlightRow',
- value: function highlightRow(rowIndex) {
- var toggle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-
- var $row = this.getRow$(rowIndex);
- if (!$row) return;
-
- if (!toggle && this.bodyScrollable.classList.contains('row-highlight-all')) {
- $row.classList.add('row-unhighlight');
- return;
- }
-
- if (toggle && $row.classList.contains('row-unhighlight')) {
- $row.classList.remove('row-unhighlight');
- }
-
- this._highlightedRows = this._highlightedRows || {};
-
- if (toggle) {
- $row.classList.add('row-highlight');
- this._highlightedRows[rowIndex] = $row;
- } else {
- $row.classList.remove('row-highlight');
- delete this._highlightedRows[rowIndex];
- }
- }
- }, {
- key: 'highlightAll',
- value: function highlightAll() {
- var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-
- if (toggle) {
- this.bodyScrollable.classList.add('row-highlight-all');
- } else {
- this.bodyScrollable.classList.remove('row-highlight-all');
- for (var rowIndex in this._highlightedRows) {
- var $row = this._highlightedRows[rowIndex];
- $row.classList.remove('row-highlight');
- }
- this._highlightedRows = {};
- }
- }
- }, {
- key: 'getRow$',
- value: function getRow$(rowIndex) {
- return (0, _dom2.default)('.data-table-row[data-row-index="' + rowIndex + '"]', this.bodyScrollable);
- }
- }, {
- key: 'getTotalRows',
- value: function getTotalRows() {
- return this.datamanager.getRowCount();
- }
- }, {
- key: 'getFirstRowIndex',
- value: function getFirstRowIndex() {
- return 0;
- }
- }, {
- key: 'getLastRowIndex',
- value: function getLastRowIndex() {
- return this.datamanager.getRowCount() - 1;
- }
- }, {
- key: 'datamanager',
- get: function get() {
- return this.instance.datamanager;
- }
- }]);
-
- return RowManager;
-}();
-
-exports.default = RowManager;
-function getRowHTML(columns, props) {
- var dataAttr = (0, _utils.makeDataAttributeString)(props);
-
- return '\n \n ' + columns.map(_cellmanager.getCellHTML).join('') + '\n
\n ';
-}
-
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
@@ -2098,7 +2105,7 @@ var _datatable = __webpack_require__(6);
var _datatable2 = _interopRequireDefault(_datatable);
-var _package = __webpack_require__(17);
+var _package = __webpack_require__(18);
var _package2 = _interopRequireDefault(_package);
@@ -2126,31 +2133,31 @@ var _dom = __webpack_require__(0);
var _dom2 = _interopRequireDefault(_dom);
-var _datamanager = __webpack_require__(8);
+var _datamanager = __webpack_require__(7);
var _datamanager2 = _interopRequireDefault(_datamanager);
-var _cellmanager = __webpack_require__(2);
+var _cellmanager = __webpack_require__(3);
var _cellmanager2 = _interopRequireDefault(_cellmanager);
-var _columnmanager = __webpack_require__(3);
+var _columnmanager = __webpack_require__(4);
var _columnmanager2 = _interopRequireDefault(_columnmanager);
-var _rowmanager = __webpack_require__(4);
+var _rowmanager = __webpack_require__(2);
var _rowmanager2 = _interopRequireDefault(_rowmanager);
-var _bodyRenderer = __webpack_require__(18);
+var _bodyRenderer = __webpack_require__(10);
var _bodyRenderer2 = _interopRequireDefault(_bodyRenderer);
-var _style = __webpack_require__(11);
+var _style = __webpack_require__(12);
var _style2 = _interopRequireDefault(_style);
-__webpack_require__(12);
+__webpack_require__(13);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -2391,12 +2398,6 @@ module.exports = exports['default'];
/***/ }),
/* 7 */
-/***/ (function(module, exports) {
-
-module.exports = __WEBPACK_EXTERNAL_MODULE_7__;
-
-/***/ }),
-/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -2887,7 +2888,7 @@ var DataError = exports.DataError = function (_extendableBuiltin2) {
;
/***/ }),
-/* 9 */
+/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -2965,13 +2966,167 @@ exports.default = {
module.exports = exports['default'];
/***/ }),
-/* 10 */
+/* 9 */
/***/ (function(module, exports) {
-module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_9__;
+
+/***/ }),
+/* 10 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+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; }; }();
+
+exports.getBodyHTML = getBodyHTML;
+
+var _dom = __webpack_require__(0);
+
+var _dom2 = _interopRequireDefault(_dom);
+
+var _clusterize = __webpack_require__(11);
+
+var _clusterize2 = _interopRequireDefault(_clusterize);
+
+var _rowmanager = __webpack_require__(2);
+
+var _utils = __webpack_require__(1);
+
+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 BodyRenderer = function () {
+ function BodyRenderer(instance) {
+ _classCallCheck(this, BodyRenderer);
+
+ this.instance = instance;
+ this.options = instance.options;
+ this.datamanager = instance.datamanager;
+ this.rowmanager = instance.rowmanager;
+ this.cellmanager = instance.cellmanager;
+ this.bodyScrollable = instance.bodyScrollable;
+ this.log = instance.log;
+ this.appendNextPage = (0, _utils.promisify)(this.appendNextPage, this);
+ }
+
+ _createClass(BodyRenderer, [{
+ key: 'render',
+ value: function render() {
+ if (this.options.enableClusterize) {
+ this.renderBodyWithClusterize();
+ } else {
+ this.renderBodyHTML();
+ }
+ }
+ }, {
+ key: 'renderBodyHTML',
+ value: function renderBodyHTML() {
+ var rows = this.datamanager.getRows();
+
+ this.bodyScrollable.innerHTML = '\n \n ' + getBodyHTML(rows) + '\n
\n ';
+ }
+ }, {
+ key: 'renderBodyWithClusterize',
+ value: function renderBodyWithClusterize() {
+ var _this = this;
+
+ // empty body
+ this.bodyScrollable.innerHTML = '\n \n ' + getBodyHTML([]) + '\n
\n ';
+
+ this.start = 0;
+ this.pageLength = 1000;
+ this.end = this.start + this.pageLength;
+
+ // only append ${this.pageLength} rows in the beginning,
+ // defer remaining
+ var rows = this.datamanager.getRows(this.start, this.end);
+ var initialData = this.getDataForClusterize(rows);
+
+ this.clusterize = new _clusterize2.default({
+ rows: initialData,
+ scrollElem: this.bodyScrollable,
+ contentElem: (0, _dom2.default)('tbody', this.bodyScrollable),
+ callbacks: {
+ clusterChanged: function clusterChanged() {
+ _this.rowmanager.highlightCheckedRows();
+ _this.cellmanager.selectAreaOnClusterChanged();
+ _this.cellmanager.focusCellOnClusterChanged();
+ }
+ }
+ });
+ this.log('dataAppended', this.pageLength);
+ this.appendRemainingData();
+ }
+ }, {
+ key: 'appendRemainingData',
+ value: function appendRemainingData() {
+ var dataAppended = this.pageLength;
+ var promises = [];
+ var rowCount = this.datamanager.getRowCount();
+
+ while (dataAppended + this.pageLength < rowCount) {
+ this.start = this.end;
+ this.end = this.start + this.pageLength;
+ promises.push(this.appendNextPage(this.start, this.end));
+ dataAppended += this.pageLength;
+ }
+
+ if (rowCount % this.pageLength > 0) {
+ // last page
+ this.start = this.end;
+ this.end = this.start + this.pageLength;
+ promises.push(this.appendNextPage(this.start, this.end));
+ }
+
+ return promises.reduce(function (prev, cur) {
+ return prev.then(cur);
+ }, Promise.resolve());
+ }
+ }, {
+ key: 'appendNextPage',
+ value: function appendNextPage(start, end) {
+ var rows = this.datamanager.getRows(start, end);
+ var data = this.getDataForClusterize(rows);
+
+ this.clusterize.append(data);
+ this.log('dataAppended', rows.length);
+ }
+ }, {
+ key: 'getDataForClusterize',
+ value: function getDataForClusterize(rows) {
+ return rows.map(function (row) {
+ return (0, _rowmanager.getRowHTML)(row, { rowIndex: row[0].rowIndex });
+ });
+ }
+ }]);
+
+ return BodyRenderer;
+}();
+
+exports.default = BodyRenderer;
+;
+
+function getBodyHTML(rows) {
+ return '\n \n ' + rows.map(function (row) {
+ return (0, _rowmanager.getRowHTML)(row, { rowIndex: row[0].rowIndex });
+ }).join('') + '\n \n ';
+}
/***/ }),
/* 11 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_11__;
+
+/***/ }),
+/* 12 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -3037,13 +3192,13 @@ exports.default = Style;
module.exports = exports['default'];
/***/ }),
-/* 12 */
+/* 13 */
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a