Blogr/script.js at master · styn1s/Blogr · 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
document.addEventListener("DOMContentLoaded", function () {
  const connectBtn = document.querySelector(".nav__link");
  const burgerBtn = document.querySelector(".nav__burger-btn");
  const exitBtn = document.querySelector(".nav__exit-btn");
  const dropdownMenu = document.querySelector(".dropdown");

  const mobileMenu = document.querySelector(".mobile-menu");
  const mobileConnBtn = document.getElementById("mobile-connect-btn");
  const mobileDropdown = document.querySelector(".mobile-menu__dropdown");

  const arrowImage = connectBtn.querySelector(".nav__arrow");
  const mobileArrowImage = mobileConnBtn.querySelector(".nav__arrow");

  function hideMobileMenu() {
    toggleVisibility(mobileMenu, false);
    toggleVisibility(exitBtn, false);
    toggleVisibility(burgerBtn, true);
    toggleVisibility(mobileDropdown, false);
  }

  function showMobileMenu() {
    toggleVisibility(mobileMenu, true, "flex");
    toggleVisibility(exitBtn, true);
    toggleVisibility(burgerBtn, false);
  }

  function toggleMobileDropdown() {
    toggleVisibility(mobileDropdown);
    mobileArrowImage.classList.toggle("rotate-180");
  }

  function updateView() {
    const isDesktop = window.innerWidth > 1024;
    const isMobileMenuVisible = getComputedStyle(mobileMenu).display === "flex";

    toggleVisibility(burgerBtn, !isDesktop && !isMobileMenuVisible);
    toggleVisibility(exitBtn, !isDesktop && isMobileMenuVisible);
    toggleVisibility(mobileMenu, !isDesktop && isMobileMenuVisible, "flex");

    updateImages(isDesktop ? "desktop" : "mobile");
    updateBackground();
    updateHeading();
  }

  function toggleVisibility(element, isVisible = null, displayStyle = "block") {
    if (isVisible === null) {
      element.style.display =
        getComputedStyle(element).display === "none" ? displayStyle : "none";
    } else {
      element.style.display = isVisible ? displayStyle : "none";
    }
  }

  function updateImages(imageType) {
    updateImageSource(
      ".features-section__image",
      `./images/illustration-editor-${imageType}.svg`
    );
    updateImageSource(
      ".tools-section__image--laptop",
      `./images/illustration-laptop-${imageType}.svg`
    );
  }

  function updateImageSource(selector, path) {
    const image = document.querySelector(selector);
    if (image.src !== path) {
      image.src = path;
    }
  }

  function updateBackground() {
    const imageType = window.innerWidth <= 768 ? "mobile" : "desktop";
    updateImageSource(
      ".header__background",
      `./images/bg-pattern-intro-${imageType}.svg`
    );
  }

  function updateHeading() {
    const h1 = document.querySelector("h1");
    h1.innerHTML =
      window.innerWidth <= 533
        ? "A modern<br>publishing platform"
        : "A modern publishing platform";
  }

  connectBtn.addEventListener("click", function (event) {
    toggleVisibility(dropdownMenu);
    arrowImage.classList.toggle("rotate-180");
  });

  burgerBtn.addEventListener("click", showMobileMenu);
  exitBtn.addEventListener("click", hideMobileMenu);
  mobileConnBtn.addEventListener("click", toggleMobileDropdown);
  window.addEventListener("resize", updateView);

  // Initial update on page load
  updateView();
});