Skip to content

Commit

Permalink
Merge pull request #2514
Browse files Browse the repository at this point in the history 
Events calendar fast follow
  • Loading branch information
@nateynateynate
nateynateynate authored Dec 28, 2023
2 parents 398327d + 9a3a0e6 commit abf3ae7
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 32 deletions.
103 changes: 98 additions & 5 deletions _layouts/calendar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,14 +76,14 @@
<div class="events--calendar--head--prev-next">
<div class="events--calendar--head--prev-next--prev">
{% if page.previous %}
<a href="{{ page.previous.url }}">&lt;&nbsp;Previous</a>
<a class="events--calendar--head--prev-next--anchor" href="{{ page.previous.url }}">&lt;&nbsp;Previous</a>
{% else %}
<span>Previous</span>
{% endif %}
</div>
<div class="events--calendar--head--prev-next--next">
{% if page.next %}
<a href="{{ page.next.url }}">Next&nbsp;&gt;</a>
<a class="events--calendar--head--prev-next--anchor" href="{{ page.next.url }}">Next&nbsp;&gt;</a>
{% else %}
<span>Next&nbsp;&gt;</span>
{% endif %}
Expand Down Expand Up @@ -115,7 +115,10 @@
{% endif %}
<div class="events--calendar--body--week--day--event {{ event_category_classname }}">
<div class="events--calendar--body--week--day--event--name">
<a href="{{ event.url }}" tile="{{ event.title }}">{{ event.title }}</a>
<a class="events--calendar--body--week--day--event--name--anchor"
href="{{ event.url }}"
title="{{ event.title }}"
>{{ event.title }}</a>
</div>
<div class="events--calendar--body--week--day--event--details" data-eventurl="{{ event.url }}">
<div class="events--calendar--body--week--day--event--details--close-button">
Expand Down Expand Up @@ -548,12 +551,20 @@ <h2 class="platform-page--solution--header">Connect with the community</h2>
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 {
Expand Down Expand Up @@ -667,7 +678,89 @@ <h2 class="platform-page--solution--header">Connect with the community</h2>
});
}
}

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();
});
});
</script>
32 changes: 5 additions & 27 deletions _sass/_events-calendar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
// }
}
}
}
Expand Down

0 comments on commit abf3ae7

Please sign in to comment.