KAW-7905: add updated viewport and limit back-to-top on dealer pages

Netcentric · Sep 9, 2024 · aaea6d6 · aaea6d6
1 parent f22455a
commit aaea6d6
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 30 deletions.
diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
@@ -159,7 +159,7 @@ footer {
   }
 }
 
-@media (width >= 960px) {
+@media (width >= 1024px) {
   .footer .columns > div {
     gap: 24px;
     align-items: stretch;

diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js
@@ -48,46 +48,49 @@ export default async function decorate(block) {
   });
 
   // Back to top button
-  const backToTopNode = document.createRange().createContextualFragment(`
+  const path = window.location.pathname;
+  if (!(path.includes('importatori-dealer') || path.includes('import-dealers'))) {
+    const backToTopNode = document.createRange().createContextualFragment(`
     <button class="back-to-top">
       <img data-icon-name="arrow" src="/icons/chevron-up.svg" alt="" loading="lazy">
     </button>
   `);
 
-  footer.prepend(backToTopNode);
+    footer.prepend(backToTopNode);
 
-  const backToTopButton = footer.querySelector('.back-to-top');
-  const observer = new IntersectionObserver((entries) => {
-    entries.forEach((entry) => {
-      if (entry.isIntersecting) {
-        backToTopButton.style.position = 'absolute';
-        backToTopButton.style.bottom = `${entry.boundingClientRect.height + 80}px`;
-      } else {
-        backToTopButton.style.position = 'fixed';
-        backToTopButton.style.bottom = '80px';
-      }
+    const backToTopButton = footer.querySelector('.back-to-top');
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          backToTopButton.style.position = 'absolute';
+          backToTopButton.style.bottom = `${entry.boundingClientRect.height + 80}px`;
+        } else {
+          backToTopButton.style.position = 'fixed';
+          backToTopButton.style.bottom = '80px';
+        }
+      });
     });
-  });
-  observer.observe(footer);
+    observer.observe(footer);
 
-  window.addEventListener('scroll', () => {
-    const scrollPosition = window.scrollY + window.innerHeight;
-    const documentHeight = document.documentElement.scrollHeight;
+    window.addEventListener('scroll', () => {
+      const scrollPosition = window.scrollY + window.innerHeight;
+      const documentHeight = document.documentElement.scrollHeight;
 
-    // Display button if user scrolls close to the bottom, 40px above the footer
-    if (scrollPosition >= documentHeight / 3) {
-      backToTopButton.style.display = 'block';
-    } else {
-      backToTopButton.style.display = 'none';
-    }
-  });
+      // Display button if user scrolls close to the bottom, 40px above the footer
+      if (scrollPosition >= documentHeight / 3) {
+        backToTopButton.style.display = 'block';
+      } else {
+        backToTopButton.style.display = 'none';
+      }
+    });
 
-  footer.querySelector('.back-to-top').addEventListener('click', () => {
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth',
+    footer.querySelector('.back-to-top').addEventListener('click', () => {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
     });
-  });
+  }
 
   block.append(footer);
 }