England Football

Youth Team Selection 

<div class="youth-team-selection" data-behaviour="youth-selection">
    <div class="youth-team-selection__section">
        <div class="youth-team-selection__label">SELECT YOUTH TEAM:</div>
        <div class="youth-team-selection__dropdown" role="button" aria-label="SELECT YOUTH TEAM">
            <label for="youth-select">
                <select id="youth-select" class="custom-select">
                    <option value="MEN’S UNDER 21s" selected>MEN’S UNDER 21s</option>
                    <option value="WOMEN’S UNDER 21s">WOMEN’S UNDER 21s</option>
                    <option value="MEN’S UNDER 20s">MEN’S UNDER 20s</option>
                    <option value="WOMEN’S UNDER 20s">WOMEN’S UNDER 20s</option>
                    <option value="MEN’S UNDER 19s">MEN’S UNDER 19s</option>
                    <option value="WOMEN’S UNDER 19s">WOMEN’S UNDER 19s</option>
                    <option value="MEN’S UNDER 18s">MEN’S UNDER 18s</option>
                    <option value="WOMEN’S UNDER 18s">WOMEN’S UNDER 18s</option>
                    <option value="MEN’S UNDER 17s">MEN’S UNDER 17s</option>
                    <option value="WOMEN’S UNDER 17s">WOMEN’S UNDER 17s</option>
                </select>
            </label>
        </div>
    </div>
</div>

No notes defined.

{
  "youth-team": [
    {
      "text": "MEN’S UNDER 21s",
      "value": "MEN’S UNDER 21s",
      "default": true
    },
    {
      "text": "WOMEN’S UNDER 21s",
      "value": "WOMEN’S UNDER 21s"
    },
    {
      "text": "MEN’S UNDER 20s",
      "value": "MEN’S UNDER 20s"
    },
    {
      "text": "WOMEN’S UNDER 20s",
      "value": "WOMEN’S UNDER 20s"
    },
    {
      "text": "MEN’S UNDER 19s",
      "value": "MEN’S UNDER 19s"
    },
    {
      "text": "WOMEN’S UNDER 19s",
      "value": "WOMEN’S UNDER 19s"
    },
    {
      "text": "MEN’S UNDER 18s",
      "value": "MEN’S UNDER 18s"
    },
    {
      "text": "WOMEN’S UNDER 18s",
      "value": "WOMEN’S UNDER 18s"
    },
    {
      "text": "MEN’S UNDER 17s",
      "value": "MEN’S UNDER 17s"
    },
    {
      "text": "WOMEN’S UNDER 17s",
      "value": "WOMEN’S UNDER 17s"
    }
  ]
}
  • Content: 
    /* eslint-disable no-param-reassign */
const MOBILE_BREAKPOINT = 800;

const initYouthSelectionSticky = parentElement => {
  let prevScrollPos = window.pageYOffset;
  let isScrolling = false;

  const minScrollDistance = window.innerWidth <= MOBILE_BREAKPOINT ? 10 : 20;

  const fixedHeaderElement = document.querySelector('.global-fixed-header');

  const onScroll = () => {
    if (isScrolling) {
      return;
    }

    isScrolling = true;

    const startPoint = parentElement.offsetHeight + parentElement.offsetTop;

    setTimeout(() => {
      const currentScrollPos = window.pageYOffset;

      if (currentScrollPos > startPoint) {
        parentElement.style.position = 'fixed';
        parentElement.classList.add('fixed-selection');

        // Scrolling down (at least 20px)
        if (currentScrollPos > prevScrollPos + minScrollDistance) {
          // position it to top
          parentElement.style.top = 0;
          // Scroll up (at least 20px)
        } else if (currentScrollPos < prevScrollPos - minScrollDistance) {
          // if header is visible then set its offsetHeight as offset top position of nav element
          parentElement.style.top = `${fixedHeaderElement.offsetHeight - 1}px`;
        }
      } else {
        parentElement.style.position = 'static';
        parentElement.classList.remove('fixed-selection');
      }

      prevScrollPos = currentScrollPos;
      isScrolling = false;
    }, 110);
  };

  return onScroll;
};

const bindYouthTeamScrollEvents = parentElement => {
  const onScroll = initYouthSelectionSticky(parentElement);

  window.addEventListener('scroll', onScroll, { passive: true });
};

export default parentElement => {
  // do scroll top before capturing scroll positions.
  window.scroll({
    top: 0,
    left: 0,
    behavior: 'smooth',
  });
  // event bindings
  bindYouthTeamScrollEvents(parentElement);
};
  • URL: /components/raw/youth-team-selection/youth-team-selection-sticky.js
  • Filesystem Path: src/library/components/youth-team-selection/youth-team-selection-sticky.js
  • Size: 1.9 KB
  • Content: 
    import customSelect from '../../behaviours/select/custom-select';

const MOBILE_BREAKPOINT = 800;
const youthTeamSelectElement = document.querySelector(
  '[data-behaviour="youth-selection"]'
);

if (window.innerWidth >= MOBILE_BREAKPOINT && youthTeamSelectElement) {
  const youthSelectBox = document
    .querySelector('.youth-team-selection')
    .querySelector('.custom-select');

  if (youthSelectBox) {
    customSelect(youthSelectBox);
  }
}

export default parentElement => {
  const ENTER_KEY_CODE = 13;

  if (window.innerWidth >= MOBILE_BREAKPOINT) {
    const optionSelect = document.querySelectorAll('.select-options li');
    const optionTimer = setInterval(() => {
      if (optionSelect) {
        parentElement.querySelectorAll('.select-options li').forEach(option => {
          option.addEventListener('click', event => {
            event.stopPropagation();
            // eslint-disable-next-line no-restricted-globals
            location.pathname = event.target.getAttribute('rel');
            // console.log(event.target.getAttribute('rel'));
          });

          option.addEventListener('keydown', event => {
            if (event.keyCode === ENTER_KEY_CODE) {
              event.preventDefault();
              // eslint-disable-next-line no-restricted-globals
              location.pathname = event.target.getAttribute('rel');
            }
          });
        });
        clearInterval(optionTimer);
      }
    }, 500);

    document.addEventListener('click', event => {
      event.stopPropagation();
    });
  } else {
    parentElement
      .querySelector('.custom-select')
      .addEventListener('change', event => {
        event.stopPropagation();
        // eslint-disable-next-line no-restricted-globals
        location.pathname = `${event.target.value}`;
        // console.log(`${event.target.value}`);
      });
  }
};
  • URL: /components/raw/youth-team-selection/youth-team-selection.js
  • Filesystem Path: src/library/components/youth-team-selection/youth-team-selection.js
  • Size: 1.9 KB
  • Content: 
    .youth-team-selection {
  justify-content: center;
  align-items: center;
  background: var(--brand-primary);
  flex-direction: column;
  padding: 0.8rem 0 1.2rem 0;
  width: 100%;
  z-index: 99;
  // transition: all 0.4s ease-out 0s;
  &__section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  &__label {
    @include text-l;

    line-height: 3rem;
    color: $white;
    margin-bottom: 0.4rem;
  }
  &.fixed-selection {
    .youth-team-selection__label {
      display: none;
    }
  }
  &__dropdown {
    position: relative;
    width: calc(100% - 8.4rem);
    &::after {
      content: '';
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      right: 0;
      top: 0;
      padding: 0 0 2px;
      position: absolute;
      pointer-events: none;
      background: url('./assets/images/chevron.svg') no-repeat center center;
      width: 3.8rem;
      height: 3.8rem;
      background-size: 0.8rem 1rem;
      background-color: rgba(236, 238, 243, 0.6);
    }
  }
  select::-ms-expand {
    display: none;
  }
  select {
    font-family: $text-font;
    font-size: 1.4rem;
    line-height: 4.4rem;
    color: #000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 3.8rem;
    padding: 0 1.6rem;
    background-color: $white;
    -ms-word-break: normal;
    word-break: normal;
  }
  .select-styled:hover {
    &::after {
      background-color: $light-blue;
    }
  }

  @media screen and (min-width: $mq-medium) {
    display: flex;
    height: 5.4rem;
    flex-direction: row;
    padding: 0.8rem 0;
    label {
      position: relative;
      width: 100%;
      height: 3.8rem;
      display: block;
    }
    &__section {
      flex-direction: row;
    }
    &__label {
      font-size: 1.4rem;
      line-height: 4.4rem;
      margin-right: 2.3rem;
      margin-bottom: 0;
    }
    &.fixed-selection {
      .youth-team-selection__label {
        display: block;
      }
    }
    &__dropdown {
      width: 29rem;
      &::after {
        content: '';
        display: none;
      }
    }
  }
}
  • URL: /components/raw/youth-team-selection/youth-team-selection.scss
  • Filesystem Path: src/library/components/youth-team-selection/youth-team-selection.scss
  • Size: 2.2 KB 
<div class="youth-team-selection" data-behaviour="youth-selection">
    <div class="youth-team-selection__section">
    <div class="youth-team-selection__label">SELECT YOUTH TEAM:</div>
    <div class="youth-team-selection__dropdown" role="button" aria-label="SELECT YOUTH TEAM">
        <label for="youth-select">
            <select id="youth-select" class="custom-select">
                {{#each youth-team}}
                <option value="{{value}}" {{#if default}}selected{{/if}}>{{text}}</option>
                {{/each}}
            </select>
        </label>
    </div>
    </div>
</div>