website for beta festival 2024
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

142 lines
4.6 KiB

document.addEventListener('DOMContentLoaded', () => {
var accessOpen = false;
var grayscale = false;
var underline = false;
const accessBtn = document.getElementById('access-tab');
const accessCtn = document.getElementById('access-container')
const elements = document.querySelectorAll('.text-content p, #index-info p, #hyperlink-container, #page-header, .list-title, .list-artists, .list-details, #article-title, #article-text, .page-info-title, .page-info-entry, #article-information, #article-book');
const elements_underline = document.querySelectorAll('#page-header a, a, .hyperlink, #hyperlink-container a, .hyperlink-header');
const accessTextIncrease = document.getElementById('access-increase-text-size');
const accessTextDecrease = document.getElementById('access-decrease-text-size');
const accessUnderline = document.getElementById('access-underline');
const accessGrayscale = document.getElementById('access-grayscale');
const accessReset = document.getElementById('access-reset');
const accessItems = document.querySelectorAll('.access-item'); // New: Select access items
// Map to store original font sizes and line heights
const originalStyles = new Map();
// Store original styles
elements.forEach(element => {
const computedStyle = window.getComputedStyle(element);
originalStyles.set(element, {
fontSize: computedStyle.fontSize,
lineHeight: computedStyle.lineHeight
});
});
accessTextDecrease.addEventListener('click', () => {
adjustTextSize(0.9)
});
accessTextIncrease.addEventListener('click', () => {
adjustTextSize(1.1)
});
accessGrayscale.addEventListener('click', () => {
if (grayscale) {
deactivateGS();
grayscale = false;
} else {
activateGS();
grayscale = true;
}
});
accessUnderline.addEventListener('click', () => {
if (underline) {
removeUnderline();
underline = false;
} else {
addUnderline();
underline = true;
}
});
accessBtn.addEventListener('click', () => {
if (accessOpen) {
// close i
accessCtn.style.display = 'none'
accessItems.forEach(item => item.classList.remove('animate')); // Remove animation classes
accessOpen = false;
} else {
// open it
setTimeout(() => { // Ensure the display is set before starting the animation
accessCtn.style.right = '20px'; // Slide in
}, 10);
accessCtn.style.display = 'flex';
animateAccessItems(); // Animate items
accessOpen = true;
}
});
accessReset.addEventListener('click', () => {
reset();
});
function adjustTextSize(factor) {
elements.forEach(element => {
// Get the current font size of the element
const currentSize = parseFloat(window.getComputedStyle(element, null).getPropertyValue('font-size'));
// Calculate the new size based on the factor
const newSize = currentSize * factor;
// Apply the new size to the element
element.style.fontSize = `${newSize}px`;
element.style.lineHeight = `${newSize}px`;
});
}
function addUnderline() {
elements_underline.forEach(element => {
element.style.textDecoration = 'underline';
});
}
function removeUnderline() {
elements_underline.forEach(element => {
element.style.textDecoration = 'none';
});
}
function activateGS() {
document.documentElement.style.filter = 'grayscale(1) contrast(150%)';
}
function deactivateGS() {
document.documentElement.style.filter = '';
}
function reset() {
// Reset grayscale and underline
deactivateGS();
removeUnderline();
// Reset text size and line height
elements.forEach(element => {
if (originalStyles.has(element)) {
const { fontSize, lineHeight } = originalStyles.get(element);
element.style.fontSize = fontSize;
element.style.lineHeight = lineHeight;
}
});
// Reset flags
grayscale = false;
underline = false;
}
function animateAccessItems() {
accessItems.forEach((item, index) => {
setTimeout(() => {
item.classList.add('animate');
}, index * 150); // Stagger animation by 100ms per item
});
}
});