add proxy-toggle.js

This commit is contained in:
perennial
2024-09-30 21:28:01 +10:00
parent 8b6e8495d4
commit c9649ff3fc
3 changed files with 38 additions and 3 deletions
+27
View File
@@ -0,0 +1,27 @@
document.addEventListener("DOMContentLoaded", function () {
const showAllProxiesToggle = document.getElementById("show-all-proxies");
const imageProxySelect = document.getElementById("image-proxy");
showAllProxiesToggle.addEventListener("change", function () {
const showAll = this.checked;
const options = imageProxySelect.options;
let firstVisibleOption = null;
for (let i = 0; i < options.length; i++) {
const option = options[i];
const proxyType = option.getAttribute("data-proxy-type");
if (proxyType === "working" || (proxyType === "all" && showAll)) {
option.style.display = "";
if (!firstVisibleOption) firstVisibleOption = option;
} else {
option.style.display = "none";
}
}
// If the currently selected option is now hidden, select the first visible option
if (imageProxySelect.selectedOptions[0].style.display === "none") {
firstVisibleOption.selected = true;
}
});
});
+2 -1
View File
@@ -17,7 +17,6 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<script src="/js/illust-preview.js" defer></script>
<!-- TODO: figure out custom themes (e.g. charcoal theme) -->
<!-- <link href="/css/bootstrap-style.css" rel="stylesheet" /> -->
@@ -26,10 +25,12 @@
<script src="/js/htmx@1.9.10.min.js"
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"></script> -->
<!-- TODO: load these JS files only on pages that require them -->
<script src="/js/illust-preview.js" defer></script>
<!-- TODO: can be annoying when you accidentally scroll inside a horizontal scroll area instead of the main content -->
<!-- <script src="/js/horizontal-scroll.js" defer></script> -->
<script src="/js/comment-pagination.js" defer></script>
<script src="/js/proxy-toggle.js" defer></script>
<meta content="summary_large_image" name="twitter:card" />
+9 -2
View File
@@ -82,12 +82,19 @@
also specify a custom proxy server by entering its URL and clicking 'Save Changes'.
</p>
<form action="/settings/imageServer" method="post">
<div class="mb-3 form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="show-all-proxies">
<label class="form-check-label" for="show-all-proxies">Show all proxy servers</label>
</div>
<div class="mb-3">
<label for="image-proxy" class="form-label">Select image proxy server</label>
<select class="form-select" id="image-proxy" name="image-proxy" required>
<option value="">/proxy/i.pximg.net (built-in proxy)</option>
<option value="" data-proxy-type="working">/proxy/i.pximg.net (built-in proxy)</option>
{{- range .WorkingProxyList }}
<option value="{{.}}" data-proxy-type="working">{{.}}</option>
{{- end }}
{{- range .ProxyList }}
<option value="{{.}}">{{.}}</option>
<option value="{{.}}" data-proxy-type="all" style="display: none;">{{.}}</option>
{{- end }}
</select>
</div>