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 */
.slider {
clear: both;
font-size: 12px;
font-weight: bold;
margin-bottom: 15px;
margin: 4px;
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 {

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

@ -5,9 +5,6 @@
<meta charset="UTF-8">
<title>QBT_TR(Torrent Download Speed Limiting)QBT_TR[CONTEXT=TransferListWidget]</title>
<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/color-scheme.js?v=${CACHEID}"></script>
<script src="scripts/speedslider.js?v=${CACHEID}"></script>
@ -15,75 +12,23 @@
<body>
<div style="padding-top: 10px; width: 100%; text-align: center; margin: 0 auto; overflow: hidden">
<div id="dllimitSlider" class="slider">
<div id="dllimitUpdate" class="update">
<label for="dllimitUpdatevalue">QBT_TR(Download limit:)QBT_TR[CONTEXT=PropertiesWidget]</label>
<input type="text" id="dllimitUpdatevalue" size="6" placeholder="∞" style="text-align: center;">
<span id="dlLimitUnit">QBT_TR(KiB/s)QBT_TR[CONTEXT=SpeedLimitDialog]</span>
<div id="limitSlider" class="slider">
<div id="limitUpdate" class="update">
<label for="limitUpdatevalue">QBT_TR(Download limit:)QBT_TR[CONTEXT=PropertiesWidget]</label>
<input type="text" id="limitUpdatevalue" size="6" placeholder="∞" style="text-align: center;">
<span id="limitUnit">QBT_TR(KiB/s)QBT_TR[CONTEXT=SpeedLimitDialog]</span>
</div>
<div class="sliderWrapper">
<div id="dllimitSliderknob" class="sliderknob"></div>
<div id="dllimitSliderarea" class="sliderarea"></div>
</div>
<div class="clear"></div>
<input type="range" id="limitSliderInput" value="0" style="width: 100%;" aria-label="QBT_TR(Download limit)QBT_TR[CONTEXT=PropertiesWidget]">
</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>
<script>
"use strict";
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;
}
});
window.qBittorrent.SpeedSlider.setup("download");
const hashes = new URLSearchParams(window.location.search).get("hashes").split("|");
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);
document.getElementById("limitUpdatevalue").focus();
</script>
</body>

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

@ -28,222 +28,157 @@
"use strict";
MochaUI.extend({
addUpLimitSlider: (hashes) => {
if (document.getElementById("uplimitSliderarea")) {
// Get global upload limit
fetch("api/v2/transfer/uploadLimit", {
method: "GET",
cache: "no-store"
window.qBittorrent ??= {};
window.qBittorrent.SpeedSlider ??= (() => {
const exports = () => {
return {
setup: setup,
setLimit: setLimit,
};
};
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)
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 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";
}
});
}
window.parent.updateMainData();
window.parent.qBittorrent.Client.closeFrameWindow(window);
});
}
},
addDlLimitSlider: (hashes) => {
if (document.getElementById("dllimitSliderarea")) {
// Get global upload limit
fetch("api/v2/transfer/downloadLimit", {
method: "GET",
cache: "no-store"
else {
fetch(`api/v2/torrents/${method}`, {
method: "POST",
body: new URLSearchParams({
hashes: hashes.join("|"),
limit: limit
})
})
.then(async (response) => {
.then((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 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";
}
});
}
window.parent.qBittorrent.Client.closeFrameWindow(window);
});
}
}
});
};
return exports();
})();
Object.freeze(window.qBittorrent.SpeedSlider);

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

@ -5,9 +5,6 @@
<meta charset="UTF-8">
<title>QBT_TR(Torrent Upload Speed Limiting)QBT_TR[CONTEXT=TransferListWidget]</title>
<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/color-scheme.js?v=${CACHEID}"></script>
<script src="scripts/speedslider.js?v=${CACHEID}"></script>
@ -15,75 +12,23 @@
<body>
<div style="padding-top: 10px; width: 100%; text-align: center; margin: 0 auto; overflow: hidden">
<div id="uplimitSlider" class="slider">
<div id="uplimitUpdate" class="update">
<label for="uplimitUpdatevalue">QBT_TR(Upload limit:)QBT_TR[CONTEXT=PropertiesWidget]</label>
<input type="text" id="uplimitUpdatevalue" size="6" placeholder="∞" style="text-align: center;">
<span id="upLimitUnit">QBT_TR(KiB/s)QBT_TR[CONTEXT=SpeedLimitDialog]</span>
<div id="limitSlider" class="slider">
<div id="limitUpdate" class="update">
<label for="limitUpdatevalue">QBT_TR(Upload limit:)QBT_TR[CONTEXT=PropertiesWidget]</label>
<input type="text" id="limitUpdatevalue" size="6" placeholder="∞" style="text-align: center;">
<span id="limitUnit">QBT_TR(KiB/s)QBT_TR[CONTEXT=SpeedLimitDialog]</span>
</div>
<div class="sliderWrapper">
<div id="uplimitSliderknob" class="sliderknob"></div>
<div id="uplimitSliderarea" class="sliderarea"></div>
</div>
<div class="clear"></div>
<input type="range" id="limitSliderInput" value="0" style="width: 100%;" aria-label="QBT_TR(Upload limit)QBT_TR[CONTEXT=PropertiesWidget]">
</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>
<script>
"use strict";
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;
}
});
window.qBittorrent.SpeedSlider.setup("upload");
const hashes = new URLSearchParams(window.location.search).get("hashes").split("|");
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);
document.getElementById("limitUpdatevalue").focus();
</script>
</body>