Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Leadspace anchor link update #362

Merged
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