@@ -548,12 +551,20 @@
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 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();
+ }
}
}
} else {
@@ -667,7 +678,89 @@
});
}
}
+
+ 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();
+ });
});
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;
- // }
}
}
}