Allow SLAC web search to be enabled

SLAC · Sep 30, 2024 · 1b46b7a · 1b46b7a
1 parent f3392fe
commit 1b46b7a
Show file tree

Hide file tree

Showing 13 changed files with 137 additions and 4 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -2,3 +2,4 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,700;1,900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
 <script>setTimeout(function () { if (document.body) {document.body.setAttribute("id", "top");} }, 0);</script>
+<script type="module" src="https://yurts.slac.stanford.edu/SearchWidget.js" defer></script>
diff --git a/config/schema/slac.schema.yml b/config/schema/slac.schema.yml
@@ -21,4 +21,7 @@ slac.settings:
       label: 'The slac today header link'
     hide_social_media_share_icons:
       type: integer
-      label: 'If enabled, social media icons will not be shown on the side'
+      label: 'If enabled, social media icons will not be shown on the side'
+    include_slac_web_search:
+      type: integer
+      label: 'Include SLAC web search option'
diff --git a/includes/region.inc b/includes/region.inc
@@ -0,0 +1,15 @@
+<?php
+
+/**
+ * @file
+ * Region-related hook implementations.
+ */
+
+/**
+ * Implements hook_preprocess_region().
+ */
+function slac_preprocess_region(&$variables) {
+  if ($variables['region'] == 'header') {
+    $variables['include_slac_web_search'] = theme_get_setting('include_slac_web_search', 'slac') ?? FALSE;
+  }
+}
diff --git a/slac.libraries.yml b/slac.libraries.yml
@@ -10,6 +10,10 @@ global:
     dist/js/transitions.es6.js: {}
     dist/js/embed.es6.js: {}
     dist/js/search.es6.js: {}
+    //yurts.slac.stanford.edu/SearchWidget.js:
+      type: external
+      attributes:
+        defer: true
   dependencies:
     - slac/common
     - core/drupal

diff --git a/slac.theme b/slac.theme
@@ -37,6 +37,7 @@ require_once dirname(__FILE__) . '/includes/media.inc';
 require_once dirname(__FILE__) . '/includes/navigation.inc';
 require_once dirname(__FILE__) . '/includes/node.inc';
 require_once dirname(__FILE__) . '/includes/paragraph.inc';
+require_once dirname(__FILE__) . '/includes/region.inc';
 require_once dirname(__FILE__) . '/includes/taxonomy.inc';
 require_once dirname(__FILE__) . '/includes/user.inc';
 require_once dirname(__FILE__) . '/includes/views.inc';
diff --git a/source/02-layouts/header/header.es6.js b/source/02-layouts/header/header.es6.js
@@ -25,7 +25,7 @@ Drupal.behaviors.header = {
         requestAnimationFrame(() => {
           document.documentElement.style.setProperty(
             '--gesso-header-current-height',
-            `${headerHeight}px`
+            `${Math.floor(headerHeight)}px`
           );
           document.body.classList.toggle(
             'has-sticky-header',

diff --git a/source/03-components/search/_search-input.twig b/source/03-components/search/_search-input.twig
@@ -6,3 +6,8 @@
 {% block search_input %}
   <input type="search" placeholder="{{ search_placeholder|default('Search'|t) }}" id="{{ search_id }}" class="c-search__input"/>
 {% endblock %}
+{% block slac_web_search_input %}
+  <div id="{{ slac_web_search_id }}" class="c-search__slac-web">
+    <div data-yurts-div=""></div>
+  </div>
+{% endblock %}
diff --git a/source/03-components/search/_search.scss b/source/03-components/search/_search.scss
@@ -81,6 +81,16 @@
       transition: opacity gesso-duration(long) gesso-easing(ease-in-out);
       z-index: gesso-z-index(social-share) + 1;
 
+      &.c-search__form--web-search {
+        bottom: auto;
+        top: calc(
+          var(--gesso-header-current-height, 0px) +
+            var(--gesso-alert-bar-height, 0px) +
+            var(--gin-toolbar-y-offset, 0px)
+        );
+        transform: none;
+      }
+
       .is-sticky & {
         max-height: calc(
           100vh - var(--gesso-header-current-height) -
@@ -94,6 +104,14 @@
           ),
           0
         );
+
+        &.c-search__form--web-search {
+          top: calc(
+            var(--gesso-header-current-height, 0px) +
+              var(--gin-toolbar-y-offset, 0px)
+          );
+          transform: none;
+        }
       }
 
       &[hidden] {
@@ -180,6 +198,29 @@
   }
 }
 
+.yurts-search-widget button[name='search'] {
+  background-color: gesso-color(background, dropdown-menu);
+  border: 1px solid gesso-grayscale(black);
+  border-radius: 4px;
+  box-shadow: none;
+  font-family: gesso-font-family(primary);
+  font-size: var(--gesso-search-font-size);
+  font-weight: gesso-font-weight(light);
+  height: auto;
+  line-height: gesso-line-height(base);
+  margin: 0;
+  padding: rem(gesso-spacing(1)) rem(gesso-spacing(1.5));
+  width: 100%;
+
+  @include breakpoint(gesso-breakpoint(mobile-menu) + 1px) {
+    padding-block: rem(gesso-spacing(0.5));
+  }
+}
+
+.yurts-search-widget svg.lucide-search.icon {
+  display: none;
+}
+
 .c-search__button,
 .c-search__submit {
   @include text-button;
@@ -275,3 +316,7 @@
     margin-bottom: gesso-spacing(4);
   }
 }
+
+.c-search__slac-web {
+  display: none;
+}
diff --git a/source/03-components/search/search.es6.js b/source/03-components/search/search.es6.js
@@ -5,6 +5,7 @@ import SearchFlyout from './modules/SearchFlyout.es6';
 
 Drupal.behaviors.search = {
   attach(context) {
+    let yurtsInitialized = false;
     const search = once('search-dropdown-init', '.c-search--dropdown', context);
     search.forEach(searchElem => {
       const searchFlyout = new SearchFlyout(searchElem);
@@ -13,10 +14,29 @@ Drupal.behaviors.search = {
     const searchForms = context.querySelectorAll('.c-search__form');
     searchForms.forEach(searchForm => {
       const searchInput = searchForm.querySelector('.c-search__input');
+      const searchInputSlacWeb = searchForm.querySelector('.c-search__slac-web');
+      const searchSubmit = searchForm.querySelector('.c-search__submit');
       const searchRadios = searchForm.querySelectorAll(
         'input[name="search_type"]'
       );
       const searchHidden = searchForm.querySelector('.c-search__hidden');
+      function initYurtsSearch(yurtsDiv) {
+        if (yurtsDiv) {
+          yurtsDiv.id = 'YurtsSearch';
+          // eslint-disable-next-line no-undef
+          Yurts().searchWidget({
+            settings: {
+              assistantId: '2734019e-9bfe-4f14-8150-5e9c34aef57c',
+              NEXT_PUBLIC_API: 'https://api-yurts.slac.stanford.edu/',
+              NEXT_PUBLIC_APPLICATION_URL: 'https://yurts.slac.stanford.edu',
+              AUTH_URL: 'https://auth-yurts.slac.stanford.edu/realms/yurts',
+              CLIENT_ID: 'yurtswidgets',
+              theme: 'light'
+            },
+          });
+          yurtsInitialized = true;
+        }
+      }
       function handleRadioChange() {
         const selectedSearch = this.value;
         let searchUrl = `${drupalSettings.maskedPath || ''}/search`;
@@ -31,6 +51,22 @@ Drupal.behaviors.search = {
             `<input type="hidden" name="lf" value="1" /><input type="hidden" name="url" value="" /><input type="hidden" name="gone" value="active" />`
           );
         }
+        if (selectedSearch === 'slac_web') {
+          if(!yurtsInitialized) {
+            const yurtsDiv = this.closest('.c-search__form').querySelector('[data-yurts-div]');
+            initYurtsSearch(yurtsDiv);
+          }
+          searchInput.style.display = 'none';
+          searchSubmit.style.display = 'none';
+          searchInputSlacWeb.style.display = 'block';
+          searchForm.classList.add('c-search__form--web-search');
+        }
+        else {
+          searchInput.style.display = 'block';
+          searchSubmit.style.display = 'block';
+          searchInputSlacWeb.style.display = 'none';
+          searchForm.classList.remove('c-search__form--web-search');
+        }
         searchInput.setAttribute('name', searchInputName);
         searchForm.setAttribute('action', searchUrl);
       }

diff --git a/source/03-components/search/search.twig b/source/03-components/search/search.twig
@@ -5,9 +5,10 @@
 
 {% set search_form_id = 'search-form'|unique_id %}
 {% set search_id = 'search'|unique_id %}
+{% set slac_web_search_id = 'search-slac-web'|unique_id %}
 {% set site_search_id = 'search_type_site'|unique_id %}
-{% set slac_web_id = 'search_type_slac_web'|unique_id %}
 {% set people_id = 'search_type_people'|unique_id %}
+{% set slac_web_id = 'search_type_slac_web'|unique_id %}
 
 <div {{ add_attributes({ class: classes } ) }}>
   <button class="c-search__button" aria-expanded="true" aria-controls="{{ search_form_id }}">
@@ -35,6 +36,14 @@
               {{ 'Search people'|t }}
             </label>
           </div>
+          {% if include_slac_web_search %}
+            <div>
+              <input type="radio" name="search_type" value="slac_web" id="{{ slac_web_id }}"/>
+              <label for="{{ slac_web_id }}">
+                {{ 'Search SLAC web'|t }}
+              </label>
+            </div>
+          {% endif %}
         </fieldset>
         <button type="submit" class="c-search__submit">
           {% include '@components/icon/icon.twig' with {

diff --git a/source/03-components/search/search.yml b/source/03-components/search/search.yml
@@ -1,2 +1,3 @@
 ---
 modifier_classes: 'c-search--dropdown'
+include_slac_web_search: 'true'
diff --git a/templates/layout/region--header.html.twig b/templates/layout/region--header.html.twig
@@ -25,7 +25,8 @@
 {% set header_content %}
   {{ content }}
   {% include '@components/search/search.twig' with {
-    'modifier_classes': 'c-search--dropdown'
+    'modifier_classes': 'c-search--dropdown',
+    'include_slac_web_search': include_slac_web_search,
   } %}
 {% endset %}
 

diff --git a/theme-settings.php b/theme-settings.php
@@ -69,4 +69,16 @@ function slac_form_system_theme_settings_alter(&$form, FormStateInterface $form_
     '#default_value' => theme_get_setting('slac_today_header_link'),
     '#description' => t('The slac today header link'),
     ];
+
+  $form['slac_web_search'] = [
+    '#type' => 'details',
+    '#title' => 'SLAC web search',
+    '#open' => TRUE,
+  ];
+
+  $form['slac_web_search']['include_slac_web_search'] = [
+    '#type' => 'checkbox',
+    '#title' => t('Include SLAC web search option?'),
+    '#default_value' => theme_get_setting('include_slac_web_search') ?? FALSE,
+  ];
 }