You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
3.5 KiB
JavaScript
100 lines
3.5 KiB
JavaScript
/**
|
|
* Global variables
|
|
*/
|
|
var requestedMonth;
|
|
|
|
/**
|
|
* Checks the scroll status of an element on a scroll
|
|
* event and adds box shadows either top, bottom or both
|
|
* depening on the position of the scroll viewport
|
|
*
|
|
* @param {Event} e Scroll event object
|
|
*/
|
|
function onscrollTestScrollShadow(e) {
|
|
let shadowTarget = e.target.parentElement.children[1];
|
|
|
|
if (e.target.clientHeight == e.target.scrollHeight) {
|
|
// Target has no overflowing content and is not scrollable
|
|
shadowTarget.classList.remove("box-shadow-top");
|
|
shadowTarget.classList.remove("box-shadow-bottom");
|
|
shadowTarget.classList.remove("box-shadow-topbottom");
|
|
return;
|
|
}
|
|
|
|
if (e.target.scrollTop == e.target.scrollHeight - e.target.clientHeight) {
|
|
// Scroll is at bottom
|
|
shadowTarget.classList.add("box-shadow-top");
|
|
shadowTarget.classList.remove("box-shadow-bottom");
|
|
shadowTarget.classList.remove("box-shadow-topbottom");
|
|
} else if (e.target.scrollTop == 0) {
|
|
// Scroll is at top
|
|
shadowTarget.classList.remove("box-shadow-top");
|
|
shadowTarget.classList.add("box-shadow-bottom");
|
|
shadowTarget.classList.remove("box-shadow-topbottom");
|
|
} else {
|
|
// Scroll is in middle somewhere
|
|
shadowTarget.classList.remove("box-shadow-top");
|
|
shadowTarget.classList.remove("box-shadow-bottom");
|
|
shadowTarget.classList.add("box-shadow-topbottom");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Prepares an element with class day-events for scrolling, resetting
|
|
* the scroll position to top, initializing the onscrollTestScrollShadow
|
|
* function and adding the same function as scroll event handler
|
|
*
|
|
* @param {Element} parent Parent element with class calendar-element
|
|
*/
|
|
function setupScroll (parent) {
|
|
if (! parent.classList.contains("calendar-entry")) return;
|
|
if (parent.children.length <= 1) return;
|
|
if (parent.children[1].childElementCount == 0) return;
|
|
|
|
let target = parent.children[1].children[0];
|
|
if (! target.classList.contains("day-events")) return;
|
|
|
|
target.scrollTop = 0;
|
|
onscrollTestScrollShadow ( {target: target} );
|
|
target.addEventListener("scroll", onscrollTestScrollShadow);
|
|
}
|
|
|
|
/**
|
|
* Populates the month forward and backward buttons with proper links
|
|
* and displays the correct month name in the top left corner
|
|
*/
|
|
function setupMonthDisplayAndButtons () {
|
|
fetchRequestedMonth();
|
|
|
|
let monthNameElement = document.getElementById("monthName");
|
|
let monthFwdElement = document.getElementById("monthFwd");
|
|
let monthBckElement = document.getElementById("monthBck");
|
|
let urlSearchParams = new URLSearchParams(window.location.search);
|
|
|
|
monthNameElement.innerText = getMonthName(requestedMonth);
|
|
|
|
if (requestedMonth + 1 > 12) {
|
|
monthFwdElement.href = "#";
|
|
} else {
|
|
urlSearchParams.set("month", requestedMonth + 1);
|
|
monthFwdElement.href = "?" + urlSearchParams.toString();
|
|
}
|
|
|
|
if (requestedMonth - 1 < 1) {
|
|
monthBckElement.href = "#";
|
|
} else {
|
|
urlSearchParams.set("month", requestedMonth - 1);
|
|
monthBckElement.href = "?" + urlSearchParams.toString();
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// Add shadow indicators to calendar event lists when scrolling is available
|
|
window.addEventListener("DOMContentLoaded", () => {
|
|
let calendarElement = document.getElementsByClassName("calendar-body")[0];
|
|
Array.from(calendarElement.children).forEach( setupScroll );
|
|
|
|
//setupMonthDisplayAndButtons();
|
|
fetchRequestedMonth();
|
|
}); |