d4708/qBittorrent
1
0
Fork 0
mirror of https://github.com/d47081/qBittorrent.git synced 2025-01-11 07:18:08 +00:00
Code Issues Projects Releases Wiki Activity

Display files hierarchically in Web UI content tab

Browse Source
This commit is contained in:
Thomas Piccirello 2019-07-26 02:06:45 -07:00
parent e0037b819a
commit 60a1835813
9 changed files with 980 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/webui/www/private/css/style.css
View File

@ -352,7 +352,6 @@ a.propButton img {
#torrentsFilterToolbar {
float: right;
margin-right: 30px;
margin-right: 30px;
}
#torrentsFilterInput {
@ -364,6 +363,20 @@ a.propButton img {
background-position: left;
}
#torrentFilesFilterToolbar {
float: right;
margin-right: 30px;
}
#torrentFilesFilterInput {
width: 160px;
padding-left: 2em;
background-image: url("../images/qbt-theme/edit-find.svg");
background-repeat: no-repeat;
background-size: 1.5em;
background-position: left;
}
/* Tri-state checkbox */
label.tristate {
@ -470,6 +483,19 @@ td.generalLabel {
line-height: 25px;
}
.filesTableCollapseIcon {
width: 15px;
height: 15px;
cursor: pointer;
margin-bottom: -3px;
padding-right: 5px;
}
.filesTableCollapseIcon.rotate {
transform: rotate(270deg);
margin-bottom: -1px;
}
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
@ -596,3 +622,17 @@ td.statusBarSeparator {
.searchPluginsTableRow {
cursor: pointer;
}
#torrentFilesTableDiv .dynamicTable tr.nonAlt {
background-color: #fff;
}
#torrentFilesTableDiv .dynamicTable tr.nonAlt.selected {
background-color: #354158;
color: #fff;
}
#torrentFilesTableDiv .dynamicTable tr.nonAlt:hover {
background-color: #ee6600;
color: #fff;
}

4
src/webui/www/private/index.html
View File

@ -21,8 +21,10 @@
<script src="scripts/lib/mocha-0.9.6-yc.js"></script>
<script src="scripts/mocha-init.js?locale=${LANG}&v=${CACHEID}"></script>
<script src="scripts/lib/clipboard-2.0.0.min.js"></script>
<script src="scripts/filesystem.js?v=${CACHEID}"></script>
<script src="scripts/misc.js?locale=${LANG}&v=${CACHEID}"></script>
<script src="scripts/progressbar.js?v=${CACHEID}"></script>
<script src="scripts/file-tree.js?v=${CACHEID}"></script>
<script src="scripts/dynamicTable.js?locale=${LANG}&v=${CACHEID}"></script>
<script src="scripts/client.js?locale=${LANG}&v=${CACHEID}"></script>
<script src="scripts/contextmenu.js?locale=${LANG}&v=${CACHEID}"></script>
@ -189,7 +191,7 @@
<li><a href="#CopyTrackerUrl" id="CopyTrackerUrl"><img src="images/qbt-theme/edit-copy.svg" alt="QBT_TR(Copy tracker URL)QBT_TR[CONTEXT=TrackerListWidget]"/> QBT_TR(Copy tracker URL)QBT_TR[CONTEXT=TrackerListWidget]</a></li>
</ul>
<ul id="torrentFilesMenu" class="contextMenu">
<li class="separator">
<li>
<a href="#FilePrio" class="arrow-right"><span style="display: inline-block; width: 16px;"></span> QBT_TR(Priority)QBT_TR[CONTEXT=PropertiesWidget]</a>
<ul>
<li><a href="#FilePrioIgnore"><span style="display: inline-block; width: 16px;"></span> QBT_TR(Do not download)QBT_TR[CONTEXT=PropListDelegate]</a></li>

3
src/webui/www/private/properties.html
View File

@ -1,4 +1,7 @@
<div class="toolbarTabs">
<div id="torrentFilesFilterToolbar" class="invisible">
<input type="text" id="torrentFilesFilterInput" placeholder="QBT_TR(Filter files...)QBT_TR[CONTEXT=PropertiesWidget]" autocorrect="off" autocapitalize="none" />
</div>
<ul id="propertiesTabs" class="tab-menu">
<li id="PropGeneralLink" class="selected"><a>QBT_TR(General)QBT_TR[CONTEXT=PropTabBar]</a></li>
<li id="PropTrackersLink"><a>QBT_TR(Trackers)QBT_TR[CONTEXT=PropTabBar]</a></li>

13
src/webui/www/private/scripts/client.js
View File

@ -887,6 +887,7 @@ window.addEvent('load', function() {
$('PropGeneralLink').addEvent('click', function(e) {
$$('.propertiesTabContent').addClass('invisible');
$('prop_general').removeClass("invisible");
hideFilesFilter();
updatePropertiesPanel();
localStorage.setItem('selected_tab', this.id);
});
@ -894,6 +895,7 @@ window.addEvent('load', function() {
$('PropTrackersLink').addEvent('click', function(e) {
$$('.propertiesTabContent').addClass('invisible');
$('prop_trackers').removeClass("invisible");
hideFilesFilter();
updatePropertiesPanel();
localStorage.setItem('selected_tab', this.id);
});
@ -901,6 +903,7 @@ window.addEvent('load', function() {
$('PropPeersLink').addEvent('click', function(e) {
$$('.propertiesTabContent').addClass('invisible');
$('prop_peers').removeClass("invisible");
hideFilesFilter();
updatePropertiesPanel();
localStorage.setItem('selected_tab', this.id);
});
@ -908,6 +911,7 @@ window.addEvent('load', function() {
$('PropWebSeedsLink').addEvent('click', function(e) {
$$('.propertiesTabContent').addClass('invisible');
$('prop_webseeds').removeClass("invisible");
hideFilesFilter();
updatePropertiesPanel();
localStorage.setItem('selected_tab', this.id);
});
@ -915,6 +919,7 @@ window.addEvent('load', function() {
$('PropFilesLink').addEvent('click', function(e) {
$$('.propertiesTabContent').addClass('invisible');
$('prop_files').removeClass("invisible");
showFilesFilter();
updatePropertiesPanel();
localStorage.setItem('selected_tab', this.id);
});
@ -927,6 +932,14 @@ window.addEvent('load', function() {
height: prop_h
});
const showFilesFilter = function() {
$('torrentFilesFilterToolbar').removeClass("invisible");
};
const hideFilesFilter = function() {
$('torrentFilesFilterToolbar').addClass("invisible");
};
let prevTorrentsFilterValue;
let torrentsFilterInputTimer = null;
// listen for changes to torrentsFilterInput

293
src/webui/www/private/scripts/dynamicTable.js
View File

@ -468,7 +468,7 @@ const DynamicTable = new Class({
}
else {
// Toggle sort order
this.reverseSort = this.reverseSort == '0' ? '1' : '0';
this.reverseSort = this.reverseSort === '0' ? '1' : '0';
this.setSortedColumnIcon(column, null, (this.reverseSort === '1'));
}
localStorage.setItem('sorted_column_' + this.dynamicTableDivId, column);
@ -627,7 +627,7 @@ const DynamicTable = new Class({
filteredRows.sort(function(row1, row2) {
const column = this.columns[this.sortedColumn];
const res = column.compareRows(row1, row2);
if (this.reverseSort == '0')
if (this.reverseSort === '0')
return res;
else
return -res;
@ -883,19 +883,20 @@ const TorrentsTable = new Class({
const img_path = 'images/skin/' + state + '.svg';
if (td.getChildren('img').length) {
if (td.getChildren('img').length > 0) {
const img = td.getChildren('img')[0];
if (img.src.indexOf(img_path) < 0) {
img.set('src', img_path);
img.set('title', state);
}
}
else
else {
td.adopt(new Element('img', {
'src': img_path,
'class': 'stateIcon',
'title': state
}));
}
};
// status
@ -1008,7 +1009,7 @@ const TorrentsTable = new Class({
if (progressFormated == 100.0 && progress != 1.0)
progressFormated = 99.9;
if (td.getChildren('div').length) {
if (td.getChildren('div').length > 0) {
const div = td.getChildren('div')[0];
if (td.resized) {
td.resized = false;
@ -1314,7 +1315,7 @@ const TorrentsTable = new Class({
filteredRows.sort(function(row1, row2) {
const column = this.columns[this.sortedColumn];
const res = column.compareRows(row1, row2);
if (this.reverseSort == '0')
if (this.reverseSort === '0')
return res;
else
return -res;
@ -1379,14 +1380,14 @@ const TorrentPeersTable = new Class({
const country_code = this.getRowValue(row, 1);
if (!country_code) {
if (td.getChildren('img').length)
if (td.getChildren('img').length > 0)
td.getChildren('img')[0].dispose();
return;
}
const img_path = 'images/flags/' + country_code + '.svg';
if (td.getChildren('img').length) {
if (td.getChildren('img').length > 0) {
const img = td.getChildren('img')[0];
img.set('src', img_path);
img.set('class', 'flags');
@ -1566,12 +1567,12 @@ const SearchResultsTable = new Class({
const seedsFilters = getSeedsFilters();
const searchInTorrentName = $('searchInTorrentName').get('value') === "names";
if (searchInTorrentName || filterTerms.length || (searchSizeFilter.min > 0.00) || (searchSizeFilter.max > 0.00)) {
if (searchInTorrentName || (filterTerms.length > 0) || (searchSizeFilter.min > 0.00) || (searchSizeFilter.max > 0.00)) {
for (let i = 0; i < rows.length; ++i) {
const row = rows[i];
if (searchInTorrentName && !containsAll(row.full_data.fileName, searchTerms)) continue;
if (filterTerms.length && !containsAll(row.full_data.fileName, filterTerms)) continue;
if ((filterTerms.length > 0) && !containsAll(row.full_data.fileName, filterTerms)) continue;
if ((sizeFilters.min > 0.00) && (row.full_data.fileSize < sizeFilters.min)) continue;
if ((sizeFilters.max > 0.00) && (row.full_data.fileSize > sizeFilters.max)) continue;
if ((seedsFilters.min > 0) && (row.full_data.nbSeeders < seedsFilters.min)) continue;
@ -1587,7 +1588,7 @@ const SearchResultsTable = new Class({
filteredRows.sort(function(row1, row2) {
const column = this.columns[this.sortedColumn];
const res = column.compareRows(row1, row2);
if (this.reverseSort == '0')
if (this.reverseSort === '0')
return res;
else
return -res;
@ -1663,6 +1664,65 @@ const TorrentTrackersTable = new Class({
const TorrentFilesTable = new Class({
Extends: DynamicTable,
filterTerms: [],
prevFilterTerms: [],
prevRowsString: null,
prevFilteredRows: [],
prevSortedColumn: null,
prevReverseSort: null,
fileTree: new FileTree(),
populateTable: function(root) {
this.fileTree.setRoot(root);
root.children.each(function(node) {
this._addNodeToTable(node, 0);
}.bind(this));
},
_addNodeToTable: function(node, depth) {
node.depth = depth;
if (node.isFolder) {
const data = {
rowId: node.rowId,
size: node.size,
checked: node.checked,
remaining: node.remaining,
progress: node.progress,
priority: normalizePriority(node.priority),
availability: node.availability,
fileId: -1,
name: node.name
};
node.data = data;
node.full_data = data;
this.updateRowData(data);
}
else {
node.data.rowId = node.rowId;
node.full_data = node.data;
this.updateRowData(node.data);
}
node.children.each(function(child) {
this._addNodeToTable(child, depth + 1);
}.bind(this));
},
getRoot: function() {
return this.fileTree.getRoot();
},
getNode: function(rowId) {
return this.fileTree.getNode(rowId);
},
getRow: function(node) {
const rowId = this.fileTree.getRowId(node);
return this.rows.get(rowId);
},
initColumns: function() {
this.newColumn('checked', '', '', 50, true);
this.newColumn('name', '', 'QBT_TR(Name)QBT_TR[CONTEXT=TrackerListWidget]', 300, true);
@ -1676,6 +1736,7 @@ const TorrentFilesTable = new Class({
},
initColumnsFunctions: function() {
const that = this;
const displaySize = function(td, row) {
const size = friendlyUnit(this.getRowValue(row), false);
td.set('html', size);
@ -1687,6 +1748,60 @@ const TorrentFilesTable = new Class({
td.set('title', value);
};
this.columns['name'].updateTd = function(td, row) {
const id = row.rowId;
const fileNameId = 'filesTablefileName' + id;
const node = that.getNode(id);
if (node.isFolder) {
const value = this.getRowValue(row);
const collapseIconId = 'filesTableCollapseIcon' + id;
const dirImgId = 'filesTableDirImg' + id;
if ($(dirImgId)) {
// just update file name
$(fileNameId).textContent = escapeHtml(value);
}
else {
const collapseIcon = new Element('img', {
src: 'images/qbt-theme/go-down.svg',
styles: {
'margin-left': (node.depth * 20)
},
class: "filesTableCollapseIcon",
id: collapseIconId,
"data-id": id,
onclick: "collapseIconClicked(this)"
});
const span = new Element('span', {
text: escapeHtml(value),
id: fileNameId
});
const dirImg = new Element('img', {
src: 'images/qbt-theme/inode-directory.svg',
styles: {
'width': 15,
'padding-right': 5,
'margin-bottom': -3
},
id: dirImgId
});
const html = collapseIcon.outerHTML + dirImg.outerHTML + span.outerHTML;
td.set('html', html);
}
}
else {
const value = this.getRowValue(row);
const span = new Element('span', {
text: escapeHtml(value),
id: fileNameId,
styles: {
'margin-left': ((node.depth + 1) * 20)
}
});
td.set('html', span.outerHTML);
}
};
this.columns['checked'].updateTd = function(td, row) {
const id = row.rowId;
const value = this.getRowValue(row);
@ -1697,9 +1812,11 @@ const TorrentFilesTable = new Class({
else {
const treeImg = new Element('img', {
src: 'images/L.gif',
style: 'margin-bottom: -2px'
styles: {
'margin-bottom': -2
}
});
td.adopt(treeImg, createDownloadCheckbox(row.rowId, value));
td.adopt(treeImg, createDownloadCheckbox(id, row.full_data.fileId, value));
}
};
@ -1712,8 +1829,8 @@ const TorrentFilesTable = new Class({
const progressBar = $('pbf_' + id);
if (progressBar === null) {
td.adopt(new ProgressBar(value.toFloat(), {
'id': 'pbf_' + id,
'width': 80
id: 'pbf_' + id,
width: 80
}));
}
else {
@ -1728,11 +1845,155 @@ const TorrentFilesTable = new Class({
if (isPriorityComboExists(id))
updatePriorityCombo(id, value);
else
td.adopt(createPriorityCombo(id, value));
td.adopt(createPriorityCombo(id, row.full_data.fileId, value));
};
this.columns['remaining'].updateTd = displaySize;
this.columns['availability'].updateTd = displayPercentage;
},
altRow: function() {
let addClass = false;
const trs = this.tableBody.getElements('tr');
trs.each(function(tr) {
if (tr.hasClass("invisible"))
return;
if (addClass){
tr.addClass("alt");
tr.removeClass("nonAlt");
}
else {
tr.removeClass("alt");
tr.addClass("nonAlt");
}
addClass = !addClass;
}.bind(this));
},
_sortNodesByColumn: function(nodes, column) {
nodes.sort(function(row1, row2) {
// list folders before files when sorting by name
if (column.name === "name") {
const node1 = this.getNode(row1.data.rowId);
const node2 = this.getNode(row2.data.rowId);
if (node1.isFolder && !node2.isFolder)
return -1;
if (node2.isFolder && !node1.isFolder)
return 1;
}
const res = column.compareRows(row1, row2);
return (this.reverseSort === '0') ? res : -res;
}.bind(this));
nodes.each(function(node) {
if (node.children.length > 0)
this._sortNodesByColumn(node.children, column);
}.bind(this));
},
_filterNodes: function(node, filterTerms, filteredRows) {
if (node.isFolder) {
const childAdded = node.children.reduce(function (acc, child) {
// we must execute the function before ORing w/ acc or we'll stop checking child nodes after the first successful match
return (this._filterNodes(child, filterTerms, filteredRows) || acc);
}.bind(this), false);
if (childAdded) {
const row = this.getRow(node);
filteredRows.push(row);
return true;
}
}
const lowercaseName = node.name.toLowerCase();
const matchesFilter = filterTerms.every(function(term) {
return (lowercaseName.indexOf(term) !== -1);
});
if (matchesFilter) {
const row = this.getRow(node);
filteredRows.push(row);
return true;
}
return false;
},
setFilter: function(text) {
const filterTerms = text.trim().toLowerCase().split(' ');
if ((filterTerms.length === 1) && (filterTerms[0] === ''))
this.filterTerms = [];
else
this.filterTerms = filterTerms;
},
getFilteredAndSortedRows: function() {
if (this.getRoot() === null)
return [];
const generateRowsSignature = function(rows) {
const rowsData = rows.map(function(row) {
return row.full_data;
});
return JSON.stringify(rowsData);
};
const getFilteredRows = function() {
if (this.filterTerms.length === 0) {
const nodeArray = this.fileTree.toArray();
const filteredRows = nodeArray.map(function(node) {
return this.getRow(node);
}.bind(this));
return filteredRows;
}
const filteredRows = [];
this.getRoot().children.each(function(child) {
this._filterNodes(child, this.filterTerms, filteredRows);
}.bind(this));
filteredRows.reverse();
return filteredRows;
}.bind(this);
const hasRowsChanged = function(rowsString, prevRowsStringString) {
const rowsChanged = (rowsString !== prevRowsStringString);
const isFilterTermsChanged = this.filterTerms.reduce(function(acc, term, index) {
return (acc || (term !== this.prevFilterTerms[index]));
}.bind(this), false);
const isFilterChanged = ((this.filterTerms.length !== this.prevFilterTerms.length)
|| ((this.filterTerms.length > 0) && isFilterTermsChanged));
const isSortedColumnChanged = (this.prevSortedColumn !== this.sortedColumn);
const isReverseSortChanged = (this.prevReverseSort !== this.reverseSort);
return (rowsChanged || isFilterChanged || isSortedColumnChanged || isReverseSortChanged);
}.bind(this);
const rowsString = generateRowsSignature(this.rows);
if (!hasRowsChanged(rowsString, this.prevRowsString)) {
return this.prevFilteredRows;
}
// sort, then filter
const column = this.columns[this.sortedColumn];
this._sortNodesByColumn(this.getRoot().children, column);
const filteredRows = getFilteredRows();
this.prevFilterTerms = this.filterTerms;
this.prevRowsString = rowsString;
this.prevFilteredRows = filteredRows;
this.prevSortedColumn = this.sortedColumn;
this.prevReverseSort = this.reverseSort;
return filteredRows;
},
setIgnored: function(rowId, ignore) {
const row = this.rows.get(rowId);
if (ignore)
row.full_data.remaining = 0;
else
row.full_data.remaining = (row.full_data.size * (1.0 - (row.full_data.progress / 100)));
}
});

176
src/webui/www/private/scripts/file-tree.js Normal file
View File

@ -0,0 +1,176 @@
/*
* Bittorrent Client using Qt and libtorrent.
* Copyright (C) 2019 Thomas Piccirello <thomas.piccirello@gmail.com>
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*
* In addition, as a special exception, the copyright holders give permission to
* link this program with the OpenSSL project's "OpenSSL" library (or with
* modified versions of it that use the same license as the "OpenSSL" library),
* and distribute the linked executables. You must obey the GNU General Public
* License in all respects for all of the code used other than "OpenSSL". If you
* modify file(s), you may extend this exception to your version of the file(s),
* but you are not obligated to do so. If you do not wish to do so, delete this
* exception statement from your version.
*/
'use strict';
const FilePriority = {
"Ignored": 0,
"Normal": 1,
"High": 6,
"Maximum": 7,
"Mixed": -1
};
Object.freeze(FilePriority);
const TriState = {
"Unchecked": 0,
"Checked": 1,
"Partial": 2
};
Object.freeze(TriState);
const FileTree = new Class({
root: null,
nodeMap: {},
setRoot: function(root) {
this.root = root;
this.generateNodeMap(root);
if (this.root.isFolder)
this.root.calculateSize();
},
getRoot: function() {
return this.root;
},
generateNodeMap: function(node) {
// don't store root node in map
if (node.root !== null) {
this.nodeMap[node.rowId] = node;
}
node.children.each(function(child) {
this.generateNodeMap(child);
}.bind(this));
},
getNode: function(rowId) {
return (this.nodeMap[rowId] === undefined)
? null
: this.nodeMap[rowId];
},
getRowId: function(node) {
return node.rowId;
},
/**
* Returns the nodes in dfs order
*/
toArray: function() {
const nodes = [];
this.root.children.each(function(node) {
this._getArrayOfNodes(node, nodes);
}.bind(this));
return nodes;
},
_getArrayOfNodes: function(node, array) {
array.push(node);
node.children.each(function(child) {
this._getArrayOfNodes(child, array);
}.bind(this));
}
});
const FileNode = new Class({
name: "",
rowId: null,
size: 0,
checked: TriState.Unchecked,
remaining: 0,
progress: 0,
priority: FilePriority.Normal,
availability: 0,
depth: 0,
root: null,
data: null,
isFolder: false,
children: [],
});
const FolderNode = new Class({
Extends: FileNode,
initialize: function() {
this.isFolder = true;
},
addChild(node) {
this.children.push(node);
},
/**
* Recursively calculate size of node and its children
*/
calculateSize: function() {
let size = 0;
let remaining = 0;
let progress = 0;
let availability = 0;
let checked = TriState.Unchecked;
let priority = FilePriority.Normal;
let isFirstFile = true;
this.children.each(function(node) {
if (node.isFolder)
node.calculateSize();
size += node.size;
if (isFirstFile) {
priority = node.priority;
checked = node.checked;
isFirstFile = false;
}
else {
if (priority !== node.priority)
priority = FilePriority.Mixed;
if (checked !== node.checked)
checked = TriState.Partial;
}
const isIgnored = (node.priority === FilePriority.Ignored);
if (!isIgnored) {
remaining += node.remaining;
progress += (node.progress * node.size);
availability += (node.availability * node.size);
}
}.bind(this));
this.size = size;
this.remaining = remaining;
this.checked = checked;
this.progress = (progress / size);
this.priority = priority;
this.availability = (availability / size);
}
});

61
src/webui/www/private/scripts/filesystem.js Normal file
View File

@ -0,0 +1,61 @@
/*
* Bittorrent Client using Qt and libtorrent.
* Copyright (C) 2019 Thomas Piccirello <thomas.piccirello@gmail.com>
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*
* In addition, as a special exception, the copyright holders give permission to
* link this program with the OpenSSL project's "OpenSSL" library (or with
* modified versions of it that use the same license as the "OpenSSL" library),
* and distribute the linked executables. You must obey the GNU General Public
* License in all respects for all of the code used other than "OpenSSL". If you
* modify file(s), you may extend this exception to your version of the file(s),
* but you are not obligated to do so. If you do not wish to do so, delete this
* exception statement from your version.
*/
'use strict';
// This file is the JavaScript implementation of base/utils/fs.cpp
const QB_EXT = '.!qB';
const PathSeparator = '/';
/**
* Returns the file extension part of a file name.
*/
function fileExtension(filename) {
const name = filename.endsWith(QB_EXT)
? filename.substring(0, filename.length - QB_EXT.length)
: filename;
const pointIndex = name.lastIndexOf('.');
if (pointIndex === -1)
return '';
return name.substring(pointIndex + 1);
}
function fileName(filepath) {
const slashIndex = filepath.lastIndexOf(PathSeparator);
if (slashIndex === -1)
return filepath;
return filepath.substring(slashIndex + 1);
}
function folderName(filepath) {
const slashIndex = filepath.lastIndexOf(PathSeparator);
if (slashIndex === -1)
return filepath;
return filepath.substring(0, slashIndex);
}

505
src/webui/www/private/scripts/prop-files.js
View File

@ -31,14 +31,6 @@
let is_seed = true;
this.current_hash = "";
const FilePriority = {
"Ignored": 0,
"Normal": 1,
"High": 6,
"Maximum": 7,
"Mixed": -1
};
const normalizePriority = function(priority) {
switch (priority) {
case FilePriority.Ignored:
@ -52,45 +44,102 @@ const normalizePriority = function(priority) {
}
};
const fileCheckboxChanged = function(e) {
const getAllChildren = function(id, fileId) {
const node = torrentFilesTable.getNode(id);
if (!node.isFolder) {
return {
rowIds: [id],
fileIds: [fileId]
};
}
const rowIds = [];
const fileIds = [];
const getChildFiles = function(node) {
if (node.isFolder) {
node.children.each(function(child) {
getChildFiles(child);
});
}
else {
rowIds.push(node.data.rowId);
fileIds.push(node.data.fileId);
}
};
node.children.each(function(child) {
getChildFiles(child);
});
return {
rowIds: rowIds,
fileIds: fileIds
};
};
const fileCheckboxClicked = function(e) {
e.stopPropagation();
const checkbox = e.target;
const priority = checkbox.checked ? FilePriority.Normal : FilePriority.Ignored;
const id = checkbox.get('data-id');
const fileId = checkbox.get('data-file-id');
setFilePriority(id, priority);
setGlobalCheckboxState();
return true;
const rows = getAllChildren(id, fileId);
setFilePriority(rows.rowIds, rows.fileIds, priority);
updateGlobalCheckbox();
};
const fileComboboxChanged = function(e) {
const combobox = e.target;
const newPriority = combobox.value;
const priority = combobox.value;
const id = combobox.get('data-id');
const fileId = combobox.get('data-file-id');
setFilePriority(id, newPriority);
const rows = getAllChildren(id, fileId);
setFilePriority(rows.rowIds, rows.fileIds, priority);
updateGlobalCheckbox();
};
const isDownloadCheckboxExists = function(id) {
return ($('cbPrio' + id) !== null);
};
const createDownloadCheckbox = function(id, download) {
const createDownloadCheckbox = function(id, fileId, checked) {
const checkbox = new Element('input');
checkbox.set('type', 'checkbox');
if (download)
checkbox.set('checked', 'checked');
checkbox.set('id', 'cbPrio' + id);
checkbox.set('data-id', id);
checkbox.set('data-file-id', fileId);
checkbox.set('class', 'DownloadedCB');
checkbox.addEvent('change', fileCheckboxChanged);
checkbox.addEvent('click', fileCheckboxClicked);
updateCheckbox(checkbox, checked);
return checkbox;
};
const updateDownloadCheckbox = function(id, download) {
const updateDownloadCheckbox = function(id, checked) {
const checkbox = $('cbPrio' + id);
checkbox.checked = download;
updateCheckbox(checkbox, checked);
};
const updateCheckbox = function(checkbox, checked) {
switch (checked) {
case TriState.Checked:
setCheckboxChecked(checkbox);
break;
case TriState.Unchecked:
setCheckboxUnchecked(checkbox);
break;
case TriState.Partial:
setCheckboxPartial(checkbox);
break;
}
}
const isPriorityComboExists = function(id) {
return ($('comboPrio' + id) !== null);
};
@ -104,10 +153,11 @@ const createPriorityOptionElement = function(priority, selected, html) {
return elem;
};
const createPriorityCombo = function(id, selectedPriority) {
const createPriorityCombo = function(id, fileId, selectedPriority) {
const select = new Element('select');
select.set('id', 'comboPrio' + id);
select.set('data-id', id);
select.set('data-file-id', fileId);
select.set('disabled', is_seed);
select.addClass('combo_priority');
select.addEvent('change', fileComboboxChanged);
@ -117,6 +167,11 @@ const createPriorityCombo = function(id, selectedPriority) {
createPriorityOptionElement(FilePriority.High, (FilePriority.High === selectedPriority), 'QBT_TR(High)QBT_TR[CONTEXT=PropListDelegate]').injectInside(select);
createPriorityOptionElement(FilePriority.Maximum, (FilePriority.Maximum === selectedPriority), 'QBT_TR(Maximum)QBT_TR[CONTEXT=PropListDelegate]').injectInside(select);
// "Mixed" priority is for display only; it shouldn't be selectable
const mixedPriorityOption = createPriorityOptionElement(FilePriority.Mixed, (FilePriority.Mixed === selectedPriority), 'QBT_TR(Mixed)QBT_TR[CONTEXT=PropListDelegate]');
mixedPriorityOption.set('disabled', true);
mixedPriorityOption.injectInside(select);
return select;
};
@ -143,56 +198,73 @@ const selectComboboxPriority = function(combobox, priority) {
combobox.value = priority;
};
const switchCheckboxState = function() {
const rows = [];
let priority = FilePriority.Ignored;
const switchCheckboxState = function(e) {
e.stopPropagation();
if ($('tristate_cb').state === "checked") {
setGlobalCheckboxUnchecked();
const rowIds = [];
const fileIds = [];
let priority = FilePriority.Ignored;
const checkbox = $('tristate_cb');
if (checkbox.state === "checked") {
setCheckboxUnchecked(checkbox);
// set file priority for all checked to Ignored
torrentFilesTable.getFilteredAndSortedRows().forEach(function(row) {
if (row.full_data.checked)
rows.push(row.full_data.rowId);
const rowId = row.rowId;
const fileId = row.full_data.fileId;
const isChecked = (row.full_data.checked === TriState.Checked);
const isFolder = (fileId === -1);
if (!isFolder && isChecked) {
rowIds.push(rowId);
fileIds.push(fileId);
}
});
}
else {
setGlobalCheckboxChecked();
setCheckboxChecked(checkbox);
priority = FilePriority.Normal;
// set file priority for all unchecked to Normal
torrentFilesTable.getFilteredAndSortedRows().forEach(function(row) {
if (!row.full_data.checked)
rows.push(row.full_data.rowId);
const rowId = row.rowId;
const fileId = row.full_data.fileId;
const isUnchecked = (row.full_data.checked === TriState.Unchecked);
const isFolder = (fileId === -1);
if (!isFolder && isUnchecked) {
rowIds.push(rowId);
fileIds.push(fileId);
}
});
}
if (rows.length > 0)
setFilePriority(rows, priority);
if (rowIds.length > 0)
setFilePriority(rowIds, fileIds, priority);
};
const setGlobalCheckboxState = function() {
const updateGlobalCheckbox = function() {
const checkbox = $('tristate_cb');
if (isAllCheckboxesChecked())
setGlobalCheckboxChecked();
setCheckboxChecked(checkbox);
else if (isAllCheckboxesUnchecked())
setGlobalCheckboxUnchecked();
setCheckboxUnchecked(checkbox);
else
setGlobalCheckboxPartial();
setCheckboxPartial(checkbox);
};
const setGlobalCheckboxChecked = function() {
$('tristate_cb').state = "checked";
$('tristate_cb').indeterminate = false;
$('tristate_cb').checked = true;
const setCheckboxChecked = function(checkbox) {
checkbox.state = "checked";
checkbox.indeterminate = false;
checkbox.checked = true;
};
const setGlobalCheckboxUnchecked = function() {
$('tristate_cb').state = "unchecked";
$('tristate_cb').indeterminate = false;
$('tristate_cb').checked = false;
const setCheckboxUnchecked = function(checkbox) {
checkbox.state = "unchecked";
checkbox.indeterminate = false;
checkbox.checked = false;
};
const setGlobalCheckboxPartial = function() {
$('tristate_cb').state = "partial";
$('tristate_cb').indeterminate = true;
const setCheckboxPartial = function(checkbox) {
checkbox.state = "partial";
checkbox.indeterminate = true;
};
const isAllCheckboxesChecked = function() {
@ -213,9 +285,8 @@ const isAllCheckboxesUnchecked = function() {
return true;
};
const setFilePriority = function(id, priority) {
const setFilePriority = function(ids, fileIds, priority) {
if (current_hash === "") return;
const ids = Array.isArray(id) ? id : [id];
clearTimeout(loadTorrentFilesDataTimer);
new Request({
@ -223,7 +294,7 @@ const setFilePriority = function(id, priority) {
method: 'post',
data: {
'hash': current_hash,
'id': ids.join('|'),
'id': fileIds.join('|'),
'priority': priority
},
onComplete: function() {
@ -231,11 +302,16 @@ const setFilePriority = function(id, priority) {
}
}).send();
const ignore = (priority === FilePriority.Ignored);
ids.forEach(function(_id) {
torrentFilesTable.setIgnored(_id, ignore);
const combobox = $('comboPrio' + _id);
if (combobox !== null)
selectComboboxPriority(combobox, priority);
});
torrentFilesTable.updateTable(false);
};
let loadTorrentFilesDataTimer;
@ -252,9 +328,11 @@ const loadTorrentFilesData = function() {
loadTorrentFilesDataTimer = loadTorrentFilesData.delay(5000);
return;
}
let loadedNewTorrent = false;
if (new_hash != current_hash) {
torrentFilesTable.clear();
current_hash = new_hash;
loadedNewTorrent = true;
}
const url = new URI('api/v2/torrents/files?hash=' + current_hash);
new Request.JSON({
@ -266,43 +344,16 @@ const loadTorrentFilesData = function() {
loadTorrentFilesDataTimer = loadTorrentFilesData.delay(5000);
},
onSuccess: function(files) {
const selectedFiles = torrentFilesTable.selectedRowsIds();
clearTimeout(torrentFilesFilterInputTimer);
if (!files) {
if (files.length === 0) {
torrentFilesTable.clear();
return;
}
let i = 0;
files.each(function(file) {
if (i === 0)
is_seed = file.is_seed;
const row = {
rowId: i,
checked: (file.priority !== FilePriority.Ignored),
name: escapeHtml(file.name),
size: file.size,
progress: (file.progress * 100).round(1),
priority: normalizePriority(file.priority),
remaining: (file.size * (1.0 - file.progress)),
availability: file.availability
};
if ((row.progress === 100) && (file.progress < 1))
row.progress = 99.9;
++i;
torrentFilesTable.updateRowData(row);
}.bind(this));
torrentFilesTable.updateTable(false);
torrentFilesTable.altRow();
if (selectedFiles.length > 0)
torrentFilesTable.reselectRows(selectedFiles);
setGlobalCheckboxState();
else {
handleNewTorrentFiles(files);
if (loadedNewTorrent)
collapseAllNodes();
}
}
}).send();
};
@ -312,33 +363,154 @@ updateTorrentFilesData = function() {
loadTorrentFilesData();
};
const handleNewTorrentFiles = function(files) {
is_seed = (files.length > 0) ? files[0].is_seed : true;
const rows = files.map(function(file, index) {
let progress = (file.progress * 100).round(1);
if ((progress === 100) && (file.progress < 1))
progress = 99.9;
const name = escapeHtml(file.name);
const ignore = (file.priority === FilePriority.Ignored);
const checked = (ignore ? TriState.Unchecked : TriState.Checked);
const remaining = (ignore ? 0 : (file.size * (1.0 - file.progress)));
const row = {
fileId: index,
checked: checked,
fileName: name,
name: fileName(name),
size: file.size,
progress: progress,
priority: normalizePriority(file.priority),
remaining: remaining,
availability: file.availability
};
return row;
});
addRowsToTable(rows);
updateGlobalCheckbox();
};
const addRowsToTable = function(rows) {
const selectedFiles = torrentFilesTable.selectedRowsIds();
let rowId = 0;
const rootNode = new FolderNode();
rows.forEach(function(row) {
let parent = rootNode;
const pathFolders = row.fileName.split(PathSeparator);
pathFolders.pop();
pathFolders.forEach(function(folderName) {
if (folderName === '.unwanted')
return;
let parentNode = null;
if (parent.children !== null) {
for (let i = 0; i < parent.children.length; ++i) {
const childFolder = parent.children[i];
if (childFolder.name === folderName) {
parentNode = childFolder;
break;
}
}
}
if (parentNode === null) {
parentNode = new FolderNode();
parentNode.name = folderName;
parentNode.rowId = rowId;
parentNode.root = parent;
parent.addChild(parentNode);
++rowId;
}
parent = parentNode;
});
const isChecked = row.checked ? TriState.Checked : TriState.Unchecked;
const remaining = (row.priority === FilePriority.Ignored) ? 0 : row.remaining;
const childNode = new FileNode();
childNode.name = row.name;
childNode.rowId = rowId;
childNode.size = row.size;
childNode.checked = isChecked;
childNode.remaining = remaining;
childNode.progress = row.progress;
childNode.priority = row.priority;
childNode.availability = row.availability;
childNode.root = parent;
childNode.data = row;
parent.addChild(childNode);
++rowId;
}.bind(this));
torrentFilesTable.populateTable(rootNode);
torrentFilesTable.updateTable(false);
torrentFilesTable.altRow();
if (selectedFiles.length > 0)
torrentFilesTable.reselectRows(selectedFiles);
};
const collapseIconClicked = function(event) {
const id = event.get("data-id");
const node = torrentFilesTable.getNode(id);
const isCollapsed = (event.parentElement.get("data-collapsed") === "true");
if (isCollapsed)
expandNode(node);
else
collapseNode(node);
};
const filesPriorityMenuClicked = function(priority) {
const selectedRows = torrentFilesTable.selectedRowsIds();
if (selectedRows.length === 0) return;
const rowIds = [];
const fileIds = [];
selectedRows.forEach(function(rowId) {
const elem = $('comboPrio' + rowId);
rowIds.push(rowId);
fileIds.push(elem.get("data-file-id"));
});
const uniqueRowIds = {};
const uniqueFileIds = {};
for (let i = 0; i < rowIds.length; ++i) {
const rows = getAllChildren(rowIds[i], fileIds[i]);
rows.rowIds.forEach(function(rowId) {
uniqueRowIds[rowId] = true;
});
rows.fileIds.forEach(function(fileId) {
uniqueFileIds[fileId] = true;
});
}
setFilePriority(Object.keys(uniqueRowIds), Object.keys(uniqueFileIds), priority);
};
const torrentFilesContextMenu = new ContextMenu({
targets: '#torrentFilesTableDiv tr',
menu: 'torrentFilesMenu',
actions: {
FilePrioIgnore: function(element, ref) {
const selectedRows = torrentFilesTable.selectedRowsIds();
if (selectedRows.length === 0) return;
setFilePriority(selectedRows, FilePriority.Ignored);
FilePrioIgnore: function(element, ref) {
filesPriorityMenuClicked(FilePriority.Ignored);
},
FilePrioNormal: function(element, ref) {
const selectedRows = torrentFilesTable.selectedRowsIds();
if (selectedRows.length === 0) return;
setFilePriority(selectedRows, FilePriority.Normal);
filesPriorityMenuClicked(FilePriority.Normal);
},
FilePrioHigh: function(element, ref) {
const selectedRows = torrentFilesTable.selectedRowsIds();
if (selectedRows.length === 0) return;
setFilePriority(selectedRows, FilePriority.High);
filesPriorityMenuClicked(FilePriority.High);
},
FilePrioMaximum: function(element, ref) {
const selectedRows = torrentFilesTable.selectedRowsIds();
if (selectedRows.length === 0) return;
setFilePriority(selectedRows, FilePriority.Maximum);
filesPriorityMenuClicked(FilePriority.Maximum);
}
},
offsets: {
@ -369,3 +541,134 @@ if (tableHeaders.length > 0) {
// default sort by name column
if (torrentFilesTable.getSortedColumn() === null)
torrentFilesTable.setSortedColumn('name');
let prevTorrentFilesFilterValue;
let torrentFilesFilterInputTimer = null;
// listen for changes to torrentFilesFilterInput
$('torrentFilesFilterInput').addEvent('input', function() {
const value = $('torrentFilesFilterInput').get("value");
if (value !== prevTorrentFilesFilterValue) {
prevTorrentFilesFilterValue = value;
torrentFilesTable.setFilter(value);
clearTimeout(torrentFilesFilterInputTimer);
torrentFilesFilterInputTimer = setTimeout(function() {
if (current_hash === "") return;
torrentFilesTable.updateTable(false);
if (value.trim() === "")
collapseAllNodes();
else
expandAllNodes();
}, 400);
}
});
/**
* Show/hide a node's row
*/
const _hideNode = function(node, shouldHide) {
const span = $('filesTablefileName' + node.rowId);
// span won't exist if row has been filtered out
if (span === null)
return;
const rowElem = span.parentElement.parentElement;
if (shouldHide)
rowElem.addClass("invisible");
else
rowElem.removeClass("invisible");
}
/**
* Update a node's collapsed state and icon
*/
const _updateNodeState = function(node, isCollapsed) {
const span = $('filesTablefileName' + node.rowId);
// span won't exist if row has been filtered out
if (span === null)
return;
const td = span.parentElement;
const rowElem = td.parentElement;
// store collapsed state
td.set("data-collapsed", isCollapsed);
// rotate the collapse icon
const collapseIcon = td.getElementsByClassName("filesTableCollapseIcon")[0];
if (isCollapsed)
collapseIcon.addClass("rotate");
else
collapseIcon.removeClass("rotate");
}
const _isCollapsed = function(node) {
const span = $('filesTablefileName' + node.rowId);
if (span === null)
return true;
const td = span.parentElement;
return (td.get("data-collapsed") === "true");
};
const expandNode = function(node) {
_collapseNode(node, false, false, false);
torrentFilesTable.altRow();
};
const collapseNode = function(node) {
_collapseNode(node, true, false, false);
torrentFilesTable.altRow();
};
const expandAllNodes = function() {
const root = torrentFilesTable.getRoot();
root.children.each(function(node) {
node.children.each(function(child) {
_collapseNode(child, false, true, false);
});
});
torrentFilesTable.altRow();
};
const collapseAllNodes = function() {
const root = torrentFilesTable.getRoot();
root.children.each(function(node) {
node.children.each(function(child) {
_collapseNode(child, true, true, false);
});
});
torrentFilesTable.altRow();
}
/**
* Collapses a folder node with the option to recursively collapse all children
* @param {FolderNode} node the node to collapse/expand
* @param {boolean} shouldCollapse true if the node should be collapsed, false if it should be expanded
* @param {boolean} applyToChildren true if the node's children should also be collapsed, recursively
* @param {boolean} isChildNode true if the current node is a child of the original node we collapsed/expanded
*/
const _collapseNode = function(node, shouldCollapse, applyToChildren, isChildNode) {
if (!node.isFolder)
return;
const shouldExpand = !shouldCollapse;
const isNodeCollapsed = _isCollapsed(node);
const nodeInCorrectState = ((shouldCollapse && isNodeCollapsed) || (shouldExpand && !isNodeCollapsed));
const canSkipNode = (isChildNode && (!applyToChildren || nodeInCorrectState));
if (!isChildNode || applyToChildren || !canSkipNode)
_updateNodeState(node, shouldCollapse);
node.children.each(function(child) {
_hideNode(child, shouldCollapse);
if (!child.isFolder)
return;
// don't expand children that have been independently collapsed, unless applyToChildren is true
const shouldExpandChildren = (shouldExpand && applyToChildren);
const isChildCollapsed = _isCollapsed(child);
if (!shouldExpandChildren && isChildCollapsed)
return;
_collapseNode(child, shouldCollapse, applyToChildren, true);
});
};

2
src/webui/www/webui.qrc
View File

@ -30,6 +30,8 @@
<file>private/scripts/contextmenu.js</file>
<file>private/scripts/download.js</file>
<file>private/scripts/dynamicTable.js</file>
<file>private/scripts/file-tree.js</file>
<file>private/scripts/filesystem.js</file>
<file>private/scripts/lib/clipboard-2.0.0.min.js</file>
<file>private/scripts/lib/mocha-0.9.6-yc.js</file>
<file>private/scripts/lib/mootools-1.2-core-yc.js</file>