@vaadin-component-factory/vcf-pdf-viewer 0.9.1 → 1.0.1

package/README.md

@@ -4,7 +4,7 @@
 
 # <vcf-pdf-viewer>
 
-[<vcfn-pdf-viewer>](https://github.com/vaadin-component-factory/vcf-pdf-viewer) is a Web Component that provides a PDF viewer functionality. The component is developed in Polymer 3 and uses Mozilla's [PDF.js](https://github.com/mozilla/pdf.js)
+[<vcf-pdf-viewer>](https://github.com/vaadin-component-factory/vcf-pdf-viewer) is a Web Component that provides a PDF viewer functionality. The component is developed in Polymer 3 and uses Mozilla's [PDF.js](https://github.com/mozilla/pdf.js)
 
 This component is part of Vaadin Component Factory.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin-component-factory/vcf-pdf-viewer",
-  "version": "0.9.1",
+  "version": "1.0.1",
   "description": "Polymer element providing pdf viewer",
   "main": "vcf-pdf-viewer.js",
   "repository": {
@@ -26,15 +26,15 @@
   "dependencies": {
     "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-element-mixin": "^2.4.1",
-    "@vaadin/vaadin-lumo-styles": "^1.6.0",
-    "@vaadin/vaadin-material-styles": "^1.3.2",
-    "@vaadin/vaadin-overlay": "^3.5.0",
-    "@vaadin/vaadin-text-field": "^2.8.4",
-    "@vaadin/vaadin-themable-mixin": "^1.6.1",
-    "@vaadin/vaadin-item": "^2.1.0",
-    "@vaadin/vaadin-list-box": "^1.4.0",
-    "@vaadin/vaadin-select": "^2.4.0",
+    "@vaadin/component-base": "^22.0.1",
+    "@vaadin/vaadin-lumo-styles": "^22.0.1",
+    "@vaadin/vaadin-material-styles": "^22.0.1",
+    "@vaadin/vaadin-overlay": "^22.0.1",
+    "@vaadin/text-field": "^22.0.1",
+    "@vaadin/vaadin-themable-mixin": "^22.0.1",
+    "@vaadin/item": "^22.0.1",
+    "@vaadin/list-box": "^22.0.1",
+    "@vaadin/select": "^22.0.1",
     "core-js": "^3.19.0",
     "dommatrix": "^0.0.6",
     "web-streams-polyfill": "^3.1.1"
@@ -42,6 +42,7 @@
   "devDependencies": {
     "@polymer/iron-component-page": "^4.0.0",
     "@polymer/iron-demo-helpers": "^3.0.0-pre.19",
+    "@vaadin/polymer-legacy-adapter": "22.0.1",
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "regenerator-runtime": "^0.13.5",
     "@babel/core": "^7.16.0",

package/src/vcf-pdf-viewer.js

@@ -1,11 +1,12 @@
 import { PolymerElement, html } from '@polymer/polymer/polymer-element';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { IronResizableBehavior } from '@polymer/iron-resizable-behavior';
 import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
-import '@vaadin/vaadin-text-field';
-import '@vaadin/vaadin-select';
-import '@vaadin/vaadin-item';
+import '@vaadin/polymer-legacy-adapter/template-renderer.js';
+import '@vaadin/text-field';
+import '@vaadin/select';
+import '@vaadin/item';
 
 import * as pdfjsLib from '../pdfjs/dist/pdf';
 import * as pdfjsViewer from '../pdfjs/dist/pdf_viewer';
@@ -254,26 +255,27 @@ class PdfViewerElement extends
                 <vaadin-select id="zoom" part="toolbar-zoom" value="{{zoom}}">
                 <template>
                     <vaadin-list-box>
-                    <vaadin-item value='auto'>Automatic zoom</vaadin-item>
-                    <vaadin-item value='page-fit'>Page fit</vaadin-item>
-                    <vaadin-item value='0.5'>50%</vaadin-item>
-                    <vaadin-item value='0.75'>75%</vaadin-item>
-                    <vaadin-item value='1.0'>100%</vaadin-item>
-                    <vaadin-item value='1.25'>125%</vaadin-item>
-                    <vaadin-item value='1.5'>150%</vaadin-item>
-                    <vaadin-item value='2.0'>200%</vaadin-item>
-                    <vaadin-item value='3.0'>300%</vaadin-item>
-                    <vaadin-item value='4.0'>400%</vaadin-item>
+                        <vaadin-item value='auto'>Automatic zoom</vaadin-item>
+                        <vaadin-item value='page-fit'>Page fit</vaadin-item>
+                        <vaadin-item value='0.5'>50%</vaadin-item>
+                        <vaadin-item value='0.75'>75%</vaadin-item>
+                        <vaadin-item value='1.0'>100%</vaadin-item>
+                        <vaadin-item value='1.25'>125%</vaadin-item>
+                        <vaadin-item value='1.5'>150%</vaadin-item>
+                        <vaadin-item value='2.0'>200%</vaadin-item>
+                        <vaadin-item value='3.0'>300%</vaadin-item>
+                        <vaadin-item value='4.0'>400%</vaadin-item>
                     </vaadin-list-box>
                 </template>
                 </vaadin-select>
                 <div part="toolbar-pages">
-                <vaadin-text-field id="currentPage" part="toolbar-current-page" value="{{__currentPage}}" on-change="__pageChange"></vaadin-text-field>
-                <span id="pageSeparator" part="toolbar-text toolbar-page-separator">/</span>
-                <span id="totalPages" part="toolbar-text toolbar-total-pages">{{__totalPages}}</span>
-                <button id="previousPage" part="toolbar-button toolbar-button-previous-page" on-click="__previousPage"></button>
-                <button id="nextPage" part="toolbar-button toolbar-button-next-page" on-click="__nextPage"></button>
+                    <vaadin-text-field id="currentPage" part="toolbar-current-page" value="{{currentPage}}" on-change="__pageChange"></vaadin-text-field>
+                    <span id="pageSeparator" part="toolbar-text toolbar-page-separator">/</span>
+                    <span id="totalPages" part="toolbar-text toolbar-total-pages">{{__totalPages}}</span>
+                    <button id="previousPage" part="toolbar-button toolbar-button-previous-page" on-click="__previousPage"></button>
+                    <button id="nextPage" part="toolbar-button toolbar-button-next-page" on-click="__nextPage"></button>
                 </div>
+                <slot></slot>
             </div>
             
             <div id="viewerContainer" part="viewer-container" tabindex="0">
@@ -356,7 +358,7 @@ class PdfViewerElement extends
             /**
              * The current page visible viewed right now
              */
-            __currentPage: {
+            currentPage: {
                 type: Number,
                 value: 1
             },
@@ -364,10 +366,22 @@ class PdfViewerElement extends
              * Total amount of pages in an opened document
              */
             __totalPages: Number,
+            
+            /**
+             *  Loading state
+             */
             __loading: {
                 type: Boolean,
                 value: true
             },
+
+            /**
+             * Whether sidebar is open after loading or not
+             */
+             __sidebarOpen: {
+                type: Boolean,
+                value: false
+            },
         };
     }
 
@@ -423,33 +437,45 @@ class PdfViewerElement extends
         
         this.__linkService.setViewer(this.__viewer);
         pdfRenderingQueue.setViewer(this.__viewer);
+        
+        // thumbnailViewer
+        this.__thumbnailViewer = new pdfjsThumbnailViewer.PDFThumbnailViewer({
+            container: this.$.thumbnailView,
+            eventBus: eventBus,
+            linkService: this.__linkService,
+            renderingQueue: pdfRenderingQueue,
+            l10n: l10n
+        })
+
+        pdfRenderingQueue.setThumbnailViewer(this.__thumbnailViewer);  
 
         // listeners
         eventBus.on('pagesinit', () => {
             this.__viewer.currentScaleValue = this.zoom;
             this.__loading = false;
+            this.__updateThumbnailViewer();
+            if(this.__sidebarOpen){
+                this.__openSidebar();
+            } else {
+                this.__closeSidebar();
+            }      
+            this.__viewer.currentPage = this.setCurrentPage();
         });
         eventBus.on('pagechanging', (event) => {
-            this.__currentPage = event.pageNumber;
+            this.__updateCurrentPageValue(event.pageNumber);
             this.__updatePageNumberStates();
             if(this.__thumbnailViewer && this.__thumbnailViewer.renderingQueue.isThumbnailViewEnabled){
-                this.__thumbnailViewer.scrollThumbnailIntoView(this.__currentPage);
+                this.__thumbnailViewer.scrollThumbnailIntoView(this.currentPage);
             }
         });
 
         this.addEventListener('iron-resize', this.__recalculateSizes);
         this.__recalculateSizes();       
+    }
 
-        // thumbnailViewer
-        this.__thumbnailViewer = new pdfjsThumbnailViewer.PDFThumbnailViewer({
-            container: this.$.thumbnailView,
-            eventBus: eventBus,
-            linkService: this.__linkService,
-            renderingQueue: pdfRenderingQueue,
-            l10n: l10n
-        })
-
-        pdfRenderingQueue.setThumbnailViewer(this.__thumbnailViewer);  
+    __updateCurrentPageValue(pageNumber){
+        this.currentPage = pageNumber;
+        this.dispatchEvent(new CustomEvent('currentPage-changed'));
     }
 
     __recalculateSizes() {
@@ -490,13 +516,12 @@ class PdfViewerElement extends
         this.__document = pdfjsLib.getDocument(src);
         return this.__document.promise.then((pdfDocument) => {
             // Document loaded, specifying document for the viewer.
-            this.__viewer.setDocument(pdfDocument);
             this.__thumbnailViewer.setDocument(pdfDocument);
+            this.__viewer.setDocument(pdfDocument);
             this.__linkService.setDocument(pdfDocument);
 
             this.$.toolbar.classList.add('ready');
             this.__totalPages = pdfDocument.numPages;
-            this.__currentPage = 1;
             this.__updatePageNumberStates();
             this.__setPdfTitleFromMetadata(pdfDocument).then(() => {
                 this.dispatchEvent(new CustomEvent('document-loaded', {
@@ -569,8 +594,8 @@ class PdfViewerElement extends
     }
 
     __updatePageNumberStates() {
-        this.$.previousPage.disabled = (this.__currentPage === 1);
-        this.$.nextPage.disabled = (this.__currentPage === this.__totalPages);
+        this.$.previousPage.disabled = (this.currentPage === 1);
+        this.$.nextPage.disabled = (this.currentPage === this.__totalPages);
     }
 
     __zoomChanged(value) {
@@ -602,6 +627,13 @@ class PdfViewerElement extends
         this.__viewer.currentPageNumber = page;
     }
 
+    setCurrentPage(value) {
+        if (value != undefined) {
+            this.$.currentPage.value = value;
+        }
+        this.__pageChange();
+    }
+
     _getPage() {
         return this.__viewer.currentPageNumber;
     }
@@ -616,9 +648,25 @@ class PdfViewerElement extends
 
     __toogleSidebar() {
         if (this.$.outerContainer.classList.length == 0) { 
+            this.__openSidebar();
+        } else {
+            this.__closeSidebar();
+        }
+    }
+
+    __openSidebar() {
+        if(!this.__thumbnailViewer ||this.__loading){
+            this.__sidebarOpen = true;
+        } else {
             this.__thumbnailViewer.renderingQueue.isThumbnailViewEnabled = true;
             this.__updateThumbnailViewer();
             this.$.outerContainer.classList.add('sidebarOpen');
+        }
+    }
+
+    __closeSidebar() {
+        if(!this.__thumbnailViewer || this.__loading){
+            this.__sidebarOpen = false;
         } else {
             this.__thumbnailViewer.renderingQueue.isThumbnailViewEnabled = false;
             this.$.outerContainer.classList.remove('sidebarOpen');
@@ -650,7 +698,10 @@ class PdfViewerElement extends
                 }));
                 return false;
               };
-        }        
+        } 
+        if(this.__thumbnailViewer && this.__thumbnailViewer.renderingQueue.isThumbnailViewEnabled){
+            this.__thumbnailViewer.scrollThumbnailIntoView(this.currentPage);
+        }   
     }
 }
 

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

@@ -6,9 +6,9 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
 
-import '@vaadin/vaadin-select/theme/lumo/vaadin-select-styles.js';
-import '@vaadin/vaadin-list-box/theme/lumo/vaadin-list-box-styles.js';
-import '@vaadin/vaadin-item/theme/lumo/vaadin-item-styles.js';
+import '@vaadin/select/theme/lumo/vaadin-select-styles.js';
+import '@vaadin/list-box/theme/lumo/vaadin-list-box-styles.js';
+import '@vaadin/item/theme/lumo/vaadin-item-styles.js';
 
 registerStyles(
     'vcf-pdf-viewer',
@@ -78,7 +78,7 @@ registerStyles(
         margin: var(--lumo-space-xs);
         background: transparent;
         border: none;
-        padding-top: 0.3em;
+        padding-top: 0.2em;
       }
 
       [part~="toolbar-button"]:disabled {

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

@@ -4,10 +4,10 @@ import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styl
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/typography.js';
 
-import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field-styles.js';
-import '@vaadin/vaadin-select/theme/material/vaadin-select-styles.js';
-import '@vaadin/vaadin-list-box/theme/material/vaadin-list-box-styles.js';
-import '@vaadin/vaadin-item/theme/material/vaadin-item-styles.js';
+import '@vaadin/text-field/theme/material/vaadin-text-field-styles.js';
+import '@vaadin/select/theme/material/vaadin-select-styles.js';
+import '@vaadin/list-box/theme/material/vaadin-list-box-styles.js';
+import '@vaadin/item/theme/material/vaadin-item-styles.js';
 
 registerStyles(
   'vcf-pdf-viewer',

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

@@ -1,2 +1,2 @@
-import './theme/material/vcf-pdf-viewer.js';
-export * from './src/vcf-pdf-viewer.js';
+import '../../src/vcf-pdf-viewer.js';
+import './vcf-pdf-viewer-styles.js';