WebUI: Implement path autocompletion

PR #20906.
This commit is contained in:
Paweł Kotiuk 2024-07-05 08:24:02 +02:00 committed by GitHub
parent 5ef2a1df07
commit d87533bf4c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 122 additions and 13 deletions

View File

@ -10,6 +10,7 @@
<script src="scripts/lib/MooTools-More-1.6.0-compat-compressed.js"></script>
<script src="scripts/download.js?v=${CACHEID}"></script>
<script src="scripts/misc.js?locale=${LANG}&v=${CACHEID}"></script>
<script src="scripts/pathAutofill.js?v=${CACHEID}"></script>
</head>
<body>
@ -38,7 +39,7 @@
<label for="savepath">QBT_TR(Save files to location:)QBT_TR[CONTEXT=HttpServer]</label>
</td>
<td>
<input type="text" id="savepath" name="savepath" style="width: 16em;" />
<input type="text" id="savepath" name="savepath" class="pathDirectory" style="width: 16em;" />
</td>
</tr>
<tr>
@ -191,6 +192,8 @@
if (submitted)
window.parent.qBittorrent.Client.closeWindows();
});
window.qBittorrent.pathAutofill.attachPathAutofill();
</script>
</body>

View File

@ -39,6 +39,7 @@
<script defer src="scripts/rename-files.js?v=${CACHEID}"></script>
<script defer src="scripts/client.js?locale=${LANG}&v=${CACHEID}"></script>
<script defer src="scripts/contextmenu.js?locale=${LANG}&v=${CACHEID}"></script>
<script defer src="scripts/pathAutofill.js?v=${CACHEID}"></script>
</head>
<body>

View File

@ -8,6 +8,7 @@
<script src="scripts/lib/MooTools-Core-1.6.0-compat-compressed.js"></script>
<script src="scripts/lib/MooTools-More-1.6.0-compat-compressed.js"></script>
<script src="scripts/misc.js?locale=${LANG}&v=${CACHEID}"></script>
<script src="scripts/pathAutofill.js?v=${CACHEID}"></script>
<script>
"use strict";
@ -131,6 +132,8 @@
}
});
});
window.qBittorrent.pathAutofill.attachPathAutofill();
</script>
</head>
@ -139,7 +142,7 @@
<p style="font-weight: bold;">QBT_TR(Category)QBT_TR[CONTEXT=TransferListWidget]:</p>
<input type="text" id="categoryName" style="width: 99%;" />
<p style="font-weight: bold;">QBT_TR(Save path)QBT_TR[CONTEXT=TransferListWidget]:</p>
<input type="text" id="savePath" style="width: 99%;" />
<input type="text" id="savePath" class="pathDirectory" style="width: 99%;" />
<div style="text-align: center; padding-top: 10px;">
<input type="button" value="QBT_TR(Add)QBT_TR[CONTEXT=HttpServer]" id="categoryNameButton" />
</div>

View File

@ -8,6 +8,7 @@
<script src="scripts/lib/MooTools-Core-1.6.0-compat-compressed.js"></script>
<script src="scripts/lib/MooTools-More-1.6.0-compat-compressed.js"></script>
<script src="scripts/misc.js?locale=${LANG}&v=${CACHEID}"></script>
<script src="scripts/pathAutofill.js?v=${CACHEID}"></script>
<script>
"use strict";
@ -60,13 +61,15 @@
}).send();
});
});
window.qBittorrent.pathAutofill.attachPathAutofill();
</script>
</head>
<body>
<div style="padding: 10px 10px 0px 10px;">
<p style="font-weight: bold;">QBT_TR(Folder name:)QBT_TR[CONTEXT=RSSWidget]</p>
<input type="text" id="folderName" style="width: 320px;" />
<input type="text" id="folderName" class="pathDirectory" style="width: 320px;" />
<div style="text-align: center; padding-top: 10px;">
<input type="button" value="QBT_TR(OK)QBT_TR[CONTEXT=HttpServer]" id="submitButton" />
</div>

View File

@ -0,0 +1,93 @@
/*
* Bittorrent Client using Qt and libtorrent.
* Copyright (C) 2024 Paweł Kotiuk <kotiuk@zohomail.eu>
*
* 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";
/*
File implementing auto-fill for the path input field in the path dialogs.
*/
if (window.qBittorrent === undefined)
window.qBittorrent = {};
if (window.qBittorrent.pathAutofill === undefined) {
window.qBittorrent.pathAutofill = (() => {
const exports = () => {
return {
attachPathAutofill: attachPathAutofill
};
};
function showInputSuggestions(inputElement, names) {
const datalist = document.createElement("datalist");
datalist.id = inputElement.id + "Suggestions";
for (const name of names) {
const option = document.createElement("option");
option.value = name;
datalist.appendChild(option);
}
const oldDatalist = document.getElementById(`${inputElement.id}Suggestions`);
if (oldDatalist !== null) {
oldDatalist.replaceWith(datalist);
}
else {
inputElement.appendChild(datalist);
inputElement.setAttribute("list", datalist.id);
}
}
function showPathSuggestions(element, mode) {
const partialPath = element.value;
if (partialPath === "")
return;
fetch(`api/v2/app/getDirectoryContent?dirPath=${partialPath}&mode=${mode}`)
.then(response => response.json())
.then(filesList => { showInputSuggestions(element, filesList); })
.catch(error => {});
}
function attachPathAutofill() {
const directoryInputs = document.querySelectorAll(".pathDirectory:not(.pathAutoFillInitialized)");
for (const input of directoryInputs) {
input.addEventListener("input", function() { showPathSuggestions(this, "dirs"); });
input.classList.add("pathAutoFillInitialized");
}
const fileInputs = document.querySelectorAll(".pathFile:not(.pathAutoFillInitialized)");
for (const input of fileInputs) {
input.addEventListener("input", function() { showPathSuggestions(this, "all"); });
input.classList.add("pathAutoFillInitialized");
}
};
return exports();
})();
Object.freeze(window.qBittorrent.pathAutofill);
};

View File

@ -8,6 +8,7 @@
<link rel="stylesheet" href="css/Window.css?v=${CACHEID}" type="text/css" />
<script src="scripts/lib/MooTools-Core-1.6.0-compat-compressed.js"></script>
<script src="scripts/download.js?v=${CACHEID}"></script>
<script src="scripts/pathAutofill.js?v=${CACHEID}"></script>
</head>
<body>
@ -34,7 +35,7 @@
<label for="savepath">QBT_TR(Save files to location:)QBT_TR[CONTEXT=HttpServer]</label>
</td>
<td>
<input type="text" id="savepath" name="savepath" style="width: 16em;" />
<input type="text" id="savepath" name="savepath" class="pathDirectory" style="width: 16em;" />
</td>
</tr>
<tr>
@ -171,6 +172,8 @@
if ((Browser.platform === "ios") || ((Browser.platform === "mac") && (navigator.maxTouchPoints > 1)))
$("fileselect").accept = ".torrent";
window.qBittorrent.pathAutofill.attachPathAutofill();
</script>
</body>

View File

@ -14,7 +14,7 @@
</legend>
<div class="formRow">
<label for="filelog_save_path_input">QBT_TR(Save path:)QBT_TR[CONTEXT=OptionsDialog]</label>
<input type="text" id="filelog_save_path_input" />
<input type="text" id="filelog_save_path_input" class="pathDirectory" />
</div>
<table>
<tr>
@ -151,7 +151,7 @@
<label for="savepath_text">QBT_TR(Default Save Path:)QBT_TR[CONTEXT=OptionsDialog]</label>
</td>
<td>
<input type="text" id="savepath_text" autocorrect="off" autocapitalize="none" />
<input type="text" id="savepath_text" class="pathDirectory" autocorrect="off" autocapitalize="none" />
</td>
</tr>
<tr>
@ -160,7 +160,7 @@
<label for="temppath_checkbox">QBT_TR(Keep incomplete torrents in:)QBT_TR[CONTEXT=OptionsDialog]</label>
</td>
<td>
<input type="text" id="temppath_text" autocorrect="off" autocapitalize="none" />
<input type="text" id="temppath_text" class="pathDirectory" autocorrect="off" autocapitalize="none" />
</td>
</tr>
<tr>
@ -169,7 +169,7 @@
<label for="exportdir_checkbox">QBT_TR(Copy .torrent files to:)QBT_TR[CONTEXT=OptionsDialog]</label>
</td>
<td>
<input type="text" id="exportdir_text" autocorrect="off" autocapitalize="none" />
<input type="text" id="exportdir_text" class="pathDirectory" autocorrect="off" autocapitalize="none" />
</td>
</tr>
<tr>
@ -178,7 +178,7 @@
<label for="exportdirfin_checkbox">QBT_TR(Copy .torrent files for finished downloads to:)QBT_TR[CONTEXT=OptionsDialog]</label>
</td>
<td>
<input type="text" id="exportdirfin_text" autocorrect="off" autocapitalize="none" />
<input type="text" id="exportdirfin_text" class="pathDirectory" autocorrect="off" autocapitalize="none" />
</td>
</tr>
</table>
@ -810,7 +810,7 @@
<label for="ssl_cert_text">QBT_TR(Certificate:)QBT_TR[CONTEXT=OptionsDialog]</label>
</td>
<td>
<input type="text" id="ssl_cert_text" style="width: 30em;" />
<input type="text" id="ssl_cert_text" class="pathFile" style="width: 30em;" />
</td>
</tr>
<tr>
@ -818,7 +818,7 @@
<label for="ssl_key_text">QBT_TR(Key:)QBT_TR[CONTEXT=OptionsDialog]</label>
</td>
<td>
<input type="text" id="ssl_key_text" style="width: 30em;" />
<input type="text" id="ssl_key_text" class="pathFile" style="width: 30em;" />
</td>
</tr>
</table>
@ -880,7 +880,7 @@
</legend>
<div class="formRow">
<label for="webui_files_location_textarea">QBT_TR(Files location:)QBT_TR[CONTEXT=OptionsDialog]</label>
<input type="text" id="webui_files_location_textarea" />
<input type="text" id="webui_files_location_textarea" class="pathDirectory" />
</div>
</fieldset>
@ -1126,7 +1126,7 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD
<label for="pythonExecutablePath">QBT_TR(Python executable path (may require restart):)QBT_TR[CONTEXT=OptionsDialog]</label>
</td>
<td>
<input type="text" id="pythonExecutablePath" placeholder="QBT_TR((Auto detect if empty))QBT_TR[CONTEXT=OptionsDialog]" style="width: 15em;" />
<input type="text" id="pythonExecutablePath" class="pathFile" placeholder="QBT_TR((Auto detect if empty))QBT_TR[CONTEXT=OptionsDialog]" style="width: 15em;" />
</td>
</tr>
</table>
@ -2896,4 +2896,6 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD
})();
Object.freeze(window.qBittorrent.Preferences);
window.qBittorrent.pathAutofill.attachPathAutofill();
</script>

View File

@ -392,6 +392,7 @@
<file>private/scripts/localpreferences.js</file>
<file>private/scripts/misc.js</file>
<file>private/scripts/mocha-init.js</file>
<file>private/scripts/pathAutofill.js</file>
<file>private/scripts/piecesbar.js</file>
<file>private/scripts/progressbar.js</file>
<file>private/scripts/prop-files.js</file>