Skip to content

Commit ba26780

Browse files
thethunderturnerthethunderturner
committed
composer finalize
1 parent 987f04e commit ba26780

File tree

3 files changed

+88
-89
lines changed

3 files changed

+88
-89
lines changed

‎resources/js/index.js

Lines changed: 82 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -49,20 +49,20 @@ function pdfViewer({ content, pagination }) {
4949
async init() {
5050
if (pagination) {
5151
// Create zoom controls
52-
const controls = document.createElement('div');
52+
const controls = document.createElement('div')
5353
controls.className =
54-
'flex gap-2 p-2 justify-start sticky top-0 bg-white dark:bg-gray-800 z-10 border-b dark:border-gray-700 border-gray-200';
54+
'flex gap-2 p-2 justify-start sticky top-0 bg-white dark:bg-gray-800 z-10 border-b dark:border-gray-700 border-gray-200'
5555
controls.innerHTML = `
5656
<button class="px-3 py-1 rounded bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600" @click="onPrevPage()">Previous</button>
5757
<button class="px-3 py-1 rounded bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600" @click="onNextPage()">Next</button>
5858
<span class="px-3 py-1">Page: <span id="page_num"></span> / <span id="page_count"></span></span>
59-
`;
60-
this.parent.appendChild(controls);
59+
`
60+
this.parent.appendChild(controls)
6161

6262
// Create a container for the PDF content
63-
const pageContainer = document.createElement('div');
64-
pageContainer.id = 'pdf-content';
65-
this.parent.appendChild(pageContainer);
63+
const pageContainer = document.createElement('div')
64+
pageContainer.id = 'pdf-content'
65+
this.parent.appendChild(pageContainer)
6666

6767
await this.renderPage()
6868
} else {
@@ -72,18 +72,15 @@ function pdfViewer({ content, pagination }) {
7272
this.parent.innerHTML = ''
7373

7474
// Add timestamp to force refresh
75-
const refreshedUrl = this.baseUrl + '?t=' + new Date().getTime()
75+
const refreshedUrl =
76+
this.baseUrl + '?t=' + new Date().getTime()
7677
await this.render(refreshedUrl)
7778
})
7879
}
7980
},
8081

8182
// Function to calculate optimal scale
82-
calculateOptimalScale(
83-
page,
84-
containerWidth,
85-
containerHeight,
86-
) {
83+
calculateOptimalScale(page, containerWidth, containerHeight) {
8784
const viewport = page.getViewport({ scale: 1.0 })
8885
const containerAspectRatio = containerWidth / containerHeight
8986
const pageAspectRatio = viewport.width / viewport.height
@@ -99,93 +96,99 @@ function pdfViewer({ content, pagination }) {
9996
},
10097

10198
async renderPage() {
102-
const pageContainer = this.parent.querySelector('#pdf-content');
103-
pageContainer.innerHTML = ''; // Clear only the PDF content
99+
const pageContainer = this.parent.querySelector('#pdf-content')
100+
pageContainer.innerHTML = '' // Clear only the PDF content
104101

105-
this.parent.style.cssText = 'width: 100%; overflow: auto; position: relative;';
102+
this.parent.style.cssText =
103+
'width: 100%; overflow: auto; position: relative;'
106104
this.pageRendering = true
107105

108106
const loadingTask = pdfjsLib.getDocument(this.baseUrl)
109-
loadingTask.promise.then(async (pdf) => {
110-
const containerWidth = this.parent.clientWidth
111-
const containerHeight = this.parent.clientHeight
112-
this.totalPages = pdf.numPages
113-
document.getElementById('page_count').textContent = this.totalPages
114-
document.getElementById('page_num').textContent = this.pageNumber;
115-
116-
// Render page
117-
pdf.getPage(this.pageNumber).then(async (page) => {
118-
const scale = this.calculateOptimalScale(
119-
page,
120-
containerWidth,
121-
containerHeight,
122-
)
123-
const viewport = page.getViewport({ scale })
124-
125-
// Prepare canvas using PDF page dimensions
126-
const canvas = document.createElement('canvas')
127-
const context = canvas.getContext('2d')
128-
129-
canvas.width = viewport.width
130-
canvas.height = viewport.height
131-
132-
// Canvas styling
133-
canvas.style.cssText = 'display: block; margin: 10px auto;'
134-
135-
// Render PDF page into canvas context
136-
const renderContext = {
137-
canvasContext: context,
138-
viewport: viewport,
139-
}
140-
await page.render(renderContext).promise.then(() => {
141-
this.pageRendering = false
142-
})
143-
144-
// Render text layer
145-
const textContent = await page.getTextContent()
146-
const textLayerDiv = document.createElement('div')
147-
textLayerDiv.className = 'textLayer'
148-
textLayerDiv.style.cssText = 'margin-left: 15px;'
149-
const textLayer = new pdfjsLib.TextLayer({
150-
textContentSource: textContent,
151-
container: textLayerDiv,
152-
viewport: viewport,
153-
})
154-
await textLayer.render().then(() => {
155-
const pageDiv = document.createElement('div')
156-
pageDiv.className = 'page'
157-
pageDiv.style.cssText = 'position: relative;'
158-
pageDiv.appendChild(canvas)
159-
pageDiv.appendChild(textLayerDiv)
160-
pageContainer.appendChild(pageDiv)
107+
loadingTask.promise
108+
.then(async (pdf) => {
109+
const containerWidth = this.parent.clientWidth
110+
const containerHeight = this.parent.clientHeight
111+
this.totalPages = pdf.numPages
112+
document.getElementById('page_count').textContent =
113+
this.totalPages
114+
document.getElementById('page_num').textContent =
115+
this.pageNumber
116+
117+
// Render page
118+
pdf.getPage(this.pageNumber).then(async (page) => {
119+
const scale = this.calculateOptimalScale(
120+
page,
121+
containerWidth,
122+
containerHeight,
123+
)
124+
const viewport = page.getViewport({ scale })
125+
126+
// Prepare canvas using PDF page dimensions
127+
const canvas = document.createElement('canvas')
128+
const context = canvas.getContext('2d')
129+
130+
canvas.width = viewport.width
131+
canvas.height = viewport.height
132+
133+
// Canvas styling
134+
canvas.style.cssText =
135+
'display: block; margin: 10px auto;'
136+
137+
// Render PDF page into canvas context
138+
const renderContext = {
139+
canvasContext: context,
140+
viewport: viewport,
141+
}
142+
await page.render(renderContext).promise.then(() => {
143+
this.pageRendering = false
144+
})
145+
146+
// Render text layer
147+
const textContent = await page.getTextContent()
148+
const textLayerDiv = document.createElement('div')
149+
textLayerDiv.className = 'textLayer'
150+
textLayerDiv.style.cssText = 'margin-left: 15px;'
151+
const textLayer = new pdfjsLib.TextLayer({
152+
textContentSource: textContent,
153+
container: textLayerDiv,
154+
viewport: viewport,
155+
})
156+
await textLayer.render().then(() => {
157+
const pageDiv = document.createElement('div')
158+
pageDiv.className = 'page'
159+
pageDiv.style.cssText = 'position: relative;'
160+
pageDiv.appendChild(canvas)
161+
pageDiv.appendChild(textLayerDiv)
162+
pageContainer.appendChild(pageDiv)
163+
})
161164
})
162165
})
163-
}).catch(function(error) {
164-
console.error('Error loading PDF:', error)
165-
pageContainer.innerHTML = `
166+
.catch(function (error) {
167+
console.error('Error loading PDF:', error)
168+
pageContainer.innerHTML = `
166169
<div class="p-4">
167170
<p class="text-red-500">Error loading PDF:</p>
168171
<p class="text-sm mt-2">${error.message}</p>
169172
</div>
170173
`
171-
})
174+
})
172175
},
173176

174177
onPrevPage() {
175178
if (this.pageNumber <= 1) {
176-
return;
179+
return
177180
}
178-
this.pageNumber--;
179-
this.renderPage();
181+
this.pageNumber--
182+
this.renderPage()
180183
},
181184

182185
onNextPage() {
183186
if (this.pageNumber >= this.totalPages) {
184-
return;
187+
return
185188
}
186-
this.pageNumber++;
187-
this.renderPage();
188-
}
189+
this.pageNumber++
190+
this.renderPage()
191+
},
189192
}
190193
}
191194

‎resources/views/components/latex-index.blade.php

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@php
2-
$pdfJS = $this->usePdfJs();
3-
$paginate = $this->paginate();
2+
$pdfJS = $this->usePdfJs();
3+
$paginate = $this->paginate();
44
@endphp
55

66
<x-filament::section class="w-full rounded-l-none">
@@ -33,16 +33,16 @@ class="h-screen w-full overflow-auto rounded-lg border border-gray-200 dark:bord
3333
></div>
3434

3535
{{-- PDF Preview --}}
36-
@if($pdfJS)
36+
@if ($pdfJS)
3737
<div
3838
class="h-screen overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700"
3939
x-ignore
4040
ax-load
4141
ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('filament-latex', 'thethunderturner/filament-latex') }}"
4242
x-data="pdfViewer({
43-
content: @js($pdfUrl),
44-
pagination: true,
45-
})"
43+
content: @js($pdfUrl),
44+
pagination: true,
45+
})"
4646
wire:ignore
4747
>
4848
@if ($pdfUrl)

‎src/Concerns/Utils.php

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,6 @@ public function canDeleteFile(array $arguments): bool
6363
/**
6464
* Checks if PDF.js should display the whole pdf,
6565
* or show each page separately.
66-
*
67-
* @return bool
6866
*/
6967
public function paginate(): bool
7068
{
@@ -74,8 +72,6 @@ public function paginate(): bool
7472
/**
7573
* Checks if PDF.js should be used to display the pdf or
7674
* the browser's default PDF viewer.
77-
*
78-
* @return bool
7975
*/
8076
public function usePdfJs(): bool
8177
{

0 commit comments

Comments
 (0)