diff --git a/index.html b/index.html index b3f7915..b4abe43 100644 --- a/index.html +++ b/index.html @@ -53,6 +53,13 @@

Showcase your journey

diff --git a/src/main.ts b/src/main.ts index e340c50..b89c76e 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,7 +1,7 @@ import { countries, getFlagSrc } from "./flags"; import { CanvasManager, ImageGenerator } from "./images"; import { Landing } from "./landing"; -import { ColorSelector, CountrySelector, Settings } from "./settings"; +import { ColorSelector, CountrySearch, CountrySelector, Settings } from "./settings"; import { getFullfiled, loadImage, querySelectorSafe } from "./shared/utils"; import { Sidebar } from "./sidebar"; import { StateManager } from "./state"; @@ -22,6 +22,11 @@ const sidebar = new Sidebar( querySelectorSafe(".sidebar-control"), ); +const countrySearch = new CountrySearch( + querySelectorSafe("#countries-search"), + countries, +); + const countrySelector = new CountrySelector( querySelectorSafe(".countries-list"), querySelectorSafe("#country"), @@ -59,6 +64,10 @@ function main() { return draw(data); }); + countrySearch.onChange(visibleCountries => { + countrySelector.setVisibleCountries(visibleCountries); + }); + sidebar.initialize(); setTimeout(() => sidebar.toggle(true), 500); } diff --git a/src/settings/CountrySearch.css b/src/settings/CountrySearch.css new file mode 100644 index 0000000..5a92ce0 --- /dev/null +++ b/src/settings/CountrySearch.css @@ -0,0 +1,15 @@ +.countries-search { + padding: 5px 7px; + border-radius: 6px; + line-height: 20px; + font-size: inherit; + width: 100%; + border: 1px solid #e2e8f0; + margin: 0 0 4px; +} + +.countries-search:focus { + outline: none; + border-color: #0ea5e9; + box-shadow: inset 0 0 0 2px #0ea5e9; +} diff --git a/src/settings/CountrySearch.ts b/src/settings/CountrySearch.ts new file mode 100644 index 0000000..d7dad7d --- /dev/null +++ b/src/settings/CountrySearch.ts @@ -0,0 +1,36 @@ +import { type Country } from "flag-icons"; +import { isTextMatch } from "../shared/filter"; +import { debounce } from "../shared/utils"; + +import "./CountrySearch.css"; + +const INPUT_DELAY_IN_MS = 300; + +export class CountrySearch { + constructor( + private input: HTMLInputElement, + private countries: Country[], + ) { } + + #filterCountries(text: string): Set { + const filteredCountries = new Set(); + + for (const country of this.countries) { + if (isTextMatch(country.name, text)) { + filteredCountries.add(country.code); + } + } + + return filteredCountries; + } + + onChange(callback: (codes: Set) => void) { + const debouncedCallback = debounce(() => { + const filteredCountries = this.#filterCountries(this.input.value.trim()); + + callback(filteredCountries); + }, INPUT_DELAY_IN_MS); + + this.input.addEventListener("input", debouncedCallback); + } +} diff --git a/src/settings/CountrySelector.css b/src/settings/CountrySelector.css index 4757dbb..0a457e5 100644 --- a/src/settings/CountrySelector.css +++ b/src/settings/CountrySelector.css @@ -12,6 +12,10 @@ margin: 0 0 4px; } +.country-item.country-hidden { + display: none; +} + .country-label { display: flex; padding: 6px 8px; diff --git a/src/settings/CountrySelector.ts b/src/settings/CountrySelector.ts index aace276..3ca0026 100644 --- a/src/settings/CountrySelector.ts +++ b/src/settings/CountrySelector.ts @@ -5,6 +5,8 @@ import type { Country } from "flag-icons"; import "./CountrySelector.css"; +const HIDDEN_CLS = "country-hidden"; + export class CountrySelector { constructor( private container: HTMLElement, @@ -15,6 +17,7 @@ export class CountrySelector { countries.forEach(country => { const clone = this.template.content.cloneNode(true) as HTMLLIElement; + clone.children[0].setAttribute("data-code", country.code); querySelectorSafe("input", clone).value = country.code; querySelectorSafe("input", clone).id = country.code; querySelectorSafe("label", clone).setAttribute("for", country.code); @@ -24,4 +27,14 @@ export class CountrySelector { this.container.appendChild(clone); }); } + + setVisibleCountries(codes: Set) { + const countries = this.container.querySelectorAll("[data-code]"); + + for (let country of countries) { + const code = country.dataset.code!; + + country.classList.toggle(HIDDEN_CLS, !codes.has(code)); + } + } } diff --git a/src/settings/Settings.ts b/src/settings/Settings.ts index 30becf0..d3df979 100644 --- a/src/settings/Settings.ts +++ b/src/settings/Settings.ts @@ -36,6 +36,11 @@ export class Settings { this.form.addEventListener("change", () => { callback(this.getData()); }); + + this.form.addEventListener("submit", (event) => { + event.preventDefault(); + callback(this.getData()); + }); } getData(): SettingsData { diff --git a/src/settings/index.ts b/src/settings/index.ts index 9972125..b6a02a5 100644 --- a/src/settings/index.ts +++ b/src/settings/index.ts @@ -1,3 +1,4 @@ export { ColorSelector } from "./ColorSelector"; +export { CountrySearch } from "./CountrySearch"; export { CountrySelector } from "./CountrySelector"; export { Settings, type SettingsData } from "./Settings"; diff --git a/src/shared/filter.ts b/src/shared/filter.ts new file mode 100644 index 0000000..d4af24f --- /dev/null +++ b/src/shared/filter.ts @@ -0,0 +1,29 @@ +/** + * Rough fuzzy search that finds "omit" in "jOhn sMITh". + * + * @param value value to check, e.g. a page title "jOhn sMITh" + * @param normalizedSearch string to search in the value, e.g. "omit" + * @returns boolean if the value matches the search string + */ +export function isTextMatch(value: string, search: string) { + const normalizedValue = value.toLowerCase(); + const normalizedSearch = search.toLowerCase(); + + let valuePointer = 0; + let searchPointer = 0; + + while (valuePointer < normalizedValue.length && searchPointer < normalizedSearch.length) { + if (normalizedSearch[searchPointer] === ' ') { + searchPointer++; + continue; + } + + if (normalizedValue[valuePointer] === normalizedSearch[searchPointer]) { + searchPointer++; + } + + valuePointer++; + } + + return searchPointer === normalizedSearch.length; +} diff --git a/src/shared/utils.ts b/src/shared/utils.ts index 0b21826..618f2f7 100644 --- a/src/shared/utils.ts +++ b/src/shared/utils.ts @@ -58,3 +58,27 @@ export async function getFullfiled(promises: Promise[]): Promise { return acc; }, []); } + +interface debounceCallback { + (...args: TArgs): void; +} + +export function debounce( + callback: debounceCallback, + delayInMs: number, +): debounceCallback { + let timer: number; + + const debouncedFunc: debounceCallback = (...args) => { + if (timer) { + clearTimeout(timer); + } + + timer = window.setTimeout( + () => callback(...args), + delayInMs, + ); + }; + + return debouncedFunc; +}