Base - Voir le template
Configurateur (en attente de maquette validée)
<div x-data="initFilterBlock()">
<div class="flex gap-0.75 md:gap-3.75">
<button data-key="0"
:class="{
'flex-1 bg-white': activeTab === 0,
'bg-ui-light': activeTab !== 0
}"
class="flex-1 lg:min-w-fit bg-ui-light first:rounded-tl-button last:rounded-tr-button text-left text-base md:text-lg 2xl:text-xl font-semibold px-5 xl:px-7.5 py-3 md:py-5 transition-all"
@click="changeTab(0)"
>
Véhicules occasion <span class="text-secondary">en stock</span>
</button>
<button data-key="1"
:class="{
'flex-1 bg-white': activeTab === 1,
'bg-ui-light': activeTab !== 1
}"
class="lg:min-w-fit bg-ui-light first:rounded-tl-button last:rounded-tr-button text-left text-base md:text-lg 2xl:text-xl font-semibold px-5 xl:px-7.5 py-3 md:py-5 transition-all"
@click="changeTab(1)"
>
Véhicules neufs <span class="text-secondary">en stock</span>
</button>
<button data-key="2"
:class="{
'flex-1 bg-white': activeTab === 2,
'bg-ui-light': activeTab !== 2
}"
class="lg:min-w-fit bg-ui-light first:rounded-tl-button last:rounded-tr-button text-left text-base md:text-lg 2xl:text-xl font-semibold px-5 xl:px-7.5 py-3 md:py-5 transition-all"
@click="changeTab(2)"
>
Configurer votre véhicule
</button>
</div>
<div class="bg-white px-5 md:px-6.25 py-6.25 flex flex-col gap-3.75">
<div :class="{ 'hidden': activeTab !== 0 }" class="flex flex-col gap-3.75">
<div class="flex gap-3.75">
<div class="form-element text w-full">
<input name="search"
class="form-input form-input--search pr-13 w-full"
id="search_used" x-ref="search"
type="text"
title="Nom"
placeholder="Rechercher une marque"
pattern="\S+"
@keyup="search()"
>
<span class="flex">
<span :class="{'hidden' : inSearch}">
<svg class="icon text-background-dark w-4.5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16.7 16.7" enable-background="new 0 0 16.7 16.7" xml:space="preserve">
<path fill="none" stroke="currentColor" stroke-width="2.0408" stroke-linecap="round" stroke-linejoin="round" d="M1.5,9.3
c0.6,1.4,1.8,2.6,3.2,3.2c1.5,0.6,3.1,0.6,4.5,0c1.4-0.6,2.6-1.8,3.2-3.2c0.6-1.5,0.6-3.1,0-4.5S10.6,2,9.2,1.5
c-1.5-0.6-3.1-0.6-4.5,0C3.2,2.1,2,3.3,1.5,4.7S0.9,7.8,1.5,9.3L1.5,9.3z"/>
<path fill="none" stroke="currentColor" stroke-width="2.0408" stroke-linecap="round" stroke-linejoin="round" d="M11.1,11.1l4.6,4.6"/>
</svg>
</span>
<button @click="clear()" :class="{'hidden' : !inSearch}" class="hidden">
<svg class="icon w-4.5" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="11" cy="11" r="11" fill="#0260E7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2929 6.29289C14.6834 5.90237 15.3166 5.90237 15.7071 6.29289C16.0976 6.68342 16.0976 7.31658 15.7071 7.70711L12.4142 11L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L11 12.4142L7.70711 15.7071C7.31658 16.0976 6.68342 16.0976 6.29289 15.7071C5.90237 15.3166 5.90237 14.6834 6.29289 14.2929L9.58579 11L6.29289 7.70711C5.90237 7.31658 5.90237 6.68342 6.29289 6.29289C6.68342 5.90237 7.31658 5.90237 7.70711 6.29289L11 9.58579L14.2929 6.29289Z" fill="white"/>
</svg>
</button>
</span>
</div>
<div class="form-element form-box-radio-slider"
x-data="boxCheckboxSlider"
@resize.window="init()">
<div x-ref="controler" class="controler"></div>
<div class="label-wrapper" x-ref="wrapper">
<label for="vehicle_used">
<input @click="changeInput()" type="radio" value="vehicule" name="vehicule_used" id="vehicle_used" checked>
<span>Véhicule</span>
</label>
<label for="moto_used">
<input @click="changeInput()" type="radio" value="moto" name="vehicule_used" id="moto_used">
<span>Moto</span>
</label>
</div>
</div>
</div>
<div class="flex items-center gap-3.5 md:gap-2.5">
<div x-ref="labelWrapperSkeleton" :class="{'hidden': loadedLabel}" class="skeleton h-[47px] w-full"></div>
<div x-ref="labelWrapper"
:class="{
'md:hidden': !loadedLabel,
'md:flex': loadedLabel
}"
class="overflow-hidden relative items-center gap-3.5 md:gap-2.5 hidden md:flex"
>
<button class="filter-pill border-ui px-5 hover:bg-ui-light">
<span>Marque</span>
</button>
<button class="filter-pill border-ui px-5 hover:bg-ui-light">
<span>Modèle</span>
</button>
<button class="filter-pill border-ui px-5 hover:bg-ui-light">
<span>Budget</span>
</button>
<button class="filter-pill border-ui px-5 hover:bg-ui-light">
<span>Type de véhicule</span>
</button>
<button class="filter-pill border-ui px-5 hover:bg-ui-light">
<span>Energie</span>
</button>
<button class="filter-pill border-ui px-5 hover:bg-ui-light">
<span>Année</span>
</button>
<button class="filter-pill border-ui px-5 hover:bg-ui-light">
<span>Kilométrage</span>
</button>
<button class="filter-pill border-ui px-5 hover:bg-ui-light">
<span>Label</span>
</button>
</div>
<button class="filter-pill border-ui px-5 hover:bg-ui-light flex-1">
<span class="md:hidden">Filtrer</span>
<span class="hidden md:block">Tous les filtres</span>
</button>
<button class="filter-pill bg-primary-accent text-white hover:bg-primary px-13 md:px-20">
<svg class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16.7 16.7" enable-background="new 0 0 16.7 16.7" xml:space="preserve">
<path fill="none" stroke="currentColor" stroke-width="2.0408" stroke-linecap="round" stroke-linejoin="round" d="M1.5,9.3
c0.6,1.4,1.8,2.6,3.2,3.2c1.5,0.6,3.1,0.6,4.5,0c1.4-0.6,2.6-1.8,3.2-3.2c0.6-1.5,0.6-3.1,0-4.5S10.6,2,9.2,1.5
c-1.5-0.6-3.1-0.6-4.5,0C3.2,2.1,2,3.3,1.5,4.7S0.9,7.8,1.5,9.3L1.5,9.3z"/>
<path fill="none" stroke="currentColor" stroke-width="2.0408" stroke-linecap="round" stroke-linejoin="round" d="M11.1,11.1l4.6,4.6"/>
</svg>
</button>
</div>
</div>
<div :class="{ 'hidden': activeTab !== 1 }" class="hidden flex flex-col gap-3.75">
<div class="label-container relative flex flex-wrap md:flex-nowrap gap-3.75">
<div class="form-element form-box-radio-slider order-1 md:order-0"
x-data="boxCheckboxSlider"
@resize.window="init()">
<div x-ref="controler" class="controler"></div>
<div class="label-wrapper" x-ref="wrapper">
<label for="vehicle_new">
<input @click="changeInput()" type="radio" value="vehicle" name="vehicle_new" id="vehicle_new" checked>
<span>Véhicule</span>
</label>
<label for="moto_new">
<input @click="changeInput()" type="radio" value="moto" name="vehicle_new" id="moto_new">
<span>Moto</span>
</label>
</div>
</div>
<div class="label-list-container flex gap-3.75 flex-1 md:order-1">
<div class="flex items-center gap-3.5 md:gap-2.5 flex-1">
<div x-ref="labelWrapperNewSkeleton" :class="{'hidden': loadedLabel}" class="skeleton h-[47px] w-full"></div>
<div x-ref="labelWrapperNew"
:class="{
'md:hidden': !loadedLabel,
'md:flex': loadedLabel
}"
class="overflow-hidden relative items-center gap-3.5 md:gap-2.5 hidden md:flex">
<button class="filter-pill border-primary-accent text-primary-accent px-5 hover:bg-primary-accent hover:text-white group">
<span>Peugeot</span>
<svg class="icon w-2.5 text-primary-accent group-hover:text-white" width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0608 14.1819L2.12132 24.1213L0 22L9.93945 12.0605L0.000226974 2.12132L2.12155 0L12.0608 9.93923L22 0L24.1213 2.12132L14.1821 12.0605L24.1215 22L22.0002 24.1213L12.0608 14.1819Z" fill="currentColor"/>
</svg>
</button>
<button class="filter-pill border-ui px-5 hover:bg-ui-light">
<span>Modèle</span>
</button>
<button class="filter-pill border-ui px-5 hover:bg-ui-light">
<span>Budget</span>
</button>
<button class="filter-pill border-ui px-5 hover:bg-ui-light">
<span>Type de véhicule</span>
</button>
<button class="filter-pill border-ui px-5 hover:bg-ui-light">
<span>Energie</span>
</button>
<button class="filter-pill border-ui px-5 hover:bg-ui-light">
<span>Année</span>
</button>
<button class="filter-pill border-ui px-5 hover:bg-ui-light">
<span>Kilométrage</span>
</button>
<button class="filter-pill border-ui px-5 hover:bg-ui-light">
<span>Label</span>
</button>
</div>
<button class="filter-pill border-ui px-5 hover:bg-ui-light flex-1">
<span class="md:hidden">Filtrer</span>
<span class="hidden md:block">Tous les filtres</span>
</button>
</div>
</div>
<button class="button-search filter-pill bg-primary-accent text-white hover:bg-primary px-13 md:px-20 w-full md:w-auto order-2 md:order-3">
<svg class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16.7 16.7" enable-background="new 0 0 16.7 16.7" xml:space="preserve">
<path fill="none" stroke="currentColor" stroke-width="2.0408" stroke-linecap="round" stroke-linejoin="round" d="M1.5,9.3
c0.6,1.4,1.8,2.6,3.2,3.2c1.5,0.6,3.1,0.6,4.5,0c1.4-0.6,2.6-1.8,3.2-3.2c0.6-1.5,0.6-3.1,0-4.5S10.6,2,9.2,1.5
c-1.5-0.6-3.1-0.6-4.5,0C3.2,2.1,2,3.3,1.5,4.7S0.9,7.8,1.5,9.3L1.5,9.3z"/>
<path fill="none" stroke="currentColor" stroke-width="2.0408" stroke-linecap="round" stroke-linejoin="round" d="M11.1,11.1l4.6,4.6"/>
</svg>
</button>
</div>
</div>
<div :class="{ 'hidden': activeTab !== 2 }" class="hidden flex flex-col gap-3.75">
Configurateur (en attente de maquette validée)
</div>
</div>
<script>
function initFilterBlock() {
return {
activeTab: 0,
loadedLabel: false,
inSearch: false,
init() {
this.labelsShow();
this.loadedLabel = true;
let current = this;
let resizeObserver = new ResizeObserver(() => {
current.labelsShow();
});
resizeObserver.observe(this.$root);
console.log(this.loadedLabel)
},
changeTab(tab) {
this.activeTab = tab;
},
labelsShow() {
this.labelCalc(this.$refs.labelWrapper);
this.labelCalcNew(this.$refs.labelWrapperNew);
},
labelCalc(label) {
let maxWidth = label.offsetWidth;
const items = label.querySelectorAll('button');
items.forEach(item => {
item.classList.remove('hidden')
})
maxWidth = label.offsetWidth;
items.forEach(item => {
if(item.offsetLeft + item.offsetWidth > maxWidth) {
item.classList.add('hidden');
}
})
},
labelCalcNew(label) {
const listContainer = getParentsByClass(label, 'label-list-container');
const prevSiblings = getPrevSiblings(listContainer[0]);
const nextSiblings = getNextSiblings(label);
const parents = getParentsByClass(label, 'label-container');
const items = label.querySelectorAll('button');
let maxWidth = parents[0].offsetWidth - parents[0].querySelector('.form-box-radio-slider').offsetWidth - parents[0].querySelector('.button-search').offsetWidth - 40;
items.forEach(item => {
item.classList.remove('hidden')
});
nextSiblings.forEach(sibling => {
maxWidth = maxWidth - sibling.offsetWidth;
})
prevSiblings.forEach(sibling => {
maxWidth = maxWidth - sibling.offsetWidth;
})
items.forEach(item => {
if(item.offsetLeft + item.offsetWidth > maxWidth) {
item.classList.add('hidden');
}
})
},
search() {
this.inSearch = this.$el.value !== "";
},
clear() {
this.$el.parentNode.parentNode.querySelector('input').value = "";
this.inSearch = false;
}
}
}
</script>
</div>