https://www.nasjonalparkriket.no/modules/custom/common/visitsearch/js/app.js?tma1sb

1/**
2 *
3 */
4
5//console.log(drupalSettings);
6
7(function (Vue, VueRouter, Drupal, $, language, visitsearch, drupalSettings) {
8  'use strict';
9
10  // Exit early if the #visitsearch element doesn't exist
11  if (!document.getElementById('visitsearch')) {
12    return;
13  }
14
15  Vue.config.devtools = true;
16  Vue.use(VueRouter);
17
18  if (typeof Drupal.debounce === "function") {
19    new Vue({
20      el: '#visitsearch',
21      delimiters: ['<%', '%>'],
22      router: new VueRouter({
23        mode: 'history',
24        routes: []
25      }),
26
27      data: {
28        flyingXhr: null,
29        suggestionsXhr: null,
30        search: '',
31        grouped: visitsearch.settings.grouped || false,
32        groupedMin: visitsearch.settings.grouped_view_min_results,
33        groupOrder: visitsearch.settings.group_sort || false,
34        groupedCategories: visitsearch.settings.grouped_categories || false,
35        items: [],
36        suggestions: [],
37        focused: false,
38        loading: false,
39        totalCount: null,
40        showfullResult: {},
41        tempTitle: window.document.title,
42      },
43
44      created: function () {
45        if(this.grouped) {
46
47            var contentTypes = {};
48            for(var i = 0; i < visitsearch.settings.group_sort.length; i++) {
49                contentTypes[visitsearch.settings.group_sort[i]] = false;
50            }
51            this.showfullResult = contentTypes;
52
53        }
54      },
55
56      mounted: function () {
57        this.search = this.$route.query.q || '';
58        this.updateSearch();
59        this.focusInput();
60      },
61
62      watch: {
63        'search': function() {
64          this.updateRoute();
65        },
66
67        '$route': function (to, from) {
68          this.search = to.query.q || '';
69          this.updateSearch();
70        }
71      },
72
73      methods: {
74
75        focusInput: function(){
76          if (this.$refs.search){
77            this.$nextTick(function () {
78              this.$refs.search.focus();
79            });
80          }
81        },
82
83        updateSearch: Drupal.debounce(function () {
84          var vue = this;
85          var max;
86
87          if (vue.flyingXhr && vue.search.length < 3) {
88            vue.flyingXhr.abort();
89          }
90
91          if ((vue.search && vue.search.length < 3) || !vue.search) {
92            return false;
93          }
94
95          if(vue.grouped) {
96            max = visitsearch.settings.grouped_view_max_results;
97          } else {
98            max = visitsearch.settings.mixed_view_max_results;
99          }
100
101          vue.loading = true;
102
103          vue.flyingXhr = $.getJSON(visitsearch.settings.searchUrl, {
104            term: vue.search,
105            grouped: vue.grouped,
106            max: max,
107            stats: true
108          },
109          function(response) {
110            vue.items = response.items;
111            vue.totalCount = response.totalCount;
112            vue.updateTitle(vue.search);
113            vue.loading = false;
114          })
115          .always(function() {
116            vue.flyingXhr = null;
117          });
118
119          // Second request for suggestions, will only run if autocomplete ref is seen in DOM
120          if (this.$refs.autocomplete) {
121            if (vue.suggestionsXhr && vue.search.length < 3) {
122              vue.suggestionsXhr.abort();
123            }
124
125            vue.suggestionsXhr = $.getJSON(visitsearch.settings.searchUrl + "/suggestions", {
126              term: vue.search
127            },
128            function(response) {
129              vue.suggestions = response.items;
130              console.log(vue.suggestions)
131            })
132            .always(function() {
133              vue.suggestionsXhr = null;
134            });
135          }
136
137        }, 500),
138
139        updateRoute: function () {
140            var query = {};
141
142            if (this.search.length) {
143                query.q = this.search;
144            }
145
146            this.$router.replace({
147                path: window.location.pathname,
148                query: query
149            })
150        },
151
152        updateTitle: function (search) {
153
154          if(search != "") {
155            window.document.title = Drupal.t("You searched for") + ": " + search + " | " + visitsearch.sitename;
156          } else {
157            window.document.title = this.tempTitle;
158          }
159
160        },
161
162        showRows: function (items, group) {
163          var vue = this;
164          var showFull = vue.showfullResult[group] || false;
165
166          if(showFull == true) {
167            return items;
168          }
169          return items.slice(0, this.groupedMin);
170        },
171
172        toggle: function(group) {
173          var vue = this;
174          var show = vue.showfullResult[group];
175          vue.showfullResult[group] = !show;
176          this.focusResult(group);
177        },
178
179        focusResult: function (group) {
180          var vue = this;
181          var collapsed = !vue.showfullResult[group];
182
183          if(collapsed) {
184            console.log("Collapsed");
185          }
186        },
187
188        translateTitle: function (group) {
189          return drupalSettings.visitsearch.settings.translations[group];
190        },
191
192        dictate: function () {
193          var vue = this;
194
195          if (window.hasOwnProperty('webkitSpeechRecognition')) {
196            var recognition = new webkitSpeechRecognition();
197            recognition.continuous = false;

198            recognition.interimResults = false;
199            recognition.lang = "sv-SE";
200            recognition.start();
201            recognition.onresult = function(e) {
202              vue.search = e.results[0][0].transcript;
203            };
204            recognition.onerror = function(e) {
205              recognition.stop();
206            }
207          }
208        },
209
210        selectSuggestion(suggestion) {
211          this.search = suggestion.title;
212          this.focused = false;
213          this.suggestions = [];
214        },
215
216        handleInputBlur() {
217          if (this.$refs.autocomplete) {
218            setTimeout(() => {
219              this.focused = false;
220            }, 100)
221          }
222        },
223
224        resetInput: function () {
225          this.search = '';
226          this.items = [];
227          this.suggestions = [];
228        },
229
230      }
231    });
232  } else {
233    new Vue({
234      el: '#visitsearch',
235      delimiters: ['<%', '%>'],
236      router: new VueRouter({
237        mode: 'history',
238        routes: []
239      }),
240      data: {
241        flyingXhr: null,
242        search: '',
243        grouped: visitsearch.settings.grouped || false,
244        groupedMin: visitsearch.settings.grouped_view_min_results,
245        groupOrder: visitsearch.settings.group_sort || false,
246        groupedCategories: visitsearch.settings.grouped_categories || false,
247        items: [],
248        loading: false,
249        totalCount: null,
250        showfullResult: {},
251        tempTitle: window.document.title,
252      },
253      created: function () {
254
255        if(this.grouped) {
256
257            var contentTypes = {};
258            for(var i = 0; i < visitsearch.settings.group_sort.length; i++) {
259                contentTypes[visitsearch.settings.group_sort[i]] = false;
260            }
261            this.showfullResult = contentTypes;
262
263        }
264
265      },
266      mounted: function () {
267        this.search = this.$route.query.q || '';
268        this.updateSearch();
269      },
270      watch: {
271        'search': function() {
272          this.updateRoute();
273        },
274
275        '$route': function (to, from) {
276          this.search = to.query.q || '';
277          this.updateSearch();
278        }
279      },
280      methods: {
281        updateSearch: function () {
282          var vue = this;
283          var max;
284
285          if (vue.flyingXhr && vue.search.length < 3) {
286            vue.flyingXhr.abort();
287          }
288
289          if(vue.grouped) {
290            max = visitsearch.settings.grouped_view_max_results;
291          } else {
292            max = visitsearch.settings.mixed_view_max_results;
293          }
294
295          vue.loading = true;
296
297          vue.flyingXhr = $.getJSON(visitsearch.settings.searchUrl, {
298            term: vue.search,
299            grouped: vue.grouped,
300            max: max
301          },
302          function(response) {
303            vue.items = response.items;
304            vue.totalCount = response.totalCount;
305            vue.updateTitle(vue.search);
306            vue.loading = false;
307          })
308          .always(function() {
309            vue.flyingXhr = null;
310          });
311        },
312        updateRoute: function () {
313            var query = {};
314
315            if (this.search.length) {
316                query.q = this.search;
317            }
318
319            this.$router.replace({
320                path: window.location.pathname,
321                query: query
322            })
323        },
324        updateTitle: function (search) {
325
326          if(search != "") {
327            window.document.title = Drupal.t("You searched for") + ": " + search + " | " + visitsearch.sitename;
328          } else {
329            window.document.title = this.tempTitle;
330          }
331
332        },
333        showRows: function (items, group) {
334          var vue = this;
335          var showFull = vue.showfullResult[group] || false;
336
337          if(showFull == true) {
338            return items;
339          }
340          return items.slice(0, this.groupedMin);
341        },
342        toggle: function(group) {
343          var vue = this;
344          var show = vue.showfullResult[group];
345          vue.showfullResult[group] = !show;
346          this.focusResult(group);
347        },
348        focusResult: function (group) {
349          var vue = this;
350          var collapsed = !vue.showfullResult[group];
351
352          if(collapsed) {
353            console.log("Collapsed");
354          }
355        },
356        translateTitle: function (group) {
357          return drupalSettings.visitsearch.settings.translations[group];
358        },
359
360        resetInput: function () {
361          this.search = '';
362          this.items = [];
363        },
364      }
365    });
366  }
367})(Vue, VueRouter, Drupal, jQuery, drupalSettings.path.currentLanguage, drupalSettings.visitsearch, drupalSettings);