first commit

script/autoscroll.js

@@ -0,0 +1,44 @@
+// Defines the framerate of autoscroller
+setInterval(autoScroll, 50);
+
+/**
+ * Auto scrolls all elements with class autoscroll
+ */
+function autoScroll () {
+    Array.from (document.getElementsByClassName("autoscroll")).forEach((objDiv) => {
+        // Skip non-scrollable
+        if (objDiv.scrollHeight - objDiv.clientHeight == 0) return;
+
+        // Wait timeout until scroll direction change
+        let scrollpause = parseInt(objDiv.dataset.scrollpause);
+        if (scrollpause != NaN && scrollpause > 0) {
+            scrollpause --;
+            objDiv.dataset.scrollpause = scrollpause;
+
+            return;
+        }
+
+        // Step either forward or backwards by one
+        let direction = 1;
+        if (objDiv.dataset.scrolldirection == "up") direction = -1;
+        objDiv.scrollTop += direction;
+
+        // If this is the first scroll step after, remove the scrollpause tag
+        if (scrollpause != NaN && scrollpause == 0) {
+            delete objDiv.dataset.scrollpause;
+            return;
+        }
+
+        // Reached the bottom, turn around
+        if (objDiv.scrollTop == objDiv.scrollHeight - objDiv.clientHeight) {
+            objDiv.dataset.scrolldirection = "up";
+            objDiv.dataset.scrollpause     = 50;
+        }
+
+        // Reached the top, turn around
+        if (objDiv.scrollTop == 0) {
+            delete objDiv.dataset.scrolldirection;
+            objDiv.dataset.scrollpause = 50;
+        }
+    });
+}

script/calendar.js

@@ -0,0 +1,100 @@
+/**
+ * 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();
+});

script/dialog.js

@@ -0,0 +1,11 @@
+/**
+ * Closes a dialog box containing the element calling this function
+ * 
+ * @param {Element} sender Sender element
+ */
+function closeDialog (sender) {
+    sender.
+        parentElement.
+        parentElement.
+        parentElement.remove();
+}