From: Stephen Cameron <stephen@cubedesigners.com>
Date: Thu, 20 Jan 2022 19:33:53 +0000 (+0100)
Subject: Wait #5040 @5.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=694984b221db493bf7344346690bccc279f4ae4a;p=odl.git

Wait #5040 @5.5
---

diff --git a/app/Jobs/SearchIndex.php b/app/Jobs/SearchIndex.php
index c243d80..64007dc 100644
--- a/app/Jobs/SearchIndex.php
+++ b/app/Jobs/SearchIndex.php
@@ -41,7 +41,8 @@ class SearchIndex extends Index
             $doc = new Document();
             $doc->setType($data->get('type'));
             $doc->setId($data->get('id'));
-            $doc->setUrl('asset_' . $data->get('id'));
+            $doc->setUrl($this->relativeURL($asset->getFirstMediaUrl($asset->file_upload)));
+            $doc->setThumb($this->relativeURL($asset->getThumbURL()));
             $doc->setTitle($data->get('title'));
             $doc->setKeywords($data->get('keywords'));
             $this->addDocument($doc);
@@ -78,12 +79,18 @@ class SearchIndex extends Index
         foreach ($pdfs as $pdf) {
             $document = new PDF($pdf->getFirstMediaInField('file_upload')->getPath());
             $document->setId($pdf->id);
-            $document->setUrl('asset_' . $document->getId());
+            $document->setUrl($this->relativeURL($pdf->getFirstMediaUrl($pdf->file_upload)));
             $document->setTitle($pdf->title);
             $document->setKeywords($pdf->keywords);
-            $document->setThumb($pdf->getThumbURL());
+            $document->setThumb($this->relativeURL($pdf->getThumbURL()));
             $document->setType('pdf');
             $this->addDocument($document);
         }
     }
+
+    public function relativeURL($URL) {
+        // Get the relative URL by taking from /storage/ onwards
+        // We assume that assets are always going to be in the storage folder
+        return '.' . strstr($URL, '/storage/');
+    }
 }
diff --git a/resources/js/search.js b/resources/js/search.js
index ea0659e..a881dba 100644
--- a/resources/js/search.js
+++ b/resources/js/search.js
@@ -16,11 +16,38 @@ export default () => ({
         },
     },
     query: '', // The search query
+    medialibrary: '', // Holds URL of the media library that is passed in from the component
 
     async init() {
-        this.miniSearch = new MiniSearch(this.setup);
-        await loadScript('../js/search.index.js');
-        this.miniSearch.addAllAsync(minisearchodl);
+        // We need the URL from the HTML because it gets properly updated when exporting the final version
+        await loadScript(this.$el.dataset.searchindex);
+
+        // Delay miniSearch initialisation so there's less chance of animations stuttering during page loads
+        setTimeout(() => {
+            this.miniSearch = new MiniSearch(this.setup);
+            this.miniSearch.addAllAsync(minisearchodl);
+        }, 4000);
+
+        this.medialibrary = this.$el.dataset.medialibrary;
+    },
+
+    makeResultLink(result, classes) {
+        // Result links have differing attributes, so we need this function to be able to generate the HTML correctly
+        // This can't be done directly in the x-for template loop
+        let URL = result.url;
+        let attributes = '';
+
+        // Media items get displayed on the media library page (simpler this way so extra JSON object isn't needed)
+        if (result.type === 'video' || result.type === 'audio') {
+            URL = `${this.medialibrary}?player=${result.id}`;
+        }
+
+        // PDFs can be opened directly
+        if (result.type === 'pdf') {
+            attributes = '@click.prevent="openPDF($el.attributes.href.value); closeSearch();"';
+        }
+
+        return `<a href="${URL}" class="${classes}" ${attributes}>${result.title}</a>`;
     },
 
     get results() {
diff --git a/resources/views/components/search.blade.php b/resources/views/components/search.blade.php
index a7f670d..bffa838 100644
--- a/resources/views/components/search.blade.php
+++ b/resources/views/components/search.blade.php
@@ -3,6 +3,9 @@
 <div class="overlay search-overlay
             bg-white text-black
             z-20"
+     {{-- Pass URLs in from HTML so JS will always have the correct version regardless of environment --}}
+     data-searchindex="{{ asset('js/search.index.js') }}"
+     data-medialibrary="{{ \App\Http\Controllers\FrontController::getLinkData('medialibrary')['url'] }}"
      {{-- See js/search.js --}}
      x-data="search()"
      x-show="searchOpen"
@@ -40,7 +43,7 @@
                 placeholder="Recherche"
                 @keyup.enter="$el.blur()" {{-- Remove focus on enter in order to hide virtual keyboard --}}
                 x-model="query"
-                class="appearance-none outline-none
+                class="appearance-none outline-none bg-white
                        mt-8 w-full
                        font-semibold text-6xl uppercase
                        animate"
@@ -56,7 +59,7 @@
     </div>
 
     {{-- Search Results --}}
-    <div class="flex-1 max-h-full overflow-y-auto"
+    <div class="flex-1 max-h-full w-full overflow-y-auto"
          x-show="searchOpen"
          x-transition:enter.opacity.duration.500ms.delay.1500ms
          x-transition:leave.opacity.delay.50ms>
@@ -66,7 +69,7 @@
             <div class="h-full max-h-full overflow-y-auto">
                 <template x-for="result in results" :key="result.id">
                     <div class="py-8 border-b border-black border-opacity-20">
-                        <a :href="result.url" x-text="result.title" class="text-2xl text-blue"></a>
+                        <div x-html="makeResultLink(result, 'text-2xl text-blue')"></div>
                         <p x-text="result.text" class="mt-2 line-clamp-1"></p>
                     </div>
                 </template>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 5103500..be46663 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -43,6 +43,8 @@
                 },
 
                 openSearch() {
+                    // Search can be opened from the menu, so make sure menu is closed first
+                    // to prevent interference since the menu always has a higher z-index
                     this.menuOpen = false;
                     this.searchOpen = true;
                     this.$nextTick(() => {
@@ -60,6 +62,11 @@
                 openPDF(PDF_URL, updateQuerystring = true) {
                     PDF_URL = PDF_URL.replace('./storage', '../../../storage');
 
+                    // Extra level needed when on non-exported version
+                    if (location.href.includes('/front/') && !PDF_URL.includes('http')) {
+                        PDF_URL = '../' + PDF_URL;
+                    }
+
                     if (updateQuerystring) {
                         const location = new URL(window.location.href);
                         location.searchParams.set('pdf', PDF_URL);
@@ -167,9 +174,6 @@
         </ul>
     </div>
 
-    {{-- Search Overlay --}}
-    <x-search/>
-
     {{-- PDF Viewer Overlay --}}
     <div class="overlay pdf-overlay
                 bg-white text-black
@@ -201,4 +205,7 @@
     {{-- Media Player --}}
     <x-media-library.player/>
 
+    {{-- Search Overlay (placed last so it sits above other modals, like the PDF viewer, with the same z-index) --}}
+    <x-search/>
+
 @endsection