WIP #4781 @9

diff --git a/resources/css/common/plyr.css b/resources/css/common/plyr.css
index 03a12c3d67077781fa2031d240c3b91717d8ef99..08eb7d515f549f5b0764de7f7608111e023a7278 100644 (file)
--- a/resources/css/common/plyr.css
+++ b/resources/css/common/plyr.css
@@ -9,8 +9,12 @@
     --plyr-range-fill-background: #000;
 }
 
-.plyr__time {
-    @apply font-secondary;
+.plyr-timecode {
+    /* Ensure layout doesn't shift as timecodes change */
     font-feature-settings: "tnum";
     font-variant-numeric: tabular-nums;
 }
+
+[data-plyr="play"] {
+    background: var(--plyr-color-main);
+}

diff --git a/resources/js/media-library.js b/resources/js/media-library.js
index acb2c8ed5d3285710888eaf9e9690a99a633a1f4..cf9e7e5449c15b6feb1b1e2585cb4da28cdc58ba 100644 (file)
--- a/resources/js/media-library.js
+++ b/resources/js/media-library.js
@@ -17,7 +17,10 @@ export default (options = {}) => ({
     player: {}, // Holds the Plyr instance
     playerOptions: { // Settings used for Plyr instantiation (https://github.com/sampotts/plyr#options)
         debug: false,
+        loadSprite: false, // Custom SVG sprite is already embedded in the page
     },
+    playerDuration: '00’00',
+    playerTime: '00’00',
 
     /***********\
     | Filtering |
@@ -91,16 +94,21 @@ export default (options = {}) => ({
         this.player = new Plyr(selector, this.playerOptions);
         window.player = this.player; // Make player object available in console
 
+        this.player.on('loadedmetadata', event => {
+            // Duration is only available once metadata is loaded
+            this.playerDuration = this.formatTime(this.player.duration);
+        });
+
         this.player.on('timeupdate', event => {
-            const instance = event.detail.plyr;
-            console.log('timeupdate', instance.currentTime);
+            // Reformat the time code every time it changes
+            this.playerTime = this.formatTime(event.detail.plyr.currentTime);
         });
     },
 
     openPlayer(sourceData) {
-        this.playerOpen = true;
         this.player.source = sourceData;
         this.player.play();
+        this.playerOpen = true;
     },
 
     closePlayer() {
@@ -108,4 +116,11 @@ export default (options = {}) => ({
         this.playerOpen = false;
     },
 
+    formatTime(rawSeconds) {
+        let minutes = Math.trunc(rawSeconds / 60).toString().padStart(2, '0'),
+            seconds = Math.trunc(rawSeconds % 60).toString().padStart(2, '0');
+
+        return `${minutes}’${seconds}`;
+    },
+
 });

diff --git a/resources/views/components/close.blade.php b/resources/views/components/close.blade.php
index b4738609a2267c2d6bc6baefcdb7d54518179913..8e041afa35e63d1e657b1418427f7cdf8227d38b 100644 (file)
--- a/resources/views/components/close.blade.php
+++ b/resources/views/components/close.blade.php
@@ -1,5 +1,8 @@
 {{-- Close --}}
-<a href="#" class="absolute top-8 right-8 flex" {{ $attributes }}>
+@php
+    $class = $class ?? 'absolute top-8 right-8 flex'; // Overridable default classes
+@endphp
+<a href="#" class="{{ $class }}" {{ $attributes }}>
     <span class="mr-8">Fermer</span>
 
     <svg class="stroke-current" xmlns="http://www.w3.org/2000/svg" width="33" height="26" viewBox="0 0 25.098 25.098">

diff --git a/resources/views/components/media-library/filter-interface.blade.php b/resources/views/components/media-library/filter-interface.blade.php
index 468842fd8fac11e6bac4f17c0ad7b7d74c5672a8..eb6bb4f50fb2ff25513352cb2bbeb1e16cfa5880 100644 (file)
--- a/resources/views/components/media-library/filter-interface.blade.php
+++ b/resources/views/components/media-library/filter-interface.blade.php
@@ -74,10 +74,14 @@
 
         <div class="text-right mt-20">
             <button @click="filtersOpen = false"
-                    class="bg-blue-dark
+                    class="inline-flex items-center
+                           bg-blue-dark
                            font-medium
-                           py-3 px-8 rounded-full">
+                           py-3 px-8 rounded-full
+                           transform transition hover:scale-105">
                 Valider
+                {{-- Arrow Icon --> --}}
+                <svg class="fill-current w-3.5 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 12" xml:space="preserve"><path d="M13.92 5.6c-.06-.14-.14-.26-.24-.36L8.84.39c-.42-.42-1.09-.42-1.51 0-.42.42-.42 1.09 0 1.51l3.02 3.03H1.07a1.071 1.071 0 0 0 0 2.14h9.28L7.33 10.1c-.42.42-.42 1.09 0 1.51.21.21.48.31.76.31.27 0 .55-.1.76-.31l4.85-4.85c.3-.31.38-.78.22-1.16z"/></svg>
             </button>
         </div>
 

diff --git a/resources/views/components/media-library/index.blade.php b/resources/views/components/media-library/index.blade.php
index ba56df4c92f2e20607cafe0f5b8f0ece9ca4affe..163e9c27920e764a7504eb68b74b3e9563645a7c 100644 (file)
--- a/resources/views/components/media-library/index.blade.php
+++ b/resources/views/components/media-library/index.blade.php
@@ -27,7 +27,7 @@
 
     {{-- MEDIA LIBRARY GRID --}}
     {{-- Negative margins applied here to offset margins used in Isotope grid --}}
-    <div class="media-grid mt-10 -mb-16 -mx-2.5" x-init="initIsotope($el)" x-cloak>
+    <div class="media-grid mt-10 -mb-16 -mx-2.5" x-init="initIsotope($el)">
         @foreach ($media as $item)
             <div @click="openPlayer({
                      type: '{{ $item['type'] }}',
@@ -37,7 +37,7 @@
                         type: '{{ $item['mime_type'] }}'
                      }]
                  })"
-                 class="media-item
+                 class="media-item group cursor-pointer
                         {{-- Width is 25% minus the gutters (2 * 0.625rem that comes from mx-2.5) --}}
                         float-left w-[calc(33%-1.25rem)] lg:w-[calc(25%-1.25rem)] mx-2.5 mb-16
                         media-{{ $item['type'] }}
@@ -46,7 +46,7 @@
                 <div class="media-item-image relative bg-cover bg-no-repeat rounded-md pb-[56.25%]" style="background-image:url({{ $item['image'] }})">
 
                     {{-- Play Icon --}}
-                    <svg class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+                    <svg class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition group-hover:scale-110"
                          xmlns="http://www.w3.org/2000/svg" width="22.47%" viewBox="0 0 59.999 59.999">
                         {{-- Icon BG --}}
                         <path d="M0 29.999a30 30 0 1 0 30-30 30 30 0 0 0-30 30Z" fill="#0725e2"/>

diff --git a/resources/views/components/media-library/player-icons.blade.php b/resources/views/components/media-library/player-icons.blade.php
new file mode 100644 (file)
index 0000000..089a0c9
--- /dev/null
+++ b/resources/views/components/media-library/player-icons.blade.php
@@ -0,0 +1,46 @@
+{{-- Plyr custom icon SVG sprite --}}
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+    <symbol id="plyr-airplay" viewBox="0 0 18 18"><path d="M16 1H2a1 1 0 00-1 1v10a1 1 0 001 1h3v-2H3V3h12v8h-2v2h3a1 1 0 001-1V2a1 1 0 00-1-1z"/><path d="M4 17h10l-5-6z"/></symbol>
+
+    <symbol id="plyr-captions-off" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99
+     0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd" fill-opacity=".5"/></symbol>
+
+    <symbol id="plyr-captions-on" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99
+     0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd"/></symbol>
+
+    <symbol id="plyr-download" viewBox="0 0 18 18"><path d="M9 13c.3 0 .5-.1.7-.3L15.4 7 14 5.6l-4 4V1H8v8.6l-4-4L2.6 7l5.7 5.7c.2.2.4.3.7.3zm-7 2h14v2H2z"/></symbol>
+
+    <symbol id="plyr-enter-fullscreen" viewBox="0 0 18 18"><path d="M10 3h3.6l-4 4L11 8.4l4-4V8h2V1h-7zM7 9.6l-4 4V10H1v7h7v-2H4.4l4-4z"/></symbol>
+
+    <symbol id="plyr-exit-fullscreen" viewBox="0 0 18 18"><path d="M1 12h3.6l-4 4L2 17.4l4-4V17h2v-7H1zM16 .6l-4 4V1h-2v7h7V6h-3.6l4-4z"/></symbol>
+
+    <symbol id="plyr-fast-forward" viewBox="0 0 18 18"><path d="M7.875 7.171L0 1v16l7.875-6.171V17L18 9 7.875 1z"/></symbol>
+
+    <symbol id="plyr-logo-vimeo" viewBox="0 0 18 18"><path d="M17 5.3c-.1 1.6-1.2 3.7-3.3 6.4-2.2 2.8-4 4.2-5.5 4.2-.9 0-1.7-.9-2.4-2.6C5 10.9 4.4 6 3 6c-.1 0-.5.3-1.2.8l-.8-1c.8-.7 3.5-3.4 4.7-3.5
+     1.2-.1 2 .7 2.3 2.5.3 2 .8 6.1 1.8 6.1.9 0 2.5-3.4 2.6-4 .1-.9-.3-1.9-2.3-1.1.8-2.6 2.3-3.8 4.5-3.8 1.7.1 2.5 1.2 2.4 3.3z"/></symbol>
+
+    <symbol id="plyr-logo-youtube" viewBox="0 0 18 18"><path d="M16.8 5.8c-.2-1.3-.8-2.2-2.2-2.4C12.4 3 9 3 9 3s-3.4 0-5.6.4C2 3.6 1.3 4.5 1.2 5.8 1 7.1 1 9 1 9s0 1.9.2 3.2c.2 1.3.8 2.2 2.2 2.4C5.6
+     15 9 15 9 15s3.4 0 5.6-.4c1.4-.3 2-1.1 2.2-2.4.2-1.3.2-3.2.2-3.2s0-1.9-.2-3.2zM7 12V6l5 3-5 3z"/></symbol>
+
+    <symbol id="plyr-muted" viewBox="0 0 18 18"><path d="M9.9 2.4c-.1-.1-.3-.1-.4-.1-.1 0-.3 0-.4.1L3.7 5.5h-3c-.4 0-.8.4-.8.8v5.5c0 .4.4.8.8.8h3l5.4 3.1c.1.1.3.1.4.1.4 0 .8-.4.8-.8V3.1c0-.3-.2-.6-.4-.7zM1.6 7h1.6v4H1.6V7zm7.1 6.6-4-2.3V6.7l4-2.3v9.2zM17.8 10.9l-1.7-1.7 1.7-1.7c.3-.3.3-.8 0-1.1-.3-.3-.8-.3-1.1 0L15 8.1l-1.7-1.7c-.3-.3-.8-.3-1.1 0-.3.3-.3.8 0 1.1l1.7 1.7-1.7 1.7c-.3.3-.3.8 0 1.1.3.3.8.3 1.1 0l1.7-1.7 1.7 1.7c.3.3.8.3 1.1 0 .3-.3.3-.8 0-1.1z"/></symbol>
+
+    <symbol id="plyr-pause" viewBox="0 0 18 18"><path d="M5 17.908c-.6 0-1-.4-1-1v-15.8c0-.5.4-1 1-1s1 .4 1 1v15.8c0 .5-.4 1-1 1zM13 17.908c-.6 0-1-.4-1-1v-15.8c0-.5.4-1 1-1s1 .4 1 1v15.8c0 .5-.4 1-1 1z"/></symbol>
+
+    <symbol id="plyr-pip" viewBox="0 0 18 18"><path d="M13.293 3.293L7.022 9.564l1.414 1.414 6.271-6.271L17 7V1h-6z"/><path d="M13 15H3V5h5V3H2a1 1 0 00-1 1v12a1 1 0 001 1h12a1 1 0
+     001-1v-6h-2v5z"/></symbol>
+
+    <symbol id="plyr-play" viewBox="0 0 18 18"><path d="M5.1 17.9c-.2 0-.3 0-.5-.1-.3-.2-.5-.5-.5-.9V1.1c0-.4.2-.7.5-.9.3-.2.7-.2 1 0l11.9 7.9c.3.2.4.5.4.8s-.2.6-.4.8l-11.9 8c-.2.1-.3.2-.5.2zm1-15V15l9.1-6-9.1-6.1z"/></symbol>
+
+    <symbol id="plyr-restart" viewBox="0 0 18 18"><path d="M9.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C6
+     2.6 4.9 3.2 4 4.1 1.3 6.8 1.3 11.2 4 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L16 1.9l-6.3-.7z"/></symbol>
+
+    <symbol id="plyr-rewind" viewBox="0 0 18 18"><path d="M10.125 1L0 9l10.125 8v-6.171L18 17V1l-7.875 6.171z"/></symbol>
+
+    <symbol id="plyr-settings" viewBox="0 0 18 18"><path d="M16.135 7.784a2 2 0 01-1.23-2.969c.322-.536.225-.998-.094-1.316l-.31-.31c-.318-.318-.78-.415-1.316-.094a2 2 0 01-2.969-1.23C10.065 1.258
+     9.669 1 9.219 1h-.438c-.45 0-.845.258-.997.865a2 2 0 01-2.969 1.23c-.536-.322-.999-.225-1.317.093l-.31.31c-.318.318-.415.781-.093 1.317a2 2 0 01-1.23 2.969C1.26 7.935 1 8.33 1 8.781v.438c0 .45.258.845.865.997a2 2 0 011.23 2.969c-.322.536-.225.998.094 1.316l.31.31c.319.319.782.415 1.316.094a2 2 0 012.969 1.23c.151.607.547.865.997.865h.438c.45 0 .845-.258.997-.865a2 2 0 012.969-1.23c.535.321.997.225 1.316-.094l.31-.31c.318-.318.415-.781.094-1.316a2 2 0 011.23-2.969c.607-.151.865-.547.865-.997v-.438c0-.451-.26-.846-.865-.997zM9 12a3 3 0 110-6 3 3 0 010 6z"/></symbol>
+
+    <symbol id="plyr-volume" viewBox="0 0 18 18"><path d="M12.489 13.03a.79.79 0 0 1-.56-1.35c1.47-1.47 1.47-3.87 0-5.35a.79.79 0 0 1 0-1.12c.31-.3.8-.31 1.11-.02l.03.03a5.363 5.363 0 0 1-.03 7.57c-.15.16-.35.24-.55.24z"/><path d="M15.099 14.85a.79.79 0 0 1-.56-1.35 6.35 6.35 0 0 0 .03-8.95l-.02-.02-.01-.01-.01-.01a.8.8 0 0 1 .02-1.12.8.8 0 0 1 1.12.01l.11.11c3.01 3.12 2.96 8.08-.11 11.13a.91.91 0 0 1-.57.21zM10.049 2.27a.795.795 0 0 0-.79 0l-5.45 3.12H.799c-.44 0-.8.36-.8.8v5.64c0 .44.36.8.8.8h3.01l5.45 3.12a.802.802 0 0 0 .79-.01c.25-.14.4-.4.4-.69V2.96c0-.28-.15-.55-.4-.69zm-8.46 4.71h1.63v4.05h-1.63V6.98zm7.27 6.69-4.05-2.31V6.64l4.05-2.31v9.34z"/></symbol>
+
+</svg>

diff --git a/resources/views/components/media-library/player.blade.php b/resources/views/components/media-library/player.blade.php
index e677c0662249d7ec5b5bc916835c4d17b208922a..0ccc3066bbef0c911fa0b23978550528fb11991a 100644 (file)
--- a/resources/views/components/media-library/player.blade.php
+++ b/resources/views/components/media-library/player.blade.php
@@ -8,6 +8,9 @@
     <script src="{{ asset('js/plyr.js') }}"></script>
 @endpush
 
+{{-- Embed SVG sprite directly --}}
+<x-media-library.player-icons />
+
 <div class="player-overlay
             fixed top-0 left-0 w-screen h-screen
             flex items-center
@@ -81,10 +84,11 @@
                     </div>
 
                     {{-- Right side --}}
-                    <div class="flex items-center">
+                    <div class="flex items-center font-secondary">
                         {{-- Time codes --}}
-                        <div class="plyr__time plyr__time--current mr-2" aria-label="Current time">00:00</div>
-                        <div class="plyr__time plyr__time--duration" aria-label="Duration">00:00</div>
+                        <span class="plyr-timecode" x-html="playerTime"></span>
+                        <span class="mx-2 opacity-60">/</span>
+                        <span class="plyr-timecode opacity-60" x-html="playerDuration"></span>
                     </div>
 
                 </div>

diff --git a/resources/views/components/search.blade.php b/resources/views/components/search.blade.php
index 9848cdf8581df5698402328a528ed498b2d4647f..b54db0b3c1ac75b562ed469207e9b07210196c3a 100644 (file)
--- a/resources/views/components/search.blade.php
+++ b/resources/views/components/search.blade.php
@@ -26,7 +26,7 @@
      x-transition:leave-end="opacity-0"
      x-cloak>
 
-    <x-close @click.prevent="searchOpen = false" />
+    <x-close @click.prevent="searchOpen = false; overlayOpen = false;" />
 
     {{-- Search Field --}}
     <div class="w-full pt-30 flex-grow-0">

diff --git a/resources/views/front/resources.blade.php b/resources/views/front/resources.blade.php
index 2730ef2886367aa6160f2f2488c21d25ab97d90a..8368c75055f3c7317a5eed8c3a084480b1e949dc 100644 (file)
--- a/resources/views/front/resources.blade.php
+++ b/resources/views/front/resources.blade.php
@@ -11,13 +11,13 @@
                 'document_title' => "Cœur de l'offre",
                 'document_subtitle' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus tellus ipsum, vel elementum eros vehicula quis.',
                 'document_image' => 'https://odl.paris.cubedesigners.com/storage/107/groupe-133-at-2x.png',
-                'document_pdf' => '#',
+                'document_pdf' => '../../data/links/test1.pdf#page=1',
             ],
             [
                 'document_title' => 'Offre détaillée',
                 'document_subtitle' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus tellus ipsum, vel elementum eros vehicula quis.',
                 'document_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png',
-                'document_pdf' => '#',
+                'document_pdf' => '../../data/links/test2.pdf#page=2',
             ],
         ];
 
@@ -32,12 +32,12 @@
                     'subchapter_memos' => [
                         [
                             'memo_title' => 'Lorem ipsum dolor sit',
-                            'memo_pdf' => 'memo1.pdf',
+                            'memo_pdf' => '../../data/links/test1.pdf#page=1',
                             'memo_image' => 'https://odl.paris.cubedesigners.com/storage/107/groupe-133-at-2x.png',
                         ],
                         [
                             'memo_title' => 'Lorem ipsum dolor sit',
-                            'memo_pdf' => 'memo2.pdf',
+                            'memo_pdf' => '../../data/links/test2.pdf',
                             'memo_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png',
                         ],
                     ],
@@ -48,17 +48,17 @@
                     'subchapter_memos' => [
                         [
                             'memo_title' => 'Lorem ipsum dolor sit',
-                            'memo_pdf' => 'memo1.pdf',
+                            'memo_pdf' => '../../data/links/test1.pdf#page=1',
                             'memo_image' => 'https://odl.paris.cubedesigners.com/storage/107/groupe-133-at-2x.png',
                         ],
                         [
                             'memo_title' => 'Lorem ipsum dolor sit',
-                            'memo_pdf' => 'memo2.pdf',
+                            'memo_pdf' => '../../data/links/test2.pdf',
                             'memo_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png',
                         ],
                         [
                             'memo_title' => 'Lorem ipsum dolor sit',
-                            'memo_pdf' => 'memo3.pdf',
+                            'memo_pdf' => '../../data/links/test1.pdf',
                             'memo_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png',
                         ],
                     ],
@@ -74,17 +74,17 @@
                     'subchapter_memos' => [
                         [
                             'memo_title' => 'Lorem ipsum dolor sit',
-                            'memo_pdf' => 'memo1.pdf',
+                            'memo_pdf' => '../../data/links/test1.pdf#page=1',
                             'memo_image' => 'https://odl.paris.cubedesigners.com/storage/107/groupe-133-at-2x.png',
                         ],
                         [
                             'memo_title' => 'Lorem ipsum dolor sit',
-                            'memo_pdf' => 'memo2.pdf',
+                            'memo_pdf' => '../../data/links/test2.pdf',
                             'memo_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png',
                         ],
                         [
                             'memo_title' => 'Lorem ipsum dolor sit',
-                            'memo_pdf' => 'memo2.pdf',
+                            'memo_pdf' => '../../data/links/test2.pdf',
                             'memo_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png',
                         ],
                     ],
@@ -95,12 +95,12 @@
                     'subchapter_memos' => [
                         [
                             'memo_title' => 'Lorem ipsum dolor sit',
-                            'memo_pdf' => 'memo1.pdf',
+                            'memo_pdf' => '../../data/links/test1.pdf#page=1',
                             'memo_image' => 'https://odl.paris.cubedesigners.com/storage/107/groupe-133-at-2x.png',
                         ],
                         [
                             'memo_title' => 'Lorem ipsum dolor sit',
-                            'memo_pdf' => 'memo2.pdf',
+                            'memo_pdf' => '../../data/links/test2.pdf',
                             'memo_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png',
                         ],
                     ],
@@ -110,55 +110,113 @@
     ];
     @endphp
 
-    <h1 class="uppercase mb-8">{{ $title }}</h1>
-    <h2 class="font-medium text-2xl mb-14 w-1/2">{{ $subtitle }}</h2>
-
-    {{-- DOCUMENTS --}}
-    <div class="grid lg:grid-cols-2 gap-6">
-        @foreach($documents as $doc)
-            <div class="bg-blue flex p-10 text-white rounded-md">
-                <img class="w-1/2 pr-6" src="{{ $doc['document_image'] }}" alt="{{ $doc['document_title'] }}">
-                <div class="-mr-5 space-y-4">
-                    <h3 class="text-4xl font-semibold">{{ $doc['document_title'] }}</h3>
-                    <p>{{ $doc['document_subtitle'] }}</p>
-                    <a href="{{ $doc['document_pdf'] }}" class="bg-blue-dark inline-block py-4 px-10 rounded-full">Visualiser</a>
-                </div>
-            </div>
-        @endforeach
-    </div>
+    {{-- RESOURCES --}}
+    <div class="resources" x-data="{
+        PDFOpen: false, // Tracks if PDF viewer overlay is open
+        viewerURL: '/tools/fluidbookpreview/pdfjs/web/viewer.html?file=', // Base URL for viewer
+
+        openPDF(URL) {
+            this.overlayOpen = true; // Stops page scrolling in the background
+            this.PDFOpen = true;
+            $nextTick(() => { $refs.PDFViewer.setAttribute('src', this.viewerURL + URL) });
+        },
+
+        closePDF() {
+            this.PDFOpen = false;
+            this.overlayOpen = false;
+        },
+    }">
+
+
+        <h1 class="uppercase mb-8">{{ $title }}</h1>
+        <h2 class="font-medium text-2xl mb-14 w-1/2">{{ $subtitle }}</h2>
 
-    {{-- MEMOS --}}
-    <p>
+        {{-- DOCUMENTS --}}
+        <div class="grid lg:grid-cols-2 gap-6">
+            @foreach($documents as $doc)
+                <a href="#" @click.prevent="openPDF('{{ $doc['document_pdf'] }}')" class="group">
+                    <div class="bg-blue flex items-center p-10 text-white rounded-md">
+                        <img class="w-1/2 pr-6" src="{{ $doc['document_image'] }}" alt="{{ $doc['document_title'] }}">
+                        <div class="-mr-5 space-y-4">
+                            <h3 class="text-4xl font-semibold">{{ $doc['document_title'] }}</h3>
+                            <p>{{ $doc['document_subtitle'] }}</p>
+                            <span class="bg-blue-dark inline-block py-4 px-10 rounded-full transform transition group-hover:scale-105">Visualiser</span>
+                        </div>
+                    </div>
+                </a>
+            @endforeach
+        </div>
+
+        {{-- MEMOS --}}
+        <p>
         <span class="inline-block font-secondary font-bold uppercase text-xs leading-none p-2.5 border border-current mt-15">
             {{ $memo_part_title }}
         </span>
-    </p>
-
-
-    {{-- CHAPTERS --}}
-    @foreach ($chapters as $chapter)
-        <div class="mt-15">
-            <h3 class="text-4xl">{{ $chapter['chapter_title'] }}</h3>
-
-            {{-- SUB-CHAPTERS --}}
-            @foreach ($chapter['subchapters'] as $subchapter)
-                <h4 class="mt-8 text-2xl">{{ $subchapter['subchapter_title'] }}</h4>
-                <p class="mt-2.5 max-w-[500px]">{{ $subchapter['subchapter_subtitle'] }}</p>
-
-                {{-- MEMOS --}}
-                <div class="grid grid-cols-2 gap-5 mt-8">
-                    @foreach ($subchapter['subchapter_memos'] as $memo)
-                        <div class="bg-grey-50 flex items-center p-8 rounded-md">
-                            <img class="w-1/4 pr-4" src="{{ $memo['memo_image'] }}" alt="{{ $memo['memo_title'] }}">
-                            <div class="space-y-2.5">
-                                <h3 class="text-base font-semibold">{{ $memo['memo_title'] }}</h3>
-                                <a href="{{ $memo['memo_pdf'] }}" class="circle-arrow"></a>
-                            </div>
-                        </div>
-                    @endforeach
-                </div>
-            @endforeach
+        </p>
+
+
+        {{-- CHAPTERS --}}
+        @foreach ($chapters as $chapter)
+            <div class="mt-15">
+                <h3 class="text-4xl">{{ $chapter['chapter_title'] }}</h3>
+
+                {{-- SUB-CHAPTERS --}}
+                @foreach ($chapter['subchapters'] as $subchapter)
+                    <h4 class="mt-8 text-2xl">{{ $subchapter['subchapter_title'] }}</h4>
+                    <p class="mt-2.5 max-w-[500px]">{{ $subchapter['subchapter_subtitle'] }}</p>
+
+                    {{-- MEMOS --}}
+                    <div class="grid grid-cols-2 gap-5 mt-8">
+                        @foreach ($subchapter['subchapter_memos'] as $memo)
+                            <a href="#" @click.prevent="openPDF('{{ $memo['memo_pdf'] }}')" class="group">
+                                <div class="bg-grey-50 flex items-center p-8 rounded-md">
+                                    <img class="w-1/4 pr-4" src="{{ $memo['memo_image'] }}" alt="{{ $memo['memo_title'] }}">
+                                    <div class="space-y-2.5">
+                                        <h3 class="text-base font-semibold">{{ $memo['memo_title'] }}</h3>
+                                        <span class="circle-arrow transform transition group-hover:scale-110"></span>
+                                    </div>
+                                </div>
+                            </a>
+                        @endforeach
+                    </div>
+                @endforeach
+            </div>
+        @endforeach
+
+        {{-- PDF Viewer Overlay --}}
+        <div class="pdf-overlay
+                    fixed top-0 left-0 w-screen h-screen
+                    flex flex-col
+                    bg-white text-black
+                    px-30 pt-20
+                    z-10
+                    transition ease-out-cubic duration-500"
+             x-show="PDFOpen"
+             x-transition:enter-start="opacity-0"
+             x-transition:enter-end="opacity-100"
+             x-transition:leave-start="opacity-100"
+             x-transition:leave-end="opacity-0"
+             x-cloak>
+
+            {{-- PDF Viewer iframe --}}
+            <iframe x-ref="PDFViewer" src="" frameborder="0" class="absolute left-0 w-full top-[90px] h-[calc(100vh-90px)]"></iframe>
+
         </div>
-    @endforeach
+
+        {{-- Close button sits outside overlay so it can sit above and cover header search button --}}
+        {{-- TODO: Rework this so it's less awkward when the main menu is opened on top of the PDF viewer --}}
+        {{-- TODO: instead of using the same main element, consider having a header widget that can be used to redisplay header inside overlays (with option to disable / replace items via slots --}}
+        <x-close @click.prevent="closePDF()"
+                 x-show="PDFOpen && !menuOpen" {{-- Don't show close button if menu gets opened --}}
+                 x-transition:enter="delay-300 duration-300"
+                 x-transition:enter-start="opacity-0"
+                 x-transition:enter-end="opacity-100"
+                 x-transition:leave-start="opacity-100"
+                 x-transition:leave-end="opacity-0"
+                 class="fixed top-8 right-8 flex z-30 bg-white pb-4 pl-4"
+                 x-cloak />
+
+
+    </div>
 
 @endsection

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 6d6034c75ad23a580224385d1fd9b3236ea0f73e..326745e8ac1b7d7c49d27a447b5194de452998dc 100644 (file)
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -8,8 +8,8 @@
     @stack('after_css')
     <title>{{ config('app.name') }}</title>
 </head>
-<body x-data="{ menuOpen: false, searchOpen: false }"
-      :class="{ 'menu-open': menuOpen, 'overflow-hidden': searchOpen }"
+<body x-data="{ menuOpen: false, overlayOpen: false, searchOpen: false }"
+      :class="{ 'menu-open': menuOpen, 'overflow-hidden': overlayOpen }"
       class="font-primary p-8">
     <header class="site-header relative flex justify-between z-20 transition-colors duration-500">
         {{-- Menu Toggle --}}
@@ -43,7 +43,7 @@
 
 
         {{-- Search Icon --}}
-        <a href="#" @click.prevent="searchOpen = true; $dispatch('searchOpen')">
+        <a href="#" @click.prevent="overlayOpen = true; searchOpen = true;">
             <svg class="stroke-current fixed top-8 right-8" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 29.414 29.414">
                 <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                     <path d="M1 12.25A11.25 11.25 0 1 0 12.25 1 11.25 11.25 0 0 0 1 12.25Z"/>

diff --git a/webpack.mix.js b/webpack.mix.js
index 233a7b0e38034eaf0b9a4f4e22c74a57f585d651..89398b6d91922a0ecbac4c58682e15e362645f19 100644 (file)
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -4,7 +4,7 @@ const mix = require('laravel-mix');
 mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
         require('postcss-import'), // Enables build-time imports
-        require("tailwindcss"),
+        require('tailwindcss'),
     ]);
 
 // Copy pre-compiled Isotope JS package