From 2543a9b602577542a0e32c7347bd9f1a2b7c8679 Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Thu, 16 Nov 2017 21:46:27 +0530 Subject: [PATCH] Cleanup utils.js, move functions to their respective files --- lib/frappe-datatable.js | 2113 +++++++++++++++++------------------ lib/frappe-datatable.js.map | 2 +- src/cellmanager.js | 41 +- src/columnmanager.js | 9 +- src/datatable.js | 14 +- src/rowmanager.js | 17 +- src/utils.js | 152 +-- 7 files changed, 1108 insertions(+), 1240 deletions(-) diff --git a/lib/frappe-datatable.js b/lib/frappe-datatable.js index 43b80d4..ee6129b 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 = 2); +/******/ return __webpack_require__(__webpack_require__.s = 5); /******/ }) /************************************************************************/ /******/ ([ @@ -80,293 +80,6 @@ return /******/ (function(modules) { // webpackBootstrap "use strict"; -Object.defineProperty(exports, "__esModule", { - value: true -}); -function camelCaseToDash(str) { - return str.replace(/([A-Z])/g, function (g) { - return '-' + g[0].toLowerCase(); - }); -} - -function makeDataAttributeString(props) { - var keys = Object.keys(props); - - return keys.map(function (key) { - var _key = camelCaseToDash(key); - var val = props[key]; - - if (val === undefined) return ''; - return 'data-' + _key + '="' + val + '" '; - }).join('').trim(); -} - -function getEditCellHTML() { - return '\n
\n '; -} - -function getColumnHTML(column) { - var rowIndex = column.rowIndex, - colIndex = column.colIndex, - isHeader = column.isHeader; - - var dataAttr = makeDataAttributeString({ - rowIndex: rowIndex, - colIndex: colIndex, - isHeader: isHeader - }); - - return '\n \n ' + getCellContent(column) + '\n \n '; -} - -function getCellContent(column) { - var isHeader = column.isHeader; - - var editCellHTML = isHeader ? '' : getEditCellHTML(); - var sortIndicator = isHeader ? '' : ''; - - return '\n
\n ' + (column.format ? column.format(column.content) : column.content) + '\n ' + sortIndicator + '\n
\n ' + editCellHTML + '\n '; -} - -function getRowHTML(columns, props) { - var dataAttr = makeDataAttributeString(props); - - return '\n \n ' + columns.map(getColumnHTML).join('') + '\n \n '; -} - -function getHeaderHTML(columns) { - var $header = '\n \n ' + getRowHTML(columns, { isHeader: 1, rowIndex: -1 }) + '\n \n '; - - // columns.map(col => { - // if (!col.width) return; - // const $cellContent = $header.find( - // `.data-table-col[data-col-index="${col.colIndex}"] .content` - // ); - - // $cellContent.width(col.width); - // }); - - return $header; -} - -function getBodyHTML(rows) { - return '\n \n ' + rows.map(function (row) { - return getRowHTML(row, { rowIndex: row[0].rowIndex }); - }).join('') + '\n \n '; -} - -function prepareColumn(col, i) { - if (typeof col === 'string') { - col = { - content: col - }; - } - return Object.assign(col, { - colIndex: i - }); -} - -function prepareColumns(columns) { - var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - - var _columns = columns.map(prepareColumn); - - return _columns.map(function (col) { - return Object.assign({}, col, props); - }); -} - -function prepareRowHeader(columns) { - return prepareColumns(columns, { - rowIndex: -1, - isHeader: 1, - format: function format(content) { - return '' + content + ''; - } - }); -} - -function prepareRow(row, i) { - return prepareColumns(row, { - rowIndex: i - }); -} - -function prepareRows(rows) { - return rows.map(prepareRow); -} - -function getDefault(a, b) { - return a !== undefined ? a : b; -} - -function escapeRegExp(str) { - // https://stackoverflow.com/a/6969486 - return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&'); -} - -function getCSSString(styleMap) { - var style = ''; - - for (var prop in styleMap) { - if (styleMap.hasOwnProperty(prop)) { - style += prop + ': ' + styleMap[prop] + '; '; - } - } - - return style.trim(); -} - -function getCSSRuleBlock(rule, styleMap) { - return rule + ' { ' + getCSSString(styleMap) + ' }'; -} - -function namespaceSelector(selector) { - return '.data-table ' + selector; -} - -function buildCSSRule(rule, styleMap) { - var cssRulesString = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ''; - - // build css rules efficiently, - // append new rule if doesnt exist, - // update existing ones - - var rulePatternStr = escapeRegExp(rule) + ' {([^}]*)}'; - var rulePattern = new RegExp(rulePatternStr, 'g'); - - if (cssRulesString && cssRulesString.match(rulePattern)) { - var _loop = function _loop(property) { - var value = styleMap[property]; - var propPattern = new RegExp(escapeRegExp(property) + ':([^;]*);'); - - cssRulesString = cssRulesString.replace(rulePattern, function (match, propertyStr) { - if (propertyStr.match(propPattern)) { - // property exists, replace value with new value - propertyStr = propertyStr.replace(propPattern, function (match, valueStr) { - return property + ': ' + value + ';'; - }); - } - propertyStr = propertyStr.trim(); - - var replacer = rule + ' { ' + propertyStr + ' }'; - - return replacer; - }); - }; - - for (var property in styleMap) { - _loop(property); - } - - return cssRulesString; - } - // no match, append new rule block - return '' + cssRulesString + getCSSRuleBlock(rule, styleMap); -} - -function removeCSSRule(rule) { - var cssRulesString = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; - - var rulePatternStr = escapeRegExp(rule) + ' {([^}]*)}'; - var rulePattern = new RegExp(rulePatternStr, 'g'); - var output = cssRulesString; - - if (cssRulesString && cssRulesString.match(rulePattern)) { - output = cssRulesString.replace(rulePattern, ''); - } - - return output.trim(); -} - -function copyTextToClipboard(text) { - // https://stackoverflow.com/a/30810322/5353542 - var textArea = document.createElement('textarea'); - - // - // *** This styling is an extra step which is likely not required. *** - // - // Why is it here? To ensure: - // 1. the element is able to have focus and selection. - // 2. if element was to flash render it has minimal visual impact. - // 3. less flakyness with selection and copying which **might** occur if - // the textarea element is not visible. - // - // The likelihood is the element won't even render, not even a flash, - // so some of these are just precautions. However in IE the element - // is visible whilst the popup box asking the user for permission for - // the web page to copy to the clipboard. - // - - // Place in top-left corner of screen regardless of scroll position. - textArea.style.position = 'fixed'; - textArea.style.top = 0; - textArea.style.left = 0; - - // Ensure it has a small width and height. Setting to 1px / 1em - // doesn't work as this gives a negative w/h on some browsers. - textArea.style.width = '2em'; - textArea.style.height = '2em'; - - // We don't need padding, reducing the size if it does flash render. - textArea.style.padding = 0; - - // Clean up any borders. - textArea.style.border = 'none'; - textArea.style.outline = 'none'; - textArea.style.boxShadow = 'none'; - - // Avoid flash of white box if rendered for any reason. - textArea.style.background = 'transparent'; - - textArea.value = text; - - document.body.appendChild(textArea); - - textArea.select(); - - try { - document.execCommand('copy'); - } catch (err) { - console.log('Oops, unable to copy'); - } - - document.body.removeChild(textArea); -} - -function isNumeric(val) { - return !isNaN(val); -} - -exports.default = { - getHeaderHTML: getHeaderHTML, - getBodyHTML: getBodyHTML, - getRowHTML: getRowHTML, - getColumnHTML: getColumnHTML, - getEditCellHTML: getEditCellHTML, - prepareRowHeader: prepareRowHeader, - prepareRows: prepareRows, - namespaceSelector: namespaceSelector, - getCSSString: getCSSString, - buildCSSRule: buildCSSRule, - removeCSSRule: removeCSSRule, - makeDataAttributeString: makeDataAttributeString, - getDefault: getDefault, - escapeRegExp: escapeRegExp, - getCellContent: getCellContent, - copyTextToClipboard: copyTextToClipboard, - camelCaseToDash: camelCaseToDash, - isNumeric: isNumeric -}; -module.exports = exports['default']; - -/***/ }), -/* 1 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - - Object.defineProperty(exports, "__esModule", { value: true }); @@ -545,7 +258,7 @@ $.getStyle = function (element, prop) { module.exports = exports['default']; /***/ }), -/* 2 */ +/* 1 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; @@ -554,307 +267,180 @@ module.exports = exports['default']; Object.defineProperty(exports, "__esModule", { value: true }); +exports.camelCaseToDash = camelCaseToDash; +exports.makeDataAttributeString = makeDataAttributeString; +exports.getDefault = getDefault; +exports.escapeRegExp = escapeRegExp; +exports.getCSSString = getCSSString; +exports.getCSSRuleBlock = getCSSRuleBlock; +exports.buildCSSRule = buildCSSRule; +exports.removeCSSRule = removeCSSRule; +exports.copyTextToClipboard = copyTextToClipboard; +exports.isNumeric = isNumeric; +function camelCaseToDash(str) { + return str.replace(/([A-Z])/g, function (g) { + return '-' + g[0].toLowerCase(); + }); +} -var _datatable = __webpack_require__(3); +function makeDataAttributeString(props) { + var keys = Object.keys(props); -var _datatable2 = _interopRequireDefault(_datatable); + return keys.map(function (key) { + var _key = camelCaseToDash(key); + var val = props[key]; -var _package = __webpack_require__(15); + if (val === undefined) return ''; + return 'data-' + _key + '="' + val + '" '; + }).join('').trim(); +} -var _package2 = _interopRequireDefault(_package); +function getDefault(a, b) { + return a !== undefined ? a : b; +} -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +function escapeRegExp(str) { + // https://stackoverflow.com/a/6969486 + return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&'); +} -_datatable2.default.__version__ = _package2.default.version; +function getCSSString(styleMap) { + var style = ''; -exports.default = _datatable2.default; -module.exports = exports['default']; + for (var prop in styleMap) { + if (styleMap.hasOwnProperty(prop)) { + style += prop + ': ' + styleMap[prop] + '; '; + } + } + + return style.trim(); +} + +function getCSSRuleBlock(rule, styleMap) { + return rule + ' { ' + getCSSString(styleMap) + ' }'; +} + +function buildCSSRule(rule, styleMap) { + var cssRulesString = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ''; + + // build css rules efficiently, + // append new rule if doesnt exist, + // update existing ones + + var rulePatternStr = escapeRegExp(rule) + ' {([^}]*)}'; + var rulePattern = new RegExp(rulePatternStr, 'g'); + + if (cssRulesString && cssRulesString.match(rulePattern)) { + var _loop = function _loop(property) { + var value = styleMap[property]; + var propPattern = new RegExp(escapeRegExp(property) + ':([^;]*);'); + + cssRulesString = cssRulesString.replace(rulePattern, function (match, propertyStr) { + if (propertyStr.match(propPattern)) { + // property exists, replace value with new value + propertyStr = propertyStr.replace(propPattern, function (match, valueStr) { + return property + ': ' + value + ';'; + }); + } + propertyStr = propertyStr.trim(); + + var replacer = rule + ' { ' + propertyStr + ' }'; + + return replacer; + }); + }; + + for (var property in styleMap) { + _loop(property); + } + + return cssRulesString; + } + // no match, append new rule block + return '' + cssRulesString + getCSSRuleBlock(rule, styleMap); +} + +function removeCSSRule(rule) { + var cssRulesString = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; + + var rulePatternStr = escapeRegExp(rule) + ' {([^}]*)}'; + var rulePattern = new RegExp(rulePatternStr, 'g'); + var output = cssRulesString; + + if (cssRulesString && cssRulesString.match(rulePattern)) { + output = cssRulesString.replace(rulePattern, ''); + } + + return output.trim(); +} + +function copyTextToClipboard(text) { + // https://stackoverflow.com/a/30810322/5353542 + var textArea = document.createElement('textarea'); + + // + // *** This styling is an extra step which is likely not required. *** + // + // Why is it here? To ensure: + // 1. the element is able to have focus and selection. + // 2. if element was to flash render it has minimal visual impact. + // 3. less flakyness with selection and copying which **might** occur if + // the textarea element is not visible. + // + // The likelihood is the element won't even render, not even a flash, + // so some of these are just precautions. However in IE the element + // is visible whilst the popup box asking the user for permission for + // the web page to copy to the clipboard. + // + + // Place in top-left corner of screen regardless of scroll position. + textArea.style.position = 'fixed'; + textArea.style.top = 0; + textArea.style.left = 0; + + // Ensure it has a small width and height. Setting to 1px / 1em + // doesn't work as this gives a negative w/h on some browsers. + textArea.style.width = '2em'; + textArea.style.height = '2em'; + + // We don't need padding, reducing the size if it does flash render. + textArea.style.padding = 0; + + // Clean up any borders. + textArea.style.border = 'none'; + textArea.style.outline = 'none'; + textArea.style.boxShadow = 'none'; + + // Avoid flash of white box if rendered for any reason. + textArea.style.background = 'transparent'; + + textArea.value = text; + + document.body.appendChild(textArea); + + textArea.select(); + + try { + document.execCommand('copy'); + } catch (err) { + console.log('Oops, unable to copy'); + } + + document.body.removeChild(textArea); +} + +function isNumeric(val) { + return !isNaN(val); +} /***/ }), +/* 2 */, /* 3 */ /***/ (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); - -var _dom = __webpack_require__(1); - -var _dom2 = _interopRequireDefault(_dom); - -var _datamanager = __webpack_require__(4); - -var _datamanager2 = _interopRequireDefault(_datamanager); - -var _cellmanager = __webpack_require__(5); - -var _cellmanager2 = _interopRequireDefault(_cellmanager); - -var _columnmanager = __webpack_require__(7); - -var _columnmanager2 = _interopRequireDefault(_columnmanager); - -var _rowmanager = __webpack_require__(8); - -var _rowmanager2 = _interopRequireDefault(_rowmanager); - -var _style = __webpack_require__(9); - -var _style2 = _interopRequireDefault(_style); - -__webpack_require__(10); - -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: [] - }, - editing: null, - addSerialNoColumn: true, - addCheckboxColumn: true, - enableClusterize: true, - enableLogs: false, - takeAvailableSpace: false -}; - -var DataTable = function () { - function DataTable(wrapper, options) { - _classCallCheck(this, DataTable); - - this.wrapper = wrapper; - if (!this.wrapper) { - throw new Error('Invalid argument given for `wrapper`'); - } - - this.options = Object.assign({}, DEFAULT_OPTIONS, options); - // custom user events - this.events = this.options.events; - - 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) { - 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
\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); - } - }, { - key: 'refresh', - value: function refresh(data) { - this.datamanager.init(data); - this.render(); - } - }, { - 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 ' + (0, _utils.getBodyHTML)(rows) + '\n
\n '; - } - }, { - key: 'renderBodyWithClusterize', - value: function renderBodyWithClusterize() { - var _this = this; - - // empty body - this.bodyScrollable.innerHTML = '\n \n ' + (0, _utils.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 Clusterize({ - rows: initialData, - scrollElem: this.bodyScrollable, - contentElem: (0, _dom2.default)('tbody', this.bodyScrollable), - callbacks: { - clusterChanged: function clusterChanged() { - _this.rowmanager.highlightCheckedRows(); - } - } - }); - 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, _utils.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: 'log', - value: function log() { - if (this.options.enableLogs) { - console.log.apply(console, arguments); - } - } - }]); - - return DataTable; -}(); - -exports.default = DataTable; -module.exports = exports['default']; - -/***/ }), -/* 4 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - - Object.defineProperty(exports, "__esModule", { value: true }); @@ -863,332 +449,17 @@ 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); +exports.getCellHTML = getCellHTML; +exports.getCellContent = getCellContent; +exports.getEditCellHTML = getEditCellHTML; -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +var _utils = __webpack_require__(1); -var DataManager = function () { - function DataManager(options) { - _classCallCheck(this, DataManager); - - this.options = options; - this.rowCount = 0; - this.currentSort = { - sortBy: -1, // colIndex - sortOrder: 'none' // asc, desc, none - }; - } - - _createClass(DataManager, [{ - key: 'init', - value: function init(data) { - var columns = data.columns, - rows = data.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' - }; - - columns = [val].concat(columns); - this._serialNoColumnAdded = true; - } - - if (this.options.addCheckboxColumn && !this._checkboxColumnAdded) { - var _val = { - content: '', - editable: false, - resizable: false, - sortable: false - }; - - columns = [_val].concat(columns); - this._checkboxColumnAdded = true; - } - - // wrap the title in span - columns = columns.map(function (column) { - if (typeof column === 'string') { - column = '' + column + ''; - } else if ((typeof column === 'undefined' ? 'undefined' : _typeof(column)) === 'object') { - column.content = '' + column.content + ''; - } - - return column; - }); - - return _prepareColumns(columns, { - 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) { - 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: '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']; - -/***/ }), -/* 5 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -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 _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); - -var _keyboard = __webpack_require__(6); +var _keyboard = __webpack_require__(8); var _keyboard2 = _interopRequireDefault(_keyboard); -var _dom = __webpack_require__(1); +var _dom = __webpack_require__(0); var _dom2 = _interopRequireDefault(_dom); @@ -1709,7 +980,7 @@ var CellManager = function () { var selector = '.data-table-col[data-row-index="' + cell.rowIndex + '"][data-col-index="' + cell.colIndex + '"]'; var $cell = (0, _dom2.default)(selector, this.bodyScrollable); - $cell.innerHTML = (0, _utils.getCellContent)(cell); + $cell.innerHTML = getCellContent(cell); } }, { key: 'isStandardCell', @@ -1843,6 +1114,244 @@ var CellManager = function () { }(); exports.default = CellManager; +function getCellHTML(column) { + var rowIndex = column.rowIndex, + colIndex = column.colIndex, + isHeader = column.isHeader; + + var dataAttr = (0, _utils.makeDataAttributeString)({ + rowIndex: rowIndex, + colIndex: colIndex, + isHeader: isHeader + }); + + return '\n \n ' + getCellContent(column) + '\n \n '; +} + +function getCellContent(column) { + var isHeader = column.isHeader; + + var editCellHTML = isHeader ? '' : getEditCellHTML(); + var sortIndicator = isHeader ? '' : ''; + + return '\n
\n ' + (column.format ? column.format(column.content) : column.content) + '\n ' + sortIndicator + '\n
\n ' + editCellHTML + '\n '; +} + +function getEditCellHTML() { + return '\n
\n '; +} + +/***/ }), +/* 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__(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(); + } + + _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 = (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: '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__(16); + +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']; /***/ }), @@ -1856,7 +1365,608 @@ Object.defineProperty(exports, "__esModule", { value: true }); -var _dom = __webpack_require__(1); +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 _datamanager = __webpack_require__(7); + +var _datamanager2 = _interopRequireDefault(_datamanager); + +var _cellmanager = __webpack_require__(3); + +var _cellmanager2 = _interopRequireDefault(_cellmanager); + +var _columnmanager = __webpack_require__(9); + +var _columnmanager2 = _interopRequireDefault(_columnmanager); + +var _rowmanager = __webpack_require__(4); + +var _rowmanager2 = _interopRequireDefault(_rowmanager); + +var _style = __webpack_require__(10); + +var _style2 = _interopRequireDefault(_style); + +__webpack_require__(11); + +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: [] + }, + editing: null, + addSerialNoColumn: true, + addCheckboxColumn: true, + enableClusterize: true, + enableLogs: false, + takeAvailableSpace: false +}; + +var DataTable = function () { + function DataTable(wrapper, options) { + _classCallCheck(this, DataTable); + + this.wrapper = wrapper; + if (!this.wrapper) { + throw new Error('Invalid argument given for `wrapper`'); + } + + this.options = Object.assign({}, DEFAULT_OPTIONS, options); + // custom user events + this.events = this.options.events; + + 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) { + 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
\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); + } + }, { + key: 'refresh', + value: function refresh(data) { + this.datamanager.init(data); + this.render(); + } + }, { + 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 Clusterize({ + rows: initialData, + scrollElem: this.bodyScrollable, + contentElem: (0, _dom2.default)('tbody', this.bodyScrollable), + callbacks: { + clusterChanged: function clusterChanged() { + _this.rowmanager.highlightCheckedRows(); + } + } + }); + 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: 'log', + value: function log() { + if (this.options.enableLogs) { + console.log.apply(console, arguments); + } + } + }]); + + return DataTable; +}(); + +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, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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 _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.rowCount = 0; + this.currentSort = { + sortBy: -1, // colIndex + sortOrder: 'none' // asc, desc, none + }; + } + + _createClass(DataManager, [{ + key: 'init', + value: function init(data) { + var columns = data.columns, + rows = data.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' + }; + + columns = [val].concat(columns); + this._serialNoColumnAdded = true; + } + + if (this.options.addCheckboxColumn && !this._checkboxColumnAdded) { + var _val = { + content: '', + editable: false, + resizable: false, + sortable: false + }; + + columns = [_val].concat(columns); + this._checkboxColumnAdded = true; + } + + // wrap the title in span + columns = columns.map(function (column) { + if (typeof column === 'string') { + column = '' + column + ''; + } else if ((typeof column === 'undefined' ? 'undefined' : _typeof(column)) === 'object') { + column.content = '' + column.content + ''; + } + + return column; + }); + + return _prepareColumns(columns, { + 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) { + 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: '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); @@ -1924,7 +2034,7 @@ exports.default = { module.exports = exports['default']; /***/ }), -/* 7 */ +/* 9 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; @@ -1936,11 +2046,13 @@ Object.defineProperty(exports, "__esModule", { 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 _dom = __webpack_require__(1); +var _dom = __webpack_require__(0); var _dom2 = _interopRequireDefault(_dom); -var _utils = __webpack_require__(0); +var _rowmanager = __webpack_require__(4); + +var _utils = __webpack_require__(1); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } @@ -1966,7 +2078,7 @@ var ColumnManager = function () { value: function renderHeader() { var columns = this.datamanager.getColumns(); - this.header.innerHTML = (0, _utils.getHeaderHTML)(columns); + this.header.innerHTML = '\n \n ' + (0, _rowmanager.getRowHTML)(columns, { isHeader: 1 }) + '\n \n '; } }, { key: 'bindEvents', @@ -2277,7 +2389,7 @@ exports.default = ColumnManager; module.exports = exports['default']; /***/ }), -/* 8 */ +/* 10 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; @@ -2289,180 +2401,7 @@ Object.defineProperty(exports, "__esModule", { 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 _dom = __webpack_require__(1); - -var _dom2 = _interopRequireDefault(_dom); - -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.datamanager = this.instance.datamanager; - - this.bindEvents(); - } - - _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 = (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: '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; - } - }]); - - return RowManager; -}(); - -exports.default = RowManager; -module.exports = exports['default']; - -/***/ }), -/* 9 */ -/***/ (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); +var _utils = __webpack_require__(1); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -2498,13 +2437,13 @@ exports.default = Style; module.exports = exports['default']; /***/ }), -/* 10 */ +/* 11 */ /***/ (function(module, exports, __webpack_require__) { // style-loader: Adds some css to the DOM by adding a