Fix institutional search box options (#1635)

- Fixed institutional search options not showing up in BS2 theme, and advanced search options not auto-expanding on the browse page when using the showAdvanced url parameter. - Changed the search box to have global search as the default option, and updated the BS5 search box to be closer to the BS2 search box in behaviour.
artefactual · Oct 5, 2023 · 48089a2 · 48089a2
1 parent 9fd22ac
commit 48089a2
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 94 deletions.
diff --git a/apps/qubit/modules/informationobject/templates/_advancedSearch.php b/apps/qubit/modules/informationobject/templates/_advancedSearch.php
@@ -6,15 +6,15 @@
 
   <a
     href="#"
-    class="advanced-search-toggle <?php echo $show ? 'open' : ''; ?>"
-    aria-expanded="<?php echo $show ? 'true' : 'false'; ?>"
+    class="advanced-search-toggle <?php echo $showAdvanced ? 'open' : ''; ?>"
+    aria-expanded="<?php echo $showAdvanced ? 'true' : 'false'; ?>"
     data-cy="advanced-search-toggle"
   >
     <?php echo __('Advanced search options'); ?>
   </a>
 
   <div class="advanced-search animateNicely"
-    <?php echo !$show ? 'style="display: none;"' : ''; ?>>
+    <?php echo !$showAdvanced ? 'style="display: none;"' : ''; ?>>
 
     <?php echo $form->renderFormTag(
       url_for(['module' => 'informationobject', 'action' => 'browse']),

diff --git a/apps/qubit/modules/search/templates/_box.php b/apps/qubit/modules/search/templates/_box.php
@@ -21,19 +21,15 @@
 
         <div>
           <label>
-            <?php if (isset($repository)) { ?>
-              <input name="repos" type="radio" value data-placeholder="<?php echo __('Search'); ?>">
-            <?php } else { ?>
               <input name="repos" type="radio" value checked="checked" data-placeholder="<?php echo __('Search'); ?>">
-            <?php } ?>
             <?php echo __('Global search'); ?>
           </label>
         </div>
 
         <?php if (isset($repository)) { ?>
           <div>
             <label>
-              <input name="repos" checked="checked" type="radio" value="<?php echo $repository->id; ?>" data-placeholder="<?php echo __('Search %1%', ['%1%' => strip_markdown($repository)]); ?>"/>
+              <input name="repos" type="radio" value="<?php echo $repository->id; ?>" data-placeholder="<?php echo __('Search %1%', ['%1%' => strip_markdown($repository)]); ?>"/>
               <?php echo __('Search <span>%1%</span>', ['%1%' => render_title($repository)]); ?>
             </label>
           </div>

diff --git a/apps/qubit/templates/_header.php b/apps/qubit/templates/_header.php
@@ -22,6 +22,14 @@
     </h1>
   <?php } ?>
 
+  <div id="search-bar">
+
+    <?php echo get_component('menu', 'browseMenu', ['sf_cache_key' => $sf_user->getCulture().$sf_user->getUserID()]); ?>
+
+    <?php echo get_component('search', 'box'); ?>
+
+  </div>
+
   <nav>
 
     <?php echo get_component('menu', 'userMenu'); ?>
@@ -38,14 +46,6 @@
 
   </nav>
 
-  <div id="search-bar">
-
-    <?php echo get_component('menu', 'browseMenu', ['sf_cache_key' => $sf_user->getCulture().$sf_user->getUserID()]); ?>
-
-    <?php echo get_component('search', 'box'); ?>
-
-  </div>
-
   <?php echo get_component_slot('header'); ?>
 
 </header>

diff --git a/plugins/arDominionB5Plugin/js/searchBox.js b/plugins/arDominionB5Plugin/js/searchBox.js
@@ -6,8 +6,16 @@
     if (!$input.length) {
       return;
     }
-    var $results = $("#search-box-results");
+    var $searchboxDropdown = $("#search-box-dropdown");
     var dropdown = bootstrap.Dropdown.getOrCreateInstance($input);
+    var $searchboxTemplate = $("#searchbox-options-template");
+
+    // Add search options to show in the dropdown area
+    let $searchOptions = $searchboxTemplate[0].content.cloneNode(true);
+    $searchOptions.querySelector('div').id = 'search-options';
+    $searchboxDropdown.html('<ul id="search-box-results"></ul>');
+    $searchboxDropdown.append($searchOptions);
+    let $results = $("#search-box-results");
 
     // Set up Bootstrap autocomplete:
     // - Force version 4 to avoid failing check in version 5.
@@ -34,30 +42,38 @@
         searchPost: (response, $element) => {
           if (response.length && $element.val().length >= 3) {
             $results.html(response);
-            dropdown.show();
-          } else {
-            dropdown.hide();
-            $results.html("");
           }
           return [];
         },
       },
     });
 
-    // Hide dropdown when the input is lower than 3 chars.
+    // Clear dropdown when the input is lower than 3 chars.
     // Bootstrap autocomplete `typed` event is not triggered
     // on all changes to the input.
     $input.on("input", (event) => {
-      if (event.target.value.length < 3) {
-        dropdown.hide();
-        $results.html("");
+      if (event.target.value.length < 3 && $results.children().length > 1) {
+        $results.html('');
+      }
+    });
+
+    // Show dropdown on focus for users navigating using keyboards
+    $input.on("focus", (event) => {
+      if (dropdown._isShown() === false) {
+        dropdown.show();
+      }
+    });
+
+    $input.on("hide.bs.dropdown", (event) => {
+      if (document.activeElement === $input[0]) {
+        event.preventDefault();
       }
     });
 
     // Prevent showing an empty dropdown
     $input.on("show.bs.dropdown", (event) => {
-      if ($results.children().length == 0) {
-        event.preventDefault();
+      if ($results.children().length === 0) {
+        $results.html('');
       }
     });
   });

diff --git a/plugins/arDominionB5Plugin/modules/informationobject/templates/_advancedSearch.php b/plugins/arDominionB5Plugin/modules/informationobject/templates/_advancedSearch.php
@@ -1,11 +1,11 @@
 <div class="accordion mb-3 adv-search" role="search">
   <div class="accordion-item">
     <h2 class="accordion-header" id="heading-adv-search">
-      <button class="accordion-button<?php echo $show ? '' : ' collapsed'; ?>" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-adv-search" aria-expanded="<?php echo $show ? 'true' : 'false'; ?>" aria-controls="collapse-adv-search" data-cy="advanced-search-toggle">
+      <button class="accordion-button<?php echo $showAdvanced ? '' : ' collapsed'; ?>" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-adv-search" aria-expanded="<?php echo $showAdvanced ? 'true' : 'false'; ?>" aria-controls="collapse-adv-search" data-cy="advanced-search-toggle">
         <?php echo __('Advanced search options'); ?>
       </button>
     </h2>
-    <div id="collapse-adv-search" class="accordion-collapse collapse<?php echo $show ? ' show' : ''; ?>" aria-labelledby="heading-adv-search">
+    <div id="collapse-adv-search" class="accordion-collapse collapse<?php echo $showAdvanced ? ' show' : ''; ?>" aria-labelledby="heading-adv-search">
       <div class="accordion-body">
         <?php echo $form->renderFormTag(url_for(['module' => 'informationobject', 'action' => 'browse']), ['name' => 'advanced-search-form', 'method' => 'get']); ?>
 

diff --git a/plugins/arDominionB5Plugin/modules/search/templates/_box.php b/plugins/arDominionB5Plugin/modules/search/templates/_box.php
@@ -1,3 +1,58 @@
+<template id="searchbox-options-template">
+  <div>
+  <?php if (sfConfig::get('app_multi_repository')) { ?>
+    <div class="px-3 py-2">
+      <div class="form-check">
+        <input
+          class="form-check-input"
+          type="radio"
+          name="repos"
+          id="search-realm-global"
+          checked
+          value>
+        <label class="form-check-label" for="search-realm-global">
+          <?php echo __('Global search'); ?>
+        </label>
+      </div>
+      <?php if (isset($repository)) { ?>
+        <div class="form-check">
+          <input
+            class="form-check-input"
+            type="radio"
+            name="repos"
+            id="search-realm-repo"
+            value="<?php echo $repository->id; ?>">
+          <label class="form-check-label" for="search-realm-repo">
+            <?php echo __('Search <span>%1%</span>', ['%1%' => render_title($repository)]); ?>
+          </label>
+        </div>
+      <?php } ?>
+      <?php if (isset($altRepository)) { ?>
+        <div class="form-check">
+          <input
+            class="form-check-input"
+            type="radio"
+            name="repos"
+            id="search-realm-alt-repo"
+            value="<?php echo $altRepository->id; ?>">
+          <label class="form-check-label" for="search-realm-alt-repo">
+            <?php echo __('Search <span>%1%</span>', ['%1%' => render_title($altRepository)]); ?>
+          </label>
+        </div>
+      <?php } ?>
+    </div>
+    <hr class="dropdown-divider"></hr>
+    <?php } ?>
+    <a class="dropdown-item" href="<?php echo url_for([
+      'module' => 'informationobject',
+      'action' => 'browse',
+      'showAdvanced' => true,
+      'topLod' => false,
+      ]); ?>">
+      <?php echo __('Advanced search'); ?>
+    </a>
+  </div>
+</template>
 <form
   id="search-box"
   class="d-flex flex-grow-1 my-2"
@@ -7,70 +62,6 @@ class="d-flex flex-grow-1 my-2"
   <input type="hidden" name="topLod" value="0">
   <input type="hidden" name="sort" value="relevance">
   <div class="input-group flex-nowrap">
-    <button
-      id="search-box-options"
-      class="btn btn-sm atom-btn-secondary dropdown-toggle"
-      type="button"
-      data-bs-toggle="dropdown"
-      data-bs-auto-close="outside"
-      aria-expanded="false">
-      <i class="fas fa-cog" aria-hidden="true"></i>
-      <span class="visually-hidden"><?php echo __('Search options'); ?></span>
-    </button>
-    <div class="dropdown-menu mt-2" aria-labelledby="search-box-options">
-      <?php if (sfConfig::get('app_multi_repository')) { ?>
-        <div class="px-3 py-2">
-          <div class="form-check">
-            <input
-              class="form-check-input"
-              type="radio"
-              name="repos"
-              id="search-realm-global"
-              <?php echo !isset($repository) ? 'checked' : ''; ?>
-              value>
-            <label class="form-check-label" for="search-realm-global">
-              <?php echo __('Global search'); ?>
-            </label>
-          </div>
-          <?php if (isset($repository)) { ?>
-            <div class="form-check">
-              <input
-                class="form-check-input"
-                type="radio"
-                name="repos"
-                id="search-realm-repo"
-                checked
-                value="<?php echo $repository->id; ?>">
-              <label class="form-check-label" for="search-realm-repo">
-                <?php echo __('Search <span>%1%</span>', ['%1%' => render_title($repository)]); ?>
-              </label>
-            </div>
-          <?php } ?>
-          <?php if (isset($altRepository)) { ?>
-            <div class="form-check">
-              <input
-                class="form-check-input"
-                type="radio"
-                name="repos"
-                id="search-realm-alt-repo"
-                value="<?php echo $altRepository->id; ?>">
-              <label class="form-check-label" for="search-realm-alt-repo">
-                <?php echo __('Search <span>%1%</span>', ['%1%' => render_title($altRepository)]); ?>
-              </label>
-            </div>
-          <?php } ?>
-        </div>
-        <div class="dropdown-divider"></div>
-      <?php } ?>
-      <a class="dropdown-item" href="<?php echo url_for([
-          'module' => 'informationobject',
-          'action' => 'browse',
-          'showAdvanced' => true,
-          'topLod' => false,
-      ]); ?>">
-        <?php echo __('Advanced search'); ?>
-      </a>
-    </div>
     <input
       id="search-box-input"
       class="form-control form-control-sm dropdown-toggle"
@@ -81,9 +72,10 @@ class="form-control form-control-sm dropdown-toggle"
       placeholder="<?php echo sfConfig::get('app_ui_label_globalSearch'); ?>"
       data-url="<?php echo url_for(['module' => 'search', 'action' => 'autocomplete']); ?>"
       data-bs-toggle="dropdown"
+      data-bs-auto-close="outside"
       aria-label="<?php echo sfConfig::get('app_ui_label_globalSearch'); ?>"
       aria-expanded="false">
-    <ul id="search-box-results" class="dropdown-menu mt-2" aria-labelledby="search-box-input"></ul>
+    <div id="search-box-dropdown" class="dropdown-menu mt-2" aria-labelledby="search-box-input"></div>
     <button class="btn btn-sm atom-btn-secondary" type="submit">
       <i class="fas fa-search" aria-hidden="true"></i>
       <span class="visually-hidden"><?php echo __('Search in browse page'); ?></span>

diff --git a/plugins/arDominionB5Plugin/scss/_layout.scss b/plugins/arDominionB5Plugin/scss/_layout.scss
@@ -96,6 +96,19 @@ header i.fa-2x {
   }
 }
 
+#search-box-results {
+  list-style: none;
+  padding-left: 0;
+  margin-bottom: 0;
+  li{
+    &:last-child {
+      border-bottom: 1px solid $gray-400;
+      padding-bottom: 0.5rem;
+      margin-bottom: 0.5rem;
+    }
+  }
+}
+
 .actions {
   background-color: $secondary;
   border-radius: $border-radius;