Hide Search Engines
diff --git a/locales/en.js b/locales/en.js
index 7ca165a0..aca1beae 100644
--- a/locales/en.js
+++ b/locales/en.js
@@ -48,6 +48,8 @@ const en = {
// Search
"micIconTitle": "Hide Microphone Icon",
"micIconInfo": "If voice typing is not working",
+ "switchSearchModes": "Switch Search Modes",
+ "switchSearchModesInfo": "Click on ‘Search With’ to change the mode",
"hideSearchWith": "Hide Search Engines",
"hideSearchWithInfo": "Switch between search engines by clicking its icon",
"motivationalQuotesText": "Motivational Quotes",
@@ -104,6 +106,7 @@ const en = {
"searchPlaceholder": "Type here...",
"listenPlaceholder": "Listening...",
"searchWithHint": "Search With",
+ "searchOnHint": "Search On",
"userText": "Click here to edit",
// Greeting
@@ -120,6 +123,8 @@ const en = {
"bingEngine": "Bing",
"braveEngine": "Brave",
"youtubeEngine": "YouTube",
+ "gImagesEngine": "Images",
+ "wikipediaEngine": "Wikipedia",
// AI Tools
"ai_tools": "AI Tools",
diff --git a/locales/hi.js b/locales/hi.js
index 2d2f7aff..230dc284 100644
--- a/locales/hi.js
+++ b/locales/hi.js
@@ -101,6 +101,7 @@ const hi = {
"searchPlaceholder": "यहाँ लिखें...",
"listenPlaceholder": "सुन रहे हैं...",
"searchWithHint": "खोज माध्यम",
+ "searchOnHint": "खोज स्रोत",
"userText": "यहाँ अपना टेक्स्ट लिखें",
// Greeting
@@ -117,6 +118,8 @@ const hi = {
"bingEngine": "बिंग",
"braveEngine": "ब्रेव",
"youtubeEngine": "यूट्यूब",
+ "gImagesEngine": "इमेज़्स",
+ "wikipediaEngine": "विकिपीडिया",
// AI Tools
"ai_tools": "AI उपकरण",
diff --git a/manifest(firefox).json b/manifest(firefox).json
index 5558dd69..bb4e2e9e 100644
--- a/manifest(firefox).json
+++ b/manifest(firefox).json
@@ -8,7 +8,8 @@
"bookmarks",
"https://www.google.com/complete/search*",
"https://duckduckgo.com/ac/*",
- "https://search.brave.com/api/suggest*"
+ "https://search.brave.com/api/suggest*",
+ "https://*.wikipedia.org/w/api.php?action=opensearch&search=*"
],
"background": {
"scripts": ["scripts/background.js"],
diff --git a/manifest.json b/manifest.json
index d52a280f..bfa71708 100644
--- a/manifest.json
+++ b/manifest.json
@@ -8,7 +8,8 @@
"host_permissions": [
"https://www.google.com/complete/search*",
"https://duckduckgo.com/ac/*",
- "https://search.brave.com/api/suggest*"
+ "https://search.brave.com/api/suggest*",
+ "https://*.wikipedia.org/w/api.php?action=opensearch&search=*"
],
"icons": {
"16": "favicon/icon16.png",
diff --git a/scripts/languages.js b/scripts/languages.js
index a7ad7949..fb31d412 100644
--- a/scripts/languages.js
+++ b/scripts/languages.js
@@ -111,6 +111,8 @@ function applyLanguage(lang) {
'hideWeatherBoxInfo',
'micIconTitle',
'micIconInfo',
+ 'switchSearchModes',
+ 'switchSearchModesInfo',
'hideSearchWith',
'hideSearchWithInfo',
'motivationalQuotesText',
@@ -141,7 +143,6 @@ function applyLanguage(lang) {
'saveAPI',
'conditionText',
'enterBtn',
- 'searchWithHint',
'ai_tools',
'humidityLevel',
'feelsLike',
@@ -152,6 +153,8 @@ function applyLanguage(lang) {
'bingEngine',
'braveEngine',
'youtubeEngine',
+ 'gImagesEngine',
+ 'wikipediaEngine',
'chatGPT',
'gemini',
'copilot',
@@ -200,6 +203,8 @@ function applyLanguage(lang) {
{ id: 'bingEngineDD', key: 'bingEngine' },
{ id: 'braveEngineDD', key: 'braveEngine' },
{ id: 'youtubeEngineDD', key: 'youtubeEngine' },
+ { id: 'gImagesEngineDD', key: 'gImagesEngine' },
+ { id: 'wikipediaEngineDD', key: 'wikipediaEngine' },
{ id: 'bookmarksHover', key: 'bookmarksHeading' },
{ id: 'saveproxy', key: 'saveAPI' },
{ id: 'saveLoc', key: 'saveAPI' },
diff --git a/scripts/script.js b/scripts/script.js
index 1c1109be..9ba23cbc 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -31,6 +31,51 @@ document.addEventListener("click", function (event) {
}
});
+// Search mode function
+const searchWith = document.getElementById('searchWithHint');
+const searchEngines = document.querySelectorAll('.searchEnginesContainer .search-engine');
+const searchEnginesContainer = document.querySelector('.searchEnginesContainer');
+let activeSearchMode = localStorage.getItem("activeSearchMode") || "search-with";
+
+searchWith.addEventListener('click', function (event) {
+ activeSearchMode = (activeSearchMode === 'search-with') ? 'search-on' : 'search-with';
+ searchEnginesContainer.classList.toggle('show');
+ toggleSearchEngines(activeSearchMode);
+
+ event.stopPropagation();
+ searchInput.focus();
+ searchbar.classList.add("active");
+
+ setTimeout(() => {
+ searchEnginesContainer.classList.remove('show');
+ }, 300);
+});
+
+function toggleSearchEngines(category) {
+ const defaultItems = {
+ 'search-with': "engine0",
+ 'search-on': "engine5",
+ };
+ const checkeditem = localStorage.getItem(`selectedSearchEngine-${category}`) || defaultItems[category];
+ const searchModeName = category === "search-with" ? "searchWithHint" : "searchOnHint";
+ searchWith.innerText = translations[currentLanguage][searchModeName] || translations["en"][searchModeName];
+
+ searchEngines.forEach(engine => {
+ if (engine.getAttribute('data-category') === category) {
+ engine.style.display = 'flex';
+ } else {
+ engine.style.display = 'none';
+ }
+ if (engine.lastElementChild.value === checkeditem && !engine.lastElementChild.checked) {
+ engine.lastElementChild.click(); // Click only if it's not already selected
+
+ if (document.activeElement === searchInput) {
+ searchInput.blur();
+ }
+ }
+ });
+}
+
// Search function
document.addEventListener("DOMContentLoaded", () => {
const dropdown = document.querySelector(".dropdown-content");
@@ -100,7 +145,8 @@ document.addEventListener("DOMContentLoaded", () => {
swapDropdown(selector);
sortDropdown()
- localStorage.setItem("selectedSearchEngine", radioButton.value);
+ localStorage.setItem(`selectedSearchEngine-${radioButton.parentElement.dataset.category}`, radioButton.value);
+ localStorage.setItem(`activeSearchMode`, radioButton.parentElement.dataset.category);
});
});
@@ -120,7 +166,8 @@ document.addEventListener("DOMContentLoaded", () => {
swapDropdown(selector);
sortDropdown();
- localStorage.setItem("selectedSearchEngine", radioButton.value);
+ localStorage.setItem(`selectedSearchEngine-${radioButton.parentElement.dataset.category}`, radioButton.value);
+ localStorage.setItem(`activeSearchMode`, radioButton.parentElement.dataset.category);
searchInput.focus();
searchbar.classList.add("active");
@@ -151,12 +198,15 @@ document.addEventListener("DOMContentLoaded", () => {
function performSearch() {
var selectedOption = document.querySelector('input[name="search-engine"]:checked').value;
var searchTerm = searchInput.value;
+ const languageCode = (localStorage.getItem("selectedLanguage") || "en").slice(0, 2);
var searchEngines = {
engine1: "https://www.google.com/search?q=",
engine2: "https://duckduckgo.com/?q=",
engine3: "https://bing.com/?q=",
engine4: "https://search.brave.com/search?q=",
- engine5: "https://www.youtube.com/results?search_query="
+ engine5: "https://www.youtube.com/results?search_query=",
+ engine6: "https://www.google.com/search?tbm=isch&q=",
+ engine7: `https://${languageCode}.wikipedia.org/wiki/Special:Search?search=`
};
if (searchTerm !== "") {
@@ -189,7 +239,12 @@ document.addEventListener("DOMContentLoaded", () => {
});
// Set selected search engine from local storage
- const storedSearchEngine = localStorage.getItem("selectedSearchEngine");
+ let activeSearchMode = localStorage.getItem("activeSearchMode") || "search-with";
+ const storedSearchEngine = localStorage.getItem(`selectedSearchEngine-${activeSearchMode}`);
+
+ if (activeSearchMode) {
+ toggleSearchEngines(activeSearchMode);
+ }
if (storedSearchEngine) {
// Find Serial Number - SN with the help of charAt.
@@ -280,8 +335,9 @@ document.addEventListener("DOMContentLoaded", () => {
// Event listener for search engine radio buttons
searchEngineRadio.forEach((radio) => {
radio.addEventListener("change", () => {
- const selectedOption = document.querySelector('input[name="search-engine"]:checked').value;
- localStorage.setItem("selectedSearchEngine", selectedOption);
+ const selectedOption = document.querySelector('input[name="search-engine"]:checked');
+ localStorage.setItem(`selectedSearchEngine-${selectedOption.parentElement.dataset.category}`, selectedOption.value);
+ localStorage.setItem(`activeSearchMode`, selectedOption.parentElement.dataset.category);
});
});
diff --git a/scripts/search-suggestions.js b/scripts/search-suggestions.js
index 830a4ff1..fe0f1ff6 100644
--- a/scripts/search-suggestions.js
+++ b/scripts/search-suggestions.js
@@ -68,6 +68,7 @@ function hideResultBox() {
showResultBox();
hideResultBox();
+const languageCode = (localStorage.getItem("selectedLanguage") || "en").slice(0, 2);
document.getElementById("searchQ").addEventListener("input", async function () {
const searchsuggestionscheckbox = document.getElementById("searchsuggestionscheckbox");
if (searchsuggestionscheckbox.checked) {
@@ -77,7 +78,9 @@ document.getElementById("searchQ").addEventListener("input", async function () {
engine2: "https://duckduckgo.com/?q=",
engine3: "https://bing.com/?q=",
engine4: "https://search.brave.com/search?q=",
- engine5: "https://www.youtube.com/results?search_query="
+ engine5: "https://www.youtube.com/results?search_query=",
+ engine6: "https://www.google.com/search?tbm=isch&q=",
+ engine7: `https://${languageCode}.wikipedia.org/wiki/Special:Search?search=`
};
const query = this.value;
@@ -205,7 +208,9 @@ async function getAutocompleteSuggestions(query) {
engine2: `https://duckduckgo.com/ac/?q=${encodeURIComponent(query)}&type=list`,
engine3: `https://www.google.com/complete/search?client=${clientParam}&q=${encodeURIComponent(query)}`,
engine4: `https://search.brave.com/api/suggest?q=${encodeURIComponent(query)}&rich=true&source=web`,
- engine5: `https://www.google.com/complete/search?client=${clientParam}&ds=yt&q=${encodeURIComponent(query)}`
+ engine5: `https://www.google.com/complete/search?client=${clientParam}&ds=yt&q=${encodeURIComponent(query)}`,
+ engine6: `https://www.google.com/complete/search?client=${clientParam}&q=${encodeURIComponent(query)}`,
+ engine7: `https://${languageCode}.wikipedia.org/w/api.php?action=opensearch&search=${encodeURIComponent(query)}&format=json`
};
const useproxyCheckbox = document.getElementById("useproxyCheckbox");
let apiUrl = searchEnginesapi[selectedOption];
diff --git a/style.css b/style.css
index 746002f7..0f857265 100644
--- a/style.css
+++ b/style.css
@@ -1752,26 +1752,40 @@ body #bookmarkButton.bookmark-button.rotate {
.searchWithCont {
margin-top: var(--gap);
- border-radius: var(--round);
+ border-radius: 20px;
position: relative;
display: flex;
font-size: 1rem;
+ z-index: 2; /* Ensures it's above the engines container */
+ overflow: hidden; /* Prevents child elements from overflowing outside */
+ max-width: 100%;
}
.searchWithCont .hint {
- /* background-color: var(--accentLightTint-blue); */
- width: 200px;
+ min-width: 124px;
+ max-width: 156px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
- padding: 10px;
+ padding: 13px;
position: relative;
- margin-right: 16px;
+ margin-right: 5px; /* 16px */
border-radius: var(--round);
+ cursor: pointer;
+ transition: transform 0.4s ease;
}
-.searchWithCont .hint::after {
+.searchWithCont .hint:hover {
+ background-color: var(--darkColor-blue);
+ color: #fff;
+}
+
+.searchWithCont .hint:active {
+ scale: 0.98;
+}
+
+/* .searchWithCont .hint::after {
content: "";
position: absolute;
width: 6px;
@@ -1779,17 +1793,34 @@ body #bookmarkButton.bookmark-button.rotate {
background-color: var(--accentLightTint-blue);
border-radius: 3px;
right: -20px;
-}
+} */
.searchEnginesContainer {
+ position: relative;
+ z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 20px;
padding-left: 20px;
+ opacity: 1;
+ transform: translateX(0);
+}
+.searchEnginesContainer.show {
+ animation: slideIn 0.3s ease-in-out forwards;
+}
+
+@keyframes slideIn {
+ from {
+ transform: translateX(100%);
+ opacity: 0.2;
+ }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
}
.searchEnginesContainer .search-engine {
- /* background-color: var(--accentLightTint-blue); */
border-radius: 20px;
height: 40px;
display: flex;
@@ -1797,6 +1828,8 @@ body #bookmarkButton.bookmark-button.rotate {
justify-content: center;
position: relative;
cursor: pointer;
+ opacity: 1;
+ transition: opacity 0.3s ease-in-out;
}
.searchEnginesContainer .search-engine svg {