England Football

Efl Hero Top Section: Single Banner 

<div class="efl-hero-top-section" data-banner-duration="15">
    <div data-glide-el="track">
        <div class="glide__slides">
            <div class="efl-hero-top-section--banner">
                <img loading="lazy" src="/assets/example-content/efl-hero-top-section-1.jpg" alt="">
                <div class="efl-hero-top-section--banner__overlay">
                    <h1>Safeguarding Awareness for Parents &#38; Carers course</h1>
                    <a href="/" class="cta cta--primary  " id="view-campaign-cta" name="view campaign" tabindex="0">View Campaign</a>

                </div>
            </div>
        </div>
    </div>
</div>

No notes defined.

{
  "useVideo": false,
  "banners": [
    {
      "id": 0,
      "title": "Safeguarding Awareness for Parents &#38; Carers course",
      "subcopy": "Take our free Safeguarding Awareness for Parents & Carers course and help us keep the game safe for children.",
      "image": "/assets/example-content/efl-hero-top-section-1.jpg",
      "view-campaign-cta": {
        "copy": "View Campaign",
        "id": "view-campaign-cta",
        "name": "view campaign"
      }
    }
  ],
  "singleBanner": true,
  "modifier": "single-banner"
}
  • Content: 
    import Glide from '@glidejs/glide';

export default (carouselElement, options) => {
  const slides = carouselElement.querySelectorAll('.glide__slides > *');
  // const video = carouselElement.querySelector('.autoplay-hero-video');
  const duration = carouselElement.getAttribute('data-banner-duration');

  const defaultOptions = {
    perView: 1,
    autoplay: duration * 1000,
    animationDuration: '600',
    animationTimingFunc: 'cubic-bezier(0.16, 1, 0.3, 1)',
    hoverpause: false,
    type: 'carousel',
    gap: 0,
  };

  const settings = { ...defaultOptions, ...options };

  const bulletContainer = document.createElement('div');

  bulletContainer.classList.add('efl-hero-top-section__bullets');
  bulletContainer.dataset.glideEl = 'controls[nav]';

  slides.forEach((slide, index) => {
    const button = document.createElement('button');

    button.dataset.glideDir = `=${index}`;
    if (!index) {
      button.ariaLabel = `Autoplay Hero Section Page - ${index + 1} active`;
    } else {
      button.ariaLabel = `Autoplay Hero Section Page - ${index + 1}`;
    }
    button.style.animationDuration = `${settings.autoplay / 1000}s`;
    bulletContainer.appendChild(button);
  });

  carouselElement.appendChild(bulletContainer);

  if (slides.length < 2) {
    bulletContainer.style.display = 'none';
  }

  /* document.addEventListener('keyup', function(e) {
      if (e.keyCode === 9) {
        if (document.activeElement.closest('.efl-hero-top-section')) {
          console.log(document.activeElement)
        }
      }
  }); */

  const glide = new Glide(carouselElement, { ...settings });
  // if (video) {
  //   glide.on('run.after', function () {
  //   });
  // }

  // Accessiblity Features
  const paginationElements = carouselElement.querySelectorAll(
    `.efl-hero-top-section__bullets button`
  );

  const pipsAccessibility = () => {
    glide.on('run.after', () => {
      paginationElements.forEach(item => {
        if (item.classList.contains('glide__bullet--active')) {
          // eslint-disable-next-line no-param-reassign
          item.ariaSelected = true;

          // eslint-disable-next-line no-param-reassign
          const label = item.ariaLabel;

          // eslint-disable-next-line no-param-reassign
          item.ariaLabel = `${label} active`;
        } else {
          // eslint-disable-next-line no-param-reassign
          item.ariaSelected = false;
          if (item.ariaLabel) {
            const label = item.ariaLabel.replace(' active', '');

            // eslint-disable-next-line no-param-reassign
            item.ariaLabel = `${label}`;
          }
        }
      });
    });
  };

  pipsAccessibility();

  const tabIndexUpdate = () => {
    const cloneSlides = carouselElement.querySelectorAll('.glide__slides > *');

    cloneSlides.forEach(cloneslide => {
      if (cloneslide.classList.contains('glide__slide--clone')) {
        if (cloneslide.querySelector('.cta')) {
          cloneslide.querySelector('.cta').setAttribute('tabindex', '-1');
        }
      } else if (cloneslide.querySelector('.cta')) {
        cloneslide.querySelector('.cta').setAttribute('tabindex', '0');
      }
    });
  };

  // Pause the carousel when hovering on cta
  carouselElement.addEventListener('focusin', e => {
    if (e.target.classList.contains('cta')) {
      glide.pause();
    } else {
      glide.play();
    }
  });

  glide.on('run.before', () => {
    tabIndexUpdate();
  });

  glide.on('run.after', () => {
    tabIndexUpdate();
  });

  glide.on('build.after', () => {
    tabIndexUpdate();
  });

  glide.mount();

  return glide;
};
  • URL: /components/raw/efl-hero-top-section/efl-hero-top-section.js
  • Filesystem Path: src/library/components/efl-hero-top-section/efl-hero-top-section.js
  • Size: 3.6 KB
  • Content: 
    @import 'node_modules/@glidejs/glide/src/assets/sass/glide.core';

.efl-hero-top-section {
  position: relative;

  &--banner {
    height: 37.5rem;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    &__overlay {
      position: absolute;
      z-index: 3;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100vw;
      max-width: calc(100vw - 13.2rem);

      h1 {
        pointer-events: none;
        font: $efl-heading-1-hp;
        text-align: center;
        color: $white;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
        margin-bottom: 1rem;
        line-height: 3rem;
      }

      p {
        pointer-events: none;
        white-space: normal;
        text-align: center;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 3;
        color: white;
        font-family: $text-font-ef;
        margin-bottom: 1.6rem;
        font-size: 1.8rem;
        line-height: 2.4rem;
      }

      .partner-logo {
        img {
          max-width: 15rem;
          max-height: 6.5rem;
        }
      }

      .cta {
        max-width: 28.3rem;
        width: 100%;
        min-height: 4.8rem;
        font-size: 1.6rem;
        line-height: 3.1rem;
      }
      .cta--primary {
        background-color: $red;
        border: none;
        color: $white;
        &:hover {
          color: $red;
          background-color: $white;
        }
      }
    }
  }

  .glide__slides::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(29, 29, 27, 0.1) 0%,
      rgba(29, 29, 27, 0.35) 100%
    );
    background-size: contain;
    pointer-events: none;
  }
  &::before {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    background: url('./assets/images/hero-banner-left-shape-mob.png') no-repeat
      center;
    background-size: contain;
    width: 20.5rem;
    height: 6.3rem;
    top: 0;
    left: -7.4rem;
    pointer-events: none;
  }
  &::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    background: url('./assets/images/hero-banner-right-shape-mob.png') no-repeat
      center;
    background-size: contain;
    width: 23.7rem;
    height: 23.7rem;
    top: 19rem;
    right: 0;
    bottom: initial;
    pointer-events: none;
  }

  &__bullets {
    bottom: 4.2rem;
    display: flex;
    gap: 2.2rem;
    justify-content: space-between;
    left: 50%;
    padding: 0 $spacing-m;
    position: absolute;
    transform: translateX(-50%);
    width: fit-content;

    [data-behavior='hero-carousel-with-squad-selection'] & {
      bottom: 8.2rem;
    }

    @media (min-width: $mq-medium) {
      [data-behavior='hero-carousel-with-squad-selection'] & {
        bottom: 6.2rem;
      }
    }

    button {
      appearance: none;
      background: $red;
      border: none;
      border-radius: $border-radius;
      cursor: pointer;
      height: 0.8rem;
      width: 0.8rem;
      overflow: hidden;
      padding: 0;

      &::after {
        content: '';
        background-color: $white;
        display: block;
        height: 100%;
        width: 0;
      }
    }
  }
  .glide__bullet--active {
    background: $white;
  }

  @media screen and (min-width: $mq-small) and (max-width: $mq-medium) {
    &::before {
      width: 41rem;
      height: 12.6rem;
      left: -16rem;
    }

    &::after {
      width: 34.4rem;
      height: 34.4rem;
      top: 28rem;
    }

    &--banner {
      height: 54rem;
      &__overlay {
        h1 {
          font-size: 4.4rem;
          line-height: 5.8rem;
        }
      }
    }
  }

  @media screen and (min-width: $mq-medium) {
    &--banner {
      &__overlay {
        max-width: calc(100vw - 41.5rem);
      }
    }
  }

  @media screen and (min-width: $mq-large) {
    &::before {
      background: url('./assets/images/efl-homepage-banner-left-shape.png')
        no-repeat center;
      width: 23.5rem;
      height: 53.5rem;
      top: -4.4rem;
      left: -1rem;
      background-size: contain;
    }
    &::after {
      background: url('./assets/images/efl-homepage-banner-right-shape.png')
        no-repeat center;
      width: 48.3rem;
      height: 69rem;
      top: 0.3rem;
      right: 0;
      bottom: initial;
      background-size: contain;
    }

    &--banner {
      height: 42.8rem;

      &__overlay {
        max-width: calc(100vw - 78rem);

        .cta {
          max-width: 31.1rem;
        }

        p {
          font-size: 2rem;
          line-height: 3.2rem;
        }
      }
    }

    &__bullets {
      max-width: 25%;
      bottom: 3.4rem;

      [data-behavior='hero-carousel-with-squad-selection'] & {
        bottom: 14.5rem;
      }
    }
  }

  .autoplay-hero-video {
    &::after {
      content: '';
      z-index: 10;
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        180deg,
        rgba(29, 29, 27, 0.1) 0%,
        rgba(29, 29, 27, 0.35) 100%
      );
      background-size: contain;
      pointer-events: none;
    }

    &.vimeo-player-loaded .autoplay-hero-video__gradient {
      display: none;
    }

    &.vimeo-player-loaded .control-overlay {
      display: none;
    }
  }

  @media screen and (min-width: $mq-small) and (max-width: $mq-medium) {
    .autoplay-hero-video {
      height: 54rem;
      /* stylelint-disable no-descending-specificity */
      h1 {
        font-size: 4.4rem;
        line-height: 5.8rem;
      }
    }
  }

  @media screen and (min-width: $mq-medium) {
    h1 {
      line-height: 5.8rem;
    }
    .autoplay-hero-video {
      height: 42.8rem;
      h1 {
        line-height: 5.8rem;
      }
      .efl-hero-banner__overlay {
        margin-top: 8rem;
      }
    }
  }
}

@keyframes showProgress {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}
  • URL: /components/raw/efl-hero-top-section/efl-hero-top-section.scss
  • Filesystem Path: src/library/components/efl-hero-top-section/efl-hero-top-section.scss
  • Size: 6.5 KB 
<div class="efl-hero-top-section" {{#unless singleBanner}}data-behavior="hero-carousel"{{/unless}} data-banner-duration="15">
  <div data-glide-el="track">
    <div class="glide__slides">
      {{#if useVideo}}
        {{render '@autoplay-hero-video' video-data merge="true"}}
      {{/if}}
      {{#each banners}}
        <div class="efl-hero-top-section--banner">
          <img loading="lazy" src="{{image}}" alt="">
          <div class="efl-hero-top-section--banner__overlay">
            <h1>{{{title}}}</h1>
            {{render '@cta' view-campaign-cta merge="true"}}
          </div>
        </div>
      {{/each}}
    </div>
  </div>
</div>