Fix scroll spy & Elyahu issues

Zemaneh-Yosef · Sep 23, 2024 · cf60437 · cf60437
1 parent 3122ae1
commit cf60437
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 51 deletions.
diff --git a/assets/css/landing.css b/assets/css/landing.css
@@ -18,6 +18,7 @@ img#logo {
     z-index: 1500;
     transition: all 0.3s;
     filter: drop-shadow(0px 2px 6px rgba(0,0,0, .8));
+    object-fit: contain;
 }
 
 #logo:not(.stepO):not(.stepTw):not(.stepTh):not(.stepF) {

diff --git a/assets/js/landing.js b/assets/js/landing.js
@@ -1,50 +1,53 @@
 
-    var observer = new IntersectionObserver(onIntersection, {
-        root: null,   // default is the viewport
-        threshold: [0.1, 0.32, 0.52, 0.8, 1] // percentage of target's visible area. Triggers "onIntersection"
-    })
+var observer = new IntersectionObserver(onIntersection, {
+    root: null,   // default is the viewport
+    threshold: [0.1, 0.32, 0.52, 0.8, 1] // percentage of target's visible area. Triggers "onIntersection"
+})
 
-    // callback is called on intersection change
-    function onIntersection(entries, opts){
-        const navbarCollapsible = document.body.querySelector('#mainNav');
-        const logo = document.getElementById('logo');
-        if (!navbarCollapsible) {
-            return;
-        }
+const navBarElem = document.getElementById('mainNav');
+const navBarCollapse = document.getElementById('navbarResponsive');
+const logo = document.getElementById('logo');
 
-        entries.forEach(entry => {
-            if (entry.intersectionRatio == 1) {
-                navbarCollapsible.classList.remove('navbar-landing-shrink')
-                navbarCollapsible.classList.add('navbar-landing-expand')
-                navbarCollapsible.setAttribute('data-bs-theme', 'light')
-                logo.classList.remove('stepO', 'stepTw', 'stepTh', 'stepF')
+// callback is called on intersection change
+function onIntersection(entries, opts){
+    if (!navBarElem) {
+        return;
+    }
 
-                return;
-            }
+    entries.forEach(entry => {
+        if (entry.intersectionRatio == 1) {
+            navBarElem.classList.remove('navbar-landing-shrink')
+            navBarElem.classList.add('navbar-landing-expand')
+            navBarElem.setAttribute('data-bs-theme', 'light')
+            logo.classList.remove('stepO', 'stepTw', 'stepTh', 'stepF')
 
-            navbarCollapsible.classList.add('navbar-landing-shrink')
-            navbarCollapsible.classList.remove('navbar-landing-expand')
-            navbarCollapsible.removeAttribute('data-bs-theme')
+            return;
+        }
 
-            if (entry.intersectionRatio <= .1) {
-                logo.classList.add('stepF')
-                logo.classList.remove('stepO', 'stepTw', 'stepTh')
-            } else if (entry.intersectionRatio <= .32) {
-                logo.classList.add('stepTh')
-                logo.classList.remove('stepO', 'stepTw', 'stepF')
-            } else if (entry.intersectionRatio <= .52) {
-                logo.classList.remove('stepO', 'stepTh', 'stepF')
-                logo.classList.add('stepTw')
-            } else {
-                logo.classList.remove('stepTh', 'stepTw', 'stepF')
-                logo.classList.add('stepO')
-            }
-        })
-    }
+        navBarElem.classList.add('navbar-landing-shrink')
+        navBarElem.classList.remove('navbar-landing-expand')
+        navBarElem.removeAttribute('data-bs-theme')
 
-    // Use the observer to observe an element
-    observer.observe( document.getElementById('fakeLogo') )
+        if (entry.intersectionRatio <= .1) {
+            logo.classList.add('stepF')
+            logo.classList.remove('stepO', 'stepTw', 'stepTh')
+        } else if (entry.intersectionRatio <= .32) {
+            logo.classList.add('stepTh')
+            logo.classList.remove('stepO', 'stepTw', 'stepF')
+        } else if (entry.intersectionRatio <= .52) {
+            logo.classList.remove('stepO', 'stepTh', 'stepF')
+            logo.classList.add('stepTw')
+        } else {
+            logo.classList.remove('stepTh', 'stepTw', 'stepF')
+            logo.classList.add('stepO')
+        }
+    })
+}
+
+// Use the observer to observe an element
+observer.observe( document.getElementById('fakeLogo') )
 
+window.addEventListener('DOMContentLoaded', event => {
     //  Activate Bootstrap scrollspy on the main nav element
     const mainNav = document.body.querySelector('#mainNav');
     if (mainNav) {
@@ -55,15 +58,24 @@
         });
     };
 
-    // Collapse responsive navbar when toggler is visible
-    const navbarToggler = document.body.querySelector('.navbar-toggler');
-    const responsiveNavItems = [].slice.call(
-        document.querySelectorAll('#navbarResponsive .nav-link')
-    );
-    responsiveNavItems.map(function (responsiveNavItem) {
-        responsiveNavItem.addEventListener('click', () => {
-            if (window.getComputedStyle(navbarToggler).display !== 'none') {
-                navbarToggler.click();
-            }
-        });
-    });
+    for (const modal of document.getElementsByClassName('modal')) {
+        modal.addEventListener('hide.bs.modal', () => logo.style.removeProperty('display'));
+        modal.addEventListener('show.bs.modal', () => logo.style.display = 'none');
+    }
+})
+
+// Collapse responsive navbar when toggler is visible
+const navbarToggler = document.body.querySelector('.navbar-toggler');
+const responsiveNavItems = [].slice.call(
+    document.querySelectorAll('#navbarResponsive .nav-link')
+);
+responsiveNavItems.map(function (responsiveNavItem) {
+    responsiveNavItem.addEventListener('click', () => {
+        if (window.getComputedStyle(navbarToggler).display !== 'none') {
+            navbarToggler.click();
+        }
+    });
+});
+
+navBarCollapse.addEventListener('show.bs.collapse', () => { logo.style.width = '30vw'; logo.style.top = '.5em'; })
+navBarCollapse.addEventListener('hide.bs.collapse', () => { ['width', 'top'].forEach(prop => logo.style.removeProperty(prop)); })