No lessons available.
@@ -212,7 +191,6 @@ export async function loadHomePage() { } dayContainer?.classList.remove("loading"); - // Process assessments data const activeClass = classes.find((c: any) => c.hasOwnProperty("active")); const activeSubjects = activeClass?.subjects || []; const activeSubjectCodes = activeSubjects.map((s: any) => s.code); @@ -226,7 +204,6 @@ export async function loadHomePage() { upcomingItems.classList.remove("loading"); } - // Process notices data const labelArray = prefs.payload .filter((item: any) => item.name === "notices.filters") .map((item: any) => item.value); @@ -271,12 +248,10 @@ function setupTimetableListeners() { const timetableForward = document.getElementById("home-timetable-forward"); function changeTimetable(value: number) { - // Clear any existing loading timeout if (loadingTimeout) { clearTimeout(loadingTimeout); } - - // Only show loading state after 200ms to avoid flicker on fast connections + loadingTimeout = setTimeout(() => { const dayContainer = document.getElementById("day-container"); if (dayContainer) { @@ -284,7 +259,7 @@ function setupTimetableListeners() { dayContainer.innerHTML = ""; } }, 200); - + currentSelectedDate.setDate(currentSelectedDate.getDate() + value); const formattedDate = formatDate(currentSelectedDate); callHomeTimetable(formattedDate, true); @@ -340,19 +315,25 @@ function setupNotices(labelArray: string[], date: string) { ) as HTMLInputElement; const fetchNotices = async (date: string) => { - const response = await fetch( - `${location.origin}/seqta/student/load/notices?`, - { - method: "POST", - headers: { "Content-Type": "application/json; charset=utf-8" }, - body: JSON.stringify({ date }), - }, - ); - const data = await response.json(); + let data; + + if (settingsState.mockNotices) { + data = getMockNotices(); + } else { + const response = await fetch( + `${location.origin}/seqta/student/load/notices?`, + { + method: "POST", + headers: { "Content-Type": "application/json; charset=utf-8" }, + body: JSON.stringify({ date }), + }, + ); + data = await response.json(); + } + processNotices(data, labelArray); }; - // Debounce the input handler const debouncedInputChange = debounce((e: Event) => { const target = e.target as HTMLInputElement; fetchNotices(target.value); @@ -399,7 +380,6 @@ function processNotices(response: any, labelArray: string[]) { const NoticeContainer = document.getElementById("notice-container"); if (!NoticeContainer) return; - // Clear existing notices NoticeContainer.innerHTML = ""; const notices = response.payload; @@ -411,19 +391,20 @@ function processNotices(response: any, labelArray: string[]) { return; } - // Create document fragment for batch DOM updates const fragment = document.createDocumentFragment(); - // Process notices in batch notices.forEach((notice: any) => { - if (labelArray.includes(JSON.stringify(notice.label))) { + const shouldInclude = + settingsState.mockNotices || + labelArray.includes(JSON.stringify(notice.label)); + + if (shouldInclude) { const colour = processNoticeColor(notice.colour); const noticeElement = createNoticeElement(notice, colour); fragment.appendChild(noticeElement); } }); - // Single DOM update NoticeContainer.appendChild(fragment); } @@ -438,137 +419,413 @@ function processNoticeColor(colour: string): string | undefined { } function createNoticeElement(notice: any, colour: string | undefined): Node { - const htmlContent = ` -
-
`;
+ const cleanContent = notice.contents
+ .replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "")
+ .replace(/ +/, " ");
+ const noticeId = `notice-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
- const element = stringToHTML(htmlContent).firstChild;
- if (element instanceof HTMLElement) {
- element.style.setProperty("--colour", colour ?? "");
+ const htmlContent = `
+ ${notice.title}
- ${notice.label_title !== undefined ? `${notice.label_title}
` : ""} -${notice.staff}
- ${notice.contents.replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "").replace(/ +/, " ")} - -
+
`;
+
+ const element = stringToHTML(htmlContent).firstChild as HTMLElement;
+ if (element) {
+ element.addEventListener("click", () =>
+ openNoticeModal(notice, colour, element),
+ );
}
return element!;
}
+function openNoticeModal(
+ notice: any,
+ colour: string | undefined,
+ sourceElement: HTMLElement,
+) {
+ const cleanContent = notice.contents
+ .replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "")
+ .replace(/ +/, " ");
+
+ const existingModal = document.getElementById("notice-modal");
+ if (existingModal) {
+ existingModal.remove();
+ }
+
+ const sourceRect = sourceElement.getBoundingClientRect();
+ let scrollY = Math.round(window.scrollY);
+ let scrollX = Math.round(window.scrollX);
+
+ let sourceLeft = sourceRect.left;
+ let sourceTop = sourceRect.top;
+ let sourceWidth = sourceRect.width;
+ let sourceHeight = sourceRect.height;
+
+ const modalHtml = `
+ `;
+
+ const modal = stringToHTML(modalHtml).firstChild as HTMLElement;
+ const transitionContainer = modal.querySelector(
+ ".notice-modal-transition",
+ ) as HTMLElement;
+ const unifiedContent = modal.querySelector(
+ ".notice-unified-content",
+ ) as HTMLElement;
+ const closeBtn = modal.querySelector(".notice-close-btn") as HTMLElement;
+
+ document.body.appendChild(modal);
+
+ sourceElement.setAttribute("data-transitioning", "true");
+ sourceElement.style.opacity = "0";
+ sourceElement.style.transform = "scale(0.95)";
+
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
+ let targetWidth = Math.round(
+ Math.min(Math.max(sourceWidth, 800), viewportWidth - 40),
+ );
+
+ const tempMeasureDiv = document.createElement("div");
+ tempMeasureDiv.style.position = "absolute";
+ tempMeasureDiv.style.left = "-9999px";
+ tempMeasureDiv.style.width = targetWidth + "px";
+ tempMeasureDiv.style.visibility = "hidden";
+ tempMeasureDiv.innerHTML = `
+
+
+
+
+ ${notice.label_title || "General"}
+
+ ${notice.staff}
+
+
+ ${notice.title}
+${cleanContent}
+
+
+ `;
+ document.body.appendChild(tempMeasureDiv);
+ const measuredHeight =
+ tempMeasureDiv.firstElementChild!.getBoundingClientRect().height;
+ document.body.removeChild(tempMeasureDiv);
+
+ let targetHeight = Math.round(
+ Math.min(Math.max(measuredHeight, 200), viewportHeight * 0.85),
+ );
+
+ let targetLeft = Math.round((viewportWidth - targetWidth) / 2);
+ let targetTop = Math.round((viewportHeight - targetHeight) / 2) + scrollY;
+
+ const closeModal = () => {
+ window.removeEventListener("resize", handleResize);
+ document.removeEventListener("keydown", handleEscape);
+
+ if (!settingsState.animations) {
+ modal.remove();
+ sourceElement.style.opacity = "1";
+ sourceElement.style.transform = "";
+ sourceElement.removeAttribute("data-transitioning");
+ return;
+ }
+
+ animate(
+ modal,
+ {
+ backgroundColor: ["rgba(0, 0, 0, 0.5)", "rgba(0, 0, 0, 0)"],
+ backdropFilter: ["blur(4px)", "blur(0px)"],
+ },
+ { duration: 0.2 },
+ );
+
+ animate(
+ transitionContainer,
+ { opacity: [1, 0] },
+ { duration: 0.2, delay: 0.3 },
+ );
+
+ sourceElement.style.opacity = "1";
+ sourceElement.style.transform = "";
+
+ modal.style.pointerEvents = "none";
+
+ animate(
+ transitionContainer,
+ {
+ left: [targetLeft + scrollX, sourceLeft + scrollX],
+ top: [targetTop, sourceTop + scrollY],
+ width: [targetWidth, sourceWidth],
+ height: [targetHeight, sourceHeight],
+ scale: [1, 1],
+ },
+ {
+ duration: 0.35,
+ type: "spring",
+ stiffness: 400,
+ damping: 35,
+ },
+ ).finished.then(async () => {
+ modal.remove();
+ sourceElement.removeAttribute("data-transitioning");
+ });
+ };
+
+ closeBtn?.addEventListener("click", closeModal);
+ modal?.addEventListener("click", (e) => {
+ if (e.target === modal) {
+ closeModal();
+ }
+ });
+
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ closeModal();
+ document.removeEventListener("keydown", handleEscape);
+ window.removeEventListener("resize", handleResize);
+ }
+ };
+ document.addEventListener("keydown", handleEscape);
+
+ const handleResize = () => {
+ const newSourceRect = sourceElement.getBoundingClientRect();
+ const newScrollY = Math.round(window.scrollY);
+ const newScrollX = Math.round(window.scrollX);
+
+ // Get the current scale applied to the source element and compensate for it
+ const computedStyle = getComputedStyle(sourceElement);
+ const transform = computedStyle.transform;
+ let scaleX = 1, scaleY = 1;
+
+ if (transform && transform !== 'none') {
+ const matrix = transform.match(/matrix.*\((.+)\)/);
+ if (matrix) {
+ const values = matrix[1].split(', ');
+ scaleX = parseFloat(values[0]);
+ scaleY = parseFloat(values[3]);
+ }
+ }
+
+ // Apply inverse scale to get true original dimensions and positions
+ const newSourceWidth = newSourceRect.width / scaleX;
+ const newSourceHeight = newSourceRect.height / scaleY;
+
+ // Calculate position shift due to center-based scaling
+ const deltaX = (newSourceWidth - newSourceRect.width) / 2;
+ const deltaY = (newSourceHeight - newSourceRect.height) / 2;
+
+ const newSourceLeft = newSourceRect.left - deltaX;
+ const newSourceTop = newSourceRect.top - deltaY;
+
+ const newViewportWidth = window.innerWidth;
+ const newViewportHeight = window.innerHeight;
+ const newTargetWidth = Math.round(
+ Math.min(Math.max(newSourceWidth, 800), newViewportWidth - 40),
+ );
+
+ // Just measure the existing modal content
+ const currentHeight = unifiedContent.getBoundingClientRect().height;
+ const newTargetHeight = Math.round(
+ Math.min(Math.max(currentHeight, 200), newViewportHeight * 0.85),
+ );
+
+ const newTargetLeft = Math.round((newViewportWidth - newTargetWidth) / 2);
+ const newTargetTop =
+ Math.round((newViewportHeight - newTargetHeight) / 2) + newScrollY;
+
+ transitionContainer.style.left =
+ Math.round(newTargetLeft + newScrollX) + "px";
+ transitionContainer.style.top = Math.round(newTargetTop) + "px";
+ transitionContainer.style.width = Math.round(newTargetWidth) + "px";
+ transitionContainer.style.height = Math.round(newTargetHeight) + "px";
+
+ sourceLeft = newSourceLeft;
+ sourceTop = newSourceTop;
+ sourceWidth = newSourceWidth;
+ sourceHeight = newSourceHeight;
+ targetLeft = newTargetLeft;
+ targetTop = newTargetTop;
+ targetWidth = newTargetWidth;
+ targetHeight = newTargetHeight;
+ scrollY = newScrollY;
+ scrollX = newScrollX;
+ };
+
+ window.addEventListener("resize", handleResize);
+
+ if (settingsState.animations) {
+ animate(modal, { opacity: [0, 1] }, { duration: 0.2 });
+
+ animate(
+ transitionContainer,
+ {
+ left: [sourceLeft + scrollX, targetLeft + scrollX],
+ top: [sourceTop + scrollY, targetTop],
+ width: [sourceWidth, targetWidth],
+ height: [sourceHeight, targetHeight],
+ scale: [1, 1],
+ },
+ {
+ duration: 0.5,
+ type: "spring",
+ stiffness: 280,
+ damping: 24,
+ },
+ );
+
+ unifiedContent.classList.remove("notice-card-state");
+ unifiedContent.classList.add("notice-modal-state");
+ } else {
+ modal.style.opacity = "1";
+ transitionContainer.style.left = Math.round(targetLeft + scrollX) + "px";
+ transitionContainer.style.top = Math.round(targetTop) + "px";
+ transitionContainer.style.width = Math.round(targetWidth) + "px";
+ transitionContainer.style.height = Math.round(targetHeight) + "px";
+ unifiedContent.classList.remove("notice-card-state");
+ unifiedContent.classList.add("notice-modal-state");
+ }
+}
+
function callHomeTimetable(date: string, change?: any) {
- // Creates a HTTP Post Request to the SEQTA page for the students timetable
var xhr = new XMLHttpRequest();
xhr.open("POST", `${location.origin}/seqta/student/load/timetable?`, true);
- // Sets the response type to json
+
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xhr.onreadystatechange = function () {
- // Once the response is ready
if (xhr.readyState === 4) {
- // Clear the loading timeout since we got a response
if (loadingTimeout) {
clearTimeout(loadingTimeout);
loadingTimeout = null;
}
-
+
const DayContainer = document.getElementById("day-container")!;
-
+
try {
var serverResponse = JSON.parse(xhr.response);
let lessonArray: Array
+
+
+ ${notice.label_title || "General"}
+ ${notice.staff}
+
+
+ ${notice.title}
+${cleanContent}
+