<script>
function resources() {
return {
- viewerURL: '/front/coeur/pdfjs/web/viewer.html?file=', // Base URL for viewer
shown: false,
-
- init() {
- // Open PDF viewer if querystring is already set
- let querystring = new URLSearchParams(location.search);
- if (querystring.get('file')) {
- this.openPDF(querystring.get('file'), false);
- }
- },
-
- openPDF(PDF_URL, updateQuerystring = true) {
- PDF_URL = PDF_URL.replace('./storage', '../../../storage');
-
- if (updateQuerystring) {
- const location = new URL(window.location.href);
- location.searchParams.set('file', PDF_URL);
- history.replaceState(null, document.title, location.toString());
- }
-
- this.PDFOpen = true;
- this.$nextTick(() => { this.$refs.PDFViewer.setAttribute('src', this.viewerURL + PDF_URL) });
- },
-
- closePDF() {
- this.PDFOpen = false;
- this.$refs.PDFViewer.setAttribute('src', '');
-
- // Update the page URL to remove querystring
- const location = new URL(window.location.href);
- location.searchParams.delete('file');
- history.replaceState(null, document.title, location.toString());
- },
}
}
</script>
x-show="shown"
x-transition:enter-start="opacity-0 translate-y-[50px]">
- {{-- DOCUMENTS --}}
- @if (count($resources->documents) > 0)
- <div class="grid lg:grid-cols-2 gap-6">
- @foreach($resources->documents as $doc)
- @if (!$doc['document_pdf'] || !isset($resources_pdf[$doc['document_pdf']]))
- @continue
- @endif
- @php
- /** @var \Cubist\Backpack\Magic\PageData $pdf */
- $pdf = $resources_pdf[$doc['document_pdf']];
- $pdfurl = $pdf->getImageURLbyCollection($pdf->get('file_upload'));
- $thumb = null === $pdf->get('file_thumb')
- ? $pdf->getImageURLbyCollection($pdf->get('file_upload'),'poster')
- : $pdf->getImageURLbyCollection($pdf->get('file_thumb'));
- @endphp
-
{{--<a href="{{ $doc['document_pdf'] }}" @click.prevent="openPDF($el.attributes.href.value)" class="group">--}}
- <a href="{{$pdfurl}}" @click.prevent="openPDF($el.attributes.href.value)"
- class="group">
- <div class="bg-blue h-full flex items-center p-10 text-white rounded-md">
- <img class="w-1/2 pr-6"
- src="{{ $thumb }}"
- alt="{{ $doc['document_title'] }}">
-
{{--<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 rounded-full
- py-4 px-10
- transform transition
- group-hover:scale-105">
- Visualiser
- </span>
- </div>
- </div>
- </a>
- @endforeach
- </div>
- @endif
-
- {{-- MEMOS TITLE --}}
- <p class="my-15">
- <span class="inline-block p-2.5
- font-secondary font-bold uppercase text-xs leading-none
- border border-current">
- Les mémos
- </span>
- </p>
+{{-- --}}{{-- DOCUMENTS --}}
+{{-- @if (count($resources->documents) > 0)--}}
+{{-- <div class="grid lg:grid-cols-2 gap-6">--}}
+{{-- @foreach($resources->documents as $doc)--}}
+{{-- @if (!$doc['document_pdf'] || !isset($resources_pdf[$doc['document_pdf']]))--}}
+{{-- @continue--}}
+{{-- @endif--}}
+{{-- @php--}}
+{{-- /** @var \Cubist\Backpack\Magic\PageData $pdf */--}}
+{{-- $pdf = $resources_pdf[$doc['document_pdf']];--}}
+{{-- $pdfurl = $pdf->getImageURLbyCollection($pdf->get('file_upload'));--}}
+{{-- $thumb = null === $pdf->get('file_thumb')--}}
+{{-- ? $pdf->getImageURLbyCollection($pdf->get('file_upload'),'poster')--}}
+{{-- : $pdf->getImageURLbyCollection($pdf->get('file_thumb'));--}}
+{{-- @endphp--}}
+
{{-- --}}{{--<a href="{{ $doc['document_pdf'] }}" @click.prevent="openPDF($el.attributes.href.value)" class="group">--}}
+{{-- <a href="{{$pdfurl}}" @click.prevent="openPDF($el.attributes.href.value)"--}}
+{{-- class="group">--}}
+{{-- <div class="bg-blue h-full flex items-center p-10 text-white rounded-md">--}}
+{{-- <img class="w-1/2 pr-6"--}}
+{{-- src="{{ $thumb }}"--}}
+{{-- alt="{{ $doc['document_title'] }}">--}}
+
{{-- --}}{{--<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 rounded-full--}}
+{{-- py-4 px-10--}}
+{{-- transform transition--}}
+{{-- group-hover:scale-105">--}}
+{{-- Visualiser--}}
+{{-- </span>--}}
+{{-- </div>--}}
+{{-- </div>--}}
+{{-- </a>--}}
+{{-- @endforeach--}}
+{{-- </div>--}}
+{{-- @endif--}}
+
+{{-- --}}{{-- MEMOS TITLE --}}
+{{-- <p class="my-15">--}}
+{{-- <span class="inline-block p-2.5--}}
+{{-- font-secondary font-bold uppercase text-xs leading-none--}}
+{{-- border border-current">--}}
+{{-- Les mémos--}}
+{{-- </span>--}}
+{{-- </p>--}}
{{-- MAIN SECTION WITH SIDEBAR --}}
<div class="flex">
@foreach ($resources['chapters'] as $index => $chapter)
{{-- CHAPTER BLOCK --}}
<div class="chapter">
- {{--
- Opposing top padding (pt-4) + negative top margin (-mt-4) gives
- space above scroll anchor position without misaligning anything
- --}}
- <h3 class="text-4xl pt-4 -mt-4" id="ch-{{ $index + 1 }}">
- {{ $index + 1 }}. {{ $chapter['chapter_title'] }}
- </h3>
-
- {{-- SUB-CHAPTERS --}}
- @foreach ($chapter['subchapters'] as $subchapter_index => $subchapter)
- @if (empty($subchapter['subchapter_title']))
- @continue
- @endif
-
- <h4 class="mt-8 text-2xl">{{ $index + 1 }}.{{ $subchapter_index + 1 }} {{ $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)
- @if (!$memo['memo_pdf'] || !isset($resources_pdf[$memo['memo_pdf']]))
- @continue
- @endif
- @php
- /** @var \Cubist\Backpack\Magic\PageData $pdf */
- $pdf = $resources_pdf[$memo['memo_pdf']];
- $pdfurl = $pdf->getImageURLbyCollection($pdf->get('file_upload'));
- $thumb = !$pdf->get('file_thumb') || !$pdf->getImageURLbyCollection($pdf->get('file_thumb'))
- ? $pdf->getImageURLbyCollection($pdf->get('file_upload'),'poster')
- : $pdf->getImageURLbyCollection($pdf->get('file_thumb'));
- @endphp
-
- {{--<a href="{{ $memo['memo_pdf'] }}" @click.prevent="openPDF($el.attributes.href.value)" class="group">--}}
- <a href="{{ $pdfurl }}"
- @click.prevent="openPDF($el.attributes.href.value)"
- class="group">
- <div class="bg-grey-50 flex items-start h-full p-[1.875rem] rounded-md">
- <img class="w-1/4 mr-5 shadow-sm"
- style="min-width: 105px; box-shadow: 2px 3px 3px 0 rgb(0 0 0 / 15%);"
- src="{{ $thumb }}"
- alt="{{ $memo['memo_title'] }}">
- <div class="space-y-2.5 pt-4">
- @if ($memo['memo_number'])
- <h3 class="text-lg font-semibold">{{ $memo['memo_number'] }}</h3>
- @endif
- <h4 class="text-base font-semibold">{{ $memo['memo_title'] }}</h4>
- <h5 class="text-base">{{ $memo['memo_subtitle'] }}</h5>
- <span
- class="circle-arrow transform transition group-hover:scale-110"></span>
- </div>
+ {{--
+ Opposing top padding (pt-4) + negative top margin (-mt-4) gives
+ space above scroll anchor position without misaligning anything
+ --}}
+ <h3 class="text-4xl pt-4 -mt-4" id="ch-{{ $index + 1 }}">
+ {{ $index + 1 }}. {{ $chapter['chapter_title'] }}
+ </h3>
+
+ {{-- SUB-CHAPTERS --}}
+ @foreach ($chapter['subchapters'] as $subchapter_index => $subchapter)
+ @if (empty($subchapter['subchapter_title']))
+ @continue
+ @endif
+
+ <h4 class="mt-8 text-2xl">{{ $index + 1 }}
+ .{{ $subchapter_index + 1 }} {{ $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)
+ @if (!$memo['memo_pdf'] || !isset($resources_pdf[$memo['memo_pdf']]))
+ @continue
+ @endif
+ @php
+ /** @var \Cubist\Backpack\Magic\PageData $pdf */
+ $pdf = $resources_pdf[$memo['memo_pdf']];
+ $pdfurl = $pdf->getImageURLbyCollection($pdf->get('file_upload'));
+ $thumb = !$pdf->get('file_thumb') || !$pdf->getImageURLbyCollection($pdf->get('file_thumb'))
+ ? $pdf->getImageURLbyCollection($pdf->get('file_upload'),'poster')
+ : $pdf->getImageURLbyCollection($pdf->get('file_thumb'));
+ @endphp
+
+ {{--<a href="{{ $memo['memo_pdf'] }}" @click.prevent="openPDF($el.attributes.href.value)" class="group">--}}
+ <a href="{{ $pdfurl }}"
+ @click.prevent="openPDF($el.attributes.href.value)"
+ class="group">
+ <div class="bg-grey-50 flex items-start h-full p-[1.875rem] rounded-md">
+ <img class="w-1/4 mr-5 shadow-sm"
+ style="min-width: 105px; box-shadow: 2px 3px 3px 0 rgb(0 0 0 / 15%);"
+ src="{{ $thumb }}"
+ alt="{{ $memo['memo_title'] }}">
+ <div class="space-y-2.5 pt-4">
+ @if ($memo['memo_number'])
+ <h3 class="text-lg font-semibold">{{ $memo['memo_number'] }}</h3>
+ @endif
+ <h4 class="text-base font-semibold">{{ $memo['memo_title'] }}</h4>
+ <h5 class="text-base">{{ $memo['memo_subtitle'] }}</h5>
+ <span
+ class="circle-arrow transform transition group-hover:scale-110"></span>
</div>
- </a>
- @endforeach
- </div>
- @endforeach
+ </div>
+ </a>
+ @endforeach
+ </div>
+ @endforeach
</div>
@endforeach
</div>
</div>
</div>
-
- {{-- PDF Viewer Overlay --}}
- <div class="overlay pdf-overlay
- bg-white text-black
- pt-20
- z-20"
- x-show="PDFOpen"
- x-transition:enter.opacity.duration.500ms
- x-transition:leave.opacity.duration.200ms
- 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>
-
- <x-header>
- <x-slot name="right">
- <div x-show="PDFOpen && !menuOpen" x-transition:enter.opacity.duration.500ms.delay.300ms
- x-transition:leave.opacity.duration.0ms.delay.0ms>
- <x-close
- x-show="PDFOpen"
- @click.prevent="closePDF()"
- class="flex"
- />
- </div>
- </x-slot>
- </x-header>
- </div>
-
</div>
@endsection
document.body.classList.remove('overlay-open');
}
});
+
+ // Open PDF viewer if querystring is already set
+ let querystring = new URLSearchParams(location.search);
+ if (querystring.get('file')) {
+ this.openPDF(querystring.get('file'), false);
+ }
},
get overlayOpen() {
closeSearch() {
this.searchOpen = false;
},
+
+ viewerURL: '/front/coeur/pdfjs/web/viewer.html?file=', // Base URL for viewer
+
+ openPDF(PDF_URL, updateQuerystring = true) {
+ PDF_URL = PDF_URL.replace('./storage', '../../../storage');
+
+ if (updateQuerystring) {
+ const location = new URL(window.location.href);
+ location.searchParams.set('file', PDF_URL);
+ history.replaceState(null, document.title, location.toString());
+ }
+
+ this.PDFOpen = true;
+ this.$nextTick(() => {
+ this.$refs.PDFViewer.setAttribute('src', this.viewerURL + PDF_URL)
+ });
+ },
+
+ closePDF() {
+ this.PDFOpen = false;
+ this.$refs.PDFViewer.setAttribute('src', '');
+
+ // Update the page URL to remove querystring
+ const location = new URL(window.location.href);
+ location.searchParams.delete('file');
+ history.replaceState(null, document.title, location.toString());
+ },
}
}
</script>
</div>
</div>
+
+
{{-- MENU OVERLAY --}}
- <div class="overlay menu-overlay
+ <div x-data="resources()" class="overlay menu-overlay
bg-blue text-white
z-30"
x-show="menuOpen"
<ul class="w-full font-medium text-6xl">
@foreach ($menu as $link)
+
+ @php
+ $prevent='menuOpen = false; setTimeout(() => window.location = $event.target.href, 200);';
+ if($link['type']==='pdf'){
+ $prevent='menuOpen = false;openPDF($el.attributes.href.value)';
+ }
+ @endphp
{{-- Overflow is hidden for text entrance animation. --}}
{{-- Extra padding and negative margin added so hover scale effect isn't clipped --}}
<li class="overflow-hidden pl-4 -ml-4">
x-transition:leave-end="translate-y-[100px]">
<x-link
href="{{ $link['url'] }}"
- data-type="{{$link['type']}}"
- @click.prevent="menuOpen = false; setTimeout(() => window.location = $event.target.href, 200);"
+ @click.prevent="{!! $prevent !!}"
class="block py-8 text-current
transform origin-bottom-left
transition-transform duration-200
{{-- Search Overlay --}}
<x-search/>
+ {{-- PDF Viewer Overlay --}}
+ <div class="overlay pdf-overlay
+ bg-white text-black
+ pt-20
+ z-20"
+ x-show="PDFOpen"
+ x-transition:enter.opacity.duration.500ms
+ x-transition:leave.opacity.duration.200ms
+ 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>
+
+ <x-header>
+ <x-slot name="right">
+ <div x-show="PDFOpen && !menuOpen" x-transition:enter.opacity.duration.500ms.delay.300ms
+ x-transition:leave.opacity.duration.0ms.delay.0ms>
+ <x-close
+ x-show="PDFOpen"
+ @click.prevent="closePDF()"
+ class="flex"
+ />
+ </div>
+ </x-slot>
+ </x-header>
+ </div>
+
@endsection
projects / odl.git / commitdiff