https://www.yorn.net/etc.clientlibs/digital-yorn/components/conten…entlibs.b5f89080f097f34c720252306bb7c106.js

1Vue.config.ignoredElements = ['cq'];
2var yornCludoSearch = new Vue({
3    el: '#cludoSearch',
4    mixins: [yornSearchUtils, utils, loadingAnimations, deviceTypeUtils],
5    data: function () {
6        return {
7            isOpen: false,
8            searchTerm: '',
9            mode: "inactive", // inactive, active, loading, searched
10            allResults: false,
11            suggestions: '',
12            results: '',
13            questions: '',
14            totalMatches: 0,
15            numberOfResultsShown: 3,
16            cludoQID: "",
17            quicklinks: "",
18            sendDate: "",
19            labels: {
20                TITLE: this.i18nUtils().getProperty("vf_digitalYorn.search_title"),
21                ALL_MATCHES: this.i18nUtils().getProperty("vf_digitalYorn.search_all_matches"),
22                NO_RESULTS: this.i18nUtils().getProperty("vf_digitalYorn.search_no_results"),
23                YORN_SEARCH: this.i18nUtils().getProperty("vf_digitalYorn.search_placeholder"),
24                QUESTIONS: this.i18nUtils().getProperty("vf_digitalYorn.search_questions"),
25                SUGGESTIONS: this.i18nUtils().getProperty("vf_digitalYorn.search_suggestions"),
26                RELEVANT: this.i18nUtils().getProperty("vf_digitalYorn.search_relevant"),
27                ALL_RESULTS: this.i18nUtils().getProperty("vf_digitalYorn.search_all_results")
28            }
29        }
30    },
31    computed: {
32        searchDisabled: function () {
33            return this.searchTerm.length <= 0;
34        }
35    },
36    methods: {
37        // OVERLAY METHODS
38        openCludoSearch: function () {
39            this.lockScroll();
40            this.isOpen = true;
41            this.$nextTick(() => this.$refs.cludoInput.focus())
42            yorn_tealium_page_view_events.methods.firePageView('Page View Yorn Search');
43            this.getQuicklinks();
44        },
45        closeCludoSearch: function () {
46            this.unlockScroll();
47            this.isOpen = false;
48            this.clearSearch();
49        },
50        lockScroll: function () {
51            this.$refs.yornSearch
52                .closest('body')
53                .classList.add('lock-body-scroll')
54        },
55        unlockScroll: function () {
56            this.$refs.yornSearch
57                .closest('body')
58                .classList.remove('lock-body-scroll')
59        },
60
61        // SEARCH METHODS
62        handleInput: function (e) {
63            if (e.key == 'Enter' || e.type == 'click') {
64                this.prepareSearch();
65            } else {
66                this.mode = 'active';
67                this.autoCompleteSearch(e);
68            }
69        },
70        clearSearch: function() {
71            this.searchTerm = '';
72            this.results = '';
73            this.suggestions = '';
74            this.questions = '';
75            this.totalMatches = '';
76            this.mode = 'inactive';
77        },
78        prepareSearch: function () {
79            var quickLinkMatch = this.getQuickLinkMatch();
80            if (quickLinkMatch) {
81                window.location.href = quickLinkMatch;
82            } else {
83                this.mode = 'loading';
84                this.loadAnimation();
85                this.search();
86            }
87
88        },
89        search: function() {
90            this.allResults = false;
91            this.sendDate = (new Date()).getTime();
92            var searchParams = {
93                searchTerm: this.searchTerm,
94                engineId: this.engineId,
95                page: 1,
96                perPage: 50
97            };
98            this.searchRequestYorn(searchParams);
99        },
100        handleSearchResultYorn: function (res) {
101            var responseTime = (new Date()).getTime() - this.sendDate;
102            this.removeAnimation('loading-search-result');
103            this.mode = 'searched';
104            this.results = res.pages;
105            this.questions = res.questions;
106            this.totalMatches = res.totalMatches;
107            this.cludoQID = res.queryId;
108            this.tealiumRequest(this.results.length? "Click Event Yorn Search Results" : "Click Event Yorn No Search Results");
109            this.queryLog(responseTime);
110
111        },
112        autoCompleteSearch: function(e) {
113            if (e.key === 'Enter' || this.searchTerm.length < 3) {
114                return;
115            }
116            this.autoCompleteRequestYorn(this.searchTerm);
117        },
118        handleAutoCompleteResultYorn: function (res) {
119            this.suggestions = res.Suggestions;
120            this.questions = res.Results;
121            this.cludoQID = res.QueryId;
122        },
123        searchWithSuggestion: function(text) {
124            this.searchTerm = text;
125            this.prepareSearch();
126        },
127
128        // QUICKLINKS METHODS
129        getQuicklinks: function() {
130           this.getPublicSettings();
131        },
132        saveQuicklinks: function(res) {
133           this.quicklinks = res.quicklinks;
134        },
135        getQuickLinkMatch: function() {
136            for (var i=0; i < this.quicklinks.length; i++) {
137                var quicklink = this.quicklinks[i];
138                for (var j=0; j < quicklink.terms.length; j++) {
139                    if (quicklink.terms[j].name == this.searchTerm) {
140                        return quicklink.url;
141                    }
142                }
143            }
144            return null;
145        },
146
147        // ANIMATION METHODS
148        loadAnimation: function () {
149            this.loadGeneralAnimation({
150                renderLocation: 'loading-search-result',
151                style: 'height: 100px;',
152                defaultColor: true,
153                withMask: false
154            });
155        },
156
157        // TRACKING METHODS
158        tealiumRequest: function  (actionId, category, label) {
159            tealium_yorn_cludoSearchYorn.methods.handleCludoSearchYorn (actionId, this.searchTerm, category, label);
160        },
161        clickLog: function (result, index) {
162            var clickLogParams = {
163                searchTerm: this.searchTerm,
164                url: result.Fields.Url.Value,
165                index: index,
166                title: result.Fields.Title.Value,
167                totalMatches: this.totalMatches,
168                cludoQID: this.cludoQID,
169                deviceType: this.deviceType()
170            };
171
172            this.clickLogYorn(clickLogParams);
173        },
174        queryLog: function (responseTime) {
175            var queryLogParams = {
176                searchTerm: this.searchTerm,
177                totalMatches: this.totalMatches,
178                responseTime: responseTime,
179                deviceType: this.deviceType()
180            }
181            this.queryLogYorn(queryLogParams);
182        },
183        handleCludoQID: function (id) {
184            this.cludoQID = id;
185        }
186    }
187});