- remove server-side PDFJS support by default (import vue-pdf/src/vue…

…PdfSss.vue otherwise)

- move babel-plugin-syntax-dynamic-import to devDependencies

package.json

@@ -2,7 +2,7 @@
   "name": "vue-pdf",
   "version": "3.1.9",
   "description": "vue.js pdf viewer",
-  "main": "src/pdf.vue",
+  "main": "src/vuePdfNoSss.vue",
   "scripts": {},
   "repository": {
     "type": "git",
@@ -20,11 +20,11 @@
   },
   "homepage": "https://github.com/FranckFreiburger/vue-pdf#readme",
   "dependencies": {
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "pdfjs-dist": "^2.0.303",
     "vue-resize-sensor": "^2.0.0"
   },
   "devDependencies": {
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "raw-loader": "^0.5.1"
   }
 }

src/componentFactory.js

@@ -0,0 +1,115 @@
+import resizeSensor from 'vue-resize-sensor'
+import './annotationLayer.css'
+
+export default function(pdfjsWrapper) {
+
+	var createLoadingTask = pdfjsWrapper.createLoadingTask;
+	var PDFJSWrapper = pdfjsWrapper.PDFJSWrapper;
+
+	return {
+		createLoadingTask: createLoadingTask,
+		render: function(h) {
+			return h('div', {
+				attrs: {
+					style: 'position: relative'
+				}
+			}, [
+				h('canvas', {
+					style: {
+						display: 'block',
+						width: '100%',
+					},
+					ref:'canvas'
+				}),
+				h('div', {
+					class: 'annotationLayer',
+					ref:'annotationLayer'
+				}),
+				h(resizeSensor, {
+					props: {
+						initial: true
+					},
+					on: {
+						resize: this.resize
+					},
+				})
+			])
+		},
+		props: {
+			src: {
+				type: [String, Object],
+				default: '',
+			},
+			page: {
+				type: Number,
+				default: 1,
+			},
+			rotate: {
+				type: Number,
+				default: 0,
+			},
+		},
+		watch: {
+			src: function() {
+
+				this.pdf.loadDocument(this.src);
+			},
+			page: function() {
+
+				this.pdf.loadPage(this.page, this.rotate);
+			},
+			rotate: function() {
+
+				this.pdf.renderPage(this.rotate);
+			},
+		},
+		methods: {
+			resize: function(size) {
+
+				// check if the element is attached to the dom tree
+				if ( this.$el.parentNode === null )
+					return;
+
+				// on IE10- canvas height must be set
+				this.$refs.canvas.style.height = this.$refs.canvas.offsetWidth * (this.$refs.canvas.height / this.$refs.canvas.width) + 'px';
+
+				// update the page when the resolution is too poor
+				var resolutionScale = this.pdf.getResolutionScale();
+
+				if ( resolutionScale < 0.85 || resolutionScale > 1.15 )
+					this.pdf.renderPage(this.rotate);
+
+				this.$refs.annotationLayer.style.transform = 'scale('+resolutionScale+')';
+			},
+			print: function(dpi, pageList) {
+
+				this.pdf.printPage(dpi, pageList);
+			}
+		},
+
+		// doc: mounted hook is not called during server-side rendering.
+		mounted: function() {
+
+			this.pdf = new PDFJSWrapper(this.$refs.canvas, this.$refs.annotationLayer, this.$emit.bind(this));
+
+			this.$on('loaded', function() {
+
+				this.pdf.loadPage(this.page, this.rotate);
+			});
+
+			this.$on('page-size', function(width, height) {
+
+				this.$refs.canvas.style.height = this.$refs.canvas.offsetWidth * (height / width) + 'px';
+			});
+
+			this.pdf.loadDocument(this.src);
+		},
+
+		// doc: destroyed hook is not called during server-side rendering.
+		destroyed: function() {
+
+			this.pdf.destroy();
+		}
+	}
+
+}