Move column and Delete column working
This commit is contained in:
Faris Ansari
parent
877d6d0695
commit
608e133ff9
@ -27,6 +27,7 @@
|
||||
</section>
|
||||
|
||||
<script src="./node_modules/clusterize.js/clusterize.js"></script>
|
||||
<script src="./node_modules/sortablejs/Sortable.js"></script>
|
||||
<script src="./lib/frappe-datatable.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
(function webpackUniversalModuleDefinition(root, factory) {
|
||||
if(typeof exports === 'object' && typeof module === 'object')
|
||||
module.exports = factory();
|
||||
module.exports = factory(require("clusterize.js"), require("sortablejs"));
|
||||
else if(typeof define === 'function' && define.amd)
|
||||
define("DataTable", [], factory);
|
||||
define("DataTable", [, ], factory);
|
||||
else if(typeof exports === 'object')
|
||||
exports["DataTable"] = factory();
|
||||
exports["DataTable"] = factory(require("clusterize.js"), require("sortablejs"));
|
||||
else
|
||||
root["DataTable"] = factory();
|
||||
})(this, function() {
|
||||
root["DataTable"] = factory(root["Clusterize"], root["Sortable"]);
|
||||
})(this, function(__WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_10__) {
|
||||
return /******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
@ -136,6 +136,10 @@ $.on = function (element, event, selector, callback) {
|
||||
}
|
||||
};
|
||||
|
||||
$.off = function (element, event, handler) {
|
||||
element.removeEventListener(event, handler);
|
||||
};
|
||||
|
||||
$.bind = function (element, event, callback) {
|
||||
event.split(/\s+/).forEach(function (event) {
|
||||
element.addEventListener(event, callback);
|
||||
@ -508,7 +512,7 @@ exports.getEditCellHTML = getEditCellHTML;
|
||||
|
||||
var _utils = __webpack_require__(1);
|
||||
|
||||
var _keyboard = __webpack_require__(7);
|
||||
var _keyboard = __webpack_require__(8);
|
||||
|
||||
var _keyboard2 = _interopRequireDefault(_keyboard);
|
||||
|
||||
@ -1474,7 +1478,7 @@ var _datatable = __webpack_require__(5);
|
||||
|
||||
var _datatable2 = _interopRequireDefault(_datatable);
|
||||
|
||||
var _package = __webpack_require__(15);
|
||||
var _package = __webpack_require__(22);
|
||||
|
||||
var _package2 = _interopRequireDefault(_package);
|
||||
|
||||
@ -1504,7 +1508,11 @@ var _dom = __webpack_require__(0);
|
||||
|
||||
var _dom2 = _interopRequireDefault(_dom);
|
||||
|
||||
var _datamanager = __webpack_require__(6);
|
||||
var _clusterize = __webpack_require__(6);
|
||||
|
||||
var _clusterize2 = _interopRequireDefault(_clusterize);
|
||||
|
||||
var _datamanager = __webpack_require__(7);
|
||||
|
||||
var _datamanager2 = _interopRequireDefault(_datamanager);
|
||||
|
||||
@ -1512,7 +1520,7 @@ var _cellmanager = __webpack_require__(2);
|
||||
|
||||
var _cellmanager2 = _interopRequireDefault(_cellmanager);
|
||||
|
||||
var _columnmanager = __webpack_require__(8);
|
||||
var _columnmanager = __webpack_require__(9);
|
||||
|
||||
var _columnmanager2 = _interopRequireDefault(_columnmanager);
|
||||
|
||||
@ -1520,11 +1528,11 @@ var _rowmanager = __webpack_require__(3);
|
||||
|
||||
var _rowmanager2 = _interopRequireDefault(_rowmanager);
|
||||
|
||||
var _style = __webpack_require__(9);
|
||||
var _style = __webpack_require__(16);
|
||||
|
||||
var _style2 = _interopRequireDefault(_style);
|
||||
|
||||
__webpack_require__(10);
|
||||
__webpack_require__(17);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
@ -1656,7 +1664,7 @@ var DataTable = function () {
|
||||
var rows = this.datamanager.getRows(this.start, this.end);
|
||||
var initialData = this.getDataForClusterize(rows);
|
||||
|
||||
this.clusterize = new Clusterize({
|
||||
this.clusterize = new _clusterize2.default({
|
||||
rows: initialData,
|
||||
scrollElem: this.bodyScrollable,
|
||||
contentElem: (0, _dom2.default)('tbody', this.bodyScrollable),
|
||||
@ -1807,6 +1815,12 @@ function getBodyHTML(rows) {
|
||||
|
||||
/***/ }),
|
||||
/* 6 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = __WEBPACK_EXTERNAL_MODULE_6__;
|
||||
|
||||
/***/ }),
|
||||
/* 7 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@ -1816,8 +1830,6 @@ Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _utils = __webpack_require__(1);
|
||||
@ -1834,6 +1846,8 @@ var DataManager = function () {
|
||||
sortOrder: 'none' // asc, desc, none
|
||||
};
|
||||
this.sortRows = (0, _utils.promisify)(this.sortRows, this);
|
||||
this.switchColumn = (0, _utils.promisify)(this.switchColumn, this);
|
||||
this.removeColumn = (0, _utils.promisify)(this.removeColumn, this);
|
||||
}
|
||||
|
||||
_createClass(DataManager, [{
|
||||
@ -1885,19 +1899,11 @@ var DataManager = function () {
|
||||
this._checkboxColumnAdded = true;
|
||||
}
|
||||
|
||||
// wrap the title in span
|
||||
columns = columns.map(function (column) {
|
||||
if (typeof column === 'string') {
|
||||
column = '<span>' + column + '</span>';
|
||||
} else if ((typeof column === 'undefined' ? 'undefined' : _typeof(column)) === 'object') {
|
||||
column.content = '<span>' + column.content + '</span>';
|
||||
}
|
||||
|
||||
return column;
|
||||
});
|
||||
|
||||
return _prepareColumns(columns, {
|
||||
isHeader: 1
|
||||
isHeader: 1,
|
||||
format: function format(value) {
|
||||
return '<span class="column-title">' + value + '</span>';
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
@ -2008,6 +2014,53 @@ var DataManager = function () {
|
||||
array[right] = temporary;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'switchColumn',
|
||||
value: function switchColumn(index1, index2) {
|
||||
// update columns
|
||||
var temp = this.columns[index1];
|
||||
this.columns[index1] = this.columns[index2];
|
||||
this.columns[index2] = temp;
|
||||
|
||||
this.columns[index1].colIndex = index1;
|
||||
this.columns[index2].colIndex = index2;
|
||||
|
||||
// update rows
|
||||
this.rows = this.rows.map(function (row) {
|
||||
var newCell1 = Object.assign({}, row[index1], { colIndex: index2 });
|
||||
var newCell2 = Object.assign({}, row[index2], { colIndex: index1 });
|
||||
|
||||
var newRow = row.map(function (cell) {
|
||||
// make object copy
|
||||
return Object.assign({}, cell);
|
||||
});
|
||||
|
||||
newRow[index2] = newCell1;
|
||||
newRow[index1] = newCell2;
|
||||
|
||||
return newRow;
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'removeColumn',
|
||||
value: function removeColumn(index) {
|
||||
index = +index;
|
||||
var filter = function filter(cell) {
|
||||
return cell.colIndex !== index;
|
||||
};
|
||||
var map = function map(cell, i) {
|
||||
return Object.assign({}, cell, { colIndex: i });
|
||||
};
|
||||
// update columns
|
||||
this.columns = this.columns.filter(filter).map(map);
|
||||
|
||||
// update rows
|
||||
this.rows = this.rows.map(function (row) {
|
||||
var newRow = row.filter(filter).map(map);
|
||||
|
||||
return newRow;
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'getRowCount',
|
||||
value: function getRowCount() {
|
||||
@ -2131,7 +2184,7 @@ function prepareCell(col, i) {
|
||||
module.exports = exports['default'];
|
||||
|
||||
/***/ }),
|
||||
/* 7 */
|
||||
/* 8 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@ -2209,7 +2262,7 @@ exports.default = {
|
||||
module.exports = exports['default'];
|
||||
|
||||
/***/ }),
|
||||
/* 8 */
|
||||
/* 9 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@ -2225,6 +2278,10 @@ var _dom = __webpack_require__(0);
|
||||
|
||||
var _dom2 = _interopRequireDefault(_dom);
|
||||
|
||||
var _sortablejs = __webpack_require__(10);
|
||||
|
||||
var _sortablejs2 = _interopRequireDefault(_sortablejs);
|
||||
|
||||
var _rowmanager = __webpack_require__(3);
|
||||
|
||||
var _utils = __webpack_require__(1);
|
||||
@ -2251,15 +2308,43 @@ var ColumnManager = function () {
|
||||
_createClass(ColumnManager, [{
|
||||
key: 'renderHeader',
|
||||
value: function renderHeader() {
|
||||
this.header.innerHTML = '<thead></thead>';
|
||||
this.refreshHeader();
|
||||
}
|
||||
}, {
|
||||
key: 'refreshHeader',
|
||||
value: function refreshHeader() {
|
||||
var columns = this.datamanager.getColumns();
|
||||
|
||||
this.header.innerHTML = '\n <thead>\n ' + (0, _rowmanager.getRowHTML)(columns, { isHeader: 1 }) + '\n </thead>\n ';
|
||||
if (!(0, _dom2.default)('.data-table-col', this.header)) {
|
||||
// insert html
|
||||
(0, _dom2.default)('thead', this.header).innerHTML = (0, _rowmanager.getRowHTML)(columns, { isHeader: 1 });
|
||||
} else {
|
||||
|
||||
var $cols = _dom2.default.each('.data-table-col', this.header);
|
||||
|
||||
if (columns.length < $cols.length) {
|
||||
// deleted column
|
||||
(0, _dom2.default)('thead', this.header).innerHTML = (0, _rowmanager.getRowHTML)(columns, { isHeader: 1 });
|
||||
return;
|
||||
}
|
||||
|
||||
// update colIndex of each header cell
|
||||
$cols.map(function ($col, i) {
|
||||
_dom2.default.data($col, {
|
||||
colIndex: columns[i].colIndex
|
||||
});
|
||||
});
|
||||
}
|
||||
// reset columnMap
|
||||
this.$columnMap = [];
|
||||
}
|
||||
}, {
|
||||
key: 'bindEvents',
|
||||
value: function bindEvents() {
|
||||
this.bindResizeColumn();
|
||||
this.bindSortColumn();
|
||||
this.bindMoveColumn();
|
||||
}
|
||||
}, {
|
||||
key: 'bindResizeColumn',
|
||||
@ -2267,15 +2352,15 @@ var ColumnManager = function () {
|
||||
var _this = this;
|
||||
|
||||
var isDragging = false;
|
||||
var $currCell = void 0,
|
||||
var $resizingCell = void 0,
|
||||
startWidth = void 0,
|
||||
startX = void 0;
|
||||
|
||||
_dom2.default.on(this.header, 'mousedown', '.data-table-col .column-resizer', function (e, $handle) {
|
||||
var $cell = $handle.parentNode.parentNode;
|
||||
$currCell = $cell;
|
||||
$resizingCell = $cell;
|
||||
|
||||
var _$$data = _dom2.default.data($currCell),
|
||||
var _$$data = _dom2.default.data($resizingCell),
|
||||
colIndex = _$$data.colIndex;
|
||||
|
||||
var col = _this.getColumn(colIndex);
|
||||
@ -2285,29 +2370,29 @@ var ColumnManager = function () {
|
||||
}
|
||||
|
||||
isDragging = true;
|
||||
startWidth = _dom2.default.style((0, _dom2.default)('.content', $currCell), 'width');
|
||||
startWidth = _dom2.default.style((0, _dom2.default)('.content', $resizingCell), 'width');
|
||||
startX = e.pageX;
|
||||
});
|
||||
|
||||
_dom2.default.on(document.body, 'mouseup', function (e) {
|
||||
if (!$currCell) return;
|
||||
if (!$resizingCell) return;
|
||||
isDragging = false;
|
||||
|
||||
var _$$data2 = _dom2.default.data($currCell),
|
||||
var _$$data2 = _dom2.default.data($resizingCell),
|
||||
colIndex = _$$data2.colIndex;
|
||||
|
||||
var width = _dom2.default.style((0, _dom2.default)('.content', $currCell), 'width');
|
||||
var width = _dom2.default.style((0, _dom2.default)('.content', $resizingCell), 'width');
|
||||
|
||||
_this.setColumnWidth(colIndex, width);
|
||||
_this.instance.setBodyWidth();
|
||||
$currCell = null;
|
||||
$resizingCell = null;
|
||||
});
|
||||
|
||||
_dom2.default.on(document.body, 'mousemove', function (e) {
|
||||
if (!isDragging) return;
|
||||
var finalWidth = startWidth + (e.pageX - startX);
|
||||
|
||||
var _$$data3 = _dom2.default.data($currCell),
|
||||
var _$$data3 = _dom2.default.data($resizingCell),
|
||||
colIndex = _$$data3.colIndex;
|
||||
|
||||
if (_this.getColumnMinWidth(colIndex) > finalWidth) {
|
||||
@ -2319,27 +2404,98 @@ var ColumnManager = function () {
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'bindSortColumn',
|
||||
value: function bindSortColumn() {
|
||||
key: 'bindMoveColumn',
|
||||
value: function bindMoveColumn() {
|
||||
var _this2 = this;
|
||||
|
||||
_dom2.default.on(this.header, 'click', '.data-table-col .content span:first-child', function (e, span) {
|
||||
var initialized = void 0;
|
||||
|
||||
var initialize = function initialize() {
|
||||
if (initialized) {
|
||||
_dom2.default.off(document.body, 'mousemove', initialize);
|
||||
return;
|
||||
}
|
||||
var ready = (0, _dom2.default)('.data-table-col', _this2.header);
|
||||
if (!ready) return;
|
||||
|
||||
var $parent = (0, _dom2.default)('.data-table-row', _this2.header);
|
||||
|
||||
_dom2.default.on(document, 'drag', '.data-table-col', (0, _utils.throttle)(function (e, $target) {
|
||||
if (e.offsetY > 200) {
|
||||
$target.classList.add('remove-column');
|
||||
} else {
|
||||
setTimeout(function () {
|
||||
$target.classList.remove('remove-column');
|
||||
}, 10);
|
||||
}
|
||||
}));
|
||||
|
||||
_this2.sortable = _sortablejs2.default.create($parent, {
|
||||
onEnd: function onEnd(e) {
|
||||
var oldIndex = e.oldIndex,
|
||||
newIndex = e.newIndex;
|
||||
|
||||
var $draggedCell = e.item;
|
||||
|
||||
var _$$data4 = _dom2.default.data($draggedCell),
|
||||
colIndex = _$$data4.colIndex;
|
||||
|
||||
// debugger;
|
||||
|
||||
if ($draggedCell.classList.contains('remove-column')) {
|
||||
_this2.instance.freeze();
|
||||
_this2.datamanager.removeColumn(colIndex).then(function () {
|
||||
_this2.refreshHeader();
|
||||
return _this2.rowmanager.refreshRows();
|
||||
}).then(function () {
|
||||
return _this2.instance.unfreeze();
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (+colIndex === newIndex) return;
|
||||
|
||||
_this2.instance.freeze();
|
||||
_this2.datamanager.switchColumn(oldIndex, newIndex).then(function () {
|
||||
_this2.refreshHeader();
|
||||
return _this2.rowmanager.refreshRows();
|
||||
}).then(function () {
|
||||
_this2.setColumnWidth(oldIndex);
|
||||
_this2.setColumnWidth(newIndex);
|
||||
}).then(function () {
|
||||
return _this2.instance.unfreeze();
|
||||
});
|
||||
},
|
||||
preventOnFilter: false,
|
||||
filter: '.column-resizer, .sort-indicator',
|
||||
animation: 150
|
||||
});
|
||||
};
|
||||
|
||||
_dom2.default.on(document.body, 'mousemove', initialize);
|
||||
}
|
||||
}, {
|
||||
key: 'bindSortColumn',
|
||||
value: function bindSortColumn() {
|
||||
var _this3 = this;
|
||||
|
||||
_dom2.default.on(this.header, 'click', '.data-table-col .column-title', function (e, span) {
|
||||
var $cell = span.closest('.data-table-col');
|
||||
|
||||
var _$$data4 = _dom2.default.data($cell),
|
||||
colIndex = _$$data4.colIndex,
|
||||
sortOrder = _$$data4.sortOrder;
|
||||
var _$$data5 = _dom2.default.data($cell),
|
||||
colIndex = _$$data5.colIndex,
|
||||
sortOrder = _$$data5.sortOrder;
|
||||
|
||||
sortOrder = (0, _utils.getDefault)(sortOrder, 'none');
|
||||
var col = _this2.getColumn(colIndex);
|
||||
var col = _this3.getColumn(colIndex);
|
||||
|
||||
if (col && col.sortable === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
// reset sort indicator
|
||||
(0, _dom2.default)('.sort-indicator', _this2.header).textContent = '';
|
||||
_dom2.default.each('.data-table-col', _this2.header).map(function ($cell) {
|
||||
(0, _dom2.default)('.sort-indicator', _this3.header).textContent = '';
|
||||
_dom2.default.each('.data-table-col', _this3.header).map(function ($cell) {
|
||||
_dom2.default.data($cell, {
|
||||
sortOrder: 'none'
|
||||
});
|
||||
@ -2363,14 +2519,14 @@ var ColumnManager = function () {
|
||||
});
|
||||
(0, _dom2.default)('.sort-indicator', $cell).textContent = textContent;
|
||||
|
||||
if (_this2.events && _this2.events.onSort) {
|
||||
_this2.events.onSort(colIndex, nextSortOrder);
|
||||
if (_this3.events && _this3.events.onSort) {
|
||||
_this3.events.onSort(colIndex, nextSortOrder);
|
||||
} else {
|
||||
_this2.instance.freeze();
|
||||
_this2.sortRows(colIndex, nextSortOrder).then(function () {
|
||||
return _this2.rowmanager.refreshRows();
|
||||
_this3.instance.freeze();
|
||||
_this3.sortRows(colIndex, nextSortOrder).then(function () {
|
||||
return _this3.rowmanager.refreshRows();
|
||||
}).then(function () {
|
||||
return _this2.instance.unfreeze();
|
||||
return _this3.instance.unfreeze();
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -2415,7 +2571,7 @@ var ColumnManager = function () {
|
||||
}, {
|
||||
key: 'setupMinWidth',
|
||||
value: function setupMinWidth() {
|
||||
var _this3 = this;
|
||||
var _this4 = this;
|
||||
|
||||
// cache minWidth for each column
|
||||
this.minWidthMap = (0, _utils.getDefault)(this.minWidthMap, []);
|
||||
@ -2423,19 +2579,19 @@ var ColumnManager = function () {
|
||||
_dom2.default.each('.data-table-col', this.header).map(function (col) {
|
||||
var width = _dom2.default.style((0, _dom2.default)('.content', col), 'width');
|
||||
|
||||
var _$$data5 = _dom2.default.data(col),
|
||||
colIndex = _$$data5.colIndex;
|
||||
var _$$data6 = _dom2.default.data(col),
|
||||
colIndex = _$$data6.colIndex;
|
||||
|
||||
if (!_this3.minWidthMap[colIndex]) {
|
||||
if (!_this4.minWidthMap[colIndex]) {
|
||||
// only set this once
|
||||
_this3.minWidthMap[colIndex] = width;
|
||||
_this4.minWidthMap[colIndex] = width;
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'setNaturalColumnWidth',
|
||||
value: function setNaturalColumnWidth() {
|
||||
var _this4 = this;
|
||||
var _this5 = 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) {
|
||||
@ -2443,22 +2599,22 @@ var ColumnManager = function () {
|
||||
var width = _dom2.default.style((0, _dom2.default)('.content', $cell), 'width');
|
||||
var height = _dom2.default.style((0, _dom2.default)('.content', $cell), 'height');
|
||||
|
||||
var _$$data6 = _dom2.default.data($cell),
|
||||
colIndex = _$$data6.colIndex;
|
||||
var _$$data7 = _dom2.default.data($cell),
|
||||
colIndex = _$$data7.colIndex;
|
||||
|
||||
var minWidth = _this4.getColumnMinWidth(colIndex);
|
||||
var minWidth = _this5.getColumnMinWidth(colIndex);
|
||||
|
||||
if (width < minWidth) {
|
||||
width = minWidth;
|
||||
}
|
||||
_this4.setColumnWidth(colIndex, width);
|
||||
_this4.setDefaultCellHeight(height);
|
||||
_this5.setColumnWidth(colIndex, width);
|
||||
_this5.setDefaultCellHeight(height);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'distributeRemainingWidth',
|
||||
value: function distributeRemainingWidth() {
|
||||
var _this5 = this;
|
||||
var _this6 = this;
|
||||
|
||||
if (!this.options.takeAvailableSpace) return;
|
||||
|
||||
@ -2477,11 +2633,11 @@ var ColumnManager = function () {
|
||||
var deltaWidth = (wrapperWidth - headerWidth) / resizableColumns.length;
|
||||
|
||||
resizableColumns.map(function (col) {
|
||||
var width = _dom2.default.style(_this5.getColumnHeaderElement(col.colIndex), 'width');
|
||||
var width = _dom2.default.style(_this6.getColumnHeaderElement(col.colIndex), 'width');
|
||||
var finalWidth = Math.min(width + deltaWidth) - 2;
|
||||
|
||||
_this5.setColumnHeaderWidth(col.colIndex, finalWidth);
|
||||
_this5.setColumnWidth(col.colIndex, finalWidth);
|
||||
_this6.setColumnHeaderWidth(col.colIndex, finalWidth);
|
||||
_this6.setColumnWidth(col.colIndex, finalWidth);
|
||||
});
|
||||
this.instance.setBodyWidth();
|
||||
}
|
||||
@ -2495,12 +2651,12 @@ var ColumnManager = function () {
|
||||
}, {
|
||||
key: 'setColumnAlignments',
|
||||
value: function setColumnAlignments() {
|
||||
var _this6 = this;
|
||||
var _this7 = this;
|
||||
|
||||
// align columns
|
||||
this.getColumns().map(function (column) {
|
||||
if (['left', 'center', 'right'].includes(column.align)) {
|
||||
_this6.style.setStyle('.data-table [data-col-index="' + column.colIndex + '"]', {
|
||||
_this7.style.setStyle('[data-col-index="' + column.colIndex + '"]', {
|
||||
'text-align': column.align
|
||||
});
|
||||
}
|
||||
@ -2526,6 +2682,11 @@ var ColumnManager = function () {
|
||||
value: function setColumnWidth(colIndex, width) {
|
||||
this._columnWidthMap = this._columnWidthMap || [];
|
||||
|
||||
if (!width) {
|
||||
var $headerContent = (0, _dom2.default)('.data-table-col[data-col-index="' + colIndex + '"] .content', this.header);
|
||||
width = _dom2.default.style($headerContent, 'width');
|
||||
}
|
||||
|
||||
var index = this._columnWidthMap[colIndex];
|
||||
var selector = '[data-col-index="' + colIndex + '"] .content, [data-col-index="' + colIndex + '"] .edit-cell';
|
||||
var styles = {
|
||||
@ -2568,6 +2729,11 @@ var ColumnManager = function () {
|
||||
|
||||
return 0;
|
||||
}
|
||||
}, {
|
||||
key: 'getHeaderCell$',
|
||||
value: function getHeaderCell$(colIndex) {
|
||||
return (0, _dom2.default)('.data-table-col[data-col-index="' + colIndex + '"]', this.header);
|
||||
}
|
||||
}, {
|
||||
key: 'getLastColumnIndex',
|
||||
value: function getLastColumnIndex() {
|
||||
@ -2598,7 +2764,18 @@ exports.default = ColumnManager;
|
||||
module.exports = exports['default'];
|
||||
|
||||
/***/ }),
|
||||
/* 9 */
|
||||
/* 10 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
|
||||
|
||||
/***/ }),
|
||||
/* 11 */,
|
||||
/* 12 */,
|
||||
/* 13 */,
|
||||
/* 14 */,
|
||||
/* 15 */,
|
||||
/* 16 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@ -2664,13 +2841,13 @@ exports.default = Style;
|
||||
module.exports = exports['default'];
|
||||
|
||||
/***/ }),
|
||||
/* 10 */
|
||||
/* 17 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
// style-loader: Adds some css to the DOM by adding a <style> tag
|
||||
|
||||
// load the styles
|
||||
var content = __webpack_require__(11);
|
||||
var content = __webpack_require__(18);
|
||||
if(typeof content === 'string') content = [[module.i, content, '']];
|
||||
// Prepare cssTransformation
|
||||
var transform;
|
||||
@ -2678,7 +2855,7 @@ var transform;
|
||||
var options = {}
|
||||
options.transform = transform
|
||||
// add the styles to the DOM
|
||||
var update = __webpack_require__(13)(content, options);
|
||||
var update = __webpack_require__(20)(content, options);
|
||||
if(content.locals) module.exports = content.locals;
|
||||
// Hot Module Replacement
|
||||
if(false) {
|
||||
@ -2695,21 +2872,21 @@ if(false) {
|
||||
}
|
||||
|
||||
/***/ }),
|
||||
/* 11 */
|
||||
/* 18 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
exports = module.exports = __webpack_require__(12)(undefined);
|
||||
exports = module.exports = __webpack_require__(19)(undefined);
|
||||
// imports
|
||||
|
||||
|
||||
// module
|
||||
exports.push([module.i, "/* variables */\n.data-table {\n --border-color: #d1d8dd;\n --primary-color: #5292f7;\n --light-bg: #f5f7fa; }\n\n/* resets */\n*, *::after, *::before {\n box-sizing: border-box; }\n\nbutton, input {\n overflow: visible;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0; }\n\n/* styling */\n.data-table * {\n outline: none; }\n\n.data-table {\n width: 100%;\n position: relative;\n overflow: auto; }\n .data-table table {\n border-collapse: collapse; }\n .data-table table td {\n padding: 0;\n border: 1px solid var(--border-color); }\n .data-table thead td {\n border-bottom-width: 2px; }\n .data-table .freeze-container {\n display: flex;\n justify-content: center;\n align-content: center;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background-color: var(--light-bg);\n opacity: 0.5;\n font-size: 2em; }\n .data-table .freeze-container span {\n position: absolute;\n top: 50%;\n transform: translateY(-50%); }\n\n.body-scrollable {\n max-height: 500px;\n overflow: auto;\n border-bottom: 1px solid var(--border-color); }\n .body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {\n background-color: var(--light-bg); }\n\n.data-table-header {\n position: absolute;\n top: 0;\n left: 0;\n background-color: white;\n font-weight: bold; }\n .data-table-header .content span:not(.column-resizer) {\n cursor: pointer; }\n .data-table-header .sort-indicator {\n position: absolute;\n right: 8px;\n top: 9px; }\n .data-table-header .column-resizer {\n display: none;\n position: absolute;\n right: 0;\n top: 0;\n width: 4px;\n height: 100%;\n background-color: var(--primary-color);\n cursor: col-resize; }\n\n.data-table-col {\n position: relative; }\n .data-table-col .content {\n padding: 8px;\n border: 2px solid transparent; }\n .data-table-col .content.ellipsis {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; }\n .data-table-col .edit-cell {\n display: none;\n padding: 8px;\n background: #fff;\n z-index: 1;\n height: 100%; }\n .data-table-col .edit-cell input {\n outline: none;\n width: 100%;\n border: none;\n height: 1em; }\n .data-table-col.selected .content {\n border: 2px solid var(--primary-color); }\n .data-table-col.editing .content {\n display: none; }\n .data-table-col.editing .edit-cell {\n border: 2px solid var(--primary-color);\n display: block; }\n .data-table-col.highlight {\n background-color: var(--light-bg); }\n .data-table-col:hover .column-resizer {\n display: inline-block; }\n\n.data-table-row.row-highlight {\n background-color: var(--light-bg); }\n\n.noselect {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n", ""]);
|
||||
exports.push([module.i, "/* variables */\n.data-table {\n --border-color: #d1d8dd;\n --primary-color: #5292f7;\n --light-bg: #f5f7fa;\n --light-red: #FD8B8B; }\n\n/* resets */\n*, *::after, *::before {\n box-sizing: border-box; }\n\nbutton, input {\n overflow: visible;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0; }\n\n/* styling */\n.data-table * {\n outline: none; }\n\n.data-table {\n width: 100%;\n position: relative;\n overflow: auto; }\n .data-table table {\n border-collapse: collapse; }\n .data-table table td {\n padding: 0;\n border: 1px solid var(--border-color); }\n .data-table thead td {\n border-bottom-width: 2px; }\n .data-table .freeze-container {\n display: flex;\n justify-content: center;\n align-content: center;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background-color: var(--light-bg);\n opacity: 0.5;\n font-size: 2em; }\n .data-table .freeze-container span {\n position: absolute;\n top: 50%;\n transform: translateY(-50%); }\n .data-table .trash-container {\n position: absolute;\n bottom: 0;\n left: 30%;\n right: 30%;\n height: 70px;\n background: palevioletred;\n opacity: 0.5; }\n\n.body-scrollable {\n max-height: 500px;\n overflow: auto;\n border-bottom: 1px solid var(--border-color); }\n .body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {\n background-color: var(--light-bg); }\n\n.data-table-header {\n position: absolute;\n top: 0;\n left: 0;\n background-color: white;\n font-weight: bold; }\n .data-table-header .content span:not(.column-resizer) {\n cursor: pointer; }\n .data-table-header .sort-indicator {\n position: absolute;\n right: 8px;\n top: 9px; }\n .data-table-header .column-resizer {\n display: none;\n position: absolute;\n right: 0;\n top: 0;\n width: 4px;\n height: 100%;\n background-color: var(--primary-color);\n cursor: col-resize; }\n .data-table-header .data-table-col.remove-column {\n background-color: var(--light-red);\n transition: 300ms background-color ease-in-out; }\n\n.data-table-col {\n position: relative; }\n .data-table-col .content {\n padding: 8px;\n border: 2px solid transparent; }\n .data-table-col .content.ellipsis {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; }\n .data-table-col .edit-cell {\n display: none;\n padding: 8px;\n background: #fff;\n z-index: 1;\n height: 100%; }\n .data-table-col .edit-cell input {\n outline: none;\n width: 100%;\n border: none;\n height: 1em; }\n .data-table-col.selected .content {\n border: 2px solid var(--primary-color); }\n .data-table-col.editing .content {\n display: none; }\n .data-table-col.editing .edit-cell {\n border: 2px solid var(--primary-color);\n display: block; }\n .data-table-col.highlight {\n background-color: var(--light-bg); }\n .data-table-col:hover .column-resizer {\n display: inline-block; }\n\n.data-table-row.row-highlight {\n background-color: var(--light-bg); }\n\n.noselect {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n", ""]);
|
||||
|
||||
// exports
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 12 */
|
||||
/* 19 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/*
|
||||
@ -2791,7 +2968,7 @@ function toComment(sourceMap) {
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 13 */
|
||||
/* 20 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
/*
|
||||
@ -2837,7 +3014,7 @@ var singleton = null;
|
||||
var singletonCounter = 0;
|
||||
var stylesInsertedAtTop = [];
|
||||
|
||||
var fixUrls = __webpack_require__(14);
|
||||
var fixUrls = __webpack_require__(21);
|
||||
|
||||
module.exports = function(list, options) {
|
||||
if (typeof DEBUG !== "undefined" && DEBUG) {
|
||||
@ -3150,7 +3327,7 @@ function updateLink (link, options, obj) {
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 14 */
|
||||
/* 21 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
|
||||
@ -3245,10 +3422,10 @@ module.exports = function (css) {
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 15 */
|
||||
/* 22 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = {"name":"frappe-datatable","version":"0.0.1","description":"A modern datatable library for the web","main":"lib/frappe-datatable.js","scripts":{"build":"webpack --env build","dev":"webpack --progress --colors --watch --env dev","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"},"devDependencies":{"babel-cli":"6.24.1","babel-core":"6.24.1","babel-eslint":"7.2.3","babel-loader":"7.0.0","babel-plugin-add-module-exports":"0.2.1","babel-preset-env":"^1.6.1","chai":"3.5.0","css-loader":"^0.28.7","eslint":"3.19.0","eslint-loader":"1.7.1","mocha":"3.3.0","node-sass":"^4.5.3","sass-loader":"^6.0.6","style-loader":"^0.18.2","webpack":"^3.1.0","yargs":"7.1.0"},"repository":{"type":"git","url":"https://github.com/frappe/datatable.git"},"keywords":["webpack","es6","starter","library","universal","umd","commonjs"],"author":"Faris Ansari","license":"MIT","bugs":{"url":"https://github.com/frappe/datatable/issues"},"homepage":"https://frappe.github.io/datatable","dependencies":{"clusterize.js":"^0.18.0"}}
|
||||
module.exports = {"name":"frappe-datatable","version":"0.0.1","description":"A modern datatable library for the web","main":"lib/frappe-datatable.js","scripts":{"build":"webpack --env build","dev":"webpack --progress --colors --watch --env dev","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"},"devDependencies":{"babel-cli":"6.24.1","babel-core":"6.24.1","babel-eslint":"7.2.3","babel-loader":"7.0.0","babel-plugin-add-module-exports":"0.2.1","babel-preset-env":"^1.6.1","chai":"3.5.0","css-loader":"^0.28.7","eslint":"3.19.0","eslint-loader":"1.7.1","mocha":"3.3.0","node-sass":"^4.5.3","sass-loader":"^6.0.6","style-loader":"^0.18.2","webpack":"^3.1.0","yargs":"7.1.0"},"repository":{"type":"git","url":"https://github.com/frappe/datatable.git"},"keywords":["webpack","es6","starter","library","universal","umd","commonjs"],"author":"Faris Ansari","license":"MIT","bugs":{"url":"https://github.com/frappe/datatable/issues"},"homepage":"https://frappe.github.io/datatable","dependencies":{"clusterize.js":"^0.18.0","sortablejs":"^1.7.0"}}
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
|
||||
File diff suppressed because one or more lines are too long
0
npm-debug.log.2785168889
Normal file
0
npm-debug.log.2785168889
Normal file
0
npm-debug.log.3534540083
Normal file
0
npm-debug.log.3534540083
Normal file
@ -47,6 +47,7 @@
|
||||
},
|
||||
"homepage": "https://frappe.github.io/datatable",
|
||||
"dependencies": {
|
||||
"clusterize.js": "^0.18.0"
|
||||
"clusterize.js": "^0.18.0",
|
||||
"sortablejs": "^1.7.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import $ from './dom';
|
||||
import Sortable from 'sortablejs';
|
||||
import { getRowHTML } from './rowmanager';
|
||||
import { getDefault } from './utils';
|
||||
import { getDefault, throttle } from './utils';
|
||||
|
||||
export default class ColumnManager {
|
||||
constructor(instance) {
|
||||
@ -16,28 +17,51 @@ export default class ColumnManager {
|
||||
}
|
||||
|
||||
renderHeader() {
|
||||
this.header.innerHTML = '<thead></thead>';
|
||||
this.refreshHeader();
|
||||
}
|
||||
|
||||
refreshHeader() {
|
||||
const columns = this.datamanager.getColumns();
|
||||
|
||||
this.header.innerHTML = `
|
||||
<thead>
|
||||
${getRowHTML(columns, { isHeader: 1 })}
|
||||
</thead>
|
||||
`;
|
||||
if (!$('.data-table-col', this.header)) {
|
||||
// insert html
|
||||
$('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 });
|
||||
} else {
|
||||
|
||||
const $cols = $.each('.data-table-col', this.header);
|
||||
|
||||
if (columns.length < $cols.length) {
|
||||
// deleted column
|
||||
$('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 });
|
||||
return;
|
||||
}
|
||||
|
||||
// update colIndex of each header cell
|
||||
$cols.map(($col, i) => {
|
||||
$.data($col, {
|
||||
colIndex: columns[i].colIndex
|
||||
});
|
||||
});
|
||||
}
|
||||
// reset columnMap
|
||||
this.$columnMap = [];
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
this.bindResizeColumn();
|
||||
this.bindSortColumn();
|
||||
this.bindMoveColumn();
|
||||
}
|
||||
|
||||
bindResizeColumn() {
|
||||
let isDragging = false;
|
||||
let $currCell, startWidth, startX;
|
||||
let $resizingCell, startWidth, startX;
|
||||
|
||||
$.on(this.header, 'mousedown', '.data-table-col .column-resizer', (e, $handle) => {
|
||||
const $cell = $handle.parentNode.parentNode;
|
||||
$currCell = $cell;
|
||||
const { colIndex } = $.data($currCell);
|
||||
$resizingCell = $cell;
|
||||
const { colIndex } = $.data($resizingCell);
|
||||
const col = this.getColumn(colIndex);
|
||||
|
||||
if (col && col.resizable === false) {
|
||||
@ -45,26 +69,26 @@ export default class ColumnManager {
|
||||
}
|
||||
|
||||
isDragging = true;
|
||||
startWidth = $.style($('.content', $currCell), 'width');
|
||||
startWidth = $.style($('.content', $resizingCell), 'width');
|
||||
startX = e.pageX;
|
||||
});
|
||||
|
||||
$.on(document.body, 'mouseup', (e) => {
|
||||
if (!$currCell) return;
|
||||
if (!$resizingCell) return;
|
||||
isDragging = false;
|
||||
|
||||
const { colIndex } = $.data($currCell);
|
||||
const width = $.style($('.content', $currCell), 'width');
|
||||
const { colIndex } = $.data($resizingCell);
|
||||
const width = $.style($('.content', $resizingCell), 'width');
|
||||
|
||||
this.setColumnWidth(colIndex, width);
|
||||
this.instance.setBodyWidth();
|
||||
$currCell = null;
|
||||
$resizingCell = null;
|
||||
});
|
||||
|
||||
$.on(document.body, 'mousemove', (e) => {
|
||||
if (!isDragging) return;
|
||||
const finalWidth = startWidth + (e.pageX - startX);
|
||||
const { colIndex } = $.data($currCell);
|
||||
const { colIndex } = $.data($resizingCell);
|
||||
|
||||
if (this.getColumnMinWidth(colIndex) > finalWidth) {
|
||||
// don't resize past minWidth
|
||||
@ -75,9 +99,74 @@ export default class ColumnManager {
|
||||
});
|
||||
}
|
||||
|
||||
bindMoveColumn() {
|
||||
let initialized;
|
||||
|
||||
const initialize = () => {
|
||||
if (initialized) {
|
||||
$.off(document.body, 'mousemove', initialize);
|
||||
return;
|
||||
}
|
||||
const ready = $('.data-table-col', this.header);
|
||||
if (!ready) return;
|
||||
|
||||
const $parent = $('.data-table-row', this.header);
|
||||
|
||||
$.on(document, 'drag', '.data-table-col', throttle((e, $target) => {
|
||||
if (e.offsetY > 200) {
|
||||
$target.classList.add('remove-column');
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
$target.classList.remove('remove-column');
|
||||
}, 10);
|
||||
}
|
||||
}));
|
||||
|
||||
this.sortable = Sortable.create($parent, {
|
||||
onEnd: (e) => {
|
||||
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());
|
||||
},
|
||||
preventOnFilter: false,
|
||||
filter: '.column-resizer, .sort-indicator',
|
||||
animation: 150
|
||||
});
|
||||
};
|
||||
|
||||
$.on(document.body, 'mousemove', initialize);
|
||||
}
|
||||
|
||||
bindSortColumn() {
|
||||
|
||||
$.on(this.header, 'click', '.data-table-col .content span:first-child', (e, span) => {
|
||||
$.on(this.header, 'click', '.data-table-col .column-title', (e, span) => {
|
||||
const $cell = span.closest('.data-table-col');
|
||||
let { colIndex, sortOrder } = $.data($cell);
|
||||
sortOrder = getDefault(sortOrder, 'none');
|
||||
@ -226,7 +315,7 @@ export default class ColumnManager {
|
||||
this.getColumns()
|
||||
.map(column => {
|
||||
if (['left', 'center', 'right'].includes(column.align)) {
|
||||
this.style.setStyle(`.data-table [data-col-index="${column.colIndex}"]`, {
|
||||
this.style.setStyle(`[data-col-index="${column.colIndex}"]`, {
|
||||
'text-align': column.align
|
||||
});
|
||||
}
|
||||
@ -248,6 +337,11 @@ export default class ColumnManager {
|
||||
setColumnWidth(colIndex, width) {
|
||||
this._columnWidthMap = this._columnWidthMap || [];
|
||||
|
||||
if (!width) {
|
||||
const $headerContent = $(`.data-table-col[data-col-index="${colIndex}"] .content`, this.header);
|
||||
width = $.style($headerContent, 'width');
|
||||
}
|
||||
|
||||
let index = this._columnWidthMap[colIndex];
|
||||
const selector = `[data-col-index="${colIndex}"] .content, [data-col-index="${colIndex}"] .edit-cell`;
|
||||
const styles = {
|
||||
@ -288,6 +382,10 @@ export default class ColumnManager {
|
||||
return 0;
|
||||
}
|
||||
|
||||
getHeaderCell$(colIndex) {
|
||||
return $(`.data-table-col[data-col-index="${colIndex}"]`, this.header);
|
||||
}
|
||||
|
||||
getLastColumnIndex() {
|
||||
return this.datamanager.getColumnCount() - 1;
|
||||
}
|
||||
|
||||
@ -8,6 +8,8 @@ export default class DataManager {
|
||||
sortOrder: 'none' // asc, desc, none
|
||||
};
|
||||
this.sortRows = promisify(this.sortRows, this);
|
||||
this.switchColumn = promisify(this.switchColumn, this);
|
||||
this.removeColumn = promisify(this.removeColumn, this);
|
||||
}
|
||||
|
||||
init(data) {
|
||||
@ -54,19 +56,9 @@ export default class DataManager {
|
||||
this._checkboxColumnAdded = true;
|
||||
}
|
||||
|
||||
// wrap the title in span
|
||||
columns = columns.map(column => {
|
||||
if (typeof column === 'string') {
|
||||
column = `<span>${column}</span>`;
|
||||
} else if (typeof column === 'object') {
|
||||
column.content = `<span>${column.content}</span>`;
|
||||
}
|
||||
|
||||
return column;
|
||||
});
|
||||
|
||||
return prepareColumns(columns, {
|
||||
isHeader: 1
|
||||
isHeader: 1,
|
||||
format: value => `<span class="column-title">${value}</span>`
|
||||
});
|
||||
}
|
||||
|
||||
@ -172,6 +164,51 @@ export default class DataManager {
|
||||
}
|
||||
}
|
||||
|
||||
switchColumn(index1, index2) {
|
||||
// update columns
|
||||
const temp = this.columns[index1];
|
||||
this.columns[index1] = this.columns[index2];
|
||||
this.columns[index2] = temp;
|
||||
|
||||
this.columns[index1].colIndex = index1;
|
||||
this.columns[index2].colIndex = index2;
|
||||
|
||||
// update rows
|
||||
this.rows = this.rows.map(row => {
|
||||
const newCell1 = Object.assign({}, row[index1], { colIndex: index2 });
|
||||
const newCell2 = Object.assign({}, row[index2], { colIndex: index1 });
|
||||
|
||||
let newRow = row.map(cell => {
|
||||
// make object copy
|
||||
return Object.assign({}, cell);
|
||||
});
|
||||
|
||||
newRow[index2] = newCell1;
|
||||
newRow[index1] = newCell2;
|
||||
|
||||
return newRow;
|
||||
});
|
||||
}
|
||||
|
||||
removeColumn(index) {
|
||||
index = +index;
|
||||
const filter = cell => cell.colIndex !== index;
|
||||
const map = (cell, i) => Object.assign({}, cell, { colIndex: i });
|
||||
// update columns
|
||||
this.columns = this.columns
|
||||
.filter(filter)
|
||||
.map(map);
|
||||
|
||||
// update rows
|
||||
this.rows = this.rows.map(row => {
|
||||
const newRow = row
|
||||
.filter(filter)
|
||||
.map(map);
|
||||
|
||||
return newRow;
|
||||
});
|
||||
}
|
||||
|
||||
getRowCount() {
|
||||
return this.rowCount;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import $ from './dom';
|
||||
|
||||
import Clusterize from 'clusterize.js';
|
||||
import DataManager from './datamanager';
|
||||
import CellManager from './cellmanager';
|
||||
import ColumnManager from './columnmanager';
|
||||
|
||||
38
src/dom.js
38
src/dom.js
@ -20,23 +20,23 @@ $.create = (tag, o) => {
|
||||
if (i === 'inside') {
|
||||
$(val).appendChild(element);
|
||||
} else
|
||||
if (i === 'around') {
|
||||
let ref = $(val);
|
||||
ref.parentNode.insertBefore(element, ref);
|
||||
element.appendChild(ref);
|
||||
} else
|
||||
if (i === 'styles') {
|
||||
if (typeof val === 'object') {
|
||||
Object.keys(val).map(prop => {
|
||||
element.style[prop] = val[prop];
|
||||
});
|
||||
}
|
||||
} else
|
||||
if (i in element) {
|
||||
element[i] = val;
|
||||
} else {
|
||||
element.setAttribute(i, val);
|
||||
}
|
||||
if (i === 'around') {
|
||||
let ref = $(val);
|
||||
ref.parentNode.insertBefore(element, ref);
|
||||
element.appendChild(ref);
|
||||
} else
|
||||
if (i === 'styles') {
|
||||
if (typeof val === 'object') {
|
||||
Object.keys(val).map(prop => {
|
||||
element.style[prop] = val[prop];
|
||||
});
|
||||
}
|
||||
} else
|
||||
if (i in element) {
|
||||
element[i] = val;
|
||||
} else {
|
||||
element.setAttribute(i, val);
|
||||
}
|
||||
}
|
||||
|
||||
return element;
|
||||
@ -51,6 +51,10 @@ $.on = (element, event, selector, callback) => {
|
||||
}
|
||||
};
|
||||
|
||||
$.off = (element, event, handler) => {
|
||||
element.removeEventListener(event, handler);
|
||||
};
|
||||
|
||||
$.bind = (element, event, callback) => {
|
||||
event.split(/\s+/).forEach(function (event) {
|
||||
element.addEventListener(event, callback);
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
--border-color: #d1d8dd;
|
||||
--primary-color: rgb(82, 146, 247);
|
||||
--light-bg: #f5f7fa;
|
||||
--light-red: #FD8B8B;
|
||||
}
|
||||
|
||||
/* resets */
|
||||
@ -62,6 +63,16 @@ button, input {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.trash-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 30%;
|
||||
right: 30%;
|
||||
height: 70px;
|
||||
background: palevioletred;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.body-scrollable {
|
||||
@ -101,6 +112,11 @@ button, input {
|
||||
background-color: var(--primary-color);
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.data-table-col.remove-column {
|
||||
background-color: var(--light-red);
|
||||
transition: 300ms background-color ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.data-table-col {
|
||||
|
||||
@ -56,7 +56,16 @@ const config = {
|
||||
},
|
||||
plugins: plugins,
|
||||
externals: {
|
||||
jquery: 'jQuery'
|
||||
'clusterize.js': {
|
||||
commonjs: 'clusterize.js',
|
||||
commonjs2: 'clusterize.js',
|
||||
root: 'Clusterize'
|
||||
},
|
||||
sortablejs: {
|
||||
commonjs: 'sortablejs',
|
||||
commonjs2: 'sortablejs',
|
||||
root: 'Sortable'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user