orthanc-stone: Applications/StoneWebViewer/WebApplication/pdf-viewer.js comparison

comparison Applications/StoneWebViewer/WebApplication/pdf-viewer.js @ 1657:66e5fcdf5597

pdf viewer is working

author	Sebastien Jodogne <s.jodogne@gmail.com>
date	Wed, 18 Nov 2020 11:19:09 +0100
parents	fa9e6bf84958
children	e4589378ad8b

comparison

equal deleted inserted replaced

-:4cdc297be5a6
+:66e5fcdf5597
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 **/
+/**
+* This source file is an adaptation for Vue.js of the sample code
+* "Previous/Next example" of PDF.js:
+* https://mozilla.github.io/pdf.js/examples/
+*
+* =======================================================================
+*
+* Original license of the sample code:
+*
+* Copyright 2014 Mozilla Foundation
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+**/
 // Loaded via <script> tag, create shortcut to access PDF.js exports.
 var pdfjsLib = window['pdfjs-dist/build/pdf'];
 // The workerSrc property shall be specified.
 pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/build/pdf.worker.min.js';
 var ZOOM_FACTOR = 1.3;
-var FIT_MARGIN = 10;
+var FIT_MARGIN = 10;    // Additional margin for width/height fitting, in order to avoid spurious scrollbars
 Vue.component('pdf-viewer', {
-props: [ 'prefix', 'pdf' ],  // "pdf" must correspond to a "Uint8Array"
+props: [ 'prefix' ],
 template: '#pdf-viewer',
 data: function() {
 return {
 container: null,
 canvas: null,
 ctx: null,
+pdf: null, // "pdf" must correspond to a "Uint8Array"
 scale: 1,
 countPages: 0,
 currentPage: 0,
 pdfDoc: null,
 isRendering: false,
 pageNumPending: null
-}
-},
-watch: {
-pdf: function(newVal, oldVal) {
-this.LoadPdf();
 }
 },
 mounted: function() {
 this.container = document.getElementById(this.prefix + '-container');
 this.canvas = document.getElementById(this.prefix + '-canvas');
 // on the parent element of the canvas.
 // https://github.com/mozilla/pdf.js/issues/5628
 var scrollbarHeight = window.innerHeight - document.body.clientHeight + FIT_MARGIN;
 that.scale = (that.container.offsetHeight - scrollbarHeight) / page.getViewport({ scale: 1.0 }).height;
-//that.scale = that.container.clientHeight / page.getViewport({ scale: 1.0 }).height;
 that.QueueRenderPage(that.currentPage);
 });
 }
 },
 ZoomIn: function() {
 ZoomOut: function() {
 this.scale /= ZOOM_FACTOR;
 this.QueueRenderPage(this.currentPage);
 },
 LoadPdf: function(pdf) {
-var that = this;
+if (!this.isRendering &&
-pdfjsLib.getDocument(new Uint8Array(this.pdf)).promise.then(function(pdfDoc_) {
+pdf.length > 0) {
-that.pdfDoc = pdfDoc_;
+this.pdf = pdf;
-that.currentPage = 0;
+this.isRendering = true;
-that.countPages = pdfDoc_.numPages;
-that.scale = 1;
+var that = this;
-that.isRendering = false;
+pdfjsLib.getDocument(this.pdf).promise.then(function(pdfDoc_) {
-that.pageNumPending = null;
+that.pdfDoc = pdfDoc_;
+that.currentPage = 1;
-// Initial/first page rendering
+that.countPages = pdfDoc_.numPages;
-that.RenderPage(1);
+that.scale = 1;
-});
+that.isRendering = false;
+that.pageNumPending = null;
+// Initial/first page rendering, after fitting the PDF to the available viewport
+that.FitHeight();
+});
+}
 },
 RenderPage: function(pageNum) {
 var that = this;
 if (this.pdfDoc !== null &&
 },
 MouseWheel: function(event) {
 if (event.ctrlKey) {
 if (event.deltaY < 0) {
 this.ZoomIn();
+event.preventDefault();
 } else if (event.deltaY > 0) {
 this.ZoomOut();
+event.preventDefault();
 }
+} else if (!event.shiftKey &&
-event.preventDefault();
+!event.altKey &&
+!event.metaKey) {
+// Is the vertical scrollbar hidden?
+// https://stackoverflow.com/a/4814526/881731
+if (this.container.scrollHeight <= this.container.clientHeight) {
+if (event.deltaY < 0) {
+this.PreviousPage();
+event.preventDefault();
+} else if (event.deltaY > 0) {
+this.NextPage();
+event.preventDefault();
+}
+}
 }
 }
 }
 });