oazaSrdceWeb / main.v-2.js
main.v-2.js
Raw
/**
 * @file main.v-2.js
 * @brief JavaScript pro interaktivní funkce na hlavní stránce.
 *
 * Tento skript:
 *  - Přidává hover efekty pro tlačítka stravovacích možností (vegetariánská, veganská, raw, combi, masitá).
 *  - Aktualizuje text (nadpisy a ceny) v boxech jídel při najetí myší na tlačítka pro mobilní i desktopové zobrazení.
 *  - Obsahuje zakomentovanou logiku pro změnu obrázků jídel (momentálně neaktivní).
 *  - Přidává klikací událost na odkazy tříd "medailonek-link" pro přesměrování na URL uvedené v atributu data-url.
 */

document.addEventListener("DOMContentLoaded", function () {
  const foodBtns = document.querySelectorAll(".foodBtn");
  //const foodBoxImg = document.querySelectorAll(".foodBox img");
  const foodBoxH5 = document.querySelectorAll(".foodBox h5");
  const foodBoxP = document.querySelectorAll(".foodBox p");

  const foodData = {
    vegetarian: {
      //img: ["media/morning1.png", "media/lunch1.png", "media/dinner1.png"],
      h5: ["Vegetariánská", "Vegetariánská", "Vegetariánská"],
      p: ["170,-", "220,-", "200,-"],
    },
    vegan: {
      //img: [
      //  "media/logo-oaza.png",//
      //  "media/logo-oaza.png",
      //  "media/logo-oaza.png",
      //],
      h5: ["Veganská", "Veganská", "Veganská"],
      p: ["170,-", "220,-", "200,-"],
    },
    raw: {
      //img: [
      //  "media/logo-oaza.png",
      //  "media/logo-oaza.png",
      //  "media/logo-oaza.png",
      //],
      h5: ["Živá / Raw", "Živá / Raw", "Živá / Raw"],
      p: ["220,-", "270,-", "250,-"],
    },
    combi: {
      //img: [
      //  "media/logo-oaza.png",
      //  "media/logo-oaza.png",
      //  "media/logo-oaza.png",
      //],
      h5: ["Živá / Combi", "Živá / Combi", "Živá / Combi"],
      p: ["220,-", "270,-", "250,-"],
    },
    meat: {
      //img: [
      //  "media/logo-oaza.png",
      //  "media/logo-oaza.png",
      //  "media/logo-oaza.png",
      //],
      h5: ["Domací masitá", "Domací masitá", "Domací masitá"],
      p: ["170,-", "220,-", "200,-"],
    },
  };

  foodBtns.forEach((btn) => {
    btn.addEventListener("mouseover", function () {
      const foodType = btn.id;
      const data = foodData[foodType];

      //foodBoxImg.forEach((img, index) => {
      //  img.src = data.img[index];
      //});

      foodBoxH5.forEach((h5, index) => {
        h5.textContent = data.h5[index];
      });

      foodBoxP.forEach((p, index) => {
        p.textContent = data.p[index];
      });
    });
  });
});

document.addEventListener("DOMContentLoaded", function () {
  const foodBtnMain = document.querySelectorAll(".foodBtnMain");
  //const foodBoxImg = document.querySelectorAll(".foodBoxMain img");
  const foodBoxMainH5 = document.querySelectorAll(".foodBoxMain h5");
  const foodBoxMainP = document.querySelectorAll(".foodBoxMain p");

  const foodData = {
    vegetarian: {
      //img: ["media/morning1.png", "media/lunch1.png", "media/dinner1.png"],
      h5: ["Vegetariánská", "Vegetariánská", "Vegetariánská"],
      p: ["170,-", "220,-", "200,-"],
    },
    vegan: {
      //img: [
      //  "media/logo-oaza.png",//
      //  "media/logo-oaza.png",
      //  "media/logo-oaza.png",
      //],
      h5: ["Veganská", "Veganská", "Veganská"],
      p: ["170,-", "220,-", "200,-"],
    },
    raw: {
      //img: [
      //  "media/logo-oaza.png",
      //  "media/logo-oaza.png",
      //  "media/logo-oaza.png",
      //],
      h5: ["Živá / Raw", "Živá / Raw", "Živá / Raw"],
      p: ["220,-", "270,-", "250,-"],
    },
    combi: {
      //img: [
      //  "media/logo-oaza.png",
      //  "media/logo-oaza.png",
      //  "media/logo-oaza.png",
      //],
      h5: ["Živá / Combi", "Živá / Combi", "Živá / Combi"],
      p: ["220,-", "270,-", "250,-"],
    },
    meat: {
      //img: [
      //  "media/logo-oaza.png",
      //  "media/logo-oaza.png",
      //  "media/logo-oaza.png",
      //],
      h5: ["Domací masitá", "Domací masitá", "Domací masitá"],
      p: ["170,-", "220,-", "200,-"],
    },
  };

  foodBtnMain.forEach((btn) => {
    btn.addEventListener("mouseover", function () {
      const foodType = btn.id;
      const data = foodData[foodType];

      //foodBoxImg.forEach((img, index) => {
      //  img.src = data.img[index];
      //});
      foodBoxMainH5.forEach((h5, index) => {
        h5.textContent = data.h5[index];
      });

      foodBoxMainP.forEach((p, index) => {
        p.textContent = data.p[index];
      });
    });
  });
});

const eventCards = document.querySelectorAll(".medailonek-link");
eventCards.forEach((card) => {
  card.addEventListener("click", function () {
    const url = this.getAttribute("data-url");
    window.location.href = url;
  });
});