Skip to content

Commit f3d1cfc

Browse files
GleamTechGleamTech
committed
Version 2.4.5
 ## Version 2.4.5 - **Fixed:** Override `display: inline flex;` with `display: inline-flex;` for `.toolbarHorizontalGroup` because in older browsers like before Chrome 115 (2023), multi-keyword values (without dash) are not supported. The unsupported property causes toolbar groups to display vertically (so very enlarged toolbar height). - **Fixed:** Newer versions of viewer.css has `@supports not (color: light-dark(tan, tan))` rules which sets default values for some CSS rules when light-dark is not supported but these values override our theme values in older browsers (before Chrome 123 and iOS Safari 17.5) so remove these `@supports not (color: light-dark` rules from the style-sheet dynamically. Before the fix, theme colors e.g. button icons colors were displayed black in slate theme. - **Improved:** Zoom buttons and selection are unnecessary on phones (user can pinch to zoom), especially for mobile mode (large UI sizing) so hide them to fix toolbar overflowing. Fixed Find dialog size on phones, the dialog contents should wrap. Updated demo pages to use full viewport on non-desktop browser sizes (i.e. phone and tablet sizes).
1 parent 30c3683 commit f3d1cfc

File tree

9 files changed

+103
-50
lines changed

9 files changed

+103
-50
lines changed

‎dist/docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset='utf-8'>
5-
<title>pdfjskit 2.4.3 | Documentation</title>
5+
<title>pdfjskit 2.4.5 | Documentation</title>
66
<meta name='description' content='PdfJsKit is a PDF Viewer built on top of PDF.js, with modern UI and new features which supports integration for all JS frameworks.'>
77
<meta name='viewport' content='width=device-width,initial-scale=1'>
88
<link href='assets/bass.css' rel='stylesheet'>
@@ -16,7 +16,7 @@
1616
<div id='split-left' class='overflow-auto fs0 height-viewport-100'>
1717
<div class='py1 px2'>
1818
<h3 class='mb0 no-anchor'>pdfjskit</h3>
19-
<div class='mb1'><code>2.4.3</code></div>
19+
<div class='mb1'><code>2.4.5</code></div>
2020
<input
2121
placeholder='Filter'
2222
id='filter-input'

‎dist/pdfjskit/pdfjskit.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/pdfjskit/pdfjskit.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/pdfjskit/pdfjskit.min.mjs‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎dist/test-module.html‎

Lines changed: 48 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,56 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6-
<title>PdfJsKit - Module Bundle Test</title>
7-
<script type="module" src="pdfjskit/pdfjskit.min.mjs"></script>
8-
</head>
9-
<body>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6+
<title>PdfJsKit - Module Bundle Test</title>
7+
<script type="module" src="pdfjskit/pdfjskit.min.mjs"></script>
8+
<style>
9+
.full-viewport {
10+
width: 100% !important;
11+
height: 100% !important;
12+
margin: 0 !important;
13+
padding: 0 !important;
14+
border: none !important;
15+
overflow: hidden !important;
16+
resize: none !important;
17+
}
18+
</style>
19+
</head>
20+
<body>
1021

11-
<div id="container"></div>
22+
<div id="container"></div>
1223

13-
<script type="module">
14-
import PdfViewer from "./pdfjskit/pdfjskit.min.mjs"
24+
<script type="module">
25+
import { PdfViewer, DomUtil } from "./pdfjskit/pdfjskit.min.mjs"
1526

16-
var pdfViewer = new PdfViewer({
17-
documentUrl: "pdfjskit/sample.pdf",
18-
width: "80%",
19-
height: 720,
20-
resizable: true,
21-
language: "en-US",
22-
theme: "slate, classic-dark"
23-
});
27+
var pdfViewer = new PdfViewer({
28+
documentUrl: "pdfjskit/sample.pdf",
29+
width: "80%",
30+
height: 720,
31+
resizable: true,
32+
language: "en-US",
33+
theme: "slate, classic-dark"
34+
});
35+
36+
pdfViewer.render(document.getElementById("container"));
37+
2438

25-
pdfViewer.render(document.getElementById("container"));
26-
</script>
39+
DomUtil.detectScreenSize(window,
40+
screenSize => { //current and onChange
41+
var elements = [
42+
document.documentElement,
43+
document.body,
44+
document.getElementById("container"),
45+
pdfViewer.element
46+
];
47+
48+
if (screenSize !== "desktopSize")
49+
elements.forEach(element => element.classList.add("full-viewport"));
50+
else
51+
elements.forEach(element => element.classList.remove("full-viewport"));
52+
});
53+
</script>
2754

28-
</body>
55+
</body>
2956
</html>

‎dist/test-script.html‎

Lines changed: 46 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,53 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6-
<title>PdfJsKit - Script Bundle Test</title>
7-
<script src="pdfjskit\pdfjskit.min.js"></script>
8-
</head>
9-
<body>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6+
<title>PdfJsKit - Script Bundle Test</title>
7+
<script src="pdfjskit\pdfjskit.min.js"></script>
8+
<style>
9+
.full-viewport {
10+
width: 100% !important;
11+
height: 100% !important;
12+
margin: 0 !important;
13+
padding: 0 !important;
14+
border: none !important;
15+
overflow: hidden !important;
16+
resize: none !important;
17+
}
18+
</style>
19+
</head>
20+
<body>
1021

11-
<div id="container"></div>
22+
<div id="container"></div>
1223

13-
<script type="module">
14-
var pdfViewer = new PdfJsKit.PdfViewer({
15-
documentUrl: "pdfjskit/sample.pdf",
16-
width: "80%",
17-
height: 720,
18-
resizable: true,
19-
language: "en-US",
20-
theme: "slate, classic-dark"
21-
});
24+
<script>
25+
var pdfViewer = new PdfJsKit.PdfViewer({
26+
documentUrl: "pdfjskit/sample.pdf",
27+
width: "80%",
28+
height: 720,
29+
resizable: true,
30+
language: "en-US",
31+
theme: "slate, classic-dark"
32+
});
33+
34+
pdfViewer.render(document.getElementById("container"));
2235

23-
pdfViewer.render(document.getElementById("container"));
24-
</script>
36+
PdfJsKit.DomUtil.detectScreenSize(window,
37+
screenSize => { //current and onChange
38+
var elements = [
39+
document.documentElement,
40+
document.body,
41+
document.getElementById("container"),
42+
pdfViewer.element
43+
];
44+
45+
if (screenSize !== "desktopSize")
46+
elements.forEach(element => element.classList.add("full-viewport"));
47+
else
48+
elements.forEach(element => element.classList.remove("full-viewport"));
49+
});
50+
</script>
2551

26-
</body>
52+
</body>
2753
</html>

‎examples/pdfjskit-vite-example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,6 @@
1212
"vite": "^5.4.8"
1313
},
1414
"dependencies": {
15-
"pdfjskit": "^2.4.3"
15+
"pdfjskit": "^2.4.5"
1616
}
1717
}

‎package/package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "pdfjskit",
3-
"version": "2.4.3",
3+
"version": "2.4.5",
44
"description": "PdfJsKit is a PDF Viewer built on top of PDF.js, with modern UI and new features which supports integration for all JS frameworks.",
55
"keywords": [
66
"pdf-viewer",

0 commit comments

Comments
 (0)