Merge pull request #12 from tahoma2d/js-improvments

🛠️ Refactor: Remove jQuery
tahoma2d · Oct 9, 2023 · d27dfc5 · d27dfc5
2 parents 0d1e6f7 + 877a80d
commit d27dfc5
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 113 deletions.
diff --git a/download.html b/download.html
@@ -26,7 +26,6 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
     <link rel="stylesheet" type="text/css" href="./styles.css" />
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="./js/current_page.js"></script>
     <script src="./js/header.js"></script>
     <script src="./js/download_links.js"></script>
@@ -54,7 +53,7 @@
               <li><a href="./index.html#faq">FAQ</a></li>
             </ul>
           </li>
-          <li><a href="download.html">Download</a></li>
+          <li><a class="activable-link" href="./download.html">Download</a></li>
           <li><a href="./whats_new.html">What's New</a></li>
           <li>
             <input type="radio" name="dropm" id="contribute" />

diff --git a/index.html b/index.html
@@ -26,7 +26,6 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1/font/bootstrap-icons.min.css" />
     <link rel="stylesheet" type="text/css" href="styles.css" />
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="./js/top.js"></script>
     <script src="./js/detect_os.js"></script>
     <script src="./js/current_page.js"></script>
@@ -50,10 +49,10 @@
             <input type="radio" name="dropm" id="home" />
             <label for="home">Home <i class="bi bi-caret-down-fill menu_icon"></i></label>
             <ul class="home">
-              <li><a href="#features">Features</a></li>
-              <li><a href="#system">System Requirements</a></li>
-              <li><a href="#compare">Tahoma2D vs. OpenToonz</a></li>
-              <li><a href="#faq">FAQ</a></li>
+              <li><a class="activable-link" href="#features">Features</a></li>
+              <li><a class="activable-link" href="#system">System Requirements</a></li>
+              <li><a class="activable-link" href="#compare">Tahoma2D vs. OpenToonz</a></li>
+              <li><a class="activable-link" href="#faq">FAQ</a></li>
             </ul>
           </li>
           <li><a href="./download.html">Download</a></li>

diff --git a/js/current_page.js b/js/current_page.js
@@ -1,18 +1,26 @@
-  $(function() {
-      $("[href]").each(function() {
-          if (this.href == window.location.href) {
-              $(this).addClass("current_page");
-          }
-      });
-  });
+function checkForActiveNavLink() {
+  const allPossibleLinks = document.querySelectorAll(".activable-link");
+
+  const currentHref = window.location.href;
+
+  allPossibleLinks.forEach((link) => {
+    let linkHref = link.getAttribute("href");
 
-  $(window).on('hashchange', function() {
+    if (linkHref.startsWith("./")) {
+      linkHref = linkHref.slice(1);
+    }
+
+    const activeLinkClassName = "current-page";
+
+    if (currentHref.includes(linkHref)) {
+      link.classList.add(activeLinkClassName);
+    } else {
+      if (link.classList.contains(activeLinkClassName)) {
+        link.classList.remove(activeLinkClassName);
+      }
+    }
+  });
+}
 
-      $("[href]").each(function() {
-          if (this.href == window.location.href) {
-              $(this).addClass("current_page");
-          } else {
-              $(this).removeClass("current_page");
-          }
-      });
-  });
+window.addEventListener("load", checkForActiveNavLink);
+window.addEventListener("hashchange", checkForActiveNavLink);
diff --git a/js/detect_os.js b/js/detect_os.js
@@ -1,53 +1,34 @@
-$(function() {
-
-    var button = document.getElementById("home_download_button");
-    var os_name = "Download";
-    var os_link = "download/official_releases.html"
-
-    function fetchData(assetsNumber) {
-        fetch("https://api.github.com/repos/tahoma2d/tahoma2d/releases/latest")
-            .then(response => response.json())
-            .then(data => button.href = data.assets[assetsNumber].browser_download_url)
-    }
-
-    if (navigator.userAgent.indexOf("Win") != -1) {
-        fetchData(3)
-
-        os_name =
-            "Download For Windows";
-
-
-
-    } else if (navigator.userAgent.indexOf("like Mac") != -1) {
-        os_name =
-            "Download";
-        button.href = os_link;
-
-
-
-    } else if (navigator.userAgent.indexOf("Mac") != -1) {
-        fetchData(2)
-
-        os_name =
-            "Download For macOS";
-
-
-
-    } else if (navigator.userAgent.indexOf("Android") != -1) {
-        os_name =
-            "Download";
-        button.href = os_link;
-
-
-
-    } else if (navigator.userAgent.indexOf("Linux") != -1) {
-        fetchData(1)
-
-        os_name =
-            "Download For Linux";
-
-    }
-
-    button.text = os_name;
-
-});
+function checkUserOS() {
+  var button = document.getElementById("home_download_button");
+  var osName = "Download";
+  var osLink = "download/official_releases.html";
+
+  function fetchData(assetsNumber) {
+    fetch("https://api.github.com/repos/tahoma2d/tahoma2d/releases/latest")
+      .then((response) => response.json())
+      .then(
+        (data) => (button.href = data.assets[assetsNumber].browser_download_url)
+      );
+  }
+
+  if (navigator.userAgent.indexOf("Win") != -1) {
+    fetchData(3);
+    osName = "Download For Windows";
+  } else if (navigator.userAgent.indexOf("like Mac") != -1) {
+    osName = "Download";
+    button.href = osLink;
+  } else if (navigator.userAgent.indexOf("Mac") != -1) {
+    fetchData(2);
+    osName = "Download For macOS";
+  } else if (navigator.userAgent.indexOf("Android") != -1) {
+    osName = "Download";
+    button.href = osLink;
+  } else if (navigator.userAgent.indexOf("Linux") != -1) {
+    fetchData(1);
+    osName = "Download For Linux";
+  }
+
+  button.text = osName;
+}
+
+window.addEventListener("load", checkUserOS);
diff --git a/js/download_links.js b/js/download_links.js
@@ -86,17 +86,19 @@ window.onload = function changeDownloadLinks() {
 
   // ==================================================
   // Get download links for the beta version
-  fetch(betaLink)
-    .then((response) => response.json())
-    .then((data) => {
-      // We combine the tag name and creation date to get something like "v1.3 - 2022".
-      betaReleaseDateElement.innerHTML = data.tag_name + " - " + data.created_at;
-      betaReleaseDateElement.href = data.html_url;
-
-      betaWindowsElement.href = getCorrectLinkBasedOnOS(data.assets, OSNames.Windows);
-      betaMacOSElement.href = getCorrectLinkBasedOnOS(data.assets, OSNames.macOS);
-      betaLinuxElement.href = getCorrectLinkBasedOnOS(data.assets, OSNames.Linux);
+  if (betaReleaseDateElement !== null) {
+    fetch(betaLink)
+      .then((response) => response.json())
+      .then((data) => {
+        // We combine the tag name and creation date to get something like "v1.3 - 2022".
+        betaReleaseDateElement.innerHTML = data.tag_name + " - " + data.created_at;
+        betaReleaseDateElement.href = data.html_url;
+
+        betaWindowsElement.href = getCorrectLinkBasedOnOS(data.assets, OSNames.Windows);
+        betaMacOSElement.href = getCorrectLinkBasedOnOS(data.assets, OSNames.macOS);
+        betaLinuxElement.href = getCorrectLinkBasedOnOS(data.assets, OSNames.Linux);
     });
+  }
   // ==================================================
 
   // ==================================================

diff --git a/js/header.js b/js/header.js
@@ -1,16 +1,13 @@
 function stickyHeader() {
-
-    var headerElement = document.querySelector("header")
-
-    if (document.documentElement.scrollTop > 50) {
-        headerElement.classList.add("sticky_header")
-
-    } else {
-        headerElement.classList.remove("sticky_header")
-    }
-
+  const headerElement = document.querySelector("header");
+  const stickyHeaderClassName = "sticky_header";
+
+  if (document.documentElement.scrollTop > 50) {
+    headerElement.classList.add(stickyHeaderClassName);
+  } else {
+    headerElement.classList.remove(stickyHeaderClassName);
+  }
 }
 
-
-window.addEventListener('load', stickyHeader)
-window.addEventListener('scroll', stickyHeader)
+window.addEventListener("load", stickyHeader);
+window.addEventListener("scroll", stickyHeader);
diff --git a/js/top.js b/js/top.js
@@ -1,14 +1,15 @@
-window.onscroll = function topButton() {
-    if (document.documentElement.scrollTop > 100) {
-        document.querySelector(".top").classList.add("top_shown")
-
-
-    } else {
-        document.querySelector(".top").classList.remove("top_shown")
-    }
-
+function checkScrollFromTop() {
+  const topDisplayClassName = "top_shown";
+
+  if (document.documentElement.scrollTop > 100) {
+    document.querySelector(".top").classList.add(topDisplayClassName);
+  } else {
+    document.querySelector(".top").classList.remove(topDisplayClassName);
+  }
 }
 
 function scrollToTop() {
-    window.scrollTo({ top: 0, behavier: "smooth" })
-}
+  window.scrollTo({ top: 0, behavier: "smooth" });
+}
+
+window.addEventListener("scroll", checkScrollFromTop);
diff --git a/styles.css b/styles.css
@@ -87,7 +87,7 @@ nav ul input {
   font-style: italic;
 }
 
-.current_page::after {
+.activable-link.current-page::after {
   width: 100% !important;
   height: 0.027em !important;
   border-radius: 5em !important;

diff --git a/whats_new.html b/whats_new.html
@@ -26,7 +26,6 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
     <link rel="stylesheet" type="text/css" href="styles.css" />
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="./js/top.js"></script>
     <script src="./js/header.js"></script>
     <script src="./js/detect_os.js"></script>
@@ -56,7 +55,7 @@
             </ul>
           </li>
           <li><a href="./download.html">Download</a></li>
-          <li><a href="./whats_new.html">What's New</a></li>
+          <li><a class="activable-link" href="./whats_new.html">What's New</a></li>
           <li>
             <input type="radio" name="dropm" id="contribute" />
             <label for="contribute">Contribute <i class="bi bi-caret-down-fill menu_icon"></i></label>