github/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent synced 2025-08-22 06:13:36 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

WebUI: Replace slider with native input range

Browse source
This commit is contained in:
tehcneko 2025-05-25 13:59:37 +08:00
commit 2490659b14
4 changed files with 161 additions and 376 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -418,50 +418,10 @@ a.propButton img {
/* Sliders */ /* Sliders */
.slider { .slider {
clear: both;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
margin-bottom: 15px; margin: 4px;
position: relative; position: relative;
width: 400px;
}
.sliderWrapper {
font-size: 1px;
height: 9px;
line-height: 1px;
position: relative;
width: 422px;
}
.sliderarea {
background: #f2f2f2 url("../images/slider-area.gif") repeat-x;
border: 1px solid #a3a3a3;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
font-size: 1px;
height: 7px;
left: 0;
line-height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
top: 0;
width: 420px;
}
.sliderknob {
background: url("../images/knob.gif") no-repeat;
cursor: pointer;
font-size: 1px;
height: 9px;
left: 0;
line-height: 1px;
overflow: hidden;
position: absolute;
top: 0;
width: 19px;
z-index: 2;
} }
.update { .update {

73
src/webui/www/private/downloadlimit.html
View file

@ -5,9 +5,6 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>QBT_TR(Torrent Download Speed Limiting)QBT_TR[CONTEXT=TransferListWidget]</title> <title>QBT_TR(Torrent Download Speed Limiting)QBT_TR[CONTEXT=TransferListWidget]</title>
<link rel="stylesheet" href="css/style.css?v=${CACHEID}" type="text/css"> <link rel="stylesheet" href="css/style.css?v=${CACHEID}" type="text/css">
<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/lib/mocha.min.js"></script>
<script src="scripts/localpreferences.js?v=${CACHEID}"></script> <script src="scripts/localpreferences.js?v=${CACHEID}"></script>
<script src="scripts/color-scheme.js?v=${CACHEID}"></script> <script src="scripts/color-scheme.js?v=${CACHEID}"></script>
<script src="scripts/speedslider.js?v=${CACHEID}"></script> <script src="scripts/speedslider.js?v=${CACHEID}"></script>
@ -15,75 +12,23 @@
<body> <body>
<div style="padding-top: 10px; width: 100%; text-align: center; margin: 0 auto; overflow: hidden"> <div style="padding-top: 10px; width: 100%; text-align: center; margin: 0 auto; overflow: hidden">
<div id="dllimitSlider" class="slider"> <div id="limitSlider" class="slider">
<div id="dllimitUpdate" class="update"> <div id="limitUpdate" class="update">
<label for="dllimitUpdatevalue">QBT_TR(Download limit:)QBT_TR[CONTEXT=PropertiesWidget]</label> <label for="limitUpdatevalue">QBT_TR(Download limit:)QBT_TR[CONTEXT=PropertiesWidget]</label>
<input type="text" id="dllimitUpdatevalue" size="6" placeholder="∞" style="text-align: center;"> <input type="text" id="limitUpdatevalue" size="6" placeholder="∞" style="text-align: center;">
<span id="dlLimitUnit">QBT_TR(KiB/s)QBT_TR[CONTEXT=SpeedLimitDialog]</span> <span id="limitUnit">QBT_TR(KiB/s)QBT_TR[CONTEXT=SpeedLimitDialog]</span>
</div> </div>
<div class="sliderWrapper"> <input type="range" id="limitSliderInput" value="0" style="width: 100%;" aria-label="QBT_TR(Download limit)QBT_TR[CONTEXT=PropertiesWidget]">
<div id="dllimitSliderknob" class="sliderknob"></div>
<div id="dllimitSliderarea" class="sliderarea"></div>
</div>
<div class="clear"></div>
</div> </div>
<input type="button" id="applyButton" value="QBT_TR(Apply)QBT_TR[CONTEXT=HttpServer]" onclick="setDlLimit()"> <input type="button" id="applyButton" value="QBT_TR(Apply)QBT_TR[CONTEXT=HttpServer]" onclick="window.qBittorrent.SpeedSlider.setLimit('download')">
</div> </div>
<script> <script>
"use strict"; "use strict";
window.addEventListener("keydown", (event) => { window.qBittorrent.SpeedSlider.setup("download");
switch (event.key) {
case "Enter":
event.preventDefault();
document.getElementById("applyButton").click();
break;
case "Escape":
event.preventDefault();
window.parent.qBittorrent.Client.closeFrameWindow(window);
break;
}
});
const hashes = new URLSearchParams(window.location.search).get("hashes").split("|"); document.getElementById("limitUpdatevalue").focus();
const setDlLimit = () => {
const limit = Number(document.getElementById("dllimitUpdatevalue").value) * 1024;
if (hashes[0] === "global") {
fetch("api/v2/transfer/setDownloadLimit", {
method: "POST",
body: new URLSearchParams({
limit: limit
})
})
.then((response) => {
if (!response.ok)
return;
window.parent.updateMainData();
window.parent.qBittorrent.Client.closeFrameWindow(window);
});
}
else {
fetch("api/v2/torrents/setDownloadLimit", {
method: "POST",
body: new URLSearchParams({
hashes: hashes.join("|"),
limit: limit
})
})
.then((response) => {
if (!response.ok)
return;
window.parent.qBittorrent.Client.closeFrameWindow(window);
});
}
};
document.getElementById("dllimitUpdatevalue").focus();
MochaUI.addDlLimitSlider(hashes);
</script> </script>
</body> </body>

349
src/webui/www/private/scripts/speedslider.js
View file

@ -28,222 +28,157 @@
"use strict"; "use strict";
MochaUI.extend({ window.qBittorrent ??= {};
addUpLimitSlider: (hashes) => { window.qBittorrent.SpeedSlider ??= (() => {
if (document.getElementById("uplimitSliderarea")) { const exports = () => {
// Get global upload limit return {
fetch("api/v2/transfer/uploadLimit", { setup: setup,
method: "GET", setLimit: setLimit,
cache: "no-store" };
};
const hashes = new URLSearchParams(window.location.search).get("hashes").split("|");
const setup = (type) => {
window.addEventListener("keydown", (event) => {
switch (event.key) {
case "Enter":
event.preventDefault();
document.getElementById("applyButton").click();
break;
case "Escape":
event.preventDefault();
window.parent.qBittorrent.Client.closeFrameWindow(window);
break;
}
});
const method = type === "upload" ? "uploadLimit" : "downloadLimit";
// Get global upload limit
fetch(`api/v2/transfer/${method}`, {
method: "GET",
cache: "no-store"
})
.then(async (response) => {
if (!response.ok)
return;
const data = await response.text();
let maximum = 500;
const tmp = Number(data);
if (tmp > 0) {
maximum = tmp / 1024.0;
}
else {
if (hashes[0] === "global")
maximum = 10000;
else
maximum = 1000;
}
// Get torrents download limit
// And create slider
if (hashes[0] === "global") {
let limit = maximum;
if (limit < 0)
limit = 0;
maximum = 10000;
setupSlider(Math.round(limit), maximum);
}
else {
fetch(`api/v2/torrents/${method}`, {
method: "POST",
body: new URLSearchParams({
hashes: hashes.join("|")
})
})
.then(async (response) => {
if (!response.ok)
return;
const data = await response.json();
let limit = data[hashes[0]];
for (const key in data) {
if (limit !== data[key]) {
limit = 0;
break;
}
}
if (limit < 0)
limit = 0;
setupSlider(Math.round(limit / 1024), maximum);
});
}
});
};
const setupSlider = (limit, maximum) => {
const input = document.getElementById("limitSliderInput");
input.setAttribute("max", maximum);
input.setAttribute("min", 0);
input.value = limit;
input.addEventListener("input", (event) => {
const pos = Number(event.target.value);
if (pos > 0) {
document.getElementById("limitUpdatevalue").value = pos;
document.getElementById("limitUnit").style.visibility = "visible";
}
else {
document.getElementById("limitUpdatevalue").value = "∞";
document.getElementById("limitUnit").style.visibility = "hidden";
}
});
// Set default value
if (limit === 0) {
document.getElementById("limitUpdatevalue").value = "∞";
document.getElementById("limitUnit").style.visibility = "hidden";
}
else {
document.getElementById("limitUpdatevalue").value = limit;
document.getElementById("limitUnit").style.visibility = "visible";
}
};
const setLimit = (type) => {
const limit = Number(document.getElementById("limitUpdatevalue").value) * 1024;
const method = type === "upload" ? "setUploadLimit" : "setDownloadLimit";
if (hashes[0] === "global") {
fetch(`api/v2/transfer/${method}`, {
method: "POST",
body: new URLSearchParams({
limit: limit
})
}) })
.then(async (response) => { .then((response) => {
if (!response.ok) if (!response.ok)
return; return;
const data = await response.text(); window.parent.updateMainData();
window.parent.qBittorrent.Client.closeFrameWindow(window);
let maximum = 500;
const tmp = Number(data);
if (tmp > 0) {
maximum = tmp / 1024.0;
}
else {
if (hashes[0] === "global")
maximum = 10000;
else
maximum = 1000;
}
// Get torrents upload limit
// And create slider
if (hashes[0] === "global") {
let up_limit = maximum;
if (up_limit < 0)
up_limit = 0;
maximum = 10000;
new Slider(document.getElementById("uplimitSliderarea"), document.getElementById("uplimitSliderknob"), {
steps: maximum,
offset: 0,
initialStep: Math.round(up_limit),
onChange: (pos) => {
if (pos > 0) {
document.getElementById("uplimitUpdatevalue").value = pos;
document.getElementById("upLimitUnit").style.visibility = "visible";
}
else {
document.getElementById("uplimitUpdatevalue").value = "∞";
document.getElementById("upLimitUnit").style.visibility = "hidden";
}
}
});
// Set default value
if (up_limit === 0) {
document.getElementById("uplimitUpdatevalue").value = "∞";
document.getElementById("upLimitUnit").style.visibility = "hidden";
}
else {
document.getElementById("uplimitUpdatevalue").value = Math.round(up_limit);
document.getElementById("upLimitUnit").style.visibility = "visible";
}
}
else {
fetch("api/v2/torrents/uploadLimit", {
method: "POST",
body: new URLSearchParams({
hashes: hashes.join("|")
})
})
.then(async (response) => {
if (!response.ok)
return;
const data = await response.json();
let up_limit = data[hashes[0]];
for (const key in data) {
if (up_limit !== data[key]) {
up_limit = 0;
break;
}
}
if (up_limit < 0)
up_limit = 0;
new Slider(document.getElementById("uplimitSliderarea"), document.getElementById("uplimitSliderknob"), {
steps: maximum,
offset: 0,
initialStep: Math.round(up_limit / 1024),
onChange: (pos) => {
if (pos > 0) {
document.getElementById("uplimitUpdatevalue").value = pos;
document.getElementById("upLimitUnit").style.visibility = "visible";
}
else {
document.getElementById("uplimitUpdatevalue").value = "∞";
document.getElementById("upLimitUnit").style.visibility = "hidden";
}
}
});
// Set default value
if (up_limit === 0) {
document.getElementById("uplimitUpdatevalue").value = "∞";
document.getElementById("upLimitUnit").style.visibility = "hidden";
}
else {
document.getElementById("uplimitUpdatevalue").value = Math.round(up_limit / 1024);
document.getElementById("upLimitUnit").style.visibility = "visible";
}
});
}
}); });
} }
}, else {
fetch(`api/v2/torrents/${method}`, {
addDlLimitSlider: (hashes) => { method: "POST",
if (document.getElementById("dllimitSliderarea")) { body: new URLSearchParams({
// Get global upload limit hashes: hashes.join("|"),
fetch("api/v2/transfer/downloadLimit", { limit: limit
method: "GET", })
cache: "no-store"
}) })
.then(async (response) => { .then((response) => {
if (!response.ok) if (!response.ok)
return; return;
const data = await response.text(); window.parent.qBittorrent.Client.closeFrameWindow(window);
let maximum = 500;
const tmp = Number(data);
if (tmp > 0) {
maximum = tmp / 1024.0;
}
else {
if (hashes[0] === "global")
maximum = 10000;
else
maximum = 1000;
}
// Get torrents download limit
// And create slider
if (hashes[0] === "global") {
let dl_limit = maximum;
if (dl_limit < 0)
dl_limit = 0;
maximum = 10000;
new Slider(document.getElementById("dllimitSliderarea"), document.getElementById("dllimitSliderknob"), {
steps: maximum,
offset: 0,
initialStep: Math.round(dl_limit),
onChange: (pos) => {
if (pos > 0) {
document.getElementById("dllimitUpdatevalue").value = pos;
document.getElementById("dlLimitUnit").style.visibility = "visible";
}
else {
document.getElementById("dllimitUpdatevalue").value = "∞";
document.getElementById("dlLimitUnit").style.visibility = "hidden";
}
}
});
// Set default value
if (dl_limit === 0) {
document.getElementById("dllimitUpdatevalue").value = "∞";
document.getElementById("dlLimitUnit").style.visibility = "hidden";
}
else {
document.getElementById("dllimitUpdatevalue").value = Math.round(dl_limit);
document.getElementById("dlLimitUnit").style.visibility = "visible";
}
}
else {
fetch("api/v2/torrents/downloadLimit", {
method: "POST",
body: new URLSearchParams({
hashes: hashes.join("|")
})
})
.then(async (response) => {
if (!response.ok)
return;
const data = await response.json();
let dl_limit = data[hashes[0]];
for (const key in data) {
if (dl_limit !== data[key]) {
dl_limit = 0;
break;
}
}
if (dl_limit < 0)
dl_limit = 0;
new Slider(document.getElementById("dllimitSliderarea"), document.getElementById("dllimitSliderknob"), {
steps: maximum,
offset: 0,
initialStep: Math.round(dl_limit / 1024),
onChange: (pos) => {
if (pos > 0) {
document.getElementById("dllimitUpdatevalue").value = pos;
document.getElementById("dlLimitUnit").style.visibility = "visible";
}
else {
document.getElementById("dllimitUpdatevalue").value = "∞";
document.getElementById("dlLimitUnit").style.visibility = "hidden";
}
}
});
// Set default value
if (dl_limit === 0) {
document.getElementById("dllimitUpdatevalue").value = "∞";
document.getElementById("dlLimitUnit").style.visibility = "hidden";
}
else {
document.getElementById("dllimitUpdatevalue").value = Math.round(dl_limit / 1024);
document.getElementById("dlLimitUnit").style.visibility = "visible";
}
});
}
}); });
} }
} };
});
return exports();
})();
Object.freeze(window.qBittorrent.SpeedSlider);

73
src/webui/www/private/uploadlimit.html
View file

@ -5,9 +5,6 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>QBT_TR(Torrent Upload Speed Limiting)QBT_TR[CONTEXT=TransferListWidget]</title> <title>QBT_TR(Torrent Upload Speed Limiting)QBT_TR[CONTEXT=TransferListWidget]</title>
<link rel="stylesheet" href="css/style.css?v=${CACHEID}" type="text/css"> <link rel="stylesheet" href="css/style.css?v=${CACHEID}" type="text/css">
<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/lib/mocha.min.js"></script>
<script src="scripts/localpreferences.js?v=${CACHEID}"></script> <script src="scripts/localpreferences.js?v=${CACHEID}"></script>
<script src="scripts/color-scheme.js?v=${CACHEID}"></script> <script src="scripts/color-scheme.js?v=${CACHEID}"></script>
<script src="scripts/speedslider.js?v=${CACHEID}"></script> <script src="scripts/speedslider.js?v=${CACHEID}"></script>
@ -15,75 +12,23 @@
<body> <body>
<div style="padding-top: 10px; width: 100%; text-align: center; margin: 0 auto; overflow: hidden"> <div style="padding-top: 10px; width: 100%; text-align: center; margin: 0 auto; overflow: hidden">
<div id="uplimitSlider" class="slider"> <div id="limitSlider" class="slider">
<div id="uplimitUpdate" class="update"> <div id="limitUpdate" class="update">
<label for="uplimitUpdatevalue">QBT_TR(Upload limit:)QBT_TR[CONTEXT=PropertiesWidget]</label> <label for="limitUpdatevalue">QBT_TR(Upload limit:)QBT_TR[CONTEXT=PropertiesWidget]</label>
<input type="text" id="uplimitUpdatevalue" size="6" placeholder="∞" style="text-align: center;"> <input type="text" id="limitUpdatevalue" size="6" placeholder="∞" style="text-align: center;">
<span id="upLimitUnit">QBT_TR(KiB/s)QBT_TR[CONTEXT=SpeedLimitDialog]</span> <span id="limitUnit">QBT_TR(KiB/s)QBT_TR[CONTEXT=SpeedLimitDialog]</span>
</div> </div>
<div class="sliderWrapper"> <input type="range" id="limitSliderInput" value="0" style="width: 100%;" aria-label="QBT_TR(Upload limit)QBT_TR[CONTEXT=PropertiesWidget]">
<div id="uplimitSliderknob" class="sliderknob"></div>
<div id="uplimitSliderarea" class="sliderarea"></div>
</div>
<div class="clear"></div>
</div> </div>
<input type="button" id="applyButton" value="QBT_TR(Apply)QBT_TR[CONTEXT=HttpServer]" onclick="setUpLimit()"> <input type="button" id="applyButton" value="QBT_TR(Apply)QBT_TR[CONTEXT=HttpServer]" onclick="window.qBittorrent.SpeedSlider.setLimit('upload')">
</div> </div>
<script> <script>
"use strict"; "use strict";
window.addEventListener("keydown", (event) => { window.qBittorrent.SpeedSlider.setup("upload");
switch (event.key) {
case "Enter":
event.preventDefault();
document.getElementById("applyButton").click();
break;
case "Escape":
event.preventDefault();
window.parent.qBittorrent.Client.closeFrameWindow(window);
break;
}
});
const hashes = new URLSearchParams(window.location.search).get("hashes").split("|"); document.getElementById("limitUpdatevalue").focus();
const setUpLimit = () => {
const limit = Number(document.getElementById("uplimitUpdatevalue").value) * 1024;
if (hashes[0] === "global") {
fetch("api/v2/transfer/setUploadLimit", {
method: "POST",
body: new URLSearchParams({
limit: limit
})
})
.then((response) => {
if (!response.ok)
return;
window.parent.updateMainData();
window.parent.qBittorrent.Client.closeFrameWindow(window);
});
}
else {
fetch("api/v2/torrents/setUploadLimit", {
method: "POST",
body: new URLSearchParams({
hashes: hashes.join("|"),
limit: limit
})
})
.then((response) => {
if (!response.ok)
return;
window.parent.qBittorrent.Client.closeFrameWindow(window);
});
}
};
document.getElementById("uplimitUpdatevalue").focus();
MochaUI.addUpLimitSlider(hashes);
</script> </script>
</body> </body>