From 43754f847208c658d0215799adcd6275fc820fb2 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Wed, 20 Sep 2023 11:31:15 +0530 Subject: [PATCH] Updated the forms and search --- .vscode/settings.json | 5 ++++ blocks/forms/forms.js | 48 ++++++++++++++++-------------- blocks/header/header.css | 40 +++++++++++++++++++++++++ blocks/header/header.js | 64 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 135 insertions(+), 22 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..3ebb2e0 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "cSpell.words": [ + "removeptag" + ] +} \ No newline at end of file diff --git a/blocks/forms/forms.js b/blocks/forms/forms.js index cb38412..1b07089 100644 --- a/blocks/forms/forms.js +++ b/blocks/forms/forms.js @@ -1,29 +1,33 @@ import { createOptimizedPicture } from '../../scripts/lib-franklin.js'; + export default function decorate(block) { - console.log(block); - const element = document.createElement('div'); - element.innerHTML = ` - - `; + }; + + // Append the script to the document's head + document.head.appendChild(script); + } + + // Call the function to load the HubSpot form script + loadHubSpotFormScript(); + + console.log(block); + const element = document.createElement('div'); + element.id="myFormContainer"; block.append(element); - // const ul = document.createElement('ul'); - // [...block.children].forEach((row) => { - // const li = document.createElement('li'); - // while (row.firstElementChild) li.append(row.firstElementChild); - // [...li.children].forEach((div) => { - // if (div.children.length === 1 && div.querySelector('picture')) div.className = 'cards-card-image'; - // else div.className = 'cards-card-body'; - // }); - // ul.append(li); - // }); - // ul.querySelectorAll('img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }]))); - // block.textContent = ''; - // block.append(ul); } diff --git a/blocks/header/header.css b/blocks/header/header.css index 4c2b46d..991793f 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -6,6 +6,10 @@ header .nav-wrapper { position: fixed; } +/* .header-wrapper { + position: absolute; +} */ + header nav { box-sizing: border-box; display: grid; @@ -272,4 +276,40 @@ header nav .nav-sections ul > li > ul > li { /* tools */ header nav .nav-tools { grid-area: tools; + display: flex; + flex-direction: row-reverse; + padding: 5px; + border: 1px solid #000; + border-radius: 5px; +} +header nav .nav-tools input { + outline: none; + border: none; + text-decoration: none; + font-size: 16px; +} + +.search-results { + position: absolute; + top: 65px; + left: 0; + right: 0; + background-color: #fff; + z-index: 10; + display: flex; + padding: 10px 50px; +} +.search-result { + display: flex; + padding: 5px; + box-shadow: 0px 0px 10px #ededed; + /* border-radius: 5px; */ + flex-direction: column; + align-items: center; + justify-content: center; + margin: 5px; } +.search-result img { + height: 100px; + width: auto; +} \ No newline at end of file diff --git a/blocks/header/header.js b/blocks/header/header.js index 9159e0d..5335f60 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -85,6 +85,28 @@ function toggleMenu(nav, navSections, forceExpanded = null) { } } +function createSearchResultsBlock(results) { + const searchResultsBlock = document.createElement('div'); + searchResultsBlock.classList.add('search-results'); // You can customize the class name + + // Loop through the search results and create elements for each result + results.forEach(result => { + const resultElement = document.createElement('div'); + resultElement.classList.add('search-result'); // You can customize the class name + + // Customize the content based on your search result data + resultElement.innerHTML = ` + ${result.title} + ${result.description} + `; + + // Append the result element to the search results block + searchResultsBlock.appendChild(resultElement); + }); + + return searchResultsBlock; +} + /** * decorates the header, mainly the nav * @param {Element} block The header block element @@ -141,5 +163,47 @@ export default async function decorate(block) { navWrapper.className = 'nav-wrapper'; navWrapper.append(nav); block.append(navWrapper); + const inputElement = document.createElement('input'); + inputElement.setAttribute('type', 'text'); + inputElement.setAttribute('placeholder', 'Search'); + + // Add an 'onchange' event handler to the input element + inputElement.addEventListener('change', function () { + const searchTerm = this.value.toLowerCase(); // Get the lowercase search term + + // Fetch the JSON data from the URL + fetch('http://localhost:3000/query-index.json') + .then(response => response.json()) + .then(jsonData => { + // Perform a search based on the fetched JSON data + const results = jsonData.data.filter(item => { + // Customize this condition to match your search criteria + return item.description.toLowerCase().includes(searchTerm); + }); + console.log(results); + const resultBlock = document.querySelector('.search-results'); // Use .search-results for class selector + resultBlock ? resultBlock.remove() : null; + if (results.length > 0 && searchTerm != '') { + // Create a block based on the search results + const searchResultsBlock = createSearchResultsBlock(results); + + // Use a more specific selector for your header + const header = document.querySelector('.header'); // Adjust this selector as needed + header.appendChild(searchResultsBlock); + } + + // Get the header element and append the search results block to it + }) + .catch(error => { + console.error("Error fetching JSON data:", error); + }); + }); + + + // Append the input element to the .nav-tools container + const navToolsContainer = document.querySelector('.nav-tools'); + navToolsContainer.appendChild(inputElement); + + } }