feat: add the reset button (#220)

hugomods · Feb 21, 2024 · 526a7de · 526a7de
1 parent 7373ad7
commit 526a7de
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 9 deletions.
diff --git a/assets/search/js/form.ts b/assets/search/js/form.ts
@@ -35,10 +35,13 @@ export default class Form {
 
     render() {
         return `<form class="search-form">
-  <div class="search-input-group">
-    <span class="search-input-icon">${params.icons['search']}</span>
-    <span class="search-spinner">${params.icons['spinner']}</span>
-    <input type="search" name="q" class="search-input search-form-control" placeholder="${i18n.translate('input_placeholder')}" autocomplete="off" disabled/>
+  <div class="search-input-group-wrapper">
+    <div class="search-input-group">
+        <span class="search-input-icon">${params.icons['search']}</span>
+        <span class="search-spinner">${params.icons['spinner']}</span>
+        <input type="search" name="q" class="search-input search-form-control" placeholder="${i18n.translate('input_placeholder')}" autocomplete="off" disabled/>
+        <button class="search-reset-button disabled" type="reset">${params.icons['reset']}</button>
+    </div>
     <button class="search-modal-close" type="button">${i18n.translate('cancel')}</button>
   </div>
   <div class="search-form-meta">
@@ -200,6 +203,31 @@ export default class Form {
                 this.submit()
             })
         })
+
+        this.ele.addEventListener('reset', () => {
+            const lang = document.documentElement.getAttribute('lang') ?? ''
+            this.language?.querySelectorAll('.search-dropdown-item').forEach((ele) => {
+                if (ele.getAttribute('data-value') !== lang) {
+                    ele.classList.remove('active')
+                } else {
+                    this.language.classList.add('active')
+                    this.language.setAttribute('data-value', lang)
+                    this.language.querySelector('.search-dropdown-label').innerHTML = ele.innerHTML
+                    ele.classList.add('active')
+                }
+            })
+            for (const name of ['years', 'taxonomies']) {
+                this.ele.querySelectorAll(`.search-${name}.active`).forEach((ele) => {
+                    ele.querySelectorAll('.search-dropdown-item.active').forEach((item) => {
+                        item.classList.remove('active')
+                    })
+                    ele.classList.remove('active')
+                })
+            }
+            setTimeout(() => {
+                this.submit()
+            }, 1)
+        })
 
         this.spinner.show()
         engine.init().then(() => {
@@ -245,6 +273,14 @@ export default class Form {
         }
     }
 
+    private showResetBtn() {
+        this.ele.querySelector('button[type="reset"]')?.classList.remove('disabled')
+    }
+
+    private hideResetBtn() {
+        this.ele.querySelector('button[type="reset"]')?.classList.add('disabled')
+    }
+
     private submit() {
         const query = this.getQuery()
         this.updatePage(query)
@@ -255,11 +291,13 @@ export default class Form {
         const taxonomies = this.getTaxonomies()
 
         if (query === '' && Object.values(taxonomies).filter((item) => item.length > 0).length == 0) {
+            this.hideResetBtn()
             this.renderer.clean()
             this.renderer.renderHistories()
             return
         }
 
+        this.showResetBtn()
         this.spinner.show()
         engine.search(query, sorting, lang, years, taxonomies).then(({ results, time }) => {
             this.renderer.render(query, results, time)

diff --git a/assets/search/scss/form/index.scss b/assets/search/scss/form/index.scss
@@ -4,14 +4,19 @@
     margin-bottom: 0.5rem;
 }
 
+.search-input-group-wrapper {
+    display: flex;
+}
+
 .search-input-group {
     display: flex;
     flex: 1;
     position: relative;
 }
 
 .search-input-icon,
-.search-spinner {
+.search-spinner,
+.search-reset-button {
     background: inherit;
     border: none;
     color: var(--search-primary);
@@ -22,13 +27,17 @@
     justify-content: center;
     align-items: center;
     padding: 0 0.5rem;
-    left: 0;
 
     &.disabled {
         display: none;
     }
 }
 
+.search-input-icon,
+.search-spinner {
+    left: 0;
+}
+
 .search-spinner {
     svg {
         background: var(--search-bg);
@@ -49,15 +58,20 @@
     }
 }
 
+.search-reset-button {
+    border: 0;
+    background: transparent;
+    right: 0;
+}
+
 .search-input {
     border-radius: 0.25rem;
     border: 1px solid var(--search-primary);
-    padding: 0.75rem 0.5rem 0.75rem 2.25rem;
+    padding: 0.75rem 1.5rem 0.75rem 2.25rem;
     flex: 1;
 
     &::-webkit-search-cancel-button {
-        cursor: pointer;
-        padding: 0.125rem;
+        display: none;
     }
 }
 

diff --git a/layouts/partials/search/assets/js-resource.html b/layouts/partials/search/assets/js-resource.html
@@ -65,6 +65,7 @@
   "expand" (partial "icons/icon" (dict "vendor" "bootstrap" "name" "chevron-expand" "size" "1em"))
   "year" (partial "icons/icon" (dict "vendor" "bootstrap" "name" "calendar-check" "size" "1em"))
   "taxonomies" (partial "icons/icon" (dict "vendor" "bootstrap" "name" "tags" "size" "1em"))
+  "reset" (partial "icons/icon" (dict "vendor" "bootstrap" "name" "x" "size" "1.5em"))
 }}
 {{/* Include the following icons when necessary. */}}
 {{- if default true .Site.Params.search.index_all_pages }}