TVGuide/app/public/assets/js/app.js

document.addEventListener("DOMContentLoaded", () => {

    const wrap = document.querySelector(".timeline-wrap");
    const line = document.querySelector(".timeline-now-line");

    if (!wrap || !line)
        return;

    wrap.scrollLeft = Math.max(
        0,
        line.offsetLeft - wrap.clientWidth / 3
    );

});

document.addEventListener("DOMContentLoaded", () => {
  const modal = document.getElementById("programmeModal");

  if (!modal) {
    return;
  }

  const title = document.getElementById("modalTitle");
  const subtitle = document.getElementById("modalSubtitle");
  const description = document.getElementById("modalDescription");
  const category = document.getElementById("modalCategory");
  const time = document.getElementById("modalTime");

  const openModal = (programmeElement) => {
    const id = programmeElement.dataset.programmeId;
    const programme = window.TVGUIDE_PROGRAMMES?.[id];

    if (!programme) {
      return;
    }

    title.textContent = programme.title || "";
    subtitle.textContent = programme.subtitle || "";
    description.textContent = programme.description || "Keine Beschreibung vorhanden.";
    category.textContent = programme.category || "";
    time.textContent = `${programme.channel || ""} · ${programme.start || ""} – ${programme.stop || ""}`;

    modal.hidden = false;
    document.body.classList.add("modal-open");
  };

  const closeModal = () => {
    modal.hidden = true;
    document.body.classList.remove("modal-open");
  };

  document.querySelectorAll(".timeline-programme").forEach((programme) => {
    programme.addEventListener("click", () => openModal(programme));
  });

  modal.querySelectorAll("[data-modal-close]").forEach((element) => {
    element.addEventListener("click", closeModal);
  });

  document.addEventListener("keydown", (event) => {
    if (event.key === "Escape" && !modal.hidden) {
      closeModal();
    }
  });
});

document.addEventListener("DOMContentLoaded", () => {
  const search = document.getElementById("guideSearch");
  const results = document.getElementById("guideSearchResults");
  const programmes = window.TVGUIDE_PROGRAMMES || {};

  if (!search || !results) {
    return;
  }

  const openProgrammeById = (id) => {
    const element = document.querySelector(`[data-programme-id="${CSS.escape(id)}"]`);
    if (element) {
      element.click();
    }
  };

  search.addEventListener("input", () => {
    const query = search.value.trim().toLowerCase();

    if (query.length < 2) {
      results.hidden = true;
      results.innerHTML = "";
      return;
    }

    const matches = Object.values(programmes)
      .filter((programme) => {
        return [
          programme.title,
          programme.subtitle,
          programme.description,
          programme.category,
          programme.channel
        ].some((value) => (value || "").toLowerCase().includes(query));
      })
      .slice(0, 12);

    if (!matches.length) {
      results.innerHTML = `<div class="guide-search-result"><strong>Nichts gefunden</strong></div>`;
      results.hidden = false;
      return;
    }

    results.innerHTML = matches.map((programme) => `
      <div class="guide-search-result" data-search-programme-id="${programme.id}">
        <strong>${programme.title || "Ohne Titel"}</strong>
        <span>${programme.channel || ""} · ${programme.start || ""} – ${programme.stop || ""}</span>
      </div>
    `).join("");

    results.hidden = false;
  });

  results.addEventListener("click", (event) => {
    const item = event.target.closest("[data-search-programme-id]");
    if (!item) {
      return;
    }

    openProgrammeById(item.dataset.searchProgrammeId);
    results.hidden = true;
    search.value = "";
  });

  document.addEventListener("click", (event) => {
    if (!event.target.closest(".guide-search")) {
      results.hidden = true;
    }
  });
});

document.addEventListener("DOMContentLoaded", () => {
  const timelineWrap = document.querySelector(".timeline-wrap");
  const zoomButtons = document.querySelectorAll("[data-zoom]");

  if (!timelineWrap || !zoomButtons.length) {
    return;
  }

  const savedZoom = localStorage.getItem("tvguideTimelineZoom") || "2";

  const applyZoom = (zoom) => {
    timelineWrap.style.setProperty("--minute-width", `${zoom}px`);

    zoomButtons.forEach((button) => {
      button.classList.toggle("active", button.dataset.zoom === zoom);
    });

    localStorage.setItem("tvguideTimelineZoom", zoom);
  };

  zoomButtons.forEach((button) => {
    button.addEventListener("click", () => {
      applyZoom(button.dataset.zoom);
    });
  });

  applyZoom(savedZoom);
});

document.addEventListener("DOMContentLoaded", () => {

    const timeline = document.querySelector(".timeline-wrap");

    if (!timeline)
        return;

    let isDragging = false;
    let startX = 0;
    let scrollLeft = 0;

    timeline.addEventListener("mousedown", (e) => {

        // nicht wenn auf eine Sendung geklickt wird
        if (e.target.closest(".timeline-programme"))
            return;

        isDragging = true;

        timeline.classList.add("dragging");

        startX = e.pageX;
        scrollLeft = timeline.scrollLeft;
    });

    document.addEventListener("mouseup", () => {

        isDragging = false;

        timeline.classList.remove("dragging");
    });

    document.addEventListener("mousemove", (e) => {

        if (!isDragging)
            return;

        e.preventDefault();

        const walk = e.pageX - startX;

        timeline.scrollLeft = scrollLeft - walk;

    });

});

console.log('TVGuide loaded');