<div class="c-dropdown-filter " role="group">
<button class="c-dropdown-filter__btn" aria-haspopup="true" aria-expanded="false" data-target="content-1">
Aeroporto
<div class="icon"><svg class="c-icon--24">
<use xlink:href="#ic_expand_more_black_24px"></use>
</svg></div>
</button>
<div id="content-1" class="c-dropdown-filter__content" role="menu" hidden>
<div class="c-form">
<div class="filter-item"><input type="checkbox" id="airport-1" name="aiport-1" class="u-visuallyhidden " role="group" aria-label="airport-1">
<label for="airport-1" class="">
Milano, Bergamo/Orio Al Serio [BGY] (ITALIA)
</label>
</div>
<div class="filter-item"><input type="checkbox" id="airport-2" name="aiport-2" class="u-visuallyhidden " role="group" aria-label="airport-2">
<label for="airport-2" class="">
Milano, Linate [LIN] (ITALIA)
</label>
</div>
<div class="filter-item"><input type="checkbox" id="airport-3" name="aiport-3" class="u-visuallyhidden " role="group" aria-label="airport-3">
<label for="airport-3" class="">
Milano, Malpensa [MXP] (ITALIA)
</label>
</div>
<div class="filter-item"><input type="checkbox" id="airport-4" name="aiport-4" class="u-visuallyhidden " role="group" aria-label="airport-4">
<label for="airport-4" class="">
Milano, Tutti gli aeroporti [MIL] (ITALIA)
</label>
</div>
</div>
</div>
</div>
<div class="c-dropdown-filter {{modifier}}" role="group">
<button class="c-dropdown-filter__btn" aria-haspopup="true" aria-expanded="false" data-target="content-{{id}}">
{{ button-text }}
<div class="icon">{{> @icon symbol="ic_expand_more_black_24px" class="c-icon--24" }}</div>
</button>
<div id="content-{{id}}" class="c-dropdown-filter__content" role="menu" hidden>
{{#> @partial-block }}
<div class="c-form">
{{#each fake-checkboxes }}
<div class="filter-item">{{> @checkbox }}</div>
{{/each}}
</div>
{{/ @partial-block }}
</div>
</div>
{
"id": 1,
"button-text": "Aeroporto",
"fake-checkboxes": [
{
"id": "airport-1",
"name": "aiport-1",
"text": "Milano, Bergamo/Orio Al Serio [BGY] (ITALIA)"
},
{
"id": "airport-2",
"name": "aiport-2",
"text": "Milano, Linate [LIN] (ITALIA)"
},
{
"id": "airport-3",
"name": "aiport-3",
"text": "Milano, Malpensa [MXP] (ITALIA)"
},
{
"id": "airport-4",
"name": "aiport-4",
"text": "Milano, Tutti gli aeroporti [MIL] (ITALIA)"
}
]
}
.c-dropdown-filter {
position: relative;
}
.c-dropdown-filter__btn {
background-color: #FFF;
padding: remify(12px) remify(16px);
border: remify(1px) solid primary(sky, 60);
border-radius: remify(12px);
cursor: pointer;
color: secondary(text, 100);
@include font-scale(level-2);
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
// &:focus {
// @include outline;
// }
.icon {
width: remify(24px);
height: remify(24px);
}
}
.c-dropdown-filter__btn[aria-expanded="true"] {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
.icon {
transform: rotate(180deg);
}
}
.c-dropdown-filter__content {
position: absolute;
left: 0;
width: 100%;
border: remify(1px) solid primary(night, 20);
border-top: 0;
background-color: #FFF;
min-width: remify(150px);
padding: remify(16px);
z-index: $z-Index-dropdown-filter;
border-radius: 0 0 remify(12px) remify(12px);
max-height: remify(300px);
overflow-y: auto;
@include font-scale(level-1-5);
.filter-item + .filter-item {
margin-top: remify(16px);
}
.c-form input[type=checkbox] + label,
.c-form input[type=radio] + label {
font-size: remify(14px);
}
}
.c-dropdown-filter__tabs {
display: flex;
border-bottom: remify(1px) solid primary(sky, 20);
.tab {
flex: 1 1 50%;
}
.tab a {
display: block;
padding-bottom: remify(8px);
text-decoration: none;
width: 100%;
text-align: center;
color: secondary(text, 100);
}
.tab a[aria-selected="true"] {
color: primary(sky, 120);
font-weight: fw(semibold);
border-bottom: remify(2px) solid primary(sky, 120);
}
}
.c-dropdown-filter--tabs .tab-content {
margin-top: remify(16px);
}
document.addEventListener('DOMContentLoaded', () => {
let currentOpen = null;
function isClickInsideElement(event, className) {
let target = event.target;
while (target != null) {
if (target.classList.contains(className)) {
return true;
}
target = target.parentElement;
}
return false;
}
document.querySelectorAll('.c-dropdown-filter__btn').forEach(button => {
button.addEventListener('click', function () {
// const contentId = 'content-' + this.id.slice(-1);
const contentId = this.getAttribute('data-target');
const contentDiv = document.getElementById(contentId);
const isOpen = !contentDiv.hasAttribute('hidden');
if (currentOpen && currentOpen !== contentDiv) {
currentOpen.setAttribute('hidden', '');
updateAriaExpanded(currentOpen.previousElementSibling, false);
}
if (isOpen) {
contentDiv.setAttribute('hidden', '');
updateAriaExpanded(this, false);
} else {
contentDiv.removeAttribute('hidden');
updateAriaExpanded(this, true);
currentOpen = contentDiv;
}
});
});
function updateAriaExpanded(element, state) {
element.setAttribute('aria-expanded', state);
}
// Event listener for ESC key press
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape' && currentOpen) {
currentOpen.setAttribute('hidden', '');
updateAriaExpanded(currentOpen.previousElementSibling, false);
currentOpen = null;
}
});
window.addEventListener('click', function (event) {
if (!isClickInsideElement(event, 'c-dropdown-filter__content') && !event.target.matches('.c-dropdown-filter__btn')) {
if (currentOpen) {
currentOpen.setAttribute('hidden', '');
updateAriaExpanded(currentOpen.previousElementSibling, false);
currentOpen = null;
}
}
}, true);
});
No notes defined.