Spitfire/Search
Spitfire/Search
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

code cleanup & fixed compatibility for non-JS users & fixed fullscreen images being in low resolution

Browse source
This commit is contained in:
partisan 2024-11-19 10:36:33 +01:00
parent 0d083f53e7
commit db89f9c781
13 changed files with 474 additions and 300 deletions
Download patch file Download diff file Expand all files Collapse all files

48
templates/images.html
View file

@ -153,9 +153,9 @@
<button name="t" value="file" class="clickable">{{ translate "torrents" }}</button>
</div>
</div>
{{ if not .JsDisabled }}
<input type="hidden" name="js_enabled" value="true">
{{ end }}
<noscript>
<input type="hidden" name="js_enabled" value="true">
</noscript>
</form>
<form class="results_settings" action="/search" method="get">
<input type="hidden" name="q" value="{{ .Query }}">
@ -179,11 +179,13 @@
{{ range $index, $result := .Results }}
<div class="image">
{{ if $.HardCacheEnabled }}
{{ if $.JsDisabled }}
<noscript>
<!-- JavaScript is disabled; serve actual images -->
<img src="{{ $result.ProxyFull }}" alt="{{ $result.Title }}" class="clickable" />
{{ else }}
<!-- JavaScript is enabled; use placeholders -->
</noscript>
<!-- JavaScript is enabled; use placeholders -->
<div id="content" class="js-enabled">
<img
src="/static/images/placeholder.svg"
data-id="{{ $result.ID }}"
@ -192,7 +194,7 @@
alt="{{ $result.Title }}"
class="clickable"
/>
{{ end }}
</div>
{{ else }}
<!-- HardCacheEnabled is false; serve images directly -->
<img src="{{ $result.ProxyFull }}" alt="{{ $result.Title }}" class="clickable" />
@ -294,7 +296,7 @@
if (isFetching || noMoreImages) return;
isFetching = true;
page += 1;
fetch(`/search?q=${encodeURIComponent(query)}&t=image&p=${page}&ajax=true`)
.then(response => response.text())
.then(html => {
@ -302,13 +304,13 @@
let parser = new DOMParser();
let doc = parser.parseFromString(html, 'text/html');
let newImages = doc.querySelectorAll('.image');
if (newImages.length > 0) {
let resultsContainer = document.querySelector('.images');
newImages.forEach(imageDiv => {
// Append new images to the container
resultsContainer.appendChild(imageDiv);
// Get the img element
let img = imageDiv.querySelector('img');
if (img) {
@ -318,10 +320,12 @@
img.onerror = function() {
handleImageError(img);
};
let id = img.getAttribute('data-id');
imageElements.push(img);
imageIds.push(id);
if (id) { // Only include if ID is not empty
imageElements.push(img);
imageIds.push(id);
}
}
}
});
@ -381,7 +385,9 @@
// Initialize imageElements and imageIds
if (hardCacheEnabled) {
imageElements = Array.from(document.querySelectorAll('img[data-id]'));
imageIds = imageElements.map(img => img.getAttribute('data-id'));
imageIds = imageElements
.map(img => img.getAttribute('data-id'))
.filter(id => id); // Exclude empty IDs
// Replace images with placeholders
imageElements.forEach(img => {
@ -409,20 +415,6 @@
// Remove 'js-enabled' class from content
document.getElementById('content').classList.remove('js-enabled');
})();
</script>
<script type="text/javascript">
// Check if 'js_enabled' is not present in the URL
if (!window.location.search.includes('js_enabled=true')) {
// Redirect to the same URL with 'js_enabled=true'
var separator = window.location.search.length ? '&' : '?';
window.location.href = window.location.href + separator + 'js_enabled=true';
}
</script>
<script>
// Check if JavaScript is enabled and modify the DOM accordingly
document.getElementById('content').classList.remove('js-enabled');
</script>
</body>
</html>