Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- (function () {
- // SELECTORS
- const searchButton = document.querySelector(".search-trigger"),
- closeButton = document.querySelector(".search-overlay__close"),
- searchOverlay = document.querySelector(".search-overlay"),
- searchField = document.querySelector('#search-term'),
- resultsDiv = document.querySelector('#search-overlay__results'),
- body = document.body;
- postsRequest = fetch(...),
- pagesRequest = fetch(...),
- results = await Promise.all([postsRequest, pagesRequest]),
- let isOverlayOpen = false,
- isSpinnerVisable = false,
- typingTimer, previousValue;
- // ACTIONS
- const events = {
- keyPressDispatcher (e) {
- //too many future conflicts with s = search, poor design practice
- if (e.keyCode === 27 && isOverlayOpen) events.closeOverlay();
- },
- openOverlay() {
- searchOverlay.classList.add("search-overlay--active");
- body.classList.add("body-no-scroll");
- setTimeout(() => searchField.focus(), 301);
- isOverlayOpen = true;
- },
- closeOverlay() {
- searchOverlay.classList.remove("search-overlay--active");
- body.classList.remove("body-no-scroll");
- isOverlayOpen = false;
- },
- typingLogic() {
- if(searchField.value != previousValue) {
- clearTimeout(typingTimer);
- if(searchField.value) {
- if(!isSpinnerVisable) {
- resultsDiv.innerHTML = '<div class="spinner-loader"></div>';
- isSpinnerVisable = true;
- }
- typingTimer = setTimeout(() => events.getResults(), 750);
- } else {
- resultsDiv.innerHTML = '';
- isSpinnerVisable = false;
- }
- }
- previousValue = searchField.value;
- },
- getResults() {
- fetchURLs();
- async function fetchURLs() {
- try {
- let data = await Promise.all([
- fetch(`${universityData.root_url}/wp-json/wp/v2/posts/?search=${searchField.value}`).then((response) => response.json()),
- fetch(`${universityData.root_url}/wp-json/wp/v2/pages/?search=${searchField.value}`).then((response) => response.json())
- ]);
- resultsDiv.innerHTML = `
- <h2 class="search-overlay__section-title">General Information</h2>
- <ul class="link-list min-list">
- ${!data[0].length && !data[1].length ? `<p>No General Information Matches That Search<p>` :
- `${data[0].map(arr => `<li><a href="${arr.link}">${arr.title.rendered}</a></li>`).join(''). concat(data[1].map(arr => `<li><a href="${arr.link}">${arr.title.rendered}</a></li>`).join(''))}
- </ul> `}
- `;
- } catch (error) {
- resultsDiv.innerHTML = `<p>There was a problem with the search.<p>`;
- }
- isSpinnerVisable = false;
- }
- }
- // EVENTS
- searchButton.addEventListener('click', events.openOverlay);
- closeButton.addEventListener('click', events.closeOverlay);
- searchField.addEventListener('keyup', events.typingLogic);
- document.addEventListener('keydown', events.keyPressDispatcher);
- })();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement