jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

Move getHTML methods inside class

Browse Source
This commit is contained in:
Faris Ansari 2018-02-12 11:23:56 +05:30
parent 0ebe0461e1
commit e41e6ad386
6 changed files with 1096 additions and 1095 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2050
lib/frappe-datatable.js
View File

File diff suppressed because it is too large Load Diff

2
lib/frappe-datatable.js.map
View File

File diff suppressed because one or more lines are too long

5
src/body-renderer.js
View File

@ -1,6 +1,5 @@
import $ from './dom'; import $ from './dom';
import Clusterize from 'clusterize.js'; import Clusterize from 'clusterize.js';
import { getRowHTML } from './rowmanager';
import { promisify } from './utils'; import { promisify } from './utils';
export default class BodyRenderer { export default class BodyRenderer {
@ -87,14 +86,14 @@ export default class BodyRenderer {
} }
getDataForClusterize(rows) { getDataForClusterize(rows) {
return rows.map((row) => getRowHTML(row, { rowIndex: row[0].rowIndex })); return rows.map((row) => this.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex }));
} }
}; };
export function getBodyHTML(rows) { export function getBodyHTML(rows) {
return ` return `
<tbody> <tbody>
${rows.map(row => getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')} ${rows.map(row => this.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')}
</tbody> </tbody>
`; `;
} }

112
src/cellmanager.js
View File

@ -467,8 +467,8 @@ export default class CellManager {
} }
refreshCell(cell) { refreshCell(cell) {
const $cell = $(cellSelector(cell.colIndex, cell.rowIndex), this.bodyScrollable); const $cell = $(this.cellSelector(cell.colIndex, cell.rowIndex), this.bodyScrollable);
$cell.innerHTML = getCellContent(cell); $cell.innerHTML = this.getCellContent(cell);
} }
isStandardCell(colIndex) { isStandardCell(colIndex) {
@ -477,7 +477,7 @@ export default class CellManager {
} }
getCell$(colIndex, rowIndex) { getCell$(colIndex, rowIndex) {
return $(cellSelector(colIndex, rowIndex), this.bodyScrollable); return $(this.cellSelector(colIndex, rowIndex), this.bodyScrollable);
} }
getAboveCell$($cell) { getAboveCell$($cell) {
@ -541,57 +541,57 @@ export default class CellManager {
getRowCountPerPage() { getRowCountPerPage() {
return Math.ceil(this.instance.getViewportHeight() / this.getRowHeight()); return Math.ceil(this.instance.getViewportHeight() / this.getRowHeight());
} }
}
getCellHTML(cell) {
export function getCellHTML(cell) { const { rowIndex, colIndex, isHeader } = cell;
const { rowIndex, colIndex, isHeader } = cell; const dataAttr = makeDataAttributeString({
const dataAttr = makeDataAttributeString({ rowIndex,
rowIndex, colIndex,
colIndex, isHeader
isHeader });
});
return `
return ` <td class="data-table-col noselect" ${dataAttr} tabindex="0">
<td class="data-table-col noselect" ${dataAttr} tabindex="0"> ${this.getCellContent(cell)}
${getCellContent(cell)} </td>
</td> `;
`; }
}
getCellContent(cell) {
export function getCellContent(cell) { const { isHeader } = cell;
const { isHeader } = cell;
const editable = !isHeader && cell.editable !== false;
const editable = !isHeader && cell.editable !== false; const editCellHTML = editable ? this.getEditCellHTML() : '';
const editCellHTML = editable ? getEditCellHTML() : '';
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>' : '';
const resizable = isHeader && cell.resizable !== false;
const resizable = isHeader && cell.resizable !== false; const resizeColumn = resizable ? '<span class="column-resizer"></span>' : '';
const resizeColumn = resizable ? '<span class="column-resizer"></span>' : '';
const hasDropdown = isHeader && cell.dropdown !== false;
const hasDropdown = isHeader && cell.dropdown !== false; const dropdown = hasDropdown ? `<div class="data-table-dropdown">${getDropdownHTML()}</div>` : '';
const dropdown = hasDropdown ? `<div class="data-table-dropdown">${getDropdownHTML()}</div>` : '';
const contentHTML = (!cell.isHeader && cell.column.format) ? cell.column.format(cell.content) : cell.content;
const contentHTML = (!cell.isHeader && cell.column.format) ? cell.column.format(cell.content) : cell.content;
return `
return ` <div class="content ellipsis">
<div class="content ellipsis"> ${(contentHTML)}
${(contentHTML)} ${sortIndicator}
${sortIndicator} ${resizeColumn}
${resizeColumn} ${dropdown}
${dropdown} </div>
</div> ${editCellHTML}
${editCellHTML} `;
`; }
}
getEditCellHTML() {
export function getEditCellHTML() { return `
return ` <div class="edit-cell"></div>
<div class="edit-cell"></div> `;
`; }
}
cellSelector(colIndex, rowIndex) {
function cellSelector(colIndex, rowIndex) { return `.data-table-col[data-col-index="${colIndex}"][data-row-index="${rowIndex}"]`;
return `.data-table-col[data-col-index="${colIndex}"][data-row-index="${rowIndex}"]`; }
} }

5
src/columnmanager.js
View File

@ -1,6 +1,5 @@
import $ from './dom'; import $ from './dom';
import Sortable from 'sortablejs'; import Sortable from 'sortablejs';
import { getRowHTML } from './rowmanager';
import { getDefault } from './utils'; import { getDefault } from './utils';
export default class ColumnManager { export default class ColumnManager {
@ -28,13 +27,13 @@ export default class ColumnManager {
if (!$('.data-table-col', this.header)) { if (!$('.data-table-col', this.header)) {
// insert html // insert html
$('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 }); $('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { isHeader: 1 });
} else { } else {
// refresh dom state // refresh dom state
const $cols = $.each('.data-table-col', this.header); const $cols = $.each('.data-table-col', this.header);
if (columns.length < $cols.length) { if (columns.length < $cols.length) {
// deleted column // deleted column
$('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 }); $('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { isHeader: 1 });
return; return;
} }

17
src/rowmanager.js
View File

@ -1,6 +1,5 @@
import $ from './dom'; import $ from './dom';
import { makeDataAttributeString, promisify } from './utils'; import { makeDataAttributeString, promisify } from './utils';
import { getCellHTML } from './cellmanager';
export default class RowManager { export default class RowManager {
constructor(instance) { constructor(instance) {
@ -184,14 +183,14 @@ export default class RowManager {
this._lastScrollTo = rowIndex; this._lastScrollTo = rowIndex;
$.scrollTop(this.bodyScrollable, offset); $.scrollTop(this.bodyScrollable, offset);
} }
}
export function getRowHTML(row, props) { getRowHTML(row, props) {
const dataAttr = makeDataAttributeString(props); const dataAttr = makeDataAttributeString(props);
return ` return `
<tr class="data-table-row" ${dataAttr}> <tr class="data-table-row" ${dataAttr}>
${row.map(getCellHTML).join('')} ${row.map(cell => this.cellmanager.getCellHTML(cell)).join('')}
</tr> </tr>
`; `;
}
} }