uiu-cse/js/theme-settings.js

// const sidebar = document.querySelector('#sidebar')

window.onscroll = function () {
  let navbar = document.querySelector("nav#first-nav");
  let secondNav = document.querySelector("nav#second-nav");
  if (window.scrollY > 300) {
    if (secondNav) secondNav.classList.add("second-nav-active");
    navbar.classList.add("nav-resp");
  } else {
    if (secondNav) secondNav.classList.remove("second-nav-active");
    navbar.classList.remove("nav-resp");
  }
};

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

document.querySelectorAll("[data-carousel-button]").forEach((button) => {
  button.addEventListener("click", () => {
    const offset = button.dataset.carouselButton === "next" ? 1 : -1;
    const slides = button
      .closest("[data-carousel]")
      .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);

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

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

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

//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%";
}


//profile

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')


  }
}


// Simple example, see optional options for more configuration.
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();
    });
  }
});