From c704bd299fffe979a72f7ffe335d5e3a26ef30f7 Mon Sep 17 00:00:00 2001
From: Catalina Oyaneder <cat2608@gmail.com>
Date: Wed, 12 Jun 2024 08:38:34 +0100
Subject: [PATCH] refactor: reorganise and clean up script structure in
 `details.html`

- Constants, variables, and functions are defined in a logical order
- Moved DOM-dependent functions inside the DOMContentLoaded event listener
- Event listeners init after DOM content is fully loaded
---
 infrastructure/code/template/details.html | 114 +++++++++++-----------
 1 file changed, 58 insertions(+), 56 deletions(-)

diff --git a/infrastructure/code/template/details.html b/infrastructure/code/template/details.html
index 9eeabf6c3..61eb2c3db 100644
--- a/infrastructure/code/template/details.html
+++ b/infrastructure/code/template/details.html
@@ -919,12 +919,12 @@ <h2>Fixed Code Examples</h2>
   <!-- Scripts -->
   <script nonce="${nonce}">
     /**
-   * Represents a single line change in a commit.
-   * @typedef {Object} ExampleLine
-   * @property {number} LineNumber  - The line number of the change.
-   * @property {string} Line        - The content of the line.
-   * @property {string} LineChange  - The type of change ('added' or 'removed').
-   */
+     * Represents a single line change in a commit.
+     * @typedef {Object} ExampleLine
+     * @property {number} LineNumber  - The line number of the change.
+     * @property {string} Line        - The content of the line.
+     * @property {string} LineChange  - The type of change ('added' or 'removed').
+     */
 
     /**
      * Represents a commit fix with detailed change lines.
@@ -935,30 +935,24 @@ <h2>Fixed Code Examples</h2>
      * @property {ExampleLine[]} ExampleLines - An array of line changes.
      */
 
+    // Constants for class and ID names
     const MAIN_TAB_NAV_SELECTOR = '.main-tabs-nav';
     const MAIN_TAB_ITEM_SELECTOR = '.main-tabs-nav .tab-item';
     const MAIN_TAB_CONTENT_SELECTOR = '.tab-container > .main-tab-content';
 
-    const EXAMPLE_COUNTER = document.getElementById('example-counter');
-    const EXAMPLE_TOP = document.getElementById('example-top');
-    const EXAMPLE_CONTENT = document.getElementById('example');
-    const EXAMPLE_PREVIOUS = document.getElementById('previous-example');
-    const EXAMPLE_NEXT = document.getElementById('next-example');
-    const EXAMPLE_REPO_LINK = document.getElementById('example-repo-link')
-    const EXAMPLE_REPO_ANCHOR = document.getElementById('example-repo-anchor');
-    const ALL_EXAMPLES_DETAIL = document.querySelectorAll('.example-detail');
-
-    let exampleCount = 0;
-
-    /** @type {ExampleCommitFix[]} */
-    const exampleCommitFixes = JSON.parse("{{.CommitFixes}}" || '[]')
+    const EXAMPLE_COUNTER = 'example-counter';
+    const EXAMPLE_PREVIOUS = 'previous-example';
+    const EXAMPLE_NEXT = 'next-example';
+    const EXAMPLE_REPO_ANCHOR = 'example-repo-anchor';
+    const ALL_EXAMPLES_DETAIL = '.example-detail';
 
+    // Utility functions
     const toggleIsSelectedClass = (elements, shouldToggle) => {
       elements.forEach(el => {
         // toggle(token, force) - force is a boolean value that determines whether the class should be added or removed.
         el.classList.toggle('is-selected', shouldToggle(el));
       });
-    }
+    };
 
     function toggleElement(element, toggle) {
       if (!element) {
@@ -974,42 +968,52 @@ <h2>Fixed Code Examples</h2>
       }
     }
 
-    // == Fixed Code Examples Component ==
-    function showCurrentExample() {
-      ALL_EXAMPLES_DETAIL.forEach((example, idx) => {
-        if (idx === exampleCount) {
-          example.classList.remove('hidden');
-        } else {
-          example.classList.add('hidden');
-        }
-      });
+    document.addEventListener('DOMContentLoaded', () => {
+      const exampleCounter = document.getElementById(EXAMPLE_COUNTER);
+      const examplePrevious = document.getElementById(EXAMPLE_PREVIOUS);
+      const exampleNext = document.getElementById(EXAMPLE_NEXT);
+      const exampleRepoAnchor = document.getElementById(EXAMPLE_REPO_ANCHOR);
+      const allExamplesDetail = document.querySelectorAll(ALL_EXAMPLES_DETAIL);
+      const mainTabLinks = document.querySelectorAll(MAIN_TAB_ITEM_SELECTOR);
+      const mainTabContents = document.querySelectorAll(MAIN_TAB_CONTENT_SELECTOR);
+      const mainTabNav = document.querySelector(MAIN_TAB_NAV_SELECTOR);
 
-      EXAMPLE_COUNTER.textContent = exampleCount + 1;
-      const repoName = exampleCommitFixes[exampleCount].RepoName;
-      const repoLink = exampleCommitFixes[exampleCount].RepoLink;
+      let exampleCount = 0;
 
-      EXAMPLE_REPO_ANCHOR.textContent = repoName;
-      EXAMPLE_REPO_ANCHOR.href = repoLink;
-    }
+      /** @type {ExampleCommitFix[]} */
+      const exampleCommitFixes = JSON.parse("{{.CommitFixes}}" || '[]');
+
+      // Functions dependent on the DOM
+      function showCurrentExample() {
+        allExamplesDetail.forEach((example, idx) => {
+          if (idx === exampleCount) {
+            example.classList.remove('hidden');
+          } else {
+            example.classList.add('hidden');
+          }
+        });
 
-    function previousExample() {
-      if (exampleCount > 0) {
-        exampleCount--;
-        showCurrentExample();
+        exampleCounter.textContent = exampleCount + 1;
+        const repoName = exampleCommitFixes[exampleCount].RepoName;
+        const repoLink = exampleCommitFixes[exampleCount].RepoLink;
+
+        exampleRepoAnchor.textContent = repoName;
+        exampleRepoAnchor.href = repoLink;
       }
-    }
 
-    function nextExample() {
-      if (exampleCount < exampleCommitFixes.length - 1) {
-        exampleCount++;
-        showCurrentExample();
+      function previousExample() {
+        if (exampleCount > 0) {
+          exampleCount--;
+          showCurrentExample();
+        }
       }
-    }
 
-    // Ensure the document is fully loaded before executing script to manipulate DOM.
-    document.addEventListener('DOMContentLoaded', () => {
-      const mainTabLinks = document.querySelectorAll(MAIN_TAB_ITEM_SELECTOR);
-      const mainTabContents = document.querySelectorAll(MAIN_TAB_CONTENT_SELECTOR);
+      function nextExample() {
+        if (exampleCount < exampleCommitFixes.length - 1) {
+          exampleCount++;
+          showCurrentExample();
+        }
+      }
 
       const onMainTabClicked = event => {
         const clickedTab = event.target.closest('.tab-item');
@@ -1022,17 +1026,15 @@ <h2>Fixed Code Examples</h2>
         toggleIsSelectedClass(mainTabContents, content => content.getAttribute('data-content') === selectedTab);
       };
 
-      // Event listeners for main
-      // TODO: move this into the HTML as an onclick
-      document.querySelector(MAIN_TAB_NAV_SELECTOR).addEventListener('click', onMainTabClicked);
+      // Event listeners
+      mainTabNav.addEventListener('click', onMainTabClicked);
+      examplePrevious.addEventListener('click', previousExample);
+      exampleNext.addEventListener('click', nextExample);
 
-      // Event listeners for example fixes
-      EXAMPLE_PREVIOUS.addEventListener('click', previousExample);
-      EXAMPLE_NEXT.addEventListener('click', nextExample);
+      // Initial function calls
       showCurrentExample();
     });
   </script>
-
   ${ideScript}
 </body>