From d9a1b04f8996f7d831b0f218e72f279f8937ff71 Mon Sep 17 00:00:00 2001
From: Richard Bergsma <richard@365devnet.eu>
Date: Sun, 15 Jun 2025 19:23:38 +0200
Subject: [PATCH] Implement touch handling for modals in Certifications,
 Education, and Skills components

- Introduced touch event listeners to enhance mobile interactivity for certification, education, and skills cards.
- Refactored modal display logic to improve user experience by allowing smooth scrolling and restoring scroll position after modal closure.
- Updated event handling to prevent default actions and ensure modals function correctly across devices.
---
 .../widgets/ModernCertifications.astro        | 176 +++++++++++----
 src/components/widgets/ModernEducation.astro  | 213 ++++++++++++------
 src/components/widgets/ModernSkills.astro     | 168 ++++++++++----
 3 files changed, 397 insertions(+), 160 deletions(-)

diff --git a/src/components/widgets/ModernCertifications.astro b/src/components/widgets/ModernCertifications.astro
index 6f1b728..3df6ea9 100644
--- a/src/components/widgets/ModernCertifications.astro
+++ b/src/components/widgets/ModernCertifications.astro
@@ -226,60 +226,140 @@ const getImageSrc = (imagePath: string) => {
 </style>
 
 <script is:inline>
-  function showCertModal(element) {
-    const title = element.dataset.certTitle;
-    const date = element.dataset.certDate;
-    const description = element.dataset.certDescription;
-    const url = element.dataset.certUrl;
-    
-    document.getElementById('certModalTitle').textContent = title;
-    document.getElementById('certModalDate').textContent = date;
-    document.getElementById('certModalDescription').textContent = description;
-    document.getElementById('certModalLink').href = url;
-    
-    const modal = document.getElementById('certModal');
-    modal.classList.add('active');
-    // Don't disable body scroll - let modal content be scrollable
-  }
+  // Certifications widget touch handling - namespaced to avoid conflicts
+  (function() {
+    let certTouchStart = { x: 0, y: 0, time: 0 };
+    let certIsScrolling = false;
+    let certOriginalScrollPosition = 0;
+    let certClickedElement = null;
 
-  function closeCertModal() {
-    const modal = document.getElementById('certModal');
-    modal.classList.remove('active');
-    // No need to restore body scroll since we didn't disable it
-  }
+    function certHandleTouchStart(e) {
+      const touch = e.touches[0];
+      certTouchStart = {
+        x: touch.clientX,
+        y: touch.clientY,
+        time: Date.now()
+      };
+      certIsScrolling = false;
+    }
 
-  // Initialize when DOM is loaded
-  document.addEventListener('DOMContentLoaded', function() {
-    // Add click listeners to cert cards
-    const certCards = document.querySelectorAll('.cert-card');
-    certCards.forEach(card => {
-      // Add both click and touchend for mobile compatibility
-      card.addEventListener('click', function(e) {
-        e.preventDefault();
-        showCertModal(this);
-      });
+    function certHandleTouchMove(e) {
+      const touch = e.touches[0];
+      const deltaX = Math.abs(touch.clientX - certTouchStart.x);
+      const deltaY = Math.abs(touch.clientY - certTouchStart.y);
       
-      card.addEventListener('touchend', function(e) {
-        e.preventDefault();
-        showCertModal(this);
-      });
-    });
+      if (deltaX > 10 || deltaY > 10) {
+        certIsScrolling = true;
+      }
+    }
 
-    // Close modal when clicking outside
-    const certModal = document.getElementById('certModal');
-    if (certModal) {
-      certModal.addEventListener('click', function(e) {
-        if (e.target === this) {
+    function certHandleTouchEnd(e, element) {
+      const touch = e.changedTouches[0];
+      const touchEndTime = Date.now();
+      
+      if (certIsScrolling) return;
+      
+      const touchDuration = touchEndTime - certTouchStart.time;
+      if (touchDuration > 300) return;
+      
+      const deltaX = Math.abs(touch.clientX - certTouchStart.x);
+      const deltaY = Math.abs(touch.clientY - certTouchStart.y);
+      if (deltaX > 15 || deltaY > 15) return;
+      
+      e.preventDefault();
+      showCertModal(element);
+    }
+
+    window.showCertModal = function(element) {
+      // Store the clicked element and current scroll position
+      certClickedElement = element;
+      certOriginalScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
+      
+      const title = element.dataset.certTitle;
+      const date = element.dataset.certDate;
+      const description = element.dataset.certDescription;
+      const url = element.dataset.certUrl;
+      
+      document.getElementById('certModalTitle').textContent = title;
+      document.getElementById('certModalDate').textContent = date;
+      document.getElementById('certModalDescription').textContent = description;
+      document.getElementById('certModalLink').href = url;
+      
+      const modal = document.getElementById('certModal');
+      modal.classList.add('active');
+      
+      setTimeout(() => {
+        const modalContent = modal.querySelector('.modal-content');
+        if (modalContent) {
+          modalContent.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+      }, 100);
+    };
+
+    window.closeCertModal = function() {
+      const modal = document.getElementById('certModal');
+      modal.classList.remove('active');
+      
+      // Restore scroll position to the original card
+      if (certClickedElement) {
+        setTimeout(() => {
+          // First, scroll to the original position
+          window.scrollTo({
+            top: certOriginalScrollPosition,
+            behavior: 'smooth'
+          });
+          
+          // Then, ensure the clicked card is visible with a slight offset
+          setTimeout(() => {
+            const elementRect = certClickedElement.getBoundingClientRect();
+            const isElementVisible = elementRect.top >= 0 && elementRect.bottom <= window.innerHeight;
+            
+            if (!isElementVisible) {
+              certClickedElement.scrollIntoView({ 
+                behavior: 'smooth', 
+                block: 'center' 
+              });
+            }
+          }, 300);
+        }, 100);
+      }
+      
+      // Clear the reference
+      certClickedElement = null;
+    };
+
+    document.addEventListener('DOMContentLoaded', function() {
+      const certCards = document.querySelectorAll('.cert-card');
+      
+      certCards.forEach(card => {
+        card.addEventListener('click', function(e) {
+          if (!('ontouchstart' in window)) {
+            e.preventDefault();
+            showCertModal(this);
+          }
+        });
+        
+        card.addEventListener('touchstart', certHandleTouchStart, { passive: true });
+        card.addEventListener('touchmove', certHandleTouchMove, { passive: true });
+        card.addEventListener('touchend', function(e) {
+          certHandleTouchEnd(e, this);
+        }, { passive: false });
+      });
+
+      const certModal = document.getElementById('certModal');
+      if (certModal) {
+        certModal.addEventListener('click', function(e) {
+          if (e.target === this) {
+            closeCertModal();
+          }
+        });
+      }
+
+      document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
           closeCertModal();
         }
       });
-    }
-
-    // Close modal with Escape key
-    document.addEventListener('keydown', function(e) {
-      if (e.key === 'Escape') {
-        closeCertModal();
-      }
     });
-  });
+  })();
 </script>
\ No newline at end of file
diff --git a/src/components/widgets/ModernEducation.astro b/src/components/widgets/ModernEducation.astro
index 24bb658..986b8f6 100644
--- a/src/components/widgets/ModernEducation.astro
+++ b/src/components/widgets/ModernEducation.astro
@@ -188,80 +188,157 @@ const getEducationStyle = (title: string) => {
 </style>
 
 <script is:inline>
-  function showEducationModal(element) {
-    const title = element.dataset.educationTitle;
-    const description = element.dataset.educationDescription;
-    
-    // Parse the title to extract clean degree name
-    const tempDiv = document.createElement('div');
-    tempDiv.innerHTML = title;
-    const cleanTitle = tempDiv.textContent || tempDiv.innerText || title;
-    
-    // Extract degree type for styling
-    const titleLower = cleanTitle.toLowerCase();
-    let statusText = '';
-    let statusClass = '';
-    
-    if (titleLower.includes('bachelor')) {
-      statusText = 'Studies Undertaken';
-      statusClass = 'text-blue-600 dark:text-blue-400';
-    } else if (titleLower.includes('associate')) {
-      statusText = 'Completed';
-      statusClass = 'text-green-600 dark:text-green-400';
-    } else {
-      statusText = 'Completed';
-      statusClass = 'text-purple-600 dark:text-purple-400';
+  // Education widget touch handling - namespaced to avoid conflicts
+  (function() {
+    let eduTouchStart = { x: 0, y: 0, time: 0 };
+    let eduIsScrolling = false;
+    let eduOriginalScrollPosition = 0;
+    let eduClickedElement = null;
+
+    function eduHandleTouchStart(e) {
+      const touch = e.touches[0];
+      eduTouchStart = {
+        x: touch.clientX,
+        y: touch.clientY,
+        time: Date.now()
+      };
+      eduIsScrolling = false;
     }
-    
-    // Update modal content
-    document.getElementById('educationModalTitle').innerHTML = title;
-    document.getElementById('educationModalDescription').textContent = description || 'No additional information available.';
-    document.getElementById('educationModalStatus').textContent = statusText;
-    document.getElementById('educationModalStatus').className = `text-sm font-medium ${statusClass}`;
-    
-    const modal = document.getElementById('educationModal');
-    modal.classList.add('active');
-    // Don't disable body scroll - let modal content be scrollable
-  }
 
-  function closeEducationModal() {
-    const modal = document.getElementById('educationModal');
-    modal.classList.remove('active');
-    // No need to restore body scroll since we didn't disable it
-  }
-
-  // Initialize when DOM is loaded
-  document.addEventListener('DOMContentLoaded', function() {
-    // Add click listeners to education cards
-    const educationCards = document.querySelectorAll('.education-card');
-    educationCards.forEach(card => {
-      // Add both click and touchend for mobile compatibility
-      card.addEventListener('click', function(e) {
-        e.preventDefault();
-        showEducationModal(this);
-      });
+    function eduHandleTouchMove(e) {
+      const touch = e.touches[0];
+      const deltaX = Math.abs(touch.clientX - eduTouchStart.x);
+      const deltaY = Math.abs(touch.clientY - eduTouchStart.y);
       
-      card.addEventListener('touchend', function(e) {
-        e.preventDefault();
-        showEducationModal(this);
-      });
-    });
+      if (deltaX > 10 || deltaY > 10) {
+        eduIsScrolling = true;
+      }
+    }
 
-    // Close modal when clicking outside
-    const educationModal = document.getElementById('educationModal');
-    if (educationModal) {
-      educationModal.addEventListener('click', function(e) {
-        if (e.target === this) {
+    function eduHandleTouchEnd(e, element) {
+      const touch = e.changedTouches[0];
+      const touchEndTime = Date.now();
+      
+      if (eduIsScrolling) return;
+      
+      const touchDuration = touchEndTime - eduTouchStart.time;
+      if (touchDuration > 300) return;
+      
+      const deltaX = Math.abs(touch.clientX - eduTouchStart.x);
+      const deltaY = Math.abs(touch.clientY - eduTouchStart.y);
+      if (deltaX > 15 || deltaY > 15) return;
+      
+      e.preventDefault();
+      showEducationModal(element);
+    }
+
+    window.showEducationModal = function(element) {
+      // Store the clicked element and current scroll position
+      eduClickedElement = element;
+      eduOriginalScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
+      
+      const title = element.dataset.educationTitle;
+      const description = element.dataset.educationDescription;
+      
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = title;
+      const cleanTitle = tempDiv.textContent || tempDiv.innerText || title;
+      
+      const titleLower = cleanTitle.toLowerCase();
+      let statusText = '';
+      let statusClass = '';
+      
+      if (titleLower.includes('bachelor')) {
+        statusText = 'Studies Undertaken';
+        statusClass = 'text-blue-600 dark:text-blue-400';
+      } else if (titleLower.includes('associate')) {
+        statusText = 'Completed';
+        statusClass = 'text-green-600 dark:text-green-400';
+      } else {
+        statusText = 'Completed';
+        statusClass = 'text-purple-600 dark:text-purple-400';
+      }
+      
+      document.getElementById('educationModalTitle').innerHTML = title;
+      document.getElementById('educationModalDescription').textContent = description || 'No additional information available.';
+      document.getElementById('educationModalStatus').textContent = statusText;
+      document.getElementById('educationModalStatus').className = `text-sm font-medium ${statusClass}`;
+      
+      const modal = document.getElementById('educationModal');
+      modal.classList.add('active');
+      
+      setTimeout(() => {
+        const modalContent = modal.querySelector('.modal-content');
+        if (modalContent) {
+          modalContent.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+      }, 100);
+    };
+
+    window.closeEducationModal = function() {
+      const modal = document.getElementById('educationModal');
+      modal.classList.remove('active');
+      
+      // Restore scroll position to the original card
+      if (eduClickedElement) {
+        setTimeout(() => {
+          // First, scroll to the original position
+          window.scrollTo({
+            top: eduOriginalScrollPosition,
+            behavior: 'smooth'
+          });
+          
+          // Then, ensure the clicked card is visible with a slight offset
+          setTimeout(() => {
+            const elementRect = eduClickedElement.getBoundingClientRect();
+            const isElementVisible = elementRect.top >= 0 && elementRect.bottom <= window.innerHeight;
+            
+            if (!isElementVisible) {
+              eduClickedElement.scrollIntoView({ 
+                behavior: 'smooth', 
+                block: 'center' 
+              });
+            }
+          }, 300);
+        }, 100);
+      }
+      
+      // Clear the reference
+      eduClickedElement = null;
+    };
+
+    document.addEventListener('DOMContentLoaded', function() {
+      const educationCards = document.querySelectorAll('.education-card');
+      
+      educationCards.forEach(card => {
+        card.addEventListener('click', function(e) {
+          if (!('ontouchstart' in window)) {
+            e.preventDefault();
+            showEducationModal(this);
+          }
+        });
+        
+        card.addEventListener('touchstart', eduHandleTouchStart, { passive: true });
+        card.addEventListener('touchmove', eduHandleTouchMove, { passive: true });
+        card.addEventListener('touchend', function(e) {
+          eduHandleTouchEnd(e, this);
+        }, { passive: false });
+      });
+
+      const educationModal = document.getElementById('educationModal');
+      if (educationModal) {
+        educationModal.addEventListener('click', function(e) {
+          if (e.target === this) {
+            closeEducationModal();
+          }
+        });
+      }
+
+      document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
           closeEducationModal();
         }
       });
-    }
-
-    // Close modal with Escape key
-    document.addEventListener('keydown', function(e) {
-      if (e.key === 'Escape') {
-        closeEducationModal();
-      }
     });
-  });
+  })();
 </script>
\ No newline at end of file
diff --git a/src/components/widgets/ModernSkills.astro b/src/components/widgets/ModernSkills.astro
index d708724..31d69da 100644
--- a/src/components/widgets/ModernSkills.astro
+++ b/src/components/widgets/ModernSkills.astro
@@ -187,56 +187,136 @@ if (uncategorizedSkills.length > 0) {
 </style>
 
 <script is:inline>
-  function showSkillModal(element) {
-    const title = element.dataset.skillTitle;
-    const description = element.dataset.skillDescription;
-    
-    document.getElementById('skillModalTitle').textContent = title;
-    document.getElementById('skillModalDescription').textContent = description;
-    
-    const modal = document.getElementById('skillModal');
-    modal.classList.add('active');
-    // Don't disable body scroll - let modal content be scrollable
-  }
+  // Skills widget touch handling - namespaced to avoid conflicts
+  (function() {
+    let skillTouchStart = { x: 0, y: 0, time: 0 };
+    let skillIsScrolling = false;
+    let skillOriginalScrollPosition = 0;
+    let skillClickedElement = null;
 
-  function closeSkillModal() {
-    const modal = document.getElementById('skillModal');
-    modal.classList.remove('active');
-    // No need to restore body scroll since we didn't disable it
-  }
+    function skillHandleTouchStart(e) {
+      const touch = e.touches[0];
+      skillTouchStart = {
+        x: touch.clientX,
+        y: touch.clientY,
+        time: Date.now()
+      };
+      skillIsScrolling = false;
+    }
 
-  // Initialize when DOM is loaded
-  document.addEventListener('DOMContentLoaded', function() {
-    // Add click listeners to skill pills
-    const skillPills = document.querySelectorAll('.skill-pill');
-    skillPills.forEach(pill => {
-      // Add both click and touchend for mobile compatibility
-      pill.addEventListener('click', function(e) {
-        e.preventDefault();
-        showSkillModal(this);
-      });
+    function skillHandleTouchMove(e) {
+      const touch = e.touches[0];
+      const deltaX = Math.abs(touch.clientX - skillTouchStart.x);
+      const deltaY = Math.abs(touch.clientY - skillTouchStart.y);
       
-      pill.addEventListener('touchend', function(e) {
-        e.preventDefault();
-        showSkillModal(this);
-      });
-    });
+      if (deltaX > 10 || deltaY > 10) {
+        skillIsScrolling = true;
+      }
+    }
 
-    // Close modal when clicking outside
-    const skillModal = document.getElementById('skillModal');
-    if (skillModal) {
-      skillModal.addEventListener('click', function(e) {
-        if (e.target === this) {
+    function skillHandleTouchEnd(e, element) {
+      const touch = e.changedTouches[0];
+      const touchEndTime = Date.now();
+      
+      if (skillIsScrolling) return;
+      
+      const touchDuration = touchEndTime - skillTouchStart.time;
+      if (touchDuration > 300) return;
+      
+      const deltaX = Math.abs(touch.clientX - skillTouchStart.x);
+      const deltaY = Math.abs(touch.clientY - skillTouchStart.y);
+      if (deltaX > 15 || deltaY > 15) return;
+      
+      e.preventDefault();
+      showSkillModal(element);
+    }
+
+    window.showSkillModal = function(element) {
+      // Store the clicked element and current scroll position
+      skillClickedElement = element;
+      skillOriginalScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
+      
+      const title = element.dataset.skillTitle;
+      const description = element.dataset.skillDescription;
+      
+      document.getElementById('skillModalTitle').textContent = title;
+      document.getElementById('skillModalDescription').textContent = description;
+      
+      const modal = document.getElementById('skillModal');
+      modal.classList.add('active');
+      
+      setTimeout(() => {
+        const modalContent = modal.querySelector('.modal-content');
+        if (modalContent) {
+          modalContent.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+      }, 100);
+    };
+
+    window.closeSkillModal = function() {
+      const modal = document.getElementById('skillModal');
+      modal.classList.remove('active');
+      
+      // Restore scroll position to the original skill pill
+      if (skillClickedElement) {
+        setTimeout(() => {
+          // First, scroll to the original position
+          window.scrollTo({
+            top: skillOriginalScrollPosition,
+            behavior: 'smooth'
+          });
+          
+          // Then, ensure the clicked skill pill is visible with a slight offset
+          setTimeout(() => {
+            const elementRect = skillClickedElement.getBoundingClientRect();
+            const isElementVisible = elementRect.top >= 0 && elementRect.bottom <= window.innerHeight;
+            
+            if (!isElementVisible) {
+              skillClickedElement.scrollIntoView({ 
+                behavior: 'smooth', 
+                block: 'center' 
+              });
+            }
+          }, 300);
+        }, 100);
+      }
+      
+      // Clear the reference
+      skillClickedElement = null;
+    };
+
+    document.addEventListener('DOMContentLoaded', function() {
+      const skillPills = document.querySelectorAll('.skill-pill');
+      
+      skillPills.forEach(pill => {
+        pill.addEventListener('click', function(e) {
+          if (!('ontouchstart' in window)) {
+            e.preventDefault();
+            showSkillModal(this);
+          }
+        });
+        
+        pill.addEventListener('touchstart', skillHandleTouchStart, { passive: true });
+        pill.addEventListener('touchmove', skillHandleTouchMove, { passive: true });
+        pill.addEventListener('touchend', function(e) {
+          skillHandleTouchEnd(e, this);
+        }, { passive: false });
+      });
+
+      const skillModal = document.getElementById('skillModal');
+      if (skillModal) {
+        skillModal.addEventListener('click', function(e) {
+          if (e.target === this) {
+            closeSkillModal();
+          }
+        });
+      }
+
+      document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
           closeSkillModal();
         }
       });
-    }
-
-    // Close modal with Escape key
-    document.addEventListener('keydown', function(e) {
-      if (e.key === 'Escape') {
-        closeSkillModal();
-      }
     });
-  });
+  })();
 </script>
\ No newline at end of file