diff --git a/index.js b/index.js
index a8fab08..115b68b 100644
--- a/index.js
+++ b/index.js
@@ -8,6 +8,7 @@ import {
toggleArrows,
changeSlide,
addEventListenerOnTag,
+ getSearchTerm,
} from './js_modules/utils.js';
import { displayLoading, hideLoading } from './js_modules/loading_spinner.js';
import { changeGlow } from './js_modules/colors.js';
@@ -210,9 +211,13 @@ addEventListenerOnID('movies-search', 'click', Search.movies);
addEventListenerOnID('tv-search', 'click', Search.tv);
addEventListenerOnID('games-search', 'click', Search.games);
addEventListenerOnID('ebooks-search', 'click', Search.ebooks);
-addEventListenerOnID('searchTerm', 'input', Search.switchToCLI);
+addEventListenerOnID('searchTerm', 'input', Search.processSearchboxInput);
+addEventListenerOnID('searchTerm', 'click', () => {
+ const x = new InputEvent('input');
+ getSearchTerm().dispatchEvent(x);
+});
+addEventListenerOnID('searchBarFocusMode', 'click', Search.hideSearchBG);
addEventListenerOnID('searchTerm', 'keypress', Search.enterToSearch);
-addEventListenerOnID('searchTermPlaceholderItem', 'click', Search.autofill);
addEventListenerOnID('fetch-bookmarks-btn', 'click', fetchBookmarks);
addEventListenerOnID('left-arrow', 'click', (event) => {
@@ -262,9 +267,11 @@ const pressAndHold = () => {
const validElements = ['gradient_overlay',
'wrap',
'bookmarks',
+ 'autofillContainer',
'flex-main-container-vertical',
'subtitle',
- 'footer'];
+ 'footer',
+ ];
if (
validElements.includes(x)
) {
diff --git a/js_modules/load_preferences.js b/js_modules/load_preferences.js
index 4dc1cad..011790e 100644
--- a/js_modules/load_preferences.js
+++ b/js_modules/load_preferences.js
@@ -374,38 +374,24 @@ export function defaultSearchEngine(value) {
function searchbarTheme(value) {
const searchContainer = document.getElementById('searchContainer');
- const searchAutofill = document.getElementById('searchTermPlaceholderItem');
-
-
+ sessionStorage.setItem('searchbar-color-theme-drop', value);
switch (value) {
case 'glass': {
searchContainer.classList.add('searchbox-style-glass');
searchContainer.classList.remove('searchbox-style-light');
searchContainer.classList.remove('searchbox-style-dark');
-
- searchAutofill.classList.add('searchbox-style-glass');
- searchAutofill.classList.remove('searchbox-style-light');
- searchAutofill.classList.remove('searchbox-style-dark');
break;
};
case 'light': {
searchContainer.classList.remove('searchbox-style-glass');
searchContainer.classList.add('searchbox-style-light');
searchContainer.classList.remove('searchbox-style-dark');
-
- searchAutofill.classList.remove('searchbox-style-glass');
- searchAutofill.classList.add('searchbox-style-light');
- searchAutofill.classList.remove('searchbox-style-dark');
break;
};
case 'dark': {
searchContainer.classList.remove('searchbox-style-glass');
searchContainer.classList.remove('searchbox-style-light');
searchContainer.classList.add('searchbox-style-dark');
-
- searchAutofill.classList.remove('searchbox-style-glass');
- searchAutofill.classList.remove('searchbox-style-light');
- searchAutofill.classList.add('searchbox-style-dark');
break;
};
}
@@ -413,21 +399,32 @@ function searchbarTheme(value) {
function defaultSearchbarPosition(value) {
const searchbar = document.getElementById('searchbar');
+ const autofillContainer = document.getElementById('autofillContainer');
const wrap = document.getElementById('wrap');
+ sessionStorage.setItem('searchbar-position-drop', value);
switch (value) {
case 'top': {
searchbar.style.order = '0';
+ autofillContainer.style.order = '1';
+ autofillContainer.style.bottom = '0em';
+ autofillContainer.style.top = '3em';
wrap.style.margin = '0 auto auto auto';
break;
};
case 'bottom': {
searchbar.style.order = '1';
+ autofillContainer.style.order = '0';
+ autofillContainer.style.bottom = '2em';
+ autofillContainer.style.top = '';
wrap.style.margin = 'auto auto 0 auto';
break;
};
case 'middle': {
searchbar.style.order = '0';
+ autofillContainer.style.order = '1';
+ autofillContainer.style.bottom = '0em';
+ autofillContainer.style.top = '3em';
wrap.style.margin = 'auto auto auto auto';
break;
};
diff --git a/js_modules/search.js b/js_modules/search.js
index 98eba72..50f7606 100644
--- a/js_modules/search.js
+++ b/js_modules/search.js
@@ -14,6 +14,8 @@ import { isUrlValid } from './validators.js';
import { Notify } from './utils/notifyDialog.js';
const MSG = 'You must enter a search query to continue.';
+const container = document.querySelector('.autofillContainer');
+const searchBG = document.querySelector('#searchBarFocusMode');
function loadSearchDomain(input) {
let domain = localStorage.getItem('default-search-url');
@@ -88,62 +90,103 @@ export function ebooks() {
}
};
-export function switchToCLI(event) {
- sessionStorage.setItem('input', event.target.value);
+export function processSearchboxInput(event) {
+ const input = event.target.value;
+ sessionStorage.setItem('input', input);
+ switchToCLI(input);
+ showAutofillBox(input);
+ const autofillItems = document.querySelectorAll('.autofillItem');
+ if (autofillItems.length) {
+ const calc = 2.8 * autofillItems.length + 1;
+ searchBG.style.display = 'block';
+ setTimeout(() => {
+ // container.style.opacity = '1';
+ container.style.height = `${calc}em`;
+ container.style.paddingBlock = '0.5em';
+ searchBG.style.opacity = '1';
+ }, 1);
+ } else hideSearchBG();
+};
+
+const switchToCLI = (input) => {
const btnIcon = document.getElementById('search-btn-icon');
- const placeholder = document
- .querySelector('.searchTermPlaceholder');
- const placeholderItem = document
- .querySelector('.searchTermPlaceholderItem');
const currentIcon = localStorage.getItem('default-search-icon');
- if (cliCheck(event.target.value)) {
+ if (cliCheck(input)) {
btnIcon.className = 'fa fa-terminal';
} else {
btnIcon.className = currentIcon;
};
- const autocompleteDatabase =
- JSON.parse(localStorage.getItem('autocompleteDatabase'));
- if (!autocompleteDatabase) {
- localStorage.setItem('autocompleteDatabase', SAMPLE_AUTOFILL);
- }
- const filter = autocompleteDatabase.filter((e) => {
- return e.startsWith(event.target.value);
+};
+
+export const hideSearchBG = () => {
+ // getSearchTerm().blur();
+ searchBG.style.opacity = '0';
+ // container.style.opacity = '0';
+ container.style.paddingBlock = '0em';
+ container.style.height = '0em';
+ setTimeout(() => {
+ searchBG.style.display = 'none';
+ }, 200);
+};
+
+const showAutofillBox = (input) => {
+ input = input.toLowerCase();
+ const db = JSON.parse(localStorage.getItem('autocompleteDatabase'));
+ if (!db) localStorage.setItem('autocompleteDatabase', SAMPLE_AUTOFILL);
+
+ const filteredArray = db.filter((e) => {
+ if (e == input) return;
+ else return e.toLowerCase().startsWith(input);
});
- if (filter[0]) {
- placeholderItem.innerHTML = filter[0];
- placeholder.style.height = '3em';
- } else {
- placeholderItem.innerHTML = '';
- placeholder.style.height = '0em';
- }
- if (!event.target.value) {
- placeholderItem.innerHTML = '';
- placeholder.style.height = '0em';
- }
- console.log(filter[0]);
+ function autofill(event) {
+ getSearchTerm().value = event.target.innerHTML;
+ const e = new InputEvent('input');
+ getSearchTerm().dispatchEvent(e);
+ getSearchTerm().focus();
+ };
+
+ const generateSuggestions = (filteredArray) => {
+ clearSuggestions();
+ if (!input) return;
+ const theme = sessionStorage.getItem('searchbar-color-theme-drop');
+ let sortOrder = sessionStorage.getItem('searchbar-position-drop');
+ if (sortOrder == 'bottom') sortOrder = 'afterbegin';
+ else sortOrder = 'beforeend';
+ let i = 0;
+ for (const e of filteredArray) {
+ if (i == 5) return;
+ container.insertAdjacentHTML(sortOrder, `
+ ${e}
+ `);
+ i++;
+ }
+ };
+
+ const clearSuggestions = () => {
+ container.innerHTML = '';
+ };
+
+ generateSuggestions(filteredArray);
+ const items = document.querySelectorAll('.autofillItem');
+ items.forEach((e) => {
+ e.addEventListener('click', autofill);
+ e.addEventListener('focus', autofill);
+ });
};
export function enterToSearch(event) {
if (event.key == 'Enter') {
- webSearch();
+ document.querySelector('#search-btn').click();
}
};
-export function autofill() {
- const placeholderItem = document
- .querySelector('.searchTermPlaceholderItem');
- getSearchTerm().value = placeholderItem.innerHTML;
-};
-
const updateAutocompleteDatabase = (entry) => {
- const autocompleteDatabase =
- JSON.parse(localStorage.getItem('autocompleteDatabase'));
- const set = new Set(autocompleteDatabase);
-
- set.add(entry);
- const updatedDatabase = Array.from(set);
- localStorage
- .setItem('autocompleteDatabase', JSON.stringify(updatedDatabase));
- // console.log(x, entry);
+ const db = JSON.parse(localStorage.getItem('autocompleteDatabase'));
+ const set = new Set(db);
+ set.add(entry.toLowerCase());
+ const update = Array.from(set);
+ localStorage.setItem('autocompleteDatabase', JSON.stringify(update));
};
diff --git a/style.css b/style.css
index edec638..e51e22a 100644
--- a/style.css
+++ b/style.css
@@ -69,7 +69,10 @@
padding: 0;
box-sizing: border-box !important;
caret-color: transparent;
- scroll-behavior: smooth
+ scroll-behavior: smooth;
+ outline-color: var(--selection-color);
+ outline-offset: -1px;
+ outline-width: 1px;
}
body {
@@ -328,13 +331,29 @@ body::-webkit-scrollbar {
.search {
display: flex;
+ position: relative;
flex-wrap: wrap;
width: 100%;
+ height: 3em;
justify-content: center;
align-items: stretch;
margin-bottom: 2em;
text-align: center;
cursor: default;
+ z-index: 2;
+}
+
+.searchBarFocusMode {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ display: none;
+ opacity: 0;
+ background-color: #ffffff1f;
+ transition: 200ms;
+ backdrop-filter: blur(0.5em);
+ -webkit-backdrop-filter: blur(1em);
}
.searchContainer {
@@ -348,6 +367,8 @@ body::-webkit-scrollbar {
max-width: 44em;
justify-content: center;
align-items: center;
+ order: 1;
+ z-index: 2;
}
.searchContainer:has(.searchTerm:focus) {
@@ -364,41 +385,41 @@ body::-webkit-scrollbar {
outline: 0;
}
-.searchTermPlaceholder {
+.autofillContainer {
display: flex;
- width: 100%;
+ position: absolute;
+ width: calc(100% - 3.5em);
height: 0em;
- /* overflow-y: scroll; */
background-color: transparent;
overflow: hidden;
- margin-inline: 1.85em;
+ /* margin-inline: 1.85em; */
min-width: 4em;
max-width: 44em;
+ padding-block: 0.5em;
+ padding-inline: 0.1em;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
- transition: 300ms;
-
+ transition: 125ms;
}
-.searchTermPlaceholderItem {
- min-height: 2em;
- max-height: 2em;
+.autofillItem {
+ min-height: 2.25em;
+ max-height: 2.25em;
min-width: 4em;
width: 100%;
text-wrap: nowrap;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 44em;
- margin-block-start: 0.5em;
- /* margin-inline: 2em; */
- border-radius: 0.75em;
- /* background-color: #ffffff43; */
+ margin-block-start: 0.25em;
+ border-radius: 0.5em;
+ box-shadow: #0000002e 0 2px 2px 0px;
border: 1px solid transparent !important;
text-align: start;
- padding-block-start: 0.4em;
- /* vertical-align: middle; */
+ padding-block-start: 0.5em;
padding-inline: 1em;
+ z-index: 2;
}
input::-webkit-search-cancel-button {
@@ -860,7 +881,7 @@ input::-webkit-search-cancel-button:hover {
height: auto;
width: 100vw;
width: 100dvw;
- z-index: 2;
+ /* z-index: 2; */
color: var(--white);
font-family: Ubuntu;
z-index: 3;