Fix(Restructure): \n 1. Restructure project as normal production website. \n 2. Add link to live BathroomWarehouse store site. \n 3. Add webp thumbnails for each project.

2025-03-05 05:55:26 +00:00
parent 9550f09140
commit 6bb1f74395
5 changed files with 429 additions and 307 deletions
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -0,0 +1,83 @@
+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');
+}
+