Live
Surf
Ride
Ski
Run
like a legend
Legends are the mind and soul of Outdoo trips. They know the places, the people, and the right moments. And now they are sharing them. No, not just on Instagram, but in person.
(() => {
"use strict";
const BAR_SELECTOR = 'search.e-filter, .e-filter[role="search"]';
const ITEM_SELECTOR = 'button.e-filter-item'; // i tuoi bottoni
const ACTIVE_CHECK = btn => btn.getAttribute('aria-pressed') === 'true';
function enhance(bar){
if (!bar || bar.dataset.dropdownInit === '1') return;
const buttons = Array.from(bar.querySelectorAll(ITEM_SELECTOR));
if (!buttons.length) return;
// Costruisci il
const select = document.createElement('select');
select.className = 'e-filter-select';
select.setAttribute('aria-label', 'Filtro contenuti');
// mappa value -> button
const map = new Map();
buttons.forEach((btn, i) => {
const label = (btn.textContent || '').trim() || `Filtro ${i+1}`;
const value = btn.getAttribute('data-filter') || label;
const opt = new Option(label, value, false, ACTIVE_CHECK(btn));
select.add(opt);
map.set(value, btn);
});
// Inserisci e nascondi la bar originale
bar.after(select);
bar.classList.add('e-filter--hidden');
bar.setAttribute('aria-hidden', 'true');
// Cambio -> click sul bottone associato
select.addEventListener('change', () => {
const btn = map.get(select.value) || buttons[0];
if (!btn) return;
// click “reale” per innescare gli handler Elementor
btn.click?.();
btn.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
});
// Osserva cambi di aria-pressed per tenere il select allineato
const sync = () => {
const active = buttons.find(ACTIVE_CHECK);
if (!active) return;
const val = active.getAttribute('data-filter');
const match = Array.from(select.options).find(o => o.value === val);
if (match) select.value = match.value;
};
new MutationObserver(sync).observe(bar, {
subtree: true,
attributes: true,
attributeFilter: ['aria-pressed']
});
// alcuni temi togglano aria-pressed sul bottone stesso, quindi osserviamo anche i bottoni
buttons.forEach(btn => {
new MutationObserver(sync).observe(btn, { attributes: true, attributeFilter: ['aria-pressed'] });
});
sync();
bar.dataset.dropdownInit = '1';
}
function initAll(){ document.querySelectorAll(BAR_SELECTOR).forEach(enhance); }
// inizializza
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initAll);
} else {
initAll();
}
// se Elementor/popup rimescola il DOM
if (window.jQuery && window.elementorFrontend) {
jQuery(document).on('elementor/render/after elementor/popup/show', initAll);
}
})();
/* select base (tweak a piacere) */
.e-filter-select{
width:100%;
min-width:220px;
padding:.6rem .8rem;
border:1px solid #ddd;
border-radius:8px;
font-size:14px;
line-height:1.2;
background:#fff;
}
.e-filter-select:focus{
outline:none;
border-color:#999;
box-shadow:0 0 0 3px rgba(0,0,0,.06);
}
/* nasconde la bar originale in modo accessibile */
.e-filter--hidden{
position:absolute !important;
width:1px !important;
height:1px !important;
overflow:hidden !important;
clip:rect(1px,1px,1px,1px) !important;
white-space:nowrap !important;
border:0 !important;
padding:0 !important;
margin:0 !important;
}