https://www.kuntaliitto.fi/modules/custom/kl_addsearch/js/kl-addsearch.js?tlcg33

1/**
2 * @file
3 * 
4 * Handle functionality and accessibility of header AddSearch element.
5 */
6 (($, Drupal) => {
7
8  function openAddsearch($widget) {
9    let $addsearchToggle = $('.toggle-addsearch', $widget);
10    $widget.addClass('focused');
11    $addsearchToggle.attr('aria-expanded', 'true');
12    $addsearchToggle.attr('aria-label', Drupal.t('Close search'));
13    $('.addsearch-input input', $widget).focus();
14  }
15
16  function closeAddsearch($widget) {
17    let $addsearchToggle = $('.toggle-addsearch', $widget);
18    $widget.removeClass('focused');
19    $addsearchToggle.attr('aria-expanded', 'false');
20    $addsearchToggle.attr('aria-label', Drupal.t('Open search'));
21  }
22
23  // Open and close search
24  $('.toggle-addsearch').on('click', function (e) {
25    let $addsearchToggle = $(e.target);
26    let $widget = $(e.target).closest('.addsearch-widget');
27    $addsearchToggle.attr('aria-expanded') == 'false' ? openAddsearch($widget) : closeAddsearch($widget);
28  });
29
30  // set focus on allways open addsearch
31  $('.addsearch-searchfield input').focus(function(e){
32    let $widget = $(e.target).closest('.addsearch-widget');
33    let $addsearchToggle = $('.toggle-addsearch', $widget);
34    $widget.addClass('focused');
35    $addsearchToggle.attr('aria-expanded', 'true');
36    $addsearchToggle.attr('aria-label', Drupal.t('Close search'));
37    
38  });
39
40  // $('.addsearch-searchfield input').blur(function(e){
41  //   console.log('blur');
42  //   console.log(e);
43  // });
44
45  // Close search on escape click
46  $(document).on('keyup', function(e) {
47    if (e.key == "Escape") {
48      $('.addsearch-widget').each(function(index) {
49        if ($(this).hasClass('focused')) {
50          closeAddsearch($(this));
51          $('.toggle-addsearch', $(this)).focus();
52        }
53      });
54    }
55  });
56
57  // Close search on outside click
58  document.addEventListener('click', (e) => {
59    if (e.target.type != 'search' && e.target.type != 'submit') {
60      $('.addsearch-widget').each(function(index) {
61        if ($(this).hasClass('focused')) {
62          closeAddsearch($(this));
63          $('.toggle-addsearch', $(this)).focus();
64        }
65      });
66    }
67  });
68
69})(jQuery, Drupal)