code cleanup & fixed compatibility for non-JS users & fixed fullscreen images being in low resolution
This commit is contained in:
partisan
parent
0d083f53e7
commit
db89f9c781
13 changed files with 474 additions and 300 deletions
|
|
@ -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>
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
<!-- Images Grid -->
|
||||
{{ range $index, $result := .Results }}
|
||||
<div class="image">
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -7,6 +7,20 @@
|
|||
<meta name="darkreader-lock">
|
||||
{{ end }}
|
||||
<title>{{ translate "site_description" }}</title>
|
||||
<!-- Inline Style to Avoid Flashbang -->
|
||||
<style>
|
||||
body {
|
||||
background-color: {{ if .IsThemeDark }} #121212 {{ else }} #ffffff {{ end }};
|
||||
color: {{ if .IsThemeDark }} #ffffff {{ else }} #000000 {{ end }};
|
||||
}
|
||||
#js-enabled {
|
||||
display: none;
|
||||
}
|
||||
#js-disabled {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="/static/css/style-search.css">
|
||||
<link rel="stylesheet" href="/static/css/{{.Theme}}.css">
|
||||
<link rel="search" type="application/opensearchdescription+xml" title="{{ translate "site_name" }}" href="/opensearch.xml">
|
||||
|
|
@ -17,9 +31,14 @@
|
|||
<link rel="apple-touch-icon" href="{{ .IconPathPNG }}">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Menu Button -->
|
||||
<button class="material-icons-round settings-icon-link-search" onclick="openNav()">menu</button>
|
||||
|
||||
<!-- Menu Button -->
|
||||
<div id="js-enabled">
|
||||
<button class="material-icons-round settings-icon-link-search" onclick="openNav()">menu</button>
|
||||
</div>
|
||||
<div id="js-disabled">
|
||||
<a href="/settings" class="material-icons-round settings-icon-link-search">menu</a>
|
||||
</div>
|
||||
|
||||
<!-- Side Navigation Menu -->
|
||||
<div id="mySidenav" class="side-nav">
|
||||
|
|
@ -140,38 +159,48 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="search-type-icons">
|
||||
<input type="hidden" name="p" value="1">
|
||||
|
||||
<div class="icon-button" onclick="document.getElementById('sub-search-wrapper-ico-text').click()">
|
||||
<button id="sub-search-wrapper-ico-text" class="material-icons-round clickable" name="t" value="text">search</button>
|
||||
<p>{{ translate "web" }}</p>
|
||||
<div class="icon-button">
|
||||
<button id="sub-search-wrapper-ico-text" class="material-icons-round clickable" name="t" value="text">
|
||||
<span>search</span>
|
||||
<p>{{ translate "web" }}</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="icon-button">
|
||||
<button id="sub-search-wrapper-ico-image" class="material-icons-round clickable" name="t" value="image">
|
||||
<span>image</span>
|
||||
<p>{{ translate "images" }}</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="icon-button">
|
||||
<button id="sub-search-wrapper-ico-video" class="material-icons-round clickable" name="t" value="video">
|
||||
<span>movie</span>
|
||||
<p>{{ translate "videos" }}</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="icon-button">
|
||||
<button id="sub-search-wrapper-ico-forum" class="material-icons-round clickable" name="t" value="forum">
|
||||
<span>forum</span>
|
||||
<p>{{ translate "forums" }}</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="icon-button" onclick="document.getElementById('sub-search-wrapper-ico-image').click()">
|
||||
<button id="sub-search-wrapper-ico-image" class="material-icons-round clickable" name="t" value="image">image</button>
|
||||
<p>{{ translate "images" }}</p>
|
||||
<div class="icon-button">
|
||||
<button id="sub-search-wrapper-ico-map" class="material-icons-round clickable" name="t" value="map">
|
||||
<span>map</span>
|
||||
<p>{{ translate "maps" }}</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="icon-button">
|
||||
<button id="sub-search-wrapper-ico-file" class="material-icons-round clickable" name="t" value="file">
|
||||
<span>share</span>
|
||||
<p>{{ translate "torrents" }}</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="icon-button" onclick="document.getElementById('sub-search-wrapper-ico-video').click()">
|
||||
<button id="sub-search-wrapper-ico-video" class="material-icons-round clickable" name="t" value="video">movie</button>
|
||||
<p>{{ translate "videos" }}</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-button" onclick="document.getElementById('sub-search-wrapper-ico-forum').click()">
|
||||
<button id="sub-search-wrapper-ico-forum" class="material-icons-round clickable" name="t" value="forum">forum</button>
|
||||
<p>{{ translate "forums" }}</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-button" onclick="document.getElementById('sub-search-wrapper-ico-map').click()">
|
||||
<button id="sub-search-wrapper-ico-map" class="material-icons-round clickable" name="t" value="map">map</button>
|
||||
<p>{{ translate "maps" }}</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-button" onclick="document.getElementById('sub-search-wrapper-ico-file').click()">
|
||||
<button id="sub-search-wrapper-ico-file" class="material-icons-round clickable" name="t" value="file">share</button>
|
||||
<p>{{ translate "torrents" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
|
@ -180,9 +209,9 @@
|
|||
<script defer src="/static/js/sidemenu.js"></script>
|
||||
<script defer src="/static/js/autocomplete.js"></script>
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.body.style.visibility = 'visible';
|
||||
});
|
||||
// When JS is detected, update the DOM
|
||||
document.getElementById('js-enabled').style.display = 'block';
|
||||
document.getElementById('js-disabled').style.display = 'none';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue