<div class="efl-card-list " id="mens-senior" data-content="news-content" role="region" aria-label="men's senior">
<div class="efl-card-list__title">
<h6>men's senior</h6>
</div>
<div class="efl-card-list__inner">
<a href="#" class="efl-card efl-card--vertical " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="Why you should try futsal">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-horizontal-1.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">CAT TITLE</div>
<div class="efl-card__content--title">Why you should try futsal</div>
<p class="efl-card__content--description">Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance</p>
</div>
</div>
</a>
<a href="#" class="efl-card efl-card--vertical " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="Why you should try futsal">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-horizontal-1.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">CAT TITLE</div>
<div class="efl-card__content--title">Why you should try futsal</div>
<p class="efl-card__content--description">Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance</p>
</div>
</div>
</a>
<a href="#" class="efl-card efl-card--vertical " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="Why you should try futsal">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-horizontal-1.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">CAT TITLE</div>
<div class="efl-card__content--title">Why you should try futsal</div>
<p class="efl-card__content--description">Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance</p>
</div>
</div>
</a>
<a href="#" class="efl-card efl-card--vertical " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="Why you should try futsal">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-horizontal-1.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">CAT TITLE</div>
<div class="efl-card__content--title">Why you should try futsal</div>
<p class="efl-card__content--description">Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance</p>
</div>
</div>
</a>
</div>
</div>
No notes defined.
{
"id": "mens-senior",
"title": "men's senior",
"isHorizontalOnly": false,
"articleTitle": false,
"isHorizontalOnlyEight": false,
"section-bg": false,
"section-bg-img": "/assets/images/course-availability.svg",
"fullWidth": false,
"hideTitle": false,
"howManyCards": [
{},
{},
{},
{}
]
}
export default parentElement => {
const self = parentElement;
const parent = parentElement.parentNode;
const cardContainer = parentElement.querySelector('.efl-card-list__inner');
let visibleEflCards = parentElement.querySelectorAll(
'.efl-card:not([style*="display:none"]):not([style*="display: none"])'
);
let visibleEflCardsLength = visibleEflCards.length;
const scrollEnabled = parentElement.querySelector(
'[data-behaviour="card-scroll"]'
);
const page = document.querySelector('.page-wrapper');
let articleSessionPage = null;
if (
page.classList.contains('efl-article-index-page') ||
page.classList.contains('efl-session-index-page')
) {
articleSessionPage = true;
}
const defaultWidth = window.innerWidth;
function resetClass(cards) {
cards.forEach(card => {
if (!card.classList.contains('efl-card--1--full-width')) {
// eslint-disable-next-line no-param-reassign
card.className = '';
card.classList.add('efl-card', 'efl-card--vertical');
card.classList.remove('minimised-card');
}
});
}
const formatArticlePage = (cards, cardsLength) => {
if (cardsLength === 3) {
cards[0].classList.replace('efl-card--vertical', 'efl-card--single');
cards[1].classList.replace('efl-card--vertical', 'efl-card--horizontal');
cards[2].classList.replace('efl-card--vertical', 'efl-card--horizontal');
}
};
// select CSS class determined by the number of session cards
const selectClass = (cards, cardsLength) => {
cards.forEach((eflCardElement, index) => {
const eflCard = eflCardElement;
eflCard.classList.add(`card${index + 1}`);
if (articleSessionPage) {
eflCard.classList.add('article');
}
});
// Article Session Index Page
self.classList.add('article');
if (self === parent.firstElementChild && articleSessionPage) {
self.classList.add('pinned');
cardContainer.classList.add('pinned');
formatArticlePage(cards, cardsLength);
// Course Index Page
} else if (!articleSessionPage) {
if (cards[1]) {
cards[0].classList.replace(
'efl-card--vertical',
'efl-card--horizontal'
);
}
if (cards[1]) {
cards[1].classList.replace(
'efl-card--vertical',
'efl-card--horizontal'
);
}
}
};
const setVideoPosition = cards => {
cards.forEach(card => {
const image = card.firstElementChild;
if (image.classList.contains('efl-card__image--video')) {
const featured = image.querySelector('.efl-card__image--red');
if (featured) {
image.classList.add('featured');
}
}
});
};
const manipulateClass = (cards, cardsLength) => {
cardContainer.classList.add(`efl-card-list__inner--${cardsLength}`);
resetClass(cards);
selectClass(cards, cardsLength);
setVideoPosition(cards);
// Check for empty efl-card-list
if (visibleEflCards.length === 0) {
self.style.padding = '0';
} else {
self.style.padding = null;
}
cardContainer.parentElement.classList.add(`efl-card-list--${cardsLength}`);
if (!cardsLength && page.classList.contains('efl-cpd-index-page')) {
cardContainer.parentElement.classList.add(`hidden`);
}
};
const infiniteScroll = (cards, cardsLength) => {
const defaultCount = 4;
const loading = parentElement.querySelector('.loading');
let visibleCardCount = 0;
cards.forEach(item => {
item.classList.add('minimised-card');
});
const removeLoading = () => {
loading.classList.remove('show');
};
const showLoading = () => {
loading.classList.add('show');
};
const loadMoreCards = () => {
const items = parentElement.querySelectorAll('.efl-card.hidden');
showLoading();
items.forEach((item, index) => {
if (index < defaultCount) {
item.classList.remove('hidden');
visibleCardCount += 1;
}
});
setTimeout(() => {
removeLoading();
}, 300);
};
window.addEventListener('scroll', () => {
const {
scrollTop,
scrollHeight,
clientHeight,
} = document.documentElement;
if (
clientHeight + scrollTop >= scrollHeight - 5 &&
visibleCardCount < cardsLength
) {
loadMoreCards();
manipulateClass(visibleEflCards, visibleEflCardsLength);
}
});
};
if (scrollEnabled) {
infiniteScroll(visibleEflCards, visibleEflCardsLength);
}
manipulateClass(visibleEflCards, visibleEflCardsLength);
window.addEventListener('load', () => {
setTimeout(() => {
const activeEflCards = parentElement.querySelectorAll(
'.efl-card:not(.hidden)'
);
setVideoPosition(activeEflCards);
}, 300);
});
window.addEventListener('resize', () => {
if (defaultWidth !== window.innerWidth) {
visibleEflCards = parentElement.querySelectorAll(
'.efl-card:not(.hidden)'
);
visibleEflCardsLength = visibleEflCards.length;
manipulateClass(visibleEflCards, visibleEflCardsLength);
}
});
window.addEventListener('filterupdate', () => {
visibleEflCards = parentElement.querySelectorAll('.efl-card:not(.hidden)');
visibleEflCardsLength = visibleEflCards.length;
manipulateClass(visibleEflCards, visibleEflCardsLength);
});
};
/* stylelint-disable no-descending-specificity */
.efl-card-list {
position: relative;
margin: auto;
z-index: 1;
float: none;
padding: 0 3.2rem 4.8rem 3.2rem;
background-color: $white;
.minimised-card {
display: none;
}
.cta--secondary {
background-color: white;
border: 1px solid $blue-accent3;
color: $blue-accent3;
}
&--1 {
width: 100%;
.efl-card-list__inner--1 {
width: 100%;
}
}
&--1--full-width {
margin: auto;
padding: 0;
.efl-card-list__inner {
display: block;
padding: 0;
}
&::before {
content: '';
opacity: 0 !important;
}
}
&--3 {
&.pinned::after {
padding-top: 0 !important;
}
}
&__title {
margin: auto;
margin-bottom: 2.4rem;
display: flex;
justify-content: space-between;
h6 {
color: $blue;
width: fit-content;
@extend .efl-heading-6;
text-transform: uppercase;
text-align: left;
&::after {
content: '';
display: block;
width: 100%;
margin-top: 1.6rem;
border-bottom: 0.2rem solid $red;
height: auto;
}
}
&--how-many-sessions {
color: $blue;
font-family: $text-font-ef;
font-size: 1.2rem;
font-weight: 400;
line-height: 2rem;
letter-spacing: 0.06em;
}
}
.cta[name='show more'] {
display: flex;
max-width: none;
margin-top: 2.4rem;
}
.loading {
display: none;
position: relative;
margin: 4rem auto;
width: 8em;
height: 8em;
&.show {
display: block;
}
.efl-logo {
background-image: url('./assets/images/ef-logo.svg');
background-repeat: no-repeat;
background-position: center;
position: absolute;
z-index: 2;
top: 0;
left: 0;
background-size: 3.28rem 3.9rem;
width: 100%;
height: 100%;
}
.loader {
font-size: 10px;
text-indent: -9999em;
width: 100%;
height: 100%;
border-radius: 100%;
overflow: hidden;
background: rgb(236, 238, 243);
position: relative;
-webkit-animation: load3 1.4s infinite linear;
animation: load3 1.4s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loader::before {
width: 100%;
height: 50%;
background: -linear-gradient(0deg, #004aa3 0%, #eceef3 50%);
background: -moz-linear-gradient(0deg, #004aa3 0%, #eceef3 50%);
background: -o-linear-gradient(0deg, #004aa3 0%, #eceef3 50%);
background: -ms-linear-gradient(0deg, #004aa3 0%, #eceef3 50%);
background: -webkit-linear-gradient(0deg, #004aa3 0%, #eceef3 50%);
transform-origin: bottom right;
position: absolute;
top: 0;
left: 0;
content: '';
}
.loader::after {
background: #fff;
width: 85%;
height: 85%;
border-radius: 50%;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
@-webkit-keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
&__inner {
max-width: 119.5rem;
margin: auto;
width: fit-content;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;
column-gap: 4rem;
row-gap: 2.4rem;
&--3 {
&.pinned {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
'card1 card1'
'card2 card3';
border-bottom: 3px solid #eceef3;
.efl-card--single {
grid-column: span 2;
}
// Any Card Grid - Desktop Version
@media screen and (max-width: 819px) {
.efl-card--single.article {
margin: 0 -3.2rem;
width: 100vw;
.efl-card__image {
border-radius: 0;
}
.efl-card__content {
padding: 2.4rem 3.2rem 1.2rem 3.2rem;
}
}
}
}
}
// Any Card Grid - Desktop Version
@media screen and (max-width: 819px) {
display: flex;
width: 100%;
flex-direction: column;
gap: 1.6rem;
}
}
@media screen and (min-width: $mq-medium) {
&--1 {
.efl-card {
grid-column: span 6 !important;
}
}
&--2 {
.efl-card {
grid-column: span 3 !important;
}
}
padding-bottom: 5.6rem;
&--1--full-width {
padding: 0 3.2rem 5.6rem 3.2rem;
border-radius: 0.4rem;
.efl-card-list__inner {
width: 100%;
}
}
&__title {
font-size: 2rem;
h6::after {
margin-top: 0.8rem;
}
}
.minimised-card {
display: grid;
}
}
&--section-bg {
position: relative;
color: $white;
background-color: $blue-accent3;
.efl-card:not(.efl-card--1--full-width) {
outline-color: #fff;
}
.cta:active {
outline-color: #fff;
}
.efl-card--1--full-width {
.efl-card__content {
background-color: $blue-accent3;
&--title {
color: $white;
}
&--description {
color: $white;
}
}
.efl-card__image::after {
background-image: url('./assets/images/efl-card-full-width-efl-blue-crop.svg');
/* filter: brightness(0.97); */
}
}
&::before {
content: '';
background-image: url('./assets/images/noise.png');
background-repeat: repeat;
mix-blend-mode: soft-light;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
opacity: 0.3;
pointer-events: none;
}
.cta--secondary {
background: transparent;
color: $white;
border: 0.2rem solid $white;
&:focus-visible {
outline: 0.3rem solid black;
}
}
.efl-card-list__title {
h6 {
color: $white;
}
}
@media screen and (min-width: $mq-medium) {
background-position: 100% center;
background-image: url('./assets/images/course-availability.svg');
background-repeat: no-repeat;
background-size: auto 100%;
&.efl-card-list--3 {
background-position: 107% top;
background-size: auto 160%;
}
&.efl-card-list--1 {
background-position: right bottom;
background-image: url('./assets/images/efl-card-list--1.svg');
}
&.efl-card-list--8 {
background-position: left bottom;
background-size: auto;
background-image: url('./assets/images/efl-card-list--8.svg');
}
}
}
}
<div class="efl-card-list {{#if modifier}}efl-card-list--{{modifier}}{{/if}}" id="{{id}}" data-content="news-content" role="region" aria-label="{{title}}">
{{#unless hideTitle}}<div class="efl-card-list__title"><h6>{{title}}</h6></div>{{/unless}}
<div {{#if scrollBehaviour}}data-behaviour="card-scroll"{{/if}} class="efl-card-list__inner">
{{#unless fullWidth}}
{{#each howManyCards}}
{{render '@efl-card' this merge="true"}}
{{/each}}
{{else}}{{render '@efl-card--full-width-news-card'}}
{{/unless}}
</div>
{{#if scrollBehaviour}}
<div class="loading">
<div class="loader"></div>
<div class="efl-logo"></div>
</div>
{{/if}}
</div>