Skip to content

Commit abf3ae7

Browse files
nateynateynatenateynateynate
authored
Merge pull request #2514
Events calendar fast follow
2 parents 398327d + 9a3a0e6 commit abf3ae7

File tree

2 files changed

+103
-32
lines changed

2 files changed

+103
-32
lines changed

‎_layouts/calendar.html

+98-5
Original file line numberDiff line numberDiff line change
@@ -76,14 +76,14 @@
7676
<div class="events--calendar--head--prev-next">
7777
<div class="events--calendar--head--prev-next--prev">
7878
{% if page.previous %}
79-
<a href="{{ page.previous.url }}">&lt;&nbsp;Previous</a>
79+
<a class="events--calendar--head--prev-next--anchor" href="{{ page.previous.url }}">&lt;&nbsp;Previous</a>
8080
{% else %}
8181
<span>Previous</span>
8282
{% endif %}
8383
</div>
8484
<div class="events--calendar--head--prev-next--next">
8585
{% if page.next %}
86-
<a href="{{ page.next.url }}">Next&nbsp;&gt;</a>
86+
<a class="events--calendar--head--prev-next--anchor" href="{{ page.next.url }}">Next&nbsp;&gt;</a>
8787
{% else %}
8888
<span>Next&nbsp;&gt;</span>
8989
{% endif %}
@@ -115,7 +115,10 @@
115115
{% endif %}
116116
<div class="events--calendar--body--week--day--event {{ event_category_classname }}">
117117
<div class="events--calendar--body--week--day--event--name">
118-
<a href="{{ event.url }}" tile="{{ event.title }}">{{ event.title }}</a>
118+
<a class="events--calendar--body--week--day--event--name--anchor"
119+
href="{{ event.url }}"
120+
title="{{ event.title }}"
121+
>{{ event.title }}</a>
119122
</div>
120123
<div class="events--calendar--body--week--day--event--details" data-eventurl="{{ event.url }}">
121124
<div class="events--calendar--body--week--day--event--details--close-button">
@@ -548,12 +551,20 @@ <h2 class="platform-page--solution--header">Connect with the community</h2>
548551
event.preventDefault();
549552
} else {
550553
// Determine if the click did NOT occur within the card iteself (say for example in a link).
551-
// Hide it if there was a a "click-away" event.
554+
// Hide it if there was a "click-away" event.
552555
const detailsCard = e.target.closest('.events--calendar--body--week--day--event--details');
553556
const clickWasInsideCard = detailsCard !== null;
554557
if (!clickWasInsideCard) {
555558
hideEventDetails(currentlyVisibleDetails);
556-
event.preventDefault();
559+
const allowableAnchorClassNames = [
560+
'events--calendar--head--prev-next--anchor',
561+
'events--calendar--body--week--day--event--name--anchor',
562+
];
563+
if (!allowableAnchorClassNames.some(className => e.target.classList.contains(className))) {
564+
// If an event name was NOT clicked then prevent the default action.
565+
// Otherwise allow the navigation to the clicked event to be performed.
566+
event.preventDefault();
567+
}
557568
}
558569
}
559570
} else {
@@ -667,7 +678,89 @@ <h2 class="platform-page--solution--header">Connect with the community</h2>
667678
});
668679
}
669680
}
681+
682+
const filterStateStorageName = 'events--calendar--filters';
683+
function readFilterState() {
684+
const filterStateJson = window.sessionStorage.getItem(filterStateStorageName);
685+
if (filterStateJson) {
686+
const parsedFilterState = JSON.parse(filterStateJson);
687+
return parsedFilterState;
688+
}
689+
return null;
690+
}
691+
692+
function writeFilterState() {
693+
const defaultFilterState = {
694+
categories: [],
695+
showInPersonEvents: true,
696+
};
697+
const filteredCategoriesSelector = '.events--calendar.events--calendar__filtered';
698+
const selectedCategoriesAttributeName = 'data-filtercategory';
699+
const filteredCategories = (
700+
document.querySelector(
701+
filteredCategoriesSelector
702+
)?.getAttribute?.(
703+
selectedCategoriesAttributeName
704+
) ?? ''
705+
).split(',').filter(category => category !== '');
706+
const onlineOnlySelector = '.events--calendar.events--calendar__filtered.events--calendar__online-only';
707+
const onlineOnly = !!document.querySelector(onlineOnlySelector);
708+
const filterState = {
709+
...defaultFilterState,
710+
categories: [...filteredCategories],
711+
showInPersonEvents: !onlineOnly,
712+
};
713+
const filterStateJson = JSON.stringify(filterState, null, 2);
714+
window.sessionStorage.setItem(filterStateStorageName, filterStateJson);
715+
}
716+
717+
function initializeFilterStateDOM(filterState) {
718+
if (!filterState) {
719+
return;
720+
}
721+
const {
722+
categories = [],
723+
showInPersonEvents = true
724+
} = filterState;
725+
const calendarSelector = '.events--calendar';
726+
const eventsCalendarElement = document.querySelector(calendarSelector);
727+
const selectedCategoriesAttributeName = 'data-filtercategory';
728+
const selectedCategoryCount = categories?.length ?? 0;
729+
if (!showInPersonEvents) {
730+
const inPersonToggleSelector = '.events--calendar--filters--in-person-toggle';
731+
const onlineOnlyClass = 'events--calendar--filters--in-person-toggle__toggled-off';
732+
const onlineOnlyCalendarClass = 'events--calendar__online-only';
733+
eventsCalendarElement?.classList?.add?.(onlineOnlyCalendarClass);
734+
document.querySelector(inPersonToggleSelector)?.classList?.add?.(onlineOnlyClass);
735+
}
736+
737+
if (selectedCategoryCount > 0) {
738+
const categoryList = categories.join(',');
739+
const calendarFilteredClassName = 'events--calendar__filtered';
740+
eventsCalendarElement?.setAttribute?.(selectedCategoriesAttributeName, categoryList);
741+
eventsCalendarElement?.classList?.add?.(calendarFilteredClassName);
742+
743+
const categorySelectElementId = 'category-filter-selectorFilter-by-Category';
744+
const categorySelectElement = document.getElementById(categorySelectElementId);
745+
const labelSelector = `label[for="${categorySelectElementId}"]`;
746+
const labelText = `Filter by Category (${selectedCategoryCount})`;
747+
const labelElement = document.querySelector(labelSelector);
748+
749+
categories.forEach(category => {
750+
categorySelectElement?.querySelector?.(`option[value="${category}"]`)?.setAttribute?.('selected', '');
751+
addFilterChip(category);
752+
});
753+
if (labelElement) {
754+
labelElement.textContent = labelText;
755+
}
756+
}
757+
}
758+
670759
setEventsPageLinksToThisMonthCalendar();
671760
localizeEventDates();
761+
initializeFilterStateDOM(readFilterState());
762+
window.addEventListener('beforeunload', () => {
763+
writeFilterState();
764+
});
672765
});
673766
</script>

‎_sass/_events-calendar.scss

+5-27
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,9 @@ $calendar-month-default-week-count: 5;
144144
justify-content: start;
145145
align-items: center;
146146
flex-wrap: nowrap;
147+
@media screen and (max-width: 834px) {
148+
display: none;
149+
}
147150
> .events--calendar--filters--view-mode-toggle--item {
148151
flex-basis: 35px;
149152
flex-shrink: 0;
@@ -191,11 +194,9 @@ $calendar-month-default-week-count: 5;
191194
flex-direction: row;
192195
justify-content: flex-start;
193196
align-items: center;
194-
@media screen and (min-width: 835px) {
195-
flex-wrap: nowrap;
196-
}
197+
flex-wrap: nowrap;
197198
@media screen and (max-width: 834px) {
198-
flex-wrap: wrap;
199+
display: none;
199200
}
200201
> .events--calendar--filters--category-selector--dropdown {
201202
flex-basis: 200px;
@@ -583,29 +584,6 @@ $calendar-month-default-week-count: 5;
583584
&.events--calendar__list-view--event-card__events {
584585
border-bottom: $event-category-events 10px solid;
585586
}
586-
// &:has(a[href]) {
587-
// cursor: pointer;
588-
// }
589-
// &:hover {
590-
// > h3 {
591-
// a {
592-
// border-bottom: 2px solid $primary-pacific-blue;
593-
// color: $primary-open-sky;
594-
// }
595-
// }
596-
// }
597-
// &:has(a:focus) {
598-
// box-shadow: 0px 4px 12px 8px rgba(0, 99, 184, 0.50);
599-
// }
600-
// &:has(a:active) {
601-
// box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25) inset;
602-
// }
603-
// &.events--calendar--details--card__focused {
604-
// box-shadow: 0px 4px 12px 8px rgba(0, 99, 184, 0.50);
605-
// }
606-
// &.events--calendar--details--card__active {
607-
// box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25) inset;
608-
// }
609587
}
610588
}
611589
}

0 commit comments

Comments
 (0)