@vaadin-component-factory/vcf-pdf-viewer 0.9.0 → 1.0.0

package/src/vcf-pdf-viewer.js

@@ -1,20 +1,21 @@
 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 * as pdfjsLib from './pdf';
-import * as pdfjsViewer from '../web/pdf_viewer';
-import * as pdfUtils from '../web/ui_utils'
-import * as pdfjsLinkService from '../web/pdf_link_service';
-import * as pdfjsThumbnailViewer from '../web/pdf_thumbnail_viewer';
-import * as pdfjsRenderingQueue from '../web/pdf_rendering_queue';
-import { NullL10n } from '../web/l10n_utils';
-import * as pdfjsWorker from './core/worker';
+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';
+import * as pdfUtils from '../pdfjs/dist/ui_utils'
+import * as pdfjsLinkService from '../pdfjs/dist/pdf_link_service';
+import * as pdfjsThumbnailViewer from '../pdfjs/dist/pdf_thumbnail_viewer';
+import * as pdfjsRenderingQueue from '../pdfjs/dist/pdf_rendering_queue';
+import { NullL10n } from '../pdfjs/dist/l10n_utils';
+import * as pdfjsWorker from '../pdfjs/dist/worker';
 pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
 
 /**
@@ -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,14 @@ class PdfViewerElement extends
         this.__viewer.currentPageNumber = page;
     }
 
+    setCurrentPage(value) {
+        if (!this.__viewer || this.__loading) {
+            this.$.currentPage.value = value;
+        } else {
+            this.__pageChange();
+        }
+    }
+
     _getPage() {
         return this.__viewer.currentPageNumber;
     }
@@ -616,9 +649,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 +699,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';

package/src/core/.eslintrc

@@ -1,13 +0,0 @@
-{
-  "parserOptions": {
-    "ecmaVersion": 2017,
-  },
-
-  "extends": [
-    "../../.eslintrc"
-  ],
-
-  "env": {
-    "es2017": true,
-  },
-}