jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

Use the new BEM syntax for querySelector

Browse Source
This commit is contained in:
Faris Ansari 2018-04-22 13:55:05 +05:30
parent 6d37d19cd8
commit 4c345b1a4c
2 changed files with 48 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/cellmanager.js
View File

@ -147,7 +147,11 @@ export default class CellManager {
bindCopyCellContents() { bindCopyCellContents() {
this.keyboard.on('ctrl+c', () => { this.keyboard.on('ctrl+c', () => {
this.copyCellContents(this.$focusedCell, this.$selectionCursor); const noOfCellsCopied = this.copyCellContents(this.$focusedCell, this.$selectionCursor);
const message = `${noOfCellsCopied} cell${noOfCellsCopied > 1 ? 's' : ''} copied`;
if (noOfCellsCopied) {
this.instance.showToastMessage(message, 2);
}
}); });
} }
@ -230,22 +234,20 @@ export default class CellManager {
colIndex, colIndex,
rowIndex rowIndex
} = $.data($cell); } = $.data($cell);
const _colIndex = this.datamanager.getColumnIndexById('_rowIndex');
const colHeaderSelector = `.dt-header .dt-cell[data-col-index="${colIndex}"]`; const srNoColIndex = this.datamanager.getColumnIndexById('_rowIndex');
const rowHeaderSelector = `.dt-cell[data-row-index="${rowIndex}"][data-col-index="${_colIndex}"]`; const colHeaderSelector = `.dt-cell--header-${colIndex}`;
const rowHeaderSelector = `.dt-cell--${srNoColIndex}-${rowIndex}`;
if (this.lastHeaders) { if (this.lastHeaders) {
$.removeStyle(this.lastHeaders, 'backgroundColor'); this.lastHeaders.forEach(header => header.classList.remove('dt-cell--highlight'));
} }
const colHeader = $(colHeaderSelector, this.wrapper); const colHeader = $(colHeaderSelector, this.wrapper);
const rowHeader = $(rowHeaderSelector, this.wrapper); const rowHeader = $(rowHeaderSelector, this.wrapper);
$.style([colHeader, rowHeader], {
backgroundColor: '#f5f7fa' // light-bg
});
this.lastHeaders = [colHeader, rowHeader]; this.lastHeaders = [colHeader, rowHeader];
this.lastHeaders.forEach(header => header.classList.add('dt-cell--highlight'));
} }
selectAreaOnClusterChanged() { selectAreaOnClusterChanged() {
@ -504,13 +506,13 @@ export default class CellManager {
} = $.data($cell1); } = $.data($cell1);
const cell = this.getCell(colIndex, rowIndex); const cell = this.getCell(colIndex, rowIndex);
copyTextToClipboard(cell.content); copyTextToClipboard(cell.content);
return; return 1;
} }
const cells = this.getCellsInRange($cell1, $cell2); const cells = this.getCellsInRange($cell1, $cell2);
if (!cells) return; if (!cells) return 0;
const values = cells const rows = cells
// get cell objects // get cell objects
.map(index => this.getCell(...index)) .map(index => this.getCell(...index))
// convert to array of rows // convert to array of rows
@ -521,13 +523,18 @@ export default class CellManager {
acc[rowIndex].push(curr.content); acc[rowIndex].push(curr.content);
return acc; return acc;
}, []) }, []);
const values = rows
// join values by tab // join values by tab
.map(row => row.join('\t')) .map(row => row.join('\t'))
// join rows by newline // join rows by newline
.join('\n'); .join('\n');
copyTextToClipboard(values); copyTextToClipboard(values);
// return no of cells copied
return rows.reduce((total, row) => total + row.length, 0);
} }
activateFilter(colIndex) { activateFilter(colIndex) {
@ -580,7 +587,7 @@ export default class CellManager {
} }
if (!$aboveRow) return $cell; if (!$aboveRow) return $cell;
return $(`[data-col-index="${colIndex}"]`, $aboveRow); return $(`.dt-cell--col-${colIndex}`, $aboveRow);
} }
getBelowCell$($cell) { getBelowCell$($cell) {
@ -594,7 +601,7 @@ export default class CellManager {
} }
if (!$belowRow) return $cell; if (!$belowRow) return $cell;
return $(`[data-col-index="${colIndex}"]`, $belowRow); return $(`.dt-cell--col-${colIndex}`, $belowRow);
} }
getLeftCell$($cell) { getLeftCell$($cell) {
@ -625,10 +632,6 @@ export default class CellManager {
return this.instance.datamanager.getCell(colIndex, rowIndex); return this.instance.datamanager.getCell(colIndex, rowIndex);
} }
getCellAttr($cell) {
return this.instance.getCellAttr($cell);
}
getRowHeight() { getRowHeight() {
return $.style($('.dt-row', this.bodyScrollable), 'height'); return $.style($('.dt-row', this.bodyScrollable), 'height');
} }
@ -661,9 +664,16 @@ export default class CellManager {
isFilter isFilter
}); });
const isBodyCell = !(isHeader || isFilter);
const className = [ const className = [
'dt-cell', 'dt-cell',
isHeader ? 'dt-cell--header' : '' 'dt-cell--col-' + colIndex,
isBodyCell ? `dt-cell--${colIndex}-${rowIndex}` : '',
isBodyCell ? 'dt-cell--row-' + rowIndex : '',
isHeader ? 'dt-cell--header' : '',
isHeader ? `dt-cell--header-${colIndex}` : '',
isFilter ? 'dt-cell--filter' : ''
].join(' '); ].join(' ');
return ` return `
@ -676,11 +686,12 @@ export default class CellManager {
getCellContent(cell) { getCellContent(cell) {
const { const {
isHeader, isHeader,
isFilter isFilter,
colIndex
} = cell; } = cell;
const editable = !isHeader && cell.editable !== false; const editable = !isHeader && cell.editable !== false;
const editCellHTML = editable ? this.getEditCellHTML() : ''; const editCellHTML = editable ? this.getEditCellHTML(colIndex) : '';
const sortable = isHeader && cell.sortable !== false; const sortable = isHeader && cell.sortable !== false;
const sortIndicator = sortable ? '<span class="sort-indicator"></span>' : ''; const sortIndicator = sortable ? '<span class="sort-indicator"></span>' : '';
@ -717,8 +728,13 @@ export default class CellManager {
} }
} }
const className = [
'dt-cell__content',
isHeader ? `dt-cell__content--header-${colIndex}` : `dt-cell__content--col-${colIndex}`
].join(' ');
return ` return `
<div class="dt-cell__content"> <div class="${className}">
${contentHTML} ${contentHTML}
${sortIndicator} ${sortIndicator}
${resizeColumn} ${resizeColumn}
@ -728,11 +744,11 @@ export default class CellManager {
`; `;
} }
getEditCellHTML() { getEditCellHTML(colIndex) {
return '<div class="dt-cell__edit"></div>'; return `<div class="dt-cell__edit dt-cell__edit--col-${colIndex}"></div>`;
} }
selector(colIndex, rowIndex) { selector(colIndex, rowIndex) {
return `.dt-cell[data-col-index="${colIndex}"][data-row-index="${rowIndex}"]`; return `.dt-cell--${colIndex}-${rowIndex}`;
} }
} }

18
src/columnmanager.js
View File

@ -30,7 +30,7 @@ export default class ColumnManager {
refreshHeader() { refreshHeader() {
const columns = this.datamanager.getColumns(); const columns = this.datamanager.getColumns();
const $cols = $.each('.dt-cell[data-is-header]', this.header); const $cols = $.each('.dt-cell--header', this.header);
const refreshHTML = const refreshHTML =
// first init // first init
@ -331,8 +331,8 @@ export default class ColumnManager {
let index = this._columnWidthMap[colIndex]; let index = this._columnWidthMap[colIndex];
const selector = [ const selector = [
`[data-col-index="${colIndex}"] .dt-cell__content`, `.dt-cell__content--col-${colIndex}`,
`[data-col-index="${colIndex}"] .dt-cell__edit` `.dt-cell__edit--col-${colIndex}`
].join(', '); ].join(', ');
const styles = { const styles = {
@ -349,7 +349,7 @@ export default class ColumnManager {
setColumnHeaderWidth(colIndex) { setColumnHeaderWidth(colIndex) {
colIndex = +colIndex; colIndex = +colIndex;
this.$columnMap = this.$columnMap || []; this.$columnMap = this.$columnMap || [];
const selector = `.dt-header [data-col-index="${colIndex}"] .dt-cell__content`; const selector = `.dt-cell__content--header-${colIndex}`;
const { const {
width width
} = this.getColumn(colIndex); } = this.getColumn(colIndex);
@ -373,19 +373,13 @@ export default class ColumnManager {
} }
getHeaderCell$(colIndex) { getHeaderCell$(colIndex) {
return $(`.dt-cell[data-col-index="${colIndex}"]`, this.header); return $(`.dt-cell--header-${colIndex}`, this.header);
} }
getLastColumnIndex() { getLastColumnIndex() {
return this.datamanager.getColumnCount() - 1; return this.datamanager.getColumnCount() - 1;
} }
getSerialColumnIndex() {
const columns = this.datamanager.getColumns();
return columns.findIndex(column => column.content.includes('Sr. No'));
}
getDropdownHTML() { getDropdownHTML() {
const { dropdownButton, headerDropdown: dropdownItems } = this.options; const { dropdownButton, headerDropdown: dropdownItems } = this.options;
@ -399,5 +393,5 @@ export default class ColumnManager {
</div> </div>
</div> </div>
`; `;
}; }
} }