<div class="article-session-index">
<div class="article-session-index__scroll" role="feed" aria-busy="false" id="news-articles">
<div class="efl-card-list " id="mens-senior" data-content="news-content" role="region" aria-label="men's senior">
<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>
<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>
<div class="efl-card-list efl-card-list--1--full-width" id="mens-senior" data-content="news-content" role="region" aria-label="men's senior">
<div class="efl-card-list__inner">
<a href="#" class="efl-card efl-card--1--full-width " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="Five interviews you may have missed in 2021">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-vertical-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">Five interviews you may have missed in 2021</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>
<span class="cta cta--tertiary " id="find-out-more-button" tabindex="0">Find Out More</span>
</div>
</a>
</div>
</div>
<div class="efl-card-list " id="mens-senior" data-content="news-content" role="region" aria-label="men's senior">
<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>
<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>
<div class="efl-card-list efl-card-list--1--full-width" id="mens-senior" data-content="news-content" role="region" aria-label="men's senior">
<div class="efl-card-list__inner">
<a href="#" class="efl-card efl-card--1--full-width " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="Five interviews you may have missed in 2021">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-vertical-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">Five interviews you may have missed in 2021</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>
<span class="cta cta--tertiary " id="find-out-more-button" tabindex="0">Find Out More</span>
</div>
</a>
</div>
</div>
<div class="efl-card-list " id="mens-senior" data-content="news-content" role="region" aria-label="men's senior">
<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>
<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>
<div class="efl-card-list efl-card-list--1--full-width" id="mens-senior" data-content="news-content" role="region" aria-label="men's senior">
<div class="efl-card-list__inner">
<a href="#" class="efl-card efl-card--1--full-width " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="Five interviews you may have missed in 2021">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-vertical-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">Five interviews you may have missed in 2021</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>
<span class="cta cta--tertiary " id="find-out-more-button" tabindex="0">Find Out More</span>
</div>
</a>
</div>
</div>
<div class="efl-card-list " id="mens-senior" data-content="news-content" role="region" aria-label="men's senior">
<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>
<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>
</div>
<div class="loading">
<div class="loader"></div>
<div class="efl-logo"></div>
</div>
</div>
No notes defined.
{
"efl-card-list": {
"hideTitle": true
},
"heading": "Heading",
"subheading": "subheading for the article/session index",
"load-more-cta": {
"copy": "Load More",
"id": "loadbutton",
"href": "javascript:void(0);"
}
}
export default parentElement => {
const loading = parentElement.querySelector('.loading');
const tenthCard = parentElement.querySelector(
'.article-session-index__eight > div:first-child > a:first-child'
);
const allItems = parentElement.querySelectorAll(
'.article-session-index__scroll > div'
);
const scrollEle = parentElement.querySelector(
'.article-session-index__scroll'
);
const allCards = parentElement.querySelectorAll('.article-session-card');
const MOBILE_BREAKPOINT = 820;
let currentPage = 1;
allItems.forEach(item => {
item.classList.add('hidden');
});
const removeLoading = () => {
loading.classList.remove('show');
scrollEle.ariaBusy = 'false';
};
const showLoading = () => {
loading.classList.add('show');
scrollEle.ariaBusy = 'true';
};
allCards.forEach(card => {
const description = card.querySelector(
'.article-session-card__content--title'
).innerHTML;
// eslint-disable-next-line no-param-reassign
card.ariaLabel = `${description}`;
});
const setTenthCardDesign = () => {
// Check for mobile dimension to change 10th card design
if (tenthCard) {
if (window.innerWidth < MOBILE_BREAKPOINT) {
tenthCard.classList.replace(
'article-session-card--horizontal',
'article-session-card--single'
);
if (tenthCard.nextElementSibling) {
tenthCard.nextElementSibling.style.marginTop = '1.6rem';
}
} else {
tenthCard.classList.replace(
'article-session-card--single',
'article-session-card--horizontal'
);
if (tenthCard.nextElementSibling) {
tenthCard.nextElementSibling.style.marginTop = '0';
}
}
}
};
window.addEventListener('resize', () => {
setTenthCardDesign();
});
window.addEventListener('scroll', () => {
const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
const allNewsItems = parentElement.querySelectorAll(
'.article-session-index__scroll > div'
);
const totalPage = allNewsItems.length;
if (!scrollEle || scrollEle.classList.contains('ajax')) {
return;
}
if (
clientHeight + scrollTop >= scrollHeight - 300 &&
currentPage <= totalPage
) {
showLoading();
setTimeout(() => {
if (currentPage <= totalPage) {
document
.querySelector(
`.article-session-index__scroll > div:nth-child(${currentPage})`
)
.classList.remove('hidden');
}
// eslint-disable-next-line operator-assignment
currentPage = currentPage + 1;
removeLoading();
}, 100);
}
});
setTenthCardDesign();
};
.article-session-index {
position: initial;
z-index: 1;
&__scroll,
&__eight {
& > * {
&:last-child {
margin-bottom: 4rem;
}
}
}
&__heading {
position: relative;
z-index: 3;
font-family: $text-font-ef;
color: $blue;
font-size: 3.2rem;
font-weight: bold;
line-height: 3.6rem;
letter-spacing: -0.01em;
text-align: center;
padding-bottom: 0.8rem;
max-width: calc(100vw - 11rem);
margin: auto;
}
&__subheading {
position: relative;
z-index: 3;
color: $color-interface-light;
text-align: center;
margin: auto;
max-width: calc(100vw - 11rem);
@extend .efl-p-2;
}
.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);
}
}
}
@media screen and (min-width: $mq-medium) {
&__heading {
font-size: 4.2rem;
}
&__subheading {
max-width: 58.5rem;
}
&__scroll {
& > * {
&:last-child {
margin-bottom: 6rem;
}
}
}
}
}
<div class="article-session-index">
<div class="article-session-index__scroll" role="feed" aria-busy="false" id="news-articles">
{{render '@efl-card-list--six' efl-card-list merge="true"}}
{{render '@efl-card-list--full-width' efl-card-list merge="true"}}
{{render '@efl-card-list--six' efl-card-list merge="true"}}
{{render '@efl-card-list--full-width' efl-card-list merge="true"}}
{{render '@efl-card-list--six' efl-card-list merge="true"}}
{{render '@efl-card-list--full-width' efl-card-list merge="true"}}
{{render '@efl-card-list--six' efl-card-list merge="true"}}
</div>
<div class="loading">
<div class="loader"></div>
<div class="efl-logo"></div>
</div>
</div>