Create script.js

web/script.js

@@ -0,0 +1,185 @@
+const searchForm = document.getElementById("search-form");
+const searchQueryInput = document.getElementById("search-query");
+const timelimitSelect = document.getElementById("timelimit");
+const safesearchSelect = document.getElementById("safesearch");
+const resultsContainer = document.getElementById("results");
+const suggestionsContainer = document.getElementById("suggestions");
+const peopleAlsoSearchList = document.getElementById(
+  "people-also-search-list"
+);
+const peopleAlsoSearchSection = document.getElementById(
+  "people-also-search-section"
+);
+const aboutSection = document.getElementById("about-section");
+const sidebar = document.getElementById("sidebar");
+
+searchQueryInput.addEventListener("input", async () => {
+  const searchQuery = searchQueryInput.value;
+  if (searchQuery.trim() === "") {
+    suggestionsContainer.style.display = "none";
+    return;
+  }
+
+  try {
+    const data = await eel.get_suggestions(searchQuery)();
+    displaySuggestions(data);
+  } catch (error) {
+    console.error("Error:", error);
+    suggestionsContainer.style.display = "none";
+  }
+});
+
+searchQueryInput.addEventListener("focus", () => {
+  if (searchQueryInput.value.trim() !== "") {
+    suggestionsContainer.style.display = "block";
+  }
+});
+
+document.addEventListener("click", (event) => {
+  if (!searchForm.contains(event.target)) {
+    suggestionsContainer.style.display = "none";
+  }
+});
+
+searchForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const searchQuery = searchQueryInput.value;
+  const timelimit = timelimitSelect.value;
+  const safesearch = safesearchSelect.value;
+  await performSearch(searchQuery, timelimit, safesearch);
+});
+
+function displaySuggestions(suggestions) {
+  suggestionsContainer.innerHTML = "";
+  if (suggestions.length === 0) {
+    suggestionsContainer.style.display = "none";
+    return;
+  }
+  const suggestionList = document.createElement("ul");
+  suggestions.forEach((suggestion) => {
+    const listItem = document.createElement("li");
+    listItem.textContent = suggestion.phrase;
+    listItem.addEventListener("click", () => {
+      searchQueryInput.value = suggestion.phrase;
+      suggestionsContainer.style.display = "none";
+      performSearch(suggestion.phrase);
+    });
+    suggestionList.appendChild(listItem);
+  });
+  suggestionsContainer.appendChild(suggestionList);
+  suggestionsContainer.style.display = "block";
+}
+
+async function performSearch(query, timelimit, safesearch) {
+  try {
+    const searchResults = await eel.perform_search(
+      query,
+      timelimit,
+      safesearch
+    )();
+    displayResults(searchResults);
+    suggestionsContainer.style.display = "none";
+
+    // Get "People Also Search For" data
+    const peopleAlsoSearchData = await eel.get_people_also_search(query)();
+    
+    // Display "About" section
+    const aboutDescription = peopleAlsoSearchData.find(
+      (item) => item.topic === null
+    );
+    if (aboutDescription) {
+      document.getElementById("about-description").textContent =
+        aboutDescription.text;
+      aboutSection.style.display = "block";
+    } else {
+      aboutSection.style.display = "none";
+    }
+
+    const peopleAlsoSearchItems = peopleAlsoSearchData.filter(
+      (item) => item.topic === "See also"
+    );
+    displayPeopleAlsoSearch(peopleAlsoSearchItems.slice(0, 6));
+    if (peopleAlsoSearchItems.length > 0) {
+      peopleAlsoSearchSection.style.display = "block";
+    } else {
+      peopleAlsoSearchSection.style.display = "none";
+    }
+
+    if (aboutSection.style.display === "block" || peopleAlsoSearchSection.style.display === "block") {
+      sidebar.style.display = "block";
+      document.querySelector(".main-content").style.marginLeft = "320px";
+    } else {
+      sidebar.style.display = "none";
+      document.querySelector(".main-content").style.marginLeft = "0px";
+    }
+  } catch (error) {
+    console.error("Error:", error);
+    displayError("An error occurred while fetching results.");
+  }
+}
+
+function displayPeopleAlsoSearch(data) {
+  peopleAlsoSearchList.innerHTML = "";
+
+  if (data.length === 0) {
+    return;
+  }
+
+  data.forEach((item) => {
+    const listItem = document.createElement("li");
+    const link = document.createElement("a");
+    link.href = item.url;
+    link.textContent = item.text;
+    link.target = "_blank";
+    link.rel = "noopener noreferrer";
+    listItem.appendChild(link);
+    peopleAlsoSearchList.appendChild(listItem);
+  });
+}
+
+function displayResults(results) {
+  resultsContainer.innerHTML = "";
+  if (results.length === 0) {
+    displayError("No results found.");
+    return;
+  }
+
+  results.forEach((result) => {
+    const resultElement = document.createElement("div");
+    resultElement.classList.add("result");
+
+    const titleElement = document.createElement("h3");
+    const titleLink = document.createElement("a");
+    titleLink.href = result.href;
+    titleLink.textContent = result.title;
+    titleLink.target = "_blank";
+    titleLink.rel = "noopener noreferrer";
+    titleElement.appendChild(titleLink);
+
+    const urlElement = document.createElement("div");
+    urlElement.classList.add("url");
+    urlElement.textContent = result.href;
+
+    const descriptionElement = document.createElement("p");
+    descriptionElement.textContent = result.body;
+
+    resultElement.appendChild(titleElement);
+    resultElement.appendChild(urlElement);
+    resultElement.appendChild(descriptionElement);
+    resultsContainer.appendChild(resultElement);
+  });
+}
+
+function displayError(message) {
+  resultsContainer.innerHTML = "";
+  const errorElement = document.createElement("p");
+  errorElement.textContent = message;
+  errorElement.style.color = "red";
+  resultsContainer.appendChild(errorElement);
+}
+
+function toggleSettings() {
+  const settingsMenu = document.getElementById("settings-menu");
+  settingsMenu.style.display =
+    settingsMenu.style.display === "block" ? "none" : "block";
+}