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:
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user