Search

include/js/script.js

@@ -274,6 +274,9 @@ document.addEventListener('DOMContentLoaded', function() {
     // Initialize SortableJS for drag-and-drop
     initSortable();
     
+    // Initialize search functionality
+    initSearch();
+    
     // Add form submit handlers to format URLs before submission
     // Use event delegation to handle dynamically created forms
     document.addEventListener('submit', function(event) {
@@ -385,4 +388,184 @@ function optimizeImage(path) {
             alert('A network error occurred: ' + error.message);
         });
     }
+}
+
+// Search functionality
+function initSearch() {
+    const searchInput = document.getElementById('searchInput');
+    const searchButton = document.getElementById('searchButton');
+    const searchEngineButton = document.getElementById('searchEngineButton');
+    const searchResults = document.getElementById('searchResults');
+    
+    if (!searchInput || !searchResults) return;
+    
+    let searchTimeout;
+    let allBookmarks = [];
+    
+    // Load all bookmarks on page load
+    loadAllBookmarks();
+    
+    // Search input event
+    searchInput.addEventListener('input', function() {
+        clearTimeout(searchTimeout);
+        const query = this.value.trim();
+        
+        if (query.length < 2) {
+            hideSearchResults();
+            return;
+        }
+        
+        searchTimeout = setTimeout(() => {
+            performSearch(query);
+        }, 300);
+    });
+    
+    // Search button click
+    if (searchButton) {
+        searchButton.addEventListener('click', function() {
+            const query = searchInput.value.trim();
+            if (query.length >= 2) {
+                performSearch(query);
+            }
+        });
+    }
+    
+    // Search engine button click
+    if (searchEngineButton) {
+        searchEngineButton.addEventListener('click', function() {
+            const query = searchInput.value.trim();
+            if (query) {
+                searchOnWeb(query);
+            }
+        });
+    }
+    
+    // Hide search results when clicking outside
+    document.addEventListener('click', function(event) {
+        if (!searchInput.contains(event.target) && !searchResults.contains(event.target)) {
+            hideSearchResults();
+        }
+    });
+    
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(event) {
+        // Ctrl+K to focus search
+        if (event.ctrlKey && event.key === 'k') {
+            event.preventDefault();
+            searchInput.focus();
+        }
+        
+        // Escape to hide results
+        if (event.key === 'Escape') {
+            hideSearchResults();
+            searchInput.blur();
+        }
+    });
+    
+    function loadAllBookmarks() {
+        // Extract bookmarks from the current page
+        const bookmarkElements = document.querySelectorAll('.bookmark-link, .list-group-item a');
+        allBookmarks = [];
+        
+        bookmarkElements.forEach(element => {
+            const title = element.textContent.trim();
+            const url = element.href;
+            const icon = element.querySelector('img')?.src || 'include/images/default-icon.png';
+            
+            // Find category name
+            let categoryName = '';
+            const categoryElement = element.closest('.category-column');
+            if (categoryElement) {
+                const categoryTitle = categoryElement.querySelector('h5');
+                if (categoryTitle) {
+                    categoryName = categoryTitle.textContent.trim();
+                }
+            }
+            
+            allBookmarks.push({
+                title: title,
+                url: url,
+                icon: icon,
+                category: categoryName
+            });
+        });
+    }
+    
+    function performSearch(query) {
+        const results = allBookmarks.filter(bookmark => 
+            bookmark.title.toLowerCase().includes(query.toLowerCase()) ||
+            bookmark.url.toLowerCase().includes(query.toLowerCase()) ||
+            bookmark.category.toLowerCase().includes(query.toLowerCase())
+        );
+        
+        displaySearchResults(results, query);
+    }
+    
+    function displaySearchResults(results, query) {
+        searchResults.innerHTML = '';
+        
+        if (results.length === 0) {
+            searchResults.innerHTML = `
+                <div class="search-no-results">
+                    Geen bladwijzers gevonden voor "${query}"
+                </div>
+            `;
+        } else {
+            // Add search engine options
+            searchResults.innerHTML = `
+                <div class="search-engine-results">
+                    <div class="search-engine-item" onclick="searchOnWeb('${query}')">
+                        <i class="bi bi-globe me-2"></i>
+                        Zoek "${query}" op Google
+                    </div>
+                    <div class="search-engine-item" onclick="searchOnDuckDuckGo('${query}')">
+                        <i class="bi bi-search me-2"></i>
+                        Zoek "${query}" op DuckDuckGo
+                    </div>
+                </div>
+            `;
+            
+            // Add bookmark results
+            results.forEach(bookmark => {
+                const resultItem = document.createElement('div');
+                resultItem.className = 'search-result-item';
+                resultItem.onclick = () => {
+                    window.open(bookmark.url, '_blank');
+                    hideSearchResults();
+                };
+                
+                resultItem.innerHTML = `
+                    <img src="${bookmark.icon}" alt="" class="bookmark-icon" onerror="this.onerror=null;this.src='include/images/default-icon.png';">
+                    <div class="bookmark-info">
+                        <div class="bookmark-title">${bookmark.title}</div>
+                        <div class="bookmark-url">${bookmark.url}</div>
+                    </div>
+                    ${bookmark.category ? `<span class="bookmark-category">${bookmark.category}</span>` : ''}
+                `;
+                
+                searchResults.appendChild(resultItem);
+            });
+        }
+        
+        showSearchResults();
+    }
+    
+    function showSearchResults() {
+        searchResults.classList.add('show');
+    }
+    
+    function hideSearchResults() {
+        searchResults.classList.remove('show');
+    }
+}
+
+// Search engine functions
+function searchOnWeb(query) {
+    const searchUrl = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
+    window.open(searchUrl, '_blank');
+}
+
+function searchOnDuckDuckGo(query) {
+    const searchUrl = `https://duckduckgo.com/?q=${encodeURIComponent(query)}`;
+    window.open(searchUrl, '_blank');
 }