refs #18784 [fid_bbi] keep search filters

* add option to keep search filters

* improve keep-filters accessibility
** Extend clickable area
** Fix focus styles
** Show tooltip on keyboard focus

* improve search input with keep-filters
** Long search strings were overlapped by the keep-filters checkbox, fixed by adding padding.

themes/fid_bbi/languages/de.ini

@@ -10,6 +10,8 @@ Book Bag = Merkliste
 Close = Schließen
 Close functions & filters = Funktionen & Filter schließen
 FAQs = Häufige Fragen
+Filters are kept = Filter werden beibehalten
+Filters are not kept = Filter werden nicht beibehalten
 Find = Suchen
 For Subject Specialists = Für Fachreferate
 From the year = Vom Jahr

themes/fid_bbi/scss/blocks/search.scss

@@ -54,6 +54,10 @@
     box-shadow: 0 0 0 g(.25) $shade-strong;
   }
 
+  &.-pad-right {
+    padding-right: g(1.75); // space for keep-filters checkbox
+  }
+
   .layout.-default & {
     @media #{$bp3} {
       border-color: #fff;
@@ -71,6 +75,60 @@
   }
 }
 
+.search_keep-filters {
+  margin: 0 g(.5) 0 g(-2);
+  position: relative;
+  top: g(-.25);
+  right: g(.25);
+
+  label {
+    cursor: pointer;
+  }
+
+  .icon {
+    height: g(1.5);
+    width: g(1.5);
+    padding: g(.25);
+  }
+
+  input {
+    @include hover {
+      ~ .icon {
+        background: $shade;
+      }
+
+      ~ .tooltip {
+        margin-right: g(.25);
+        opacity: 1;
+      }
+    }
+  }
+
+  :checked ~ .icon path {
+    fill: currentColor;
+  }
+
+  .tooltip {
+    span {
+      display: none;
+
+      + span {
+        display: inline;
+      }
+    }
+  }
+
+  :checked ~ .tooltip {
+    span {
+      display: inline;
+
+      + span {
+        display: none;
+      }
+    }
+  }
+}
+
 .search_links {
   margin: g(.5) 0 0;
 

themes/fid_bbi/scss/blocks/tooltip.scss

@@ -29,12 +29,13 @@
   }
 }
 
-a:focus,
-a:hover,
-button:focus,
-button:hover {
-  .tooltip {
-    margin-right: g(.25);
-    opacity: 1;
+a,
+button {
+  &:focus,
+  &:hover {
+    .tooltip {
+      margin-right: g(.25);
+      opacity: 1;
+    }
   }
 }

themes/fid_bbi/templates/search/searchbox.phtml

@@ -65,23 +65,23 @@ $tabConfig = $this->searchTabs()->getTabConfig(
       <div class="tab-content clearfix no-gutter-all">
     <?php endif; ?>
       <p class="adv_search_terms">
-        <?=$this->transEsc("Your search terms")?>:
+        <?=$this->translate('Your search terms')?>:
         "<strong><?=$this->escapeHtml($this->lookfor)?></strong>"
       </p>
       <ul class="adv_search_links">
         <li>
           <a href="<?=$this->url($advSearch)?>?edit=<?=$this->escapeHtmlAttr($this->searchId)?>">
-            <?=$this->transEsc("Edit this Advanced Search")?>
+            <?=$this->translate('Edit this Advanced Search')?>
           </a>
         </li>
         <li>
           <a href="<?=$this->url($advSearch) . $hiddenFilterParams?>">
-            <?=$this->transEsc("Start a new Advanced Search")?>
+            <?=$this->translate('Start a new Advanced Search')?>
           </a>
         </li>
         <li>
           <a href="<?=$this->url($searchHome) . $hiddenFilterParams?>">
-            <?=$this->transEsc("Start a new Basic Search")?>
+            <?=$this->translate('Start a new Basic Search')?>
           </a>
         </li>
       </ul>
@@ -91,7 +91,7 @@ $tabConfig = $this->searchTabs()->getTabConfig(
   </div>
 <?php else: ?>
   <!-- TODO: Use longer placeholder on large screen, like in the mockup?-->
-  <?php $placeholder = $this->transEsc("search_terms"); ?>
+  <?php $placeholder = $this->translate('search_terms'); ?>
   <form
     action="<?=$this->url($basicSearch)?>"
     autocomplete="off"
@@ -99,9 +99,19 @@ $tabConfig = $this->searchTabs()->getTabConfig(
     id="searchForm"
     name="searchForm"
   >
+    <?php
+    // Modfied copy from fid_adlr
+    $filterDetails = $this->searchbox()->getFilterDetails(
+      isset($this->filterList) && is_array($this->filterList) ? $this->filterList : [],
+      isset($this->checkboxFilters) && is_array($this->checkboxFilters) ? $this->checkboxFilters : []
+    );
+    $filterActive = !empty($filterDetails)
+      || (($tabConfig['tabs'][0]['label'] ?? '') !== ($tabConfig['selected']['label'] ?? ''));
+    ?>
+
     <input
-      aria-label="<?=$this->transEsc('search_terms')?>"
-      class="search_input"
+      aria-label="<?=$this->translate('search_terms')?>"
+      class="search_input <?=$filterActive ? '-pad-right' : ''?>"
       data-focus-off-canvas
       name="lookfor"
       onblur="this.placeholder = '<?=$placeholder?>'"
@@ -110,11 +120,81 @@ $tabConfig = $this->searchTabs()->getTabConfig(
       type="text"
       value="<?=$this->escapeHtmlAttr($this->lookfor)?>"
     >
+
+    <?php if ($filterActive): ?>
+      <?php $defaultFilterState = $options->getRetainFilterSetting() ? 'checked' : ''; ?>
+      <div id="searchFormKeepFilters" class="search_keep-filters">
+        <?php // NOTE: ID keepfilters and class searchFormKeepFilters required by JS ?>
+        <label>
+          <input id="keepfilters" type="checkbox" <?=$defaultFilterState?> class="searchFormKeepFilters">
+          <?=$this->icon('small/filter')?>
+          <div class="tooltip">
+            <span>
+              <?=$this->translate('Filters are kept')?>
+            </span>
+            <span>
+              <?=$this->translate('Filters are not kept')?>
+            </span>
+          </div>
+        </label>
+      </div>
+
+      <div class="hidden">
+        <?php foreach ($filterDetails as $current): ?>
+          <input
+            class="applied-filter"
+            id="<?=$this->escapeHtmlAttr($current['id'])?>"
+            type="checkbox"
+            <?=$defaultFilterState?>
+            name="filter[]"
+            value="<?=$this->escapeHtmlAttr($current['value'])?>"
+          >
+          <label for="<?=$this->escapeHtmlAttr($current['id'])?>">
+            <?=$this->escapeHtml($current['value'])?>
+          </label>
+        <?php endforeach; ?>
+
+        <?php if (isset($hasDefaultsApplied) && $hasDefaultsApplied): ?>
+          <?php
+          // This is a hidden element that flags whether or not default filters have been applied;
+          // it is intentionally unlabeled, as users are not meant to manipulate it directly.
+          ?>
+          <input
+            class="applied-filter"
+            id="dfApplied"
+            type="checkbox"
+            name="dfApplied"
+            value="1"
+            <?=$defaultFilterState?>
+          >
+        <?php endif; ?>
+      </div>
+    <?php endif; ?>
+
     <button class="search_submit" type="submit">
       <?=$this->icon('small/magnifier')?>
       <?=$this->transEsc('Find')?>
     </button>
   </form>
+
+  <?php // Modfied copy from fid_adlr ?>
+  <script type="text/javascript">
+    $(document).ready(function() {
+      $('#keepfilters').on('click', function () {
+        // reset type / category filter to default: All
+        if ($('input[id ="keepfilters"]').prop('checked') == false) {
+          var typeOptions = $('input[name ="format-pre-filter"]');
+          for (var opt, j = 0; opt = typeOptions[j]; j++) {
+            if (opt.id.includes("All")) {
+              opt.checked = true;
+            } else {
+              opt.checked = false;
+            }
+          }
+        }
+      });
+    });
+  </script>
 <?php endif; ?>
 
 <!-- fid_bbi: search - searchbox - END -->