Use PDF.js for mobile devices

This commit is contained in:
Benjamin Beganović 2021-10-12 16:49:22 +02:00
parent 84ad529211
commit 4804fc20f7

View File

@ -1,5 +1,5 @@
@php @php
$android = stripos($_SERVER['HTTP_USER_AGENT'], 'Android'); $mobile = stripos($_SERVER['HTTP_USER_AGENT'], 'Android') || stripos($_SERVER['HTTP_USER_AGENT'], 'iPhone') || stripos($_SERVER['HTTP_USER_AGENT'], 'iPod') || stripos($_SERVER['HTTP_USER_AGENT'], 'iPad');
@endphp @endphp
@push('head') @push('head')
@ -9,7 +9,7 @@
<div class="flex items-center justify-between mt-4"> <div class="flex items-center justify-between mt-4">
<section class="flex items-center"> <section class="flex items-center">
<div class="items-center" style="{{ $android ? '' : 'display: none' }}" id="pagination-button-container"> <div class="items-center" style="{{ $mobile ? '' : 'display: none' }}" id="pagination-button-container">
<button class="input-label focus:outline-none hover:text-blue-600 transition ease-in-out duration-300" <button class="input-label focus:outline-none hover:text-blue-600 transition ease-in-out duration-300"
id="previous-page-button" title="Previous page"> id="previous-page-button" title="Previous page">
<svg class="w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@ -23,14 +23,14 @@
</svg> </svg>
</button> </button>
</div> </div>
<span class="text-sm text-gray-700 ml-2 {{ $android ? 'block' : 'hidden' }}">{{ ctrans('texts.page') }}: <span class="text-sm text-gray-700 ml-2 {{ $mobile ? 'block' : 'hidden' }}">{{ ctrans('texts.page') }}:
<span id="current-page-container"></span> <span id="current-page-container"></span>
<span>{{ strtolower(ctrans('texts.of')) }}</span> <span>{{ strtolower(ctrans('texts.of')) }}</span>
<span id="total-page-container"></span> <span id="total-page-container"></span>
</span> </span>
</section> </section>
<section class="flex items-center space-x-1"> <section class="flex items-center space-x-1">
<div class="flex items-center mr-4 space-x-1 {{ $android ? 'block' : 'hidden' }}"> <div class="flex items-center mr-4 space-x-1 {{ $mobile ? 'block' : 'hidden' }}">
<span class="text-gray-600 mr-2" id="zoom-level">100%</span> <span class="text-gray-600 mr-2" id="zoom-level">100%</span>
<a href="#" id="zoom-in"> <a href="#" id="zoom-in">
<svg class="text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600 cursor-pointer" <svg class="text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600 cursor-pointer"
@ -81,7 +81,7 @@
</section> </section>
</div> </div>
@if($android) @if($mobile)
<div class="flex justify-center"> <div class="flex justify-center">
<canvas id="pdf-placeholder" class="shadow rounded-lg bg-white mt-4 p-4"></canvas> <canvas id="pdf-placeholder" class="shadow rounded-lg bg-white mt-4 p-4"></canvas>
</div> </div>
@ -90,8 +90,8 @@
@endif @endif
@if($android) @if($mobile)
@push('footer') @push('footer')
<script src="{{ asset('js/clients/shared/pdf.js') }}" defer></script> <script src="{{ asset('js/clients/shared/pdf.js') }}" defer></script>
@endpush @endpush
@endif @endif