From: Stephen Cameron <stephen@cubedesigners.com>
Date: Mon, 8 Nov 2021 20:41:14 +0000 (+0100)
Subject: WIP #4821 @5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=536d70a44297b87cd72e66323704e2a19a079b91;p=odl.git

WIP #4821 @5
---

diff --git a/resources/views/front/media-library.blade.php b/resources/views/front/media-library.blade.php
index b76de3f..fdb4abe 100644
--- a/resources/views/front/media-library.blade.php
+++ b/resources/views/front/media-library.blade.php
@@ -88,42 +88,80 @@
             '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"
@@ -154,13 +192,19 @@
                         <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>
@@ -170,13 +214,20 @@
                         <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>
@@ -185,17 +236,18 @@
 
                 <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