Refactor style, use native styleSheet method to set style
This commit is contained in:
Faris Ansari
parent
6e71a71de0
commit
1d7278d3d6
@ -62,7 +62,7 @@
|
||||
"max-params": 0,
|
||||
"max-statements": 0,
|
||||
"new-cap": [2, { "newIsCap": true, "capIsNew": false }],
|
||||
"newline-after-var": [2, "always"],
|
||||
"newline-after-var": [0, "always"],
|
||||
"new-parens": 2,
|
||||
"no-alert": 0,
|
||||
"no-array-constructor": 2,
|
||||
|
||||
@ -350,7 +350,8 @@ exports.default = {
|
||||
getDefault: getDefault,
|
||||
escapeRegExp: escapeRegExp,
|
||||
getCellContent: getCellContent,
|
||||
copyTextToClipboard: copyTextToClipboard
|
||||
copyTextToClipboard: copyTextToClipboard,
|
||||
camelCaseToDash: camelCaseToDash
|
||||
};
|
||||
module.exports = exports['default'];
|
||||
|
||||
@ -404,6 +405,10 @@ var _cellmanager = __webpack_require__(4);
|
||||
|
||||
var _cellmanager2 = _interopRequireDefault(_cellmanager);
|
||||
|
||||
var _style = __webpack_require__(12);
|
||||
|
||||
var _style2 = _interopRequireDefault(_style);
|
||||
|
||||
__webpack_require__(6);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
@ -653,15 +658,15 @@ var DataTable = function () {
|
||||
|
||||
this.setBodyWidth();
|
||||
|
||||
this.setStyle('.data-table .body-scrollable', {
|
||||
'margin-top': this.header.height() + 'px'
|
||||
this.style.set(this.bodyScrollable[0], {
|
||||
marginTop: this.header.height() + 'px'
|
||||
});
|
||||
|
||||
// center align Sr. No column
|
||||
if (this.options.addSerialNoColumn) {
|
||||
var index = this.getSerialColumnIndex();
|
||||
|
||||
this.setStyle('.data-table [data-col-index="' + index + '"]', {
|
||||
this.style.setStyle('.data-table [data-col-index="' + index + '"]', {
|
||||
'text-align': 'center'
|
||||
});
|
||||
}
|
||||
@ -863,32 +868,32 @@ var DataTable = function () {
|
||||
key: 'setColumnWidth',
|
||||
value: function setColumnWidth(colIndex, width) {
|
||||
// set width for content
|
||||
this.setStyle('[data-col-index="' + colIndex + '"] .content', {
|
||||
this.style.setStyle('[data-col-index="' + colIndex + '"] .content', {
|
||||
width: width + 'px'
|
||||
});
|
||||
// set width for edit cell
|
||||
this.setStyle('[data-col-index="' + colIndex + '"] .edit-cell', {
|
||||
this.style.setStyle('[data-col-index="' + colIndex + '"] .edit-cell', {
|
||||
width: width + 'px'
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'setColumnHeaderWidth',
|
||||
value: function setColumnHeaderWidth(colIndex, width) {
|
||||
this.setStyle('[data-col-index="' + colIndex + '"][data-is-header] .content', {
|
||||
this.style.setStyle('[data-col-index="' + colIndex + '"][data-is-header] .content', {
|
||||
width: width + 'px'
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'setDefaultCellHeight',
|
||||
value: function setDefaultCellHeight(height) {
|
||||
this.setStyle('.data-table-col .content', {
|
||||
this.style.setStyle('.data-table-col .content', {
|
||||
height: height + 'px'
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'setRowHeight',
|
||||
value: function setRowHeight(rowIndex, height) {
|
||||
this.setStyle('[data-row-index="' + rowIndex + '"] .content', {
|
||||
this.style.setStyle('[data-row-index="' + rowIndex + '"] .content', {
|
||||
height: height + 'px'
|
||||
});
|
||||
}
|
||||
@ -926,26 +931,10 @@ var DataTable = function () {
|
||||
value: function setBodyWidth() {
|
||||
this.bodyScrollable.css('width', parseInt(this.header.css('width'), 10));
|
||||
}
|
||||
}, {
|
||||
key: 'setStyle',
|
||||
value: function setStyle(rule, styleMap) {
|
||||
var styles = this.$style.text();
|
||||
|
||||
styles = (0, _utils.buildCSSRule)(rule, styleMap, styles);
|
||||
this.$style.html(styles);
|
||||
}
|
||||
}, {
|
||||
key: 'removeStyle',
|
||||
value: function removeStyle(rule) {
|
||||
var styles = this.$style.text();
|
||||
|
||||
styles = (0, _utils.removeCSSRule)(rule, styles);
|
||||
this.$style.html(styles);
|
||||
}
|
||||
}, {
|
||||
key: 'makeStyle',
|
||||
value: function makeStyle() {
|
||||
this.$style = $('<style data-id="datatable"></style>').prependTo(this.wrapper);
|
||||
this.style = new _style2.default(this.wrapper);
|
||||
}
|
||||
}, {
|
||||
key: 'getColumn',
|
||||
@ -1338,6 +1327,10 @@ var _keyboard = __webpack_require__(5);
|
||||
|
||||
var _keyboard2 = _interopRequireDefault(_keyboard);
|
||||
|
||||
var _performance = __webpack_require__(13);
|
||||
|
||||
var _performance2 = _interopRequireDefault(_performance);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
||||
@ -1350,6 +1343,7 @@ var CellManager = function () {
|
||||
|
||||
this.instance = instance;
|
||||
this.options = this.instance.options;
|
||||
this.style = this.instance.style;
|
||||
this.bodyScrollable = this.instance.bodyScrollable;
|
||||
|
||||
this.prepare();
|
||||
@ -1367,7 +1361,6 @@ var CellManager = function () {
|
||||
value: function bindEvents() {
|
||||
this.bindFocusCell();
|
||||
this.bindEditCell();
|
||||
this.bindKeyboardNav();
|
||||
this.bindKeyboardSelection();
|
||||
this.bindCopyCellContents();
|
||||
this.bindMouseEvents();
|
||||
@ -1375,19 +1368,12 @@ var CellManager = function () {
|
||||
}, {
|
||||
key: 'bindFocusCell',
|
||||
value: function bindFocusCell() {
|
||||
var _this = this;
|
||||
|
||||
var bodyScrollable = this.instance.bodyScrollable;
|
||||
|
||||
this.$focusedCell = null;
|
||||
bodyScrollable.on('click', '.data-table-col', function (e) {
|
||||
_this.focusCell($(e.currentTarget));
|
||||
});
|
||||
this.bindKeyboardNav();
|
||||
}
|
||||
}, {
|
||||
key: 'bindEditCell',
|
||||
value: function bindEditCell() {
|
||||
var _this2 = this;
|
||||
var _this = this;
|
||||
|
||||
var self = this;
|
||||
|
||||
@ -1397,80 +1383,80 @@ var CellManager = function () {
|
||||
});
|
||||
|
||||
_keyboard2.default.on('enter', function (e) {
|
||||
if (_this2.$focusedCell && !_this2.$editingCell) {
|
||||
if (_this.$focusedCell && !_this.$editingCell) {
|
||||
// enter keypress on focused cell
|
||||
_this2.activateEditing(_this2.$focusedCell);
|
||||
} else if (_this2.$editingCell) {
|
||||
_this.activateEditing(_this.$focusedCell);
|
||||
} else if (_this.$editingCell) {
|
||||
// enter keypress on editing cell
|
||||
_this2.submitEditing(_this2.$editingCell);
|
||||
_this2.deactivateEditing();
|
||||
_this.submitEditing(_this.$editingCell);
|
||||
_this.deactivateEditing();
|
||||
}
|
||||
});
|
||||
|
||||
$(document.body).on('click', function (e) {
|
||||
if ($(e.target).is('.edit-cell, .edit-cell *')) return;
|
||||
_this2.deactivateEditing();
|
||||
_this.deactivateEditing();
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'bindKeyboardNav',
|
||||
value: function bindKeyboardNav() {
|
||||
var _this3 = this;
|
||||
var _this2 = this;
|
||||
|
||||
var focusCell = function focusCell(direction) {
|
||||
if (!_this3.$focusedCell || _this3.$editingCell) {
|
||||
if (!_this2.$focusedCell || _this2.$editingCell) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var $cell = _this3.$focusedCell;
|
||||
var $cell = _this2.$focusedCell;
|
||||
|
||||
if (direction === 'left') {
|
||||
$cell = _this3.getLeftCell$($cell);
|
||||
$cell = _this2.getLeftCell$($cell);
|
||||
} else if (direction === 'right') {
|
||||
$cell = _this3.getRightCell$($cell);
|
||||
$cell = _this2.getRightCell$($cell);
|
||||
} else if (direction === 'up') {
|
||||
$cell = _this3.getAboveCell$($cell);
|
||||
$cell = _this2.getAboveCell$($cell);
|
||||
} else if (direction === 'down') {
|
||||
$cell = _this3.getBelowCell$($cell);
|
||||
$cell = _this2.getBelowCell$($cell);
|
||||
}
|
||||
|
||||
_this3.focusCell($cell);
|
||||
_this2.focusCell($cell);
|
||||
return true;
|
||||
};
|
||||
|
||||
var focusLastCell = function focusLastCell(direction) {
|
||||
if (!_this3.$focusedCell || _this3.$editingCell) {
|
||||
if (!_this2.$focusedCell || _this2.$editingCell) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var $cell = _this3.$focusedCell;
|
||||
var $cell = _this2.$focusedCell;
|
||||
|
||||
var _getCellAttr = _this3.getCellAttr($cell),
|
||||
var _getCellAttr = _this2.getCellAttr($cell),
|
||||
rowIndex = _getCellAttr.rowIndex,
|
||||
colIndex = _getCellAttr.colIndex;
|
||||
|
||||
if (direction === 'left') {
|
||||
$cell = _this3.getLeftMostCell$(rowIndex);
|
||||
$cell = _this2.getLeftMostCell$(rowIndex);
|
||||
} else if (direction === 'right') {
|
||||
$cell = _this3.getRightMostCell$(rowIndex);
|
||||
$cell = _this2.getRightMostCell$(rowIndex);
|
||||
} else if (direction === 'up') {
|
||||
$cell = _this3.getTopMostCell$(colIndex);
|
||||
$cell = _this2.getTopMostCell$(colIndex);
|
||||
} else if (direction === 'down') {
|
||||
$cell = _this3.getBottomMostCell$(colIndex);
|
||||
$cell = _this2.getBottomMostCell$(colIndex);
|
||||
}
|
||||
|
||||
_this3.focusCell($cell);
|
||||
_this2.focusCell($cell);
|
||||
return true;
|
||||
};
|
||||
|
||||
var scrollToCell = function scrollToCell(direction) {
|
||||
if (!_this3.$focusedCell) return false;
|
||||
if (!_this2.$focusedCell) return false;
|
||||
|
||||
if (!_this3.inViewport(_this3.$focusedCell)) {
|
||||
var _getCellAttr2 = _this3.getCellAttr(_this3.$focusedCell),
|
||||
if (!_this2.inViewport(_this2.$focusedCell)) {
|
||||
var _getCellAttr2 = _this2.getCellAttr(_this2.$focusedCell),
|
||||
rowIndex = _getCellAttr2.rowIndex;
|
||||
|
||||
_this3.scrollToRow(rowIndex - _this3.getRowCountPerPage() + 2);
|
||||
_this2.scrollToRow(rowIndex - _this2.getRowCountPerPage() + 2);
|
||||
return true;
|
||||
}
|
||||
|
||||
@ -1496,25 +1482,25 @@ var CellManager = function () {
|
||||
});
|
||||
|
||||
_keyboard2.default.on('esc', function () {
|
||||
_this3.deactivateEditing();
|
||||
_this2.deactivateEditing();
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'bindKeyboardSelection',
|
||||
value: function bindKeyboardSelection() {
|
||||
var _this4 = this;
|
||||
var _this3 = this;
|
||||
|
||||
var getNextSelectionCursor = function getNextSelectionCursor(direction) {
|
||||
var $selectionCursor = _this4.getSelectionCursor();
|
||||
var $selectionCursor = _this3.getSelectionCursor();
|
||||
|
||||
if (direction === 'left') {
|
||||
$selectionCursor = _this4.getLeftCell$($selectionCursor);
|
||||
$selectionCursor = _this3.getLeftCell$($selectionCursor);
|
||||
} else if (direction === 'right') {
|
||||
$selectionCursor = _this4.getRightCell$($selectionCursor);
|
||||
$selectionCursor = _this3.getRightCell$($selectionCursor);
|
||||
} else if (direction === 'up') {
|
||||
$selectionCursor = _this4.getAboveCell$($selectionCursor);
|
||||
$selectionCursor = _this3.getAboveCell$($selectionCursor);
|
||||
} else if (direction === 'down') {
|
||||
$selectionCursor = _this4.getBelowCell$($selectionCursor);
|
||||
$selectionCursor = _this3.getBelowCell$($selectionCursor);
|
||||
}
|
||||
|
||||
return $selectionCursor;
|
||||
@ -1522,29 +1508,29 @@ var CellManager = function () {
|
||||
|
||||
['left', 'right', 'up', 'down'].map(function (direction) {
|
||||
return _keyboard2.default.on('shift+' + direction, function () {
|
||||
return _this4.selectArea(getNextSelectionCursor(direction));
|
||||
return _this3.selectArea(getNextSelectionCursor(direction));
|
||||
});
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'bindCopyCellContents',
|
||||
value: function bindCopyCellContents() {
|
||||
var _this5 = this;
|
||||
var _this4 = this;
|
||||
|
||||
_keyboard2.default.on('ctrl+c', function () {
|
||||
_this5.copyCellContents(_this5.$focusedCell, _this5.$selectionCursor);
|
||||
_this4.copyCellContents(_this4.$focusedCell, _this4.$selectionCursor);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'bindMouseEvents',
|
||||
value: function bindMouseEvents() {
|
||||
var _this6 = this;
|
||||
var _this5 = this;
|
||||
|
||||
var mouseDown = null;
|
||||
|
||||
this.bodyScrollable.on('mousedown', '.data-table-col', function (e) {
|
||||
mouseDown = true;
|
||||
_this6.focusCell($(e.currentTarget));
|
||||
_this5.focusCell($(e.currentTarget));
|
||||
});
|
||||
|
||||
this.bodyScrollable.on('mouseup', function () {
|
||||
@ -1553,7 +1539,7 @@ var CellManager = function () {
|
||||
|
||||
this.bodyScrollable.on('mousemove', '.data-table-col', function (e) {
|
||||
if (!mouseDown) return;
|
||||
_this6.selectArea($(e.currentTarget));
|
||||
_this5.selectArea($(e.currentTarget));
|
||||
});
|
||||
}
|
||||
}, {
|
||||
@ -1595,23 +1581,18 @@ var CellManager = function () {
|
||||
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 + '"]';
|
||||
|
||||
if (this.lastSelectors) {
|
||||
this.instance.removeStyle(this.lastSelectors.colHeaderSelector);
|
||||
this.instance.removeStyle(this.lastSelectors.rowHeaderSelector);
|
||||
if (this.lastHeaders) {
|
||||
this.style.unset(this.lastHeaders, 'backgroundColor');
|
||||
}
|
||||
|
||||
this.instance.setStyle(colHeaderSelector, {
|
||||
'background-color': 'var(--light-bg)'
|
||||
var colHeader = document.querySelector(colHeaderSelector);
|
||||
var rowHeader = document.querySelector(rowHeaderSelector);
|
||||
|
||||
this.style.set([colHeader, rowHeader], {
|
||||
backgroundColor: 'var(--light-bg)'
|
||||
});
|
||||
|
||||
this.instance.setStyle(rowHeaderSelector, {
|
||||
'background-color': 'var(--light-bg)'
|
||||
});
|
||||
|
||||
this.lastSelectors = {
|
||||
colHeaderSelector: colHeaderSelector,
|
||||
rowHeaderSelector: rowHeaderSelector
|
||||
};
|
||||
this.lastHeaders = [colHeader, rowHeader];
|
||||
}
|
||||
}, {
|
||||
key: 'selectArea',
|
||||
@ -1626,7 +1607,7 @@ var CellManager = function () {
|
||||
}, {
|
||||
key: '_selectArea',
|
||||
value: function _selectArea($cell1, $cell2) {
|
||||
var _this7 = this;
|
||||
var _this6 = this;
|
||||
|
||||
var cells = this.getCellsInRange.apply(this, arguments);
|
||||
|
||||
@ -1637,7 +1618,7 @@ var CellManager = function () {
|
||||
c = _ref2[0],
|
||||
r = _ref2[1];
|
||||
|
||||
return _this7.getCell$(r, c)[0];
|
||||
return _this6.getCell$(r, c)[0];
|
||||
});
|
||||
|
||||
$($cells).addClass('highlight');
|
||||
@ -1792,7 +1773,7 @@ var CellManager = function () {
|
||||
}, {
|
||||
key: 'submitEditing',
|
||||
value: function submitEditing($cell) {
|
||||
var _this8 = this;
|
||||
var _this7 = this;
|
||||
|
||||
var _getCellAttr7 = this.getCellAttr($cell),
|
||||
rowIndex = _getCellAttr7.rowIndex,
|
||||
@ -1808,7 +1789,7 @@ var CellManager = function () {
|
||||
if (done && done.then) {
|
||||
// wait for promise then update internal state
|
||||
done.then(function () {
|
||||
return _this8.updateCell(rowIndex, colIndex, value);
|
||||
return _this7.updateCell(rowIndex, colIndex, value);
|
||||
});
|
||||
} else {
|
||||
this.updateCell(rowIndex, colIndex, value);
|
||||
@ -1821,7 +1802,7 @@ var CellManager = function () {
|
||||
}, {
|
||||
key: 'copyCellContents',
|
||||
value: function copyCellContents($cell1, $cell2) {
|
||||
var _this9 = this;
|
||||
var _this8 = this;
|
||||
|
||||
var cells = this.getCellsInRange.apply(this, arguments);
|
||||
|
||||
@ -1830,7 +1811,7 @@ var CellManager = function () {
|
||||
var values = cells
|
||||
// get cell objects
|
||||
.map(function (index) {
|
||||
return _this9.getCell.apply(_this9, _toConsumableArray(index));
|
||||
return _this8.getCell.apply(_this8, _toConsumableArray(index));
|
||||
})
|
||||
// convert to array of rows
|
||||
.reduce(function (acc, curr) {
|
||||
@ -2660,6 +2641,146 @@ module.exports = function (css) {
|
||||
|
||||
module.exports = {"name":"frappe-datatable","version":"0.0.1","description":"A modern datatable library for the web","main":"lib/frappe-datatable.js","scripts":{"build":"webpack --env build","dev":"webpack --progress --colors --watch --env dev","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"},"devDependencies":{"babel-cli":"6.24.1","babel-core":"6.24.1","babel-eslint":"7.2.3","babel-loader":"7.0.0","babel-plugin-add-module-exports":"0.2.1","babel-preset-es2015":"6.24.1","chai":"3.5.0","css-loader":"^0.28.7","eslint":"3.19.0","eslint-loader":"1.7.1","mocha":"3.3.0","node-sass":"^4.5.3","sass-loader":"^6.0.6","style-loader":"^0.18.2","webpack":"^3.1.0","yargs":"7.1.0"},"repository":{"type":"git","url":"https://github.com/frappe/datatable.git"},"keywords":["webpack","es6","starter","library","universal","umd","commonjs"],"author":"Faris Ansari","license":"MIT","bugs":{"url":"https://github.com/frappe/datatable/issues"},"homepage":"https://frappe.github.io/datatable","dependencies":{"bootstrap":"^4.0.0-beta","popper.js":"^1.12.5"}}
|
||||
|
||||
/***/ }),
|
||||
/* 12 */
|
||||
/***/ (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);
|
||||
}
|
||||
}, {
|
||||
key: 'set',
|
||||
value: function set(elements, styleMap) {
|
||||
if (!Array.isArray(elements)) {
|
||||
elements = [elements];
|
||||
}
|
||||
|
||||
elements.map(function (element) {
|
||||
for (var prop in styleMap) {
|
||||
element.style[prop] = styleMap[prop];
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'unset',
|
||||
value: function unset(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;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
return Style;
|
||||
}();
|
||||
|
||||
exports.default = Style;
|
||||
module.exports = exports['default'];
|
||||
|
||||
/***/ }),
|
||||
/* 13 */
|
||||
/***/ (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; }; }();
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
var Performance = function () {
|
||||
function Performance() {
|
||||
_classCallCheck(this, Performance);
|
||||
}
|
||||
|
||||
_createClass(Performance, [{
|
||||
key: "start",
|
||||
value: function start() {
|
||||
this._start = window.performance.now();
|
||||
}
|
||||
}, {
|
||||
key: "end",
|
||||
value: function end() {
|
||||
this._end = window.performance.now();
|
||||
console.log(this._end - this._start);
|
||||
}
|
||||
}]);
|
||||
|
||||
return Performance;
|
||||
}();
|
||||
|
||||
var perf = new Performance();
|
||||
|
||||
exports.default = perf;
|
||||
module.exports = exports["default"];
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
});
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,10 +1,12 @@
|
||||
import { getCellContent, copyTextToClipboard } from './utils';
|
||||
import keyboard from 'keyboard';
|
||||
import perf from './performance';
|
||||
|
||||
export default class CellManager {
|
||||
constructor(instance) {
|
||||
this.instance = instance;
|
||||
this.options = this.instance.options;
|
||||
this.style = this.instance.style;
|
||||
this.bodyScrollable = this.instance.bodyScrollable;
|
||||
|
||||
this.prepare();
|
||||
@ -19,19 +21,13 @@ export default class CellManager {
|
||||
bindEvents() {
|
||||
this.bindFocusCell();
|
||||
this.bindEditCell();
|
||||
this.bindKeyboardNav();
|
||||
this.bindKeyboardSelection();
|
||||
this.bindCopyCellContents();
|
||||
this.bindMouseEvents();
|
||||
}
|
||||
|
||||
bindFocusCell() {
|
||||
const bodyScrollable = this.instance.bodyScrollable;
|
||||
|
||||
this.$focusedCell = null;
|
||||
bodyScrollable.on('click', '.data-table-col', (e) => {
|
||||
this.focusCell($(e.currentTarget));
|
||||
});
|
||||
this.bindKeyboardNav();
|
||||
}
|
||||
|
||||
bindEditCell() {
|
||||
@ -212,23 +208,18 @@ export default class CellManager {
|
||||
const colHeaderSelector = `.data-table-header .data-table-col[data-col-index="${colIndex}"]`;
|
||||
const rowHeaderSelector = `.data-table-col[data-row-index="${rowIndex}"][data-col-index="${_colIndex}"]`;
|
||||
|
||||
if (this.lastSelectors) {
|
||||
this.instance.removeStyle(this.lastSelectors.colHeaderSelector);
|
||||
this.instance.removeStyle(this.lastSelectors.rowHeaderSelector);
|
||||
if (this.lastHeaders) {
|
||||
this.style.unset(this.lastHeaders, 'backgroundColor');
|
||||
}
|
||||
|
||||
this.instance.setStyle(colHeaderSelector, {
|
||||
'background-color': 'var(--light-bg)'
|
||||
const colHeader = document.querySelector(colHeaderSelector);
|
||||
const rowHeader = document.querySelector(rowHeaderSelector);
|
||||
|
||||
this.style.set([colHeader, rowHeader], {
|
||||
backgroundColor: 'var(--light-bg)'
|
||||
});
|
||||
|
||||
this.instance.setStyle(rowHeaderSelector, {
|
||||
'background-color': 'var(--light-bg)'
|
||||
});
|
||||
|
||||
this.lastSelectors = {
|
||||
colHeaderSelector,
|
||||
rowHeaderSelector
|
||||
};
|
||||
this.lastHeaders = [colHeader, rowHeader];
|
||||
}
|
||||
|
||||
selectArea($selectionCursor) {
|
||||
|
||||
@ -3,13 +3,12 @@ import {
|
||||
getHeaderHTML,
|
||||
getBodyHTML,
|
||||
getRowHTML,
|
||||
buildCSSRule,
|
||||
removeCSSRule,
|
||||
getDefault
|
||||
} from './utils';
|
||||
|
||||
import DataManager from './datamanager';
|
||||
import CellManager from './cellmanager';
|
||||
import Style from './style';
|
||||
|
||||
import './style.scss';
|
||||
|
||||
@ -253,15 +252,15 @@ export default class DataTable {
|
||||
|
||||
this.setBodyWidth();
|
||||
|
||||
this.setStyle('.data-table .body-scrollable', {
|
||||
'margin-top': this.header.height() + 'px'
|
||||
this.style.set(this.bodyScrollable[0], {
|
||||
marginTop: this.header.height() + 'px'
|
||||
});
|
||||
|
||||
// center align Sr. No column
|
||||
if (this.options.addSerialNoColumn) {
|
||||
const index = this.getSerialColumnIndex();
|
||||
|
||||
this.setStyle(`.data-table [data-col-index="${index}"]`, {
|
||||
this.style.setStyle(`.data-table [data-col-index="${index}"]`, {
|
||||
'text-align': 'center'
|
||||
});
|
||||
}
|
||||
@ -446,29 +445,29 @@ export default class DataTable {
|
||||
|
||||
setColumnWidth(colIndex, width) {
|
||||
// set width for content
|
||||
this.setStyle(`[data-col-index="${colIndex}"] .content`, {
|
||||
this.style.setStyle(`[data-col-index="${colIndex}"] .content`, {
|
||||
width: width + 'px'
|
||||
});
|
||||
// set width for edit cell
|
||||
this.setStyle(`[data-col-index="${colIndex}"] .edit-cell`, {
|
||||
this.style.setStyle(`[data-col-index="${colIndex}"] .edit-cell`, {
|
||||
width: width + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
setColumnHeaderWidth(colIndex, width) {
|
||||
this.setStyle(`[data-col-index="${colIndex}"][data-is-header] .content`, {
|
||||
this.style.setStyle(`[data-col-index="${colIndex}"][data-is-header] .content`, {
|
||||
width: width + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
setDefaultCellHeight(height) {
|
||||
this.setStyle('.data-table-col .content', {
|
||||
this.style.setStyle('.data-table-col .content', {
|
||||
height: height + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
setRowHeight(rowIndex, height) {
|
||||
this.setStyle(`[data-row-index="${rowIndex}"] .content`, {
|
||||
this.style.setStyle(`[data-row-index="${rowIndex}"] .content`, {
|
||||
height: height + 'px'
|
||||
});
|
||||
}
|
||||
@ -506,23 +505,8 @@ export default class DataTable {
|
||||
);
|
||||
}
|
||||
|
||||
setStyle(rule, styleMap) {
|
||||
let styles = this.$style.text();
|
||||
|
||||
styles = buildCSSRule(rule, styleMap, styles);
|
||||
this.$style.html(styles);
|
||||
}
|
||||
|
||||
removeStyle(rule) {
|
||||
let styles = this.$style.text();
|
||||
|
||||
styles = removeCSSRule(rule, styles);
|
||||
this.$style.html(styles);
|
||||
}
|
||||
|
||||
makeStyle() {
|
||||
this.$style = $('<style data-id="datatable"></style>')
|
||||
.prependTo(this.wrapper);
|
||||
this.style = new Style(this.wrapper);
|
||||
}
|
||||
|
||||
getColumn(colIndex) {
|
||||
|
||||
14
src/performance.js
Normal file
14
src/performance.js
Normal file
@ -0,0 +1,14 @@
|
||||
class Performance {
|
||||
start() {
|
||||
this._start = window.performance.now();
|
||||
}
|
||||
|
||||
end() {
|
||||
this._end = window.performance.now();
|
||||
console.log(this._end - this._start);
|
||||
}
|
||||
}
|
||||
|
||||
let perf = new Performance();
|
||||
|
||||
export default perf;
|
||||
53
src/style.js
Normal file
53
src/style.js
Normal file
@ -0,0 +1,53 @@
|
||||
import { camelCaseToDash } from './utils';
|
||||
|
||||
export default class Style {
|
||||
|
||||
constructor(wrapper) {
|
||||
const styleEl = document.createElement('style');
|
||||
|
||||
document.head.appendChild(styleEl);
|
||||
this.styleSheet = styleEl.sheet;
|
||||
}
|
||||
|
||||
setStyle(rule, styleMap) {
|
||||
const styles = Object.keys(styleMap)
|
||||
.map(prop => {
|
||||
if (!prop.includes('-')) {
|
||||
prop = camelCaseToDash(prop);
|
||||
}
|
||||
return `${prop}:${styleMap[prop]};`;
|
||||
})
|
||||
.join('');
|
||||
let ruleString = `${rule} { ${styles} }`;
|
||||
|
||||
this.styleSheet.insertRule(ruleString, this.styleSheet.cssRules.length);
|
||||
}
|
||||
|
||||
set(elements, styleMap) {
|
||||
if (!Array.isArray(elements)) {
|
||||
elements = [elements];
|
||||
}
|
||||
|
||||
elements.map(element => {
|
||||
for (const prop in styleMap) {
|
||||
element.style[prop] = styleMap[prop];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
unset(elements, styleProps) {
|
||||
if (!Array.isArray(elements)) {
|
||||
elements = [elements];
|
||||
}
|
||||
|
||||
if (!Array.isArray(styleProps)) {
|
||||
styleProps = [styleProps];
|
||||
}
|
||||
|
||||
elements.map(element => {
|
||||
for (const prop of styleProps) {
|
||||
element.style[prop] = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -271,5 +271,6 @@ export default {
|
||||
getDefault,
|
||||
escapeRegExp,
|
||||
getCellContent,
|
||||
copyTextToClipboard
|
||||
copyTextToClipboard,
|
||||
camelCaseToDash
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user