From 0ccc3627ae62c410b94588f81f70236d18ceaa07 Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Mon, 6 Nov 2017 18:25:07 +0530 Subject: [PATCH] Add RowManager and ColumnManager --- lib/frappe-datatable.js | 1524 +++++++++++++++++++---------------- lib/frappe-datatable.js.map | 2 +- src/cellmanager.js | 48 +- src/columnmanager.js | 271 +++++++ src/datamanager.js | 51 +- src/datatable.js | 390 +-------- src/dom.js | 10 +- src/rowmanager.js | 120 +++ src/utils.js | 7 +- 9 files changed, 1348 insertions(+), 1075 deletions(-) create mode 100644 src/columnmanager.js create mode 100644 src/rowmanager.js diff --git a/lib/frappe-datatable.js b/lib/frappe-datatable.js index e9fa99c..313b592 100644 --- a/lib/frappe-datatable.js +++ b/lib/frappe-datatable.js @@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap /******/ __webpack_require__.p = ""; /******/ /******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 1); +/******/ return __webpack_require__(__webpack_require__.s = 2); /******/ }) /************************************************************************/ /******/ ([ @@ -334,6 +334,10 @@ function copyTextToClipboard(text) { document.body.removeChild(textArea); } +function isNumeric(val) { + return !isNaN(val); +} + exports.default = { getHeaderHTML: getHeaderHTML, getBodyHTML: getBodyHTML, @@ -351,7 +355,8 @@ exports.default = { escapeRegExp: escapeRegExp, getCellContent: getCellContent, copyTextToClipboard: copyTextToClipboard, - camelCaseToDash: camelCaseToDash + camelCaseToDash: camelCaseToDash, + isNumeric: isNumeric }; module.exports = exports['default']; @@ -366,19 +371,177 @@ Object.defineProperty(exports, "__esModule", { value: true }); -var _datatable = __webpack_require__(2); +var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; -var _datatable2 = _interopRequireDefault(_datatable); +exports.default = $; +function $(expr, con) { + return typeof expr === 'string' ? (con || document).querySelector(expr) : expr || null; +} -var _package = __webpack_require__(11); +$.each = function (expr, con) { + return typeof expr === 'string' ? Array.from((con || document).querySelectorAll(expr)) : expr || null; +}; -var _package2 = _interopRequireDefault(_package); +$.create = function (tag, o) { + var element = document.createElement(tag); -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + var _loop = function _loop(i) { + var val = o[i]; -_datatable2.default.__version__ = _package2.default.version; + if (i === 'inside') { + $(val).appendChild(element); + } else if (i === 'around') { + var ref = $(val); + ref.parentNode.insertBefore(element, ref); + element.appendChild(ref); + } else if (i === 'styles') { + if ((typeof val === 'undefined' ? 'undefined' : _typeof(val)) === 'object') { + Object.keys(val).map(function (prop) { + element.style[prop] = val[prop]; + }); + } + } else if (i in element) { + element[i] = val; + } else { + element.setAttribute(i, val); + } + }; -exports.default = _datatable2.default; + for (var i in o) { + _loop(i); + } + + return element; +}; + +$.on = function (element, event, selector, callback) { + if (!callback) { + callback = selector; + $.bind(element, event, callback); + } else { + $.delegate(element, event, selector, callback); + } +}; + +$.bind = function (element, event, callback) { + event.split(/\s+/).forEach(function (event) { + element.addEventListener(event, callback); + }); +}; + +$.delegate = function (element, event, selector, callback) { + element.addEventListener(event, function (e) { + var delegatedTarget = e.target.closest(selector); + if (delegatedTarget) { + e.delegatedTarget = delegatedTarget; + callback.call(this, e, delegatedTarget); + } + }); +}; + +$.unbind = function (element, o) { + if (element) { + var _loop2 = function _loop2(event) { + var callback = o[event]; + + event.split(/\s+/).forEach(function (event) { + element.removeEventListener(event, callback); + }); + }; + + for (var event in o) { + _loop2(event); + } + } +}; + +$.fire = function (target, type, properties) { + var evt = document.createEvent('HTMLEvents'); + + evt.initEvent(type, true, true); + + for (var j in properties) { + evt[j] = properties[j]; + } + + return target.dispatchEvent(evt); +}; + +$.data = function (element, attrs) { + // eslint-disable-line + if (!attrs) { + return element.dataset; + } + + for (var attr in attrs) { + element.dataset[attr] = attrs[attr]; + } +}; + +$.style = function (elements, styleMap) { + // eslint-disable-line + + if (typeof styleMap === 'string') { + return $.getStyle(elements, styleMap); + } + + if (!Array.isArray(elements)) { + elements = [elements]; + } + + elements.map(function (element) { + for (var prop in styleMap) { + element.style[prop] = styleMap[prop]; + } + }); +}; + +$.removeStyle = function (elements, styleProps) { + if (!Array.isArray(elements)) { + elements = [elements]; + } + + if (!Array.isArray(styleProps)) { + styleProps = [styleProps]; + } + + elements.map(function (element) { + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; + + try { + for (var _iterator = styleProps[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var prop = _step.value; + + element.style[prop] = ''; + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return) { + _iterator.return(); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } + } + }); +}; + +$.getStyle = function (element, prop) { + var val = getComputedStyle(element)[prop]; + + if (['width', 'height'].includes(prop)) { + val = parseFloat(val); + } + + return val; +}; module.exports = exports['default']; /***/ }), @@ -388,6 +551,32 @@ module.exports = exports['default']; "use strict"; +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _datatable = __webpack_require__(3); + +var _datatable2 = _interopRequireDefault(_datatable); + +var _package = __webpack_require__(13); + +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']; + +/***/ }), +/* 3 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + Object.defineProperty(exports, "__esModule", { value: true }); @@ -396,23 +585,31 @@ var _createClass = function () { function defineProperties(target, props) { for var _utils = __webpack_require__(0); -var _dom = __webpack_require__(14); +var _dom = __webpack_require__(1); var _dom2 = _interopRequireDefault(_dom); -var _datamanager = __webpack_require__(3); +var _datamanager = __webpack_require__(4); var _datamanager2 = _interopRequireDefault(_datamanager); -var _cellmanager = __webpack_require__(4); +var _cellmanager = __webpack_require__(5); var _cellmanager2 = _interopRequireDefault(_cellmanager); -var _style = __webpack_require__(12); +var _columnmanager = __webpack_require__(14); + +var _columnmanager2 = _interopRequireDefault(_columnmanager); + +var _rowmanager = __webpack_require__(15); + +var _rowmanager2 = _interopRequireDefault(_rowmanager); + +var _style = __webpack_require__(7); var _style2 = _interopRequireDefault(_style); -__webpack_require__(6); +__webpack_require__(8); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } @@ -429,7 +626,7 @@ var DEFAULT_OPTIONS = { addCheckboxColumn: true, enableClusterize: true, enableLogs: false, - takeAvailableSpace: false + takeAvailableSpace: true }; var DataTable = function () { @@ -444,13 +641,13 @@ var DataTable = function () { this.options = Object.assign({}, DEFAULT_OPTIONS, options); // custom user events this.events = this.options.events; - // map of checked rows - this.checkMap = []; - // make dom, make style, bind events - this.make(); + this.prepare(); + this.style = new _style2.default(this.wrapper); 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) { @@ -459,17 +656,16 @@ var DataTable = function () { } _createClass(DataTable, [{ - key: 'make', - value: function make() { - this.makeDom(); - this.makeStyle(); - this.bindEvents(); + key: 'prepare', + value: function prepare() { + this.prepareDom(); } }, { - key: 'makeDom', - value: function makeDom() { + key: 'prepareDom', + value: function prepareDom() { this.wrapper.innerHTML = '\n
\n \n
\n
\n
\n
\n
\n
\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); } @@ -483,7 +679,7 @@ var DataTable = function () { key: 'appendRows', value: function appendRows(rows) { this.datamanager.appendRows(rows); - this.render(); + this.rowmanager.refreshRows(); } }, { key: 'render', @@ -495,9 +691,7 @@ var DataTable = function () { }, { key: 'renderHeader', value: function renderHeader() { - var columns = this.datamanager.getColumns(); - - this.header.innerHTML = (0, _utils.getHeaderHTML)(columns); + this.columnmanager.renderHeader(); } }, { key: 'renderBody', @@ -518,7 +712,7 @@ var DataTable = function () { }, { key: 'renderBodyWithClusterize', value: function renderBodyWithClusterize() { - var self = this; + var _this = this; // empty body this.bodyScrollable.innerHTML = '\n \n ' + (0, _utils.getBodyHTML)([]) + '\n
\n '; @@ -538,7 +732,7 @@ var DataTable = function () { contentElem: (0, _dom2.default)('tbody', this.bodyScrollable), callbacks: { clusterChanged: function clusterChanged() { - self.highlightCheckedRows(); + _this.rowmanager.highlightCheckedRows(); } } }); @@ -573,15 +767,15 @@ var DataTable = function () { }, { key: 'appendNextPagePromise', value: function appendNextPagePromise(start, end) { - var _this = this; + var _this2 = this; return new Promise(function (resolve) { setTimeout(function () { - var rows = _this.datamanager.getRows(start, end); - var data = _this.getDataForClusterize(rows); + var rows = _this2.datamanager.getRows(start, end); + var data = _this2.getDataForClusterize(rows); - _this.clusterize.append(data); - _this.log('dataAppended', rows.length); + _this2.clusterize.append(data); + _this2.log('dataAppended', rows.length); resolve(); }, 0); }); @@ -593,68 +787,10 @@ var DataTable = function () { return (0, _utils.getRowHTML)(row, { rowIndex: row[0].rowIndex }); }); } - }, { - key: 'refreshRows', - value: function refreshRows() { - this.renderBody(); - this.setDimensions(); - } - }, { - key: 'bindEvents', - value: function bindEvents() { - this.bindResizeColumn(); - this.bindSortColumn(); - this.bindCheckbox(); - } }, { key: 'setDimensions', value: function setDimensions() { - var self = this; - - if (!this.options.takeAvailableSpace) { - // setting width as 0 will ensure that the - // header doesn't take the available space - _dom2.default.style(this.header, { - width: 0 - }); - } - - _dom2.default.style(this.header, { - margin: 0 - }); - - // cache minWidth for each column - this.minWidthMap = (0, _utils.getDefault)(this.minWidthMap, []); - - _dom2.default.each('.data-table-col', this.header).map(function (col) { - var width = _dom2.default.style((0, _dom2.default)('.content', col), 'width'); - - var _$$data = _dom2.default.data(col), - colIndex = _$$data.colIndex; - - if (!self.minWidthMap[colIndex]) { - // only set this once - self.minWidthMap[colIndex] = width; - } - }); - - // set initial width as naturally calculated by table's first row - _dom2.default.each('.data-table-row[data-row-index="0"] .data-table-col', this.bodyScrollable).map(function ($cell) { - - var width = _dom2.default.style((0, _dom2.default)('.content', $cell), 'width'); - var height = _dom2.default.style((0, _dom2.default)('.content', $cell), 'height'); - - var _self$getCellAttr = self.getCellAttr($cell), - colIndex = _self$getCellAttr.colIndex; - - var minWidth = self.getColumnMinWidth(colIndex); - - if (width < minWidth) { - width = minWidth; - } - self.setColumnWidth(colIndex, width); - self.setDefaultCellHeight(height); - }); + this.columnmanager.setDimensions(); this.setBodyWidth(); @@ -662,375 +798,21 @@ var DataTable = function () { marginTop: _dom2.default.style(this.header, 'height') + 'px' }); - // center align Sr. No column - if (this.options.addSerialNoColumn) { - var index = this.getSerialColumnIndex(); - - this.style.setStyle('.data-table [data-col-index="' + index + '"]', { - 'text-align': 'center' - }); - } - _dom2.default.style((0, _dom2.default)('table', this.bodyScrollable), { margin: 0 }); } - }, { - key: 'bindResizeColumn', - value: function bindResizeColumn() { - var _this2 = this; - - var self = this; - var isDragging = false; - var $currCell = void 0, - startWidth = void 0, - startX = void 0; - - _dom2.default.on(this.header, 'mousedown', '.data-table-col', function (e, cell) { - $currCell = cell; - - var _getCellAttr = _this2.getCellAttr($currCell), - colIndex = _getCellAttr.colIndex; - - var col = self.getColumn(colIndex); - - if (col && col.resizable === false) { - return; - } - - isDragging = true; - startWidth = _dom2.default.style((0, _dom2.default)('.content', $currCell), 'width'); - startX = e.pageX; - }); - - _dom2.default.on(document.body, 'mouseup', function (e) { - if (!$currCell) return; - isDragging = false; - - var _getCellAttr2 = _this2.getCellAttr($currCell), - colIndex = _getCellAttr2.colIndex; - - var width = _dom2.default.style((0, _dom2.default)('.content', $currCell), 'width'); - - self.setColumnWidth(colIndex, width); - self.setBodyWidth(); - $currCell = null; - }); - - _dom2.default.on(document.body, 'mousemove', function (e) { - if (!isDragging) return; - var finalWidth = startWidth + (e.pageX - startX); - - var _getCellAttr3 = _this2.getCellAttr($currCell), - colIndex = _getCellAttr3.colIndex; - - if (self.getColumnMinWidth(colIndex) > finalWidth) { - // don't resize past minWidth - return; - } - - self.setColumnHeaderWidth(colIndex, finalWidth); - }); - } - }, { - key: 'bindSortColumn', - value: function bindSortColumn() { - var _this3 = this; - - var self = this; - - _dom2.default.on(this.header, 'click', '.data-table-col .content span', function (e, span) { - var $cell = span.closest('.data-table-col'); - - var _getCellAttr4 = _this3.getCellAttr($cell), - colIndex = _getCellAttr4.colIndex, - sortOrder = _getCellAttr4.sortOrder; - - sortOrder = (0, _utils.getDefault)(sortOrder, 'none'); - var col = self.getColumn(colIndex); - - if (col && col.sortable === false) { - return; - } - - // reset sort indicator - (0, _dom2.default)('.sort-indicator', _this3.header).textContent = ''; - _dom2.default.each('.data-table-col', _this3.header).map(function ($cell) { - $cell.setAttribute('data-sort-order', 'none'); - }); - - if (sortOrder === 'none') { - $cell.setAttribute('data-sort-order', 'asc'); - (0, _dom2.default)('.sort-indicator', $cell).textContent = '▲'; - } else if (sortOrder === 'asc') { - $cell.setAttribute('data-sort-order', 'desc'); - (0, _dom2.default)('.sort-indicator', $cell).textContent = '▼'; - } else if (sortOrder === 'desc') { - $cell.setAttribute('data-sort-order', 'none'); - (0, _dom2.default)('.sort-indicator', $cell).textContent = ''; - } - - // sortWith this action - sortOrder = $cell.getAttribute('data-sort-order'); - - if (self.events && self.events.onSort) { - self.events.onSort(colIndex, sortOrder); - } else { - self.sortRows(colIndex, sortOrder); - self.refreshRows(); - } - }); - } - }, { - key: 'sortRows', - value: function sortRows(colIndex, sortOrder) { - this.datamanager.sortRows(colIndex, sortOrder); - } - }, { - key: 'bindCheckbox', - value: function bindCheckbox() { - var _this4 = this; - - if (!this.options.addCheckboxColumn) return; - - _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 _getCellAttr5 = _this4.getCellAttr($cell), - rowIndex = _getCellAttr5.rowIndex, - isHeader = _getCellAttr5.isHeader; - - var checked = $checkbox.checked; - - if (isHeader) { - _this4.checkAll(checked); - } else { - _this4.checkRow(rowIndex, checked); - } - }); - } - }, { - 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 _this5 = this; - - this.getCheckedRows().map(function (rowIndex) { - return _this5.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 = (0, _dom2.default)('.data-table-row[data-row-index="' + rowIndex + '"]', this.bodyScrollable); - - if (toggle) { - $row.classList.add('row-highlight'); - } else { - $row.classList.remove('row-highlight'); - } - } - }, { - 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'); - } - } - }, { - key: 'setColumnWidth', - value: function setColumnWidth(colIndex, width) { - // set width for content - this.style.setStyle('[data-col-index="' + colIndex + '"] .content', { - width: width + 'px' - }); - // set width for edit cell - this.style.setStyle('[data-col-index="' + colIndex + '"] .edit-cell', { - width: width + 'px' - }); - } - }, { - key: 'setColumnHeaderWidth', - value: function setColumnHeaderWidth(colIndex, width) { - this.style.setStyle('[data-col-index="' + colIndex + '"][data-is-header] .content', { - width: width + 'px' - }); - } - }, { - key: 'setDefaultCellHeight', - value: function setDefaultCellHeight(height) { - this.style.setStyle('.data-table-col .content', { - height: height + 'px' - }); - } - }, { - key: 'setRowHeight', - value: function setRowHeight(rowIndex, height) { - this.style.setStyle('[data-row-index="' + rowIndex + '"] .content', { - height: height + 'px' - }); - } - }, { - key: 'setColumnWidths', - value: function setColumnWidths() { - var _this6 = this; - - var availableWidth = this.wrapper.width(); - var headerWidth = this.header.width(); - - if (headerWidth > availableWidth) { - // don't resize, horizontal scroll takes place - return; - } - - var columns = this.datamanager.getColumns(); - var deltaWidth = (availableWidth - headerWidth) / this.datamanager.getColumnCount(); - - columns.map(function (col) { - var width = _dom2.default.style(_this6.getColumnHeaderElement(col.colIndex), 'width'); - var finalWidth = width + deltaWidth - 16; - - if (_this6.options.addSerialNoColumn && col.colIndex === 0) { - return; - } - - _this6.setColumnHeaderWidth(col.colIndex, finalWidth); - _this6.setColumnWidth(col.colIndex, finalWidth); - }); - this.setBodyWidth(); - } }, { key: 'setBodyWidth', value: function setBodyWidth() { var width = _dom2.default.style(this.header, 'width'); - _dom2.default.style(this.bodyScrollable, { width: width }); - } - }, { - key: 'makeStyle', - value: function makeStyle() { - this.style = new _style2.default(this.wrapper); - } - }, { - key: 'getColumn', - value: function getColumn(colIndex) { - return this.datamanager.getColumn(colIndex); - } - }, { - key: 'getRow', - value: function getRow(rowIndex) { - return this.datamanager.getRow(rowIndex); - } - }, { - key: 'getCell', - value: function getCell(colIndex, rowIndex) { - return this.datamanager.getCell(colIndex, rowIndex); + _dom2.default.style(this.bodyScrollable, { width: width + 'px' }); } }, { key: 'getColumnHeaderElement', value: function getColumnHeaderElement(colIndex) { - colIndex = +colIndex; - if (colIndex < 0) return null; - return (0, _dom2.default)('.data-table-col[data-is-header][data-col-index="' + colIndex + '"]', this.wrapper); - } - }, { - key: 'getColumnMinWidth', - value: function getColumnMinWidth(colIndex) { - colIndex = +colIndex; - return this.minWidthMap && this.minWidthMap[colIndex]; - } - }, { - key: 'getCellAttr', - value: function getCellAttr($cell) { - return _dom2.default.data($cell); - } - }, { - key: 'getTotalRows', - value: function getTotalRows() { - return this.datamanager.getRowCount(); - } - }, { - key: 'getFirstColumnIndex', - value: function getFirstColumnIndex() { - if (this.options.addCheckboxColumn && this.options.addSerialNoColumn) { - return 2; - } - - if (this.options.addCheckboxColumn || this.options.addSerialNoColumn) { - return 1; - } - - return 0; - } - }, { - key: 'getLastColumnIndex', - value: function getLastColumnIndex() { - return this.datamanager.getColumnCount() - 1; - } - }, { - key: 'getLastRowIndex', - value: function getLastRowIndex() { - return this.datamanager.getRowCount() - 1; - } - }, { - key: 'getSerialColumnIndex', - value: function getSerialColumnIndex() { - var columns = this.datamanager.getColumns(); - - return columns.findIndex(function (column) { - return column.content.includes('Sr. No'); - }); + return this.columnmanager.getColumnHeaderElement(colIndex); } }, { key: 'getViewportHeight', @@ -1057,7 +839,7 @@ exports.default = DataTable; module.exports = exports['default']; /***/ }), -/* 3 */ +/* 4 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; @@ -1071,6 +853,8 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol 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__(0); + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var DataManager = function () { @@ -1094,6 +878,8 @@ var DataManager = function () { this.columns = this.prepareColumns(columns); this.rows = this.prepareRows(rows); + + this.prepareNumericColumns(); } }, { key: 'prepareColumns', @@ -1106,7 +892,8 @@ var DataManager = function () { var val = { content: 'Sr. No', editable: false, - resizable: false + resizable: false, + align: 'center' }; columns = [val].concat(columns); @@ -1140,6 +927,20 @@ var DataManager = function () { isHeader: 1 }); } + }, { + 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) { @@ -1254,13 +1055,38 @@ var DataManager = function () { } }, { key: 'getColumns', - value: function getColumns() { - return this.columns; + 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() { - return this.columns.length; + value: function getColumnCount(skipStandardColumns) { + var val = this.columns.length; + + if (skipStandardColumns) { + val = val - this.getStandardColumnCount(); + } + + return val; } }, { key: 'getColumn', @@ -1332,7 +1158,7 @@ function prepareCell(col, i) { module.exports = exports['default']; /***/ }), -/* 4 */ +/* 5 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; @@ -1348,11 +1174,11 @@ var _createClass = function () { function defineProperties(target, props) { for var _utils = __webpack_require__(0); -var _keyboard = __webpack_require__(5); +var _keyboard = __webpack_require__(6); var _keyboard2 = _interopRequireDefault(_keyboard); -var _dom = __webpack_require__(14); +var _dom = __webpack_require__(1); var _dom2 = _interopRequireDefault(_dom); @@ -1371,6 +1197,8 @@ var CellManager = function () { this.options = this.instance.options; this.style = this.instance.style; this.bodyScrollable = this.instance.bodyScrollable; + this.columnmanager = this.instance.columnmanager; + this.rowmanager = this.instance.rowmanager; this.bindEvents(); } @@ -1449,9 +1277,9 @@ var CellManager = function () { var $cell = _this2.$focusedCell; - var _getCellAttr = _this2.getCellAttr($cell), - rowIndex = _getCellAttr.rowIndex, - colIndex = _getCellAttr.colIndex; + var _$$data = _dom2.default.data($cell), + rowIndex = _$$data.rowIndex, + colIndex = _$$data.colIndex; if (direction === 'left') { $cell = _this2.getLeftMostCell$(rowIndex); @@ -1471,8 +1299,8 @@ var CellManager = function () { if (!_this2.$focusedCell) return false; if (!_this2.inViewport(_this2.$focusedCell)) { - var _getCellAttr2 = _this2.getCellAttr(_this2.$focusedCell), - rowIndex = _getCellAttr2.rowIndex; + var _$$data2 = _dom2.default.data(_this2.$focusedCell), + rowIndex = _$$data2.rowIndex; _this2.scrollToRow(rowIndex - _this2.getRowCountPerPage() + 2); return true; @@ -1565,10 +1393,11 @@ var CellManager = function () { value: function focusCell($cell) { if (!$cell) return; - var _getCellAttr3 = this.getCellAttr($cell), - colIndex = _getCellAttr3.colIndex; + var _$$data3 = _dom2.default.data($cell), + colIndex = _$$data3.colIndex, + isHeader = _$$data3.isHeader; - if (this.isStandardCell(colIndex)) { + if (this.isStandardCell(colIndex) || isHeader) { return; } @@ -1591,11 +1420,11 @@ var CellManager = function () { }, { key: 'highlightRowColumnHeader', value: function highlightRowColumnHeader($cell) { - var _getCellAttr4 = this.getCellAttr($cell), - colIndex = _getCellAttr4.colIndex, - rowIndex = _getCellAttr4.rowIndex; + var _$$data4 = _dom2.default.data($cell), + colIndex = _$$data4.colIndex, + rowIndex = _$$data4.rowIndex; - var _colIndex = this.instance.getSerialColumnIndex(); + var _colIndex = this.columnmanager.getSerialColumnIndex(); var colHeaderSelector = '.data-table-header .data-table-col[data-col-index="' + colIndex + '"]'; var rowHeaderSelector = '.data-table-col[data-row-index="' + rowIndex + '"][data-col-index="' + _colIndex + '"]'; @@ -1627,6 +1456,8 @@ var CellManager = function () { value: function _selectArea($cell1, $cell2) { var _this6 = this; + if ($cell1 === $cell2) return false; + var cells = this.getCellsInRange($cell1, $cell2); if (!cells) return false; @@ -1659,8 +1490,8 @@ var CellManager = function () { return false; } - var cell1 = this.getCellAttr($cell1); - var cell2 = this.getCellAttr($cell2); + var cell1 = _dom2.default.data($cell1); + var cell2 = _dom2.default.data($cell2); colIndex1 = cell1.colIndex; rowIndex1 = cell1.rowIndex; @@ -1721,20 +1552,20 @@ var CellManager = function () { }, { key: 'activateEditing', value: function activateEditing($cell) { - var _getCellAttr5 = this.getCellAttr($cell), - rowIndex = _getCellAttr5.rowIndex, - colIndex = _getCellAttr5.colIndex; + var _$$data5 = _dom2.default.data($cell), + rowIndex = _$$data5.rowIndex, + colIndex = _$$data5.colIndex; - var col = this.instance.getColumn(colIndex); + var col = this.instance.columnmanager.getColumn(colIndex); if (col && col.editable === false) { return; } if (this.$editingCell) { - var _getCellAttr6 = this.getCellAttr(this.$editingCell), - _rowIndex = _getCellAttr6._rowIndex, - _colIndex = _getCellAttr6._colIndex; + var _$$data6 = _dom2.default.data(this.$editingCell), + _rowIndex = _$$data6._rowIndex, + _colIndex = _$$data6._colIndex; if (rowIndex === _rowIndex && colIndex === _colIndex) { // editing the same cell @@ -1795,9 +1626,9 @@ var CellManager = function () { value: function submitEditing($cell) { var _this7 = this; - var _getCellAttr7 = this.getCellAttr($cell), - rowIndex = _getCellAttr7.rowIndex, - colIndex = _getCellAttr7.colIndex; + var _$$data7 = _dom2.default.data($cell), + rowIndex = _$$data7.rowIndex, + colIndex = _$$data7.colIndex; if ($cell) { var editing = this.currentCellEditing; @@ -1871,7 +1702,7 @@ var CellManager = function () { key: 'isStandardCell', value: function isStandardCell(colIndex) { // Standard cells are in Sr. No and Checkbox column - return colIndex < this.instance.getFirstColumnIndex(); + return colIndex < this.columnmanager.getFirstColumnIndex(); } }, { key: 'getCell$', @@ -1881,8 +1712,8 @@ var CellManager = function () { }, { key: 'getAboveCell$', value: function getAboveCell$($cell) { - var _getCellAttr8 = this.getCellAttr($cell), - colIndex = _getCellAttr8.colIndex; + var _$$data8 = _dom2.default.data($cell), + colIndex = _$$data8.colIndex; var $aboveRow = $cell.parentElement.previousElementSibling; @@ -1891,8 +1722,8 @@ var CellManager = function () { }, { key: 'getBelowCell$', value: function getBelowCell$($cell) { - var _getCellAttr9 = this.getCellAttr($cell), - colIndex = _getCellAttr9.colIndex; + var _$$data9 = _dom2.default.data($cell), + colIndex = _$$data9.colIndex; var $belowRow = $cell.parentElement.nextElementSibling; @@ -1911,22 +1742,22 @@ var CellManager = function () { }, { key: 'getLeftMostCell$', value: function getLeftMostCell$(rowIndex) { - return this.getCell$(rowIndex, this.instance.getFirstColumnIndex()); + return this.getCell$(rowIndex, this.columnmanager.getFirstColumnIndex()); } }, { key: 'getRightMostCell$', value: function getRightMostCell$(rowIndex) { - return this.getCell$(rowIndex, this.instance.getLastColumnIndex()); + return this.getCell$(rowIndex, this.columnmanager.getLastColumnIndex()); } }, { key: 'getTopMostCell$', value: function getTopMostCell$(colIndex) { - return this.getCell$(0, colIndex); + return this.getCell$(this.rowmanager.getFirstRowIndex(), colIndex); } }, { key: 'getBottomMostCell$', value: function getBottomMostCell$(colIndex) { - return this.getCell$(this.instance.getLastRowIndex(), colIndex); + return this.getCell$(this.rowmanager.getLastRowIndex(), colIndex); } }, { key: 'getCell', @@ -1947,7 +1778,7 @@ var CellManager = function () { key: 'inViewport', value: function inViewport($cell) { var colIndex = void 0, - rowIndex = void 0; + rowIndex = void 0; // eslint-disable-line if (typeof $cell === 'number') { var _arguments2 = Array.prototype.slice.call(arguments); @@ -1955,7 +1786,7 @@ var CellManager = function () { colIndex = _arguments2[0]; rowIndex = _arguments2[1]; } else { - var cell = this.getCellAttr($cell); + var cell = _dom2.default.data($cell); colIndex = cell.colIndex; rowIndex = cell.rowIndex; @@ -1976,8 +1807,8 @@ var CellManager = function () { }, { key: 'scrollToCell', value: function scrollToCell($cell) { - var _getCellAttr10 = this.getCellAttr($cell), - rowIndex = _getCellAttr10.rowIndex; + var _$$data10 = _dom2.default.data($cell), + rowIndex = _$$data10.rowIndex; this.scrollToRow(rowIndex); } @@ -2002,7 +1833,7 @@ exports.default = CellManager; module.exports = exports['default']; /***/ }), -/* 5 */ +/* 6 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; @@ -2012,7 +1843,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); -var _dom = __webpack_require__(14); +var _dom = __webpack_require__(1); var _dom2 = _interopRequireDefault(_dom); @@ -2080,13 +1911,61 @@ exports.default = { module.exports = exports['default']; /***/ }), -/* 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__(0); + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +var Style = function () { + function Style(wrapper) { + _classCallCheck(this, Style); + + var styleEl = document.createElement('style'); + + document.head.appendChild(styleEl); + this.styleSheet = styleEl.sheet; + } + + _createClass(Style, [{ + key: 'setStyle', + value: function setStyle(rule, styleMap) { + var styles = Object.keys(styleMap).map(function (prop) { + if (!prop.includes('-')) { + prop = (0, _utils.camelCaseToDash)(prop); + } + return prop + ':' + styleMap[prop] + ';'; + }).join(''); + var ruleString = rule + ' { ' + styles + ' }'; + + this.styleSheet.insertRule(ruleString, this.styleSheet.cssRules.length); + } + }]); + + return Style; +}(); + +exports.default = Style; +module.exports = exports['default']; + +/***/ }), +/* 8 */ /***/ (function(module, exports, __webpack_require__) { // style-loader: Adds some css to the DOM by adding a