Skip to content

Commit

Permalink
Leadspace anchor link updation.
Browse files Browse the repository at this point in the history
  • Loading branch information
nimithshetty17 committed Dec 5, 2023
1 parent 7b89cf2 commit 316d93e
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 6 deletions.
20 changes: 15 additions & 5 deletions blocks/leadspace/leadspace.css
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ main .leadspace-container > div:last-child { /* needs this specificity */
}

.section.leadspace-container {
position: relative;
background: var(--neutral-bone);
padding: 0;
overflow-x: clip;
Expand Down Expand Up @@ -216,11 +217,7 @@ main div.leadspace-wrapper {

.leadspace.brand-logo .button-group .button-container a {
font-weight: var(--font-weight-regular);
height: unset;
}

.leadspace.brand-logo .button-group .button-container a.tertiary {
margin-left: var(--spacer-element-05);
height: var(--spacer-element-10);
}

.leadspace.brand-logo .button-group .button-container:nth-child(3){
Expand Down Expand Up @@ -640,6 +637,10 @@ main div.leadspace-wrapper {
letter-spacing: var(--letter-spacing-001-em);
}

.leadspace.brand-logo .button-group .button-container a.tertiary {
margin-left: var(--spacer-element-05);
}

.leadspace.video .video-wrapper {
clip-path: circle(60% at 105% 42%);
margin-top: 0;
Expand Down Expand Up @@ -680,6 +681,15 @@ main div.leadspace-wrapper {
letter-spacing: var(--letter-spacing-02-em);
}

.leadspace.video .scroll-border-text {
display: flex;
gap: var(--gap-16);
}

.leadspace.video .scroll-border-text #scroll-to-next {
cursor: pointer;
}

.leadspace.video .video-modal-content video {
max-height: 581px;
width: 1033px;
Expand Down
26 changes: 25 additions & 1 deletion blocks/leadspace/leadspace.js
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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;
}
Expand Down

0 comments on commit 316d93e

Please sign in to comment.