Merge pull request #23 from vaadin-component-factory/feat/dynamic-zoom-labels

Feat/dynamic zoom labels

Author: OlliTietavainenVaadin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin-component-factory/vcf-pdf-viewer",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Polymer element providing pdf viewer",
   "main": "vcf-pdf-viewer.js",
   "repository": {
@@ -25,47 +25,47 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.4.1",
+    "@vaadin/button": "^24.1.1",
     "@vaadin/component-base": "^24.1.1",
-    "@vaadin/vaadin-lumo-styles": "^24.1.1",
-    "@vaadin/vaadin-material-styles": "^24.1.1",
-    "@vaadin/text-field": "^24.1.1",
-    "@vaadin/vaadin-themable-mixin": "^24.1.1",
+    "@vaadin/icon": "^24.1.1",
     "@vaadin/item": "^24.1.1",
     "@vaadin/list-box": "^24.1.1",
     "@vaadin/select": "^24.1.1",
-    "@vaadin/button": "^24.1.1",
-    "@vaadin/icon": "^24.1.1",
+    "@vaadin/text-field": "^24.1.1",
+    "@vaadin/vaadin-lumo-styles": "^24.1.1",
+    "@vaadin/vaadin-material-styles": "^24.1.1",
+    "@vaadin/vaadin-themable-mixin": "^24.1.1",
     "core-js": "^3.19.0",
     "dommatrix": "^0.0.6",
     "web-streams-polyfill": "^3.1.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.16.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.0",
+    "@babel/plugin-transform-runtime": "^7.16.0",
+    "@babel/preset-env": "^7.16.0",
+    "@babel/runtime-corejs3": "^7.16.3",
     "@polymer/iron-component-page": "^4.0.0",
     "@polymer/iron-demo-helpers": "^3.0.0-pre.19",
+    "@rollup/plugin-babel": "5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.0.6",
     "@vaadin/polymer-legacy-adapter": "22.0.1",
     "@webcomponents/webcomponentsjs": "^2.6.0",
-    "regenerator-runtime": "^0.13.5",
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
-    "@babel/plugin-transform-runtime": "^7.16.0",
-    "@babel/runtime-corejs3": "^7.16.3",
-    "@babel/plugin-proposal-optional-chaining": "^7.16.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.16.0",
     "babel-loader": "^8.2.3",
     "html-webpack-plugin": "^5.5.0",
-    "webpack": "^5.61.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.4.0",
+    "regenerator-runtime": "^0.13.5",
     "rimraf": "^3.0.2",
     "rollup": "^2.59.0",
-    "@rollup/plugin-babel": "5.3.0",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "@rollup/plugin-commonjs": "^21.0.1",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-minify-html-literals": "^1.2.6",
-    "rollup-plugin-terser": "^7.0.2"
+    "rollup-plugin-terser": "^7.0.2",
+    "webpack": "^5.61.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.4.0"
   },
   "scripts": {
     "test": "wct",

src/vcf-pdf-viewer.js

@@ -263,7 +263,7 @@ class PdfViewerElement extends
                     <vaadin-icon part="toggle-button-icon" slot="prefix"></vaadin-icon>
                 </vaadin-button>
                 <span id="title" part="toolbar-text toolbar-title">{{__title}}</span>
-                <vaadin-select id="zoom" part="toolbar-zoom" value="{{zoom}}">
+                <vaadin-select id="zoom" part="toolbar-zoom" value="{{zoom}}" items="[[__zoomItems]]">
                 </vaadin-select>
                 <div part="toolbar-pages">
                     <vaadin-text-field id="currentPage" part="toolbar-current-page" value="{{currentPage}}" on-change="__pageChange"></vaadin-text-field>
@@ -432,9 +432,27 @@ class PdfViewerElement extends
                 type: Boolean,
                 value: false
             },
+            __zoomItems: {
+                computed: '__computeZoomItems(autoZoomOptionLabel, fitZoomOptionLabel)'
+            }
         };
     }
 
+    __computeZoomItems(autoZoomOptionLabel, fitZoomOptionLabel) {
+        return [
+            { label: autoZoomOptionLabel, value:'auto' },
+            { label: fitZoomOptionLabel, value:'page-fit' },
+            { label: '50%', value:'0.5' },
+            { label: '75%', value:'0.75' },
+            { label: '100%', value:'1.0' },
+            { label: '125%', value:'1.25' },
+            { label: '150%', value:'1.5' },
+            { label: '200%', value:'2.0' },
+            { label: '300%', value:'3.0' },
+            { label: '400%', value:'4.0' }
+        ]
+    }
+
     static get observers() {
         return [
             '__setTitle(__pdfTitle, __filename)',
@@ -536,18 +554,6 @@ class PdfViewerElement extends
         this.__resizeObserver = new ResizeObserver(() => {
             requestAnimationFrame(() => this.__recalculateSizes());
         });
-        this.$.zoom.items = [
-            { label: this.autoZoomOptionLabel, value:'auto' },
-            { label: this.fitZoomOptionLabel, value:'page-fit' },
-            { label: '50%', value:'0.5' },
-            { label: '75%', value:'0.75' },
-            { label: '100%', value:'1.0' },
-            { label: '125%', value:'1.25' },
-            { label: '150%', value:'1.5' },
-            { label: '200%', value:'2.0' },
-            { label: '300%', value:'3.0' },
-            { label: '400%', value:'4.0' }
-        ];
 
         this.__resizeObserver.observe(this);
     }