No notes defined.

<form {% if form.action %}action="{{ form.action }}"{% endif %} class="uol-col-container uol-search-results {{ 'uol-search--has-filters' if form.filter_inputs }}">
  <div class="uol-search-results__page-heading">
    {% render '@uol-page-heading', { page_heading: page_heading } %}
  </div>

  {% if form.filter_inputs %}
    <div class="uol-search-result__filters">
      {% render '@uol-filters-panel', { filter_inputs: form.filter_inputs,
                                        results_button: form.results_button } %}
    </div>
  {% endif %}

  <div class="uol-search-results__main">

    {% render '@uol-form-block', { form_block: form.form_block } %}

    <div class="uol-search-results__results">

      {% render '@uol-results-count' %}

      <div class="uol-search-results__button-chips-container">
        {% render '@uol-chips', { items: chips } %}
      </div>

      {% render '@uol-results-items', { items: results_items } %}

      {% render '@uol-pagination', { pagination: pagination } %}
    </div>
  </div>

</form>
<form action="/forms/some-action" class="uol-col-container uol-search-results uol-search--has-filters">
    <div class="uol-search-results__page-heading">
        <header class="page-heading">

            <h1 class="page-heading__title">
                Search cheeses

            </h1>

        </header>

    </div>

    <div class="uol-search-result__filters">

        <div class="uol-filters-panel " id="search-filters" aria-labelledby="filters-panel-title" role="group">
            <div class="dialog-overlay" tabindex="-1" data-a11y-dialog-hide></div>

            <h2 id="filters-panel-title" class="uol-filters-panel__title">Filters</h2>

            <div class="uol-form__input-container 
 uol-form__input-container--small">

                <div role="radiogroup" aria-labelledby="filter-study-mode-group filter-study-mode-group-hint" class="uol-form__custom-fieldset">

                    <span id="filter-study-mode-group" class="uol-form__custom__legend">Mode of study</span>

                    <span class="uol-form__input-label__hint" id="filter-study-mode-group-hint">Select one option </span>

                    <div class="uol-form__inputs-wrapper ">

                        <div class="uol-form__input--radio-wrapper">
                            <input class="uol-form__input--radio" type="radio" id="filter-study-mode-1" name="filter-study-mode-group" value="full-time">
                            <label class="uol-form__input--radio__label" for="filter-study-mode-1">Full time</label>
                            <span class="uol-form__input--custom-radio" hidden>
                                <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                    <circle cx="12" cy="12" r="12" />
                                </svg>
                            </span>
                        </div>

                        <div class="uol-form__input--radio-wrapper">
                            <input class="uol-form__input--radio" type="radio" id="filter-study-mode-2" name="filter-study-mode-group" value="part-time" checked>
                            <label class="uol-form__input--radio__label" for="filter-study-mode-2">Part time</label>
                            <span class="uol-form__input--custom-radio" hidden>
                                <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                    <circle cx="12" cy="12" r="12" />
                                </svg>
                            </span>
                        </div>

                    </div>

                </div>

            </div>

            <div class="uol-form__input-container 
 uol-form__input-container--small">

                <div role="group" aria-labelledby="filter-delivery-type-group filter-delivery-type-group-hint" class="uol-form__custom-fieldset">

                    <span id="filter-delivery-type-group" class="uol-form__custom__legend">Delivery type</span>

                    <span class="uol-form__input-label__hint" id="filter-delivery-type-group-hint">Select all that apply </span>

                    <div class="uol-form__input--checkbox-wrapper">
                        <input class="uol-form__input--checkbox" type="checkbox" id="filter-delivery-type-campus" name="filter-delivery-type-campus" value="">
                        <label class="uol-form__input--checkbox-label" for="filter-delivery-type-campus" id="filter-delivery-type-campus-label">On campus</label>
                        <span class="uol-form__input--checkbox-custom">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                                <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                            </svg>
                        </span>
                    </div>

                    <div class="uol-form__input--checkbox-wrapper">
                        <input class="uol-form__input--checkbox" type="checkbox" id="filter-delivery-type-blended" name="filter-delivery-type-blended" value="" checked>
                        <label class="uol-form__input--checkbox-label" for="filter-delivery-type-blended" id="filter-delivery-type-blended-label">Blended learning</label>
                        <span class="uol-form__input--checkbox-custom">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                                <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                            </svg>
                        </span>
                    </div>

                    <div class="uol-form__input--checkbox-wrapper">
                        <input class="uol-form__input--checkbox" type="checkbox" id="filter-delivery-type-online" name="filter-delivery-type-online" value="">
                        <label class="uol-form__input--checkbox-label" for="filter-delivery-type-online" id="filter-delivery-type-online-label">Online exclusive</label>
                        <span class="uol-form__input--checkbox-custom">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                                <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                            </svg>
                        </span>
                    </div>

                </div>

            </div>

            <div class="uol-form__input-container 
 uol-form__input-container--small">

                <div role="group" aria-labelledby="filter-course-type filter-course-type-hint" class="uol-form__custom-fieldset">

                    <span id="filter-course-type" class="uol-form__custom__legend">Course type</span>

                    <span class="uol-form__input-label__hint" id="filter-course-type-hint">Select all that apply </span>

                    <div class="uol-form__input--checkbox-wrapper">
                        <input class="uol-form__input--checkbox" type="checkbox" id="filter-course-type-foundation" name="filter-course-type-foundation" value="">
                        <label class="uol-form__input--checkbox-label" for="filter-course-type-foundation" id="filter-course-type-foundation-label">Foundation year</label>
                        <span class="uol-form__input--checkbox-custom">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                                <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                            </svg>
                        </span>
                    </div>

                    <div class="uol-form__input--checkbox-wrapper">
                        <input class="uol-form__input--checkbox" type="checkbox" id="filter-course-type-apprenticeship" name="filter-course-type-apprenticeship" value="">
                        <label class="uol-form__input--checkbox-label" for="filter-course-type-apprenticeship" id="filter-course-type-apprenticeship-label">Apprenticeships</label>
                        <span class="uol-form__input--checkbox-custom">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                                <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                            </svg>
                        </span>
                    </div>

                    <div class="uol-form__input--checkbox-wrapper">
                        <input class="uol-form__input--checkbox" type="checkbox" id="filter-course-type-intercalated" name="filter-course-type-intercalated" value="">
                        <label class="uol-form__input--checkbox-label" for="filter-course-type-intercalated" id="filter-course-type-intercalated-label">Intercalated degree</label>
                        <span class="uol-form__input--checkbox-custom">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                                <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                            </svg>
                        </span>
                    </div>

                </div>

            </div>

            <div class="uol-form__input-container 
">

                <label class="uol-form__input-label" for="filter-subject" id="filter-subject-label">
                    <span class="uol-form__input-label__text">Subject</span>

                    <span class="uol-form__input-label__hint" id="filter-subject-hint">Select one option </span>

                </label>

                <div class="uol-form__input-wrapper" data-field-invalid=false>
                    <select class="uol-form__input uol-form__input--select" name="filter-subject" id="filter-subject">

                        <option value="">Select an option</option>

                        <option value="art_design_media_and_communication">Art, Design, Media and Communication</option>

                        <option value="biological_biomedical_and_sports_sciences">Biological, Biomedical and Sports Sciences</option>

                        <option value="business_management_finance_and_economics" selected>Business, Management, Finance and Economics</option>

                        <option value="chemistry_food_science_and_nutrition">Chemistry, Food Science and Nutrition</option>

                        <option value="education_sociology_and_social_policy">Education, Sociology and Social Policy</option>

                        <option value="engineering_and_computing">Engineering and Computing</option>

                        <option value="english_history_and_humanities">English, History and Humanities</option>

                        <option value="geography_environment_and_earth_sciences">Geography, Environment and Earth Sciences</option>

                        <option value="languages_cultures_and_societies">Languages, Cultures and Societies</option>

                        <option value="law_criminology_and_politics">Law, Criminology and Politics</option>

                        <option value="mathematics_and_physics">Mathematics and Physics</option>

                        <option value="medicine_dentistry_psychology_and_healthcare">Medicine, Dentistry, Psychology and Healthcare</option>

                        <option value="music_theatre_and_performance">Music, Theatre and Performance</option>

                    </select>
                    <svg class="uol-form__input__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" focusable="false" aria-hidden="true">
                        <path fill="none" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
                    </svg>
                </div>

            </div>

            <div class="uol-filters-panel__footer">
                <button id="clear_filter_panel" class="uol-button uol-button--secondary
    
      uol-icon uol-icon--mdiDeleteForeverOutline
      
      
      uol-icon--icon-only--large
    " type="button">Clear all filters</button>

                <button id="show_search_results" class="uol-button uol-button--primary
    " type="button">Show 15 search results</button>

            </div>
        </div>
        <div class="uol-filters-panel__overlay"></div>

    </div>

    <div class="uol-search-results__main">

        <div class="uol-form__container">

            <div class="uol-form__inner-wrapper">

                <div class="uol-form uol-form--button-inline">

                    <div class="uol-form__inputs-wrapper">

                        <div class="uol-form__input-container 
">

                            <label class="uol-form__input-label" for="inputId2">
                                <span class="uol-form__input-label__text">Search by keyword</span>

                            </label>

                            <div class="uol-form__input-wrapper
               uol-form__input-wrapper--search
               uol-form__input-wrapper--with-icon " data-field-invalid=false>

                                <!--  -->

                                <input class="uol-form__input  uol-form__input--search" type="search" id="inputId2" name="searchCourses2" value="" aria-invalid="false" autocomplete="off">

                                <!--  -->
                            </div>

                        </div>

                    </div>

                    <div class="uol-form__button-wrapper">
                        <button class="uol-button uol-button--primary
    " type="submit">Search</button>

                    </div>

                </div>

            </div>

        </div>

        <div class="uol-search-results__results">

            <div class="uol-results-count">

                <h2 class="uol-results-count__title">5 results for <strong>'ipsum'</strong></h2>

            </div>

            <div class="uol-search-results__button-chips-container">

            </div>

            <div class="uol-results-items">

                <article class="uol-results-items__item uol-results-items__item--has-image ">

                    <div class="uol-results-items__item__text-container">
                        <h2 class="uol-results-items__item__title">
                            <a href="/cheese/brie" class="uol-results-items__item__link">Brie</a>
                        </h2>

                        <p class="uol-results-items__item__summary">Brie is a soft cow&apos;s-milk cheese named after Brie, the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of white mould. The rind is typically eaten, with its flavor depending largely upon the ingredients used and its manufacturing environment</p>

                    </div>

                    <div class="uol-results-items__item__image-container">
                        <img class="uol-results-items__item__img" src="/placeholders/banner/banner-05.jpg" alt="A super informative description">
                    </div>

                </article>

                <article class="uol-results-items__item  ">

                    <div class="uol-results-items__item__text-container">
                        <h2 class="uol-results-items__item__title">
                            <a href="/cheese/cashel-blue" class="uol-results-items__item__link">Cashel Blue</a>
                        </h2>

                        <p class="uol-results-items__item__summary">Cashel Blue is a hand-made, semi-soft, blue veined, medium-strength blue cheese with a creamy texture. Cashel Blue was the first Irish blue cheese, named after the Rock of Cashel overlooking the pastures close to the cheese farm of the family Grubb.</p>

                    </div>

                </article>

                <article class="uol-results-items__item  ">

                    <div class="uol-results-items__item__text-container">
                        <h2 class="uol-results-items__item__title">
                            <a href="/cheese/cheddar" class="uol-results-items__item__link">Cheddar</a>
                        </h2>

                        <p class="uol-results-items__item__summary">Cheddar cheese is a relatively hard, off-white, sometimes sharp-tasting, natural cheese. Originating in the English village of Cheddar in Somerset, cheeses of this style are now produced beyond the region and in several countries around the world</p>

                    </div>

                </article>

                <article class="uol-results-items__item uol-results-items__item--has-image ">

                    <div class="uol-results-items__item__text-container">
                        <h2 class="uol-results-items__item__title">
                            <a href="/cheese/edam" class="uol-results-items__item__link">Edam</a>
                        </h2>

                        <p class="uol-results-items__item__summary">Edam is a semi-hard cheese that originated in the Netherlands, and is named after the town of Edam in the province of North Holland. Edam is traditionally sold in rounded cylinders with a pale yellow interior and a coat, or rind, of red paraffin wax. Edam ages and travels well, and does not spoil; it only hardens</p>

                    </div>

                    <div class="uol-results-items__item__image-container">
                        <img class="uol-results-items__item__img" src="/placeholders/banner/banner-05.jpg" alt="A super informative description">
                    </div>

                </article>

                <article class="uol-results-items__item uol-results-items__item--has-image ">

                    <div class="uol-results-items__item__text-container">
                        <h2 class="uol-results-items__item__title">
                            <a href="/cheese/manchego" class="uol-results-items__item__link">Manchego</a>
                        </h2>

                        <p class="uol-results-items__item__summary">Manchego is a cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed. It is aged between 60 days and 2 years. Manchego has a firm and compact consistency and a buttery texture, and often contains small, unevenly distributed air pockets</p>

                    </div>

                    <div class="uol-results-items__item__image-container">
                        <img class="uol-results-items__item__img" src="/placeholders/banner/banner-05.jpg" alt="A super informative description">
                    </div>

                </article>

                <article class="uol-results-items__item uol-results-items__item--has-image ">

                    <div class="uol-results-items__item__text-container">
                        <h2 class="uol-results-items__item__title">
                            <a href="/cheese/parmigiano-reggiano" class="uol-results-items__item__link">Parmigiano-Reggiano</a>
                        </h2>

                        <p class="uol-results-items__item__summary">Parmigiano-Reggiano or Parmesan is an Italian hard, granular cheese that is produced from cow&apos;s milk and has aged 12-36 months.</p>

                    </div>

                    <div class="uol-results-items__item__image-container">
                        <img class="uol-results-items__item__img" src="/placeholders/banner/banner-05.jpg" alt="A super informative description">
                    </div>

                </article>

            </div>

            <nav class="uol-pagination" aria-label="pagination">
                <ol class="uol-pagination__list">
                    <li class="uol-pagination__item">

                        <button class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiPageFirst" type="button" disabled>First page</button>

                    </li>
                    <li class="uol-pagination__item">

                        <button class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiArrowLeft" type="button" disabled>Previous page</button>

                    </li>

                    <li class="uol-pagination__item uol-pagination__item--numeric uol-pagination__item--current">
                        <a class="uol-button uol-button--secondary uol-icon uol-icon--icon-only uol-pagination__link" href="/page-1" data-number="1" aria-current=page>
                            <span class="uol-icon__label">
                                <span class="hide-accessible">Page </span>1
                            </span>
                        </a>
                    </li>

                    <li class="uol-pagination__item uol-pagination__item--numeric ">
                        <a class="uol-button uol-button--secondary uol-icon uol-icon--icon-only uol-pagination__link" href="/page-2" data-number="2">
                            <span class="uol-icon__label">
                                <span class="hide-accessible">Page </span>2
                            </span>
                        </a>
                    </li>

                    <li class="uol-pagination__item uol-pagination__item--numeric ">
                        <a class="uol-button uol-button--secondary uol-icon uol-icon--icon-only uol-pagination__link" href="/page-3" data-number="3">
                            <span class="uol-icon__label">
                                <span class="hide-accessible">Page </span>3
                            </span>
                        </a>
                    </li>

                    <li class="uol-pagination__item">

                        <a href="/page-2" class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiArrowRight">Next page</a>

                    </li>
                    <li class="uol-pagination__item">

                        <a href="/page-4" class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiPageLast">Last page</a>

                    </li>
                </ol>

                <span class="uol-pagination__status">
                    Page 1 of 4
                </span>
            </nav>

        </div>
    </div>

</form>
  • Content:
    # TODO Search results
    
    Filters page chips are now to be generated directly in the back end. With this approach DS patterns won't include chips, but just include an area for these to be inserted in to. Previous work on this has assisted with the HTML mark up for the chip inclusion, this has mainly passed testing with bugs raised related to chips. As chips are no longer being generated on the DS side, post finder these bugs may be classed as redundant. The CMS solution also means that chips should also work on IOS, Android and Firefox platforms.
    
    ## To do before go live
    List of items to change/add in ADO
    
    - [X] Results count update to account for single variant not showing plural resultS (merge in branch 33247-results-count-update)
    - [X] Results count update to enable custom message
    - [X] Results count update to still have container showing but with no content (placeholder for CMS) 
    - [X] Chip modification to allow chip to be passed a URL plus accessibility test (to test chip component in DS post Coursefinder delivery)
    - [X] MC Remove chips dependency from DS JS
    - [X] PB Swap hard coded chips container to pass in @uol-chips instead
    - [X] Make native chips work (Firefox, iOs, Android)
    - [X] Form action update to prevent accessibility fails - Done on CMS end and search results njk (see below)
    - [X] Select typeahead blue line in wrong place on mobile 
    
    ## To do post MVP
    - [ ] Documentation for results count, resubmit for testing
    - [ ] Documentation for chips component, resubmit for testing
    - [ ] Documentation for search results pattern, resubmit for testing
    - [ ] Generic form component update (duplicate of what we did for form search pattern in generic form component)
    
    
    
    
    
    
  • URL: /components/raw/uol-pattern-search-results/TODO.md
  • Filesystem Path: src/library/03-patterns/search-results/TODO.md
  • Size: 1.7 KB
  • Content:
    .uol-search-results {
    
    }
    
      .uol-search-results__page-heading {
        @extend .uol-col;
        @extend .uol-col-12;
    
        padding-bottom: 0;
    
    
        .page-heading {
          @include media("<uol-media-xs") {
            padding-left: $spacing-2;
            padding-top: $spacing-2;
          }
    
    
    
          margin-bottom: $spacing-4;
    
          @include media(">=uol-media-m") {
            margin-bottom: $spacing-6;
          }
        }
      }
    
      .uol-search-results__main {
        @include page-width("full");
      }
    
      .uol-search-result__filters {
        @extend .uol-col;
        @extend .uol-col-12;
        @extend .uol-col-l-3;
    
        .js & {
          @include media("<uol-media-l") {
            padding: 0;
          }
        }
      }
    
    // Components margin/padding changes if in search results pattern
    .uol-search-results {
    
      margin-bottom: $spacing-7;
    
      .uol-form__container,
      .uol-results-count {
        margin-bottom: $spacing-6;
    
        @include media(">=uol-media-m") {
          margin-bottom: $spacing-7;
        }
      }
    
      .uol-chips {
        padding: 0;
      }
    
      .uol-search-results__button-chips-container {
        .uol-button {
          margin-bottom: $spacing-5;
    
          @include media(">=uol-media-m") {
            margin-bottom: $spacing-6;
          }
    
        }
      }
    
      .uol-results-items {
        margin: 1.25rem 0 $spacing-6;
        padding: 0;
    
        @include media(">=uol-media-m") {
          margin: 2.25rem 0 $spacing-7;
        }
      }
    
      .uol-form__inner-wrapper .uol-form__input-wrapper {
        &::before {
          @include media("<uol-media-m") {
            bottom: 1rem;
          }
      }
    }
    }
    
  • URL: /components/raw/uol-pattern-search-results/_search-results.scss
  • Filesystem Path: src/library/03-patterns/search-results/_search-results.scss
  • Size: 1.5 KB
  • Content:
    const focusTrap = require('focus-trap');
    let courseFinderFilterPage = false;
    
    export const uolSearchResults = () => {
      console.log('f:uolSearchResults');
      const searchResultsPage = document.querySelector('.uol-search--has-filters');
    
      if (searchResultsPage) {
    
       let filtersOffscreen = false;
    
        // Create ResizeObserver to toggle offscreen filters
        const searchScreenResize = new ResizeObserver((entries) => {
          const viewportWidth = entries[0].contentRect.width;
          // TODO: investigate docwidth issue further
          // var docWidth = document.documentElement.clientWidth || document.body.clientWidth;
          // console.log('viewportWidth ' + viewportWidth);
    
          if (viewportWidth < 1008) {
            if (filtersOffscreen === false) {
              offScreenFiltersCreate();
              filtersOffscreen = true;
            }
          } else {
            if (filtersOffscreen === true) {
              offScreenFiltersDestroy();
              filtersOffscreen = false;
            }
          }
        });
    
        searchScreenResize.observe(document.body);
    
        // Select button container
        const btnContainer = searchResultsPage.querySelector('.uol-search-results__button-chips-container');
    
        // Close filters panel button
        const btnCloseFilters = document.getElementById('filters-close-button');
    
        // Show results button
        const btnShowResults = document.getElementById('show_search_results');
    
        // Create toggle button
        const btnFilterToggle = document.createElement('button');
        btnFilterToggle.id = 'filters-toggle';
        btnFilterToggle.type = 'button';
        btnFilterToggle.classList.add('uol-button');
        btnFilterToggle.classList.add('uol-button--secondary');
        btnFilterToggle.classList.add('uol-icon');
        btnFilterToggle.classList.add('uol-icon--icon-only--large');
        btnFilterToggle.innerHTML = `
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
            <path fill="#000000" fill-rule="nonzero" d="M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z"></path>
          </svg>
          <span class="uol-icon__label">Filter results</span>
        `;
    
        // Select filters panel
        const filtersPanel = document.querySelector('.uol-filters-panel');
    
        const filterPanelFocusTrap = focusTrap.createFocusTrap(filtersPanel, {
          clickOutsideDeactivates: true,
          returnFocusOnDeactivate: true,
          onActivate: () => {
            filtersPanel.classList.add('uol-filters-panel--open');
            document.body.style.overflow = 'hidden';
          },
          onDeactivate: () => {
            filtersPanel.classList.remove('uol-filters-panel--open');
            document.body.style.removeProperty('overflow');
    
            // Slight delay before attempting to move focus to allow reactivation of non-modal elements
            const interval = setInterval(() => {
              btnFilterToggle.focus();
              clearInterval(interval);
            }, 5);
          }
        });
    
        btnFilterToggle.addEventListener('click', () => {
          filtersOpen();
        })
    
        const filtersOpen = () => {
          filtersPanel.setAttribute('tabindex', '-1')
          filtersPanel.removeAttribute('hidden');
          filtersPanel.focus();
          filterPanelFocusTrap.activate();
        }
    
        const filtersClose = () => {
          filterPanelFocusTrap.deactivate();
          filtersPanel.addEventListener('transitionend', hidePanel)
          const hidePanel = () => filtersPanel.setAttribute('hidden', true);
          filtersPanel.removeEventListener('transitionend', hidePanel)
        }
    
        const offScreenFiltersCreate = () => {
    
          // Hide the filters
          filtersPanel.setAttribute('hidden', true);
          
          // Add btnFilterToggle to DOM
          btnContainer.insertAdjacentElement('afterbegin', btnFilterToggle);
    
          btnCloseFilters.addEventListener('click', () => {
            filtersClose();
          })
    
          btnShowResults.addEventListener('click', () => {
            filtersClose();
          })
        }
    
        const offScreenFiltersDestroy = () => {
    
          // Unhide the filters
          filtersPanel.removeAttribute('hidden');
    
          // Remove btnFilterToggle from DOM
          btnFilterToggle.remove();
    
          // In case the filters are open we need to close
          filtersClose();
    
          // Remove 'hidden' attribute that was added by filtersClose()
          filtersPanel.removeAttribute('hidden');
    
        }
      }
    }
    
  • URL: /components/raw/uol-pattern-search-results/search-results.module.js
  • Filesystem Path: src/library/03-patterns/search-results/search-results.module.js
  • Size: 4.3 KB
{
  "page_heading": {
    "title": "Search cheeses"
  },
  "form": {
    "action": "/forms/some-action",
    "filter_inputs": [
      {
        "id": "filter-study-mode",
        "name": "filter-study-mode",
        "label": "Mode of study",
        "type": "radio",
        "input_width": "small",
        "legend": "Mode of study",
        "hint": "Select one option",
        "heading_level": "h3",
        "group_label_id": "filter-study-mode-group",
        "options": [
          {
            "id": "filter-study-mode-1",
            "name": "filter-study-mode-group",
            "value": "full-time",
            "label": "Full time"
          },
          {
            "id": "filter-study-mode-2",
            "name": "filter-study-mode-group",
            "value": "part-time",
            "label": "Part time",
            "checked": true
          }
        ]
      },
      {
        "id": "filter-delivery-type",
        "name": "filter-delivery-type",
        "label": "Delivery type",
        "type": "checkbox",
        "input_width": "small",
        "legend": "Delivery type",
        "hint": "Select all that apply",
        "heading_level": "h3",
        "group_label_id": "filter-delivery-type-group",
        "options": [
          {
            "id": "filter-delivery-type-campus",
            "name": "filter-delivery-type-campus",
            "value": "campus",
            "label": "On campus"
          },
          {
            "id": "filter-delivery-type-blended",
            "name": "filter-delivery-type-blended",
            "value": "blended",
            "label": "Blended learning",
            "checked": true
          },
          {
            "id": "filter-delivery-type-online",
            "name": "filter-delivery-type-online",
            "value": "online",
            "label": "Online exclusive"
          }
        ]
      },
      {
        "id": "filter-course-type",
        "name": "filter-course-type",
        "label": "Course type",
        "type": "checkbox",
        "input_width": "small",
        "legend": "Course type",
        "hint": "Select all that apply",
        "heading_level": "h3",
        "group_label_id": "filter-course-type",
        "options": [
          {
            "id": "filter-course-type-foundation",
            "name": "filter-course-type-foundation",
            "value": "foundation",
            "label": "Foundation year"
          },
          {
            "id": "filter-course-type-apprenticeship",
            "name": "filter-course-type-apprenticeship",
            "value": "apprenticeship",
            "label": "Apprenticeships"
          },
          {
            "id": "filter-course-type-intercalated",
            "name": "filter-course-type-intercalated",
            "value": "intercalated",
            "label": "Intercalated degree"
          }
        ]
      },
      {
        "type": "select",
        "label": "Subject",
        "hint": "Select one option",
        "name": "filter-subject",
        "id": "filter-subject",
        "invalid": false,
        "options": [
          {
            "value": "art_design_media_and_communication",
            "label": "Art, Design, Media and Communication"
          },
          {
            "value": "biological_biomedical_and_sports_sciences",
            "label": "Biological, Biomedical and Sports Sciences"
          },
          {
            "value": "business_management_finance_and_economics",
            "label": "Business, Management, Finance and Economics",
            "selected": true
          },
          {
            "value": "chemistry_food_science_and_nutrition",
            "label": "Chemistry, Food Science and Nutrition"
          },
          {
            "value": "education_sociology_and_social_policy",
            "label": "Education, Sociology and Social Policy"
          },
          {
            "value": "engineering_and_computing",
            "label": "Engineering and Computing"
          },
          {
            "value": "english_history_and_humanities",
            "label": "English, History and Humanities"
          },
          {
            "value": "geography_environment_and_earth_sciences",
            "label": "Geography, Environment and Earth Sciences"
          },
          {
            "value": "languages_cultures_and_societies",
            "label": "Languages, Cultures and Societies"
          },
          {
            "value": "law_criminology_and_politics",
            "label": "Law, Criminology and Politics"
          },
          {
            "value": "mathematics_and_physics",
            "label": "Mathematics and Physics"
          },
          {
            "value": "medicine_dentistry_psychology_and_healthcare",
            "label": "Medicine, Dentistry, Psychology and Healthcare"
          },
          {
            "value": "music_theatre_and_performance",
            "label": "Music, Theatre and Performance"
          }
        ]
      }
    ],
    "results_button": {
      "type": "button",
      "content": "Show 15 search results",
      "style": "primary",
      "id": "show_search_results"
    },
    "form_block": {
      "lead": null,
      "additional_info_before": null,
      "button": {
        "style": "primary",
        "type": "submit",
        "content": "Search"
      },
      "fields": [
        {
          "type": "search",
          "id": "inputId2",
          "name": "searchCourses2",
          "label": "Search by keyword",
          "invalid": "false",
          "autocomplete": "off",
          "has_icon": true
        }
      ],
      "button_inline": true
    }
  },
  "results_items": [
    {
      "url": "/cheese/brie",
      "title": "Brie",
      "text": "Brie is a soft cow&apos;s-milk cheese named after Brie, the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of white mould. The rind is typically eaten, with its flavor depending largely upon the ingredients used and its manufacturing environment",
      "image": {
        "src": "/placeholders/banner/banner-05.jpg",
        "alt": "A super informative description"
      }
    },
    {
      "url": "/cheese/cashel-blue",
      "title": "Cashel Blue",
      "text": "Cashel Blue is a hand-made, semi-soft, blue veined, medium-strength blue cheese with a creamy texture. Cashel Blue was the first Irish blue cheese, named after the Rock of Cashel overlooking the pastures close to the cheese farm of the family Grubb."
    },
    {
      "url": "/cheese/cheddar",
      "title": "Cheddar",
      "text": "Cheddar cheese is a relatively hard, off-white, sometimes sharp-tasting, natural cheese. Originating in the English village of Cheddar in Somerset, cheeses of this style are now produced beyond the region and in several countries around the world"
    },
    {
      "url": "/cheese/edam",
      "title": "Edam",
      "text": "Edam is a semi-hard cheese that originated in the Netherlands, and is named after the town of Edam in the province of North Holland. Edam is traditionally sold in rounded cylinders with a pale yellow interior and a coat, or rind, of red paraffin wax. Edam ages and travels well, and does not spoil; it only hardens",
      "image": {
        "src": "/placeholders/banner/banner-05.jpg",
        "alt": "A super informative description"
      }
    },
    {
      "url": "/cheese/manchego",
      "title": "Manchego",
      "text": "Manchego is a cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed. It is aged between 60 days and 2 years. Manchego has a firm and compact consistency and a buttery texture, and often contains small, unevenly distributed air pockets",
      "image": {
        "src": "/placeholders/banner/banner-05.jpg",
        "alt": "A super informative description"
      }
    },
    {
      "url": "/cheese/parmigiano-reggiano",
      "title": "Parmigiano-Reggiano",
      "text": "Parmigiano-Reggiano or Parmesan is an Italian hard, granular cheese that is produced from cow&apos;s milk and has aged 12-36 months.",
      "image": {
        "src": "/placeholders/banner/banner-05.jpg",
        "alt": "A super informative description"
      }
    }
  ],
  "pagination": {
    "current": 1,
    "pages": [
      {
        "number": 1,
        "url": "/page-1"
      },
      {
        "number": 2,
        "url": "/page-2"
      },
      {
        "number": 3,
        "url": "/page-3"
      },
      {
        "number": 4,
        "url": "/page-4"
      }
    ]
  }
}