jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

move style methods into rAF

Browse Source
This commit is contained in:
Faris Ansari 2018-04-22 13:55:27 +05:30
parent 4c345b1a4c
commit 149fe6a79d
1 changed files with 29 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/style.js
View File

@ -98,28 +98,15 @@ export default class Style {
$.style(this.header, { $.style(this.header, {
margin: 0 margin: 0
}); });
// don't show resize cursor on nonResizable columns
const nonResizableColumnsSelector = this.datamanager.getColumns()
.filter(col => col.resizable === false)
.map(col => col.colIndex)
.map(i => `.dt-header [data-col-index="${i}"]`)
.join();
this.setStyle(nonResizableColumnsSelector, {
cursor: 'pointer'
});
} }
setupMinWidth() { setupMinWidth() {
$.each('.dt-cell[data-is-header]', this.header).map(col => { $.each('.dt-cell[data-is-header]', this.header).map(col => {
const width = $.style($('.dt-cell__content', col), 'width'); const { colIndex } = $.data(col);
const {
colIndex
} = $.data(col);
const column = this.getColumn(colIndex); const column = this.getColumn(colIndex);
if (!column.minWidth) { if (!column.minWidth) {
const width = $.style($('.dt-cell__content', col), 'width');
// only set this once // only set this once
column.minWidth = width; column.minWidth = width;
} }
@ -195,10 +182,12 @@ export default class Style {
} }
compensateScrollbarWidth() { compensateScrollbarWidth() {
const scrollbarWidth = $.scrollbarWidth(); requestAnimationFrame(() => {
const lastCol = this.datamanager.getColumn(-1); const scrollbarWidth = $.scrollbarWidth();
const width = lastCol.width - scrollbarWidth; const lastCol = this.datamanager.getColumn(-1);
this.columnmanager.setColumnWidth(lastCol.colIndex, width); const width = lastCol.width - scrollbarWidth;
this.columnmanager.setColumnWidth(lastCol.colIndex, width);
});
} }
distributeRemainingWidth() { distributeRemainingWidth() {
@ -233,10 +222,7 @@ export default class Style {
} }
setCellHeight(height) { setCellHeight(height) {
this.setStyle('.dt-cell .dt-cell__content', { this.setStyle('.dt-cell__content, .dt-cell__edit', {
height: height + 'px'
});
this.setStyle('.dt-cell .dt-cell__edit', {
height: height + 'px' height: height + 'px'
}); });
} }
@ -247,7 +233,7 @@ export default class Style {
.map(column => { .map(column => {
// alignment // alignment
if (['left', 'center', 'right'].includes(column.align)) { if (['left', 'center', 'right'].includes(column.align)) {
this.setStyle(`[data-col-index="${column.colIndex}"]`, { this.setStyle(`.dt-cell--col-${column.colIndex}`, {
'text-align': column.align 'text-align': column.align
}); });
} }
@ -267,27 +253,29 @@ export default class Style {
} }
setBodyStyle() { setBodyStyle() {
const width = $.style(this.header, 'width'); requestAnimationFrame(() => {
const width = $.style(this.header, 'width');
$.style(this.bodyScrollable, { $.style(this.bodyScrollable, {
width: width + 'px' width: width + 'px'
});
const $body = $('.dt-body', this.bodyScrollable);
if ($body) {
$.style($body, {
height: '0px'
}); });
}
$.style(this.bodyScrollable, { const $body = $('.dt-body', this.bodyScrollable);
marginTop: $.style(this.header, 'height') + 'px'
});
$.style($('table', this.bodyScrollable), { if ($body) {
margin: 0, $.style($body, {
width: '100%' height: '0px'
});
}
$.style(this.bodyScrollable, {
marginTop: $.style(this.header, 'height') + 'px'
});
$.style($('table', this.bodyScrollable), {
margin: 0,
width: '100%'
});
}); });
} }