uiu-sobe/js/theme-script.js

//************************** Site Header Menu - Global ***************************************/

// show mega menu in upper nav
const menuItem = document.querySelectorAll("#navbar .menu > .menu-item");
const allMenuContent = document.querySelectorAll(".sub-menu");

if (menuItem) {
  menuItem.forEach((item) => {
    const menuBtn = item.querySelector("a");
    const menuContent = item.querySelector(".sub-menu");

    menuBtn.addEventListener("click", () => {
      if (menuContent) {
        menuContent.classList.toggle("show-mega-menu");
        item.classList.toggle("active");
      }

      menuItem.forEach((singleItem) => {
        if (singleItem !== item) {
          singleItem.classList.remove("active");
        }
      });

      allMenuContent.forEach((content) => {
        if (menuContent !== content) {
          content.classList.remove("show-mega-menu");
          // item.classList.remove('active')
        }
      });
    });
  });
}

// global menu
const toggleBtnGlobal = document.getElementById("menu-bars");
const menuContainerGlobal = document.querySelector("#uiu-global-nav .menu");
if (toggleBtnGlobal && menuContainerGlobal) {
  toggleBtnGlobal.addEventListener("click", () => {
    menuContainerGlobal.classList.toggle("show");
  });
}

// department menu
const toggleBtnDepartment = document.getElementById("responsive-btn");
const menuContainerDepartment = document.querySelector("#uiu-departmental-nav");
if (toggleBtnDepartment && menuContainerDepartment) {
  toggleBtnDepartment.addEventListener("click", () => {
    menuContainerDepartment.classList.toggle("show");
  });
}

// fetch submenu extra item data
const addMenuFeature = (url, parentClass) => {
  const fetchMenudata = async () => {
    try {
      const res = await fetch(url, { method: "GET" });
      const data = await res.json();

      return data;
    } catch (error) {
      console.log(`Error: ${error}`);
    }
  };

  fetchMenudata().then((data) => {
    // adding menu data into html
    addDataToMenu(data);
  });

  function addDataToMenu(data) {
    if (data) {
      const menuItem = document.querySelectorAll(`.${parentClass} .menu-item`);

      menuItem.forEach((item) => {
        const targetData = data.find((data) =>
          item.innerHTML
            .toLowerCase()
            .includes(data.parent_navigation_label.toLowerCase())
        );

        const menuTitle = item.querySelector(".menu_title");

        const menuDesc = item.querySelector(".menu_description");

        const menuFeatureImage = item.querySelector(".menu_feature_image");

        if (targetData && menuFeatureImage) {
          menuFeatureImage.src = targetData.menu_feature_image;
        }

        if (targetData && menuTitle) {
          menuTitle.innerHTML = targetData.menu_title;
        }

        if (targetData && menuDesc) {
          menuDesc.innerHTML = targetData.menu_description;
        }
      });
    }
  }
};

// add content in global menu
addMenuFeature("/wp-json/options/menu/global-header", "uiu-global-header-menu");
// add content in departmentalmenu menu
addMenuFeature(
  "/wp-json/options/menu/departmental-header",
  "uiu-departmental-header-menu"
);

// fetch submenu extra item data end

//******************************* Accordion **************************************/

const accordionAll = document.querySelectorAll("#accordion");

const accordionBodyAll = document.querySelectorAll(".accordion-body");

if (accordionAll) {
  accordionAll.forEach((accordion) => {
    const accordionBtn = accordion.querySelector(".accordion-btn");
    const accordionBody = accordion.querySelector(".accordion-body");

    accordionBtn.addEventListener("click", () => {
      accordionBody.classList.toggle("show");

      accordionBodyAll.forEach((accordion) => {
        if (accordionBody !== accordion) {
          accordion.classList.remove("show");
        }
      });
    });
  });
}

// const buttons = document.querySelectorAll("[data-carousel-button]")

// ********************************  Custom Banner Slider ******************************/

document.querySelectorAll("[data-banner-slider-button]").forEach((button) => {
  button.addEventListener("click", () => {
    const offset = button.dataset.carouselButton === "next" ? 1 : -1;
    const slides = button
      .closest("[data-banner-slider]")
      .querySelector("[data-slides]");

    const activeSlide = slides.querySelector("[data-active]");
    let newIndex = [...slides.children].indexOf(activeSlide) + offset;
    if (newIndex < 0) newIndex = slides.children.length - 1;
    if (newIndex >= slides.children.length) newIndex = 0;

    slides.children[newIndex].dataset.active = true;
    delete activeSlide.dataset.active;
  });
});

setInterval(function () {
  if (document.querySelector(".carousel-button.next"))
    document.querySelector(".carousel-button.next").click();
}, 5000);

//****************************** Custom Faculty Carousel - home page ********************/

let totalDivs = document.querySelectorAll(
  "#faculty-carousel > .profile-carousel > .car-item"
).length;
let screenWidth = Math.max(
  document.documentElement.clientWidth || 0,
  window.innerWidth || 0
);
let totalWidth = totalDivs * 340;
let extraWidth = screenWidth - totalWidth;
let scrolled = 0;

function scrollToNext() {
  scrolled -= 345;
  let moveX = "";
  if (scrolled <= extraWidth - 400) {
    scrolled = 0;
  }

  moveX = scrolled.toString() + "px";
  //console.log(moveX, (-1*extraWidth), screenWidth, totalWidth, totalDivs)
  document.querySelectorAll(
    "#faculty-carousel > .profile-carousel"
  )[0].style.left = moveX;
}

function scrollToPrev() {
  scrolled = scrolled + 345;
  let moveX = "";
  if (scrolled > 340) {
    scrolled = extraWidth - 50;
  }

  moveX = scrolled.toString() + "px";
  //console.log(scrolled, moveX, (extraWidth), screenWidth, totalWidth, totalDivs)
  document.querySelectorAll(
    "#faculty-carousel > .profile-carousel"
  )[0].style.left = moveX;
}

//************************** Custom Alumni Carousel - home page ***********************/

let totalDivsAl = document.querySelectorAll(
  "#alumni-carousel > .profile-carousel > .car-item"
).length;
let screenWidthAl = Math.max(
  document.documentElement.clientWidth || 0,
  window.innerWidth || 0
);
let totalWidthAl = totalDivsAl * 340;
let extraWidthAl = screenWidthAl - totalWidthAl;
let scrolledAl = 0;

function scrollToNextAl() {
  scrolledAl -= 340;
  let moveXAl = "";
  if (scrolledAl <= extraWidthAl - 400) {
    scrolledAl = 0;
  }

  moveXAl = scrolledAl.toString() + "px";

  document.querySelectorAll(
    "#alumni-carousel > .profile-carousel"
  )[0].style.left = moveXAl;
}

function scrollToPrevAl() {
  scrolledAl = scrolledAl + 340;
  let moveXAl = "";
  if (scrolledAl > 340) {
    scrolledAl = extraWidthAl - 50;
  }

  moveXAl = scrolledAl.toString() + "px";
  document.querySelectorAll(
    "#alumni-carousel > .profile-carousel"
  )[0].style.left = moveXAl;
}

//*********************** Faculty Members Slider - home page *************************/

var swiper = new Swiper(".facultyMembersSlider", {
  slidesPerView: 4,
  spaceBetween: 30,
  breakpoints: {
    0: {
      slidesPerView: 1,
    },
    576: {
      slidesPerView: 2,
    },
    992: {
      slidesPerView: 5,
    },
  },
  navigation: {
    nextEl: ".faculty-btn-next",
    prevEl: ".faculty-btn-prev",
  },
});

//***************************** Hero slider - home page *******************************/

var swiper = new Swiper(".heroSlider", {
  spaceBetween: 0,
  effect: "fade",
  centeredSlides: true,
  loop: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

//************************* Recognition Slider - home page ***************************/

const recognitionSlider = new Swiper(".recognitionSlider", {
  loop: true,
  slidesPerView: 1,
  spaceBetween: 50,
  autoplay: {
    delay: 2400,
    disableOnInteraction: false,
  },
  breakpoints: {
    0: {
      slidesPerView: 1,
    },
    576: {
      slidesPerView: 2,
    },
    992: {
      slidesPerView: 4,
    },
    1200: {
      slidesPerView: 4,
    },
  },
  navigation: {
    nextEl: ".recognitionSlider-button-next",
    prevEl: ".recognitionSlider-button-prev",
  },
});

//************************** Departmental News Slider - home page ***********************/

var swiper = new Swiper(".departmentalNews", {
  direction: "vertical",
  slidesPerView: 2,
  spaceBetween: 30,
  loop: true,
  autoplay: true,
  autoplay: {
    delay: 3500,
    disableOnInteraction: false,
  },
  // breakpoints: {
  //   0: {
  //     slidesPerView: 1,

  //   },
  //   576: {
  //     slidesPerView: 3,
  //   },
  //   992: {
  //     slidesPerView: 4,

  //   },
  // },
  navigation: {
    nextEl: ".news-btn-next",
    prevEl: ".news-btn-prev",
  },
});

//*************************** Faculty Profile - faculty single page *****************************/

const facultyProfile = document.querySelector("body.single-faculty");

if (facultyProfile) {
  window.addEventListener("resize", showSidebarOptions);

  const biosTitle = document.querySelectorAll("h2.m-text");
  const list = document.querySelector("ul.profile-choices");
  const bios = document.querySelectorAll(".desc-block");

  if (window.innerWidth < 600) {
    bios.forEach((el) => el.classList.remove(".desc-block-hidden"));
  } else {
    biosTitle.forEach((el, index) => {
      console.log(el.textContent);
      let text =
        '<li onclick="displaydetails(' +
        index +
        ')"><a >' +
        el.textContent +
        "</a></li>";
      list.insertAdjacentHTML("beforeend", text);
    });

    bios.forEach((el) => el.classList.add("desc-block-hidden"));
    bios[0].classList.remove("desc-block-hidden");

    let listItem = document.querySelectorAll("ul.profile-choices>li");
    listItem[0].classList.add("desc-active");
  }

  function displaydetails(i) {
    bios.forEach((el) => el.classList.add("desc-block-hidden"));
    bios[i].classList.remove("desc-block-hidden");

    let listItem = document.querySelectorAll("ul.profile-choices>li");
    listItem.forEach((el) => el.classList.remove("desc-active"));
    listItem[i].classList.add("desc-active");
  }

  function showSidebarOptions() {
    console.log(window.innerWidth);
    let windowX = window.matchMedia("(max-width: 600px)");
    if (windowX.matches) {
      bios.forEach((el) => el.classList.remove(".desc-block-hidden"));
    } else {
      bios.forEach((el) => el.classList.add("desc-block-hidden"));
      bios[0].classList.remove("desc-block-hidden");
    }
  }
}

//************************************ Utilities ****************************/

// Color Picker
const colorPicker = document.querySelector(".pickers");
if (colorPicker) {
  const pickr = Pickr.create({
    el: ".color-picker",
    theme: "nano",

    swatches: [
      "rgba(244, 67, 54, 1)",
      "rgba(233, 30, 99, 0.95)",
      "rgba(156, 39, 176, 0.9)",
      "rgba(103, 58, 183, 0.85)",
      "rgba(63, 81, 181, 0.8)",
      "rgba(33, 150, 243, 0.75)",
      "rgba(3, 169, 244, 0.7)",
      "rgba(0, 188, 212, 0.7)",
      "rgba(0, 150, 136, 0.75)",
      "rgba(76, 175, 80, 0.8)",
      "rgba(139, 195, 74, 0.85)",
      "rgba(205, 220, 57, 0.9)",
      "rgba(255, 235, 59, 0.95)",
      "rgba(255, 193, 7, 1)",
    ],

    components: {
      // Main components
      preview: true,
      opacity: true,
      hue: true,

      // Input / output Options
      interaction: {
        hex: true,
        rgba: false,
        hsla: false,
        hsva: false,
        cmyk: false,
        input: true,
        clear: true,
        save: true,
      },
    },
  });

  pickr.on("change", (...args) => {
    let color = args[0].toHEXA();
    console.log(args);
    console.log(color.toString());

    const buttons = document.getElementsByClassName("primary-c");
    for (let i = 0; i < buttons.length; i++) {
      buttons[i].style.backgroundColor = color.toString();
      buttons[i].addEventListener("mouseenter", (e) => {
        buttons[i].style.backgroundColor = "#F68B1F";
      });

      buttons[i].addEventListener("mouseleave", (e) => {
        buttons[i].style.backgroundColor = color.toString();
      });
    }
  });
}

// scroll responsive
window.onscroll = function () {
  let navbar = document.querySelector("#navbar");
  if (window.scrollY > 300) {
    if (navbar) navbar.classList.add("scroll");
  } else {
    if (navbar) navbar.classList.remove("scroll");
  }
};

//for NAV
function openNav() {
  document.getElementById("myNav").style.height = "100%";
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}

function openSearch() {
  document.getElementById("search-modal").style.height = "100%";
  console.log("search opened");
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeSearch() {
  document.getElementById("search-modal").style.height = "0%";
}