Add reset button to searchform

moravianlibrary · Jul 17, 2023 · c65b810 · c65b810
1 parent ea553ae
commit c65b810
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 1 deletion.
diff --git a/themes/bootstrap3/less/components/search.less b/themes/bootstrap3/less/components/search.less
@@ -569,6 +569,31 @@ table.search-history-table {
   }
 }
 
+.searchForm-query {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  .searchForm_lookfor {
+    padding-right: 18px;
+    box-sizing: border-box;
+  }
+
+  button.searchForm-reset {
+    position: absolute;
+    display: none;
+    right: 3px;
+    width: 2em;
+    height: 2em;
+    border-radius: 50%;
+    background-color: @gray-lighter;
+    font: 1em monospace;
+    text-align: center;
+    line-height: 1em;
+    cursor: pointer;
+  }
+}
+
 /* Break early to prevent table overflow */
 @media (max-width: 991px) {
   .template-dir-search.template-name-history {

diff --git a/themes/bootstrap3/scss/components/search.scss b/themes/bootstrap3/scss/components/search.scss
@@ -569,6 +569,31 @@ table.search-history-table {
   }
 }
 
+.searchForm-query {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  .searchForm_lookfor {
+    padding-right: 18px;
+    box-sizing: border-box;
+  }
+
+  button.searchForm-reset {
+    position: absolute;
+    display: none;
+    right: 3px;
+    width: 2em;
+    height: 2em;
+    border-radius: 50%;
+    background-color: $gray-lighter;
+    font: 1em monospace;
+    text-align: center;
+    line-height: 1em;
+    cursor: pointer;
+  }
+}
+
 /* Break early to prevent table overflow */
 @media (max-width: 991px) {
   .template-dir-search.template-name-history {

diff --git a/themes/bootstrap3/templates/search/searchbox.phtml b/themes/bootstrap3/templates/search/searchbox.phtml
@@ -70,7 +70,10 @@
   <form id="searchForm" class="searchForm navbar-form navbar-left flip" method="get" action="<?=$this->url($basicSearch)?>" name="searchForm" autocomplete="off">
     <?= $this->context($this)->renderInContext('search/searchTabs', ['searchTabs' => $tabConfig['tabs'], 'showCounts' => $tabConfig['showCounts']]); ?>
     <?php $placeholder = $this->searchbox()->getPlaceholderText($tabConfig['selected']['id'] ?? null); ?>
-    <input id="searchForm_lookfor" class="searchForm_lookfor form-control search-query<?php if ($this->searchbox()->autocompleteEnabled($this->searchClassId)):?> autocomplete searcher:<?=$this->escapeHtmlAttr($this->searchClassId) ?><?=$this->searchbox()->autocompleteAutoSubmit($this->searchClassId) ? ' ac-auto-submit' : '' ?><?php endif ?>" type="search" name="lookfor" value="<?=$this->escapeHtmlAttr($this->lookfor)?>"<?php if ($placeholder): ?> placeholder="<?=$this->transEscAttr($placeholder) ?>"<?php endif ?> aria-label="<?=$this->transEscAttr("search_terms")?>">
+    <div class="searchForm-query">
+      <input id="searchForm_lookfor" class="searchForm_lookfor form-control search-query<?php if ($this->searchbox()->autocompleteEnabled($this->searchClassId)):?> autocomplete searcher:<?=$this->escapeHtmlAttr($this->searchClassId) ?><?=$this->searchbox()->autocompleteAutoSubmit($this->searchClassId) ? ' ac-auto-submit' : '' ?><?php endif ?>" type="search" name="lookfor" value="<?=$this->escapeHtmlAttr($this->lookfor)?>"<?php if ($placeholder): ?> placeholder="<?=$this->transEscAttr($placeholder) ?>"<?php endif ?> aria-label="<?=$this->transEscAttr("search_terms")?>">
+      <button id="searchForm-reset" class="searchForm-reset form-control" type="reset" tabindex="-1" aria-label="<?=$this->transEsc('searchform-reset-button')?>">&times;</button>
+    </div>
     <?php if ($handlerCount > 1): ?>
       <select id="searchForm_type" class="searchForm_type form-control" name="type" data-native-menu="false" aria-label="<?=$this->transEscAttr("Search type")?>">
         <?php $currentGroup = $insideGroup = false; ?>
@@ -163,3 +166,29 @@
   </form>
 <?php endif; ?>
 
+<?php
+$js = <<<JS
+        $(document).ready(function searchFormResetHandler() {
+          const queryInput = $('#searchForm_lookfor');
+          const resetButton = $('#searchForm-reset');
+
+          let query = queryInput.val();
+          if (query !== '') {
+            resetButton.show();
+            queryInput.focus().val('').val(query);
+          }
+          queryInput.on('input', function onInput() {
+            if ($(this).val() === '') {
+              resetButton.hide();
+            } else {
+              resetButton.show();
+            }
+          })
+          resetButton.on('click', function onClick(event) {
+            queryInput.attr('value', '').focus();
+            resetButton.hide();
+          })
+        });
+        JS;
+?>
+<?=$this->inlineScript(\Laminas\View\Helper\HeadScript::SCRIPT, $js, 'SET');