Skip to content

Commit 5024d87

Browse files
paodbpaodb
committed
feat!: move toolbar components to light dom
1 parent eec9be6 commit 5024d87

File tree

5 files changed

+178
-71
lines changed

5 files changed

+178
-71
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@vaadin-component-factory/vcf-pdf-viewer",
3-
"version": "2.1.0",
3+
"version": "3.0.0",
44
"description": "Polymer element providing pdf viewer",
55
"main": "vcf-pdf-viewer.js",
66
"repository": {
@@ -28,6 +28,7 @@
2828
"@vaadin/button": "^24.1.1",
2929
"@vaadin/component-base": "^24.1.1",
3030
"@vaadin/icon": "^24.1.1",
31+
"@vaadin/icons": "^24.1.1",
3132
"@vaadin/item": "^24.1.1",
3233
"@vaadin/list-box": "^24.1.1",
3334
"@vaadin/select": "^24.1.1",

‎src/vcf-pdf-viewer.js‎

Lines changed: 135 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import '@vaadin/select';
77
import '@vaadin/item';
88
import '@vaadin/button';
99
import '@vaadin/icon';
10+
import '@vaadin/icons';
1011
import '@vaadin/tooltip';
1112

1213
import * as pdfjsLib from '../pdfjs/dist/pdf';
@@ -56,8 +57,8 @@ class PdfViewerElement extends
5657
[part~="toolbar"] #totalPages,
5758
[part~="toolbar"] #previousPage,
5859
[part~="toolbar"] #nextPage,
59-
[part~="toolbar"] [part~="toolbar-zoom"],
60-
[part~="toolbar"] [part~="toolbar-button-toogle-sidebar"] {
60+
[part~="toolbar"] #zoom,
61+
[part~="toolbar"] #sidebarToggle {
6162
display: none;
6263
}
6364
@@ -66,8 +67,8 @@ class PdfViewerElement extends
6667
[part~="toolbar"].ready #totalPages,
6768
[part~="toolbar"].ready #previousPage,
6869
[part~="toolbar"].ready #nextPage,
69-
[part~="toolbar"].ready [part~="toolbar-zoom"],
70-
[part~="toolbar"].ready [part~="toolbar-button-toogle-sidebar"] {
70+
[part~="toolbar"].ready #zoom,
71+
[part~="toolbar"].ready #sidebarToggle {
7172
display: inherit;
7273
}
7374
@@ -195,7 +196,7 @@ class PdfViewerElement extends
195196
align-items: baseline;
196197
}
197198
198-
#currentPage {
199+
::slotted(#currentPage) {
199200
align-self: baseline;
200201
}
201202
@@ -233,20 +234,20 @@ class PdfViewerElement extends
233234
background-color: rgba(0, 0, 0, 0.15);
234235
}
235236
236-
#sidebarToggle {
237+
::slotted(#sidebarToggle) {
237238
margin-left: -10px;
238239
margin-right: 15px;
239240
border: 2px solid;
240241
border-color: rgba(0, 0, 0, 0.5);
241242
width: 40px;
242243
}
243244
244-
#nextPage, #previousPage {
245+
::slotted(#nextPage), ::slotted(#previousPage) {
245246
width: 30px;
246247
margin: 0;
247248
}
248-
249-
[part~="toolbar"].ready [part~="toolbar-zoom"].hide-zoom {
249+
250+
[part~="toolbar"].ready ::slotted(.toolbar-zoom.hide-zoom) {
250251
display: none;
251252
}
252253
@@ -259,26 +260,16 @@ class PdfViewerElement extends
259260
</div>
260261
</div>
261262
<div id="mainContainer" part="main-container">
262-
<div id="toolbar" part="toolbar">
263-
<vaadin-button id="sidebarToggle" part="toolbar-button toolbar-button-toogle-sidebar" theme="icon" on-click="__toogleSidebar" aria-label="Sidebar toggle">
264-
<vaadin-icon part="toggle-button-icon" slot="prefix"></vaadin-icon>
265-
<vaadin-tooltip slot="tooltip" text="{{sidebarToggleTooltip}}"></vaadin-tooltip>
266-
</vaadin-button>
263+
<div id="toolbar" part="toolbar">
264+
<slot name="sidebar-toggle-button-slot"></slot>
267265
<span id="title" part="toolbar-text toolbar-title">{{__title}}</span>
268-
<vaadin-select id="zoom" part="toolbar-zoom" value="{{zoom}}" items="[[__zoomItems]]">
269-
</vaadin-select>
266+
<slot name="toolbar-zoom-slot"></slot>
270267
<div part="toolbar-pages">
271-
<vaadin-text-field id="currentPage" part="toolbar-current-page" value="{{currentPage}}" on-change="__pageChange"></vaadin-text-field>
268+
<slot name="toolbar-current-page-slot"></slot>
272269
<span id="pageSeparator" part="toolbar-text toolbar-page-separator">/</span>
273270
<span id="totalPages" part="toolbar-text toolbar-total-pages">{{__totalPages}}</span>
274-
<vaadin-button id="previousPage" part="toolbar-button toolbar-button-previous-page" theme="icon" on-click="__previousPage" aria-label="Previous page">
275-
<vaadin-icon part="previous-page-button-icon" slot="prefix"></vaadin-icon>
276-
<vaadin-tooltip slot="tooltip" text="{{previousPageTooltip}}"></vaadin-tooltip>
277-
</vaadin-button>
278-
<vaadin-button id="nextPage" part="toolbar-button toolbar-button-next-page" theme="icon" on-click="__nextPage" aria-label="Next page">
279-
<vaadin-icon part="next-page-button-icon" slot="prefix"></vaadin-icon>
280-
<vaadin-tooltip slot="tooltip" text="{{nextPageTooltip}}"></vaadin-tooltip>
281-
</vaadin-button>
271+
<slot name="previous-page-button-slot"></slot>
272+
<slot name="next-page-button-slot"></slot>
282273
</div>
283274
<slot></slot>
284275
</div>
@@ -287,8 +278,7 @@ class PdfViewerElement extends
287278
<div id="viewer" part="viewer"></div>
288279
</div>
289280
</div>
290-
291-
</div>
281+
</div>
292282
`;
293283
}
294284

@@ -297,7 +287,7 @@ class PdfViewerElement extends
297287
}
298288

299289
static get version() {
300-
return '1.4.1';
290+
return '3.0.0';
301291
}
302292

303293
static get properties() {
@@ -357,8 +347,7 @@ class PdfViewerElement extends
357347
*/
358348
zoom: {
359349
type: String,
360-
value: 'auto',
361-
observer: '__zoomChanged'
350+
value: 'auto'
362351
},
363352
/**
364353
* The current page visible viewed right now
@@ -436,6 +425,7 @@ class PdfViewerElement extends
436425
type: Boolean,
437426
value: false
438427
},
428+
439429
__zoomItems: {
440430
computed: '__computeZoomItems(autoZoomOptionLabel, fitZoomOptionLabel)'
441431
},
@@ -466,6 +456,104 @@ class PdfViewerElement extends
466456
};
467457
}
468458

459+
__createToolbarButton() {
460+
const icon = document.createElement('vaadin-icon');
461+
icon.setAttribute('slot', 'prefix');
462+
463+
const tooltip = document.createElement('vaadin-tooltip');
464+
tooltip.setAttribute('slot', 'tooltip');
465+
466+
const button = document.createElement('vaadin-button');
467+
button.classList.add('toolbar-button');
468+
button.setAttribute('theme', 'icon');
469+
470+
button.appendChild(icon);
471+
button.appendChild(tooltip);
472+
return button;
473+
}
474+
475+
/**
476+
* Adds toggle button to the toolbar slot named "sidebar-toggle-button-slot".
477+
*/
478+
_createSideBarToggleButton() {
479+
const button = this.__createToolbarButton();
480+
const icon = button.querySelector('vaadin-icon');
481+
icon.classList.add('toggle-button-icon')
482+
button.querySelector('vaadin-tooltip').setAttribute('text', this.sidebarToggleTooltip);
483+
button.setAttribute('slot', 'sidebar-toggle-button-slot');
484+
button.setAttribute('id','sidebarToggle');
485+
button.setAttribute('aria-label', 'Sidebar toggle');
486+
button.addEventListener('click', () => {
487+
this.__toogleSidebar();
488+
if(this.$.outerContainer.classList.contains('sidebarOpen')) {
489+
icon.classList.add('sidebarOpen');
490+
} else {
491+
icon.classList.remove('sidebarOpen');
492+
}
493+
});
494+
this.appendChild(button);
495+
}
496+
497+
/**
498+
* Adds previous page button to the toolbar slot named "previous-page-button-slot".
499+
*/
500+
_createPreviousPageButton(){
501+
const button = this.__createToolbarButton();
502+
button.querySelector('vaadin-icon').classList.add('previous-page-button-icon')
503+
button.querySelector('vaadin-tooltip').setAttribute('text', this.previousPageTooltip);
504+
button.setAttribute('slot', 'previous-page-button-slot');
505+
button.setAttribute('id', 'previousPage');
506+
button.setAttribute('aria-label', 'Previous page');
507+
button.addEventListener('click', () => this.__previousPage());
508+
this.appendChild(button);
509+
}
510+
511+
/**
512+
* Adds next page button to the toolbar slot named "next-page-button-slot".
513+
*/
514+
_createNextPageButton() {
515+
const button = this.__createToolbarButton();
516+
button.querySelector('vaadin-icon').classList.add('next-page-button-icon')
517+
button.querySelector('vaadin-tooltip').setAttribute('text', this.nextPageTooltip);
518+
button.setAttribute('slot', 'next-page-button-slot');
519+
button.setAttribute('id', 'nextPage');
520+
button.setAttribute('aria-label', 'Next page');
521+
button.addEventListener('click', () => this.__nextPage());
522+
this.appendChild(button);
523+
}
524+
525+
/**
526+
* Adds current page text field to the toolbar slot named "toolbar-current-page-slot".
527+
*/
528+
_createCurrentPageTextField() {
529+
const textField = document.createElement('vaadin-text-field');
530+
textField.setAttribute('slot', 'toolbar-current-page-slot');
531+
textField.setAttribute('id', 'currentPage');
532+
textField.classList.add('toolbar-current-page');
533+
textField.setAttribute('value', this.currentPage);
534+
textField.addEventListener('change', () => this.__pageChange());
535+
this.appendChild(textField);
536+
}
537+
538+
/**
539+
* Adds zoom select to the toolbar slot named "toolbar-zoom-slot".
540+
*/
541+
_createZoomSelect() {
542+
const select = document.createElement('vaadin-select');
543+
select.setAttribute('slot', 'toolbar-zoom-slot');
544+
select.setAttribute('id', 'zoom');
545+
select.classList.add('toolbar-zoom');
546+
select.setAttribute('value', this.zoom);
547+
select.items = this.__zoomItems;
548+
select.addEventListener('value-changed', (e) => this.__zoomChanged(e.detail.value));
549+
if(this.hideZoom) {
550+
select.classList.add('hide-zoom');
551+
} else {
552+
select.classList.remove('hide-zoom');
553+
}
554+
this.appendChild(select);
555+
}
556+
469557
__computeZoomItems(autoZoomOptionLabel, fitZoomOptionLabel) {
470558
return [
471559
{ label: autoZoomOptionLabel, value:'auto' },
@@ -483,8 +571,7 @@ class PdfViewerElement extends
483571

484572
static get observers() {
485573
return [
486-
'__setTitle(__pdfTitle, __filename)',
487-
'__updateZoomVisibility()'
574+
'__setTitle(__pdfTitle, __filename)'
488575
];
489576
}
490577

@@ -504,16 +591,19 @@ class PdfViewerElement extends
504591
}
505592
}
506593

507-
__updateZoomVisibility() {
508-
if(this.hideZoom) {
509-
this.$.zoom.classList.add('hide-zoom');
510-
} else {
511-
this.$.zoom.classList.remove('hide-zoom');
512-
}
594+
_addToolbarButtons() {
595+
this._createSideBarToggleButton();
596+
this._createZoomSelect();
597+
this._createCurrentPageTextField();
598+
this._createPreviousPageButton();
599+
this._createNextPageButton();
513600
}
514601

515602
ready() {
516603
super.ready();
604+
605+
this._addToolbarButtons();
606+
517607
this.$.viewerContainer.addEventListener('focus', e => this.__setFocused(true), true);
518608
this.$.viewerContainer.addEventListener('blur', e => this.__setFocused(false), true);
519609
this.$.viewerContainer.addEventListener('mousedown', e => {
@@ -577,6 +667,7 @@ class PdfViewerElement extends
577667
if(this.__thumbnailViewer && this.__thumbnailViewer.renderingQueue.isThumbnailViewEnabled){
578668
this.__thumbnailViewer.scrollThumbnailIntoView(this.currentPage);
579669
}
670+
this.querySelector('#currentPage').value = this.currentPage;
580671
});
581672

582673
this.__resizeObserver = new ResizeObserver(() => {
@@ -712,8 +803,8 @@ class PdfViewerElement extends
712803
}
713804

714805
__updatePageNumberStates() {
715-
this.$.previousPage.disabled = (this.currentPage === "1");
716-
this.$.nextPage.disabled = (this.currentPage === "" + this.__totalPages);
806+
this.querySelector('#previousPage').disabled = (this.currentPage === "1");
807+
this.querySelector('#nextPage').disabled = (this.currentPage === "" + this.__totalPages);
717808
}
718809

719810
__zoomChanged(value) {
@@ -731,10 +822,11 @@ class PdfViewerElement extends
731822
}
732823

733824
__pageChange(event) {
734-
let pageNumber = parseInt(this.$.currentPage.value, 10);
825+
const currentPageValue = this.querySelector('#currentPage').value;
826+
let pageNumber = parseInt(currentPageValue, 10);
735827
if (isNaN(pageNumber)) {
736828
pageNumber = this.__viewer.currentPageNumber;
737-
this.$.currentPage.value = "" + pageNumber;
829+
this.querySelector('#currentPage').value = "" + pageNumber;
738830
}
739831
if (pageNumber < 1) {
740832
pageNumber = 1;
@@ -747,7 +839,7 @@ class PdfViewerElement extends
747839

748840
setCurrentPage(value) {
749841
if (value != undefined) {
750-
this.$.currentPage.value = "" + value;
842+
this.querySelector('#currentPage').value = "" + value;
751843
}
752844
this.__pageChange();
753845
}

0 commit comments

Comments
 (0)