<div class="legends-squad-filter remove-filter" data-behaviour="legends-squad-filter">
<div class="legends-squad-filter__content">
<div class="legends-squad-filter__result">
<span>Filter Results</span>
</div>
<div class="legends-squad-filter__count">
<div class="number" id="number">0</div>
</div>
</div>
</div>
No notes defined.
/* No context defined. */
export default parentElement => {
const openFilter = parentElement.querySelector(
'.legends-squad-filter__content'
);
const closeFilter = document.querySelector('.close-filter');
function showFilterPanel() {
parentElement.classList.add('hide-filter');
document
.querySelector('.legends-squad-filter-menu')
.classList.add('add-animation');
document.body.classList.add('dark-overlay');
document.getElementById('all-squads-filter').style.display = 'none';
document.getElementById('all-genders-filter').style.display = 'none';
document.getElementById('all-positions-filter').style.display = 'none';
document.getElementById('all-squads').style.display = 'block';
document.getElementById('all-genders').style.display = 'block';
document.getElementById('all-positions').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('.filter-squads').classList.add('squads-line');
document.querySelector('.filter-genders').classList.add('genders-line');
document.querySelector('.filter-positions').classList.add('positions-line');
document.querySelector('.filter-squads').classList.remove('active-line');
document.querySelector('.filter-genders').classList.remove('active-line');
document.querySelector('.filter-positions').classList.remove('active-line');
document.querySelector('.squads-list').classList.add('squads-next');
document.querySelector('.genders-list').classList.add('genders-next');
document.querySelector('.positions-list').classList.add('positions-next');
}
function hideFilterPanel() {
document
.querySelector('.legends-squad-filter-menu')
.classList.remove('add-animation');
parentElement.classList.remove('hide-filter');
document.body.classList.remove('dark-overlay');
}
openFilter.addEventListener('click', showFilterPanel);
closeFilter.addEventListener('click', hideFilterPanel);
const bottomofthedesktop =
document.querySelector('.legends__signpost').offsetTop + 350;
const bottomofthemobile =
document.querySelector('.legends__signpost').offsetTop + 100;
const scrollFuncup = () => {
if (
document.body.scrollTop > 900 ||
document.documentElement.scrollTop > 1000
) {
parentElement.classList.remove('remove-filter');
} else {
parentElement.classList.add('remove-filter');
}
};
const scrollFuncdown = () => {
if (
document.documentElement.scrollTop > bottomofthemobile &&
window.innerWidth < 820
) {
parentElement.classList.add('remove-filter');
} else if (
document.documentElement.scrollTop > bottomofthedesktop &&
window.innerWidth < 2100
) {
parentElement.classList.add('remove-filter');
}
};
window.addEventListener('scroll', scrollFuncup);
window.addEventListener('scroll', scrollFuncdown);
};
.legends-squad-filter {
cursor: pointer;
position: fixed;
left: 50%;
bottom: 4rem;
visibility: visible;
opacity: 1;
transition: all 0.25s ease-in-out;
transform: translateX(-50%);
&.remove-filter {
visibility: hidden;
opacity: 0;
}
&.hide-filter {
visibility: hidden;
opacity: 0;
}
&__content {
display: flex;
align-items: center;
box-shadow: 0 0.2rem 1.2rem rgba(57, 48, 48, 0.15);
width: 24.6rem;
height: 4.4rem;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
&__result {
font-size: 1.4rem;
line-height: 2rem;
font-family: $text-font;
letter-spacing: 0.02em;
text-transform: uppercase;
width: 19.2rem;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 5rem 0 0 5rem;
height: 4.4rem;
transition: all 0.3s ease;
&::before {
content: '';
background: url(./assets/images/filter-icon.svg) no-repeat center;
display: inline-block;
width: 2rem;
height: 1.5rem;
margin-right: 1.7rem;
}
span {
padding-top: 0.3rem;
}
}
&:hover .legends-squad-filter__result {
background: #968165;
color: $white;
&::before {
filter: invert(1);
}
}
&:hover .legends-squad-filter__content {
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(0.95);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(0.95);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(0.95);
transition: all 200ms ease-in;
transform: scale(0.95);
}
&__count {
background: $grey-light;
padding: 0.9rem 1.4rem;
border-radius: 0 5rem 5rem 0;
.number {
font-family: $ef-font;
font-size: 1.6rem;
line-height: 2.4rem;
background: $black;
width: 2.6rem;
height: 2.6rem;
color: $white;
border-radius: 50%;
align-items: center;
display: flex;
justify-content: space-around;
}
}
}
.dark-overlay {
overflow: hidden;
&::after {
content: '';
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(black, 0.7);
z-index: 101;
}
}
<div class="legends-squad-filter remove-filter" data-behaviour="legends-squad-filter">
<div class="legends-squad-filter__content">
<div class="legends-squad-filter__result">
<span>Filter Results</span>
</div>
<div class="legends-squad-filter__count">
<div class="number" id="number">0</div>
</div>
</div>
</div>