diff --git a/lib/frappe-datatable.js b/lib/frappe-datatable.js index 9afd5d8..8c0ac59 100644 --- a/lib/frappe-datatable.js +++ b/lib/frappe-datatable.js @@ -7,7 +7,7 @@ exports["DataTable"] = factory(require("clusterize.js"), require("sortablejs")); else root["DataTable"] = factory(root["Clusterize"], root["Sortable"]); -})(this, function(__WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_10__) { +})(this, function(__WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_10__) { return /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap /******/ __webpack_require__.p = ""; /******/ /******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 4); +/******/ return __webpack_require__(__webpack_require__.s = 5); /******/ }) /************************************************************************/ /******/ ([ @@ -522,7 +522,7 @@ exports.getEditCellHTML = getEditCellHTML; var _utils = __webpack_require__(1); -var _keyboard = __webpack_require__(8); +var _keyboard = __webpack_require__(9); var _keyboard2 = _interopRequireDefault(_keyboard); @@ -530,7 +530,7 @@ var _dom = __webpack_require__(0); var _dom2 = _interopRequireDefault(_dom); -var _columnmanager = __webpack_require__(9); +var _columnmanager = __webpack_require__(3); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } @@ -1056,6 +1056,16 @@ var CellManager = function () { value: function copyCellContents($cell1, $cell2) { var _this8 = this; + if (!$cell2 && $cell1) { + // copy only focusedCell + var _$$data10 = _dom2.default.data($cell1), + colIndex = _$$data10.colIndex, + rowIndex = _$$data10.rowIndex; + + var cell = this.getCell(colIndex, rowIndex); + (0, _utils.copyTextToClipboard)(cell.content); + return; + } var cells = this.getCellsInRange($cell1, $cell2); if (!cells) return; @@ -1113,8 +1123,8 @@ var CellManager = function () { }, { key: 'getAboveCell$', value: function getAboveCell$($cell) { - var _$$data10 = _dom2.default.data($cell), - colIndex = _$$data10.colIndex; + var _$$data11 = _dom2.default.data($cell), + colIndex = _$$data11.colIndex; var $aboveRow = $cell.parentElement.previousElementSibling; @@ -1123,8 +1133,8 @@ var CellManager = function () { }, { key: 'getBelowCell$', value: function getBelowCell$($cell) { - var _$$data11 = _dom2.default.data($cell), - colIndex = _$$data11.colIndex; + var _$$data12 = _dom2.default.data($cell), + colIndex = _$$data12.colIndex; var $belowRow = $cell.parentElement.nextElementSibling; @@ -1208,8 +1218,8 @@ var CellManager = function () { }, { key: 'scrollToCell', value: function scrollToCell($cell) { - var _$$data12 = _dom2.default.data($cell), - rowIndex = _$$data12.rowIndex; + var _$$data13 = _dom2.default.data($cell), + rowIndex = _$$data13.rowIndex; this.scrollToRow(rowIndex); } @@ -1279,1056 +1289,6 @@ function cellSelector(colIndex, rowIndex) { "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 '; -} - -/***/ }), -/* 4 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _datatable = __webpack_require__(5); - -var _datatable2 = _interopRequireDefault(_datatable); - -var _package = __webpack_require__(22); - -var _package2 = _interopRequireDefault(_package); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -_datatable2.default.__version__ = _package2.default.version; - -exports.default = _datatable2.default; -module.exports = exports['default']; - -/***/ }), -/* 5 */ -/***/ (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__(6); - -var _clusterize2 = _interopRequireDefault(_clusterize); - -var _datamanager = __webpack_require__(7); - -var _datamanager2 = _interopRequireDefault(_datamanager); - -var _cellmanager = __webpack_require__(2); - -var _cellmanager2 = _interopRequireDefault(_cellmanager); - -var _columnmanager = __webpack_require__(9); - -var _columnmanager2 = _interopRequireDefault(_columnmanager); - -var _rowmanager = __webpack_require__(3); - -var _rowmanager2 = _interopRequireDefault(_rowmanager); - -var _style = __webpack_require__(16); - -var _style2 = _interopRequireDefault(_style); - -__webpack_require__(17); - -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 DEFAULT_OPTIONS = { - events: null, - data: { - columns: [], - rows: [] - }, - dropdownButton: '▼', - headerDropdown: [{ - label: 'Sort Ascending', - action: function action(column) { - this.sortColumn(column.colIndex, 'asc'); - } - }, { - label: 'Sort Descending', - action: function action(column) { - this.sortColumn(column.colIndex, 'desc'); - } - }, { - label: 'Reset sorting', - action: function action(column) { - this.sortColumn(column.colIndex, 'none'); - } - }, { - label: 'Remove column', - action: function action(column) { - this.removeColumn(column.colIndex); - } - }], - sortIndicator: { - asc: '↑', - desc: '↓', - none: '' - }, - freezeMessage: 'Loading...', - editing: null, - addSerialNoColumn: true, - addCheckboxColumn: true, - enableClusterize: true, - enableLogs: false, - takeAvailableSpace: false -}; - -var DataTable = function () { - function DataTable(wrapper, options) { - _classCallCheck(this, DataTable); - - DataTable.instances++; - - if (typeof wrapper === 'string') { - // css selector - wrapper = document.querySelector(wrapper); - } - this.wrapper = wrapper; - if (!this.wrapper) { - throw new Error('Invalid argument given for `wrapper`'); - } - - this.options = Object.assign({}, DEFAULT_OPTIONS, options); - this.options.headerDropdown = DEFAULT_OPTIONS.headerDropdown.concat(options.headerDropdown || []); - // custom user events - this.events = this.options.events; - - this.prepare(); - - this.style = new _style2.default(this); - 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); - - if (this.options.data) { - this.refresh(this.options.data); - } - } - - _createClass(DataTable, [{ - key: 'prepare', - value: function prepare() { - this.prepareDom(); - } - }, { - key: 'prepareDom', - value: function prepareDom() { - this.wrapper.innerHTML = '\n
\n \n
\n
\n
\n
\n ' + this.options.freezeMessage + '\n
\n
\n
\n
\n '; - - this.datatableWrapper = (0, _dom2.default)('.data-table', this.wrapper); - this.header = (0, _dom2.default)('.data-table-header', this.wrapper); - this.bodyScrollable = (0, _dom2.default)('.body-scrollable', this.wrapper); - this.freezeContainer = (0, _dom2.default)('.freeze-container', this.wrapper); - this.unfreeze(); - } - }, { - key: 'refresh', - value: function refresh(data) { - this.datamanager.init(data); - this.render(); - } - }, { - key: 'destroy', - value: function destroy() { - this.wrapper.innerHTML = ''; - this.style.destroy(); - } - }, { - key: 'appendRows', - value: function appendRows(rows) { - this.datamanager.appendRows(rows); - this.rowmanager.refreshRows(); - } - }, { - key: 'render', - value: function render() { - this.renderHeader(); - this.renderBody(); - this.setDimensions(); - } - }, { - key: 'renderHeader', - value: function renderHeader() { - this.columnmanager.renderHeader(); - } - }, { - key: 'renderBody', - value: function renderBody() { - 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.appendNextPagePromise(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.appendNextPagePromise(this.start, this.end)); - } - - return promises.reduce(function (prev, cur) { - return prev.then(cur); - }, Promise.resolve()); - } - }, { - key: 'appendNextPagePromise', - value: function appendNextPagePromise(start, end) { - var _this2 = this; - - return new Promise(function (resolve) { - setTimeout(function () { - var rows = _this2.datamanager.getRows(start, end); - var data = _this2.getDataForClusterize(rows); - - _this2.clusterize.append(data); - _this2.log('dataAppended', rows.length); - resolve(); - }, 0); - }); - } - }, { - key: 'getDataForClusterize', - value: function getDataForClusterize(rows) { - return rows.map(function (row) { - return (0, _rowmanager.getRowHTML)(row, { rowIndex: row[0].rowIndex }); - }); - } - }, { - key: 'setDimensions', - value: function setDimensions() { - this.columnmanager.setDimensions(); - - this.setBodyWidth(); - - _dom2.default.style(this.bodyScrollable, { - marginTop: _dom2.default.style(this.header, 'height') + 'px' - }); - - _dom2.default.style((0, _dom2.default)('table', this.bodyScrollable), { - margin: 0 - }); - } - }, { - key: 'setBodyWidth', - value: function setBodyWidth() { - var width = _dom2.default.style(this.header, 'width'); - - _dom2.default.style(this.bodyScrollable, { width: width + 'px' }); - } - }, { - key: 'getColumn', - value: function getColumn(colIndex) { - return this.datamanager.getColumn(colIndex); - } - }, { - key: 'getCell', - value: function getCell(colIndex, rowIndex) { - return this.datamanager.getCell(colIndex, rowIndex); - } - }, { - key: 'getColumnHeaderElement', - value: function getColumnHeaderElement(colIndex) { - return this.columnmanager.getColumnHeaderElement(colIndex); - } - }, { - key: 'getViewportHeight', - value: function getViewportHeight() { - if (!this.viewportHeight) { - this.viewportHeight = _dom2.default.style(this.bodyScrollable, 'height'); - } - - return this.viewportHeight; - } - }, { - key: 'sortColumn', - value: function sortColumn(colIndex, sortOrder) { - this.columnmanager.sortColumn(colIndex, sortOrder); - } - }, { - key: 'removeColumn', - value: function removeColumn(colIndex) { - this.columnmanager.removeColumn(colIndex); - } - }, { - key: 'scrollToLastColumn', - value: function scrollToLastColumn() { - this.datatableWrapper.scrollLeft = 9999; - } - }, { - key: 'freeze', - value: function freeze() { - _dom2.default.style(this.freezeContainer, { - display: '' - }); - } - }, { - key: 'unfreeze', - value: function unfreeze() { - _dom2.default.style(this.freezeContainer, { - display: 'none' - }); - } - }, { - key: 'log', - value: function log() { - if (this.options.enableLogs) { - console.log.apply(console, arguments); - } - } - }]); - - return DataTable; -}(); - -DataTable.instances = 0; - -exports.default = DataTable; -function getBodyHTML(rows) { - return '\n \n ' + rows.map(function (row) { - return (0, _rowmanager.getRowHTML)(row, { rowIndex: row[0].rowIndex }); - }).join('') + '\n \n '; -} - -/***/ }), -/* 6 */ -/***/ (function(module, exports) { - -module.exports = __WEBPACK_EXTERNAL_MODULE_6__; - -/***/ }), -/* 7 */ -/***/ (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; }; }(); - -var _utils = __webpack_require__(1); - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -var DataManager = function () { - function DataManager(options) { - _classCallCheck(this, DataManager); - - this.options = options; - this.currentSort = { - colIndex: -1, - sortOrder: 'none' // asc, desc, none - }; - this.sortRows = (0, _utils.promisify)(this.sortRows, this); - this.switchColumn = (0, _utils.promisify)(this.switchColumn, this); - this.removeColumn = (0, _utils.promisify)(this.removeColumn, this); - } - - _createClass(DataManager, [{ - key: 'init', - value: function init(data) { - var columns = data.columns, - rows = data.rows; - - - this.rowCount = 0; - this.columns = []; - this.rows = []; - - this.columns = this.prepareColumns(columns); - this.rows = this.prepareRows(rows); - - this.prepareNumericColumns(); - } - }, { - key: 'prepareColumns', - value: function prepareColumns(columns) { - if (!Array.isArray(columns)) { - throw new TypeError('`columns` must be an array'); - } - - if (this.options.addSerialNoColumn && !this._serialNoColumnAdded) { - var val = { - content: 'Sr. No', - editable: false, - resizable: false, - align: 'center', - focusable: false, - dropdown: false - }; - - columns = [val].concat(columns); - this._serialNoColumnAdded = true; - } - - if (this.options.addCheckboxColumn && !this._checkboxColumnAdded) { - var _val = { - content: '', - editable: false, - resizable: false, - sortable: false, - focusable: false, - dropdown: false - }; - - columns = [_val].concat(columns); - this._checkboxColumnAdded = true; - } - - return _prepareColumns(columns, { - isHeader: 1, - format: function format(value) { - return '' + value + ''; - } - }); - } - }, { - key: 'prepareNumericColumns', - value: function prepareNumericColumns() { - var row0 = this.getRow(0); - this.columns = this.columns.map(function (column, i) { - - var cellValue = row0[i].content; - if (!column.align && cellValue && (0, _utils.isNumeric)(cellValue)) { - column.align = 'right'; - } - - return column; - }); - } - }, { - key: 'prepareRows', - value: function prepareRows(rows) { - var _this = this; - - if (!Array.isArray(rows) || !Array.isArray(rows[0])) { - throw new TypeError('`rows` must be an array of arrays'); - } - - rows = rows.map(function (row, i) { - var index = _this._getNextRowCount(); - - if (row.length < _this.columns.length) { - if (_this._serialNoColumnAdded) { - var val = index + 1 + ''; - - row = [val].concat(row); - } - - if (_this._checkboxColumnAdded) { - var _val2 = ''; - - row = [_val2].concat(row); - } - } - - return prepareRow(row, index); - }); - - return rows; - } - }, { - key: 'appendRows', - value: function appendRows(rows) { - if (Array.isArray(rows) && !Array.isArray(rows[0])) { - rows = [rows]; - } - var _rows = this.prepareRows(rows); - - this.rows = this.rows.concat(_rows); - } - }, { - key: 'sortRows', - value: function sortRows(colIndex) { - var sortOrder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'none'; - - colIndex = +colIndex; - - if (this.currentSort.colIndex === colIndex) { - // reverse the array if only sortOrder changed - if (this.currentSort.sortOrder === 'asc' && sortOrder === 'desc' || this.currentSort.sortOrder === 'desc' && sortOrder === 'asc') { - this.reverseArray(this.rows); - this.currentSort.sortOrder = sortOrder; - return; - } - } - - this.rows.sort(function (a, b) { - var _aIndex = a[0].rowIndex; - var _bIndex = b[0].rowIndex; - var _a = a[colIndex].content; - var _b = b[colIndex].content; - - if (sortOrder === 'none') { - return _aIndex - _bIndex; - } else if (sortOrder === 'asc') { - if (_a < _b) return -1; - if (_a > _b) return 1; - if (_a === _b) return 0; - } else if (sortOrder === 'desc') { - if (_a < _b) return 1; - if (_a > _b) return -1; - if (_a === _b) return 0; - } - return 0; - }); - - this.currentSort.colIndex = colIndex; - this.currentSort.sortOrder = sortOrder; - } - }, { - key: 'reverseArray', - value: function reverseArray(array) { - var left = null; - var right = null; - var length = array.length; - - for (left = 0, right = length - 1; left < right; left += 1, right -= 1) { - var temporary = array[left]; - - array[left] = array[right]; - array[right] = temporary; - } - } - }, { - key: 'switchColumn', - value: function switchColumn(index1, index2) { - // update columns - var temp = this.columns[index1]; - this.columns[index1] = this.columns[index2]; - this.columns[index2] = temp; - - this.columns[index1].colIndex = index1; - this.columns[index2].colIndex = index2; - - // update rows - this.rows = this.rows.map(function (row) { - var newCell1 = Object.assign({}, row[index1], { colIndex: index2 }); - var newCell2 = Object.assign({}, row[index2], { colIndex: index1 }); - - var newRow = row.map(function (cell) { - // make object copy - return Object.assign({}, cell); - }); - - newRow[index2] = newCell1; - newRow[index1] = newCell2; - - return newRow; - }); - } - }, { - key: 'removeColumn', - value: function removeColumn(index) { - index = +index; - var filter = function filter(cell) { - return cell.colIndex !== index; - }; - var map = function map(cell, i) { - return Object.assign({}, cell, { colIndex: i }); - }; - // update columns - this.columns = this.columns.filter(filter).map(map); - - // update rows - this.rows = this.rows.map(function (row) { - var newRow = row.filter(filter).map(map); - - return newRow; - }); - } - }, { - key: 'getRowCount', - value: function getRowCount() { - return this.rowCount; - } - }, { - key: '_getNextRowCount', - value: function _getNextRowCount() { - var val = this.rowCount; - - this.rowCount++; - return val; - } - }, { - key: 'getRows', - value: function getRows(start, end) { - return this.rows.slice(start, end); - } - }, { - key: 'getColumns', - value: function getColumns(skipStandardColumns) { - var columns = this.columns; - - if (skipStandardColumns) { - columns = columns.slice(this.getStandardColumnCount()); - } - - return columns; - } - }, { - key: 'getStandardColumnCount', - value: function getStandardColumnCount() { - if (this.options.addCheckboxColumn && this.options.addSerialNoColumn) { - return 2; - } - - if (this.options.addCheckboxColumn || this.options.addSerialNoColumn) { - return 1; - } - - return 0; - } - }, { - key: 'getColumnCount', - value: function getColumnCount(skipStandardColumns) { - var val = this.columns.length; - - if (skipStandardColumns) { - val = val - this.getStandardColumnCount(); - } - - return val; - } - }, { - key: 'getColumn', - value: function getColumn(colIndex) { - colIndex = +colIndex; - return this.columns.find(function (col) { - return col.colIndex === colIndex; - }); - } - }, { - key: 'getRow', - value: function getRow(rowIndex) { - rowIndex = +rowIndex; - return this.rows.find(function (row) { - return row[0].rowIndex === rowIndex; - }); - } - }, { - key: 'getCell', - value: function getCell(colIndex, rowIndex) { - rowIndex = +rowIndex; - colIndex = +colIndex; - return this.rows.find(function (row) { - return row[0].rowIndex === rowIndex; - })[colIndex]; - } - }, { - key: 'get', - value: function get() { - return { - columns: this.columns, - rows: this.rows - }; - } - }]); - - return DataManager; -}(); - -exports.default = DataManager; - - -function _prepareColumns(columns) { - var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - - var _columns = columns.map(prepareCell); - - return _columns.map(function (col) { - return Object.assign({}, col, props); - }); -} - -function prepareRow(row, i) { - return _prepareColumns(row, { - rowIndex: i - }); -} - -function prepareCell(col, i) { - if (typeof col === 'string') { - col = { - content: col - }; - } - return Object.assign(col, { - colIndex: i - }); -} -module.exports = exports['default']; - -/***/ }), -/* 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 handlers = {}; - -function bind() { - _dom2.default.on(document, 'keydown', handler); -} - -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(); - } - }); - } -} - -bind(); - -exports.default = { - 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, __webpack_require__) { - -"use strict"; - - Object.defineProperty(exports, "__esModule", { value: true }); @@ -2344,7 +1304,7 @@ var _sortablejs = __webpack_require__(10); var _sortablejs2 = _interopRequireDefault(_sortablejs); -var _rowmanager = __webpack_require__(3); +var _rowmanager = __webpack_require__(4); var _utils = __webpack_require__(1); @@ -2911,6 +1871,1056 @@ 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__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _datatable = __webpack_require__(6); + +var _datatable2 = _interopRequireDefault(_datatable); + +var _package = __webpack_require__(17); + +var _package2 = _interopRequireDefault(_package); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +_datatable2.default.__version__ = _package2.default.version; + +exports.default = _datatable2.default; +module.exports = exports['default']; + +/***/ }), +/* 6 */ +/***/ (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__(7); + +var _clusterize2 = _interopRequireDefault(_clusterize); + +var _datamanager = __webpack_require__(8); + +var _datamanager2 = _interopRequireDefault(_datamanager); + +var _cellmanager = __webpack_require__(2); + +var _cellmanager2 = _interopRequireDefault(_cellmanager); + +var _columnmanager = __webpack_require__(3); + +var _columnmanager2 = _interopRequireDefault(_columnmanager); + +var _rowmanager = __webpack_require__(4); + +var _rowmanager2 = _interopRequireDefault(_rowmanager); + +var _style = __webpack_require__(11); + +var _style2 = _interopRequireDefault(_style); + +__webpack_require__(12); + +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 DEFAULT_OPTIONS = { + events: null, + data: { + columns: [], + rows: [] + }, + dropdownButton: '▼', + headerDropdown: [{ + label: 'Sort Ascending', + action: function action(column) { + this.sortColumn(column.colIndex, 'asc'); + } + }, { + label: 'Sort Descending', + action: function action(column) { + this.sortColumn(column.colIndex, 'desc'); + } + }, { + label: 'Reset sorting', + action: function action(column) { + this.sortColumn(column.colIndex, 'none'); + } + }, { + label: 'Remove column', + action: function action(column) { + this.removeColumn(column.colIndex); + } + }], + sortIndicator: { + asc: '↑', + desc: '↓', + none: '' + }, + freezeMessage: 'Loading...', + editing: null, + addSerialNoColumn: true, + addCheckboxColumn: true, + enableClusterize: true, + enableLogs: false, + takeAvailableSpace: false +}; + +var DataTable = function () { + function DataTable(wrapper, options) { + _classCallCheck(this, DataTable); + + DataTable.instances++; + + if (typeof wrapper === 'string') { + // css selector + wrapper = document.querySelector(wrapper); + } + this.wrapper = wrapper; + if (!this.wrapper) { + throw new Error('Invalid argument given for `wrapper`'); + } + + this.options = Object.assign({}, DEFAULT_OPTIONS, options); + this.options.headerDropdown = DEFAULT_OPTIONS.headerDropdown.concat(options.headerDropdown || []); + // custom user events + this.events = this.options.events; + + this.prepare(); + + this.style = new _style2.default(this); + 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); + + if (this.options.data) { + this.refresh(this.options.data); + } + } + + _createClass(DataTable, [{ + key: 'prepare', + value: function prepare() { + this.prepareDom(); + } + }, { + key: 'prepareDom', + value: function prepareDom() { + this.wrapper.innerHTML = '\n
\n \n
\n
\n
\n
\n ' + this.options.freezeMessage + '\n
\n
\n
\n
\n '; + + this.datatableWrapper = (0, _dom2.default)('.data-table', this.wrapper); + this.header = (0, _dom2.default)('.data-table-header', this.wrapper); + this.bodyScrollable = (0, _dom2.default)('.body-scrollable', this.wrapper); + this.freezeContainer = (0, _dom2.default)('.freeze-container', this.wrapper); + this.unfreeze(); + } + }, { + key: 'refresh', + value: function refresh(data) { + this.datamanager.init(data); + this.render(); + } + }, { + key: 'destroy', + value: function destroy() { + this.wrapper.innerHTML = ''; + this.style.destroy(); + } + }, { + key: 'appendRows', + value: function appendRows(rows) { + this.datamanager.appendRows(rows); + this.rowmanager.refreshRows(); + } + }, { + key: 'render', + value: function render() { + this.renderHeader(); + this.renderBody(); + this.setDimensions(); + } + }, { + key: 'renderHeader', + value: function renderHeader() { + this.columnmanager.renderHeader(); + } + }, { + key: 'renderBody', + value: function renderBody() { + 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.appendNextPagePromise(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.appendNextPagePromise(this.start, this.end)); + } + + return promises.reduce(function (prev, cur) { + return prev.then(cur); + }, Promise.resolve()); + } + }, { + key: 'appendNextPagePromise', + value: function appendNextPagePromise(start, end) { + var _this2 = this; + + return new Promise(function (resolve) { + setTimeout(function () { + var rows = _this2.datamanager.getRows(start, end); + var data = _this2.getDataForClusterize(rows); + + _this2.clusterize.append(data); + _this2.log('dataAppended', rows.length); + resolve(); + }, 0); + }); + } + }, { + key: 'getDataForClusterize', + value: function getDataForClusterize(rows) { + return rows.map(function (row) { + return (0, _rowmanager.getRowHTML)(row, { rowIndex: row[0].rowIndex }); + }); + } + }, { + key: 'setDimensions', + value: function setDimensions() { + this.columnmanager.setDimensions(); + + this.setBodyWidth(); + + _dom2.default.style(this.bodyScrollable, { + marginTop: _dom2.default.style(this.header, 'height') + 'px' + }); + + _dom2.default.style((0, _dom2.default)('table', this.bodyScrollable), { + margin: 0 + }); + } + }, { + key: 'setBodyWidth', + value: function setBodyWidth() { + var width = _dom2.default.style(this.header, 'width'); + + _dom2.default.style(this.bodyScrollable, { width: width + 'px' }); + } + }, { + key: 'getColumn', + value: function getColumn(colIndex) { + return this.datamanager.getColumn(colIndex); + } + }, { + key: 'getCell', + value: function getCell(colIndex, rowIndex) { + return this.datamanager.getCell(colIndex, rowIndex); + } + }, { + key: 'getColumnHeaderElement', + value: function getColumnHeaderElement(colIndex) { + return this.columnmanager.getColumnHeaderElement(colIndex); + } + }, { + key: 'getViewportHeight', + value: function getViewportHeight() { + if (!this.viewportHeight) { + this.viewportHeight = _dom2.default.style(this.bodyScrollable, 'height'); + } + + return this.viewportHeight; + } + }, { + key: 'sortColumn', + value: function sortColumn(colIndex, sortOrder) { + this.columnmanager.sortColumn(colIndex, sortOrder); + } + }, { + key: 'removeColumn', + value: function removeColumn(colIndex) { + this.columnmanager.removeColumn(colIndex); + } + }, { + key: 'scrollToLastColumn', + value: function scrollToLastColumn() { + this.datatableWrapper.scrollLeft = 9999; + } + }, { + key: 'freeze', + value: function freeze() { + _dom2.default.style(this.freezeContainer, { + display: '' + }); + } + }, { + key: 'unfreeze', + value: function unfreeze() { + _dom2.default.style(this.freezeContainer, { + display: 'none' + }); + } + }, { + key: 'log', + value: function log() { + if (this.options.enableLogs) { + console.log.apply(console, arguments); + } + } + }]); + + return DataTable; +}(); + +DataTable.instances = 0; + +exports.default = DataTable; +function getBodyHTML(rows) { + return '\n \n ' + rows.map(function (row) { + return (0, _rowmanager.getRowHTML)(row, { rowIndex: row[0].rowIndex }); + }).join('') + '\n \n '; +} + +/***/ }), +/* 7 */ +/***/ (function(module, exports) { + +module.exports = __WEBPACK_EXTERNAL_MODULE_7__; + +/***/ }), +/* 8 */ +/***/ (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; }; }(); + +var _utils = __webpack_require__(1); + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +var DataManager = function () { + function DataManager(options) { + _classCallCheck(this, DataManager); + + this.options = options; + this.currentSort = { + colIndex: -1, + sortOrder: 'none' // asc, desc, none + }; + this.sortRows = (0, _utils.promisify)(this.sortRows, this); + this.switchColumn = (0, _utils.promisify)(this.switchColumn, this); + this.removeColumn = (0, _utils.promisify)(this.removeColumn, this); + } + + _createClass(DataManager, [{ + key: 'init', + value: function init(data) { + var columns = data.columns, + rows = data.rows; + + + this.rowCount = 0; + this.columns = []; + this.rows = []; + + this.columns = this.prepareColumns(columns); + this.rows = this.prepareRows(rows); + + this.prepareNumericColumns(); + } + }, { + key: 'prepareColumns', + value: function prepareColumns(columns) { + if (!Array.isArray(columns)) { + throw new TypeError('`columns` must be an array'); + } + + if (this.options.addSerialNoColumn && !this._serialNoColumnAdded) { + var val = { + content: 'Sr. No', + editable: false, + resizable: false, + align: 'center', + focusable: false, + dropdown: false + }; + + columns = [val].concat(columns); + this._serialNoColumnAdded = true; + } + + if (this.options.addCheckboxColumn && !this._checkboxColumnAdded) { + var _val = { + content: '', + editable: false, + resizable: false, + sortable: false, + focusable: false, + dropdown: false + }; + + columns = [_val].concat(columns); + this._checkboxColumnAdded = true; + } + + return _prepareColumns(columns, { + isHeader: 1, + format: function format(value) { + return '' + value + ''; + } + }); + } + }, { + key: 'prepareNumericColumns', + value: function prepareNumericColumns() { + var row0 = this.getRow(0); + this.columns = this.columns.map(function (column, i) { + + var cellValue = row0[i].content; + if (!column.align && cellValue && (0, _utils.isNumeric)(cellValue)) { + column.align = 'right'; + } + + return column; + }); + } + }, { + key: 'prepareRows', + value: function prepareRows(rows) { + var _this = this; + + if (!Array.isArray(rows) || !Array.isArray(rows[0])) { + throw new TypeError('`rows` must be an array of arrays'); + } + + rows = rows.map(function (row, i) { + var index = _this._getNextRowCount(); + + if (row.length < _this.columns.length) { + if (_this._serialNoColumnAdded) { + var val = index + 1 + ''; + + row = [val].concat(row); + } + + if (_this._checkboxColumnAdded) { + var _val2 = ''; + + row = [_val2].concat(row); + } + } + + return prepareRow(row, index); + }); + + return rows; + } + }, { + key: 'appendRows', + value: function appendRows(rows) { + if (Array.isArray(rows) && !Array.isArray(rows[0])) { + rows = [rows]; + } + var _rows = this.prepareRows(rows); + + this.rows = this.rows.concat(_rows); + } + }, { + key: 'sortRows', + value: function sortRows(colIndex) { + var sortOrder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'none'; + + colIndex = +colIndex; + + if (this.currentSort.colIndex === colIndex) { + // reverse the array if only sortOrder changed + if (this.currentSort.sortOrder === 'asc' && sortOrder === 'desc' || this.currentSort.sortOrder === 'desc' && sortOrder === 'asc') { + this.reverseArray(this.rows); + this.currentSort.sortOrder = sortOrder; + return; + } + } + + this.rows.sort(function (a, b) { + var _aIndex = a[0].rowIndex; + var _bIndex = b[0].rowIndex; + var _a = a[colIndex].content; + var _b = b[colIndex].content; + + if (sortOrder === 'none') { + return _aIndex - _bIndex; + } else if (sortOrder === 'asc') { + if (_a < _b) return -1; + if (_a > _b) return 1; + if (_a === _b) return 0; + } else if (sortOrder === 'desc') { + if (_a < _b) return 1; + if (_a > _b) return -1; + if (_a === _b) return 0; + } + return 0; + }); + + this.currentSort.colIndex = colIndex; + this.currentSort.sortOrder = sortOrder; + } + }, { + key: 'reverseArray', + value: function reverseArray(array) { + var left = null; + var right = null; + var length = array.length; + + for (left = 0, right = length - 1; left < right; left += 1, right -= 1) { + var temporary = array[left]; + + array[left] = array[right]; + array[right] = temporary; + } + } + }, { + key: 'switchColumn', + value: function switchColumn(index1, index2) { + // update columns + var temp = this.columns[index1]; + this.columns[index1] = this.columns[index2]; + this.columns[index2] = temp; + + this.columns[index1].colIndex = index1; + this.columns[index2].colIndex = index2; + + // update rows + this.rows = this.rows.map(function (row) { + var newCell1 = Object.assign({}, row[index1], { colIndex: index2 }); + var newCell2 = Object.assign({}, row[index2], { colIndex: index1 }); + + var newRow = row.map(function (cell) { + // make object copy + return Object.assign({}, cell); + }); + + newRow[index2] = newCell1; + newRow[index1] = newCell2; + + return newRow; + }); + } + }, { + key: 'removeColumn', + value: function removeColumn(index) { + index = +index; + var filter = function filter(cell) { + return cell.colIndex !== index; + }; + var map = function map(cell, i) { + return Object.assign({}, cell, { colIndex: i }); + }; + // update columns + this.columns = this.columns.filter(filter).map(map); + + // update rows + this.rows = this.rows.map(function (row) { + var newRow = row.filter(filter).map(map); + + return newRow; + }); + } + }, { + key: 'getRowCount', + value: function getRowCount() { + return this.rowCount; + } + }, { + key: '_getNextRowCount', + value: function _getNextRowCount() { + var val = this.rowCount; + + this.rowCount++; + return val; + } + }, { + key: 'getRows', + value: function getRows(start, end) { + return this.rows.slice(start, end); + } + }, { + key: 'getColumns', + value: function getColumns(skipStandardColumns) { + var columns = this.columns; + + if (skipStandardColumns) { + columns = columns.slice(this.getStandardColumnCount()); + } + + return columns; + } + }, { + key: 'getStandardColumnCount', + value: function getStandardColumnCount() { + if (this.options.addCheckboxColumn && this.options.addSerialNoColumn) { + return 2; + } + + if (this.options.addCheckboxColumn || this.options.addSerialNoColumn) { + return 1; + } + + return 0; + } + }, { + key: 'getColumnCount', + value: function getColumnCount(skipStandardColumns) { + var val = this.columns.length; + + if (skipStandardColumns) { + val = val - this.getStandardColumnCount(); + } + + return val; + } + }, { + key: 'getColumn', + value: function getColumn(colIndex) { + colIndex = +colIndex; + return this.columns.find(function (col) { + return col.colIndex === colIndex; + }); + } + }, { + key: 'getRow', + value: function getRow(rowIndex) { + rowIndex = +rowIndex; + return this.rows.find(function (row) { + return row[0].rowIndex === rowIndex; + }); + } + }, { + key: 'getCell', + value: function getCell(colIndex, rowIndex) { + rowIndex = +rowIndex; + colIndex = +colIndex; + return this.rows.find(function (row) { + return row[0].rowIndex === rowIndex; + })[colIndex]; + } + }, { + key: 'get', + value: function get() { + return { + columns: this.columns, + rows: this.rows + }; + } + }]); + + return DataManager; +}(); + +exports.default = DataManager; + + +function _prepareColumns(columns) { + var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + + var _columns = columns.map(prepareCell); + + return _columns.map(function (col) { + return Object.assign({}, col, props); + }); +} + +function prepareRow(row, i) { + return _prepareColumns(row, { + rowIndex: i + }); +} + +function prepareCell(col, i) { + if (typeof col === 'string') { + col = { + content: col + }; + } + return Object.assign(col, { + colIndex: i + }); +} +module.exports = exports['default']; + +/***/ }), +/* 9 */ +/***/ (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 handlers = {}; + +function bind() { + _dom2.default.on(document, 'keydown', handler); +} + +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(); + } + }); + } +} + +bind(); + +exports.default = { + 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']; + /***/ }), /* 10 */ /***/ (function(module, exports) { @@ -2918,12 +2928,7 @@ exports.getDropdownHTML = getDropdownHTML; module.exports = __WEBPACK_EXTERNAL_MODULE_10__; /***/ }), -/* 11 */, -/* 12 */, -/* 13 */, -/* 14 */, -/* 15 */, -/* 16 */ +/* 11 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; @@ -2956,7 +2961,7 @@ var Style = function () { _createClass(Style, [{ key: 'destroy', value: function destroy() { - this.datatable.wrapper.removeChild(this.styleEl); + this.styleEl.remove(); } }, { key: 'setStyle', @@ -2989,13 +2994,13 @@ exports.default = Style; module.exports = exports['default']; /***/ }), -/* 17 */ +/* 12 */ /***/ (function(module, exports, __webpack_require__) { // style-loader: Adds some css to the DOM by adding a