jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

Fire events on column actions

Browse Source
This commit is contained in:
Faris Ansari 2017-11-29 13:31:15 +05:30
parent f8174da9c5
commit d3a4add85b
4 changed files with 99 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
lib/frappe-datatable.js
View File

@ -1318,6 +1318,7 @@ var ColumnManager = function () {
this.instance = instance;
this.options = this.instance.options;
this.fireEvent = this.instance.fireEvent;
this.header = this.instance.header;
this.datamanager = this.instance.datamanager;
this.style = this.instance.style;
@ -1513,31 +1514,9 @@ var ColumnManager = function () {
var _$$data6 = _dom2.default.data($draggedCell),
colIndex = _$$data6.colIndex;
// debugger;
if ($draggedCell.classList.contains('remove-column')) {
_this3.instance.freeze();
_this3.datamanager.removeColumn(colIndex).then(function () {
_this3.refreshHeader();
return _this3.rowmanager.refreshRows();
}).then(function () {
return _this3.instance.unfreeze();
});
return;
}
if (+colIndex === newIndex) return;
_this3.instance.freeze();
_this3.datamanager.switchColumn(oldIndex, newIndex).then(function () {
_this3.refreshHeader();
return _this3.rowmanager.refreshRows();
}).then(function () {
_this3.setColumnWidth(oldIndex);
_this3.setColumnWidth(newIndex);
}).then(function () {
return _this3.instance.unfreeze();
});
_this3.switchColumn(oldIndex, newIndex);
},
preventOnFilter: false,
filter: '.column-resizer, .data-table-dropdown',
@ -1592,11 +1571,7 @@ var ColumnManager = function () {
});
(0, _dom2.default)('.sort-indicator', $cell).textContent = textContent;
if (_this4.events && _this4.events.onSort) {
_this4.events.onSort(colIndex, nextSortOrder);
} else {
_this4.sortColumn(colIndex, nextSortOrder);
}
_this4.sortColumn(colIndex, nextSortOrder);
});
}
}, {
@ -1610,6 +1585,8 @@ var ColumnManager = function () {
return _this5.rowmanager.refreshRows();
}).then(function () {
return _this5.instance.unfreeze();
}).then(function () {
_this5.fireEvent('onSortColumn', _this5.getColumn(colIndex));
});
}
}, {
@ -1617,12 +1594,32 @@ var ColumnManager = function () {
value: function removeColumn(colIndex) {
var _this6 = this;
var removedCol = this.getColumn(colIndex);
this.instance.freeze();
this.datamanager.removeColumn(colIndex).then(function () {
_this6.refreshHeader();
return _this6.rowmanager.refreshRows();
}).then(function () {
return _this6.instance.unfreeze();
}).then(function () {
_this6.fireEvent('onRemoveColumn', removedCol);
});
}
}, {
key: 'switchColumn',
value: function switchColumn(oldIndex, newIndex) {
var _this7 = this;
this.instance.freeze();
this.datamanager.switchColumn(oldIndex, newIndex).then(function () {
_this7.refreshHeader();
return _this7.rowmanager.refreshRows();
}).then(function () {
_this7.setColumnWidth(oldIndex);
_this7.setColumnWidth(newIndex);
_this7.instance.unfreeze();
}).then(function () {
_this7.fireEvent('onSwitchColumn', _this7.getColumn(oldIndex), _this7.getColumn(newIndex));
});
}
}, {
@ -1665,7 +1662,7 @@ var ColumnManager = function () {
}, {
key: 'setupMinWidth',
value: function setupMinWidth() {
var _this7 = this;
var _this8 = this;
// cache minWidth for each column
this.minWidthMap = (0, _utils.getDefault)(this.minWidthMap, []);
@ -1676,16 +1673,16 @@ var ColumnManager = function () {
var _$$data8 = _dom2.default.data(col),
colIndex = _$$data8.colIndex;
if (!_this7.minWidthMap[colIndex]) {
if (!_this8.minWidthMap[colIndex]) {
// only set this once
_this7.minWidthMap[colIndex] = width;
_this8.minWidthMap[colIndex] = width;
}
});
}
}, {
key: 'setNaturalColumnWidth',
value: function setNaturalColumnWidth() {
var _this8 = this;
var _this9 = this;
// set initial width as naturally calculated by table's first row
_dom2.default.each('.data-table-row[data-row-index="0"] .data-table-col', this.bodyScrollable).map(function ($cell) {
@ -1696,19 +1693,19 @@ var ColumnManager = function () {
var _$$data9 = _dom2.default.data($cell),
colIndex = _$$data9.colIndex;
var minWidth = _this8.getColumnMinWidth(colIndex);
var minWidth = _this9.getColumnMinWidth(colIndex);
if (width < minWidth) {
width = minWidth;
}
_this8.setColumnWidth(colIndex, width);
_this8.setDefaultCellHeight(height);
_this9.setColumnWidth(colIndex, width);
_this9.setDefaultCellHeight(height);
});
}
}, {
key: 'distributeRemainingWidth',
value: function distributeRemainingWidth() {
var _this9 = this;
var _this10 = this;
if (!this.options.takeAvailableSpace) return;
@ -1727,11 +1724,11 @@ var ColumnManager = function () {
var deltaWidth = (wrapperWidth - headerWidth) / resizableColumns.length;
resizableColumns.map(function (col) {
var width = _dom2.default.style(_this9.getColumnHeaderElement(col.colIndex), 'width');
var width = _dom2.default.style(_this10.getColumnHeaderElement(col.colIndex), 'width');
var finalWidth = Math.min(width + deltaWidth) - 2;
_this9.setColumnHeaderWidth(col.colIndex, finalWidth);
_this9.setColumnWidth(col.colIndex, finalWidth);
_this10.setColumnHeaderWidth(col.colIndex, finalWidth);
_this10.setColumnWidth(col.colIndex, finalWidth);
});
this.instance.setBodyWidth();
}
@ -1745,12 +1742,12 @@ var ColumnManager = function () {
}, {
key: 'setColumnAlignments',
value: function setColumnAlignments() {
var _this10 = this;
var _this11 = this;
// align columns
this.getColumns().map(function (column) {
if (['left', 'center', 'right'].includes(column.align)) {
_this10.style.setStyle('[data-col-index="' + column.colIndex + '"]', {
_this11.style.setStyle('[data-col-index="' + column.colIndex + '"]', {
'text-align': column.align
});
}
@ -2159,7 +2156,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var DEFAULT_OPTIONS = {
events: null,
data: {
columns: [],
rows: []
@ -2186,6 +2182,11 @@ var DEFAULT_OPTIONS = {
this.removeColumn(column.colIndex);
}
}],
events: {
onRemoveColumn: function onRemoveColumn(column) {},
onSwitchColumn: function onSwitchColumn(column1, column2) {},
onSortColumn: function onSortColumn(column) {}
},
sortIndicator: {
asc: '↑',
desc: '↓',
@ -2218,7 +2219,8 @@ var DataTable = function () {
this.options = Object.assign({}, DEFAULT_OPTIONS, options);
this.options.headerDropdown = DEFAULT_OPTIONS.headerDropdown.concat(options.headerDropdown || []);
// custom user events
this.events = this.options.events;
this.events = Object.assign({}, DEFAULT_OPTIONS.events, options.events || {});
this.fireEvent = this.fireEvent.bind(this);
this.prepare();
@ -2450,6 +2452,15 @@ var DataTable = function () {
display: 'none'
});
}
}, {
key: 'fireEvent',
value: function fireEvent(eventName) {
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
this.events[eventName].apply(this, args);
}
}, {
key: 'log',
value: function log() {

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

File diff suppressed because one or more lines are too long

63
src/columnmanager.js
View File

@ -7,6 +7,7 @@ export default class ColumnManager {
constructor(instance) {
this.instance = instance;
this.options = this.instance.options;
this.fireEvent = this.instance.fireEvent;
this.header = this.instance.header;
this.datamanager = this.instance.datamanager;
this.style = this.instance.style;
@ -170,33 +171,9 @@ export default class ColumnManager {
const { oldIndex, newIndex } = e;
const $draggedCell = e.item;
const { colIndex } = $.data($draggedCell);
// debugger;
if ($draggedCell.classList.contains('remove-column')) {
this.instance.freeze();
this.datamanager.removeColumn(colIndex)
.then(() => {
this.refreshHeader();
return this.rowmanager.refreshRows();
})
.then(() => this.instance.unfreeze());
return;
}
if (+colIndex === newIndex) return;
this.instance.freeze();
this.datamanager.switchColumn(oldIndex, newIndex)
.then(() => {
this.refreshHeader();
return this.rowmanager.refreshRows();
})
.then(() => {
this.setColumnWidth(oldIndex);
this.setColumnWidth(newIndex);
})
.then(() => this.instance.unfreeze());
this.switchColumn(oldIndex, newIndex);
},
preventOnFilter: false,
filter: '.column-resizer, .data-table-dropdown',
@ -244,11 +221,7 @@ export default class ColumnManager {
});
$('.sort-indicator', $cell).textContent = textContent;
if (this.events && this.events.onSort) {
this.events.onSort(colIndex, nextSortOrder);
} else {
this.sortColumn(colIndex, nextSortOrder);
}
this.sortColumn(colIndex, nextSortOrder);
});
}
@ -259,17 +232,43 @@ export default class ColumnManager {
this.refreshHeader();
return this.rowmanager.refreshRows();
})
.then(() => this.instance.unfreeze());
.then(() => this.instance.unfreeze())
.then(() => {
this.fireEvent('onSortColumn', this.getColumn(colIndex));
});
}
removeColumn(colIndex) {
const removedCol = this.getColumn(colIndex);
this.instance.freeze();
this.datamanager.removeColumn(colIndex)
.then(() => {
this.refreshHeader();
return this.rowmanager.refreshRows();
})
.then(() => this.instance.unfreeze());
.then(() => this.instance.unfreeze())
.then(() => {
this.fireEvent('onRemoveColumn', removedCol);
});
}
switchColumn(oldIndex, newIndex) {
this.instance.freeze();
this.datamanager.switchColumn(oldIndex, newIndex)
.then(() => {
this.refreshHeader();
return this.rowmanager.refreshRows();
})
.then(() => {
this.setColumnWidth(oldIndex);
this.setColumnWidth(newIndex);
this.instance.unfreeze();
})
.then(() => {
this.fireEvent('onSwitchColumn',
this.getColumn(oldIndex), this.getColumn(newIndex)
);
});
}
setDimensions() {

15
src/datatable.js
View File

@ -11,7 +11,6 @@ import { getRowHTML } from './rowmanager';
import './style.scss';
const DEFAULT_OPTIONS = {
events: null,
data: {
columns: [],
rows: []
@ -43,6 +42,11 @@ const DEFAULT_OPTIONS = {
}
}
],
events: {
onRemoveColumn(column) {},
onSwitchColumn(column1, column2) {},
onSortColumn(column) {}
},
sortIndicator: {
asc: '↑',
desc: '↓',
@ -75,7 +79,10 @@ class DataTable {
DEFAULT_OPTIONS.headerDropdown
.concat(options.headerDropdown || []);
// custom user events
this.events = this.options.events;
this.events = Object.assign(
{}, DEFAULT_OPTIONS.events, options.events || {}
);
this.fireEvent = this.fireEvent.bind(this);
this.prepare();
@ -297,6 +304,10 @@ class DataTable {
});
}
fireEvent(eventName, ...args) {
this.events[eventName].apply(this, args);
}
log() {
if (this.options.enableLogs) {
console.log.apply(console, arguments);