From 12093d0551b88c3156a92baf3b3f852dde7864ba Mon Sep 17 00:00:00 2001
From: Adam Iannazzone <adam.iannazzone@gmail.com>
Date: Tue, 23 Apr 2024 18:52:54 -0400
Subject: [PATCH] Performance improvements to features selector

---
 css/style.css       | 15 ++++++---------
 features.html       |  3 +--
 scripts/features.js | 30 ++++++++++++++----------------
 3 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/css/style.css b/css/style.css
index e243697..4f61b1f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -73,6 +73,11 @@ footer {
     padding: 0.5rem;
     cursor: pointer;
     background: #333;
+    border: 1px transparent solid;
+}
+
+#active-feature-item {
+    border: 1px white solid;
 }
 
 .feature-detail-container {
@@ -81,12 +86,4 @@ footer {
 
 #active-feature-detail {
     display: inherit;
-}
-
-.feature-list-item {
-    border: 1px transparent solid;
-}
-
-#active-feature-item {
-    border: 1px white solid;
-}
\ No newline at end of file
+} 
\ No newline at end of file
diff --git a/features.html b/features.html
index 682460f..f400d24 100644
--- a/features.html
+++ b/features.html
@@ -178,8 +178,7 @@
                     <!-- Right Column -->
                     <div class="col-8" id="feature-detail-column">
                         <div class="my-gradient gradient-spin rounded-3">
-                            <div class="feature-detail-container rounded-3 p-3"
-                                id="active-feature-detail">
+                            <div class="feature-detail-container rounded-3 p-3" id="active-feature-detail">
                                 <!-- Image/Video Container -->
                                 <div class="row" id="feature-media-container">
                                     <div class="col">
diff --git a/scripts/features.js b/scripts/features.js
index e64be19..0dbf442 100644
--- a/scripts/features.js
+++ b/scripts/features.js
@@ -1,6 +1,6 @@
-featureTitles = document.getElementsByClassName('feature-list-item');
-featureDetails = document.getElementsByClassName('feature-detail-container');
-// let currentFeature = 0;
+const featureTitles = document.getElementsByClassName('feature-list-item');
+const featureDetails = document.getElementsByClassName('feature-detail-container');
+let currentFeature = 0;
 
 for (let i = 0; i < featureTitles.length; i++) {
     featureTitles[i].addEventListener('click', function () {
@@ -12,20 +12,18 @@ for (let i = 0; i < featureTitles.length; i++) {
 }
 
 function updateActiveFeature(i) {
-    // Reset all
-    for (let j = 0; j < featureTitles.length; j++) {
-        featureTitles[j].removeAttribute('id');
-        featureDetails[j].removeAttribute('id');
-        featureTitles[j].className = 'row feature-list-item rounded-3';
-        featureTitles[j].style = '';
-    }
+    const lastCurrentFeature = currentFeature;
+    currentFeature = i;
 
-    // currentFeature = i;
+    // New current feature
+    featureTitles[currentFeature].className += ' gradient-spin my-gradient';
+    featureTitles[currentFeature].id = 'active-feature-item';
+    featureDetails[currentFeature].id = 'active-feature-detail'
 
-    // Update the active feature
-    featureTitles[i].id = 'active-feature-item';
-    featureDetails[i].id = 'active-feature-detail'
+    // Reset previous current feature
+    featureTitles[lastCurrentFeature].removeAttribute('id');
+    featureTitles[lastCurrentFeature].className = 'row feature-list-item rounded-3';
+    featureTitles[lastCurrentFeature].style = '';
+    featureDetails[lastCurrentFeature].removeAttribute('id');
 
-    // Handle styles
-    featureTitles[i].className += ' gradient-spin my-gradient';
 }
\ No newline at end of file