Leadspace anchor link update (#362)

* Navattic hamburger icons. * Leadspace anchor link updation. * Leadspace scroll font fix. --------- Co-authored-by: keith-kaplan <[email protected]>
hlxsites · Dec 5, 2023 · e3dcf95 · e3dcf95
1 parent 7e9d563
commit e3dcf95
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/blocks/leadspace/leadspace.css b/blocks/leadspace/leadspace.css
@@ -681,6 +681,16 @@ main div.leadspace-wrapper {
     letter-spacing: var(--letter-spacing-02-em);
   }
 
+  .leadspace.video .scroll-border-text {
+    display: flex;
+    gap: var(--gap-16);
+    font-size: var(--font-size-14);
+  }
+
+  .leadspace.video .scroll-border-text #scroll-to-next {
+    cursor: pointer;
+  }
+
   .leadspace.video .video-modal-content video {
     max-height: 581px;
     width: 1033px;

diff --git a/blocks/leadspace/leadspace.js b/blocks/leadspace/leadspace.js
@@ -1,3 +1,5 @@
+/* eslint-disable no-plusplus */
+/* eslint-disable consistent-return */
 import { getMetadata, decorateButtons, decorateIcons } from '../../scripts/lib-franklin.js';
 import { createTag } from '../../scripts/scripts.js';
 
@@ -142,8 +144,30 @@ export default function decorate(block) {
 
     // add scroll border decoration
     const scrollBorder = createTag('div', { class: 'scroll-border-wrapper' });
-    scrollBorder.innerHTML = '<span class="scroll-border-line"></span><span class="scroll-border-text">SCROLL</span>';
+    scrollBorder.innerHTML = `<span class="scroll-border-line"></span>
+    <span class="scroll-border-text">SCROLL <svg id="scroll-to-next" onClick="scrollToNextSection()" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <path d="M10 3.125V16.875" stroke="#9900FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M4.375 11.25L10 16.875L15.625 11.25" stroke="#9900FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg></span>`;
+
     block.append(scrollBorder);
+    const scrollToNext = scrollBorder.querySelector('#scroll-to-next');
+    scrollToNext.addEventListener('click', () => {
+      const sections = document.querySelectorAll('.section');
+      let nextSection = null;
+
+      for (let i = 0; i < sections.length; i++) {
+        const sectionTop = sections[i].offsetTop;
+
+        if (sectionTop > 1000) {
+          nextSection = sections[i];
+          break; // Exit the loop once the next section is found
+        }
+      }
+      if (nextSection) {
+        nextSection.scrollIntoView({ behavior: 'smooth' });
+      }
+    });
 
     return;
   }