@inizioevoke/astro-core 1.0.0 → 1.1.1
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/package.json +1 -1
- package/src/components/Pagination/PrevNext.astro +22 -0
- package/src/components/PdfViewer/PdfViewer.astro +52 -39
- package/src/components/PdfViewer/PdfViewer.css +95 -67
- package/src/components/PdfViewer/PdfViewer.ts +10 -18
- package/src/components/Tabs/TabItem.astro +1 -2
- package/src/components/Tabs/Tabs.astro +2 -3
package/package.json
CHANGED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
---
|
|
2
|
+
interface Props {
|
|
3
|
+
url: URL;
|
|
4
|
+
paths: string[];
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
const {
|
|
8
|
+
url,
|
|
9
|
+
paths
|
|
10
|
+
} = Astro.props;
|
|
11
|
+
|
|
12
|
+
const path = url.pathname;
|
|
13
|
+
const currentIndex = paths.findIndex(u => u === path);
|
|
14
|
+
const prev = currentIndex > 0 ? paths[currentIndex - 1] : undefined;
|
|
15
|
+
const next = currentIndex !== -1 && currentIndex < paths.length - 1 ? paths[currentIndex + 1] : undefined;
|
|
16
|
+
---
|
|
17
|
+
<div class="evo-pagination">
|
|
18
|
+
<div class="evo-pagination-wrapper">
|
|
19
|
+
<div class="evo-pagination-link evo-pagination-link-previous">{prev && <a href={prev}><slot name="previous">Previous</slot></a>}</div>
|
|
20
|
+
<div class="evo-pagination-link evo-pagination-link-next">{next && <a href={next}><slot name="next">Next</slot></a>}</div>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
@@ -12,6 +12,10 @@ interface Props {
|
|
|
12
12
|
pages?: string;
|
|
13
13
|
bookmarks?: Record<string, number>;
|
|
14
14
|
bookmarkText?: string;
|
|
15
|
+
toolbar?: {
|
|
16
|
+
page?: boolean;
|
|
17
|
+
zoom?: boolean;
|
|
18
|
+
}
|
|
15
19
|
}
|
|
16
20
|
const {
|
|
17
21
|
id,
|
|
@@ -22,6 +26,7 @@ const {
|
|
|
22
26
|
page = 1,
|
|
23
27
|
bookmarks,
|
|
24
28
|
bookmarkText = 'Jump to',
|
|
29
|
+
toolbar,
|
|
25
30
|
...rest
|
|
26
31
|
} = Astro.props;
|
|
27
32
|
|
|
@@ -35,7 +40,6 @@ if (height) {
|
|
|
35
40
|
class:list={['evo-pdf-viewer', cssClass, theme ? `evo-pdf-viewer-theme-${theme}` : null]}
|
|
36
41
|
data-pdf={pdf}
|
|
37
42
|
data-page={page}
|
|
38
|
-
data-bookmarks={btoa(JSON.stringify(bookmarks ?? {}))}
|
|
39
43
|
{...attrs}
|
|
40
44
|
>
|
|
41
45
|
<div class="evo-pdf-viewer-toolbar">
|
|
@@ -43,48 +47,57 @@ if (height) {
|
|
|
43
47
|
<slot name="toolbar-start" />
|
|
44
48
|
</div>
|
|
45
49
|
<div class="evo-pdf-viewer-toolbar-controls">
|
|
46
|
-
<
|
|
47
|
-
<
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
<select></select> of <span class="evo-pdf-viewer-nav-page-count">0</span>
|
|
50
|
+
<div class="evo-pdf-viewer-toolbar-arrows">
|
|
51
|
+
<button class="evo-pdf-viewer-toolbar-prev" title="Previous">
|
|
52
|
+
<slot name="toolbar-prev">
|
|
53
|
+
<svg class="evo-pdf-viewer-toolbar-icon" width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
54
|
+
<path d="M6 15L12 9L18 15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
55
|
+
</svg>
|
|
56
|
+
</slot>
|
|
57
|
+
</button>
|
|
58
|
+
<button class="evo-pdf-viewer-toolbar-next" title="Next">
|
|
59
|
+
<slot name="toolbar-next">
|
|
60
|
+
<svg class="evo-pdf-viewer-toolbar-icon" width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
61
|
+
<path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
62
|
+
</svg>
|
|
63
|
+
</slot>
|
|
64
|
+
</button>
|
|
62
65
|
</div>
|
|
63
|
-
<
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
66
|
+
<div class:list={['evo-pdf-viewer-nav-page', toolbar?.page === false ? 'evo-hidden' : null]}>
|
|
67
|
+
<select><option value="1">1</option></select> of <span class="evo-pdf-viewer-nav-page-count">1</span>
|
|
68
|
+
</div>
|
|
69
|
+
{toolbar?.zoom !== false &&
|
|
70
|
+
<div class="evo-pdf-viewer-toolbar-zoom">
|
|
71
|
+
<button class="evo-pdf-viewer-toolbar-zoom-out" title="Zoom out">
|
|
72
|
+
<slot name="toolbar-zoom-out">
|
|
73
|
+
<svg class="evo-pdf-viewer-toolbar-icon" width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
74
|
+
<path d="M6 12L18 12" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
75
|
+
</slot>
|
|
76
|
+
</button>
|
|
77
|
+
<button class="evo-pdf-viewer-toolbar-zoom-in" title="Zoom in">
|
|
78
|
+
<slot name="toolbar-zoom-in">
|
|
79
|
+
<svg class="evo-pdf-viewer-toolbar-icon" width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
80
|
+
<path d="M4 12H20M12 4V20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
81
|
+
</svg>
|
|
82
|
+
</slot>
|
|
83
|
+
</button>
|
|
84
|
+
<button class="evo-pdf-viewer-toolbar-zoom-reset" title="Reset zoom">
|
|
85
|
+
<slot name="toolbar-zoom-reset">
|
|
86
|
+
<svg class="evo-pdf-viewer-toolbar-icon" width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
87
|
+
<path d="M3 3V8M3 8H8M3 8L6 5.29168C7.59227 3.86656 9.69494 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.71683 21 4.13247 18.008 3.22302 14" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
88
|
+
</svg>
|
|
89
|
+
</slot>
|
|
90
|
+
</button>
|
|
91
|
+
</div>}
|
|
92
|
+
{bookmarks && Object.keys(bookmarks).length > 0 &&
|
|
93
|
+
<div class="evo-pdf-viewer-toolbar-bookmarks">
|
|
84
94
|
<select>
|
|
85
95
|
<option value="" disabled selected hidden>{bookmarkText}</option>
|
|
96
|
+
{Object.entries(bookmarks).map((b) => (
|
|
97
|
+
<option value={b[1]}>{b[0]}</option>
|
|
98
|
+
))}
|
|
86
99
|
</select>
|
|
87
|
-
</div>
|
|
100
|
+
</div>}
|
|
88
101
|
</div>
|
|
89
102
|
<div class="evo-pdf-viewer-toolbar-end">
|
|
90
103
|
<slot name="toolbar-end" />
|
|
@@ -9,6 +9,10 @@
|
|
|
9
9
|
background-color: #f0f0f0;
|
|
10
10
|
box-sizing: border-box;
|
|
11
11
|
|
|
12
|
+
.evo-hidden {
|
|
13
|
+
display: none !important;
|
|
14
|
+
}
|
|
15
|
+
|
|
12
16
|
.evo-pdf-viewer-toolbar {
|
|
13
17
|
display: flex;
|
|
14
18
|
justify-content: var(--evo-pdf-viewer-toolbar-align);
|
|
@@ -23,77 +27,71 @@
|
|
|
23
27
|
align-items: center;
|
|
24
28
|
gap: 8px;
|
|
25
29
|
box-sizing: border-box;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
&.evo-pdf-viewer-toolbar-prev,
|
|
30
|
-
&.evo-pdf-viewer-toolbar-next,
|
|
31
|
-
&.evo-pdf-viewer-toolbar-zoom-out,
|
|
32
|
-
&.evo-pdf-viewer-toolbar-zoom-in,
|
|
33
|
-
&.evo-pdf-viewer-toolbar-zoom-reset {
|
|
34
|
-
all: unset;
|
|
30
|
+
|
|
31
|
+
.evo-pdf-viewer-toolbar-arrows,
|
|
32
|
+
.evo-pdf-viewer-toolbar-zoom {
|
|
35
33
|
display: flex;
|
|
36
34
|
justify-content: center;
|
|
37
35
|
align-items: center;
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
36
|
+
gap: 8px;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
button {
|
|
41
|
+
all: unset;
|
|
42
|
+
display: flex;
|
|
43
|
+
justify-content: center;
|
|
44
|
+
align-items: center;
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
width: 30px;
|
|
47
|
+
height: 30px;
|
|
48
|
+
background-color: transparent;
|
|
49
|
+
/* border: 1px solid #888888;
|
|
50
|
+
border-radius: 6px; */
|
|
51
|
+
&:hover {
|
|
52
|
+
background-color: rgba(0,0,0,0.1);
|
|
53
|
+
}
|
|
44
54
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
55
|
+
.evo-pdf-viewer-toolbar-icon {
|
|
56
|
+
path {
|
|
57
|
+
stroke: #000000;
|
|
49
58
|
}
|
|
50
59
|
}
|
|
51
60
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
61
|
+
|
|
62
|
+
select {
|
|
63
|
+
display: inline-block;
|
|
64
|
+
height: 24px;
|
|
65
|
+
padding: 0;
|
|
66
|
+
cursor: pointer;
|
|
67
|
+
color: #000000;
|
|
57
68
|
font-family: sans-serif;
|
|
58
69
|
font-size: 16px;
|
|
59
70
|
line-height: 24px;
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
padding: 0;
|
|
65
|
-
cursor: pointer;
|
|
66
|
-
color: #000000;
|
|
67
|
-
font-family: sans-serif;
|
|
68
|
-
font-size: 16px;
|
|
69
|
-
line-height: 24px;
|
|
70
|
-
text-align: center;
|
|
71
|
-
background-color: #ffffff;
|
|
72
|
-
border: 1px solid #888888;
|
|
73
|
-
border-radius: 6px;
|
|
74
|
-
}
|
|
71
|
+
text-align: center;
|
|
72
|
+
background-color: rgba(255,255,255,0.5);
|
|
73
|
+
border: 1px solid rgba(0,0,0,0.1);
|
|
74
|
+
border-radius: 0;
|
|
75
75
|
}
|
|
76
|
+
.evo-pdf-viewer-nav-page,
|
|
77
|
+
.evo-pdf-viewer-toolbar-zoom,
|
|
76
78
|
.evo-pdf-viewer-toolbar-bookmarks {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
+
height: 30px;
|
|
80
|
+
margin: 0;
|
|
81
|
+
padding: 0 0 0 8px;
|
|
79
82
|
border-left: 1px solid black;
|
|
83
|
+
font-family: sans-serif;
|
|
84
|
+
font-size: 16px;
|
|
85
|
+
line-height: 30px;
|
|
86
|
+
}
|
|
87
|
+
.evo-pdf-viewer-nav-page,
|
|
88
|
+
.evo-pdf-viewer-toolbar-bookmarks {
|
|
89
|
+
padding: 0 8px 0 16px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.evo-pdf-viewer-toolbar-bookmarks {
|
|
80
93
|
select {
|
|
81
|
-
/*all: unset;*/
|
|
82
|
-
display: inline-block;
|
|
83
|
-
height: 24px;
|
|
84
|
-
padding: 0 0.25em;
|
|
85
|
-
cursor: pointer;
|
|
86
|
-
color: #000000;
|
|
87
|
-
font-family: sans-serif;
|
|
88
|
-
font-size: 16px;
|
|
89
|
-
line-height: 24px;
|
|
90
94
|
text-align: left;
|
|
91
|
-
background-color: #ffffff;
|
|
92
|
-
border: 1px solid #888888;
|
|
93
|
-
border-radius: 6px;
|
|
94
|
-
}
|
|
95
|
-
&.hidden {
|
|
96
|
-
display: none;
|
|
97
95
|
}
|
|
98
96
|
}
|
|
99
97
|
}
|
|
@@ -151,15 +149,35 @@
|
|
|
151
149
|
}
|
|
152
150
|
}
|
|
153
151
|
|
|
152
|
+
&.evo-pdf-viewer-theme-modern {
|
|
153
|
+
.evo-pdf-viewer-toolbar {
|
|
154
|
+
button {
|
|
155
|
+
background-color: transparent;
|
|
156
|
+
border: none;
|
|
157
|
+
border-radius: 0;
|
|
158
|
+
&:hover {
|
|
159
|
+
background-color: rgba(0,0,0,0.05);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
}
|
|
154
164
|
&.evo-pdf-viewer-theme-dark {
|
|
155
|
-
background-color: #
|
|
165
|
+
background-color: #555555;
|
|
156
166
|
.evo-pdf-viewer-toolbar {
|
|
157
|
-
|
|
158
167
|
button {
|
|
159
|
-
|
|
168
|
+
&:hover {
|
|
169
|
+
background-color: #333333;
|
|
170
|
+
}
|
|
171
|
+
.evo-pdf-viewer-toolbar-icon {
|
|
172
|
+
path {
|
|
173
|
+
stroke: #ffffff;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
160
176
|
}
|
|
161
177
|
select {
|
|
162
|
-
|
|
178
|
+
color: white;
|
|
179
|
+
border: 1px solid rgba(255,255,255,0.25);
|
|
180
|
+
background-color: #333333;
|
|
163
181
|
}
|
|
164
182
|
.evo-pdf-viewer-nav-page,
|
|
165
183
|
.evo-pdf-viewer-toolbar-bookmarks {
|
|
@@ -167,13 +185,20 @@
|
|
|
167
185
|
border-color: #cccccc;
|
|
168
186
|
}
|
|
169
187
|
}
|
|
188
|
+
.evo-pdf-viewer-container {
|
|
189
|
+
.evo-scroll-container {
|
|
190
|
+
--evo-scroll-container-track-color: #cccccc;
|
|
191
|
+
--evo-scroll-container-thumb-color: #333333;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
170
194
|
}
|
|
171
195
|
&.evo-pdf-viewer-theme-black {
|
|
172
196
|
background-color: #000000;
|
|
173
197
|
.evo-pdf-viewer-toolbar {
|
|
174
|
-
|
|
175
198
|
button {
|
|
176
|
-
|
|
199
|
+
&:hover {
|
|
200
|
+
background-color: #333333;
|
|
201
|
+
}
|
|
177
202
|
.evo-pdf-viewer-toolbar-icon {
|
|
178
203
|
path {
|
|
179
204
|
stroke: #ffffff;
|
|
@@ -181,18 +206,21 @@
|
|
|
181
206
|
}
|
|
182
207
|
}
|
|
183
208
|
select {
|
|
184
|
-
color:
|
|
185
|
-
|
|
209
|
+
color: white;
|
|
210
|
+
border: 1px solid rgba(255,255,255,0.15);
|
|
211
|
+
background-color: #333333;
|
|
186
212
|
}
|
|
187
213
|
.evo-pdf-viewer-nav-page,
|
|
188
214
|
.evo-pdf-viewer-toolbar-bookmarks {
|
|
189
215
|
color: #ffffff;
|
|
190
|
-
border-color: #
|
|
216
|
+
border-color: #cccccc;
|
|
191
217
|
}
|
|
192
218
|
}
|
|
193
219
|
.evo-pdf-viewer-container {
|
|
194
|
-
|
|
195
|
-
|
|
220
|
+
.evo-scroll-container {
|
|
221
|
+
--evo-scroll-container-track-color: #666666;
|
|
222
|
+
--evo-scroll-container-thumb-color: #cccccc;
|
|
223
|
+
}
|
|
196
224
|
}
|
|
197
225
|
}
|
|
198
226
|
}
|
|
@@ -21,7 +21,7 @@ export function init(settings: PdfViewerSettings = {}) {
|
|
|
21
21
|
export async function createViewer(selector: string) {
|
|
22
22
|
const pdfViewer = document.querySelector<HTMLElement>(selector);
|
|
23
23
|
if (pdfViewer) {
|
|
24
|
-
const ddlPage = pdfViewer.querySelector('select') as HTMLSelectElement;
|
|
24
|
+
// const ddlPage = pdfViewer.querySelector('select') as HTMLSelectElement;
|
|
25
25
|
const toolbar = pdfViewer.querySelector('.evo-pdf-viewer-toolbar') as HTMLElement;
|
|
26
26
|
const toolbarHeight = parseFloat(getComputedStyle(toolbar).height);
|
|
27
27
|
const pageSelect = toolbar.querySelector('.evo-pdf-viewer-nav-page select') as HTMLSelectElement;
|
|
@@ -72,22 +72,11 @@ export async function createViewer(selector: string) {
|
|
|
72
72
|
|
|
73
73
|
const pdf: PDFDocumentProxy = await pdfjs.getDocument(pdfViewer.getAttribute('data-pdf') as string).promise;
|
|
74
74
|
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
const option = document.createElement('option') as HTMLOptionElement;
|
|
81
|
-
option.value = value.toString();
|
|
82
|
-
option.innerText = key;
|
|
83
|
-
bookmarksSelect.options.add(option);
|
|
84
|
-
});
|
|
85
|
-
bookmarksSelect.addEventListener('change', () => {
|
|
86
|
-
gotoPage(bookmarksSelect.options[bookmarksSelect.selectedIndex].value);
|
|
87
|
-
bookmarksSelect.selectedIndex = 0;
|
|
88
|
-
});
|
|
89
|
-
toolbarBookmarks.classList.remove('hidden');
|
|
90
|
-
}
|
|
75
|
+
const bookmarksSelect = toolbar.querySelector('.evo-pdf-viewer-toolbar-bookmarks select') as HTMLSelectElement;
|
|
76
|
+
bookmarksSelect.addEventListener('change', () => {
|
|
77
|
+
gotoPage(bookmarksSelect.options[bookmarksSelect.selectedIndex].value);
|
|
78
|
+
bookmarksSelect.selectedIndex = 0;
|
|
79
|
+
});
|
|
91
80
|
|
|
92
81
|
const outputScale = window.devicePixelRatio || 1;
|
|
93
82
|
const pages = new Array(pdf.numPages).fill(1).map((v, i) => { return i + 1; });
|
|
@@ -110,11 +99,14 @@ export async function createViewer(selector: string) {
|
|
|
110
99
|
|
|
111
100
|
const pdfContainer = pdfViewer.querySelector('.evo-scroll-content') as HTMLElement;
|
|
112
101
|
pdfViewer.querySelector<HTMLElement>('.evo-pdf-viewer-nav-page-count')!.innerText = pages.length.toString();
|
|
102
|
+
pageSelect.options.remove(0);
|
|
113
103
|
for (const pageNum of pages) {
|
|
114
104
|
const option = document.createElement('option');
|
|
115
105
|
option.value = pageNum.toString();
|
|
116
106
|
option.innerText = `${pageNum}`;
|
|
117
|
-
|
|
107
|
+
pageSelect.options.add(option);
|
|
108
|
+
}
|
|
109
|
+
for (const pageNum of pages) {
|
|
118
110
|
|
|
119
111
|
const pdfPage = await pdf.getPage(pageNum);
|
|
120
112
|
const pdfPageWidth = pdfPage.getViewport({ scale: 1}).width;
|
|
@@ -13,10 +13,9 @@ const {
|
|
|
13
13
|
} = Astro.props;
|
|
14
14
|
const tabTitle = await Astro.slots.render('title');
|
|
15
15
|
const attrs = { ...tabAttrs, title: tabTitle };
|
|
16
|
-
console.log(attrs);
|
|
17
16
|
---
|
|
18
17
|
<div
|
|
19
|
-
data-tab-attrs={attrs ? JSON.stringify(attrs) : undefined}
|
|
18
|
+
data-tab-attrs={attrs ? btoa(JSON.stringify(attrs)) : undefined}
|
|
20
19
|
data-tab-active={active ?? false}
|
|
21
20
|
{...panelAttrs}
|
|
22
21
|
role="tabpanel"
|
|
@@ -38,8 +38,7 @@ const itemHtml = html.replace(
|
|
|
38
38
|
const tabAttrs: HTMLAttributes<'div'> = {};
|
|
39
39
|
const attrs = getAttr('data-tab-attrs') ?? '';
|
|
40
40
|
if (attrs) {
|
|
41
|
-
|
|
42
|
-
Object.assign(tabAttrs, JSON.parse(attrs));
|
|
41
|
+
Object.assign(tabAttrs, JSON.parse(atob(attrs)));
|
|
43
42
|
}
|
|
44
43
|
// const encodedTitle = getAttr('data-tab-title') ?? '';
|
|
45
44
|
// const cssClass = getAttr('data-tab-class');
|
|
@@ -47,7 +46,7 @@ const itemHtml = html.replace(
|
|
|
47
46
|
|
|
48
47
|
tabs.push({
|
|
49
48
|
...tabAttrs,
|
|
50
|
-
title: tabAttrs.title ?? `Tab ${
|
|
49
|
+
title: tabAttrs.title ?? `Tab ${currentIndex + 1}`,
|
|
51
50
|
index: currentIndex,
|
|
52
51
|
active,
|
|
53
52
|
});
|