home/links
2
0
Fork 0
mirror of https://github.com/wahyd4/links.git synced 2026-08-08 21:04:53 +10:00
Code Issues Packages Projects Releases Wiki Activity

Update js

Browse Source
This commit is contained in:
junv
2026-01-18 11:00:12 +11:00
parent 2d1f8bbd1d
commit 3d5c95f46f
1 changed files with 0 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/base.html
-137
View File
@@ -27,26 +27,6 @@
#search-results div:hover, #search-results div.active {
background-color: #e2e8f0;
}
.search-container {
position: relative;
width: 40px;
transition: width 0.3s ease-in-out;
}
.search-container.expanded {
width: 200px;
}
#search-input {
width: 100%;
padding-left: 30px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>');
background-repeat: no-repeat;
background-position: 8px center;
background-size: 16px;
cursor: pointer;
}
#search-input:focus {
cursor: text;
}
/* Scroll-responsive navigation styles */
.nav-hidden {
@@ -80,10 +60,6 @@
<div class="container mx-auto flex justify-between items-center">
<a href="{% url 'link_list' %}" class="text-xl font-bold">{% trans "GoLinks" %}</a>
<div class="flex items-center space-x-4">
<div class="search-container">
<input type="text" id="search-input" class="bg-transparent text-white rounded px-2 py-1" placeholder="">
<div id="search-results" class="absolute top-full left-0 right-0 bg-white border border-gray-300 rounded mt-1 hidden"></div>
</div>
<!-- "Menus" 下拉菜单 -->
<div class="relative group">
<button id="more-menu-button" class="flex items-center text-white hover:text-gray-200">
@@ -244,119 +220,6 @@
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const searchContainer = document.querySelector('.search-container');
const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');
let currentFocus = -1;
searchInput.addEventListener('focus', function() {
searchContainer.classList.add('expanded');
this.placeholder = "{% trans 'Search aliases...' %}";
});
searchInput.addEventListener('blur', function() {
if (this.value === '') {
searchContainer.classList.remove('expanded');
this.placeholder = "";
}
});
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
searchInput.addEventListener('input', debounce(function(e) {
const query = e.target.value.trim();
if (query.length === 0) {
searchResults.style.display = 'none';
return;
}
const url = `/search/?q=${encodeURIComponent(query)}`;
fetch(url)
.then(response => response.json())
.then(data => {
searchResults.innerHTML = '';
if (Array.isArray(data) && data.length > 0) {
data.forEach(item => {
if (item && typeof item === 'object' && 'alias' in item && 'url' in item) {
const div = document.createElement('div');
div.className = 'p-2 hover:bg-gray-100';
const aliasLink = document.createElement('a');
aliasLink.href = item.url;
aliasLink.textContent = item.alias;
aliasLink.className = 'text-blue-600 hover:underline block';
div.appendChild(aliasLink);
searchResults.appendChild(div);
} else {
console.warn('Invalid item in search results:', item);
}
});
searchResults.style.display = 'block';
} else {
searchResults.innerHTML = '<div class="p-2">{% trans "No results found" %}</div>';
searchResults.style.display = 'block';
}
})
.catch(error => {
console.error('Error:', error);
searchResults.style.display = 'none';
});
}, 300));
searchInput.addEventListener('keydown', function(e) {
let x = searchResults.getElementsByTagName("div");
if (e.keyCode == 40) {
currentFocus++;
addActive(x);
} else if (e.keyCode == 38) {
currentFocus--;
addActive(x);
} else if (e.keyCode == 13) {
e.preventDefault();
if (currentFocus > -1) {
if (x) x[currentFocus].querySelector('a').click();
}
}
});
function addActive(x) {
if (!x) return false;
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
x[currentFocus].classList.add("active");
}
function removeActive(x) {
for (let i = 0; i < x.length; i++) {
x[i].classList.remove("active");
}
}
document.addEventListener("click", function (e) {
if (e.target !== searchInput && e.target !== searchResults) {
searchResults.style.display = "none";
}
});
});
</script>
{% block extra_js %}{% endblock %}
</body>
</html>