From 1f3dea55bbecc9cb94c04f2b8b498f3618d188fb Mon Sep 17 00:00:00 2001 From: SethBurkart123 Date: Tue, 1 Jul 2025 13:15:11 +1000 Subject: [PATCH] fix: more reliable zoom buttons on timetable page --- src/plugins/built-in/timetable/index.ts | 143 ++---------------------- 1 file changed, 9 insertions(+), 134 deletions(-) diff --git a/src/plugins/built-in/timetable/index.ts b/src/plugins/built-in/timetable/index.ts index 1bd96b7c..53f62d3f 100644 --- a/src/plugins/built-in/timetable/index.ts +++ b/src/plugins/built-in/timetable/index.ts @@ -39,43 +39,14 @@ const zoomHandlers = new WeakMap< >(); function resetTimetableStyles(): void { - const firstDayColumn = document.querySelector( - ".dailycal .content .days td", - ) as HTMLElement; - if (!firstDayColumn) return; - - const baseContainerHeight = - parseInt(firstDayColumn.style.height) || firstDayColumn.offsetHeight; - - const dayColumns = document.querySelectorAll(".dailycal .content .days td"); - dayColumns.forEach((td: Element) => { - (td as HTMLElement).style.height = `${baseContainerHeight}px`; - }); - - const timeColumn = document.querySelector(".times"); - if (timeColumn) { - const times = timeColumn.querySelectorAll(".time"); - const timeHeight = baseContainerHeight / times.length; - times.forEach((time: Element) => { - (time as HTMLElement).style.height = `${timeHeight}px`; - }); - } - - const lessons = document.querySelectorAll(".dailycal .lesson"); - lessons.forEach((lesson: Element) => { - const lessonEl = lesson as HTMLElement; - const originalHeight = lessonEl.getAttribute("data-original-height"); - if (originalHeight) { - lessonEl.style.height = `${originalHeight}px`; - } - }); - + // Reset entry opacity (for assessment hide feature) const entries = document.querySelectorAll(".entry"); entries.forEach((entry: Element) => { const entryEl = entry as HTMLElement; entryEl.style.opacity = "1"; }); + // Clean up zoom control event handlers const zoomControls = document.querySelector(".timetable-zoom-controls"); if (zoomControls) { const handlers = zoomHandlers.get(zoomControls); @@ -94,17 +65,7 @@ function resetTimetableStyles(): void { async function handleTimetable(): Promise { await waitForElm(".time", true, 10); - // Store original heights when timetable loads - const lessons = document.querySelectorAll(".dailycal .lesson"); - lessons.forEach((lesson: Element) => { - const lessonEl = lesson as HTMLElement; - lessonEl.setAttribute( - "data-original-height", - lessonEl.offsetHeight.toString(), - ); - }); - - // Existing time format code + // Convert time format if needed if (settingsState.timeFormat == "12") { const times = document.querySelectorAll(".timetablepage .times .time"); for (const time of times) { @@ -120,14 +81,6 @@ async function handleTimetable(): Promise { function handleTimetableZoom(): void { console.log("Initializing timetable zoom controls"); - // Lazy initialize state variables only when function is first called - let timetableZoomLevel = 1; - let baseContainerHeight: number | null = null; - const originalEntryPositions = new Map< - Element, - { topRatio: number; heightRatio: number } - >(); - // Create zoom controls const zoomControls = document.createElement("div"); zoomControls.className = "timetable-zoom-controls"; @@ -148,16 +101,16 @@ function handleTimetableZoom(): void { // Store event listener references const zoomInHandler = () => { - if (timetableZoomLevel < 2) { - timetableZoomLevel += 0.2; - updateZoom(); + const seqtaZoomIn = document.querySelector('.uiButton.zoom.in') as HTMLElement; + if (seqtaZoomIn) { + seqtaZoomIn.click(); } }; const zoomOutHandler = () => { - if (timetableZoomLevel > 0.6) { - timetableZoomLevel -= 0.2; - updateZoom(); + const seqtaZoomOut = document.querySelector('.uiButton.zoom.out') as HTMLElement; + if (seqtaZoomOut) { + seqtaZoomOut.click(); } }; @@ -169,84 +122,6 @@ function handleTimetableZoom(): void { zoomIn: zoomInHandler, zoomOut: zoomOutHandler, }); - - const initializePositions = () => { - // Get the base container height from the first TD - const firstDayColumn = document.querySelector( - ".dailycal .content .days td", - ) as HTMLElement; - if (!firstDayColumn) return false; - - baseContainerHeight = - parseInt(firstDayColumn.style.height) || firstDayColumn.offsetHeight; - - // Store original ratios - const entries = document.querySelectorAll(".entriesWrapper .entry"); - entries.forEach((entry: Element) => { - const entryEl = entry as HTMLElement; - - // Calculate ratios relative to detected base height - if (baseContainerHeight === null) return; - const topRatio = parseInt(entryEl.style.top) / baseContainerHeight; - const heightRatio = parseInt(entryEl.style.height) / baseContainerHeight; - - originalEntryPositions.set(entry, { topRatio, heightRatio }); - }); - - return true; - }; - - const updateZoom = () => { - // Initialize positions if not already done - if (baseContainerHeight === null && !initializePositions()) { - console.error("Failed to initialize positions"); - return; - } - - console.debug(`Updating zoom level to: ${timetableZoomLevel}`); - - // Calculate new container height - if (baseContainerHeight === null) return; - const newContainerHeight = baseContainerHeight * timetableZoomLevel; - - // Update all day columns (TDs) - const dayColumns = document.querySelectorAll(".dailycal .content .days td"); - dayColumns.forEach((td: Element) => { - (td as HTMLElement).style.height = `${newContainerHeight}px`; - }); - - // Update all entries using stored ratios - const entries = document.querySelectorAll(".entriesWrapper .entry"); - entries.forEach((entry: Element) => { - const entryEl = entry as HTMLElement; - const originalRatios = originalEntryPositions.get(entry); - - if (originalRatios) { - // Calculate new positions from original ratios - const newTop = originalRatios.topRatio * newContainerHeight; - const newHeight = originalRatios.heightRatio * newContainerHeight; - - // Apply new values - entryEl.style.top = `${Math.round(newTop)}px`; - entryEl.style.height = `${Math.round(newHeight)}px`; - } - }); - - // Update time column to match - const timeColumn = document.querySelector(".times"); - if (timeColumn) { - const times = timeColumn.querySelectorAll(".time"); - const timeHeight = newContainerHeight / times.length; - times.forEach((time: Element) => { - (time as HTMLElement).style.height = `${timeHeight}px`; - }); - } - - entries[Math.round((entries.length - 1) / 2)].scrollIntoView({ - behavior: "instant", - block: "center", - }); - }; } function handleTimetableAssessmentHide(): void {