BetterSEQTA-Plus/src/plugins/built-in/timetable/index.ts

import { settingsState } from "@/seqta/utils/listeners/SettingsState";
import type { Plugin } from "../../core/types";
import { convertTo12HourFormat } from "@/seqta/utils/convertTo12HourFormat";
import { waitForElm } from "@/seqta/utils/waitForElm";

const timetablePlugin: Plugin<{}, {}> = {
  id: "timetable",
  name: "Timetable Enhancer",
  description: "Adds extra features to the timetable view",
  version: "1.0.0",
  settings: {},
  disableToggle: true,

  run: async (api) => {
    const { unregister } = api.seqta.onMount(".timetablepage", handleTimetable);

    return () => {
      // Call the unregister function to remove the mount listener
      unregister();

      const timetablePage = document.querySelector(".timetablepage");
      if (timetablePage) {
        const zoomControls = document.querySelector(".timetable-zoom-controls");
        if (zoomControls) zoomControls.remove();

        const hideControls = document.querySelector(".timetable-hide-controls");
        if (hideControls) hideControls.remove();

        resetTimetableStyles();
      }
    };
  },
};

// Store event handlers globally for cleanup
const zoomHandlers = new WeakMap<
  Element,
  { zoomIn: () => void; zoomOut: () => void }
>();

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`;
    }
  });

  const entries = document.querySelectorAll(".entry");
  entries.forEach((entry: Element) => {
    const entryEl = entry as HTMLElement;
    entryEl.style.opacity = "1";
  });

  const zoomControls = document.querySelector(".timetable-zoom-controls");
  if (zoomControls) {
    const handlers = zoomHandlers.get(zoomControls);
    if (handlers) {
      const zoomIn = zoomControls.querySelector(".timetable-zoom:nth-child(2)");
      const zoomOut = zoomControls.querySelector(
        ".timetable-zoom:nth-child(1)",
      );
      if (zoomIn) zoomIn.removeEventListener("click", handlers.zoomIn);
      if (zoomOut) zoomOut.removeEventListener("click", handlers.zoomOut);
      zoomHandlers.delete(zoomControls);
    }
  }
}

async function handleTimetable(): Promise<void> {
  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
  if (settingsState.timeFormat == "12") {
    const times = document.querySelectorAll(".timetablepage .times .time");
    for (const time of times) {
      if (!time.textContent) continue;
      time.textContent = convertTo12HourFormat(time.textContent, true);
    }
  }

  handleTimetableZoom();
  handleTimetableAssessmentHide();
}

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";

  const zoomIn = document.createElement("button");
  zoomIn.className = "uiButton timetable-zoom iconFamily";
  zoomIn.innerHTML = "&#xed93;"; // Unicode for zoom in icon (custom iconfamily)

  const zoomOut = document.createElement("button");
  zoomOut.className = "uiButton timetable-zoom iconFamily";
  zoomOut.innerHTML = "&#xed94;"; // Unicode for zoom out icon (custom iconfamily)

  zoomControls.appendChild(zoomOut);
  zoomControls.appendChild(zoomIn);

  const toolbar = document.getElementById("toolbar");
  toolbar?.appendChild(zoomControls);

  // Store event listener references
  const zoomInHandler = () => {
    if (timetableZoomLevel < 2) {
      timetableZoomLevel += 0.2;
      updateZoom();
    }
  };

  const zoomOutHandler = () => {
    if (timetableZoomLevel > 0.6) {
      timetableZoomLevel -= 0.2;
      updateZoom();
    }
  };

  zoomIn.addEventListener("click", zoomInHandler);
  zoomOut.addEventListener("click", zoomOutHandler);

  // Store references for cleanup
  zoomHandlers.set(zoomControls, {
    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 {
  const hideControls = document.createElement("div");
  hideControls.className = "timetable-hide-controls";

  const hideOn = document.createElement("button");
  hideOn.className = "uiButton timetable-hide iconFamily";
  hideOn.innerHTML = "&#128065;";

  hideControls.appendChild(hideOn);

  const toolbar = document.getElementById("toolbar");
  toolbar?.appendChild(hideControls);

  function hideElements(): void {
    const entries = document.querySelectorAll(".entry");

    entries.forEach((entry: Element) => {
      const entryEl = entry as HTMLElement;
      if (!entryEl.classList.contains("assessment")) {
        entryEl.style.opacity = entryEl.style.opacity === "0.3" ? "1" : "0.3";
      }
    });
  }

  hideOn.addEventListener("click", hideElements);
}

export default timetablePlugin;