fix eslint errors

Author: Jon M

.eslintignore

@@ -14,6 +14,21 @@ web/sites/**/libraries/
 # E2E tests
 e2e/
 
+# Generated files
+local/files/
+local/private/
+
+# Docker/Infrastructure files
+local/docker-compose.yaml
+docker/
+
+# Drupal default config files
+web/sites/default/default.services.yml
+
+# Theme config files (YAML with single quotes - valid Drupal style)
+web/themes/**/*.yml
+web/themes/**/*.yaml
+
 # Other
 *.min.js
 *.bundle.js

.eslintrc.json

@@ -17,6 +17,10 @@
     "drupalTranslations": true,
     "jQuery": true,
     "umami": true
+  },
+  "rules": {
+    "no-console": "warn",
+    "no-use-before-define": ["error", { "functions": false, "classes": true, "variables": true }]
   }
 }
 

web/themes/interledger/js/scripts.js

@@ -1,26 +1,13 @@
 // Site navigation CSS classes
-const siteLinksWrapper = document.querySelector("[data-nav-wrapper]");
-const wideNavMinWidth = window.matchMedia("(min-width: 1160px)");
-handleNavDisplayStyles(wideNavMinWidth);
-wideNavMinWidth.addEventListener("change", handleNavDisplayStyles);
-
-const siteNavToggle = document.getElementById("siteNavToggle");
-const menuIcon = document.getElementById("menuIcon");
-
-if (document.contains(siteNavToggle)) {
-  siteNavToggle.addEventListener("click", handleMobileNavToggle, false);
-}
-
-function handleMobileNavToggle(event) {
-  siteLinksWrapper.classList.toggle("offscreen");
-  if (siteLinksWrapper.getAttribute("class").includes("offscreen")) {
-    menuIcon.classList.remove("open");
-  } else {
-    menuIcon.classList.add("open");
-  }
+function flashPrevention(element) {
+  element.setAttribute("style", "display:none");
+  setTimeout(() => {
+    element.removeAttribute("style");
+  }, 10);
 }
 
 function handleNavDisplayStyles(event) {
+  const siteLinksWrapper = document.querySelector("[data-nav-wrapper]");
   if (event.matches) {
     siteLinksWrapper.classList.remove("offscreen");
   } else {
@@ -31,26 +18,60 @@ function handleNavDisplayStyles(event) {
   }
 }
 
-function flashPrevention(element) {
-  element.setAttribute("style", "display:none");
-  setTimeout(() => {
-    element.removeAttribute("style");
-  }, 10);
+function handleMobileNavToggle() {
+  const siteLinksWrapper = document.querySelector("[data-nav-wrapper]");
+  const menuIcon = document.getElementById("menuIcon");
+  siteLinksWrapper.classList.toggle("offscreen");
+  if (siteLinksWrapper.getAttribute("class").includes("offscreen")) {
+    menuIcon.classList.remove("open");
+  } else {
+    menuIcon.classList.add("open");
+  }
+}
+
+const wideNavMinWidth = window.matchMedia("(min-width: 1160px)");
+handleNavDisplayStyles(wideNavMinWidth);
+wideNavMinWidth.addEventListener("change", handleNavDisplayStyles);
+
+const siteNavToggle = document.getElementById("siteNavToggle");
+
+if (document.contains(siteNavToggle)) {
+  siteNavToggle.addEventListener("click", handleMobileNavToggle, false);
 }
 
 // Site sub-navigation toggle
+function resetSubMenus(subLinks) {
+  subLinks.forEach((subLink) => {
+    subLink.setAttribute("aria-expanded", "false");
+  });
+}
+
+function isClickOutside(event, nodeList) {
+  let clickedInsideTarget = false;
+  Array.from(nodeList).forEach((element) => {
+    if (element.contains(event.target)) {
+      clickedInsideTarget = true;
+    }
+  });
+  return !clickedInsideTarget;
+}
+
 const siteNav = document.querySelector(".site-nav__links");
 
 if (document.contains(siteNav)) {
   const subLinks = document.querySelectorAll(".has-submenu > a");
 
   subLinks.forEach((subLink) => {
     subLink.setAttribute("aria-expanded", false);
-    subLink.addEventListener("click", function (event) {
+    subLink.addEventListener("click", function handleSubLinkClick(event) {
       const clickedSubLink = event.target;
-      umami.track(clickedSubLink.dataset.linkLabel);
+      // eslint-disable-next-line no-undef
+      if (typeof umami !== "undefined" && umami.track) {
+        // eslint-disable-next-line no-undef
+        umami.track(clickedSubLink.dataset.linkLabel);
+      }
       const allSubLinks = Array.from(subLinks);
-      const notClickedLinks = allSubLinks.filter(function (otherLink) {
+      const notClickedLinks = allSubLinks.filter((otherLink) => {
         return otherLink !== clickedSubLink;
       });
       notClickedLinks.forEach((link) => {
@@ -66,42 +87,25 @@ if (document.contains(siteNav)) {
     });
   });
 
-  siteNav.addEventListener("keydown", function (event) {
+  siteNav.addEventListener("keydown", function handleKeydown(event) {
     if (event.key === "Escape") {
-      resetSubMenus();
+      resetSubMenus(subLinks);
     }
   });
 
-  document.addEventListener("click", function (event) {
+  document.addEventListener("click", function handleDocumentClick(event) {
     if (isClickOutside(event, subLinks)) {
-      resetSubMenus();
+      resetSubMenus(subLinks);
     }
   });
-
-  function resetSubMenus() {
-    subLinks.forEach((subLink) => {
-      subLink.setAttribute("aria-expanded", "false");
-    });
-  }
-}
-
-function isClickOutside(event, nodeList) {
-  let clickedInsideTarget = false;
-  Array.from(nodeList).forEach(function (element) {
-    if (element.contains(event.target)) {
-      clickedInsideTarget = true;
-    }
-  });
-  return !clickedInsideTarget;
 }
 
 // Hero video controls
 const videoToggle = document.getElementById("hero__video-toggle");
 
 if (document.contains(videoToggle)) {
   const heroVideo = document.querySelector(".hero video");
-  videoToggle.addEventListener("click", function () {
-    console.log(this.className);
+  videoToggle.addEventListener("click", function handleVideoToggle() {
     if (videoToggle.className === "is-playing") {
       heroVideo.pause();
       this.classList.toggle("is-playing");
@@ -120,7 +124,7 @@ if (document.contains(faq)) {
   buttons.forEach((button) => {
     button.setAttribute("aria-expanded", false);
 
-    button.addEventListener("click", function () {
+    button.addEventListener("click", function handleFaqToggle() {
       if (this.getAttribute("aria-expanded") === "true") {
         this.setAttribute("aria-expanded", "false");
       } else {