72 lines
2.1 KiB
JavaScript
72 lines
2.1 KiB
JavaScript
const modeToggle = document.getElementById('modeToggle');
|
|
const modeLabel = document.getElementById('modeLabel');
|
|
const workItems = document.querySelectorAll('.work-item');
|
|
const workIndex = document.getElementById('workIndex');
|
|
const workTitle = document.getElementById('workTitle');
|
|
const workCopy = document.getElementById('workCopy');
|
|
const stageCard = document.querySelector('.stage-card');
|
|
const revealBlocks = document.querySelectorAll('.reveal');
|
|
const storedMode = window.localStorage.getItem('spectra-mode');
|
|
|
|
if (storedMode === 'light') {
|
|
document.body.classList.add('light-mode');
|
|
}
|
|
|
|
function applyMode() {
|
|
const isLight = document.body.classList.contains('light-mode');
|
|
modeToggle.textContent = isLight ? 'Dark Mode' : 'Light Mode';
|
|
modeLabel.textContent = isLight ? 'Editorial Light' : 'Editorial Dark';
|
|
window.localStorage.setItem('spectra-mode', isLight ? 'light' : 'dark');
|
|
}
|
|
|
|
function updateWorkStage(item) {
|
|
workItems.forEach((button) => {
|
|
button.classList.remove('is-active');
|
|
button.setAttribute('aria-selected', 'false');
|
|
});
|
|
|
|
item.classList.add('is-active');
|
|
item.setAttribute('aria-selected', 'true');
|
|
|
|
stageCard?.classList.remove('is-refreshing');
|
|
requestAnimationFrame(() => {
|
|
stageCard?.classList.add('is-refreshing');
|
|
window.setTimeout(() => {
|
|
stageCard?.classList.remove('is-refreshing');
|
|
}, 340);
|
|
});
|
|
|
|
workIndex.textContent = item.dataset.index || '';
|
|
workTitle.textContent = item.dataset.title || '';
|
|
workCopy.textContent = item.dataset.copy || '';
|
|
}
|
|
|
|
modeToggle?.addEventListener('click', () => {
|
|
document.body.classList.toggle('light-mode');
|
|
applyMode();
|
|
});
|
|
|
|
workItems.forEach((item) => {
|
|
item.addEventListener('click', () => {
|
|
updateWorkStage(item);
|
|
});
|
|
});
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('is-visible');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.18 },
|
|
);
|
|
|
|
revealBlocks.forEach((block) => observer.observe(block));
|
|
if (workItems[0]) {
|
|
updateWorkStage(workItems[0]);
|
|
}
|
|
applyMode();
|