@vaadin-component-factory/vcf-pdf-viewer 0.9.4 → 1.0.2

package/src/vcf-pdf-viewer.js

@@ -1,11 +1,10 @@
 import { PolymerElement, html } from '@polymer/polymer/polymer-element';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin';
-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 { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+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';
@@ -33,8 +32,7 @@ pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
  */
 class PdfViewerElement extends
     ElementMixin(
-        ThemableMixin(
-            mixinBehaviors([IronResizableBehavior], PolymerElement))) {
+        ThemableMixin(PolymerElement)) {
 
     static get template() {
         return html`
@@ -254,25 +252,25 @@ 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>
@@ -468,8 +466,15 @@ class PdfViewerElement extends
             }
         });
 
-        this.addEventListener('iron-resize', this.__recalculateSizes);
-        this.__recalculateSizes();       
+        this.__resizeObserver = new ResizeObserver(() => {
+            requestAnimationFrame(() => this.__recalculateSizes());
+        });
+        this.__resizeObserver.observe(this);
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.__recalculateSizes();        
     }
 
     __updateCurrentPageValue(pageNumber){
@@ -512,7 +517,7 @@ class PdfViewerElement extends
             return;
         }
         this.__setFilename(src);
-        this.__document = pdfjsLib.getDocument(src);
+        this.__document = pdfjsLib.getDocument(new URL(src, document.baseURI).href);
         return this.__document.promise.then((pdfDocument) => {
             // Document loaded, specifying document for the viewer.
             this.__thumbnailViewer.setDocument(pdfDocument);

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',

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',