<div class="jump-to-section--container">
<section class="jump-to-section" data-behaviour="jump-to-section" aria-expanded="false" aria-controls="jump-to-section-minimize">
<div class="jump-to-section--header" tabindex="0" role="button" aria-label="On this page">
<h6 class="efl-heading-5">On this page</h6>
<div type="button" id="jump-to-section-minimize" class="jump-to-section-minimize" href="#" tabindex="-1">
<canvas id="jump-to-section-collapse-animation" width="25" height="48"></canvas>
</div>
</div>
<div class="jump-to-section__inner" data-share-collapse="false" data-bookmark-collapse="false">
<div class="jump-to-section__content">
<ul class="jump-to-section__links"></ul>
</div>
<div class="jump-to-section__actions">
<div class="jump-to-section__actions-group">
<div class="efl-learner-profile-in-page-bookmark" data-behavior="in-page-bookmark" data-user-fan-id="123456" data-bookmark-page-id="" data-bookmark-category="Article">
<div class="efl-learner-profile-in-page-bookmark__wrapper">
<a class="efl-learner-profile-in-page-bookmark__download" href="/" tabindex="0" aria-label="download"></a>
<button class="efl-learner-profile-in-page-bookmark__link logged-in" aria-label="bookmark this page"><span>Bookmark</span></button>
<button class="efl-learner-profile-in-page-bookmark__share-button" aria-label="share this page"></button>
<div class="efl-learner-profile-in-page-bookmark__list hidden">
<p class="title" data-bookmark-title-add="Add to list" data-bookmark-title-remove="Remove bookmark from">Add to list</p>
<a class="bookmark-remove-all hidden" tabindex="0">Remove from all</a>
<div class="bookmark-list">
<div aria-checked="true" class="bookmark-list--item">
<input type="checkbox" id="checkbox--my-bookmark-list" value="My Bookmark list" class="">
<label for="checkbox--my-bookmark-list">My Bookmark list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--attacking-list" value="Attacking list" class="">
<label for="checkbox---attacking-list">Attacking list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--defending-list" value="Defending list" class="">
<label for="checkbox---defending-list">Defending list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--defending-list" value="coaching" class="">
<label for="checkbox---coaching">Coaching</label>
</div>
</div>
<a class="bookmark-create-list" tabindex="0">Create a new bookmark list</a>
<a class="bookmark-done">Done</a>
<a href="#" class="cta cta--primary view-all-bookmarks" tabindex="0">View all bookmarks</a>
</div>
<div class="efl-learner-profile-in-page-bookmark__share--popup hidden jump-to-hide">
<div class="efl-learner-profile__social-links__list">
<div>
<div class="copy" data-copied-text="Link Copied!" data-copy-url="http://www.google.co.uk/" role="button" aria-label="Copy link" tabindex="0">
<img src=/assets/example-content/learner-profile/copy.svg>
</div>
<p>Copy link</p>
</div>
<div>
<a href="#" aria-label="Facebook">
<img src=/assets/example-content/learner-profile/facebook.svg>
</a>
<p>Facebook</p>
</div>
<div>
<a href="#" aria-label="Twitter">
<img src=/assets/example-content/learner-profile/twitter.svg>
</a>
<p>Twitter</p>
</div>
<div>
<a href="#" aria-label="Linkedin">
<img src=/assets/example-content/learner-profile/linkedin.svg>
</a>
<p>Linkedin</p>
</div>
<div>
<a href="#" aria-label="Whatsapp">
<img src=/assets/example-content/learner-profile/whatsapp.svg>
</a>
<p>Whatsapp</p>
</div>
</div>
</div>
</div>
<div class="efl-learner-profile-in-page-bookmark__signin-popup hidden">
<h3><span class="jumpTohide">SIGN IN</span></h3>
<div class="popup-copy">
In order to bookmark this article, please Sign In or Create an EFL Account.
</div>
<a href="#" class="cta cta--primary in-page-bookmark-login" tabindex="0">Login</a>
<a href="#" class="cta cta--primary in-page-bookmark-signup" tabindex="0">Sign up</a>
</div>
<div class="efl-learner-profile__section efl-learner-profile-bookmark__popup hidden">
<div class="steps step1">
<div class="efl-learner-profile__section--header">
<h4 class="create-bookmark-list" data-create-heading="Create list" data-edit-heading="Rename list">Create list</h4>
</div>
<div class="efl-learner-profile-bookmark__popup--copy" data-create-text="Give your list a name, then select 'create'." data-update-text="Give your list a name, then select 'save'.">
Give your list a name, then select 'create'.
</div>
<div class="efl-learner-profile-bookmark__popup--form">
<label>List name</label>
<input type="text" placeholder="Prompt text" maxlength="100" class="bookmark-list-name" aria-label="list name" />
<p><span class="bookmark-list-name-count">0</span>/100</p>
<div class="bookmark-desc-wrapper hidden">
<label>List description</label>
<textarea placeholder="Prompt text" maxlength="500" class="bookmark-list-desc" aria-label="list description"></textarea>
<p><span class="bookmark-list-desc-count">0</span>/500</p>
</div>
<div class="bookmark-add-desc" role="button" tabindex="0" data-add-text="Optional - add list description" data-cancel-text="Cancel adding list description" aria-label="Optional - add list description">Optional - add list description</div>
<button class="cta cta--primary create-new-bookmark" aria-label="create new bookmark">
<span>create</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary edit-bookmark-list hidden" aria-label="save bookmark list">
<span>save</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary cancel-create-bookmark" aria-label="cancel create bookmark">cancel</button>
<input type="hidden" class="bookmark-list-article-link" value="/articles">
<input type="hidden" class="bookmark-list-session-link" value="/sessions">
</div>
</div>
<div class="steps step2 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">List already exists</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
The name you've chosen for this list already exists.
</div>
<button class="cta cta--primary edit-bookmark-name" aria-label="edit name bookmark">Edit name</button>
</div>
<div class="steps step3 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Delete list</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy no-border">
Are you sure you want to delete this list?
</div>
<button class="cta cta--primary delete-bookmark-list" aria-label="yes, delete this list">
<span>Yes, delete this list</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary cancel-bookmark-delete" aria-label="no, return to list">no, return to list</button>
</div>
<div class="steps step4 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Remove Bookmark</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy no-border">
Are you sure you want to remove this bookmark?
</div>
<button class="cta cta--primary remove-bookmark-item" aria-label="yes, remove bookmark item">Yes, remove this bookmark</button>
<button class="cta cta--primary cancel-remove-bookmark" aria-label="no, return to list">No, return to list</button>
</div>
<div class="steps step5 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Innapropriate content</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<button class="cta cta--primary error-bookmark-name" aria-label="edit name error bookmark">Edit name</button>
</div>
<div class="steps step6 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Error</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<button class="cta cta--primary server-error-bookmark" aria-label="try again bookmark">Try again</button>
</div>
</div>
</div>
<hr>
<button class="jump-to-section-share-button" id="jump-to-section-share-button" aria-label="Share this page">Share</button>
</div>
<div class="jump-to-section__social-links">
<button class="efl-profile-left-popup__back" aria-label="go back to share"></button>
<div class="efl-learner-profile__social-links__list">
<div>
<div class="copy" data-copy-url="http://www.google.co.uk/" role="button" aria-label="Copy link" tabindex="0">
<img src=/assets/example-content/learner-profile/copy.svg>
</div>
</div>
<div>
<a href="#" aria-label="Facebook">
<img src=/assets/example-content/learner-profile/facebook.svg>
</a>
</div>
<div>
<a href="#" aria-label="Twitter">
<img src=/assets/example-content/learner-profile/twitter.svg>
</a>
</div>
<div>
<a class="linkedin" href="#" aria-label="Linkedin">
<img src=/assets/example-content/learner-profile/linkedin.svg>
</a>
</div>
<div>
<a href="#" aria-label="Whatsapp">
<img src=/assets/example-content/learner-profile/whatsapp.svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="efl-survey" data-behavior="efl-survey" data-survey-page-id="0adce9dc54d9477c9b4dec27d2cb92a3" data-fanid="1112">
<div class="efl-survey__header">
<canvas id="efl-survey__header--icon" width="48" height="48"></canvas>
<button class="efl-survey__close" aria-label="close efl survey"></button>
</div>
<div class="efl-survey__questions">
<div class="efl-survey__questions--steps step1" data-question-id="5f85f9e1837e411b958e2bddb39c2d6a">
<div class="steps-no">1/2</div>
<h4>Is this session plan useful?</h4>
<a class="cta cta--primary survey-useful-yes" data-answer-id="44fb0a97693d47d38451c5a6e9c48b1e">Yes</a>
<a class="cta cta--primary survey-useful-no" data-answer-id="686ebe8efb0c45899f38b81fc3c4c060">No</a>
</div>
<div class="efl-survey__questions--steps step2 hidden" data-question-id="8a861add140447789f420198d5b5b231">
<div class="steps-no">2/2</div>
<h4>Have you / will you use this in practise?</h4>
<a class="cta cta--primary survey-practise-yes" data-answer-id="b50384d2a5e544d4beb632298199a572">Yes</a>
<a class="cta cta--primary survey-practise-no" data-answer-id="f26b0939d09e4e369357888710e2202f">No</a>
</div>
<div class="efl-survey__questions--steps step3 hidden" data-question-id="c8c250f4df23408695deb10a2cce5345">
<h4>Thanks! Your feedback help us to improve our content!</h4>
</div>
<div class="efl-survey__questions--steps step4 hidden" data-question-id="9cdf4b8f4882465cb85462f83c0dba0e">
<div class="steps-no">2/2</div>
<h4>Why not?</h4>
<a class="cta cta--primary survey-not-needed" data-answer-id="03aa8fb7d8274e5faf07c020a469de53">Not needed at the moment</a>
<a class="cta cta--primary survey-complicated" data-answer-id="e31a4944ae1d45698b1556c8128c4c4f">To complicated</a>
<a class="cta cta--primary survey-not-useful" data-answer-id="d8dbbbcd88474b1b809728f889f3a373">Dont find it useful</a>
<a class="cta cta--primary survey-other-reason" data-answer-id="11929ea39f1e4763af2934eeb1be5d35">Other reason</a>
</div>
<div class="efl-survey__questions--steps step5 hidden">
<h4>Would you like to tell us more?</h4>
<textarea maxlength="500" placeholder="Leave your feedback here..."></textarea>
<div class="survey-reason-note">
<p><span class="character-count">0</span>/500 characters</p>
<a class="clear-text" href="#">Clear Text</a>
</div>
<a class="cta cta--primary survey-submit-reason">SUBMIT</a>
</div>
</div>
</div>
</div>
No notes defined.
{
"in-page-bookmark": {
"jumpToSection": true
},
"links": [
{
"image": "/assets/example-content/learner-profile/copy.svg",
"copy": "Copy link",
"copyLink": true
},
{
"image": "/assets/example-content/learner-profile/facebook.svg",
"copy": "Facebook"
},
{
"image": "/assets/example-content/learner-profile/twitter.svg",
"copy": "Twitter"
},
{
"image": "/assets/example-content/learner-profile/linkedin.svg",
"copy": "Linkedin",
"linkedIn": true
},
{
"image": "/assets/example-content/learner-profile/whatsapp.svg",
"copy": "Whatsapp"
}
]
}
import { Rive, Fit, Layout } from '@rive-app/canvas';
import {
detectScrollDirection,
findPos,
} from '../efl-filter-bar/efl-filter-bar';
const MOBILE_BREAKPOINT = 820;
export default parentElement => {
let jumpToSection = '';
let container = '';
let leftBlock = '';
let count = 0;
let topGap = 0;
const contentArea = document.querySelector('main');
const pageTitles = contentArea.querySelectorAll('h1, h2, h3');
const bookmarkList = parentElement.querySelector(
'.efl-learner-profile-in-page-bookmark__list'
);
const columnLayout = parentElement.closest(
'.efl-column-layout.efl-column-layout--two'
);
let defaultWidth = window.innerWidth;
if (columnLayout) {
leftBlock = columnLayout.querySelector(
'.efl-column-layout__col:first-child > *:first-child'
);
}
const mobileElementContainer = parentElement.parentElement.cloneNode(true);
const mobileElement = mobileElementContainer.firstElementChild;
mobileElement.removeAttribute('data-behaviour');
if (window.innerWidth > MOBILE_BREAKPOINT) {
jumpToSection = parentElement;
container = parentElement.parentElement;
} else {
jumpToSection = mobileElement;
container = mobileElementContainer;
leftBlock.parentNode.insertBefore(
mobileElementContainer,
leftBlock.nextSibling
);
}
if (!bookmarkList) {
jumpToSection
.querySelector('.jump-to-section__actions')
.classList.add('bookmark-disabled');
}
// const parentColumn = jumpToSection.closest('.efl-column-layout__col');
const header = jumpToSection.querySelector('.jump-to-section--header');
const modal = container.querySelector('.jump-to-section__modal');
const modalExitBtn = jumpToSection.querySelector(
'#close-jump-to-section-modal'
);
const innerContainer = jumpToSection.querySelector('.jump-to-section__inner');
const contentContainer = jumpToSection.querySelector(
'.jump-to-section__actions'
);
const actionContainer = jumpToSection.querySelector(
'.jump-to-section__actions-group'
);
const linksContainer = jumpToSection.querySelector('.jump-to-section__links');
const originalPos = findPos(container);
const shareBtn = jumpToSection.querySelector('#jump-to-section-share-button');
const backtoListBtn = jumpToSection.querySelector(
'.efl-profile-left-popup__back'
);
// Rive
const collapseCanvas = jumpToSection.querySelector(
'#jump-to-section-collapse-animation'
);
const lyout = new Layout({
fit: Fit.Cover,
});
const riveCollapse = new Rive({
src: '/assets/example-content/jumptotransparent.riv',
canvas: collapseCanvas,
layout: lyout,
onLoad: () => {
riveCollapse.resizeDrawingSurfaceToCanvas();
},
});
const resetJumpToLinks = element => {
const links = element.querySelectorAll('a');
links.forEach(link => {
link.remove();
});
};
const linksToHighlight = () => {
const currentPos = window.scrollY;
const links = parentElement.querySelectorAll('.jump-to-section__links a');
let activeLink;
links.forEach(item => {
const linkRef = item.getAttribute('href');
const titleAnchor = document.querySelector(`${linkRef}`);
const titlePos = findPos(titleAnchor);
item.classList.remove('active');
if (currentPos > titlePos - 10) {
activeLink = item;
}
});
if (activeLink) {
setTimeout(() => {
links.forEach(item => {
item.classList.remove('active');
});
activeLink.classList.add('active');
}, 350);
}
};
const linkScrollTo = (e, linkId) => {
if (window.innerWidth <= MOBILE_BREAKPOINT) {
e.preventDefault();
const linkSection = document.querySelector(
`#jump-to-section-link-${linkId}`
);
const linkPos = findPos(linkSection);
let offsetVal = 76;
if (!container.classList.contains('sticky')) {
offsetVal = container.offsetHeight;
}
// console.log(offsetVal);
if (window.scrollY > linkPos) {
window.scroll(0, linkPos - 76);
} else if (offsetVal === 76) {
window.scroll(0, linkPos);
} else {
window.scroll(0, linkPos - offsetVal);
}
jumpToSection.setAttribute('aria-expanded', 'false');
container.classList.remove('expanded');
}
};
const createJumpToLinks = element => {
// reset the link if already build
resetJumpToLinks(element);
pageTitles.forEach((item, index) => {
const link = document.createElement('a');
// let desc = '';
// if (item.nextElementSibling) {
// desc = item.nextElementSibling.innerText;
// } else {
// desc = '';
// }
const jumptoLink = item.querySelector('.jumpTohide');
if (jumptoLink) {
link.classList.add('hidden');
}
link.removeAttribute('id');
if (
!jumptoLink &&
count < 7 &&
item.innerText.trim() !== '' &&
!item.closest('.efl-search-mechanic') &&
!item.closest('.bundled-learning-inpage-question') &&
!item.closest('.bundled-learning-promo')
) {
link.setAttribute('href', `#jump-to-section-link-${index + 1}`);
link.innerHTML = `<h5>${item.innerText}</h5>`;
link.setAttribute('aria-label', `Jump to ${item.innerText}`);
element.appendChild(link);
link.addEventListener('click', event => {
linkScrollTo(event, index + 1);
});
if (document.querySelector(`#jump-to-section-link-${index + 1}`)) {
document
.querySelector(`#jump-to-section-link-${index + 1}`)
.removeAttribute('id');
}
item.setAttribute('id', `jump-to-section-link-${index + 1}`);
// eslint-disable-next-line no-plusplus
count++;
}
});
// element.appendChild(linksContainer);
};
const defaultSettings = () => {
count = 0;
if (window.innerWidth > MOBILE_BREAKPOINT) {
mobileElement.classList.add('hidden');
jumpToSection = parentElement;
container = parentElement.parentElement;
if (leftBlock) {
const firstCol = columnLayout.querySelector(
'.efl-column-layout__col:first-child'
);
const jumpMob = firstCol.querySelector('.jump-to-section');
if (jumpMob) {
jumpMob.remove();
}
}
createJumpToLinks(linksContainer);
riveCollapse.play('Open');
jumpToSection.setAttribute('aria-expanded', 'true');
container.classList.add('expanded');
topGap = 40;
} else if (leftBlock) {
parentElement.classList.add('hidden');
jumpToSection = mobileElement;
container = mobileElementContainer;
const jumpMob = leftBlock.querySelector('.jump-to-section');
if (!jumpMob) {
leftBlock.parentNode.insertBefore(
mobileElementContainer,
leftBlock.nextSibling
);
}
createJumpToLinks(linksContainer);
}
};
defaultSettings();
window.addEventListener('resize', () => {
if (defaultWidth !== window.innerWidth) {
defaultSettings();
defaultWidth = window.innerWidth;
}
});
header.addEventListener('click', e => {
e.preventDefault();
if (jumpToSection.getAttribute('aria-expanded') === 'true') {
riveCollapse.play('Close');
jumpToSection.setAttribute('aria-expanded', 'false');
container.classList.remove('expanded');
} else {
riveCollapse.play('Open');
jumpToSection.setAttribute('aria-expanded', 'true');
container.classList.add('expanded');
}
});
header.addEventListener('keydown', e => {
if (e.keyCode === 13) {
header.click();
}
});
shareBtn.addEventListener('click', () => {
if (innerContainer.getAttribute('data-share-collapse') === 'false') {
innerContainer.setAttribute('data-share-collapse', 'true');
contentContainer.scrollTo({
left: actionContainer.clientWidth,
behaviour: 'smooth',
});
} else {
innerContainer.setAttribute('data-share-collapse', 'false');
contentContainer.scrollTo({
left: 0,
behaviour: 'smooth',
});
}
});
shareBtn.addEventListener('keydown', e => {
if (e.keyCode === 13) {
setTimeout(() => {
backtoListBtn.focus();
}, 500);
}
});
backtoListBtn.addEventListener('click', e => {
e.preventDefault();
innerContainer.setAttribute('data-share-Collapse', 'false');
contentContainer.scrollTo({
left: '0%',
behaviour: 'smooth',
});
});
backtoListBtn.addEventListener('keydown', e => {
if (e.keyCode === 13) {
backtoListBtn.click();
setTimeout(() => {
shareBtn.focus();
}, 500);
}
});
if (modal) {
modalExitBtn.addEventListener('click', () => {
modal.classList.add('hidden');
setTimeout(() => {
modal.style.display = 'none';
}, 500);
});
}
window.addEventListener('scroll', () => {
// set the max-height of inner container so that it can be animated
if (!innerContainer.hasAttribute('style')) {
innerContainer.style.maxHeight = `${innerContainer.scrollHeight +
jumpToSection.querySelector('.jump-to-section--header') +
jumpToSection.querySelector('.jump-to-section__actions').scrollHeight +
jumpToSection.querySelector('.efl-profile-left-popup__back')
.scrollHeight}px`;
}
// set default modal max-height to be animated
if (modal && jumpToSection.getAttribute('aria-expanded') === 'true') {
modal.style.maxHeight = `${modal.scrollHeight}px`;
}
// delay sticky to prevent the jump to section tab
// getting stuck in the middle or behind global navigation
setTimeout(() => {
const headerIsShowing = detectScrollDirection();
let headerEleHeight = 0;
if (headerIsShowing) {
headerEleHeight = headerIsShowing;
}
if (originalPos < window.scrollY + headerEleHeight - topGap) {
container.style.top = `${headerEleHeight + topGap}px`;
container.classList.add('sticky');
} else {
container.classList.remove('sticky');
// re-expand jump to section when scrolling to top
if (window.innerWidth > MOBILE_BREAKPOINT) {
if (jumpToSection.getAttribute('aria-expanded') !== 'true') {
riveCollapse.play('Open');
jumpToSection.setAttribute('aria-expanded', 'true');
container.classList.add('expanded');
}
}
}
linksToHighlight();
}, 300);
if (container.classList.contains('sticky')) {
if (
jumpToSection.getAttribute('aria-expanded') !== 'false' &&
// do not auto close if bookmark list is open
bookmarkList &&
bookmarkList.classList.contains('hidden')
) {
riveCollapse.play('Close');
jumpToSection.setAttribute('aria-expanded', 'false');
container.classList.remove('expanded');
} else if (
jumpToSection.getAttribute('aria-expanded') !== 'false' &&
!bookmarkList
) {
riveCollapse.play('Close');
jumpToSection.setAttribute('aria-expanded', 'false');
container.classList.remove('expanded');
}
}
// else if (jumpToSection.getAttribute('aria-expanded') !== 'true') {
// // set default column height to prevent UI shift on scroll
// // ONLY WHILE NOT STICKY/FIXED AND NOT EXPANDED
// if (
// !parentColumn.hasAttribute('style') &&
// window.innerWidth < MOBILE_BREAKPOINT
// ) {
// parentColumn.style.minHeight = `${parentColumn.clientHeight}px`;
// }
// }
});
};
/* stylelint-disable no-descending-specificity */
.jump-to-section {
@include rte;
display: flex;
grid-template-columns: auto;
grid-template-areas:
'head'
'links'
'actions';
padding: 0;
border: 0.1rem solid $grey-light;
border-radius: 0.8rem;
background-color: $white;
color: $blue;
flex-direction: column;
&--container {
transition: all 0.3s ease-in-out 0s;
top: 4rem;
display: grid;
grid-template-columns: 31.2rem;
gap: 2.4rem;
&.sticky {
position: fixed;
z-index: 9;
}
&:not(.expanded) {
.jump-to-section__modal {
max-height: 0 !important;
padding: 0 !important;
border: none;
opacity: 0;
}
}
}
&--header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.8rem 2.4rem;
border-radius: 0.8rem;
grid-area: head;
cursor: pointer;
min-width: 31.2rem;
.jump-to-section-minimize {
display: flex;
width: 2.5rem;
height: 4.8rem;
}
}
&__hyphen {
color: $red;
padding-right: 0.8rem;
}
&__modal {
overflow-y: hidden;
background-color: $white;
border-radius: 0.8rem;
border: 0.1rem solid $grey-light;
padding: 2.4rem 0;
box-shadow: 0 5px 10px rgba(91, 104, 133, 0.05);
transition: all 0.4s ease-in-out 0s;
opacity: 1;
h4 {
color: $blue;
padding-top: 1.6rem;
margin-bottom: 0.4rem;
}
p {
color: $color-interface-light;
}
&.hidden {
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0;
}
&__inner {
padding: 0 2.4rem;
}
button {
display: flex;
justify-content: center;
align-items: center;
border: none;
cursor: pointer;
background-color: transparent;
color: $blue;
width: 4.4rem;
height: 4.4rem;
&:hover {
background-color: $grey-light;
}
&::after {
content: '';
display: block;
width: 1.2rem;
height: 1.2rem;
background: url('./assets/images/close.svg') no-repeat center;
}
}
.jump-to-section--header {
&::after {
display: none;
}
}
}
&__links {
overflow-y: hidden;
min-width: 31.2rem;
margin: 0 !important;
padding: 0 !important;
grid-area: links;
transition: max-height 0.4s ease-in-out 0s;
a {
display: flex;
flex-direction: column;
color: unset;
text-decoration: none;
margin: 0 1rem;
&::after {
content: '';
border-bottom: 1px solid #eceef3;
height: auto;
margin: 0 1.4rem;
}
h5 {
padding: 0.6rem 1.4rem;
}
&:first-child {
&::before {
content: '';
border-bottom: 1px solid #eceef3;
height: auto;
margin: 0 1.4rem;
}
}
&:hover,
&.active {
background-color: $grey-light;
border-radius: 10rem;
}
}
}
&__actions {
display: flex;
flex-direction: row;
align-items: center;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
overflow: hidden;
width: 31.2rem;
}
&__actions-group {
display: grid;
grid-template-columns: 5fr auto 4fr;
grid-area: actions;
padding: 1.6rem 2.4rem 1.6rem 2.4rem;
min-width: 31.2rem;
hr {
margin: 0.8rem 0;
padding: 0;
border-radius: 0;
border: 0.1rem solid $grey-light;
}
.jump-to-section-share-button,
.efl-learner-profile-in-page-bookmark__link {
display: flex;
align-items: center;
border: none;
background-color: transparent;
text-decoration: none;
font-size: 16px;
font-weight: 700;
line-height: 1.6rem;
padding: unset;
letter-spacing: 0.14em;
color: $color-interface-light;
text-transform: uppercase;
cursor: pointer;
&::before {
content: '';
display: block;
width: 3.4rem;
height: 3.4rem;
margin-right: 0.9rem;
border: 0.2rem solid $light-blue;
border-radius: 100%;
}
&:hover {
color: $blue;
&::before {
background-color: $light-blue;
}
}
span {
display: block;
}
}
.efl-learner-profile-in-page-bookmark__wrapper {
position: relative;
right: 0;
.efl-learner-profile-in-page-bookmark__link {
&::before {
flex: 1 0 auto;
background: url('./assets/images/jump-to-section-bookmark.svg')
no-repeat center;
}
}
.efl-learner-profile-in-page-bookmark__list {
transform: translateX(8%);
.bookmark-list {
@include efl-scrollbar();
overflow-y: scroll;
}
}
}
#jump-to-section-share-button {
margin-left: auto;
&::before {
background-image: url('./assets/images/jump-to-section-share.svg');
background-repeat: no-repeat;
background-position: center;
}
}
&.bookmark-disabled {
grid-template-columns: auto;
justify-content: left;
hr {
display: none;
}
}
}
&__social-links {
display: flex;
flex-direction: row;
align-items: center;
min-width: 31.2rem;
.efl-profile-left-popup__back {
padding: 1.2rem 2rem 1.2rem 2.5rem;
border: none;
background: none;
cursor: pointer;
&::before {
content: '';
display: inline-block;
background-image: url('./assets/images/action-back.svg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 1.1rem;
height: 1.7rem;
margin-top: 0.4rem;
}
}
.efl-learner-profile__social-links__list {
column-gap: 1.1rem;
margin: 0;
padding: 0;
width: 23.7rem;
div {
align-items: center;
a,
.copy {
width: 3.8rem;
height: 3.8rem;
border: 0.3rem solid $light-blue;
position: relative;
cursor: pointer;
img {
width: 2rem !important;
height: 2rem !important;
}
.canvas {
width: 2rem !important;
height: 2rem !important;
position: absolute;
top: 5px !important;
display: flex;
canvas {
width: 2.4rem !important;
height: 2.4rem !important;
}
&.transparent {
opacity: 0;
}
}
}
}
}
overflow: hidden;
margin: 0 !important;
grid-area: links;
}
&__content {
display: flex;
overflow-x: hidden;
width: 31.2rem;
}
&__inner {
display: flex;
transition: max-height 0.4s ease-in-out 0.1s;
flex-direction: column;
max-height: 100%;
&[data-share-collapse='true'] {
.jump-to-section-share-button::before {
background-color: $light-blue;
}
}
&[data-bookmark-open='true'] {
.jump-to-section-bookmark {
background-color: $light-blue;
&::before {
background: url('./assets/images/jump-to-section-bookmark.svg')
no-repeat center;
}
}
}
.jump-to-section__links,
.jump-to-section__actions-group {
opacity: 1;
transition: opacity 0.4s ease-in-out 0s;
}
}
&[aria-expanded='false'] {
background-color: rgba(255, 255, 255, 0.7);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
.jump-to-section--header {
&:hover {
background-color: $grey-light;
}
}
.jump-to-section__inner {
overflow: hidden;
max-height: 0 !important;
.jump-to-section__links,
.jump-to-section__actions-group {
opacity: 0.3;
}
}
}
&[aria-expanded='true'] {
.jump-to-section--header {
&:hover {
background-color: $grey-light;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
}
/* stylelint-disable no-duplicate-selectors */
h4 {
color: $blue;
font-family: $text-font-ef;
font-size: 1.6rem;
font-style: normal;
font-weight: 700;
line-height: 1.6rem;
letter-spacing: 0.3rem;
text-align: left;
margin-bottom: 0;
}
h4::after {
display: block;
content: '';
width: 100%;
border-bottom: 1px solid #eceef3;
margin-top: 1.6rem;
margin-bottom: 0.8rem;
}
h4::before {
display: block;
content: '';
width: 100%;
border-bottom: 1px solid #eceef3;
margin-bottom: 1.6rem;
}
h5 {
display: flex;
color: $blue;
font-family: $text-font-ef;
font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: 3.2rem;
letter-spacing: 0;
text-align: left;
margin-bottom: 0;
@include text-limit(1);
}
h5::before {
content: '';
width: 1rem;
height: 1.3rem;
color: $red;
border-bottom: 1px solid $red;
display: inline-block;
align-items: center;
justify-content: center;
margin-right: 0.8rem;
margin-bottom: 0.4rem;
}
p {
font-family: $text-font-ef;
color: $color-interface-light;
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 2rem;
letter-spacing: 0.02em;
text-align: left;
position: relative;
@include text-limit(2);
}
.efl-learner-profile-in-page-bookmark__share-button {
display: none;
}
@media screen and (min-width: $mq-medium) and (max-width: $mq-large) {
&--container {
right: 10rem;
}
width: 100%;
}
@media screen and (max-width: 819px) {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
+ .jump-to-section__modal {
display: none;
}
.efl-learner-profile__social-links__list div {
&:first-child,
&:last-child {
padding-left: 0;
padding-right: 0;
}
.canvas {
top: 5px !important;
canvas {
width: 2.4rem !important;
height: 2.4rem !important;
}
}
}
&[aria-expanded='true'] {
margin-bottom: 2.4rem;
+ .jump-to-section__modal {
display: block;
margin-bottom: 1.6rem;
}
&--header {
margin-bottom: 1.6rem;
}
}
&[aria-expanded='false'] {
&:hover {
background-color: $white;
}
}
&--container {
display: flex;
flex-direction: column;
background-color: $white;
top: 0;
left: 0;
right: 0;
.jump-to-section {
box-shadow: none;
}
&.expanded {
gap: 0;
}
&.expanded.sticky {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
.jump-to-section {
box-shadow: none;
border: none;
.jump-to-section__content,
.jump-to-section__links,
.jump-to-section__social-links,
.jump-to-section__actions,
.jump-to-section__actions-group {
min-width: 100%;
}
.jump-to-section--header {
border-radius: 0;
&:hover {
background-color: $white;
}
}
.jump-to-section__social-links .efl-profile-left-popup__back {
padding: 1.2rem 2rem 1.2rem 0;
}
.jump-to-section__social-links
.efl-learner-profile__social-links__list {
column-gap: 2.1rem;
width: 27.7rem;
}
}
}
&.sticky {
.jump-to-section {
.jump-to-section--header {
padding: 0.8rem 3.2rem;
}
.jump-to-section__content {
padding: 0 0.8rem;
}
&[aria-expanded='true'] {
margin-bottom: 0.8rem;
}
}
.efl-survey {
max-width: calc(100vw - 6.4rem);
margin-bottom: 3.2rem;
}
.jump-to-section__social-links,
.jump-to-section__actions-group {
padding: 1.6rem 3.2rem 1.6rem 3.2rem;
min-width: 100%;
}
.jump-to-section__social-links .efl-profile-left-popup__back {
padding: 1.2rem 2rem 1.2rem 0;
}
.jump-to-section__social-links
.efl-learner-profile__social-links__list {
column-gap: 2.1rem;
width: 27.7rem;
}
}
&.sticky:not(.expanded) {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
.jump-to-section {
margin-bottom: 0;
.jump-to-section--header {
border-radius: 0;
padding: 0.8rem 3.2rem;
&:hover {
background-color: $white;
}
}
}
}
&.expanded:not(.sticky) {
> * {
margin-left: 0;
margin-right: 0;
}
.jump-to-section__content,
.jump-to-section__links,
.jump-to-section__social-links,
.jump-to-section__actions,
.jump-to-section__actions-group {
min-width: 100%;
}
}
}
&__actions-group {
.efl-learner-profile-in-page-bookmark__wrapper
.efl-learner-profile-in-page-bookmark__list {
transform: none;
}
}
&__modal {
margin: 0 3.2rem;
}
}
}
<div class="jump-to-section--container">
<section
class="jump-to-section"
data-behaviour="jump-to-section"
aria-expanded="false"
aria-controls="jump-to-section-minimize"
>
<div class="jump-to-section--header" tabindex="0" role="button" aria-label="On this page">
<h6 class="efl-heading-5">On this page</h6>
<div
type="button"
id="jump-to-section-minimize"
class="jump-to-section-minimize"
href="#"
tabindex="-1"
>
<canvas id="jump-to-section-collapse-animation" width="25" height="48"></canvas>
</div>
</div>
<div
class="jump-to-section__inner"
data-share-collapse="false"
data-bookmark-collapse="false"
>
<div class="jump-to-section__content">
<ul class="jump-to-section__links"></ul>
</div>
<div class="jump-to-section__actions">
<div class="jump-to-section__actions-group">
{{render '@efl-learner-profile-in-page-bookmark' in-page-bookmark merge="true"}}
<hr>
<button class="jump-to-section-share-button" id="jump-to-section-share-button" aria-label="Share this page">Share</button>
</div>
<div class="jump-to-section__social-links">
<button class="efl-profile-left-popup__back" aria-label="go back to share"></button>
<div class="efl-learner-profile__social-links__list">
{{#each links}}
<div>
{{#if copyLink}}
<div class="copy" data-copy-url="http://www.google.co.uk/" role="button" aria-label="Copy link" tabindex="0">
<img src={{image}}>
</div>
{{/if}}
{{#unless copyLink}}
<a {{#if linkedIn}} class="linkedin" {{/if}} href="#" aria-label="{{copy}}">
<img src={{image}}>
</a>
{{/unless}}
</div>
{{/each}}
</div>
</div>
</div>
</div>
</section>
{{render '@efl-survey'}}
{{!-- <div class="jump-to-section__modal">
<div class="jump-to-section--header">
<img src="../../assets/example-content/featured_icon.svg" alt="Check Circle">
<button
type="button"
id="close-jump-to-section-modal"
name="Close Modal"
></button>
</div>
<div class="jump-to-section__modal__inner">
<h4 class="efl-heading-4">You have read this article</h4>
<p class="efl-p-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus, diam vel vehicula iaculis, risus nunc dictum nis.</p>
</div>
</div> --}}
</div>