dereklseitz
af7e76f01f
This commit introduces a new script that fetches and normalizes event data from Zoho Calendar using OAuth2. The script makes an API call to retrieve calendar events for the current month. The event data is then processed and formatted to be used by a Nunjucks template. Key Changes: - test(dummy-data): Created a dummy calendar and dummy events for development and testing. - feat(events): Added a new script to fetch event data from Zoho Calendar. - feat(oauth2): Implemented OAuth2 authentication for secure API access. - refactor(data): Normalized the fetched data payload for consistency. - feat(ui): Integrated the normalized data with a Nunjucks template to dynamically populate "event cards" on the community events page.
53 lines
1.7 KiB
JavaScript
53 lines
1.7 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
|
// Hide inline thumbs when JS is active
|
|
document.querySelectorAll(".thumb-inline").forEach(img => img.style.display = "none");
|
|
|
|
const tip = document.createElement("div");
|
|
tip.className = "thumb-tooltip";
|
|
document.body.appendChild(tip);
|
|
|
|
function show(e) {
|
|
const el = e.currentTarget;
|
|
const url = el.getAttribute("data-tooltip");
|
|
if (!url) return;
|
|
|
|
tip.style.backgroundImage = `url("${url}")`;
|
|
tip.style.display = "block";
|
|
|
|
// preload image to size tooltip
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
tip.style.width = img.naturalWidth + "px";
|
|
tip.style.height = img.naturalHeight + "px";
|
|
|
|
// position tooltip relative to element
|
|
const rect = el.getBoundingClientRect();
|
|
const scrollX = window.scrollX;
|
|
const scrollY = window.scrollY;
|
|
|
|
let left = rect.left + scrollX + (rect.width - tip.offsetWidth) / 2;
|
|
let top = rect.top + scrollY - tip.offsetHeight - 8; // above element
|
|
|
|
// fallback below if not enough space
|
|
if (top < scrollY) {
|
|
top = rect.bottom + scrollY + 8;
|
|
}
|
|
|
|
tip.style.left = left + "px";
|
|
tip.style.top = top + "px";
|
|
};
|
|
img.src = url;
|
|
}
|
|
|
|
function hide() {
|
|
tip.style.display = "none";
|
|
}
|
|
|
|
document.querySelectorAll("li.credit").forEach(item => {
|
|
item.addEventListener("mouseenter", show);
|
|
item.addEventListener("mouseleave", hide);
|
|
item.addEventListener("focusin", show);
|
|
item.addEventListener("focusout", hide);
|
|
});
|
|
});
|