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 Clusterize from 'clusterize.js';
import { getRowHTML } from './rowmanager';
import { promisify } from './utils';
export default class BodyRenderer {
@ -87,14 +86,14 @@ export default class BodyRenderer {
}
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) {
return `
<tbody>
${rows.map(row => getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')}
${rows.map(row => this.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')}
</tbody>
`;
}

112
src/cellmanager.js
View File

@ -467,8 +467,8 @@ export default class CellManager {
}
refreshCell(cell) {
const $cell = $(cellSelector(cell.colIndex, cell.rowIndex), this.bodyScrollable);
$cell.innerHTML = getCellContent(cell);
const $cell = $(this.cellSelector(cell.colIndex, cell.rowIndex), this.bodyScrollable);
$cell.innerHTML = this.getCellContent(cell);
}
isStandardCell(colIndex) {
@ -477,7 +477,7 @@ export default class CellManager {
}
getCell$(colIndex, rowIndex) {
return $(cellSelector(colIndex, rowIndex), this.bodyScrollable);
return $(this.cellSelector(colIndex, rowIndex), this.bodyScrollable);
}
getAboveCell$($cell) {
@ -541,57 +541,57 @@ export default class CellManager {
getRowCountPerPage() {
return Math.ceil(this.instance.getViewportHeight() / this.getRowHeight());
}
}
export function getCellHTML(cell) {
const { rowIndex, colIndex, isHeader } = cell;
const dataAttr = makeDataAttributeString({
rowIndex,
colIndex,
isHeader
});
return `
<td class="data-table-col noselect" ${dataAttr} tabindex="0">
${getCellContent(cell)}
</td>
`;
}
export function getCellContent(cell) {
const { isHeader } = cell;
const editable = !isHeader && cell.editable !== false;
const editCellHTML = editable ? getEditCellHTML() : '';
const sortable = isHeader && cell.sortable !== false;
const sortIndicator = sortable ? '<span class="sort-indicator"></span>' : '';
const resizable = isHeader && cell.resizable !== false;
const resizeColumn = resizable ? '<span class="column-resizer"></span>' : '';
const hasDropdown = isHeader && cell.dropdown !== false;
const dropdown = hasDropdown ? `<div class="data-table-dropdown">${getDropdownHTML()}</div>` : '';
const contentHTML = (!cell.isHeader && cell.column.format) ? cell.column.format(cell.content) : cell.content;
return `
<div class="content ellipsis">
${(contentHTML)}
${sortIndicator}
${resizeColumn}
${dropdown}
</div>
${editCellHTML}
`;
}
export function getEditCellHTML() {
return `
<div class="edit-cell"></div>
`;
}
function cellSelector(colIndex, rowIndex) {
return `.data-table-col[data-col-index="${colIndex}"][data-row-index="${rowIndex}"]`;
getCellHTML(cell) {
const { rowIndex, colIndex, isHeader } = cell;
const dataAttr = makeDataAttributeString({
rowIndex,
colIndex,
isHeader
});
return `
<td class="data-table-col noselect" ${dataAttr} tabindex="0">
${this.getCellContent(cell)}
</td>
`;
}
getCellContent(cell) {
const { isHeader } = cell;
const editable = !isHeader && cell.editable !== false;
const editCellHTML = editable ? this.getEditCellHTML() : '';
const sortable = isHeader && cell.sortable !== false;
const sortIndicator = sortable ? '<span class="sort-indicator"></span>' : '';
const resizable = isHeader && cell.resizable !== false;
const resizeColumn = resizable ? '<span class="column-resizer"></span>' : '';
const hasDropdown = isHeader && cell.dropdown !== false;
const dropdown = hasDropdown ? `<div class="data-table-dropdown">${getDropdownHTML()}</div>` : '';
const contentHTML = (!cell.isHeader && cell.column.format) ? cell.column.format(cell.content) : cell.content;
return `
<div class="content ellipsis">
${(contentHTML)}
${sortIndicator}
${resizeColumn}
${dropdown}
</div>
${editCellHTML}
`;
}
getEditCellHTML() {
return `
<div class="edit-cell"></div>
`;
}
cellSelector(colIndex, 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 Sortable from 'sortablejs';
import { getRowHTML } from './rowmanager';
import { getDefault } from './utils';
export default class ColumnManager {
@ -28,13 +27,13 @@ export default class ColumnManager {
if (!$('.data-table-col', this.header)) {
// insert html
$('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 });
$('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { isHeader: 1 });
} else {
// refresh dom state
const $cols = $.each('.data-table-col', this.header);
if (columns.length < $cols.length) {
// deleted column
$('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 });
$('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { isHeader: 1 });
return;
}

17
src/rowmanager.js
View File

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