Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle card hover images in js not css so they can break the bounding box #831

Merged
merged 1 commit into from
Nov 8, 2024
Merged

Handle card hover images in js not css so they can break the bounding box #831

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 37 additions & 12 deletions gatherling/gatherling.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,18 +101,43 @@ function formatDate(originalDate, start, timeZone, locale, short) {
return `${formattedDate} • ${formattedTime}`;
}

export { formatDate };
function initTime() {
const timeElements = document.querySelectorAll('time[datetime]');
timeElements.forEach(timeElement => {
const isoDate = timeElement.getAttribute('datetime');
const originalDate = luxon.DateTime.fromISO(isoDate);
const start = luxon.DateTime.now();
const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const locale = navigator.language || navigator.languages[0]; // Fallback to languages array if needed
const short = !timeElement.classList.contains('long');
const formattedDate = formatDate(originalDate, start, timeZone, locale, short);
timeElement.textContent = formattedDate;
});
}

if (typeof window !== 'undefined') {
const timeElements = document.querySelectorAll('time[datetime]');
timeElements.forEach(timeElement => {
const isoDate = timeElement.getAttribute('datetime');
const originalDate = luxon.DateTime.fromISO(isoDate);
const start = luxon.DateTime.now();
const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const locale = navigator.language || navigator.languages[0]; // Fallback to languages array if needed
const short = !timeElement.classList.contains('long');
const formattedDate = formatDate(originalDate, start, timeZone, locale, short);
timeElement.textContent = formattedDate;
function initHoverImage() {
document.querySelectorAll('.cardHoverImageWrapper').forEach(wrapper => {
wrapper.addEventListener('mouseenter', function() {
const hoverImage = this.querySelector('.linkCardHoverImage');
const rect = this.getBoundingClientRect();

// Adjust the hover image position based on card's position in the viewport, with your offsets
hoverImage.style.position = 'fixed';
hoverImage.style.left = `${rect.left + 160}px`; // Offset 150px to the right of the card
hoverImage.style.top = `${rect.top - 160}px`; // Offset -155px above the card
hoverImage.style.display = 'block';
});

wrapper.addEventListener('mouseleave', function() {
const hoverImage = this.querySelector('.linkCardHoverImage');
hoverImage.style.display = 'none';
});
});
}

export { formatDate, initHoverImage };

if (typeof window !== 'undefined') {
initTime();
initHoverImage();
}
18 changes: 1 addition & 17 deletions gatherling/styles/css/stylesheet.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -431,25 +431,9 @@ a.create_deck_link {
color: var(--link-emphasis-text-color);
}

/* autocard */
.cardHoverImageWrapper {
position: relative;
display: inline-block;
}

.linkCardHoverImage {
position: absolute;
left: 150px;
top: -155px;
z-index: 20;
}

.cardHoverImageWrapper .linkCardHoverImage {
display: none;
}

.cardHoverImageWrapper:hover .linkCardHoverImage {
display: block;
z-index: 20;
}

.crop {
Expand Down