England Football

Legends Squad Filter Menu 

<div class="legends-squad-filter-menu" data-behaviour="legends-squad-filter-menu">
    <div class="legends-squad-filter-menu__cancel">
        <div class="filter-text">Adjust Filters</div>
        <div class="close-filter">Cancel</div>
        <div class="back-filter">Back</div>
    </div>

    <div class="legends-squad-filter-menu__filter-scroll">
        <div class="legends-squad-filter-menu__filter-section">
            <div class="legends-squad-filter-menu__filter-section--list" id="all-squad">
                <a class="legends-squad-filter-menu__filter-section--squadlist">
                    <div>
                        <div class="filterby">Filter by Squad</div>
                        <div class="title">All Squads</div>
                    </div>
                </a>
                <div class="squad-line"></div>
            </div>

            <div class="legends-squad-filter-menu__filter-section--list" id="all-genders">
                <a class="legends-squad-filter-menu__filter-section--squadlist">
                    <div>
                        <div class="filterby">Filter by Gender</div>
                        <div class="title">All Genders</div>
                    </div>
                </a>
                <div class="gender-line"></div>
            </div>

            <div class="legends-squad-filter-menu__filter-section--list" id="all-postions">
                <a class="legends-squad-filter-menu__filter-section--squadlist">
                    <div>
                        <div class="filterby">Filter by Postions</div>
                        <div class="title">All Postions</div>
                    </div>
                </a>
                <div class="postions-line"></div>
            </div>
        </div>

        <div class="legends-squad-filter-menu__filter-options">
            <div class="legends-squad-filter-menu__filter-options--buttons" id=all-squad-filter>
                <div class="filter-buttons">
                    <input type="checkbox" class="all" id="1" value="all">
                    <label for="1">All Squads</label>
                </div>
                <div class="line"></div>
                <div class="filter-buttons">
                    <input type="checkbox" class="mens" id="2" value="mens">
                    <label for="2">Mens Senior Squad</label>
                </div>
                <div class="line"></div>
                <div class="filter-buttons">
                    <input type="checkbox" class="womens" id="3" value="womens">
                    <label for="3">Womens Senior Squad</label>
                </div>
                <div class="line"></div>
                <div class="filter-buttons">
                    <input type="checkbox" class="para" id="4" value="para">
                    <label for="4">Para Squad</label>
                </div>
                <div class="line"></div>
                <div class="filter-buttons">
                    <input type="checkbox" class="fustal" id="5" value="fustal">
                    <label for="5">Fustal Squad</label>
                </div>
                <div class="line"></div>
                <div class="filter-buttons">
                    <input type="checkbox" class="link" id="6" value="link">
                    <label for="6">Link</label>
                </div>
                <div class="line"></div>
            </div>
            <div class="legends-squad-filter-menu__filter-options--buttons" id=all-gender-filter>
                <div class="filter-buttons">
                    <input type="checkbox" class="mens" id="7" value="mens">
                    <label for="7">Mens Senior Squad</label>
                </div>
                <div class="line"></div>
                <div class="filter-buttons">
                    <input type="checkbox" class="womens" id="8" value="womens">
                    <label for="8">Womens Senior Squad</label>
                </div>
                <div class="line"></div>
            </div>
            <div class="legends-squad-filter-menu__filter-options--buttons" id=all-postions-filter>
                <div class="filter-buttons">
                    <input type="checkbox" class="para" id="9" value="para">
                    <label for="9">Para Squad</label>
                </div>
                <div class="line"></div>
                <div class="filter-buttons">
                    <input type="checkbox" class="fustal" id="10" value="fustal">
                    <label for="10">Fustal Squad</label>
                </div>
                <div class="line"></div>
                <div class="filter-buttons">
                    <input type="checkbox" class="link" id="11" value="link">
                    <label for="11">Link</label>
                </div>
                <div class="line"></div>
            </div>
        </div>
    </div>

    <div class="legends-squad-filter-menu__button-group">
        <div class="legends-squad-filter-menu__button-group--results">
            <div class="result">Show Me <span id="showmeresult"></span><span> Results</span></div>
            <div class="filter reset-filter">Reset Filters</div>
        </div>
        <div class="legends-squad-filter-menu__button-group--apply-filter">
            <div class="result apply-filters"> Apply Filters </div>
        </div>
    </div>
</div>

No notes defined.

{
  "filters": [
    {
      "squad": "all-squad-filter",
      "list": [
        {
          "id": "1",
          "title": "All Squads",
          "filters": "all"
        },
        {
          "id": "2",
          "title": "Mens Senior Squad",
          "filters": "mens"
        },
        {
          "id": "3",
          "title": "Womens Senior Squad",
          "filters": "womens"
        },
        {
          "id": "4",
          "title": "Para Squad",
          "filters": "para"
        },
        {
          "id": "5",
          "title": "Fustal Squad",
          "filters": "fustal"
        },
        {
          "id": "6",
          "title": "Link",
          "filters": "link"
        }
      ]
    },
    {
      "squad": "all-gender-filter",
      "list": [
        {
          "id": "7",
          "title": "Mens Senior Squad",
          "filters": "mens"
        },
        {
          "id": "8",
          "title": "Womens Senior Squad",
          "filters": "womens"
        }
      ]
    },
    {
      "squad": "all-postions-filter",
      "list": [
        {
          "id": "9",
          "title": "Para Squad",
          "filters": "para"
        },
        {
          "id": "10",
          "title": "Fustal Squad",
          "filters": "fustal"
        },
        {
          "id": "11",
          "title": "Link",
          "filters": "link"
        }
      ]
    }
  ]
}
  • Content: 
    /* eslint-disable */
const filtersquadEvents = parentElement => {
  const allCards = document.querySelectorAll('[data-filter]');
  const applysquad = parentElement.querySelector('.apply-filters');
  const resetfilter = parentElement.querySelector('.reset-filter');

  function showChecked() {
    document.getElementById('number').innerHTML = document.querySelectorAll(
      'input:checked'
    ).length;
  }

  function selectedcardcount() {
    const divselectedcount = document.querySelectorAll('.legend-player-count');
    const cardselectedCount = [].slice.call(divselectedcount);
    const cardactiveCount = cardselectedCount.filter(function(el) {
      return el.style.display !== 'none';
    });

    document.getElementById('showmeresult').innerHTML = cardactiveCount.length;
  }

  function toggleCheckbox({ currentValue }) {
    allCards.forEach(filtercard => {
      const currentCardFilterData = JSON.parse(filtercard.dataset.filter);

      if (
        currentValue.find(val => val === 'all') &&
        currentCardFilterData.all === true
      ) {
        filtercard.style.removeProperty('display');
      } else if (
        currentValue.find(val => val === 'mens') &&
        currentCardFilterData.mens === true
      ) {
        filtercard.style.removeProperty('display');
      } else if (
        currentValue.find(val => val === 'womens') &&
        currentCardFilterData.womens === true
      ) {
        filtercard.style.removeProperty('display');
      } else if (
        currentValue.find(val => val === 'para') &&
        currentCardFilterData.para === true
      ) {
        filtercard.style.removeProperty('display');
      } else if (
        currentValue.find(val => val === 'fustal') &&
        currentCardFilterData.fustal === true
      ) {
        filtercard.style.removeProperty('display');
      } else if (
        currentValue.find(val => val === 'link') &&
        currentCardFilterData.link === true
      ) {
        filtercard.style.removeProperty('display');
      } else {
        filtercard.style.setProperty('display', 'none');
      }
    });

    selectedcardcount();
  }

  function resetCards(resetValue) {
    const resetcards = document.querySelectorAll('[data-filter]');

    if (resetValue.length === undefined) {
      for (let i = 0; i < resetcards.length; i += 1) {
        resetcards[i].style.display = 'flex';
      }
    }
  }

  applysquad.onclick = function getChecked() {
    const selectedValue = [];

    const checkboxes = parentElement.querySelectorAll('input[type=checkbox]');

    for (let i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].checked) {
        selectedValue.push(checkboxes[i].value);
      }
    }

    showChecked();

    toggleCheckbox({
      currentValue: selectedValue,
    });
  };

  resetfilter.onclick = function getChecked() {
    const unselectedValue = [];

    const reset = parentElement.querySelectorAll('input[type=checkbox]');

    for (let i = 0; i < reset.length; i++) {
      if (reset[i].checked) {
        reset[i].checked = false;
      }
    }

    showChecked();

    resetCards({
      resetValue: unselectedValue,
    });

    document
      .querySelector('.legends-squad-filter-menu')
      .classList.remove('add-animation');
    document.querySelector('.legends-squad-filter').classList.add('add-filter');
  };
};

const filtersectionEvents = parentElement => {
  const allsquad = parentElement.querySelector('#all-squad');
  const allgender = parentElement.querySelector('#all-genders');
  const allpostion = parentElement.querySelector('#all-postions');
  const backfilter = parentElement.querySelector('.back-filter');
  const applyfilter = parentElement.querySelector('.apply-filters');
  const closefilter = parentElement.querySelector('.close-filter');
  const resultfilter = parentElement.querySelector('.result');

  function showAllSquad() {
    document.getElementById('all-squad-filter').style.display = 'block';
    document.getElementById('all-gender-filter').style.display = 'none';
    document.getElementById('all-postions-filter').style.display = 'none';
    document.getElementById('all-genders').style.display = 'none';
    document.getElementById('all-postions').style.display = 'none';
    document.querySelector('.back-filter').style.display = 'flex';
    document.querySelector('.close-filter').style.display = 'none';
    document.querySelector(
      '.legends-squad-filter-menu__button-group--results'
    ).style.display = 'none';
    document.querySelector(
      '.legends-squad-filter-menu__button-group--apply-filter'
    ).style.display = 'block';
    document.querySelector('.squad-line').classList.add('active-line');
  }

  function showAllGender() {
    document.getElementById('all-squad-filter').style.display = 'none';
    document.getElementById('all-gender-filter').style.display = 'block';
    document.getElementById('all-postions-filter').style.display = 'none';
    document.getElementById('all-squad').style.display = 'none';
    document.getElementById('all-postions').style.display = 'none';
    document.querySelector('.back-filter').style.display = 'flex';
    document.querySelector('.close-filter').style.display = 'none';
    document.querySelector(
      '.legends-squad-filter-menu__button-group--results'
    ).style.display = 'none';
    document.querySelector(
      '.legends-squad-filter-menu__button-group--apply-filter'
    ).style.display = 'block';
    document.querySelector('.gender-line').classList.add('active-line');
  }

  function showAllPostions() {
    document.getElementById('all-squad-filter').style.display = 'none';
    document.getElementById('all-gender-filter').style.display = 'none';
    document.getElementById('all-postions-filter').style.display = 'block';
    document.getElementById('all-squad').style.display = 'none';
    document.getElementById('all-genders').style.display = 'none';
    document.querySelector('.back-filter').style.display = 'flex';
    document.querySelector('.close-filter').style.display = 'none';
    document.querySelector(
      '.legends-squad-filter-menu__button-group--results'
    ).style.display = 'none';
    document.querySelector(
      '.legends-squad-filter-menu__button-group--apply-filter'
    ).style.display = 'block';
    document.querySelector('.postions-line').classList.add('active-line');
  }

  function closeAllSquad() {
    document.getElementById('all-squad-filter').style.display = 'none';
    document.getElementById('all-gender-filter').style.display = 'none';
    document.getElementById('all-postions-filter').style.display = 'none';
    document.getElementById('all-squad').style.display = 'block';
    document.getElementById('all-genders').style.display = 'block';
    document.getElementById('all-postions').style.display = 'block';
    document.querySelector('.back-filter').style.display = 'none';
    document.querySelector('.close-filter').style.display = 'flex';
    document.querySelector(
      '.legends-squad-filter-menu__button-group--results'
    ).style.display = 'flex';
    document.querySelector(
      '.legends-squad-filter-menu__button-group--apply-filter'
    ).style.display = 'none';
    document.querySelector('.squad-line').classList.remove('active-line');
    document.querySelector('.gender-line').classList.remove('active-line');
    document.querySelector('.postions-line').classList.remove('active-line');
  }

  function applyFilter() {
    document
      .querySelector('.legends-squad-filter')
      .classList.add('remove-filter');
    document
      .querySelector('.legends-squad-filter-menu')
      .classList.remove('add-animation');
  }

  function closeFilter() {
    document
      .querySelector('.legends-squad-filter')
      .classList.add('remove-filter');
    document
      .querySelector('.legends-squad-filter-menu')
      .classList.remove('add-animation');
  }

  function resultFilter() {
    document
      .querySelector('.legends-squad-filter')
      .classList.add('remove-filter');
    document
      .querySelector('.legends-squad-filter-menu')
      .classList.remove('add-animation');
  }

  allsquad.addEventListener('click', showAllSquad);
  allgender.addEventListener('click', showAllGender);
  allpostion.addEventListener('click', showAllPostions);
  backfilter.addEventListener('click', closeAllSquad);
  applyfilter.addEventListener('click', applyFilter);
  closefilter.addEventListener('click', closeFilter);
  resultfilter.addEventListener('click', resultFilter);
};

const disablefilter = () => {
  const disableCards = document.querySelectorAll('[data-filter]');

  window.onload = function() {
    const cardCount = document.querySelectorAll('.legend-player-count').length;

    document.getElementById('showmeresult').innerHTML = cardCount;

    const all = document.querySelectorAll('.all');

    for (let i = 0; i < all.length; i++) {
      all[i].disabled = true;
      all[i].classList.add('disable-buttons');
    }

    const mens = document.querySelectorAll('.mens');

    for (let i = 0; i < mens.length; i++) {
      mens[i].disabled = true;
      mens[i].classList.add('disable-buttons');
    }

    const womens = document.querySelectorAll('.womens');

    for (let i = 0; i < womens.length; i++) {
      womens[i].disabled = true;
      womens[i].classList.add('disable-buttons');
    }

    const para = document.querySelectorAll('.para');

    for (let i = 0; i < para.length; i++) {
      para[i].disabled = true;
      para[i].classList.add('disable-buttons');
    }

    const fustal = document.querySelectorAll('.fustal');

    for (let i = 0; i < fustal.length; i++) {
      fustal[i].disabled = true;
      fustal[i].classList.add('disable-buttons');
    }

    const link = document.querySelectorAll('.link');

    for (let i = 0; i < link.length; i++) {
      link[i].disabled = true;
      link[i].classList.add('disable-buttons');
    }

    disableCards.forEach(filtercard => {
      const currentCardFilterData = JSON.parse(filtercard.dataset.filter);

      if (currentCardFilterData.all === true) {
        for (let i = 0; i < all.length; i++) {
          all[i].disabled = false;
          all[i].classList.remove('disable-buttons');
        }
      }

      if (currentCardFilterData.mens === true) {
        for (let i = 0; i < mens.length; i++) {
          mens[i].disabled = false;
          mens[i].classList.remove('disable-buttons');
        }
      }

      if (currentCardFilterData.womens === true) {
        for (let i = 0; i < womens.length; i++) {
          womens[i].disabled = false;
          womens[i].classList.remove('disable-buttons');
        }
      }

      if (currentCardFilterData.para === true) {
        for (let i = 0; i < para.length; i++) {
          para[i].disabled = false;
          para[i].classList.remove('disable-buttons');
        }
      }

      if (currentCardFilterData.fustal === true) {
        for (let i = 0; i < fustal.length; i++) {
          fustal[i].disabled = false;
          fustal[i].classList.remove('disable-buttons');
        }
      }

      if (currentCardFilterData.link === true) {
        for (let i = 0; i < link.length; i++) {
          link[i].disabled = false;
          link[i].classList.remove('disable-buttons');
        }
      }
    });
  };
};

export default parentElement => {
  filtersquadEvents(parentElement);
  filtersectionEvents(parentElement);
  disablefilter(parentElement);
};
  • URL: /components/raw/legends-squad-filter-menu/legends-squad-filter-menu.js
  • Filesystem Path: src/library/components/legends-squad-filter-menu/legends-squad-filter-menu.js
  • Size: 11.4 KB
  • Content: 
    .legends-squad-filter-menu {
  background: $black;
  height: 100vh;
  width: 37.5rem;
  visibility: hidden;
  top: 0;
  left: -37.5rem;
  overflow: hidden;
  position: fixed;
  z-index: 110;
  opacity: 0;
  transition: all 0.25s;
  -webkit-transition: all 0.25s;

  &.add-animation {
    visibility: visible;
    opacity: 1;
    left: 0;
  }

  &__cancel {
    background: $white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.3rem 2rem 1.6rem 2.6rem;

    .filter-text {
      font-family: $text-font;
      font-size: 1.6rem;
      line-height: 2.4rem;
      color: $black;
    }

    .close-filter {
      font-family: $text-font;
      font-size: 1.4rem;
      line-height: 2.4rem;
      color: $color-interface-light;
      align-items: center;
      display: flex;
      cursor: pointer;

      &::after {
        content: '';
        background: url(./assets/images/icon-close.svg) no-repeat center;
        display: inline-block;
        width: 2rem;
        height: 2rem;
        margin-left: 1.6rem;
      }
    }

    .back-filter {
      font-family: $text-font;
      font-size: 1.4rem;
      line-height: 2.4rem;
      color: $blue;
      display: none;
      cursor: pointer;

      &::before {
        content: '';
        background: url(./assets/images/arrow-back.svg) no-repeat center;
        display: inline-block;
        width: 2rem;
        height: 2rem;
        margin-right: 1.4rem;
      }
    }
  }

  &__filter-scroll {
    overflow-y: scroll;
    height: 85vh;
  }

  &__filter-scroll::-webkit-scrollbar {
    width: 0.2rem;
  }

  &__filter-scroll::-webkit-scrollbar-track {
    background-color: $black;
    -webkit-border-radius: 1rem;
    border-radius: 1rem;
  }

  &__filter-section {
    &--list {
      cursor: pointer;

      .squad-line .gender-line .postions-line {
        background: $grey-light;
        opacity: 0.2;
        height: 0.1rem;
        width: 37rem;
        margin-right: 0.5rem;
      }

      .active-line {
        background: $brown;
        opacity: 0.9;
        height: 0.3rem;
        width: 34.3rem;
        margin: 0 auto;
      }
    }

    &--squadlist {
      display: flex;
      justify-content: space-between;
      padding: 2rem 3.3rem 1rem 2.6rem;

      &::after {
        content: '';
        background: url(./assets/images/arrow-next-white.svg) no-repeat center;
        display: inline-block;
        width: 2rem;
        height: 2rem;
        margin-top: 1rem;
      }

      .filterby {
        font-size: 1.2rem;
        line-height: 1.2rem;
        font-family: $text-font;
        text-transform: capitalize;
        color: $white;
        opacity: 0.7;
        text-decoration: none;
      }

      .title {
        font-size: 1.8rem;
        line-height: 4rem;
        font-family: $text-font;
        letter-spacing: -0.01em;
        color: $white;
        text-decoration: none;
      }
    }
  }

  &__button-group {
    position: absolute;
    bottom: 0;
    padding: 2rem 1.5rem 2.4rem 2rem;
    background: $black;

    &--results {
      display: flex;
      align-items: center;
      column-gap: 2rem;

      .result {
        background: $brown;
        border-radius: 0.2rem;
        width: 16rem;
        height: 4.4rem;
        color: $white;
        padding: 1.6rem 1.2rem 1.4rem 1.2rem;
        font-family: $text-font;
        font-size: 1.2rem;
        line-height: 1.4rem;
        text-align: center;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        cursor: pointer;

        span {
          font-weight: 600;
          letter-spacing: 0.06em;
        }
      }

      .filter {
        width: 16rem;
        height: 4.4rem;
        color: $color-interface-light;
        padding: 1.6rem 1.2rem 1.4rem 1.2rem;
        font-family: $text-font;
        font-size: 1.2rem;
        line-height: 1.4rem;
        text-align: center;
        letter-spacing: 0.01em;
        background: $white;
        border: 0.1rem solid $blue;
        box-sizing: border-box;
        border-radius: 0.2rem;
        text-transform: uppercase;
        cursor: pointer;
      }
    }

    &--apply-filter {
      display: none;

      .result {
        background: $brown;
        border-radius: 0.2rem;
        width: 33.5rem;
        height: 4.4rem;
        color: $white;
        padding: 1.6rem 1.2rem 1.4rem 1.2rem;
        font-family: $text-font;
        font-size: 1.2rem;
        line-height: 1.4rem;
        text-align: center;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        cursor: pointer;
      }
    }
  }

  &__filter-options {
    &--buttons {
      display: none;

      .filter-buttons {
        padding: 2rem 3.3rem 2rem 2.6rem;

        input {
          display: none;
          cursor: pointer;
        }

        label {
          position: relative;
          cursor: pointer;
          display: flex;
          font-family: $text-font;
          font-style: normal;
          font-weight: normal;
          font-size: 1.6rem;
          line-height: 3rem;
          letter-spacing: 0.02em;
          color: $white;
          justify-content: space-between;
          order: 2;
          user-select: none;
        }

        label::before {
          content: '';
          background: url(./assets/images/filter-selector.svg) no-repeat center;
          width: 3rem;
          height: 3rem;
          padding: 1rem;
          display: inline-block;
          position: relative;
          cursor: pointer;
          order: 2;
        }

        .disable-buttons + label {
          opacity: 0.5;
          cursor: default;
        }

        .disable-buttons + label::before {
          display: none;
        }

        input:checked + label::before {
          background: url(./assets/images/filter-selector-selected.svg)
            no-repeat center;
          width: 3rem;
          height: 3rem;
          display: inline-block;
          position: relative;
          cursor: pointer;
          order: 1;
        }

        input:checked + label::after {
          content: '';
          background: url(./assets/images/filter-selector-tick.svg) no-repeat
            center;
          width: 1rem;
          height: 0.8rem;
          display: block;
          position: absolute;
          bottom: 1.2rem;
          right: 1rem;
        }
      }

      .line {
        background: $grey-light;
        opacity: 0.2;
        height: 0.1rem;
        width: 37.5rem;
      }
    }
  }
}
  • URL: /components/raw/legends-squad-filter-menu/legends-squad-filter-menu.scss
  • Filesystem Path: src/library/components/legends-squad-filter-menu/legends-squad-filter-menu.scss
  • Size: 6.5 KB 
<div class="legends-squad-filter-menu" data-behaviour="legends-squad-filter-menu">
    <div class="legends-squad-filter-menu__cancel">
        <div class="filter-text">Adjust Filters</div>
        <div class="close-filter">Cancel</div>
        <div class="back-filter">Back</div>
    </div>

    <div class="legends-squad-filter-menu__filter-scroll">
        <div class="legends-squad-filter-menu__filter-section">
            <div class="legends-squad-filter-menu__filter-section--list" id="all-squad">
                <a class="legends-squad-filter-menu__filter-section--squadlist">
                    <div>
                        <div class="filterby">Filter by Squad</div>
                        <div class="title">All Squads</div>
                    </div>
                </a>
                <div class="squad-line"></div>
            </div>

            <div class="legends-squad-filter-menu__filter-section--list" id="all-genders">
                <a class="legends-squad-filter-menu__filter-section--squadlist">
                    <div>
                        <div class="filterby">Filter by Gender</div>
                        <div class="title">All Genders</div>
                    </div>
                </a>
                <div class="gender-line"></div>
            </div>

            <div class="legends-squad-filter-menu__filter-section--list" id="all-postions">
                <a class="legends-squad-filter-menu__filter-section--squadlist">
                    <div>
                        <div class="filterby">Filter by Postions</div>
                        <div class="title">All Postions</div>
                    </div>
                </a>
                <div class="postions-line"></div>
            </div>
        </div>

        <div class="legends-squad-filter-menu__filter-options">
            {{#each filters}}
            <div class="legends-squad-filter-menu__filter-options--buttons" id={{squad}}>
                {{#each list}}
                <div class="filter-buttons">
                    <input type="checkbox" class="{{filters}}" id="{{id}}" value="{{filters}}">
                    <label for="{{id}}">{{title}}</label>
                </div>
                <div class="line"></div>
                {{/each}}
            </div>
            {{/each}}
        </div>
    </div>

    <div class="legends-squad-filter-menu__button-group">
        <div class="legends-squad-filter-menu__button-group--results">
            <div class="result">Show Me <span id="showmeresult"></span><span> Results</span></div>
            <div class="filter reset-filter">Reset Filters</div>
        </div>
        <div class="legends-squad-filter-menu__button-group--apply-filter">
            <div class="result apply-filters"> Apply Filters </div>
        </div>
    </div>
</div>