From 6de5d34e0e135e10c48e78a22525c5ae4644ccb7 Mon Sep 17 00:00:00 2001 From: Aaron Stephanus Date: Wed, 27 Dec 2023 13:38:54 -0600 Subject: [PATCH 1/4] Hides the events view mode and category filtering affordances on mobile Signed-off-by: Aaron Stephanus --- _sass/_events-calendar.scss | 32 +++++--------------------------- 1 file changed, 5 insertions(+), 27 deletions(-) diff --git a/_sass/_events-calendar.scss b/_sass/_events-calendar.scss index fdf2f7671f..07ba21e1b4 100644 --- a/_sass/_events-calendar.scss +++ b/_sass/_events-calendar.scss @@ -144,6 +144,9 @@ $calendar-month-default-week-count: 5; justify-content: start; align-items: center; flex-wrap: nowrap; + @media screen and (max-width: 834px) { + display: none; + } > .events--calendar--filters--view-mode-toggle--item { flex-basis: 35px; flex-shrink: 0; @@ -191,11 +194,9 @@ $calendar-month-default-week-count: 5; flex-direction: row; justify-content: flex-start; align-items: center; - @media screen and (min-width: 835px) { - flex-wrap: nowrap; - } + flex-wrap: nowrap; @media screen and (max-width: 834px) { - flex-wrap: wrap; + display: none; } > .events--calendar--filters--category-selector--dropdown { flex-basis: 200px; @@ -583,29 +584,6 @@ $calendar-month-default-week-count: 5; &.events--calendar__list-view--event-card__events { border-bottom: $event-category-events 10px solid; } - // &:has(a[href]) { - // cursor: pointer; - // } - // &:hover { - // > h3 { - // a { - // border-bottom: 2px solid $primary-pacific-blue; - // color: $primary-open-sky; - // } - // } - // } - // &:has(a:focus) { - // box-shadow: 0px 4px 12px 8px rgba(0, 99, 184, 0.50); - // } - // &:has(a:active) { - // box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25) inset; - // } - // &.events--calendar--details--card__focused { - // box-shadow: 0px 4px 12px 8px rgba(0, 99, 184, 0.50); - // } - // &.events--calendar--details--card__active { - // box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25) inset; - // } } } } From 682b53b75f14db125da1f41674e9a82726604e35 Mon Sep 17 00:00:00 2001 From: Aaron Stephanus Date: Wed, 27 Dec 2023 13:58:38 -0600 Subject: [PATCH 2/4] Allows event name clicks to perform navigation when clicking away from an event details popup Signed-off-by: Aaron Stephanus --- _layouts/calendar.html | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/_layouts/calendar.html b/_layouts/calendar.html index 869ec62546..d90062f208 100644 --- a/_layouts/calendar.html +++ b/_layouts/calendar.html @@ -115,7 +115,10 @@ {% endif %}
- {{ event.title }} + {{ event.title }}
@@ -548,12 +551,17 @@

Connect with the community

event.preventDefault(); } else { // Determine if the click did NOT occur within the card iteself (say for example in a link). - // Hide it if there was a a "click-away" event. + // Hide it if there was a "click-away" event. const detailsCard = e.target.closest('.events--calendar--body--week--day--event--details'); const clickWasInsideCard = detailsCard !== null; if (!clickWasInsideCard) { hideEventDetails(currentlyVisibleDetails); - event.preventDefault(); + const eventNameLinkClassName = 'events--calendar--body--week--day--event--name--anchor'; + if (!e.target.classList.contains(eventNameLinkClassName)) { + // If an event name was NOT clicked then prevent the default action. + // Otherwise allow the navigation to the clicked event to be performed. + event.preventDefault(); + } } } } else { From e5370ac3466df6dbf598d60e3b6c8c3724aab033 Mon Sep 17 00:00:00 2001 From: Aaron Stephanus Date: Wed, 27 Dec 2023 17:13:24 -0600 Subject: [PATCH 3/4] Adds persistent calendar filtering across page views in session storage Signed-off-by: Aaron Stephanus --- _layouts/calendar.html | 82 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) diff --git a/_layouts/calendar.html b/_layouts/calendar.html index d90062f208..5f0ddf23b4 100644 --- a/_layouts/calendar.html +++ b/_layouts/calendar.html @@ -675,7 +675,89 @@

Connect with the community

}); } } + + const filterStateStorageName = 'events--calendar--filters'; + function readFilterState() { + const filterStateJson = window.sessionStorage.getItem(filterStateStorageName); + if (filterStateJson) { + const parsedFilterState = JSON.parse(filterStateJson); + return parsedFilterState; + } + return null; + } + + function writeFilterState() { + const defaultFilterState = { + categories: [], + showInPersonEvents: true, + }; + const filteredCategoriesSelector = '.events--calendar.events--calendar__filtered'; + const selectedCategoriesAttributeName = 'data-filtercategory'; + const filteredCategories = ( + document.querySelector( + filteredCategoriesSelector + )?.getAttribute?.( + selectedCategoriesAttributeName + ) ?? '' + ).split(',').filter(category => category !== ''); + const onlineOnlySelector = '.events--calendar.events--calendar__filtered.events--calendar__online-only'; + const onlineOnly = !!document.querySelector(onlineOnlySelector); + const filterState = { + ...defaultFilterState, + categories: [...filteredCategories], + showInPersonEvents: !onlineOnly, + }; + const filterStateJson = JSON.stringify(filterState, null, 2); + window.sessionStorage.setItem(filterStateStorageName, filterStateJson); + } + + function initializeFilterStateDOM(filterState) { + if (!filterState) { + return; + } + const { + categories = [], + showInPersonEvents = true + } = filterState; + const calendarSelector = '.events--calendar'; + const eventsCalendarElement = document.querySelector(calendarSelector); + const selectedCategoriesAttributeName = 'data-filtercategory'; + const selectedCategoryCount = categories?.length ?? 0; + if (!showInPersonEvents) { + const inPersonToggleSelector = '.events--calendar--filters--in-person-toggle'; + const onlineOnlyClass = 'events--calendar--filters--in-person-toggle__toggled-off'; + const onlineOnlyCalendarClass = 'events--calendar__online-only'; + eventsCalendarElement?.classList?.add?.(onlineOnlyCalendarClass); + document.querySelector(inPersonToggleSelector)?.classList?.add?.(onlineOnlyClass); + } + + if (selectedCategoryCount > 0) { + const categoryList = categories.join(','); + const calendarFilteredClassName = 'events--calendar__filtered'; + eventsCalendarElement?.setAttribute?.(selectedCategoriesAttributeName, categoryList); + eventsCalendarElement?.classList?.add?.(calendarFilteredClassName); + + const categorySelectElementId = 'category-filter-selectorFilter-by-Category'; + const categorySelectElement = document.getElementById(categorySelectElementId); + const labelSelector = `label[for="${categorySelectElementId}"]`; + const labelText = `Filter by Category (${selectedCategoryCount})`; + const labelElement = document.querySelector(labelSelector); + + categories.forEach(category => { + categorySelectElement?.querySelector?.(`option[value="${category}"]`)?.setAttribute?.('selected', ''); + addFilterChip(category); + }); + if (labelElement) { + labelElement.textContent = labelText; + } + } + } + setEventsPageLinksToThisMonthCalendar(); localizeEventDates(); + initializeFilterStateDOM(readFilterState()); + window.addEventListener('beforeunload', () => { + writeFilterState(); + }); }); From 9a3a0e61a1006bce1e4234243125603b0f956101 Mon Sep 17 00:00:00 2001 From: Aaron Stephanus Date: Thu, 28 Dec 2023 11:18:13 -0600 Subject: [PATCH 4/4] Corrects calendar popup click away listener to allow for previous and next links to perform Signed-off-by: Aaron Stephanus --- _layouts/calendar.html | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/_layouts/calendar.html b/_layouts/calendar.html index 5f0ddf23b4..742a1ab1ef 100644 --- a/_layouts/calendar.html +++ b/_layouts/calendar.html @@ -76,14 +76,14 @@
{% if page.previous %} - < Previous + < Previous {% else %} Previous {% endif %}
{% if page.next %} - Next > + Next > {% else %} Next > {% endif %} @@ -556,8 +556,11 @@

Connect with the community

const clickWasInsideCard = detailsCard !== null; if (!clickWasInsideCard) { hideEventDetails(currentlyVisibleDetails); - const eventNameLinkClassName = 'events--calendar--body--week--day--event--name--anchor'; - if (!e.target.classList.contains(eventNameLinkClassName)) { + const allowableAnchorClassNames = [ + 'events--calendar--head--prev-next--anchor', + 'events--calendar--body--week--day--event--name--anchor', + ]; + if (!allowableAnchorClassNames.some(className => e.target.classList.contains(className))) { // If an event name was NOT clicked then prevent the default action. // Otherwise allow the navigation to the clicked event to be performed. event.preventDefault();