d4708
/
qBittorrent
mirror of https://github.com/d47081/qBittorrent.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Implement dynamic table columns resizing

adaptive-webui-19844
buinsky 8 years ago
parent
c765d8ebe2
commit
56c07704d8
1 changed files with 116 additions and 31 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 147
      src/webui/www/public/scripts/dynamicTable.js

147
src/webui/www/public/scripts/dynamicTable.js
Unescape View File

@ -50,10 +50,11 @@ var DynamicTable = new Class({
this.initColumns(); this.initColumns();
this.loadColumnsOrder(); this.loadColumnsOrder();
this.updateTableHeaders(); this.updateTableHeaders();
this.setupEvents(); this.setupCommonEvents();
this.setupHeaderEvents();
}, },
setupEvents : function () { setupCommonEvents : function () {
var scrollFn = function() { var scrollFn = function() {
$(this.dynamicTableFixedHeaderDivId).getElements('table')[0].style.left = $(this.dynamicTableFixedHeaderDivId).getElements('table')[0].style.left =
-$(this.dynamicTableDivId).scrollLeft + 'px'; -$(this.dynamicTableDivId).scrollLeft + 'px';
@ -96,16 +97,96 @@ var DynamicTable = new Class({
setInterval(checkResizeFn, 500); setInterval(checkResizeFn, 500);
}, },
setupHeaderEvents : function () {
this.currentHeaderAction = '';
this.canResize = false;
var mouseMoveFn = function (e) {
var brect = e.target.getBoundingClientRect();
var mouseXRelative = e.event.clientX - brect.left;
if (this.currentHeaderAction === '') {
if (brect.width - mouseXRelative < 5) {
this.resizeTh = e.target;
this.canResize = true;
e.target.getParent("tr").style.cursor = 'col-resize';
}
else if ((mouseXRelative < 5) && e.target.getPrevious('[class=""]')) {
this.resizeTh = e.target.getPrevious('[class=""]');
this.canResize = true;
e.target.getParent("tr").style.cursor = 'col-resize';
} else {
this.canResize = false;
e.target.getParent("tr").style.cursor = '';
}
}
this.lastHoverTh = e.target;
this.lastClientX = e.event.clientX;
}.bind(this);
var mouseOutFn = function (e) {
}.bind(this);
var onBeforeStart = function (el) {
this.clickedTh = el;
this.currentHeaderAction = 'start';
this.dragMovement = false;
this.dragStartX = this.lastClientX;
}.bind(this);
var onStart = function (el, event) {
if (this.canResize)
this.currentHeaderAction = 'resize';
this.startWidth = this.resizeTh.getStyle('width').toFloat();
}.bind(this);
var onDrag = function (el, event) {
if (this.currentHeaderAction === 'resize') {
var width = this.startWidth + (event.page.x - this.dragStartX);
if (width < 16)
width = 16;
this.columns[this.resizeTh.columnName].width = width;
this.updateColumn(this.resizeTh.columnName);
}
}.bind(this);
var onComplete = function (el, event) {
if (this.currentHeaderAction === 'resize')
localStorage.setItem('column_' + this.resizeTh.columnName + '_width_' + this.dynamicTableDivId, this.columns[this.resizeTh.columnName].width);
this.currentHeaderAction = '';
}.bind(this);
var onCancel = function (el) {
this.currentHeaderAction = '';
this.setSortedColumn(el.columnName);
}.bind(this);
var ths = this.fixedTableHeader.getElements('th');
for (var i = 0; i < ths.length; i++) {
var th = ths[i];
th.addEvent('mousemove', mouseMoveFn);
th.addEvent('mouseout', mouseOutFn);
th.makeResizable({
modifiers : {x: '', y: ''},
onBeforeStart : onBeforeStart,
onStart : onStart,
onDrag : onDrag,
onComplete : onComplete,
onCancel : onCancel
})
}
},
initColumns : function () {}, initColumns : function () {},
newColumn : function (name, style, caption) { newColumn : function (name, style, caption, defaultWidth) {
var column = {}; var column = {};
column['name'] = name; column['name'] = name;
column['visible'] = getLocalStorageItem('column_' + name + '_visible_' + this.dynamicTableDivId, '1'); column['visible'] = getLocalStorageItem('column_' + name + '_visible_' + this.dynamicTableDivId, '1');
column['force_hide'] = false; column['force_hide'] = false;
column['caption'] = caption; column['caption'] = caption;
column['style'] = style; column['style'] = style;
column['onclick'] = 'this._this.setSortedColumn(\'' + name + '\');'; column['width'] = getLocalStorageItem('column_' + name + '_width_' + this.dynamicTableDivId, defaultWidth);
column['dataProperties'] = [name]; column['dataProperties'] = [name];
column['getRowValue'] = function (row, pos) { column['getRowValue'] = function (row, pos) {
if (pos == undefined) if (pos == undefined)
@ -167,10 +248,10 @@ var DynamicTable = new Class({
for (var i = 0; i < ths.length; i++) { for (var i = 0; i < ths.length; i++) {
th = ths[i]; th = ths[i];
th._this = this; th._this = this;
th.setAttribute('onclick', this.columns[i].onclick);
th.setAttribute('title', this.columns[i].caption); th.setAttribute('title', this.columns[i].caption);
th.innerHTML = this.columns[i].caption; th.innerHTML = this.columns[i].caption;
th.setAttribute('style', this.columns[i].style); th.setAttribute('style', 'width: ' + this.columns[i].width + 'px;' + this.columns[i].style);
th.columnName = this.columns[i].name;
if ((this.columns[i].visible == '0') || this.columns[i].force_hide) if ((this.columns[i].visible == '0') || this.columns[i].force_hide)
th.addClass('invisible'); th.addClass('invisible');
else else
@ -191,6 +272,10 @@ var DynamicTable = new Class({
var ths = this.hiddenTableHeader.getElements('th'); var ths = this.hiddenTableHeader.getElements('th');
var fths = this.fixedTableHeader.getElements('th'); var fths = this.fixedTableHeader.getElements('th');
var trs = this.tableBody.getElements('tr'); var trs = this.tableBody.getElements('tr');
var style = 'width: ' + this.columns[pos].width + 'px;' + this.columns[pos].style;
ths[pos].setAttribute('style', style);
fths[pos].setAttribute('style', style);
if (visible) { if (visible) {
ths[pos].removeClass('invisible'); ths[pos].removeClass('invisible');
@ -497,19 +582,19 @@ var TorrentsTable = new Class({
Extends: DynamicTable, Extends: DynamicTable,
initColumns : function () { initColumns : function () {
this.newColumn('priority', 'width: 30px', '#'); this.newColumn('priority', '', '#', 30);
this.newColumn('state_icon', 'width: 16px; cursor: default', ''); this.newColumn('state_icon', 'cursor: default', '', 22);
this.newColumn('name', 'width: 200px', 'QBT_TR(Name)QBT_TR'); this.newColumn('name', '', 'QBT_TR(Name)QBT_TR', 200);
this.newColumn('size', 'width: 100px', 'QBT_TR(Size)QBT_TR'); this.newColumn('size', '', 'QBT_TR(Size)QBT_TR', 100);
this.newColumn('progress', 'width: 80px', 'QBT_TR(Done)QBT_TR'); this.newColumn('progress', '', 'QBT_TR(Done)QBT_TR', 85);
this.newColumn('num_seeds', 'width: 100px', 'QBT_TR(Seeds)QBT_TR'); this.newColumn('num_seeds', '', 'QBT_TR(Seeds)QBT_TR', 100);
this.newColumn('num_leechs', 'width: 100px', 'QBT_TR(Peers)QBT_TR'); this.newColumn('num_leechs', '', 'QBT_TR(Peers)QBT_TR', 100);
this.newColumn('dlspeed', 'width: 100px', 'QBT_TR(Down Speed)QBT_TR'); this.newColumn('dlspeed', '', 'QBT_TR(Down Speed)QBT_TR', 100);
this.newColumn('upspeed', 'width: 100px', 'QBT_TR(Up Speed)QBT_TR'); this.newColumn('upspeed', '', 'QBT_TR(Up Speed)QBT_TR', 100);
this.newColumn('eta', 'width: 100px', 'QBT_TR(ETA)QBT_TR'); this.newColumn('eta', '', 'QBT_TR(ETA)QBT_TR', 100);
this.newColumn('ratio', 'width: 100px', 'QBT_TR(Ratio)QBT_TR'); this.newColumn('ratio', '', 'QBT_TR(Ratio)QBT_TR', 100);
this.newColumn('category', 'width: 100px', 'QBT_TR(Category)QBT_TR'); this.newColumn('category', '', 'QBT_TR(Category)QBT_TR', 100);
this.newColumn('added_on', 'width: 100px', 'QBT_TR(Added on)QBT_TR'); this.newColumn('added_on', '', 'QBT_TR(Added on)QBT_TR', 100);
this.columns['state_icon'].onclick = ''; this.columns['state_icon'].onclick = '';
this.columns['state_icon'].dataProperties[0] = 'state'; this.columns['state_icon'].dataProperties[0] = 'state';
@ -809,18 +894,18 @@ var TorrentPeersTable = new Class({
Extends: DynamicTable, Extends: DynamicTable,
initColumns : function () { initColumns : function () {
this.newColumn('country', 'width: 4px', ''); this.newColumn('country', '', '', 22);
this.newColumn('ip', 'width: 80px', 'QBT_TR(IP)QBT_TR'); this.newColumn('ip', '', 'QBT_TR(IP)QBT_TR', 80);
this.newColumn('port', 'width: 35px', 'QBT_TR(Port)QBT_TR'); this.newColumn('port', '', 'QBT_TR(Port)QBT_TR', 35);
this.newColumn('client', 'width: 140px', 'QBT_TR(Client)QBT_TR'); this.newColumn('client', '', 'QBT_TR(Client)QBT_TR', 140);
this.newColumn('progress', 'width: 50px', 'QBT_TR(Progress)QBT_TR'); this.newColumn('progress', '', 'QBT_TR(Progress)QBT_TR', 50);
this.newColumn('dl_speed', 'width: 50px', 'QBT_TR(Down Speed)QBT_TR'); this.newColumn('dl_speed', '', 'QBT_TR(Down Speed)QBT_TR', 50);
this.newColumn('up_speed', 'width: 50px', 'QBT_TR(Up Speed)QBT_TR'); this.newColumn('up_speed', '', 'QBT_TR(Up Speed)QBT_TR', 50);
this.newColumn('downloaded', 'width: 50px', 'QBT_TR(Downloaded)QBT_TR[CONTEXT=PeerListWidget]'); this.newColumn('downloaded', '', 'QBT_TR(Downloaded)QBT_TR[CONTEXT=PeerListWidget]', 50);
this.newColumn('uploaded', 'width: 50px', 'QBT_TR(Uploaded)QBT_TR[CONTEXT=PeerListWidget]'); this.newColumn('uploaded', '', 'QBT_TR(Uploaded)QBT_TR[CONTEXT=PeerListWidget]', 50);
this.newColumn('connection', 'width: 50px', 'QBT_TR(Connection)QBT_TR'); this.newColumn('connection', '', 'QBT_TR(Connection)QBT_TR', 50);
this.newColumn('flags', 'width: 50px', 'QBT_TR(Flags)QBT_TR'); this.newColumn('flags', '', 'QBT_TR(Flags)QBT_TR', 50);
this.newColumn('relevance', 'width: 30px', 'QBT_TR(Relevance)QBT_TR'); this.newColumn('relevance', '', 'QBT_TR(Relevance)QBT_TR', 30);
this.columns['country'].dataProperties.push('country_code'); this.columns['country'].dataProperties.push('country_code');
this.columns['flags'].dataProperties.push('flags_desc'); this.columns['flags'].dataProperties.push('flags_desc');

Write Preview
Loading…
Cancel
Save