added cancel button in search page that clears the query (#1490)

* added cancel button in search page that clears the query * renamed button to clear-button, input field is now focused after pressing clear * clear button now properly scales with seach bar
yomidevs · Oct 14, 2024 · 1bea0f4 · 1bea0f4
1 parent 26e843d
commit 1bea0f4
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 1 deletion.
diff --git a/ext/css/search.css b/ext/css/search.css
@@ -135,6 +135,48 @@ h1 {
     --icon-size: 16px 16px;
 }
 
+.clear-button {
+    flex: 0 0 auto;
+    position: relative;
+    width: 2.5em;
+    height: var(--search-textbox-height);
+    min-height: var(--search-textbox-min-height);
+    max-height: var(--search-textbox-max-height);
+    background-color: var(--input-background-color);
+    border: 0;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    outline: none;
+    transition: background-color var(--animation-duration) ease-in-out;
+    border-radius: 0;
+}
+.clear-button:hover,
+.clear-button:focus {
+    background-color: var(--input-background-color-dark);
+}
+.clear-button:focus:not(:focus-visible):not(:hover) {
+    background-color: var(--input-background-color);
+}
+.clear-button:focus-visible {
+    background-color: var(--input-background-color-dark);
+}
+.clear-button:active,
+.clear-button:active:focus {
+    background-color: var(--input-background-color-darker);
+}
+
+.clear-button>.icon {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--button-default-icon-color);
+    --icon-size: 16px 16px;
+}
+
 /* Search options */
 #search-settings-button>.icon {
     display: block;

diff --git a/ext/js/display/search-display-controller.js b/ext/js/display/search-display-controller.js
@@ -38,6 +38,8 @@ export class SearchDisplayController {
         /** @type {HTMLButtonElement} */
         this._searchButton = querySelectorNotNull(document, '#search-button');
         /** @type {HTMLButtonElement} */
+        this._clearButton = querySelectorNotNull(document, '#clear-button');
+        /** @type {HTMLButtonElement} */
         this._searchBackButton = querySelectorNotNull(document, '#search-back-button');
         /** @type {HTMLTextAreaElement} */
         this._queryInput = querySelectorNotNull(document, '#search-textbox');
@@ -104,6 +106,8 @@ export class SearchDisplayController {
         this._display.setHistorySettings({useBrowserHistory: true});
 
         this._searchButton.addEventListener('click', this._onSearch.bind(this), false);
+        this._clearButton.addEventListener('click', this._onClear.bind(this), false);
+
         this._searchBackButton.addEventListener('click', this._onSearchBackButtonClick.bind(this), false);
         this._wanakanaEnableCheckbox.addEventListener('change', this._onWanakanaEnableChange.bind(this));
         window.addEventListener('copy', this._onCopy.bind(this));
@@ -268,6 +272,15 @@ export class SearchDisplayController {
         this._search(true, 'new', true, null);
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
+    _onClear(e) {
+        e.preventDefault();
+        this._queryInput.value = '';
+        this._queryInput.focus();
+    }
+
     /** */
     _onSearchBackButtonClick() {
         this._display.history.back();
@@ -617,7 +630,7 @@ export class SearchDisplayController {
      */
     _updateSearchHeight(shrink) {
         const searchTextbox = this._queryInput;
-        const searchItems = [this._queryInput, this._searchButton, this._searchBackButton];
+        const searchItems = [this._queryInput, this._searchButton, this._searchBackButton, this._clearButton];
 
         if (shrink) {
             for (const searchButton of searchItems) {

diff --git a/ext/search.html b/ext/search.html
@@ -55,6 +55,7 @@ <h1>Yomitan Search</h1>
                 <div class="search-header">
                     <div class="search-textbox-container">
                         <textarea id="search-textbox" class="scrollbar" placeholder="Input a term, expression, sentence, or block of text" autocomplete="off" lang="ja" autofocus></textarea>
+                        <button type="button" id="clear-button" class="clear-button"><span class="icon" data-icon="cross"></span></button>
                         <button type="button" id="search-back-button" class="search-button" hidden><span class="icon" data-icon="left-chevron"></span></button>
                         <button type="button" id="search-button" class="search-button"><span class="icon" data-icon="magnifying-glass"></span></button>
                     </div>