%PDF-
%PDF-
Mini Shell
Mini Shell
import { DOM } from "../../constants";
import DropDownSearch from "./search/drop-down";
import HeaderReplaceSearch from "./search/header-replace";
import MobileSearchIcon from "./search/mobile-search-icon";
import OverlaySearch from "./search/overlay";
class Search {
mobileOverlayInput;
constructor() {
this.#start();
this.#setupEventListeners();
}
#start = () => {
this.dropDown = new DropDownSearch();
this.headerReplace = new HeaderReplaceSearch();
this.overlay = new OverlaySearch();
this.mobileSearchIcon = new MobileSearchIcon();
this.mobileOverlayInput = document.querySelector(".mobile-search-overlay-input");
DOM.search.forms.forEach((form) => {
if (form.querySelector("input")?.value) {
form.classList.add("search-filled");
}
});
if (!!this.mobileOverlayInput?.value) {
this.mobileOverlayInput.closest("form").classList.add("search-filled");
}
};
#setupEventListeners = () => {
DOM.search.forms.forEach((form) => {
form.querySelector("input")?.addEventListener("keyup", this.#onInputKeyup);
form.querySelector("input")?.addEventListener("blur", this.#onInputKeyup);
});
this.mobileOverlayInput?.addEventListener("keyup", this.#onInputKeyup);
this.mobileOverlayInput?.addEventListener("blur", this.#onInputKeyup);
};
#onInputKeyup = (event) => {
const input = event.currentTarget;
const form = input.closest("form");
if (input.value) {
form.classList.add("search-filled");
} else {
form.classList.remove("search-filled");
}
};
}
export default Search;
Zerion Mini Shell 1.0