https://shop.exacteditions.com/assets/HeaderSearch-42b69e5a.js

1// /* eslint-disable class-methods-use-this */
2import CookieManager from 'helpers/cookieManager';
3
4const keyStrokeCookie = 'enableKeystrokes';
5
6export default class HeaderSearch {
7  constructor() {
8    this.search = document.querySelector('.search');
9    this.searchBtn = document.querySelector('.searchBtn');
10    this.searchOpen = document.querySelector('.search-div');
11    this.searchInput = document.querySelector('#search-field');
12    this.searchInputBtn = document.querySelector('#header-search-btn');
13    this.searchIcon = document.querySelector('#header-search-icon');
14  }
15
16  hookupControls() {
17    this.searchBtn.addEventListener('click', this.toggleSearch.bind(this));
18    this.searchInputBtn.addEventListener('click', this.performHeaderSearch.bind(this, this.searchInput));
19
20    this.searchInput.addEventListener('keydown', ({ key }) => {
21      if (key === 'Enter') {
22        this.performHeaderSearch(this.searchInput);
23      }
24    });
25
26    document.addEventListener('keydown', (e) => {
27      // Check if keystrokes are enabled via cookie
28      const cookieValue = CookieManager.getBoolean(keyStrokeCookie, true);
29      if (!cookieValue) { return; }
30
31      if (document.activeElement.tagName === 'INPUT') return;
32      const { key } = e;
33
34      if (key === '/') {
35        this.toggleSearch();
36        e.preventDefault();
37      }
38    });
39  }
40
41  /**
42   * Toggles visibility of the search box input.
43   */
44
45  toggleSearch() {
46    if (this.searchIcon.classList.contains('fa-search')) {
47      // Change class from search icon to close (times) icon.
48      this.searchIcon.classList.remove('fa-search');
49      this.searchIcon.classList.add('fa-times');
50      this.searchOpen.classList.toggle('d-lg-none');
51      this.searchInput.focus();
52      this.searchBtn.ariaLabel = 'Close header search';
53    } else {
54      this.searchOpen.classList.toggle('d-lg-none');
55      this.searchIcon.classList.add('fa-search');
56      this.searchIcon.classList.remove('fa-times');
57      this.searchBtn.ariaLabel = 'Open header search';
58    }
59  }
60
61  /**
62  * Performs a search by making a GET request.
63  */
64  performHeaderSearch(input) {
65    let localeCountry = document.querySelector('#header-search-locale-country').value;
66
67    if (localeCountry !== '') localeCountry += '/';
68
69    window.location.href = `/${localeCountry}magazines/search?term=${this.searchTerm(input)}`;
70  }
71
72  /**
73   * Returns the search term the member has entered.
74   * @returns {String} The search term.
75   */
76  searchTerm(input) {
77    return encodeURIComponent(input.value);
78  }
79}