@vaadin-component-factory/vcf-pdf-viewer 2.1.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin-component-factory/vcf-pdf-viewer",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "Polymer element providing pdf viewer",
   "main": "vcf-pdf-viewer.js",
   "repository": {
@@ -28,6 +28,7 @@
     "@vaadin/button": "^24.1.1",
     "@vaadin/component-base": "^24.1.1",
     "@vaadin/icon": "^24.1.1",
+    "@vaadin/icons": "^24.1.1",
     "@vaadin/item": "^24.1.1",
     "@vaadin/list-box": "^24.1.1",
     "@vaadin/select": "^24.1.1",

package/src/vcf-pdf-viewer.js

@@ -7,6 +7,7 @@ import '@vaadin/select';
 import '@vaadin/item';
 import '@vaadin/button';
 import '@vaadin/icon';
+import '@vaadin/icons';
 import '@vaadin/tooltip';
 
 import * as pdfjsLib from '../pdfjs/dist/pdf';
@@ -56,8 +57,8 @@ class PdfViewerElement extends
             [part~="toolbar"] #totalPages,
             [part~="toolbar"] #previousPage,
             [part~="toolbar"] #nextPage,
-            [part~="toolbar"] [part~="toolbar-zoom"],
-            [part~="toolbar"] [part~="toolbar-button-toogle-sidebar"] {
+            [part~="toolbar"] #zoom,
+            [part~="toolbar"] #sidebarToggle {
                 display: none;
             }
 
@@ -66,8 +67,8 @@ class PdfViewerElement extends
             [part~="toolbar"].ready #totalPages,
             [part~="toolbar"].ready #previousPage,
             [part~="toolbar"].ready #nextPage,
-            [part~="toolbar"].ready [part~="toolbar-zoom"],
-            [part~="toolbar"].ready [part~="toolbar-button-toogle-sidebar"] {
+            [part~="toolbar"].ready #zoom,
+            [part~="toolbar"].ready #sidebarToggle {
                 display: inherit;
             }
 
@@ -195,7 +196,7 @@ class PdfViewerElement extends
                 align-items: baseline;
             }
 
-            #currentPage {
+            ::slotted(#currentPage) {
                 align-self: baseline;
             }
 
@@ -233,7 +234,7 @@ class PdfViewerElement extends
                 background-color: rgba(0, 0, 0, 0.15);
             }
 
-            #sidebarToggle {
+            ::slotted(#sidebarToggle) {
                 margin-left: -10px;
                 margin-right: 15px;
                 border: 2px solid;
@@ -241,12 +242,12 @@ class PdfViewerElement extends
                 width: 40px;
             }
 
-            #nextPage, #previousPage {
+            ::slotted(#nextPage), ::slotted(#previousPage) {
                 width: 30px;
                 margin: 0;
             }
-
-            [part~="toolbar"].ready [part~="toolbar-zoom"].hide-zoom {
+            
+            [part~="toolbar"].ready ::slotted(.toolbar-zoom.hide-zoom) {
                 display: none;
             }
 
@@ -259,26 +260,16 @@ class PdfViewerElement extends
             </div>            
         </div>   
         <div id="mainContainer" part="main-container">
-            <div id="toolbar" part="toolbar">
-                <vaadin-button id="sidebarToggle" part="toolbar-button toolbar-button-toogle-sidebar" theme="icon" on-click="__toogleSidebar" aria-label="Sidebar toggle">
-                    <vaadin-icon part="toggle-button-icon" slot="prefix"></vaadin-icon>
-                    <vaadin-tooltip slot="tooltip" text="{{sidebarToggleTooltip}}"></vaadin-tooltip>
-                </vaadin-button>
+            <div id="toolbar" part="toolbar">               
+                <slot name="sidebar-toggle-button-slot"></slot>
                 <span id="title" part="toolbar-text toolbar-title">{{__title}}</span>
-                <vaadin-select id="zoom" part="toolbar-zoom" value="{{zoom}}" items="[[__zoomItems]]">
-                </vaadin-select>
+                <slot name="toolbar-zoom-slot"></slot>
                 <div part="toolbar-pages">
-                    <vaadin-text-field id="currentPage" part="toolbar-current-page" value="{{currentPage}}" on-change="__pageChange"></vaadin-text-field>
+                    <slot name="toolbar-current-page-slot"></slot>
                     <span id="pageSeparator" part="toolbar-text toolbar-page-separator">/</span>
                     <span id="totalPages" part="toolbar-text toolbar-total-pages">{{__totalPages}}</span>
-                    <vaadin-button id="previousPage" part="toolbar-button toolbar-button-previous-page" theme="icon" on-click="__previousPage" aria-label="Previous page">
-                        <vaadin-icon part="previous-page-button-icon" slot="prefix"></vaadin-icon>
-                        <vaadin-tooltip slot="tooltip" text="{{previousPageTooltip}}"></vaadin-tooltip>
-                    </vaadin-button>
-                    <vaadin-button id="nextPage" part="toolbar-button toolbar-button-next-page" theme="icon" on-click="__nextPage" aria-label="Next page">
-                        <vaadin-icon part="next-page-button-icon" slot="prefix"></vaadin-icon>
-                        <vaadin-tooltip slot="tooltip" text="{{nextPageTooltip}}"></vaadin-tooltip>
-                    </vaadin-button>
+                    <slot name="previous-page-button-slot"></slot>
+                    <slot name="next-page-button-slot"></slot>
                 </div>
                 <slot></slot>
             </div>
@@ -287,8 +278,7 @@ class PdfViewerElement extends
                 <div id="viewer" part="viewer"></div>
             </div>
         </div>
-
-     </div>
+    </div>
     `;
     }
 
@@ -297,7 +287,7 @@ class PdfViewerElement extends
     }
 
     static get version() {
-        return '1.4.1';
+        return '3.0.0';
     }
 
     static get properties() {
@@ -357,8 +347,7 @@ class PdfViewerElement extends
              */
             zoom: {
                 type: String,
-                value: 'auto',
-                observer: '__zoomChanged'
+                value: 'auto'
             },
             /**
              * The current page visible viewed right now
@@ -436,6 +425,7 @@ class PdfViewerElement extends
                 type: Boolean,
                 value: false
             },
+            
             __zoomItems: {
                 computed: '__computeZoomItems(autoZoomOptionLabel, fitZoomOptionLabel)'
             },
@@ -466,6 +456,104 @@ class PdfViewerElement extends
         };
     }
 
+    __createToolbarButton() {
+        const icon = document.createElement('vaadin-icon');
+        icon.setAttribute('slot', 'prefix');
+
+        const tooltip = document.createElement('vaadin-tooltip');
+        tooltip.setAttribute('slot', 'tooltip');
+
+        const button = document.createElement('vaadin-button');
+        button.classList.add('toolbar-button');
+        button.setAttribute('theme', 'icon');
+
+        button.appendChild(icon);        
+        button.appendChild(tooltip);        
+        return button;
+    }
+
+    /**
+     * Adds toggle button to the toolbar slot named "sidebar-toggle-button-slot".
+     */
+    _createSideBarToggleButton() {
+        const button = this.__createToolbarButton();
+        const icon = button.querySelector('vaadin-icon');
+        icon.classList.add('toggle-button-icon')
+        button.querySelector('vaadin-tooltip').setAttribute('text', this.sidebarToggleTooltip);
+        button.setAttribute('slot', 'sidebar-toggle-button-slot');
+        button.setAttribute('id','sidebarToggle');
+        button.setAttribute('aria-label', 'Sidebar toggle');
+        button.addEventListener('click', () => {
+            this.__toogleSidebar();
+            if(this.$.outerContainer.classList.contains('sidebarOpen')) {
+                icon.classList.add('sidebarOpen');
+            } else {
+                icon.classList.remove('sidebarOpen');
+            }            
+        });
+        this.appendChild(button);
+    }
+
+    /**
+     * Adds previous page button to the toolbar slot named "previous-page-button-slot".
+     */
+    _createPreviousPageButton(){
+        const button = this.__createToolbarButton();
+        button.querySelector('vaadin-icon').classList.add('previous-page-button-icon')
+        button.querySelector('vaadin-tooltip').setAttribute('text', this.previousPageTooltip);
+        button.setAttribute('slot', 'previous-page-button-slot');
+        button.setAttribute('id', 'previousPage');
+        button.setAttribute('aria-label', 'Previous page');
+        button.addEventListener('click', () => this.__previousPage());
+        this.appendChild(button);                  
+    }
+
+    /**
+     * Adds next page button to the toolbar slot named "next-page-button-slot".
+     */
+    _createNextPageButton() {
+        const button = this.__createToolbarButton();
+        button.querySelector('vaadin-icon').classList.add('next-page-button-icon')
+        button.querySelector('vaadin-tooltip').setAttribute('text', this.nextPageTooltip);
+        button.setAttribute('slot', 'next-page-button-slot');
+        button.setAttribute('id', 'nextPage');
+        button.setAttribute('aria-label', 'Next page');
+        button.addEventListener('click', () => this.__nextPage());
+        this.appendChild(button);
+    }
+
+    /**
+     * Adds current page text field to the toolbar slot named "toolbar-current-page-slot".
+     */
+    _createCurrentPageTextField() {
+        const textField = document.createElement('vaadin-text-field');
+        textField.setAttribute('slot', 'toolbar-current-page-slot');
+        textField.setAttribute('id', 'currentPage');
+        textField.classList.add('toolbar-current-page');
+        textField.setAttribute('value', this.currentPage);
+        textField.addEventListener('change', () => this.__pageChange());
+        this.appendChild(textField);
+    }
+
+    /**
+     * Adds zoom select to the toolbar slot named "toolbar-zoom-slot".
+     */
+    _createZoomSelect() {    
+        const select = document.createElement('vaadin-select');
+        select.setAttribute('slot', 'toolbar-zoom-slot');
+        select.setAttribute('id', 'zoom');
+        select.classList.add('toolbar-zoom');
+        select.setAttribute('value', this.zoom);
+        select.items = this.__zoomItems;
+        select.addEventListener('value-changed', (e) => this.__zoomChanged(e.detail.value));
+        if(this.hideZoom) {
+            select.classList.add('hide-zoom');
+        } else {
+            select.classList.remove('hide-zoom');
+        }
+        this.appendChild(select);
+    }
+
     __computeZoomItems(autoZoomOptionLabel, fitZoomOptionLabel) {
         return [
             { label: autoZoomOptionLabel, value:'auto' },
@@ -483,8 +571,7 @@ class PdfViewerElement extends
 
     static get observers() {
         return [
-            '__setTitle(__pdfTitle, __filename)',
-            '__updateZoomVisibility()'
+            '__setTitle(__pdfTitle, __filename)'
         ];
     }
 
@@ -504,16 +591,19 @@ class PdfViewerElement extends
         }
    }
 
-   __updateZoomVisibility() {
-        if(this.hideZoom) {
-            this.$.zoom.classList.add('hide-zoom');
-        } else {
-            this.$.zoom.classList.remove('hide-zoom');
-        }
+    _addToolbarButtons() {
+        this._createSideBarToggleButton();
+        this._createZoomSelect();
+        this._createCurrentPageTextField();
+        this._createPreviousPageButton();
+        this._createNextPageButton();
     }
 
     ready() {
         super.ready();
+
+        this._addToolbarButtons();
+
         this.$.viewerContainer.addEventListener('focus', e => this.__setFocused(true), true);
         this.$.viewerContainer.addEventListener('blur', e => this.__setFocused(false), true);
         this.$.viewerContainer.addEventListener('mousedown', e => {
@@ -577,6 +667,7 @@ class PdfViewerElement extends
             if(this.__thumbnailViewer && this.__thumbnailViewer.renderingQueue.isThumbnailViewEnabled){
                 this.__thumbnailViewer.scrollThumbnailIntoView(this.currentPage);
             }
+            this.querySelector('#currentPage').value = this.currentPage;
         });
 
         this.__resizeObserver = new ResizeObserver(() => {
@@ -712,8 +803,8 @@ class PdfViewerElement extends
     }
 
     __updatePageNumberStates() {
-        this.$.previousPage.disabled = (this.currentPage === "1");
-        this.$.nextPage.disabled = (this.currentPage === "" + this.__totalPages);
+        this.querySelector('#previousPage').disabled = (this.currentPage === "1");
+        this.querySelector('#nextPage').disabled = (this.currentPage === "" + this.__totalPages);
     }
 
     __zoomChanged(value) {
@@ -731,10 +822,11 @@ class PdfViewerElement extends
     }
 
     __pageChange(event) {
-        let pageNumber = parseInt(this.$.currentPage.value, 10);
+        const currentPageValue = this.querySelector('#currentPage').value;
+        let pageNumber = parseInt(currentPageValue, 10);
         if (isNaN(pageNumber)) {
             pageNumber = this.__viewer.currentPageNumber;
-            this.$.currentPage.value = "" + pageNumber;
+            this.querySelector('#currentPage').value = "" + pageNumber;
         }
         if (pageNumber < 1) {
             pageNumber = 1;
@@ -747,7 +839,7 @@ class PdfViewerElement extends
 
     setCurrentPage(value) {
         if (value != undefined) {
-            this.$.currentPage.value = "" + value;
+            this.querySelector('#currentPage').value = "" + value;
         }
         this.__pageChange();
     }

package/theme/lumo/vcf-pdf-viewer-styles.js

@@ -13,7 +13,7 @@ import '@vaadin/item/theme/lumo/vaadin-item-styles.js';
 registerStyles(
     'vcf-pdf-viewer',
     css`
-        :host {
+      :host {
         background-color: var(--lumo-base-color);
         border: 1px solid var(--lumo-contrast-10pct);
         border-radius: var(--lumo-border-radius, var(--lumo-border-radius-m));
@@ -47,7 +47,7 @@ registerStyles(
         justify-content: flex-end;
       }
 
-      [part~="toolbar-current-page"] {
+      ::slotted(.toolbar-current-page) {
         width: 3.25em;
       }
 
@@ -70,7 +70,7 @@ registerStyles(
         text-overflow: ellipsis;
       }
 
-      [part~="toolbar-button"] {
+      ::slotted(.toolbar-button){
         height: var(--lumo-size-m);
         border-radius: var(--lumo-border-radius, var(--lumo-border-radius-m));
         color: var(--lumo-contrast-80pct);
@@ -78,49 +78,33 @@ registerStyles(
         margin: var(--lumo-space-xs);
         background: transparent;
         border: none;
-        padding-top: 0.2em;
+        padding-top: 0.3em;
       }
 
-      [part~="toolbar-button"][disabled] {
+      ::slotted(.toolbar-button[disabled]) {
         color: var(--lumo-contrast-40pct);
       }
 
-      [part~="toolbar-button"]:hover {
+      ::slotted(.toolbar-button:hover) {
         background-color: var(--lumo-contrast-5pct);
         color: var(--lumo-contrast-80pct);
       }
 
-      [part~="toolbar-button"][disabled]:hover {
+      ::slotted(.toolbar-button[disabled]:hover) {
         background-color: transparent;
         color: var(--lumo-contrast-40pct);
       }
 
-      [part~="toolbar-button"]:focus {
+      ::slotted(.toolbar-button:focus) {
         outline: none;
         box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
       }
 
-      [part~="toolbar-button"] {
+      ::slotted(.toolbar-button) {
         font-family: 'lumo-icons';
         font-size: var(--lumo-icon-size-m);
       }
 
-      [part~="previous-page-button-icon"]::before {
-        content: var(--lumo-icons-angle-up);
-      }
-
-      [part~="next-page-button-icon"]::before {
-        content: var(--lumo-icons-angle-down);
-      }
-
-      [part~="toggle-button-icon"]::before {
-        content: var(--lumo-icons-chevron-right);
-      }
-
-      #outerContainer.sidebarOpen [part~="toggle-button-icon"]::before {
-        content: var(--lumo-icons-chevron-left);
-      }
-
       .page {
         padding: var(--lumo-space-m);
         padding-bottom: 0;
@@ -159,7 +143,7 @@ registerStyles(
         flex: none;
       }
 
-      [part~="toolbar"].small-size [part~="toolbar-zoom"] {
+      [part~="toolbar"].small-size ::slotted(.toolbar-zoom) {
         position: absolute;
         bottom: var(--lumo-space-s);
         left: 50%;

package/theme/lumo/vcf-pdf-viewer-toolbar-icons-styles.js

@@ -0,0 +1,29 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
+import '@vaadin/icon/theme/lumo/vaadin-icon-styles.js';
+
+import '@vaadin/vaadin-lumo-styles/font-icons.js';
+
+registerStyles(
+    'vaadin-icon',
+    css`
+      :host(.previous-page-button-icon)::before {
+        content: var(--pdf-viewer-previous-page-button-icon, var(--lumo-icons-angle-up));
+      }
+
+      :host(.next-page-button-icon)::before {
+        content: var(--pdf-viewer-next-page-button-icon, var(--lumo-icons-angle-down));
+      }
+
+      :host(.toggle-button-icon)::before {
+        content: var(--pdf-viewer-toggle-button-icon, var(--lumo-icons-chevron-right));
+      }
+   
+      :host(.sidebarOpen.toggle-button-icon)::before {
+        content:var(--pdf-viewer-toggle-button-icon, var(--lumo-icons-chevron-left));
+      } 
+   
+     `,
+    { moduleId: 'lumo-vcf-pdf-viewer-toolbar-icons' }
+  );
+  

package/theme/lumo/vcf-pdf-viewer.js

@@ -1,2 +1,3 @@
 import '../../src/vcf-pdf-viewer.js';
-import './vcf-pdf-viewer-styles.js';
+import './vcf-pdf-viewer-styles.js';
+import './vcf-pdf-viewer-toolbar-icons-styles.js';