d4708/qBittorrent
1
0
Fork 0
mirror of https://github.com/d47081/qBittorrent.git synced 2025-01-30 00:14:57 +00:00
Code Issues Projects Releases Wiki Activity

Implement dynamic table columns reordering

Browse Source
This commit is contained in:
buinsky 2016-07-18 13:06:44 +03:00
parent 56c07704d8
commit 56b885995c
1 changed files with 77 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/webui/www/public/scripts/dynamicTable.js
View File

@ -101,6 +101,19 @@ var DynamicTable = new Class({
this.currentHeaderAction = ''; this.currentHeaderAction = '';
this.canResize = false; this.canResize = false;
var resetElementBorderStyle = function (el, side) {
if (side === 'left' || side !== 'right') {
el.setStyle('border-left-style', '');
el.setStyle('border-left-color', '');
el.setStyle('border-left-width', '');
}
if (side === 'right' || side !== 'left') {
el.setStyle('border-right-style', '');
el.setStyle('border-right-color', '');
el.setStyle('border-right-width', '');
}
}
var mouseMoveFn = function (e) { var mouseMoveFn = function (e) {
var brect = e.target.getBoundingClientRect(); var brect = e.target.getBoundingClientRect();
var mouseXRelative = e.event.clientX - brect.left; var mouseXRelative = e.event.clientX - brect.left;
@ -119,11 +132,44 @@ var DynamicTable = new Class({
e.target.getParent("tr").style.cursor = ''; e.target.getParent("tr").style.cursor = '';
} }
} }
if (this.currentHeaderAction === 'drag') {
var previousVisibleSibling = e.target.getPrevious('[class=""]');
var borderChangeElement = previousVisibleSibling;
var changeBorderSide = 'right';
if (mouseXRelative > brect.width / 2) {
borderChangeElement = e.target;
this.dropSide = 'right';
}
else {
this.dropSide = 'left';
}
e.target.getParent("tr").style.cursor = 'move';
if (!previousVisibleSibling) { // right most column
borderChangeElement = e.target;
if (mouseXRelative <= brect.width / 2)
changeBorderSide = 'left';
}
borderChangeElement.setStyle('border-' + changeBorderSide + '-style', 'solid');
borderChangeElement.setStyle('border-' + changeBorderSide + '-color', '#e60');
borderChangeElement.setStyle('border-' + changeBorderSide + '-width', 'initial');
resetElementBorderStyle(borderChangeElement, changeBorderSide === 'right' ? 'left' : 'right');
borderChangeElement.getSiblings('[class=""]').each(function(el){
resetElementBorderStyle(el);
});
}
this.lastHoverTh = e.target; this.lastHoverTh = e.target;
this.lastClientX = e.event.clientX; this.lastClientX = e.event.clientX;
}.bind(this); }.bind(this);
var mouseOutFn = function (e) { var mouseOutFn = function (e) {
resetElementBorderStyle(e.target);
}.bind(this); }.bind(this);
var onBeforeStart = function (el) { var onBeforeStart = function (el) {
@ -134,9 +180,14 @@ var DynamicTable = new Class({
}.bind(this); }.bind(this);
var onStart = function (el, event) { var onStart = function (el, event) {
if (this.canResize) if (this.canResize) {
this.currentHeaderAction = 'resize'; this.currentHeaderAction = 'resize';
this.startWidth = this.resizeTh.getStyle('width').toFloat(); this.startWidth = this.resizeTh.getStyle('width').toFloat();
}
else {
this.currentHeaderAction = 'drag';
el.setStyle('background-color', '#C1D5E7');
}
}.bind(this); }.bind(this);
var onDrag = function (el, event) { var onDrag = function (el, event) {
@ -150,8 +201,30 @@ var DynamicTable = new Class({
}.bind(this); }.bind(this);
var onComplete = function (el, event) { var onComplete = function (el, event) {
resetElementBorderStyle(this.lastHoverTh);
el.setStyle('background-color', '');
if (this.currentHeaderAction === 'resize') if (this.currentHeaderAction === 'resize')
localStorage.setItem('column_' + this.resizeTh.columnName + '_width_' + this.dynamicTableDivId, this.columns[this.resizeTh.columnName].width); localStorage.setItem('column_' + this.resizeTh.columnName + '_width_' + this.dynamicTableDivId, this.columns[this.resizeTh.columnName].width);
if ((this.currentHeaderAction === 'drag') && (el !== this.lastHoverTh)) {
this.saveColumnsOrder();
var val = localStorage.getItem('columns_order_' + this.dynamicTableDivId).split(',');
val.erase(el.columnName);
var pos = val.indexOf(this.lastHoverTh.columnName);
if (this.dropSide === 'right') pos++;
val.splice(pos, 0, el.columnName);
localStorage.setItem('columns_order_' + this.dynamicTableDivId, val.join(','));
this.loadColumnsOrder();
this.updateTableHeaders();
while (this.tableBody.firstChild)
this.tableBody.removeChild(this.tableBody.firstChild);
this.updateTable(true);
}
if (this.currentHeaderAction === 'drag') {
resetElementBorderStyle(el);
el.getSiblings('[class=""]').each(function(el){
resetElementBorderStyle(el);
});
}
this.currentHeaderAction = ''; this.currentHeaderAction = '';
}.bind(this); }.bind(this);
@ -211,8 +284,8 @@ var DynamicTable = new Class({
}, },
loadColumnsOrder : function () { loadColumnsOrder : function () {
columnsOrder = ['state_icon']; // status icon column is always the first var columnsOrder = [];
val = localStorage.getItem('columns_order_' + this.dynamicTableDivId); var val = localStorage.getItem('columns_order_' + this.dynamicTableDivId);
if (val === null || val === undefined) return; if (val === null || val === undefined) return;
val.split(',').forEach(function(v) { val.split(',').forEach(function(v) {
if ((v in this.columns) && (!columnsOrder.contains(v))) if ((v in this.columns) && (!columnsOrder.contains(v)))