Improvements
- setStyle adds style in-place - smooth column resize
This commit is contained in:
Faris Ansari
parent
2543a9b602
commit
0a08f90740
@ -2302,7 +2302,7 @@ var ColumnManager = function () {
|
||||
|
||||
// align columns
|
||||
this.getColumns().map(function (column) {
|
||||
if (column.align && ['left', 'center', 'right'].includes(column.align)) {
|
||||
if (['left', 'center', 'right'].includes(column.align)) {
|
||||
_this6.style.setStyle('.data-table [data-col-index="' + column.colIndex + '"]', {
|
||||
'text-align': column.align
|
||||
});
|
||||
@ -2327,18 +2327,30 @@ var ColumnManager = function () {
|
||||
}, {
|
||||
key: 'setColumnWidth',
|
||||
value: function setColumnWidth(colIndex, width) {
|
||||
var selector = '[data-col-index="' + colIndex + '"] .content, [data-col-index="' + colIndex + '"] .edit-cell';
|
||||
this._columnWidthMap = this._columnWidthMap || [];
|
||||
|
||||
this.style.setStyle(selector, {
|
||||
var index = this._columnWidthMap[colIndex];
|
||||
var selector = '[data-col-index="' + colIndex + '"] .content, [data-col-index="' + colIndex + '"] .edit-cell';
|
||||
var styles = {
|
||||
width: width + 'px'
|
||||
});
|
||||
};
|
||||
|
||||
index = this.style.setStyle(selector, styles, index);
|
||||
this._columnWidthMap[colIndex] = index;
|
||||
}
|
||||
}, {
|
||||
key: 'setColumnHeaderWidth',
|
||||
value: function setColumnHeaderWidth(colIndex, width) {
|
||||
this.style.setStyle('[data-col-index="' + colIndex + '"][data-is-header] .content', {
|
||||
width: width + 'px'
|
||||
});
|
||||
this.$columnMap = this.$columnMap || [];
|
||||
var selector = '[data-col-index="' + colIndex + '"][data-is-header] .content';
|
||||
|
||||
var $column = this.$columnMap[colIndex];
|
||||
if (!$column) {
|
||||
$column = this.header.querySelector(selector);
|
||||
this.$columnMap[colIndex] = $column;
|
||||
}
|
||||
|
||||
$column.style.width = width + 'px';
|
||||
}
|
||||
}, {
|
||||
key: 'getColumnMinWidth',
|
||||
@ -2418,6 +2430,8 @@ var Style = function () {
|
||||
_createClass(Style, [{
|
||||
key: 'setStyle',
|
||||
value: function setStyle(rule, styleMap) {
|
||||
var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
|
||||
|
||||
var styles = Object.keys(styleMap).map(function (prop) {
|
||||
if (!prop.includes('-')) {
|
||||
prop = (0, _utils.camelCaseToDash)(prop);
|
||||
@ -2426,7 +2440,14 @@ var Style = function () {
|
||||
}).join('');
|
||||
var ruleString = rule + ' { ' + styles + ' }';
|
||||
|
||||
this.styleSheet.insertRule(ruleString, this.styleSheet.cssRules.length);
|
||||
var _index = this.styleSheet.cssRules.length;
|
||||
if (index !== -1) {
|
||||
this.styleSheet.removeRule(index);
|
||||
_index = index;
|
||||
}
|
||||
|
||||
this.styleSheet.insertRule(ruleString, _index);
|
||||
return _index;
|
||||
}
|
||||
}]);
|
||||
|
||||
@ -3021,7 +3042,7 @@ module.exports = function (css) {
|
||||
/* 16 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
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-env":"^1.6.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":{"clusterize.js":"^0.18.0"}}
|
||||
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-env":"^1.6.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","puppeteer":"^0.13.0","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":{"clusterize.js":"^0.18.0"}}
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -207,7 +207,7 @@ export default class ColumnManager {
|
||||
// align columns
|
||||
this.getColumns()
|
||||
.map(column => {
|
||||
if (column.align && ['left', 'center', 'right'].includes(column.align)) {
|
||||
if (['left', 'center', 'right'].includes(column.align)) {
|
||||
this.style.setStyle(`.data-table [data-col-index="${column.colIndex}"]`, {
|
||||
'text-align': column.align
|
||||
});
|
||||
@ -228,17 +228,29 @@ export default class ColumnManager {
|
||||
}
|
||||
|
||||
setColumnWidth(colIndex, width) {
|
||||
const selector = `[data-col-index="${colIndex}"] .content, [data-col-index="${colIndex}"] .edit-cell`;
|
||||
this._columnWidthMap = this._columnWidthMap || [];
|
||||
|
||||
this.style.setStyle(selector, {
|
||||
let index = this._columnWidthMap[colIndex];
|
||||
const selector = `[data-col-index="${colIndex}"] .content, [data-col-index="${colIndex}"] .edit-cell`;
|
||||
const styles = {
|
||||
width: width + 'px'
|
||||
});
|
||||
};
|
||||
|
||||
index = this.style.setStyle(selector, styles, index);
|
||||
this._columnWidthMap[colIndex] = index;
|
||||
}
|
||||
|
||||
setColumnHeaderWidth(colIndex, width) {
|
||||
this.style.setStyle(`[data-col-index="${colIndex}"][data-is-header] .content`, {
|
||||
width: width + 'px'
|
||||
});
|
||||
this.$columnMap = this.$columnMap || [];
|
||||
const selector = `[data-col-index="${colIndex}"][data-is-header] .content`;
|
||||
|
||||
let $column = this.$columnMap[colIndex];
|
||||
if (!$column) {
|
||||
$column = this.header.querySelector(selector);
|
||||
this.$columnMap[colIndex] = $column;
|
||||
}
|
||||
|
||||
$column.style.width = width + 'px';
|
||||
}
|
||||
|
||||
getColumnMinWidth(colIndex) {
|
||||
|
||||
11
src/style.js
11
src/style.js
@ -9,7 +9,7 @@ export default class Style {
|
||||
this.styleSheet = styleEl.sheet;
|
||||
}
|
||||
|
||||
setStyle(rule, styleMap) {
|
||||
setStyle(rule, styleMap, index = -1) {
|
||||
const styles = Object.keys(styleMap)
|
||||
.map(prop => {
|
||||
if (!prop.includes('-')) {
|
||||
@ -20,6 +20,13 @@ export default class Style {
|
||||
.join('');
|
||||
let ruleString = `${rule} { ${styles} }`;
|
||||
|
||||
this.styleSheet.insertRule(ruleString, this.styleSheet.cssRules.length);
|
||||
let _index = this.styleSheet.cssRules.length;
|
||||
if (index !== -1) {
|
||||
this.styleSheet.removeRule(index);
|
||||
_index = index;
|
||||
}
|
||||
|
||||
this.styleSheet.insertRule(ruleString, _index);
|
||||
return _index;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user