refactor: language switching and handling cta buttons and their ensui…

…ng behaviours (incl the modal/dialog) are now js modules. fixes #23 language switching should be reusable across all pages. we now detect, in main.js, whether we are on the homepage or not. if not, then we do not attach event listeners to elements (the cta buttons) that don't actually exists. thereby avoiding console errors that appear on those policy pages, which fixes #23
henrylin03 · Sep 10, 2024 · 6778261 · 6778261
1 parent 3906f4d
commit 6778261
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -28,6 +28,9 @@
   <meta property="og:image" content="./assets/branding.svg">
   <meta property="og:description"
     content="Join the waitlist for Intellex Academy, a web app that matches you with career mentors to better understand an industry, develop new and improve existing skills, and get that next job in the team, company, and industry you've been interested in. While the main site is being built, this page captures users' expressions of interest.">
+
+  <!-- link js -->
+  <script type="module" src="./js/main.js"></script>
 </head>
 
 <body>
@@ -117,7 +120,6 @@ <h1>
       src="https://docs.google.com/forms/d/e/1FAIpQLScIm03IfDkwEId4CVHcoOFZYia_HXLTSPLg6LVXtpsAPck-zg/viewform?embedded=true"></iframe>
   </dialog>
 
-  <script src="./js/script.js"></script>
 </body>
 
 </html>
diff --git a/js/enableCTAs.mjs b/js/enableCTAs.mjs
@@ -0,0 +1,22 @@
+const signupDialog = document.querySelector("dialog");
+const joinButton = document.querySelector("#join-waitlist");
+const emailButton = document.querySelector("#email");
+
+const closeDialog = (e) => {
+  if (e.target === signupDialog) signupDialog.close();
+};
+
+const sendEmail = () => {
+  const EMAIL_ADDRESS = "admin@intellex.academy";
+  const emailLink = `mailto:${EMAIL_ADDRESS}?subject=Pre-registration Enquiry`;
+
+  window.location.href = emailLink;
+};
+
+const enableCTAs = () => {
+  joinButton.addEventListener("click", () => signupDialog.showModal());
+  signupDialog.addEventListener("click", closeDialog);
+  emailButton.addEventListener("click", sendEmail);
+};
+
+export default enableCTAs;
diff --git a/js/script.js → js/enableLanguageSwitch.mjs b/js/script.js → js/enableLanguageSwitch.mjs
@@ -1,23 +1,8 @@
-const dialog = document.querySelector("dialog");
-const joinButton = document.querySelector("#join-waitlist");
-const emailButton = document.querySelector("#email");
 const switchLanguageButtons = document.querySelectorAll(
   ".switch-language-button"
 );
 
-// event handlers
-const closeDialog = (e) => {
-  if (e.target === dialog) dialog.close();
-};
-
-const sendEmail = () => {
-  const EMAIL_ADDRESS = "admin@intellex.academy";
-  const emailLink = `mailto:${EMAIL_ADDRESS}?subject=Pre-registration Enquiry`;
-
-  window.location.href = emailLink;
-};
-
-const switchLanguage = (e) => {
+const handleLanguageSwitch = (e) => {
   const selectedLanguage = e.target.dataset.language;
   const variableLanguageElements = {
     english: document.querySelectorAll("body [lang='en']"),
@@ -41,10 +26,9 @@ const switchLanguage = (e) => {
   }
 };
 
-// event listeners
-switchLanguageButtons.forEach((button) =>
-  button.addEventListener("click", switchLanguage)
-);
-joinButton.addEventListener("click", () => dialog.showModal());
-dialog.addEventListener("click", closeDialog);
-emailButton.addEventListener("click", sendEmail);
+const enableLanguageSwitch = () =>
+  switchLanguageButtons.forEach((button) =>
+    button.addEventListener("click", handleLanguageSwitch)
+  );
+
+export default enableLanguageSwitch;
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,8 @@
+import enableLanguageSwitch from "./enableLanguageSwitch.mjs";
+import enableCTAs from "./enableCTAs.mjs";
+
+const isHomepage = () => window.location.pathname === "/";
+
+if (isHomepage()) enableCTAs();
+
+enableLanguageSwitch();
diff --git a/privacy-policy.html b/privacy-policy.html
@@ -16,6 +16,9 @@
   <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png">
   <link rel="manifest" href="./assets/favicon/site.webmanifest">
   <title>Privacy Policy | Intellex</title>
+
+  <!-- link js -->
+  <script type="module" src="./js/main.js"></script>
 </head>
 
 <body>
@@ -402,8 +405,6 @@ <h2>联系我们</h2>
       </ul>
     </div>
   </footer>
-
-  <script src="./js/script.js"></script>
 </body>
 
 </html>
diff --git a/terms-and-conditions.html b/terms-and-conditions.html
@@ -16,6 +16,9 @@
   <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png">
   <link rel="manifest" href="./assets/favicon/site.webmanifest">
   <title>Terms & Conditions | Intellex</title>
+
+  <!-- link js -->
+  <script type="module" src="./js/main.js"></script>
 </head>
 
 <body>
@@ -443,8 +446,6 @@ <h3>管辖权和适用法律</h3>
       </ul>
     </div>
   </footer>
-
-  <script src="./js/script.js"></script>
 </body>
 
 </html>