jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

wip

Browse Source
This commit is contained in:
Faris Ansari 2017-11-22 23:53:26 +05:30
parent 752e53ec7b
commit 85f4b5af02
8 changed files with 138 additions and 550 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

533
index.html
View File

File diff suppressed because one or more lines are too long

79
lib/frappe-datatable.js
View File

@ -718,16 +718,16 @@ var CellManager = function () {
// don't focus if already editing cell
if ($cell === this.$editingCell) return;
// don't focus checkbox cell
if (this.options.addCheckboxColumn && colIndex === 0) {
return;
}
var _$$data3 = _dom2.default.data($cell),
colIndex = _$$data3.colIndex,
isHeader = _$$data3.isHeader;
if (this.isStandardCell(colIndex) || isHeader) {
if (isHeader) {
return;
}
var column = this.columnmanager.getColumn(colIndex);
if (column.focusable === false) {
return;
}
@ -920,7 +920,7 @@ var CellManager = function () {
rowIndex = _$$data7.rowIndex,
colIndex = _$$data7.colIndex;
var col = this.instance.columnmanager.getColumn(colIndex);
var col = this.columnmanager.getColumn(colIndex);
if (col && col.editable === false) {
return;
@ -1528,6 +1528,12 @@ var DataTable = function () {
function DataTable(wrapper, options) {
_classCallCheck(this, DataTable);
DataTable.instances++;
if (typeof wrapper === 'string') {
// css selector
wrapper = document.querySelector(wrapper);
}
this.wrapper = wrapper;
if (!this.wrapper) {
throw new Error('Invalid argument given for `wrapper`');
@ -1539,7 +1545,7 @@ var DataTable = function () {
this.prepare();
this.style = new _style2.default(this.wrapper);
this.style = new _style2.default(this);
this.datamanager = new _datamanager2.default(this.options);
this.rowmanager = new _rowmanager2.default(this);
this.columnmanager = new _columnmanager2.default(this);
@ -1570,6 +1576,12 @@ var DataTable = function () {
this.datamanager.init(data);
this.render();
}
}, {
key: 'destroy',
value: function destroy() {
this.wrapper.innerHTML = '';
this.style.destroy();
}
}, {
key: 'appendRows',
value: function appendRows(rows) {
@ -1730,6 +1742,11 @@ var DataTable = function () {
return this.viewportHeight;
}
}, {
key: 'scrollToLastColumn',
value: function scrollToLastColumn() {
this.datatableWrapper.scrollLeft = 9999;
}
}, {
key: 'log',
value: function log() {
@ -1742,6 +1759,8 @@ var DataTable = function () {
return DataTable;
}();
DataTable.instances = 0;
exports.default = DataTable;
function getBodyHTML(rows) {
return '\n <tbody>\n ' + rows.map(function (row) {
@ -1807,7 +1826,8 @@ var DataManager = function () {
content: 'Sr. No',
editable: false,
resizable: false,
align: 'center'
align: 'center',
focusable: false
};
columns = [val].concat(columns);
@ -1819,7 +1839,8 @@ var DataManager = function () {
content: '<input type="checkbox" />',
editable: false,
resizable: false,
sortable: false
sortable: false,
focusable: false
};
columns = [_val].concat(columns);
@ -2334,6 +2355,19 @@ var ColumnManager = function () {
_dom2.default.style(this.header, {
margin: 0
});
// don't show resize cursor on nonResizable columns
var nonResizableColumnsSelector = this.datamanager.getColumns().filter(function (col) {
return col.resizable !== undefined && !col.resizable;
}).map(function (col) {
return col.colIndex;
}).map(function (i) {
return '.data-table-header [data-col-index="' + i + '"]';
}).join();
this.style.setStyle(nonResizableColumnsSelector, {
cursor: 'pointer'
});
}
}, {
key: 'setupMinWidth',
@ -2393,9 +2427,13 @@ var ColumnManager = function () {
return;
}
var deltaWidth = (wrapperWidth - headerWidth) / this.datamanager.getColumnCount(true);
var resizableColumns = this.datamanager.getColumns().filter(function (col) {
return col.resizable === undefined || col.resizable;
});
this.datamanager.getColumns(true).map(function (col) {
var deltaWidth = (wrapperWidth - headerWidth) / resizableColumns.length;
resizableColumns.map(function (col) {
var width = _dom2.default.style(_this5.getColumnHeaderElement(col.colIndex), 'width');
var finalWidth = Math.min(width + deltaWidth) - 2;
@ -2534,16 +2572,25 @@ var _utils = __webpack_require__(1);
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Style = function () {
function Style(wrapper) {
function Style(datatable) {
_classCallCheck(this, Style);
var styleEl = document.createElement('style');
this.datatable = datatable;
this.scopeClass = 'datatable-instance-' + datatable.constructor.instances;
datatable.datatableWrapper.classList.add(this.scopeClass);
document.head.appendChild(styleEl);
var styleEl = document.createElement('style');
datatable.wrapper.insertBefore(styleEl, datatable.datatableWrapper);
this.styleEl = styleEl;
this.styleSheet = styleEl.sheet;
}
_createClass(Style, [{
key: 'destroy',
value: function destroy() {
this.datatable.wrapper.removeChild(this.styleEl);
}
}, {
key: 'setStyle',
value: function setStyle(rule, styleMap) {
var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
@ -2554,7 +2601,7 @@ var Style = function () {
}
return prop + ':' + styleMap[prop] + ';';
}).join('');
var ruleString = rule + ' { ' + styles + ' }';
var ruleString = '.' + this.scopeClass + ' ' + rule + ' { ' + styles + ' }';
var _index = this.styleSheet.cssRules.length;
if (index !== -1) {

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

File diff suppressed because one or more lines are too long

11
src/cellmanager.js
View File

@ -184,14 +184,13 @@ export default class CellManager {
// don't focus if already editing cell
if ($cell === this.$editingCell) return;
// don't focus checkbox cell
if (this.options.addCheckboxColumn && colIndex === 0) {
const { colIndex, isHeader } = $.data($cell);
if (isHeader) {
return;
}
const { colIndex, isHeader } = $.data($cell);
if (this.isStandardCell(colIndex) || isHeader) {
const column = this.columnmanager.getColumn(colIndex);
if (column.focusable === false) {
return;
}
@ -344,7 +343,7 @@ export default class CellManager {
activateEditing($cell) {
const { rowIndex, colIndex } = $.data($cell);
const col = this.instance.columnmanager.getColumn(colIndex);
const col = this.columnmanager.getColumn(colIndex);
if (col && col.editable === false) {
return;

19
src/columnmanager.js
View File

@ -140,6 +140,17 @@ export default class ColumnManager {
$.style(this.header, {
margin: 0
});
// don't show resize cursor on nonResizable columns
const nonResizableColumnsSelector = this.datamanager.getColumns()
.filter(col => col.resizable !== undefined && !col.resizable)
.map(col => col.colIndex)
.map(i => `.data-table-header [data-col-index="${i}"]`)
.join();
this.style.setStyle(nonResizableColumnsSelector, {
cursor: 'pointer'
});
}
setupMinWidth() {
@ -185,9 +196,13 @@ export default class ColumnManager {
return;
}
const deltaWidth = (wrapperWidth - headerWidth) / this.datamanager.getColumnCount(true);
const resizableColumns = this.datamanager.getColumns().filter(
col => col.resizable === undefined || col.resizable
);
this.datamanager.getColumns(true).map(col => {
const deltaWidth = (wrapperWidth - headerWidth) / resizableColumns.length;
resizableColumns.map(col => {
const width = $.style(this.getColumnHeaderElement(col.colIndex), 'width');
let finalWidth = Math.min(width + deltaWidth) - 2;

6
src/datamanager.js
View File

@ -32,7 +32,8 @@ export default class DataManager {
content: 'Sr. No',
editable: false,
resizable: false,
align: 'center'
align: 'center',
focusable: false
};
columns = [val].concat(columns);
@ -44,7 +45,8 @@ export default class DataManager {
content: '<input type="checkbox" />',
editable: false,
resizable: false,
sortable: false
sortable: false,
focusable: false
};
columns = [val].concat(columns);

22
src/datatable.js
View File

@ -24,9 +24,14 @@ const DEFAULT_OPTIONS = {
takeAvailableSpace: false
};
export default class DataTable {
class DataTable {
constructor(wrapper, options) {
DataTable.instances++;
if (typeof wrapper === 'string') {
// css selector
wrapper = document.querySelector(wrapper);
}
this.wrapper = wrapper;
if (!this.wrapper) {
throw new Error('Invalid argument given for `wrapper`');
@ -38,7 +43,7 @@ export default class DataTable {
this.prepare();
this.style = new Style(this.wrapper);
this.style = new Style(this);
this.datamanager = new DataManager(this.options);
this.rowmanager = new RowManager(this);
this.columnmanager = new ColumnManager(this);
@ -79,6 +84,11 @@ export default class DataTable {
this.render();
}
destroy() {
this.wrapper.innerHTML = '';
this.style.destroy();
}
appendRows(rows) {
this.datamanager.appendRows(rows);
this.rowmanager.refreshRows();
@ -226,6 +236,10 @@ export default class DataTable {
return this.viewportHeight;
}
scrollToLastColumn() {
this.datatableWrapper.scrollLeft = 9999;
}
log() {
if (this.options.enableLogs) {
console.log.apply(console, arguments);
@ -233,6 +247,10 @@ export default class DataTable {
}
}
DataTable.instances = 0;
export default DataTable;
export function getBodyHTML(rows) {
return `
<tbody>

16
src/style.js
View File

@ -2,13 +2,21 @@ import { camelCaseToDash } from './utils';
export default class Style {
constructor(wrapper) {
const styleEl = document.createElement('style');
constructor(datatable) {
this.datatable = datatable;
this.scopeClass = 'datatable-instance-' + datatable.constructor.instances;
datatable.datatableWrapper.classList.add(this.scopeClass);
document.head.appendChild(styleEl);
const styleEl = document.createElement('style');
datatable.wrapper.insertBefore(styleEl, datatable.datatableWrapper);
this.styleEl = styleEl;
this.styleSheet = styleEl.sheet;
}
destroy() {
this.datatable.wrapper.removeChild(this.styleEl);
}
setStyle(rule, styleMap, index = -1) {
const styles = Object.keys(styleMap)
.map(prop => {
@ -18,7 +26,7 @@ export default class Style {
return `${prop}:${styleMap[prop]};`;
})
.join('');
let ruleString = `${rule} { ${styles} }`;
let ruleString = `.${this.scopeClass} ${rule} { ${styles} }`;
let _index = this.styleSheet.cssRules.length;
if (index !== -1) {