| gio | 1bf0080 | 2024-08-17 12:31:41 +0400 | [diff] [blame] | 1 | function delaySearch(func, wait) { |
| 2 | let timeout; |
| 3 | return function (...args) { |
| 4 | clearTimeout(timeout); |
| 5 | timeout = setTimeout(() => func.apply(this, args), wait); |
| 6 | }; |
| 7 | } |
| 8 | |
| 9 | document.addEventListener("DOMContentLoaded", function () { |
| 10 | let searchRequestCount = 0; |
| 11 | const page = document.documentElement; |
| 12 | const headerHeight = parseFloat(getComputedStyle(page).getPropertyValue('--pico-header-height').replace("px", "")); |
| 13 | const nav = document.getElementById("menu"); |
| 14 | const windowHeight = window.innerHeight - headerHeight; |
| 15 | nav.style.setProperty("--max-height", `${windowHeight}px`); |
| 16 | const menu = document.getElementById("menu-nav"); |
| 17 | const menuHeight = parseFloat(getComputedStyle(document.getElementById('menu-nav')).height.replace("px", "")) + 15; |
| 18 | menu.style.setProperty("height", `${menuHeight}px`); |
| 19 | const searchForm = document.getElementById('search-form'); |
| 20 | const searchInput = document.getElementById('search-input'); |
| 21 | function fetchAndUpdateAppList() { |
| 22 | searchRequestCount++; |
| 23 | const currentRequest = searchRequestCount; |
| 24 | const formData = new FormData(searchForm); |
| 25 | const query = formData.get('query'); |
| 26 | const pageType = document.getElementById('page-type').value; |
| 27 | const url = `/${pageType}?query=${encodeURIComponent(query)}`; |
| 28 | fetch(url, { |
| 29 | method: 'GET' |
| 30 | }) |
| 31 | .then(response => response.text()) |
| 32 | .then(html => { |
| 33 | if (currentRequest !== searchRequestCount) { |
| 34 | return; |
| 35 | } |
| 36 | const tempDiv = document.createElement('div'); |
| 37 | tempDiv.innerHTML = html; |
| 38 | const newAppListHTML = tempDiv.querySelector('#app-list').innerHTML; |
| 39 | const appListContainer = document.getElementById("app-list"); |
| 40 | appListContainer.innerHTML = newAppListHTML; |
| 41 | }) |
| 42 | .catch(error => console.error('Error fetching app list:', error)); |
| 43 | } |
| 44 | const delayedFetchAndUpdateAppList = delaySearch(fetchAndUpdateAppList, 300); |
| 45 | searchForm.addEventListener('submit', (event) => { |
| 46 | event.preventDefault(); |
| 47 | fetchAndUpdateAppList(); |
| 48 | }); |
| 49 | searchInput.addEventListener('input', () => { |
| 50 | delayedFetchAndUpdateAppList(); |
| 51 | }); |
| 52 | }); |
| 53 | |
| 54 | let prevWindowHeight = window.innerHeight; |
| 55 | |
| 56 | window.addEventListener("resize", function () { |
| 57 | const nav = document.getElementById("menu"); |
| 58 | const windowHeight = window.innerHeight; |
| 59 | const heightDiff = prevWindowHeight - windowHeight; |
| 60 | const currentMaxHeight = parseFloat(nav.style.getPropertyValue("--max-height").replace("px", "")); |
| 61 | if (!isNaN(currentMaxHeight)) { |
| 62 | const newMaxHeight = currentMaxHeight - heightDiff; |
| 63 | nav.style.setProperty("--max-height", `${newMaxHeight}px`); |
| 64 | } |
| 65 | prevWindowHeight = windowHeight; |
| 66 | }); |