From 8ab23f5473cf598a2e6740c39511cd4dc7b4422d Mon Sep 17 00:00:00 2001 From: Dave Nichols Date: Mon, 19 Aug 2024 12:46:13 +0100 Subject: [PATCH 1/5] added function to pick up url data --- blocks/events/events.js | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/blocks/events/events.js b/blocks/events/events.js index 7431530..610e991 100644 --- a/blocks/events/events.js +++ b/blocks/events/events.js @@ -19,6 +19,31 @@ const TYPES = [ 'Webinar', ]; +function filterUrl() { + function getUrlParameter(name) { + name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); + const regex = new RegExp('[\\?&]' + name + '=([^&#]*)'); + const results = regex.exec(location.search); + return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); + } + + // Get URL parameters + const eventTypeParam = getUrlParameter('type'); + const regionParam = getUrlParameter('region'); + + // Select the checkbox with the ID that matches the region + const regionCheckbox = document.getElementById(regionParam); + if (regionCheckbox) { + regionCheckbox.checked = true; + } + + // Select the checkbox with the ID that matches the event type + const typeCheckbox = document.getElementById(eventTypeParam); + if (typeCheckbox) { + typeCheckbox.checked = true; + } +} + async function fetchPostData() { try { const response = await fetch('/query-index.json'); @@ -231,6 +256,7 @@ async function buildSidePanel(currentPage, eventData) { const checkboxes = sidePanel.querySelectorAll('.select .dropdown-menu .filter-item'); checkboxes.forEach((checkbox) => { checkbox.addEventListener('change', (event) => { + console.log(eventData); handleCheckboxChange(event, eventData); }); }); @@ -256,7 +282,8 @@ function displayPage(page, events) { function handlePagination(page, events) { currentPageNumber = page; - displayPage(currentPageNumber, events); // Update UI with new page + const filteredEvents = filterEvents(events, eventType, region); + displayPage(currentPageNumber, filteredEvents); // Update UI with new page } function generatePaginationButtons(totalPages, currentPage, events) { @@ -319,4 +346,7 @@ export default async function decorate(block) { displayPage(currentPageNumber, eventsToshow); } + + filterUrl(); + //handleCheckboxChange('event', eventData); } From df48e4b41432359f197ea718462c158157db9b71 Mon Sep 17 00:00:00 2001 From: Amlan Sengupta Date: Mon, 19 Aug 2024 19:46:59 +0530 Subject: [PATCH 2/5] filter-by along with OR condition --- blocks/events/events.js | 77 ++++++++++++++++------------------------- 1 file changed, 29 insertions(+), 48 deletions(-) diff --git a/blocks/events/events.js b/blocks/events/events.js index 610e991..a611bf0 100644 --- a/blocks/events/events.js +++ b/blocks/events/events.js @@ -21,9 +21,9 @@ const TYPES = [ function filterUrl() { function getUrlParameter(name) { - name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); - const regex = new RegExp('[\\?&]' + name + '=([^&#]*)'); - const results = regex.exec(location.search); + const newName = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); + const regex = new RegExp(`[\\?&]${newName}=([^&#]*)`); + const results = regex.exec(window.location.search); return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); } @@ -31,17 +31,17 @@ function filterUrl() { const eventTypeParam = getUrlParameter('type'); const regionParam = getUrlParameter('region'); - // Select the checkbox with the ID that matches the region - const regionCheckbox = document.getElementById(regionParam); - if (regionCheckbox) { - regionCheckbox.checked = true; - } + regionParam.split(',').forEach((region) => { + // Select the checkbox with the ID that matches the region + const regionCheckbox = document.getElementById(region); + if (regionCheckbox) regionCheckbox.checked = true; + }); - // Select the checkbox with the ID that matches the event type - const typeCheckbox = document.getElementById(eventTypeParam); - if (typeCheckbox) { - typeCheckbox.checked = true; - } + eventTypeParam.split(',').forEach((eventType) => { + // Select the checkbox with the ID that matches the event type + const typeCheckbox = document.getElementById(eventType); + if (typeCheckbox) typeCheckbox.checked = true; + }); } async function fetchPostData() { @@ -160,42 +160,24 @@ function updateEvents(events) { } // Event listener function to handle checkbox changes -function handleCheckboxChange(event, eventData) { +function handleCheckboxChange(eventData) { const checkedCheckboxes = document.querySelectorAll('.filter-item:checked'); const selectedOptions = Array.from(checkedCheckboxes) .map((checkbox) => checkbox.nextSibling.textContent); - let filteredEvents; - // Filter events based on selected options - const eventTypes = []; - const regions = []; - - if (selectedOptions.length > 0) { - selectedOptions.forEach((option) => { - if (eventData.some((data) => data.type === option)) { - eventTypes.push(option); - } else if (eventData.some((data) => data.region === option)) { - regions.push(option); - } - }); - if (eventTypes.length > 0 && regions.length === 0) { - filteredEvents = eventData.filter((data) => eventTypes.includes(data.type)); - } else if (eventTypes.length === 0 && regions.length > 0) { - filteredEvents = eventData.filter((data) => regions.includes(data.region)); - } else { - filteredEvents = eventData.filter((data) => eventTypes - .includes(data.type) && regions.includes(data.region)); - } - } else { - filteredEvents = eventData; - } + const filteredEvents = selectedOptions.length === 0 ? eventData : eventData.filter((data) => { + const typeIndex = selectedOptions.indexOf(data.type); + const regionIndex = selectedOptions.indexOf(data.region); + if ( + (typeIndex > -1 && regionIndex > -1) + || (typeIndex > -1 && regionIndex < 0) + || (typeIndex < 0 && regionIndex > -1) + ) return true; + }); + updateEvents(filteredEvents); const paginationContainer = document.querySelector('.pagination'); - if (filteredEvents.length <= itemsPerPage) { - paginationContainer.style.display = 'none'; - } else { - paginationContainer.style.display = 'block'; - } + if (paginationContainer) paginationContainer.style.display = (filteredEvents.length <= itemsPerPage) ? 'none' : 'block'; } function createEventsDropdown(eventName, options) { @@ -207,7 +189,7 @@ function createEventsDropdown(eventName, options) { class: 'dropdown-toggle', value: '', }, eventName); - // btn.addEventListener('click', toggleFilter, false); + // btn.addEventListener('click', toggleFilter, false); container.append(btn); const dropDown = div({ class: 'dropdown-menu' }); @@ -255,9 +237,8 @@ async function buildSidePanel(currentPage, eventData) { const checkboxes = sidePanel.querySelectorAll('.select .dropdown-menu .filter-item'); checkboxes.forEach((checkbox) => { - checkbox.addEventListener('change', (event) => { - console.log(eventData); - handleCheckboxChange(event, eventData); + checkbox.addEventListener('change', () => { + handleCheckboxChange(eventData); }); }); @@ -348,5 +329,5 @@ export default async function decorate(block) { } filterUrl(); - //handleCheckboxChange('event', eventData); + handleCheckboxChange(eventsToshow); } From 891bf080d97c64923b7488fcd63a7a573a164f11 Mon Sep 17 00:00:00 2001 From: Dave Nichols Date: Thu, 22 Aug 2024 12:20:31 +0100 Subject: [PATCH 3/5] Updated events to pick up multiple data --- blocks/events/events.js | 33 ++++++++++++++++++++++++--------- 1 file changed, 24 insertions(+), 9 deletions(-) diff --git a/blocks/events/events.js b/blocks/events/events.js index a611bf0..fd177e8 100644 --- a/blocks/events/events.js +++ b/blocks/events/events.js @@ -164,16 +164,31 @@ function handleCheckboxChange(eventData) { const checkedCheckboxes = document.querySelectorAll('.filter-item:checked'); const selectedOptions = Array.from(checkedCheckboxes) .map((checkbox) => checkbox.nextSibling.textContent); + let filteredEvents; + // Filter events based on selected options + const eventTypes = []; + const regions = []; + + if (selectedOptions.length > 0) { + selectedOptions.forEach((option) => { + if (eventData.some((data) => data.type === option)) { + eventTypes.push(option); + } else if (eventData.some((data) => data.region === option)) { + regions.push(option); + } + }); - const filteredEvents = selectedOptions.length === 0 ? eventData : eventData.filter((data) => { - const typeIndex = selectedOptions.indexOf(data.type); - const regionIndex = selectedOptions.indexOf(data.region); - if ( - (typeIndex > -1 && regionIndex > -1) - || (typeIndex > -1 && regionIndex < 0) - || (typeIndex < 0 && regionIndex > -1) - ) return true; - }); + if (eventTypes.length > 0 && regions.length === 0) { + filteredEvents = eventData.filter((data) => eventTypes.includes(data.type)); + } else if (eventTypes.length === 0 && regions.length > 0) { + filteredEvents = eventData.filter((data) => regions.includes(data.region)); + } else { + filteredEvents = eventData.filter((data) => eventTypes + .includes(data.type) && regions.includes(data.region)); + } + } else { + filteredEvents = eventData; + } updateEvents(filteredEvents); const paginationContainer = document.querySelector('.pagination'); From 0d6258602d7d89a257a276b4713162b58b801e30 Mon Sep 17 00:00:00 2001 From: Dave Nichols Date: Thu, 22 Aug 2024 15:39:27 +0100 Subject: [PATCH 4/5] set url to map to selected items --- blocks/events/events.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/blocks/events/events.js b/blocks/events/events.js index fd177e8..4ae0e45 100644 --- a/blocks/events/events.js +++ b/blocks/events/events.js @@ -186,6 +186,25 @@ function handleCheckboxChange(eventData) { filteredEvents = eventData.filter((data) => eventTypes .includes(data.type) && regions.includes(data.region)); } + + const urlParams = new URLSearchParams(window.location.search); + urlParams.delete('types'); + if (eventTypes.length > 0) { + urlParams.set('type', eventTypes.map(type => type.toLowerCase()).join(',')); + } else { + urlParams.delete('types'); + } + + if (regions.length > 0) { + urlParams.delete('region'); + urlParams.set('region', regions.map(region => region.toLowerCase().replace(/[+\s]/g, '-')).join(',')); + } else { + urlParams.delete('region'); + } + + const newUrl = `${window.location.pathname}?${urlParams.toString()}`; + window.history.replaceState({}, '', newUrl); + } else { filteredEvents = eventData; } From 8a66285a40a5d9cd1e5ff65a3181c14e79cf4784 Mon Sep 17 00:00:00 2001 From: Dave Nichols Date: Thu, 22 Aug 2024 17:58:03 +0100 Subject: [PATCH 5/5] Fixing lint issues --- blocks/events/events.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/blocks/events/events.js b/blocks/events/events.js index 4ae0e45..676113f 100644 --- a/blocks/events/events.js +++ b/blocks/events/events.js @@ -1,3 +1,4 @@ +/* eslint-disable no-undef */ import { createOptimizedPicture, capitalizeWords, toClassName } from '../../scripts/aem.js'; import { div, a, p, ul, li, article, span, @@ -21,7 +22,7 @@ const TYPES = [ function filterUrl() { function getUrlParameter(name) { - const newName = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); + const newName = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]'); const regex = new RegExp(`[\\?&]${newName}=([^&#]*)`); const results = regex.exec(window.location.search); return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); @@ -190,21 +191,20 @@ function handleCheckboxChange(eventData) { const urlParams = new URLSearchParams(window.location.search); urlParams.delete('types'); if (eventTypes.length > 0) { - urlParams.set('type', eventTypes.map(type => type.toLowerCase()).join(',')); + urlParams.set('type', eventTypes.map((type) => type.toLowerCase()).join(',')); } else { urlParams.delete('types'); } if (regions.length > 0) { urlParams.delete('region'); - urlParams.set('region', regions.map(region => region.toLowerCase().replace(/[+\s]/g, '-')).join(',')); + urlParams.set('region', regions.map((region) => region.toLowerCase().replace(/[+\s]/g, '-')).join(',')); } else { urlParams.delete('region'); } const newUrl = `${window.location.pathname}?${urlParams.toString()}`; window.history.replaceState({}, '', newUrl); - } else { filteredEvents = eventData; }