https://www.zuiderduin.nl/cache/1_2z16nnzoheass.2b64eb4f5960.js

1(function($, window, document, undefined) {
2
3  // Define variables
4  var $window = $(window),
5      $document = $(document),
6      lng = 'nl',
7      $container = $('.faq'),
8      $searchTypeahead = $('.faq-search__input'),
9      emptyMessage = $('.js-faq-no-result-content').html(),
10      scrollOffset = 130;
11
12  $document.ready(function() {
13
14    $('.content-to-move').appendTo('.faq-sidecontent');
15
16    // if($('.faq__cat').length > 0){
17      $('.faq__cat').each(function(){
18        if($(this).find('.faq__question').length < 1) {
19          $(this).hide();
20        }
21      });
22    // }
23
24    // Get language from the html[lang] attribute
25    lng = document.documentElement.lang || lng;
26
27    // Init all dl's on this faq as accordions
28    initAccordion($container.find('.faq__questions'));
29
30    if($container.length){
31      // Load and setup typeahead input
32      $.hm.libloader.add('typeahead').then(initTypeahead);  
33    }
34    
35
36  });
37
38// console.log('test');
39
40  function initAccordion($elements) {
41
42    // Initialize definition lists with a data-accordion attribute
43    $elements.each(function() {
44      var $dl = $(this),
45          options = {
46            independant: false,
47            duration: 'fast'
48          };
49
50      // Hide all children on initialization
51      $dl.children('dd').hide();
52
53      // Attach an onclick handler to the definition titles
54      $dl.on('click', '> dt', function() {
55        var $dt = $(this),
56            $affected = $dt.next('dd');
57
58        if (options.independant) {
59          // Toggle all following siblings until the next dt
60          $affected.slideToggle( options.duration );
61          $dt.toggleClass('is-active');
62
63        }else{
64          //$dl.children('dt').not( $dt ).removeClass('is-active');
65          $elements.children('dt').not( $dt ).removeClass('is-active');
66          $dt.toggleClass('is-active');
67
68          // Slide all children up and toggle the affected ones (allows closing all)
69          //$dl.children('dd').not( $affected ).slideUp( options.duration ).removeClass('is-active');
70          $elements.children('dd').not( $affected ).slideUp( options.duration );
71          $affected.slideToggle( options.duration );
72        }
73      });
74
75    });
76
77    // Init on load, based on the location hash
78    var hash = window.location.hash;
79    if (hash && $(hash).length) {
80      $(hash).click();
81    }
82  }
83
84  // alert('test');
85
86  function initTypeahead() {
87    var typeahead_options = [{
88      hint: true,
89      highlight: true,
90      minLength: 1
91    }];
92
93    $.each(window.faq_data.categories, function(category_id, category_value) {
94      var bloodhound = new Bloodhound({
95          datumTokenizer: Bloodhound.tokenizers.obj.whitespace('tokens'),
96          queryTokenizer: Bloodhound.tokenizers.whitespace,
97          prefetch: {
98            filter: function(data) {
99              return $.grep(data, function(item) {
100                return item.category === category_id;
101              });
102            },
103            url: '/l/catalog/feed/faq?limit=500',
104            cache: true,
105            cacheKey: 'faq_'+category_id,
106            ttl: 3600
107          }
108      });
109
110      typeahead_options.push({
111        name: 'faq_cat_'+category_id,
112        source: bloodhound,
113        display: 'value',
114        templates: {
115          notFound: '<div class="faq-result__no-result">' + emptyMessage + '</div>',
116          header: '<h3 class="faq-result__category">' + $('#faq_cat_' + category_id).find('.faq__title').text() + '</h3>',
117          suggestion: function(data) {
118            return '<p class="faq-result__question"><span class="faq-result__question__q">'+ data.value +'</span></p>';
119          }
120        }
121      });
122    });
123
124    $searchTypeahead.focus(function(event) {
125      $searchTypeahead.parents('.faq-search').addClass('faq-search--active');
126      // Option: clear input field on focus if a question is selected
127      // if ($searchTypeahead.parents('.faq-search').hasClass('faq-search--selected')) {
128      //   $searchTypeahead.typeahead('val', '');
129      // }
130
131    });

132    $searchTypeahead.blur(function(event) {
133      if ($searchTypeahead.val().length === 0) {
134        $searchTypeahead.parents('.faq-search').removeClass('faq-search--active');
135      }
136    });
137
138    // Keep menu open
139    $searchTypeahead.on('typeahead:beforeclose', function(event) {
140      return false;
141    });
142
143    // Toggle the categories
144    $container.find('.js-faq-toggle-category').on('click touchstart', function(event) {
145      event.preventDefault();
146      $(this).parents('.faq__cat').toggleClass('faq__cat--collapsed');
147    });
148
149    $searchTypeahead
150      .on('typeahead:render', function(event, objs, async, name) {
151        var $nones = $searchTypeahead.parent().find('.faq-result__no-result');
152        var $suggestions = $searchTypeahead.parent().find('.tt-suggestion.tt-selectable');
153
154        // Hide all not-found messages
155        $nones.hide();
156
157        // Only show the first not-found message if there are zero results available
158        if ($suggestions.length === 0) {
159          $nones.first().show();
160        }
161
162      })
163      .on('typeahead:selected', function(event, obj) {
164        var $thisFaqDt = $container.find('dt#faq_q'+obj.id),
165            $faqGroup = $thisFaqDt.parents('.faq__cat');
166
167        if (!$thisFaqDt.length) {
168          return;
169        }
170
171        // Option: clear input field when a question is selected
172        $searchTypeahead.typeahead('val','');
173
174        $searchTypeahead.parents('.faq-search').addClass('faq-search--selected');
175
176        $searchTypeahead.blur();
177
178        $searchTypeahead.parents('.faq-search').removeClass('faq-search--active');
179
180        // Collapse all other categories
181        $container.find('.faq__cat').addClass('faq__cat--collapsed');
182
183        // Expand all questions in the selected category
184        $faqGroup.removeClass('faq__cat--collapsed');
185
186        // click so DT is handled, unless it is already active
187        if (!$thisFaqDt.hasClass('is-active')) {
188          $thisFaqDt.click();
189        }
190
191        // add highlight styling
192        $thisFaqDt.addClass('is-highlighted');
193
194        // remove highlight styling
195        setTimeout(function(){
196          $thisFaqDt.removeClass('is-highlighted');
197        }, 5000);
198
199        // Scroll to the question
200        // $('html,body').animate({
201        //   scrollTop: $thisFaqDt.offset().top + 150
202        // }, 400);
203
204        $.hm.responsy.scrollToElement($thisFaqDt, {
205              offsetTop: 160
206        });
207
208      })
209      .typeahead.apply( $searchTypeahead, typeahead_options );
210
211
212    // Reset typeahead input
213    $('.faq-search__reset').on('click touchstart', function(event) {
214      $searchTypeahead.typeahead('val', '');
215    });
216
217    // Set focus to the typeahead input field on pageload
218    $searchTypeahead.focus();
219
220  }
221
222}(jQuery, window, document));
223