mock sort functionality via carousel

Author: dustinusey

frontend/dist/scripts/app.js

@@ -531,21 +531,55 @@ function loadProjectRequirements(data) {
 
     let mockupIcons = document.querySelectorAll('li.mockup-type');
     const gallery = document.getElementById('galleryContainer');
+
+    currentIndex = '';
+
     mockupIcons.forEach((icon, index) => {
         icon.setAttribute('data-mockup-index', index);
 
         icon.addEventListener('click', e => {
             gallery.innerHTML = '';
-            let currentIndex = e.target.getAttribute('data-mockup-index');
+            currentIndex = e.target.getAttribute('data-mockup-index');
             let currentMock = projectFileData.currentMocks[currentIndex];
             let img = document.createElement('img');
             img.src = currentMock;
             gallery.appendChild(img);
         })
     });
 
-    
-    
+    // carousel logic
+    const controls = document.getElementById('controls');
+    let prevArrow = document.querySelector('[data-prev-image]')
+    let nextArrow = document.querySelector('[data-next-image]')
+
+    controls.addEventListener('click', e => {
+
+        if (e.target === prevArrow) {
+            
+            if (currentIndex === 0) {
+                currentIndex = projectFileData.currentMocks.length -1;
+            } else {
+                currentIndex -= 1;
+            }
+
+        }
+
+        if (e.target === nextArrow) {
+            if (currentIndex === projectFileData.currentMocks.length -1) {
+                currentIndex = 0;
+            } else {
+                currentIndex ++;
+            }
+        }
+
+        console.log(projectFileData.currentMocks.length);
+
+        gallery.innerHTML = '';
+        let currentMock = projectFileData.currentMocks[currentIndex];
+        let img = document.createElement('img');
+        img.src = currentMock;
+        gallery.appendChild(img);
+    });
 }
 
 function updateProgressBar() {

frontend/src/scripts/app.js

@@ -531,21 +531,55 @@ function loadProjectRequirements(data) {
 
     let mockupIcons = document.querySelectorAll('li.mockup-type');
     const gallery = document.getElementById('galleryContainer');
+
+    currentIndex = '';
+
     mockupIcons.forEach((icon, index) => {
         icon.setAttribute('data-mockup-index', index);
 
         icon.addEventListener('click', e => {
             gallery.innerHTML = '';
-            let currentIndex = e.target.getAttribute('data-mockup-index');
+            currentIndex = e.target.getAttribute('data-mockup-index');
             let currentMock = projectFileData.currentMocks[currentIndex];
             let img = document.createElement('img');
             img.src = currentMock;
             gallery.appendChild(img);
         })
     });
 
-    
-    
+    // carousel logic
+    const controls = document.getElementById('controls');
+    let prevArrow = document.querySelector('[data-prev-image]')
+    let nextArrow = document.querySelector('[data-next-image]')
+
+    controls.addEventListener('click', e => {
+
+        if (e.target === prevArrow) {
+            
+            if (currentIndex === 0) {
+                currentIndex = projectFileData.currentMocks.length -1;
+            } else {
+                currentIndex -= 1;
+            }
+
+        }
+
+        if (e.target === nextArrow) {
+            if (currentIndex === projectFileData.currentMocks.length -1) {
+                currentIndex = 0;
+            } else {
+                currentIndex ++;
+            }
+        }
+
+        console.log(projectFileData.currentMocks.length);
+
+        gallery.innerHTML = '';
+        let currentMock = projectFileData.currentMocks[currentIndex];
+        let img = document.createElement('img');
+        img.src = currentMock;
+        gallery.appendChild(img);
+    });
 }
 
 function updateProgressBar() {

index.html

@@ -138,6 +138,7 @@ <h1 data-project-name></h1>
                 </header>
                 <ul class="mockup-type-container" id="mockupTypeContainer">
                     <!-- dynamic -->
+                    <li class="disabled">loading mockups...</li>
                 </ul>
             </div>
 
@@ -200,7 +201,7 @@ <h1 data-project-name></h1>
 
         <!-- project-files-carousel -->
         <div class="overlay_projectFiles" data-carousel>
-            <div class="controls">
+            <div class="controls" id="controls">
                 <i class="fa-solid fa-angle-left" data-prev-image></i>
                 <i class="fa-solid fa-angle-right" data-next-image></i>
             </div>