No notes defined.

{# <div class="uol-col-container uol-example-col-container uol-col-debug"> #}
  <div class="uol-filters-panel {{ 'uol-filters-panel--open' if open }}" 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>

    {% for input in filter_inputs %}
      {% render '@uol-form-input', input %}
    {% endfor %}

    <div class="uol-filters-panel__footer">
      {% render '@uol-button', {
        "type": "button",
        "content": "Clear all filters",
        "icon": "mdiDeleteForeverOutline",
        "large_icon": true,
        "style": "secondary",
        "id": "clear_filter_panel"
      } %}
      {% render '@uol-button', results_button %}
    </div>
  </div>
  <div class="uol-filters-panel__overlay"></div>
{# </div> #}
<div class="uol-filters-panel uol-filters-panel--open" 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 
">

        <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">
                    <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 
">

        <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" width="38" height="38" 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="">
                <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" width="38" height="38" 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" width="38" height="38" 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 
">

        <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" width="38" height="38" 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" width="38" height="38" 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" width="38" height="38" 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" aria-label="Select 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">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 14 search results</button>

    </div>
</div>
<div class="uol-filters-panel__overlay"></div>
  • Content:
    $filters-z-index: 1000;
    
    .uol-filters-panel {
      box-sizing: border-box;
      top: 0;
      bottom: 0;
      left: 0;
      background-color: $color-white;
      width: 100%;
      box-shadow: 0 15px 25px 0 rgba(#000, 0), 0 5px 10px 0 rgba(#000, 0);
      transition: all 0.7s ease;
      opacity: 1;
      z-index: $filters-z-index;
    
      .uol-form__custom__legend {
        margin-bottom: $spacing-1;
      }
    
      .uol-form__input-label__hint {
        padding-bottom: $spacing-3;
      }
    
    
    
      .js & {
        @include media("<uol-media-l") {
          padding: $spacing-4 $spacing-4 $spacing-5;
          position: fixed;
          transform: translateX(-100%);
          overflow-y: auto;
        }
      }
    
      @media (prefers-reduced-motion) {
        transition: none;
      }
    
      @include media(">=uol-media-m") {
        .js & {
          width: calc((100% - #{$spacing-4}) / 12 * 9);
        }
      }
    
      // Like remove all this to accommodate in normal flow
      .js & {
        @include media(">=uol-media-l") {
          position: relative;
          width: auto;
          transform: translateX(0);
          // width: calc((100% - #{$spacing-5}) / 12 * 8);
        }
      }
    
      .uol-form__input-container {
        padding-bottom: $spacing-3;
    
        @include media(">=uol-media-l") {
          padding-bottom: calc(#{$spacing-3} + #{$spacing-2}); // increase by 8px, gives 20px
        }
    
    
        &:after {
          content: "";
          display: block;
          position: absolute;
          right: 0;
          bottom: -#{$spacing-4};
          left: 0;
          height: 2px;
          background: $color-border--light;
        }
      }
    
      .uol-form__custom-fieldset {
        margin-bottom: 0;
    
        > *:last-child {
          margin-bottom: 0;
        }
      }
    
    }
    
      .uol-filters-panel--open {
        .js & {
          transform: translateX(0);
          box-shadow: 0 15px 25px 0 rgba(#000, 0.15), 0 5px 10px 0 rgba(#000, 0.5);
        }
    
    
        @include media(">=uol-media-l") {
          box-shadow: none;
        }
    
        .uol-form__input-wrapper__num-of-selected-message {
          top: 11px;
        }
      }
    
      // TODO: Remove ID dependency
      #filters-close-button {
        position: absolute;
        top: $spacing-4;
        right: $spacing-4;
    
        @include media(">=uol-media-l") {
          display: none;
        }
      }
    
      // TODO: Remove ID dependency
      #show_search_results {
        @include media(">=uol-media-l") {
          display: none;
        }
      }
    
      // fix so filter panel text fits on one line
      #clear_filter_panel {
        padding: 0.8em 2.1em;
      }
    
      .uol-filters-panel__title {
        @extend %text-size-heading-4;
        @extend %uol-font-sans-serif;
    
        font-weight: $font-weight-bold--sans-serif;
        margin-top: 0;
      }
    
        .uol-filters-panel__title__count {
          @extend %text-size-heading-6;
        }
    
      .uol-filters-panel__footer {
        button {
          display: block;
          width: auto;
          margin-bottom: $spacing-5;
    
          &:first-of-type {
            margin-top: $spacing-4;
          }
    
          &:last-of-type {
            margin-bottom: 0;
          }
        }
      }
    
    
    .uol-filters-panel__overlay {
      position: fixed;
      top: -100%;
      left: 0;
      right: 0;
      height: 100%;
      background: rgba($color-black--dark, 0);
      transition: background 0.7s ease;
    
      .uol-filters-panel--open + & {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba($color-black--dark, 0.78);
        z-index: ($filters-z-index - 1);
      }
    }
    // No max width for small input within filter panel
    .uol-filters-panel {
      .uol-form__input-container--small {
        max-width: none;
      }
    }
    
    //Checkbox within filters panel
    
    .uol-filters-panel {
      .uol-form__input--checkbox-custom {
        svg {
          height: 20px;
          width: 20px;
        }
      }
    }
    
    .uol-filters-panel--open {
      .uol-form__input--checkbox-custom {
        svg {
          height: 36px;
          width: 36px;
        }
      }
    }
    
    
  • URL: /components/raw/uol-filters-panel/_filters-panel.scss
  • Filesystem Path: src/library/02-components/filters-panel/_filters-panel.scss
  • Size: 3.6 KB
  • Content:
    export const uolFiltersPanel = () => {
      const filtersPanel = document.querySelector('.uol-filters-panel')
    
      if (filtersPanel) {
        const btnCloseFilters = document.createElement('button');
        btnCloseFilters.id = 'filters-close-button';
        btnCloseFilters.type = 'button';
        btnCloseFilters.classList.add('uol-button');
        btnCloseFilters.classList.add('uol-button--secondary');
        btnCloseFilters.classList.add('uol-icon');
        btnCloseFilters.classList.add('uol-icon--icon-only');
        btnCloseFilters.classList.add('uol-icon--icon-only--large');
        btnCloseFilters.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="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path>      </svg>
          <span class="uol-icon__label">Close filter panel</span>
        `;
    
        filtersPanel.insertAdjacentElement('afterbegin', btnCloseFilters);
    
        // Change text of clear filters button and filters title text for if single or plural
        const numOfFilters = filtersPanel.getElementsByClassName("uol-form__input-container").length;
        const clearFiltersButtonText = document.getElementById('clear_filter_panel').getElementsByTagName('span')[0];
        const filtersTitleText = document.getElementById('filters-panel-title');
        clearFiltersButtonText.innerHTML = (numOfFilters == 1) ? "Clear filter" : "Clear all filters";
        filtersTitleText.innerHTML = (numOfFilters == 1) ? "Filter" : "Filters";
    
        // in DS environment show chips placeholder
        if (window.location.href.indexOf('/components/') > -1) {
          const para = document.createElement("div");
          para.classList.add("uol-chips-ds-container");
          const node = document.createTextNode("Placeholder for chips: Filter selections will add chips to this area in live environment.");
          para.appendChild(node);
    
          const resultsItems = document.getElementsByClassName("uol-results-items")[0];
          const searchResults = document.getElementsByClassName("uol-search-results__results")[0];
    
          searchResults.insertBefore(para, resultsItems);   
        }
    
        // Clear Filter panel on click of Clear all filters button
        const clearFiltersBtn = document.querySelector('#clear_filter_panel')
    
        clearFiltersBtn.onclick = () => {
          //Get all checkboxes within the filter panel and clear
          const checkboxes = filtersPanel.querySelectorAll('input[type=checkbox]')
          checkboxes.forEach(checkbox => checkbox.checked = false);
    
          // Get all radios within the filter panel and clear
          const radios = filtersPanel.querySelectorAll('input[type=radio]')
          radios.forEach(radio => radio.checked = false);
    
          //Get all selects and set back to default
          const selects = filtersPanel.querySelectorAll('select')
          selects.forEach(select => select.selectedIndex = -1);
    
          //Get all selects and set back to default
          const customSelects = filtersPanel.querySelectorAll('input[type=text]')
          customSelects.forEach(customSelect => customSelect.value = "");
    
          //Get all li elements in filter panel and clear them
          const listItems = filtersPanel.querySelectorAll('li')
          listItems.forEach(listItem => {
            listItem.setAttribute('data-option-value', 'false');
            listItem.setAttribute('aria-selected', 'false');
            listItem.removeAttribute('data-filter-hidden');
            if (listItem.getElementsByTagName('svg')[0]) {
              listItem.getElementsByTagName('svg')[0].remove();
              
            }
          });
    
        }
    
      }
    }
    
  • URL: /components/raw/uol-filters-panel/filters-panel.module.js
  • Filesystem Path: src/library/02-components/filters-panel/filters-panel.module.js
  • Size: 3.6 KB
{
  "open": true,
  "filter_inputs": [
    {
      "id": "filter-study-mode",
      "name": "filter-study-mode",
      "label": "Mode of study",
      "type": "radio",
      "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"
        }
      ]
    },
    {
      "id": "filter-delivery-type",
      "name": "filter-delivery-type",
      "label": "Delivery type",
      "type": "checkbox",
      "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"
        },
        {
          "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",
      "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"
        },
        {
          "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 14 search results",
    "style": "primary",
    "id": "show_search_results"
  }
}