'4' => "Système d'information",
'8' => "Conditions techniques",
];
+
+ // Format arrays for use on frontend
+ $media_filters = collect($media_types)->mapWithKeys(function($item, $key) {
+ return ["media-$key" => $item];
+ });
+ $theme_filters = collect($themes)->mapWithKeys(function($item, $key) {
+ return ["theme-$key" => $item];
+ });
+ $filters = array_merge($media_filters->toArray(), $theme_filters->toArray());
+
+ // TODO: Implement Isotope JS for class-based filtering
@endphp
- <h1 class="uppercase">Médiathèque</h1>
+ <div x-data="{ filters: {{ json_encode($filters) }}, filtersOpen: false, activeFilters: [] }" x-effect="console.log(activeFilters)">
- {{-- FILTERS --}}
- <div class="mt-10" x-data>
- <a @click.prevent="$dispatch('open-filters')" href="#" class="inline-block bg-black hover:bg-blue text-white font-secondary font-medium leading-none py-4 px-6 rounded-full">Filtrer</a>
- </div>
+ <h1 class="uppercase">Médiathèque</h1>
- {{-- MEDIA LIBRARY GRID --}}
- <div class="mt-10 grid grid-cols-4 gap-x-5 gap-y-16">
- @foreach ($media as $item)
- <div class="media-item" data-type="{{ $item['type'] }}" data-theme="{{ $item['theme']['id'] }}">
- <div class="media-item-image relative bg-cover bg-no-repeat rounded-md pb-[56.25%]" style="background-image:url({{ $item['image'] }})">
- {{-- TODO: play button --}}
- {{-- TODO: media length --}}
- </div>
- <div class="mt-2.5 font-secondary font-medium text-xs leading-none" style="color:{{ $item['theme']['color'] }}">
- {{ $item['theme']['title'] }}
+ {{-- FILTERS --}}
+ <div class="mt-10 space-x-2 space-y-2">
+ <a @click.prevent="filtersOpen = true"
+ href="#"
+ class="inline-block py-4 px-6 rounded-full
+ bg-black hover:bg-blue
+ text-white font-secondary font-medium leading-none">
+ Filtrer
+ </a>
+
+ {{-- ACTIVE FILTERS (JS) --}}
+ <template x-for="activeFilter in activeFilters">
+ <div class="relative inline-flex py-4 pl-4 pr-12 leading-none rounded-full border border-grey-200 text-black">
+ <span x-text="filters[activeFilter]" class="whitespace-nowrap"></span>
+ {{-- REMOVE (X) ICON --}}
+ <a href="#"
+ @click.prevent="activeFilters = activeFilters.filter(item => item !== activeFilter)"
+ class="absolute w-7 h-7 right-2 top-1/2 transform -translate-y-1/2
+ flex items-center justify-center
+ rounded-full bg-grey-200 text-current">
+ <svg class="stroke-current" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 10.828 10.828">
+ <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+ <path d="m1.414 9.414 8-8"/>
+ <path data-name="Path 46" d="m1.414 1.414 8 8"/>
+ </g>
+ </svg>
+ </a>
</div>
- <div class="mt-1.5 font-semibold leading-snug">
- {{ $item['title'] }}
+ </template>
+ </div>
+
+ {{-- MEDIA LIBRARY GRID --}}
+ <div class="mt-10 grid grid-cols-4 gap-x-5 gap-y-16">
+ @foreach ($media as $item)
+ <div class="media-item media-{{ $item['type'] }} theme-{{ $item['theme']['id'] }}">
+ <div class="media-item-image relative bg-cover bg-no-repeat rounded-md pb-[56.25%]" style="background-image:url({{ $item['image'] }})">
+ {{-- TODO: play button --}}
+ {{-- TODO: media length --}}
+ </div>
+ <div class="mt-2.5 font-secondary font-medium text-xs leading-none" style="color:{{ $item['theme']['color'] }}">
+ {{ $item['theme']['title'] }}
+ </div>
+ <div class="mt-1.5 font-semibold leading-snug">
+ {{ $item['title'] }}
+ </div>
</div>
- </div>
- @endforeach
- </div>
+ @endforeach
+ </div>
- <div x-data="{ filtersOpen: false }" @open-filters.window="filtersOpen = true">
{{-- FILTERING INTERFACE --}}
<div class="filters-overlay
- fixed top-0 left-0 w-screen h-screen
- flex items-center
- bg-blue text-white
- px-30
- z-20
- transition ease-out-cubic duration-500"
+ fixed top-0 left-0 w-screen h-screen
+ flex items-center
+ bg-blue text-white
+ px-30
+ z-20
+ transition ease-out-cubic duration-500"
x-show="filtersOpen"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
<h3 class="font-medium text-4xl mb-5">Média</h3>
<div class="grid grid-cols-1 gap-5">
@foreach($media_types as $media_type_id => $media_type)
- <div>
- <button class="font-secondary font-medium
- py-2.5 px-5 rounded-full border
- hover:bg-white hover:text-black">
- {{ $media_type }}
- </button>
- </div>
+ <label>
+ <input type="checkbox"
+ value="media-{{ $media_type_id }}"
+ x-model="activeFilters"
+ class="peer sr-only">
+ <span class="inline-block cursor-pointer
+ font-secondary font-medium
+ py-2.5 px-5 rounded-full border
+ peer-checked:bg-white peer-checked:text-black
+ transition">
+ {{ $media_type }}
+ </span>
+ </label>
@endforeach
</div>
</div>
<h3 class="font-medium text-4xl mb-5">Thème</h3>
<div class="grid grid-cols-2 gap-5">
@foreach($themes as $theme_id => $theme)
- <div>
- <button class="font-secondary font-medium
- py-2.5 px-5 rounded-full border whitespace-nowrap
- hover:bg-white hover:text-black">
- {{ $theme }}
- </button>
- </div>
+ <label>
+ <input type="checkbox"
+ value="theme-{{ $theme_id }}"
+ x-model="activeFilters"
+ class="peer sr-only">
+ <span class="inline-block cursor-pointer
+ font-secondary font-medium
+ whitespace-nowrap
+ py-2.5 px-5 rounded-full border
+ peer-checked:bg-white peer-checked:text-black
+ transition">
+ {{ $theme }}
+ </span>
+ </label>
@endforeach
</div>
</div>
<div class="text-right mt-20">
<button @click="filtersOpen = false"
- class="bg-blue-dark
- font-medium
- py-3 px-8 rounded-full">
+ class="bg-blue-dark
+ font-medium
+ py-3 px-8 rounded-full">
Valider
</button>
</div>
</div>
-
-
</div>
+
</div>
+
+
@endsection
projects / odl.git / commitdiff