Protonyx-Vector-Download/script.js at main · Matthew-Goley/Protonyx-Vector-Download · 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
111
112
113
114
115
// ─────────────────────────────────────────────
//  Hero Video Rotation  (landing page)
// ─────────────────────────────────────────────
const heroVideoSources = [
  "assets/video/1vector_demo.mp4",
  "assets/video/2city.mp4",
  "assets/video/3codingdemo.mp4",
  "assets/video/4stockmarket.mp4",
  "assets/video/5codingdemo.mp4"
];

let currentHeroVideoIndex = 0;
const heroVideoElement = document.getElementById("heroVideo");

if (heroVideoElement) {
  setInterval(() => {
    currentHeroVideoIndex = (currentHeroVideoIndex + 1) % heroVideoSources.length;
    heroVideoElement.src = heroVideoSources[currentHeroVideoIndex];
    heroVideoElement.play();
  }, 4000);
}


// ─────────────────────────────────────────────
//  Navbar Logo  (all pages)
// ─────────────────────────────────────────────
const navbarLogo = document.getElementById("navbarLogo");
const whiteLogo = "/assets/company/protonyx_full_white.png";
const blackLogo = "/assets/company/protonyx_full_black.png";

let currentLogo = null;

if (navbarLogo) {
  new Image().src = whiteLogo;
  new Image().src = blackLogo;

  const darkHeroSection = document.querySelector(".hero, .vector-hero, .products-hero");

  function shouldLogoBeWhite() {
    if (!darkHeroSection) return false;
    return window.scrollY < darkHeroSection.offsetHeight - 80;
  }

  function setLogo(isWhite, animate) {
    const target = isWhite ? "white" : "black";
    if (target === currentLogo) return;

    if (animate) {
      navbarLogo.style.opacity = 0;
      setTimeout(() => {
        navbarLogo.src = isWhite ? whiteLogo : blackLogo;
        currentLogo = target;
        navbarLogo.style.opacity = 1;
      }, 200);
    } else {
      navbarLogo.src = isWhite ? whiteLogo : blackLogo;
      currentLogo = target;
    }
  }

  setLogo(shouldLogoBeWhite(), false);
  window.addEventListener("scroll", () => setLogo(shouldLogoBeWhite(), true));
}


// ─────────────────────────────────────────────
//  Product Card Video Preview  (home + products pages)
// ─────────────────────────────────────────────
const vectorCard = document.querySelector(".vector-card");

if (vectorCard) {
  const vectorVideo = vectorCard.querySelector(".preview-video");

  vectorCard.addEventListener("mouseenter", () => {
    vectorVideo.currentTime = 0;
    vectorVideo.play();
  });

  vectorCard.addEventListener("mouseleave", () => {
    vectorVideo.pause();
    vectorVideo.currentTime = 0;
  });
}


// ─────────────────────────────────────────────
//  Menu Overlay  (all pages)
// ─────────────────────────────────────────────
const menuButton = document.querySelector(".navbar-menu-button");
const menuOverlay = document.getElementById("menuOverlay");
const menuCloseButton = document.getElementById("menuCloseButton");
const navbar = document.querySelector(".navbar");

function openMenu() {
  menuOverlay.classList.remove("open");
  void menuOverlay.offsetWidth; // force reflow so transitions restart
  menuOverlay.classList.add("open");
  document.body.style.overflow = "hidden";
  if (navbar) navbar.style.opacity = 0;
}

function closeMenu() {
  menuOverlay.classList.remove("open");
  document.body.style.overflow = "";
  if (navbar) navbar.style.opacity = 1;
}

if (menuButton && menuOverlay && menuCloseButton) {
  menuButton.addEventListener("click", openMenu);
  menuCloseButton.addEventListener("click", closeMenu);

  menuOverlay.addEventListener("click", (e) => {
    if (e.target === menuOverlay) closeMenu();
  });
}