84 lines
2.9 KiB
JavaScript
84 lines
2.9 KiB
JavaScript
var activeFlag = 'active';
|
|
|
|
function hookupPage() {
|
|
console.log("Hooking up home page...");
|
|
hookupNav();
|
|
hookupScroll();
|
|
hookupProjectThumbnails();
|
|
}
|
|
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;
|
|
}
|
|
|
|
// Google Translate
|
|
function initGoogleTranslateElement() {
|
|
new google.translate.TranslateElement({
|
|
pageLanguage: 'en',
|
|
// layout: google.translate.TranslateElement.InlineLayout.SIMPLE
|
|
layout: google.translate.TranslateElement.InlineLayout.VERTICAL
|
|
}, 'google_translate_element');
|
|
}
|
|
|