Add modular SCSS structure and lightbox functionality
Introduce a modular SCSS structure to improve maintainability and organization of stylesheets. Add lightbox functionality for homepage screenshots, including responsive JavaScript behavior and custom styling for enhanced user experience. Update tasks documentation with improvement initiatives for the project.
This commit is contained in:
@@ -0,0 +1,201 @@
|
||||
// Lightbox functionality for the homepage screenshot
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Get the screenshot image
|
||||
const screenshotImg = document.querySelector('.screenshot-container img');
|
||||
|
||||
// If the image exists
|
||||
if (screenshotImg) {
|
||||
// Create lightbox elements
|
||||
const lightbox = document.createElement('div');
|
||||
lightbox.className = 'satag-lightbox';
|
||||
|
||||
const closeBtn = document.createElement('span');
|
||||
closeBtn.className = 'satag-lightbox-close';
|
||||
closeBtn.innerHTML = '×';
|
||||
|
||||
const lightboxImg = document.createElement('img');
|
||||
lightboxImg.className = 'satag-lightbox-img';
|
||||
lightboxImg.src = screenshotImg.src;
|
||||
lightboxImg.alt = screenshotImg.alt;
|
||||
|
||||
// Append elements to the lightbox
|
||||
lightbox.appendChild(closeBtn);
|
||||
lightbox.appendChild(lightboxImg);
|
||||
|
||||
// Remove any existing lightbox to avoid duplicates
|
||||
const existingLightbox = document.querySelector('.satag-lightbox');
|
||||
if (existingLightbox) {
|
||||
document.body.removeChild(existingLightbox);
|
||||
}
|
||||
|
||||
// Append lightbox to the body instead of the screenshot container
|
||||
// This allows the lightbox to be as large as the viewport, not constrained by the container
|
||||
document.body.appendChild(lightbox);
|
||||
|
||||
// Function to position the lightbox directly over the original image
|
||||
function positionLightbox() {
|
||||
// Get the position and dimensions of the original image
|
||||
const imgRect = screenshotImg.getBoundingClientRect();
|
||||
const screenshotContainer = document.querySelector('.screenshot-container');
|
||||
const containerRect = screenshotContainer.getBoundingClientRect();
|
||||
|
||||
// Get the current scroll position
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
|
||||
|
||||
// Get viewport dimensions
|
||||
const viewportWidth = window.innerWidth;
|
||||
const viewportHeight = window.innerHeight;
|
||||
|
||||
// Position the lightbox directly over the original image
|
||||
lightbox.style.position = 'fixed';
|
||||
lightbox.style.top = imgRect.top + 'px';
|
||||
lightbox.style.left = imgRect.left + 'px';
|
||||
lightbox.style.width = imgRect.width + 'px';
|
||||
lightbox.style.height = imgRect.height + 'px';
|
||||
lightbox.style.display = 'flex';
|
||||
lightbox.style.alignItems = 'center';
|
||||
lightbox.style.justifyContent = 'center';
|
||||
|
||||
// Set the lightbox image to fill the lightbox container
|
||||
lightboxImg.style.position = 'relative';
|
||||
lightboxImg.style.width = '100%';
|
||||
lightboxImg.style.height = '100%';
|
||||
lightboxImg.style.objectFit = 'contain';
|
||||
|
||||
// Position the close button in the top-right corner of the lightbox
|
||||
closeBtn.style.top = '5px';
|
||||
closeBtn.style.right = '5px';
|
||||
}
|
||||
|
||||
// Function to check if lightbox should be enabled (screen width > 768px)
|
||||
function shouldEnableLightbox() {
|
||||
return window.innerWidth > 768;
|
||||
}
|
||||
|
||||
// Update cursor style based on screen width
|
||||
function updateCursorStyle() {
|
||||
screenshotImg.style.cursor = shouldEnableLightbox() ? 'pointer' : 'default';
|
||||
}
|
||||
|
||||
// Initial cursor style update
|
||||
updateCursorStyle();
|
||||
|
||||
// Update cursor style when window is resized
|
||||
window.addEventListener('resize', updateCursorStyle);
|
||||
|
||||
// Open lightbox when clicking on the screenshot (only if screen width > 768px)
|
||||
screenshotImg.addEventListener('click', function(e) {
|
||||
e.preventDefault(); // Prevent default behavior
|
||||
|
||||
// Only activate lightbox if screen width > 768px
|
||||
if (!shouldEnableLightbox()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Position the lightbox over the original image
|
||||
positionLightbox();
|
||||
|
||||
// Display the lightbox - use flex to match our CSS
|
||||
lightbox.style.display = 'flex';
|
||||
|
||||
// Force a reflow to ensure the display change takes effect before adding the active class
|
||||
void lightbox.offsetWidth;
|
||||
|
||||
// Apply transform scale to the lightbox to make it larger
|
||||
const viewportWidth = window.innerWidth;
|
||||
if (viewportWidth <= 479) { // Mobile
|
||||
lightbox.style.transform = 'scale(1.2)';
|
||||
} else if (viewportWidth <= 959) { // Tablet
|
||||
lightbox.style.transform = 'scale(1.3)';
|
||||
} else if (viewportWidth <= 1219) { // Medium screens
|
||||
lightbox.style.transform = 'scale(1.4)';
|
||||
} else { // Large screens
|
||||
lightbox.style.transform = 'scale(1.5)';
|
||||
}
|
||||
|
||||
// Add the active class to trigger the transition
|
||||
lightbox.classList.add('active');
|
||||
});
|
||||
|
||||
// Function to handle closing with transition
|
||||
function closeLightboxWithTransition() {
|
||||
lightbox.style.opacity = '0';
|
||||
lightbox.style.transform = 'scale(1)'; // Reset scale to original size
|
||||
|
||||
// Wait for transition to complete before removing active class
|
||||
setTimeout(function() {
|
||||
lightbox.classList.remove('active');
|
||||
|
||||
// Reset display to none after the transition is complete
|
||||
lightbox.style.display = 'none';
|
||||
|
||||
// Reset all inline styles after the lightbox is hidden
|
||||
setTimeout(function() {
|
||||
// Reset opacity and transform
|
||||
lightbox.style.opacity = '';
|
||||
lightbox.style.transform = '';
|
||||
|
||||
// Reset position and size styles
|
||||
lightbox.style.position = '';
|
||||
lightbox.style.top = '';
|
||||
lightbox.style.left = '';
|
||||
lightbox.style.width = '';
|
||||
lightbox.style.height = '';
|
||||
lightbox.style.alignItems = '';
|
||||
lightbox.style.justifyContent = '';
|
||||
|
||||
// Reset image styles
|
||||
lightboxImg.style.width = '';
|
||||
lightboxImg.style.height = '';
|
||||
lightboxImg.style.objectFit = '';
|
||||
|
||||
// Reset close button styles
|
||||
closeBtn.style.top = '';
|
||||
closeBtn.style.right = '';
|
||||
}, 100);
|
||||
}, 400); // Match the transition duration from CSS
|
||||
}
|
||||
|
||||
// Close lightbox when clicking on the close button
|
||||
closeBtn.addEventListener('click', function(e) {
|
||||
e.stopPropagation(); // Prevent event from bubbling up
|
||||
closeLightboxWithTransition();
|
||||
});
|
||||
|
||||
// Close lightbox when clicking on the lightbox (outside the image)
|
||||
lightbox.addEventListener('click', function(e) {
|
||||
if (e.target === lightbox) {
|
||||
closeLightboxWithTransition();
|
||||
}
|
||||
});
|
||||
|
||||
// Close lightbox when pressing Escape key
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && lightbox.classList.contains('active')) {
|
||||
closeLightboxWithTransition();
|
||||
}
|
||||
});
|
||||
|
||||
// Update lightbox position when window is resized
|
||||
window.addEventListener('resize', function() {
|
||||
if (lightbox.classList.contains('active')) {
|
||||
// Reposition the lightbox based on new viewport dimensions
|
||||
positionLightbox();
|
||||
|
||||
// Apply appropriate transform scale based on viewport width
|
||||
const viewportWidth = window.innerWidth;
|
||||
if (viewportWidth <= 479) { // Mobile
|
||||
lightbox.style.transform = 'scale(1.2)';
|
||||
} else if (viewportWidth <= 959) { // Tablet
|
||||
lightbox.style.transform = 'scale(1.3)';
|
||||
} else if (viewportWidth <= 1219) { // Medium screens
|
||||
lightbox.style.transform = 'scale(1.4)';
|
||||
} else { // Large screens
|
||||
lightbox.style.transform = 'scale(1.5)';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user