<div class="header-search js-header-search">
    <form class="header-search__form">
        <input class="header-search__input js-header-search-input" type="text" placeholder="Search on Maui Jim">
    </form>
    <div class="header-search__results">
        <a class="header-search__result-link" href="#">View all results <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</a>
        <div class="search-autocomplete-result">
            <a class="search-autocomplete-result__link" href="">
        <span class="search-autocomplete-result__image-container">
          <img class="search-autocomplete-result__image" src="" sizes="(min-width: 681px) vw, vw"
            srcset=" w,  w">
        </span>
        <span class="search-autocomplete-result__title">Ho&#x27;okipa Reader Universal Fit</span>
      </a>
        </div>
        <div class="search-autocomplete-result">
            <a class="search-autocomplete-result__link" href="">
        <span class="search-autocomplete-result__image-container">
          <img class="search-autocomplete-result__image" src="" sizes="(min-width: 681px) vw, vw"
            srcset=" w,  w">
        </span>
        <span class="search-autocomplete-result__title">Sandy Beach Universal Fit</span>
      </a>
        </div>
        <div class="search-autocomplete-result">
            <a class="search-autocomplete-result__link" href="">
        <span class="search-autocomplete-result__image-container">
          <img class="search-autocomplete-result__image" src="" sizes="(min-width: 681px) vw, vw"
            srcset=" w,  w">
        </span>
        <span class="search-autocomplete-result__title">Hanalei Universal Fit</span>
      </a>
        </div>
    </div>
    <div class="header-search__list">
        <span class="header-search__list-label">Latest Search</span>
        <ul class="header-search__list-items">
            <li class="header-search__list-item">
                <a class="header-search__list-link js-header-search-list-link" href="#">Koko Head</a>
            </li>
            <li class="header-search__list-item">
                <a class="header-search__list-link js-header-search-list-link" href="#">Tail Slide</a>
            </li>
        </ul>
    </div>
    <div class="header-search__list">
        <span class="header-search__list-label">Popular Searches</span>
        <ul class="header-search__list-items">
            <li class="header-search__list-item">
                <a class="header-search__list-link js-header-search-list-link" href="#">Aviators</a>
            </li>
            <li class="header-search__list-item">
                <a class="header-search__list-link js-header-search-list-link" href="#">Man</a>
            </li>
            <li class="header-search__list-item">
                <a class="header-search__list-link js-header-search-list-link" href="#">Surf</a>
            </li>
            <li class="header-search__list-item">
                <a class="header-search__list-link js-header-search-list-link" href="#">Vintage</a>
            </li>
        </ul>
    </div>
</div>
<div class="header-search js-header-search">
  <form class="header-search__form">
    <input class="header-search__input js-header-search-input" type="text" placeholder="{{form.placeholder}}"{{#if form.value}} value="{{form.value}}"{{/if}}>
  </form>
  <div class="header-search__results">
    {{#if noSearchResults}}
    {{render '@search-autocomplete-no-results'}}
    {{else}}
    <a class="header-search__result-link" href="#">View all results {{render '@icons--arrow-right'}}</a>
    {{> '@search-autocomplete-result' path=search.resultDefaults.path title="Ho'okipa Reader Universal Fit" image=search.resultDefaults.image }}
    {{> '@search-autocomplete-result' path=search.resultDefaults.path title="Sandy Beach Universal Fit" image=search.resultDefaults.image }}
    {{> '@search-autocomplete-result' path=search.resultDefaults.path title="Hanalei Universal Fit" image=search.resultDefaults.image }}
    {{/if}}
  </div>
  {{#each lists}}
  <div class="header-search__list">
    <span class="header-search__list-label">{{label}}</span>
    <ul class="header-search__list-items">
      {{#each items}}
      <li class="header-search__list-item">
        <a class="header-search__list-link js-header-search-list-link" href="{{this.path}}">{{label}}</a>
      </li>
      {{/each}}
    </ul>
  </div>
  {{/each}}
</div>
{
  "lists": [
    {
      "label": "Latest Search",
      "items": [
        {
          "label": "Koko Head",
          "path": "#"
        },
        {
          "label": "Tail Slide",
          "path": "#"
        }
      ]
    },
    {
      "label": "Popular Searches",
      "items": [
        {
          "label": "Aviators",
          "path": "#"
        },
        {
          "label": "Man",
          "path": "#"
        },
        {
          "label": "Surf",
          "path": "#"
        },
        {
          "label": "Vintage",
          "path": "#"
        }
      ]
    }
  ],
  "resultDefaults": {
    "path": "#",
    "title": "Red Sands",
    "image": {
      "small": {
        "path": "/assets/images/search-autocomplete-small.jpg",
        "width": "75",
        "vw": "25"
      },
      "medium": {
        "path": "/assets/images/search-autocomplete-medium.jpg",
        "width": "340",
        "vw": "50"
      }
    }
  },
  "form": {
    "placeholder": "Search on Maui Jim"
  }
}
  • Content:
    (function (window) {
      const search = document.querySelector('.js-header-search');
      const input = document.querySelector('.js-header-search-input');
      const activeClass = 'js-header-flyout-search--active';
    
      function handlePageLoad(e) {
        if (input.value) {
          search.classList.add(activeClass);
        }
      }
    
      function handleSearchInputChange(e) {
        if (e.target.value) {
          search.classList.add(activeClass);
        }
        else {
          search.classList.remove(activeClass);
        }
      }
    
      // Populate the input with the value of the clicked link and trigger an event.
      function handleSearchListLink(e) {
        e.preventDefault();
        input.value = e.target.text;
        triggerNativeEvent(input, 'input');
      }
    
      function setup() {
        const searchListLinks = search.querySelectorAll('.js-header-search-list-link');
        for (let i = 0; i < searchListLinks.length; i++) {
          searchListLinks[i].addEventListener('click', handleSearchListLink);
        }
        document.querySelector('.header-search__input').focus();
      }
    
      function teardown() {
        const searchListLinks = search.querySelectorAll('.js-header-search-list-link');
        for (let i = 0; i < searchListLinks.length; i++) {
          searchListLinks[i].removeEventListener('click', handleSearchListLink);
        }
      }
    
      if (typeof componentEvents !== 'undefined') {
        componentEvents.on('flyout-change', function (data) {
          if (data.id !== 'search') return;
    
          if (data.action === 'open') {
            setup();
          } else {
            teardown();
          }
        });
      }
    
      if (input && search) {
        window.addEventListener('load', handlePageLoad);
        input.addEventListener('input', handleSearchInputChange);
      }
    
      // If search is open on load, run setup.
      // To-do: Figure out a way to do this outside this file. This is useful only
      // when viewing the mini-search component.
      if (search && search.getBoundingClientRect().height) {
        setup();
      }
    })(this);
    
  • URL: /components/raw/mini-search/mini-search.js
  • Filesystem Path: src/components/02-components/mini-search/mini-search.js
  • Size: 1.9 KB
  • Content:
    .header-search {
      padding: 10px;
    }
    
    .header-flyout--search {
      .header-flyout__content {
        top: 0;
      }
    }
    
    .header-flyout__toggle--search {
      position: relative;
    
      .icon--close-large {
        display: none;
        width: 30px;
        height: 30px;
      }
    
      &:after {
        position: absolute;
        top: 10px;
        right: 0;
        bottom: 10px;
        border-right: 1px solid $color-light;
        content: '';
      }
    
      &:last-child {
        &:after {
          content: none;
        }
      }
    
      @include breakpoint($breakpoint-sm-only) {
        .icon--close-large {
          position: absolute;
          top: 16px;
          left: 11px;
          width: 16px;
          height: 16px;
        }
    
        .icon--search {
          position: absolute;
          top: 14px;
          left: 9px;
          width: 20px;
          height: 20px;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        .icon--close-large {
          position: absolute;
          top: 34px;
          left: 20px;
        }
    
        &:after {
          top: 4px;
          bottom: 4px;
        }
      }
    
      @include breakpoint($breakpoint-lg) {
        &:after {
          top: 20px;
          bottom: 20px;
        }
      }
    }
    
    .header-search__input {
      width: calc(100% - 50px);
      padding: 15px 20px;
      border: 1px solid $color-light;
      border-radius: 0;
      font-size: 1.4rem;
      box-sizing: border-box;
    
      &:focus {
        border: 1px solid $color-primary;
      }
    
      @include breakpoint($breakpoint-md) {
        width: calc(100% - 60px);
      }
    }
    
    .header-search__list {
      display: none;
    
      @include breakpoint($breakpoint-md) {
        display: block;
      }
    }
    
    .header-search__list-label {
      @include text-ui($color-dark);
      display: block;
      padding: 20px 0 10px;
      text-transform: uppercase;
    }
    
    .header-search__list-items {
      @include text-label;
      margin: 0;
      padding: 0;
      line-height: 2.8rem;
      list-style-type: none;
    }
    
    .header-search__list-link {
      transition: color $transition-standard;
      color: $color-darkest;
      text-decoration: none;
    
      &:hover {
        color: $color-primary;
      }
    }
    
    .header-search__results {
      display: none;
    
      .js-header-flyout-search--active & {
        display: block;
      }
    }
    
    .header-search__result-link {
      display: none;
    
      .icon {
        position: relative;
        top: 1px;
        width: 3px;
        padding-left: 8px;
      }
    
      &:hover .icon {
        fill: $color-primary;
      }
    
      @include breakpoint($breakpoint-md) {
        @include text-label($color-darkest);
        display: inline-block;
        margin-top: 10px;
        line-height: 4.0rem;
        text-decoration: none;
      }
    }
    
  • URL: /components/raw/mini-search/mini-search.scss
  • Filesystem Path: src/components/02-components/mini-search/mini-search.scss
  • Size: 2.4 KB

There are no notes for this item.