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.
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user