accre-website/index.js at main · stephnic813/accre-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/* Execute on start */
const onStart = () => {
  checkIsInHome();
  goBackTopBtn.addEventListener('click',() => {
    setTimeout(() => {window.scrollTo(0, 0);}, 200)
  });
};

/* Determine if current page is home page or not */
const  checkIsInHome = () => {
  if (!headerHome) {
    enableGoBackToTop();
    return;
  }
  window.addEventListener("scroll", scrollFunction);
  headerArrowBtn.addEventListener("click", () => {window.scrollTo(0, 0.7);});
};


/* Collapse launch pg to header */
const headerHome = document.querySelector("header.header-home");
const headerArrow = document.querySelector(".home-arrow-down");
const headerArrowBtn = headerArrow.parentElement;
const headerImages = document.querySelector(".launch-main-images");
const headerWelcomeMsg = document.querySelector(".launch-main-welcome");
const headerTitle = document.querySelector("header.header-home .launch-main-title");
const headerCourse = document.querySelector("header.header-home .launch-main-course");
const headerQuote = document.querySelector("header.header-home .launch-main-quote");

const scrollFunction = () => {
  if (scrollY > 0.7 && headerHome) {
    headerHome.style.height = "20vh";
    headerHome.style.flexDirection = "row";
    headerArrow.style.visibility = "hidden";
    headerArrowBtn.style.visibility = "hidden";
    hamburgerBtn.style.alignSelf = "center";
    headerImages.style.display = "none";
    headerWelcomeMsg.style.display = "none";
    headerTitle.style.fontSize = "1.5em";
    headerCourse.style.fontSize = "1.25em";
    headerQuote.style.fontSize = "1em";
    setTimeout(enableGoBackToTop, 500);
  }
  /* NOTE: Code to full screen header (launch page) */
  // else if (scrollY > 5 && headerHome) {
    //   if (headerHome) headerHome.style.height = "100vh";
    //   if (headerHome) headerHome.style.flexDirection = "column";
    //   if (headerArrow) headerArrow.style.visibility = "visible";
    // headerArrow.parentElement.tabIndex = 0;
    // headerArrow.parentElement.disabled = "false";
    // hamburgerBtn.style.alignSelf = "start";
  //   if (headerImages) headerImages.style.display = "flex";
  //   if (headerWelcomeMsg) headerWelcomeMsg.style.display = "block";
  //   if (headerTitle) headerTitle.style.fontSize = "3em";
  //   if (headerCourse) headerCourse.style.fontSize = "2.6em";
  //   if (headerQuote) headerQuote.style.fontSize = "2em";
  // }
};

/* Show or collapse sidebar (nav) */
const nav = document.querySelector("nav");
const hamburgerBtn = document.querySelector("header > button:first-child");

document.addEventListener("click", (event) => {
  if (hamburgerBtn.contains(event.target) ||
      nav.contains(event.target)) {
    showNav();
  }
  else if (nav.classList.contains("nav-slide-in")) {
    collapseNav();
  }
});

const showNav = () => {
  nav.classList.add("nav-slide-in");
  nav.classList.remove("nav-slide-out");
};

const collapseNav = () => {
  nav.classList.add("nav-slide-out");
  nav.classList.remove("nav-slide-in");
};


/* Go back to top */
const goBackTopBtn = document.querySelector(".go-back-top-btn");
/* Start listening to scroll height to show go to top btn */
const enableGoBackToTop = () => {
  checkScrollHeight();
  window.addEventListener("scroll", checkScrollHeight);
};

/* Show or hide go to top btn depending on scroll height */
const checkScrollHeight = () => {
  let isShown = goBackTopBtn.classList.contains("show");
  let scrollHeight = window.scrollY;

  if (scrollHeight > 150 && !isShown) {
    goBackTopBtn.classList.add("show");
    goBackTopBtn.classList.remove("hide");
  }
  else if (scrollHeight <= 150 && isShown) {
    goBackTopBtn.classList.add("hide");
    goBackTopBtn.classList.remove("show");
  }
};


onStart();