Add renamed docs, backup, and Gitea workflow
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