Refactor slider script

FlowFuse · Feb 20, 2024 · b276b06 · b276b06
1 parent 4dee7c3
commit b276b06
Showing 1 changed file with 18 additions and 48 deletions.
diff --git a/src/pricing.njk b/src/pricing.njk
@@ -480,52 +480,26 @@ hubspot:
         const priceDecElement = document.querySelector(priceDecElementId);
         const annualPriceElement = document.querySelector(annualPriceElementId);
 
-        let lastSliderValue = sliderEl.value;
-
         sliderEl.addEventListener("input", (event) => {
             let tempSliderValue = Math.ceil(event.target.value / stepSize) * stepSize;
 
-            if (sliderId === "#team-annual-slider") {
-                let originalDiv = document.querySelector('#team-original-div');
-                let alternateDiv = document.querySelector('#team-alternate-div');
-                if (tempSliderValue > 250) {
-                    sliderValue.textContent = "∞";
-                    originalDiv.classList.add('hidden');
-                    alternateDiv.classList.remove('hidden');
-                } else {
-                    sliderValue.textContent = tempSliderValue;
-                    originalDiv.classList.remove('hidden');
-                    alternateDiv.classList.add('hidden');
-                }
-            } else if (sliderId === "#enterprise-annual-slider") {
-                let originalDiv = document.querySelector('#enterprise-original-div');
-                let alternateDiv = document.querySelector('#enterprise-alternate-div');
-                if (tempSliderValue > 500) {
-                    sliderValue.textContent = "+500";
-                    originalDiv.classList.add('hidden');
-                    alternateDiv.classList.remove('hidden');
-                } else {
-                    sliderValue.textContent = tempSliderValue;
-                    originalDiv.classList.remove('hidden');
-                    alternateDiv.classList.add('hidden');
-                }
-            } else if (sliderId === "#team-monthly-slider") {
-                let originalDiv = document.querySelector('#team-m-original-div');
-                let alternateDiv = document.querySelector('#team-m-alternate-div');
-                if (tempSliderValue > 250) {
-                    sliderValue.textContent = "∞";
-                    originalDiv.classList.add('hidden');
-                    alternateDiv.classList.remove('hidden');
-                } else {
-                    sliderValue.textContent = tempSliderValue;
-                    originalDiv.classList.remove('hidden');
-                    alternateDiv.classList.add('hidden');
-                }
-            } else if (sliderId === "#enterprise-monthly-slider") {
-                let originalDiv = document.querySelector('#enterprise-m-original-div');
-                let alternateDiv = document.querySelector('#enterprise-m-alternate-div');
-                if (tempSliderValue > 500) {
-                    sliderValue.textContent = "+500";
+            // Map slider IDs to div IDs
+            const divIds = {
+                "#team-annual-slider": ["#team-original-div", "#team-alternate-div", 250, "∞"],
+                "#enterprise-annual-slider": ["#enterprise-original-div", "#enterprise-alternate-div", 500, "+500"],
+                "#team-monthly-slider": ["#team-m-original-div", "#team-m-alternate-div", 250, "∞"],
+                "#enterprise-monthly-slider": ["#enterprise-m-original-div", "#enterprise-m-alternate-div", 500, "+500"]
+            };
+
+            // Check if the slider ID is in the divIds map
+            if (sliderId in divIds) {
+                let originalDiv = document.querySelector(divIds[sliderId][0]);
+                let alternateDiv = document.querySelector(divIds[sliderId][1]);
+                let limit = divIds[sliderId][2];
+                let displayValue = divIds[sliderId][3];
+
+                if (tempSliderValue > limit) {
+                    sliderValue.textContent = displayValue;
                     originalDiv.classList.add('hidden');
                     alternateDiv.classList.remove('hidden');
                 } else {
@@ -534,21 +508,17 @@ hubspot:
                     alternateDiv.classList.add('hidden');
                 }
             } else {
-                lastSliderValue = tempSliderValue;
                 sliderValue.textContent = tempSliderValue;
             }
 
             tempSliderValue = Math.ceil(tempSliderValue / stepSize) * stepSize;
 
             const progress = (tempSliderValue / sliderEl.max) * 100;
-            
             sliderEl.style.background = `linear-gradient(to right, #9CA3AF ${progress}%, #374151 ${progress}%)`;
 
-            const discountSteps = (tempSliderValue - stepSize) / stepSize;
-            const discount = discountSteps * 0.01;
+            const discount = ((tempSliderValue - stepSize) / stepSize) * 0.01;
 
             const discountedPriceMonthly = (basePrice * (1 - discount)) / 12;
-            const discountedPriceAnnual = discountedPriceMonthly * 12;
 
             const [intValue, decValue] = discountedPriceMonthly.toFixed(2).split(".");
             priceIntElement.textContent = intValue;