@0k/pdf-viewer 0.0.0-stage → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +254 -2
- package/dist/index.d.ts +105 -0
- package/dist/index.js +998 -0
- package/dist/style.css +219 -0
- package/package.json +61 -4
package/dist/style.css
ADDED
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Every rule is scoped under `.pdf-viewer`; hosts theme through the
|
|
3
|
+
* viewer-prefixed custom properties declared on the root.
|
|
4
|
+
*
|
|
5
|
+
* The viewer is IN-FLOW: it fills its host's width and, unless the host
|
|
6
|
+
* constrains `--pdf-viewer-surface-max-height` or makes the root a flex
|
|
7
|
+
* child with a bounded height, the surface grows with the page. A
|
|
8
|
+
* full-screen reader is the host's overlay around this root.
|
|
9
|
+
*/
|
|
10
|
+
.pdf-viewer {
|
|
11
|
+
--pdf-viewer-surface: transparent;
|
|
12
|
+
--pdf-viewer-page-background: #fff;
|
|
13
|
+
--pdf-viewer-page-border: rgba(128, 128, 128, 0.2);
|
|
14
|
+
--pdf-viewer-page-radius: 4px;
|
|
15
|
+
--pdf-viewer-surface-max-height: none;
|
|
16
|
+
--pdf-viewer-button-size: 2.25rem;
|
|
17
|
+
--pdf-viewer-button-radius: 6px;
|
|
18
|
+
--pdf-viewer-button-background: rgba(128, 128, 128, 0.12);
|
|
19
|
+
--pdf-viewer-button-background-hover: rgba(128, 128, 128, 0.24);
|
|
20
|
+
--pdf-viewer-button-border: rgba(128, 128, 128, 0.25);
|
|
21
|
+
--pdf-viewer-button-color: inherit;
|
|
22
|
+
--pdf-viewer-focus: rgba(118, 227, 234, 0.6);
|
|
23
|
+
--pdf-viewer-info: inherit;
|
|
24
|
+
--pdf-viewer-error: rgb(220, 90, 90);
|
|
25
|
+
--pdf-viewer-error-background: rgba(239, 68, 68, 0.15);
|
|
26
|
+
--pdf-viewer-error-border: rgba(239, 68, 68, 0.35);
|
|
27
|
+
--pdf-viewer-reset-background: rgba(0, 0, 0, 0.55);
|
|
28
|
+
--pdf-viewer-reset-background-hover: rgba(0, 0, 0, 0.75);
|
|
29
|
+
--pdf-viewer-reset-color: #fff;
|
|
30
|
+
--pdf-viewer-gap: 6px;
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
gap: var(--pdf-viewer-gap);
|
|
34
|
+
width: 100%;
|
|
35
|
+
min-height: 0;
|
|
36
|
+
max-width: 100%;
|
|
37
|
+
box-sizing: border-box;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.pdf-viewer-toolbar {
|
|
41
|
+
display: flex;
|
|
42
|
+
flex: 0 0 auto;
|
|
43
|
+
flex-wrap: wrap;
|
|
44
|
+
align-items: center;
|
|
45
|
+
justify-content: space-between;
|
|
46
|
+
gap: 8px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.pdf-viewer-group {
|
|
50
|
+
display: inline-flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
gap: 4px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* WCAG touch-target floors: keep the 44px minimum on the hit area. */
|
|
56
|
+
.pdf-viewer-toolbar button {
|
|
57
|
+
display: inline-flex;
|
|
58
|
+
align-items: center;
|
|
59
|
+
justify-content: center;
|
|
60
|
+
min-width: max(44px, var(--pdf-viewer-button-size));
|
|
61
|
+
min-height: max(44px, var(--pdf-viewer-button-size));
|
|
62
|
+
padding: 2px 10px;
|
|
63
|
+
background: var(--pdf-viewer-button-background);
|
|
64
|
+
color: var(--pdf-viewer-button-color);
|
|
65
|
+
border: 1px solid var(--pdf-viewer-button-border);
|
|
66
|
+
border-radius: var(--pdf-viewer-button-radius);
|
|
67
|
+
font-size: 1em;
|
|
68
|
+
font-family: inherit;
|
|
69
|
+
line-height: 1;
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
-webkit-tap-highlight-color: transparent;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.pdf-viewer-toolbar button:hover:not(:disabled) {
|
|
75
|
+
background: var(--pdf-viewer-button-background-hover);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.pdf-viewer-toolbar button:disabled {
|
|
79
|
+
opacity: 0.35;
|
|
80
|
+
cursor: default;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.pdf-viewer-toolbar button:focus-visible,
|
|
84
|
+
.pdf-viewer-retry:focus-visible,
|
|
85
|
+
.pdf-viewer-reset:focus-visible {
|
|
86
|
+
outline: 2px solid var(--pdf-viewer-focus);
|
|
87
|
+
outline-offset: 1px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.pdf-viewer-page,
|
|
91
|
+
.pdf-viewer-zoom {
|
|
92
|
+
min-width: 3.2em;
|
|
93
|
+
color: var(--pdf-viewer-info);
|
|
94
|
+
font-size: 0.78em;
|
|
95
|
+
font-variant-numeric: tabular-nums;
|
|
96
|
+
text-align: center;
|
|
97
|
+
opacity: 0.8;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/*
|
|
101
|
+
* The surface: where the page lives and where gestures land.
|
|
102
|
+
*
|
|
103
|
+
* `touch-action: none` (gesture mode) is load-bearing: without it the
|
|
104
|
+
* browser claims the two-finger gesture for its own page zoom before the
|
|
105
|
+
* pointer handlers see it. Panning is a transform, not a scroll, so the
|
|
106
|
+
* surface hides overflow in gesture mode; without gestures it scrolls
|
|
107
|
+
* like an ordinary box so a mouse can reach a zoomed-in page.
|
|
108
|
+
*/
|
|
109
|
+
.pdf-viewer-surface {
|
|
110
|
+
position: relative;
|
|
111
|
+
display: flex;
|
|
112
|
+
flex: 1 1 auto;
|
|
113
|
+
align-items: flex-start;
|
|
114
|
+
min-height: 0;
|
|
115
|
+
max-height: var(--pdf-viewer-surface-max-height);
|
|
116
|
+
overflow: auto;
|
|
117
|
+
background: var(--pdf-viewer-surface);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.pdf-viewer-surface--gestures {
|
|
121
|
+
justify-content: center;
|
|
122
|
+
overflow: hidden;
|
|
123
|
+
touch-action: none;
|
|
124
|
+
cursor: grab;
|
|
125
|
+
-webkit-user-select: none;
|
|
126
|
+
user-select: none;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/* Scroll mode: the browser keeps one-finger panning (so a reader in a
|
|
130
|
+
scrolling page can always scroll past it); pinch is left to the viewer. */
|
|
131
|
+
.pdf-viewer-surface--scroll {
|
|
132
|
+
touch-action: pan-x pan-y;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.pdf-viewer-surface--panning {
|
|
136
|
+
cursor: grabbing;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.pdf-viewer-canvas {
|
|
140
|
+
display: block;
|
|
141
|
+
flex-shrink: 0;
|
|
142
|
+
margin-inline: auto;
|
|
143
|
+
background: var(--pdf-viewer-page-background);
|
|
144
|
+
border: 1px solid var(--pdf-viewer-page-border);
|
|
145
|
+
border-radius: var(--pdf-viewer-page-radius);
|
|
146
|
+
/* The transform is the live gesture; the raster carries the rest. */
|
|
147
|
+
transform-origin: center top;
|
|
148
|
+
will-change: transform;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.pdf-viewer-canvas[hidden] {
|
|
152
|
+
display: none;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.pdf-viewer-reset {
|
|
156
|
+
position: absolute;
|
|
157
|
+
right: 12px;
|
|
158
|
+
bottom: 12px;
|
|
159
|
+
display: flex;
|
|
160
|
+
align-items: center;
|
|
161
|
+
justify-content: center;
|
|
162
|
+
width: 34px;
|
|
163
|
+
height: 34px;
|
|
164
|
+
padding: 0;
|
|
165
|
+
background: var(--pdf-viewer-reset-background);
|
|
166
|
+
color: var(--pdf-viewer-reset-color);
|
|
167
|
+
border: 1px solid var(--pdf-viewer-button-border);
|
|
168
|
+
border-radius: var(--pdf-viewer-button-radius);
|
|
169
|
+
cursor: pointer;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.pdf-viewer-reset[hidden] {
|
|
173
|
+
display: none;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.pdf-viewer-reset svg {
|
|
177
|
+
width: 16px;
|
|
178
|
+
height: 16px;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.pdf-viewer-reset:hover {
|
|
182
|
+
background: var(--pdf-viewer-reset-background-hover);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.pdf-viewer-status {
|
|
186
|
+
display: flex;
|
|
187
|
+
flex: 0 0 auto;
|
|
188
|
+
flex-wrap: wrap;
|
|
189
|
+
align-items: center;
|
|
190
|
+
gap: 8px;
|
|
191
|
+
font-size: 0.78em;
|
|
192
|
+
line-height: 1.4;
|
|
193
|
+
opacity: 0.8;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.pdf-viewer-status:empty {
|
|
197
|
+
display: none;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.pdf-viewer-status[data-state='error'] {
|
|
201
|
+
color: var(--pdf-viewer-error);
|
|
202
|
+
opacity: 1;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.pdf-viewer-retry {
|
|
206
|
+
display: inline-flex;
|
|
207
|
+
align-items: center;
|
|
208
|
+
justify-content: center;
|
|
209
|
+
min-width: 44px;
|
|
210
|
+
min-height: 44px;
|
|
211
|
+
padding: 2px 12px;
|
|
212
|
+
background: var(--pdf-viewer-error-background);
|
|
213
|
+
color: var(--pdf-viewer-error);
|
|
214
|
+
border: 1px solid var(--pdf-viewer-error-border);
|
|
215
|
+
border-radius: var(--pdf-viewer-button-radius);
|
|
216
|
+
font-size: 0.92em;
|
|
217
|
+
font-family: inherit;
|
|
218
|
+
cursor: pointer;
|
|
219
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,63 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@0k/pdf-viewer",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "Plain-DOM PDF page viewer over the shared PDF.js legacy runtime: paging, zoom, pinch/pan, error/retry and single-owner teardown.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"pdf",
|
|
7
|
+
"pdfjs",
|
|
8
|
+
"pdf-viewer",
|
|
9
|
+
"viewer",
|
|
10
|
+
"dom",
|
|
11
|
+
"pinch-zoom"
|
|
12
|
+
],
|
|
13
|
+
"author": "Valentin Lab <valentin.lab@kalysto.org>",
|
|
14
|
+
"license": "MIT",
|
|
15
|
+
"repository": {
|
|
16
|
+
"type": "git",
|
|
17
|
+
"url": "git+https://github.com/0k/pdf-viewer.git"
|
|
18
|
+
},
|
|
19
|
+
"homepage": "https://github.com/0k/pdf-viewer",
|
|
20
|
+
"bugs": {
|
|
21
|
+
"url": "https://github.com/0k/pdf-viewer/issues"
|
|
22
|
+
},
|
|
23
|
+
"publishConfig": {
|
|
24
|
+
"access": "public"
|
|
25
|
+
},
|
|
26
|
+
"type": "module",
|
|
27
|
+
"sideEffects": [
|
|
28
|
+
"*.css"
|
|
29
|
+
],
|
|
30
|
+
"files": [
|
|
31
|
+
"dist",
|
|
32
|
+
"README.md",
|
|
33
|
+
"LICENSE"
|
|
34
|
+
],
|
|
35
|
+
"types": "./dist/index.d.ts",
|
|
36
|
+
"exports": {
|
|
37
|
+
".": {
|
|
38
|
+
"types": "./dist/index.d.ts",
|
|
39
|
+
"default": "./dist/index.js"
|
|
40
|
+
},
|
|
41
|
+
"./style.css": "./dist/style.css"
|
|
42
|
+
},
|
|
43
|
+
"scripts": {
|
|
44
|
+
"test": "vitest run",
|
|
45
|
+
"test:browser": "python3 test/browser.py",
|
|
46
|
+
"typecheck": "tsc --noEmit",
|
|
47
|
+
"build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.build.json && node -e \"require('node:fs').copyFileSync('src/style.css','dist/style.css')\"",
|
|
48
|
+
"check:chrome91": "node scripts/check-chrome91.mjs",
|
|
49
|
+
"check": "npm run test && npm run typecheck && npm run build && npm run check:chrome91",
|
|
50
|
+
"prepare": "npm run build"
|
|
51
|
+
},
|
|
52
|
+
"peerDependencies": {
|
|
53
|
+
"@0k/pdfjs-legacy-runtime": "0.2.0"
|
|
54
|
+
},
|
|
55
|
+
"devDependencies": {
|
|
56
|
+
"@0k/pdfjs-legacy-runtime": "0.2.0",
|
|
57
|
+
"@types/node": "22.10.5",
|
|
58
|
+
"jsdom": "25.0.1",
|
|
59
|
+
"typescript": "5.7.3",
|
|
60
|
+
"vite": "6.4.4",
|
|
61
|
+
"vitest": "5.0.3"
|
|
62
|
+
}
|
|
63
|
+
}
|