44 lines
1.4 KiB
JavaScript
44 lines
1.4 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 revealBlocks = document.querySelectorAll('.reveal');
|
|
|
|
function applyMode() {
|
|
const isLight = document.body.classList.contains('light-mode');
|
|
modeToggle.textContent = isLight ? 'Dark Mode' : 'Light Mode';
|
|
modeLabel.textContent = isLight ? 'Editorial Light' : 'Editorial Dark';
|
|
}
|
|
|
|
modeToggle?.addEventListener('click', () => {
|
|
document.body.classList.toggle('light-mode');
|
|
applyMode();
|
|
});
|
|
|
|
workItems.forEach((item) => {
|
|
item.addEventListener('click', () => {
|
|
workItems.forEach((button) => button.classList.remove('is-active'));
|
|
item.classList.add('is-active');
|
|
workIndex.textContent = item.dataset.index || '';
|
|
workTitle.textContent = item.dataset.title || '';
|
|
workCopy.textContent = item.dataset.copy || '';
|
|
});
|
|
});
|
|
|
|
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));
|
|
applyMode();
|