96 lines
3.5 KiB
JavaScript
96 lines
3.5 KiB
JavaScript
var activeFlag = 'active';
|
|
|
|
function hookupPage() {
|
|
console.log("Hooking up home page...");
|
|
hookupNav();
|
|
hookupScroll();
|
|
// hookupProjectThumbnails();
|
|
hookupProjectDetailButtons();
|
|
}
|
|
function hookupNav() {
|
|
console.log("Hooking up nav...");
|
|
document.querySelectorAll('nav a').forEach(anchor => {
|
|
console.log("Hooking up nav anchor...");
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const section = document.querySelector(this.getAttribute('href'));
|
|
section.scrollIntoView({
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
});
|
|
}
|
|
function hookupScroll() {
|
|
console.log("Hooking up scroll...");
|
|
window.addEventListener('scroll', function() {
|
|
const sections = document.querySelectorAll('section');
|
|
const navLinks = document.querySelectorAll('nav a');
|
|
|
|
let current = '';
|
|
|
|
sections.forEach(section => {
|
|
const sectionTop = section.offsetTop;
|
|
if (scrollY >= sectionTop - 60) {
|
|
current = section.getAttribute('id');
|
|
}
|
|
});
|
|
|
|
navLinks.forEach(link => {
|
|
link.classList.remove(activeFlag);
|
|
if (link.getAttribute('href').substring(1) === current) {
|
|
link.classList.add(activeFlag);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
/*
|
|
function hookupProjectThumbnails() {
|
|
console.log("Hooking up project thumbnails...");
|
|
let demoButtonSelector = '.project-links .button';
|
|
document.querySelectorAll(demoButtonSelector).forEach(demoButton => {
|
|
console.log("Hooking up project thumbnail...");
|
|
let projectName = getProjectNameFromDemoButton(demoButton);
|
|
console.log({projectName});
|
|
demoButton.addEventListener('mouseover', function() {
|
|
let projectName = getProjectNameFromDemoButton(this);
|
|
let thumbnailContainer = getProjectThumbnailContainer(projectName);
|
|
thumbnailContainer.classList.add(activeFlag);
|
|
});
|
|
demoButton.addEventListener('mouseout', function() {
|
|
let projectName = getProjectNameFromDemoButton(this);
|
|
let thumbnailContainer = getProjectThumbnailContainer(projectName);
|
|
thumbnailContainer.classList.remove(activeFlag);
|
|
});
|
|
});
|
|
}
|
|
function getProjectNameFromDemoButton(demoButton) {
|
|
let projectName = demoButton.getAttribute('data-project');
|
|
console.log({projectName});
|
|
return projectName;
|
|
}
|
|
function getProjectThumbnailContainer(projectName) {
|
|
let container = document.querySelector(`div.project-thumbnail[data-project="${projectName}"]`);
|
|
console.log({container});
|
|
return container;
|
|
}
|
|
*/
|
|
function hookupProjectDetailButtons() {
|
|
console.log("Hooking up project detail buttons...");
|
|
let detailButtonSelector = '.project-detail-button';
|
|
document.querySelectorAll(detailButtonSelector).forEach(detailButton => {
|
|
console.log("Hooking up project detail button...");
|
|
detailButton.addEventListener('click', function() {
|
|
let projectDetailContainer = this.parentElement.querySelector('.project-detail-container');
|
|
let wasActive = projectDetailContainer.classList.contains(activeFlag);
|
|
if (wasActive) {
|
|
projectDetailContainer.classList.remove(activeFlag);
|
|
detailButton.innerText = 'Show Details';
|
|
}
|
|
else {
|
|
projectDetailContainer.classList.add(activeFlag);
|
|
detailButton.innerText = 'Hide Details';
|
|
}
|
|
});
|
|
});
|
|
}
|