feat: search spinner and lang

Author: NiclasNorin

js/features/createSearch/createSearchInterface.ts

@@ -9,4 +9,6 @@ export type SearchOptions = {
     apiUrl?: string;
     apiSearchParam?: string;
     noResultsText?: string;
+    resetButtonLabel?: string;
+    placeholder?: string;
 }

js/features/createSearch/search/searchUi.ts

@@ -7,22 +7,27 @@ export class SearchUi implements SearchUiInterface {
     private searchContainer: HTMLElement|undefined = undefined;
     private list: HTMLElement|undefined = undefined;
     private input: HTMLInputElement|undefined = undefined;
+    private resetButton: HTMLElement|undefined = undefined;
+    private spinner: HTMLElement|undefined = undefined;
     private itemClickListeners: ListItemClickListener[] = [];
     private currentValue: string = '';
 
     constructor(private searchOptions: SearchOptions, private searchApi: SearchApiInterface) {}
 
     private listenForInput(): void {
         const debouncedSearch = this.debounce((value: string) => {
+            this.showOrHideSpinner(true);
             this.searchApi.search(value)
             .then((data: PlaceObject[]) => {
+                this.showOrHideSpinner(false);
                 this.setSearchListItems(data);
             });
         }, 500);
 
         this.getInput()?.addEventListener('input', (e: Event) => {
             const input = e.target as HTMLInputElement;
             this.currentValue = input.value;
+            this.showOrHideReset();
             debouncedSearch(input.value);
         });
     }
@@ -43,7 +48,7 @@ export class SearchUi implements SearchUiInterface {
         } else {
             listContainer.innerHTML = '';
         }
-
+        console.log(items);
         items.forEach((item: PlaceObject) => {
             const listItem = this.createListItem(item);
 
@@ -76,16 +81,21 @@ export class SearchUi implements SearchUiInterface {
         container.className = `openstreetmap__search ${this.searchOptions.className || ''}`;
 
         container.innerHTML = `
-            <input type="text" placeholder="Search location..." />
+            <div class="openstreetmap__search-container">
+                <input type="text" placeholder="${this.searchOptions.placeholder ?? 'Search location...'}" />
+                <span class="openstreetmap__search-spinner" data-js-search-spinner="true"></span>
+                <span class="openstreetmap__search-icon" data-js-search-reset="true" role="button" aria-label="${this.searchOptions.resetButtonLabel ?? 'Reset search'}">&#10005;</span>
+            </div>
             <ul></ul>
         `;
 
         const controlContainer = (map.getAddable() as LeafletMap).getContainer()?.querySelector('.leaflet-control-container');
         controlContainer?.appendChild(container);
         this.searchContainer = container;
-        this.stopDblClickZoom();
 
+        this.stopDblClickZoom();
         this.listenForInput();
+        this.listenForResetButton();
 
         return this;
     }
@@ -102,11 +112,67 @@ export class SearchUi implements SearchUiInterface {
         this.getContainer()?.addEventListener('dblclick', (e: Event) => {
             e.stopPropagation();
         });
+    } 
+    
+    private listenForResetButton(): void {
+        this.getResetButton()?.addEventListener('click', (e: Event) => {
+            e.preventDefault();
+            e.stopPropagation();
+            console.log('Reset search');
+            if (this.getList()) {
+                this.getList()!.innerHTML = '';
+            }
+
+            if (this.getInput()) {
+                this.getInput()!.value = '';
+                this.getInput()!.focus();
+            }
+        });
+    }
+
+    private showOrHideSpinner(isSearching: boolean): void {
+        if (!this.getSpinner()) {
+            return;
+        }
+
+        if (isSearching && this.currentValue.length > 0) {
+            this.getSpinner()!.style.display = 'inline-block';
+        } else {
+            this.getSpinner()!.style.display = 'none';
+        }
+    }
+
+    private showOrHideReset(): void {
+        if (!this.getResetButton()) {
+            return;
+        }
+
+        if (this.currentValue.length > 0) {
+            this.getResetButton()!.style.display = 'block';
+        } else {
+            this.getResetButton()!.style.display = 'none';
+        }
     }
 
     public getContainer(): HTMLElement|undefined {
         return this.searchContainer;
     }
+
+    private getSpinner(): HTMLElement|undefined {
+        if (!this.spinner) {
+            this.spinner = this.getContainer()?.querySelector('[data-js-search-spinner]') ?? undefined;
+        }
+
+        return this.spinner;
+    }
+
+    private getResetButton(): HTMLElement|undefined {
+        if (!this.resetButton) {
+            this.resetButton = this.getContainer()?.querySelector('[data-js-search-reset]') ?? undefined;
+        }
+
+        return this.resetButton;
+    }
 
     private getInput(): HTMLInputElement|undefined {
         if (!this.input) {

sass/main.scss

@@ -20,10 +20,53 @@
             padding: 0 .5rem;
         }
 
+        .openstreetmap__search-container {
+            position: relative;
+        }
+
+        .openstreetmap__search-icon {
+            cursor: pointer;
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translate(.5rem, -50%);
+            padding: .5rem;
+            transition: font-size 0.2s ease-in-out;
+            display: none;
+
+            &:hover {
+                font-size: 110%;
+            }
+        }
+
+        .openstreetmap__search-spinner {
+            width: 12px;
+            height: 12px;
+            border: 2px solid #000;
+            border-bottom-color: transparent;
+            border-radius: 50%;
+            display: none;
+            box-sizing: border-box;
+            animation: rotation 1s linear infinite;
+            position: absolute;
+            right: 1rem;
+            top: calc(50% - 6px);
+        }
+        
+            @keyframes rotation {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        } 
+
         input {
             width: 100%;
             border: none;
             height: 2rem;
+            padding-right: 2rem;
 
             &:focus-visible {
                 outline: unset;