https://www.wacom.com/assets/search/scripts/site-search.js

1/* Search */
2//variable notes:
3//rp is Result Page, the current page of results
4//ps is page size, the number of results per page
5
6var search = {
7    pageSize: 20,
8    resultPage: 0,
9    init: function () {
10
11        const searchComponent = document.querySelector(".search-content-wrapper");
12        if (!searchComponent) {
13            return;
14        }
15        if (searchComponent.dataset["ps"]) {
16            search.pageSize = searchComponent.dataset["ps"];
17        }
18
19        search.filters();
20
21        let facets = "";
22        let searchTerm = "";
23        const searchInput = document.querySelector("#searchKeyword");
24        const searchSubmit = document.querySelector(".SearchSubmit");
25        const facetCheckboxes = document.querySelectorAll(".facetCheckbox");
26        const notCurrentPagerLinks = document.querySelectorAll(".pager:not(.current-page)");
27        const allPagerLinks = document.querySelectorAll(".pager");
28        const ajaxModalLinks = document.querySelectorAll(".search-result-modal-ajax");
29        const iframeModalLinks = document.querySelectorAll(".search-result-modal");
30        
31        //get all url params
32        const urlParameters = new URL(document.location.href).searchParams;
33
34        //set facets
35        if (urlParameters.has("facets")) {
36            facets = urlParameters.get("facets").split(",");
37
38            facets.forEach(function (value) {
39                let facetToUpdate = document.querySelector("#facet_" + value);
40                if (facetToUpdate) {
41                    facetToUpdate.setAttribute("checked", "checked");
42                }
43            });
44        }
45
46        //set searchterm
47        if (urlParameters.has("searchTerm")) {
48            searchTerm = urlParameters.get("searchTerm");
49        }
50
51        if (searchInput) {
52            searchInput.value = decodeURI(searchTerm);
53        }
54        
55
56        //set page
57        this.resultPage = parseInt(urlParameters.get("rp"));
58
59        //prepare pager links
60        if (allPagerLinks) {
61            [...allPagerLinks].forEach(node => {
62                if (node.dataset["pageNumber"] == search.resultPage) {
63                    node.classList.add("current-page");
64                }
65            });
66        }
67
68        //event handlers
69        if (searchSubmit) {
70            searchSubmit.addEventListener("click", search.execute); //click search submit button
71        }
72        
73        ajaxModalLinks.forEach(node => node.addEventListener('click', search.ajaxModal));//click an ajax modal result
74        iframeModalLinks.forEach(node => node.addEventListener('click', search.iframeModal));//click an iframe modal result
75
76        if (searchInput) {
77            searchInput.addEventListener("keyup", search.keywordSearch); //enter key on keyword text input
78        }
79        
80
81        facetCheckboxes.forEach(node => node.addEventListener('click', search.facetSearch)); //add or remove a facet
82        notCurrentPagerLinks.forEach(node => node.addEventListener('click', search.changePage)); //change page
83    },
84    ajaxModal: async function (event) {
85        document.querySelector(".enterprise-modal__iframe-content").classList.add("hide");
86        document.querySelector(".enterprise-modal__ajax-content").classList.remove("hide");
87        let modalSourceUrl = event.currentTarget.dataset["modalSrc"];
88        let contentElement = document.querySelector(".enterprise-modal__ajax-content");
89        try {
90            const response = await fetch(modalSourceUrl);
91            if (!response.ok) {
92                throw new Error(`Response status: ${response.status}`);
93            }
94            const content = await response.text();
95            contentElement.innerHTML = content;
96        } catch (error) {
97            console.error(error.message);
98        }
99    },
100    iframeModal: function (event) {
101        //TODO show a loading spinner
102        document.querySelector(".enterprise-modal__ajax-content").classList.add("hide");
103        document.querySelector(".enterprise-modal__iframe-content").classList.remove("hide");
104        let modalSourceUrl = event.currentTarget.dataset["modalSrc"];
105        let resultsIframe = document.querySelector("#searchResultModalFrame");

106        resultsIframe.setAttribute("src", modalSourceUrl);
107    },
108    keywordSearch: function (event) {
109        if (event.keyCode === 13) {
110            search.resultPage = 0; //reset
111            event.preventDefault();
112            search.execute();
113        }
114    },
115    facetSearch: function (event) {
116        search.resultPage = 0; //reset
117        search.execute();
118    },
119    changePage: function (event) {
120        search.resultPage = event.target.dataset['pageNumber'];
121        search.execute();
122    },
123
124    filters: function () {
125        const activeClassName = 'active';
126        const trigger = document.querySelector('.filters-triggers .btn');
127        const filters = document.querySelector('.filters-group');
128        const back = document.querySelector('.search-filters__back');
129        const order = document.querySelectorAll('.order-trigger');
130
131        if (!trigger || !filters) return null;
132
133        trigger.addEventListener('click', (e) => {
134            e.preventDefault();
135            filters.classList.add(activeClassName);
136        });
137
138        if (!back) return null;
139        back.addEventListener('click', () => {
140            filters.classList.remove(activeClassName);
141        });
142
143        if (order.length <= 0) return null;
144
145        if (order) {
146            [...order].forEach(btn => {
147                btn.addEventListener('click', (e) => {
148                    e.preventDefault();
149                    btn.classList.toggle(activeClassName);
150                });
151            });
152        }
153    },
154
155    execute: function () {
156        //read keyword to use in the query
157        let keyword = "";
158        if (document.querySelector("#searchKeyword")) {
159            keyword = document.querySelector("#searchKeyword").value;
160        }
161        
162        let facets = [];
163
164        //read facets to use in the query
165        const facetCheckboxes = document.querySelectorAll(".facetCheckbox");
166        if (facetCheckboxes) {
167            [...facetCheckboxes].forEach(node => {
168                if (node.checked) {
169                    facets.push(node.getAttribute("value"));
170                }
171            });
172        }
173        document.location.href = window.location.pathname + "?searchTerm=" + keyword + "&facets=" + facets.join(",") + "&rp=" + search.resultPage + "&ps=" + search.pageSize;
174    }
175};
176
177$(document).ready(function () {
178    search.init();
179});