Convert the thumbnail view to ES6 syntax

web/pdf_thumbnail_view.js

@@ -19,8 +19,9 @@ import {
 import { getOutputScale, NullL10n } from './ui_utils';
 import { RenderingStates } from './pdf_rendering_queue';
 
-var THUMBNAIL_WIDTH = 98; // px
+const MAX_NUM_SCALING_STEPS = 3;
-var THUMBNAIL_CANVAS_BORDER_WIDTH = 1; // px
+const THUMBNAIL_CANVAS_BORDER_WIDTH = 1; // px
+const THUMBNAIL_WIDTH = 98; // px
 
 /**
  * @typedef {Object} PDFThumbnailViewOptions
@@ -31,7 +32,7 @@ var THUMBNAIL_CANVAS_BORDER_WIDTH = 1; // px
  * @property {PDFRenderingQueue} renderingQueue - The rendering queue object.
  * @property {boolean} disableCanvasToImageConversion - (optional) Don't convert
  *   the canvas thumbnails to images. This prevents `toDataURL` calls,
- *   but increases the overall memory usage. The default value is false.
+ *   but increases the overall memory usage. The default value is `false`.
  * @property {IL10n} l10n - Localization service.
  */
 
@@ -77,23 +78,14 @@ const TempImageFactory = (function TempImageFactoryClosure() {
 })();
 
 /**
- * @class
  * @implements {IRenderableView}
  */
-var PDFThumbnailView = (function PDFThumbnailViewClosure() {
+class PDFThumbnailView {
   /**
-   * @constructs PDFThumbnailView
    * @param {PDFThumbnailViewOptions} options
    */
-  function PDFThumbnailView(options) {
+  constructor({ container, id, defaultViewport, linkService, renderingQueue,
-    var container = options.container;
+                disableCanvasToImageConversion = false, l10n = NullL10n, }) {
-    var id = options.id;
-    var defaultViewport = options.defaultViewport;
-    var linkService = options.linkService;
-    var renderingQueue = options.renderingQueue;
-    var disableCanvasToImageConversion =
-      options.disableCanvasToImageConversion || false;
-
     this.id = id;
     this.renderingId = 'thumbnail' + id;
     this.pageLabel = null;
@@ -119,21 +111,21 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
     this.canvasHeight = (this.canvasWidth / this.pageRatio) | 0;
     this.scale = this.canvasWidth / this.pageWidth;
 
-    this.l10n = options.l10n || NullL10n;
+    this.l10n = l10n;
 
-    var anchor = document.createElement('a');
+    let anchor = document.createElement('a');
     anchor.href = linkService.getAnchorUrl('#page=' + id);
     this.l10n.get('thumb_page_title', { page: id, }, 'Page {{page}}').
         then((msg) => {
       anchor.title = msg;
     });
-    anchor.onclick = function stopNavigation() {
+    anchor.onclick = function() {
       linkService.page = id;
       return false;
     };
     this.anchor = anchor;
 
-    var div = document.createElement('div');
+    let div = document.createElement('div');
     div.className = 'thumbnail';
     div.setAttribute('data-page-number', this.id);
     this.div = div;
@@ -144,9 +136,9 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
       div.classList.add('selected');
     }
 
-    var ring = document.createElement('div');
+    let ring = document.createElement('div');
     ring.className = 'thumbnailSelectionRing';
-    var borderAdjustment = 2 * THUMBNAIL_CANVAS_BORDER_WIDTH;
+    let borderAdjustment = 2 * THUMBNAIL_CANVAS_BORDER_WIDTH;
     ring.style.width = this.canvasWidth + borderAdjustment + 'px';
     ring.style.height = this.canvasHeight + borderAdjustment + 'px';
     this.ring = ring;
@@ -156,16 +148,15 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
     container.appendChild(anchor);
   }
 
-  PDFThumbnailView.prototype = {
+  setPdfPage(pdfPage) {
-    setPdfPage: function PDFThumbnailView_setPdfPage(pdfPage) {
     this.pdfPage = pdfPage;
     this.pdfPageRotate = pdfPage.rotate;
-      var totalRotation = (this.rotation + this.pdfPageRotate) % 360;
+    let totalRotation = (this.rotation + this.pdfPageRotate) % 360;
     this.viewport = pdfPage.getViewport(1, totalRotation);
     this.reset();
-    },
+  }
 
-    reset: function PDFThumbnailView_reset() {
+  reset() {
     this.cancelRendering();
 
     this.pageWidth = this.viewport.width;
@@ -176,12 +167,12 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
     this.scale = (this.canvasWidth / this.pageWidth);
 
     this.div.removeAttribute('data-loaded');
-      var ring = this.ring;
+    let ring = this.ring;
-      var childNodes = ring.childNodes;
+    let childNodes = ring.childNodes;
-      for (var i = childNodes.length - 1; i >= 0; i--) {
+    for (let i = childNodes.length - 1; i >= 0; i--) {
       ring.removeChild(childNodes[i]);
     }
-      var borderAdjustment = 2 * THUMBNAIL_CANVAS_BORDER_WIDTH;
+    let borderAdjustment = 2 * THUMBNAIL_CANVAS_BORDER_WIDTH;
     ring.style.width = this.canvasWidth + borderAdjustment + 'px';
     ring.style.height = this.canvasHeight + borderAdjustment + 'px';
 
@@ -196,35 +187,34 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
       this.image.removeAttribute('src');
       delete this.image;
     }
-    },
+  }
 
-    update: function PDFThumbnailView_update(rotation) {
+  update(rotation) {
     if (typeof rotation !== 'undefined') {
       this.rotation = rotation;
     }
-      var totalRotation = (this.rotation + this.pdfPageRotate) % 360;
+    let totalRotation = (this.rotation + this.pdfPageRotate) % 360;
     this.viewport = this.viewport.clone({
       scale: 1,
       rotation: totalRotation,
     });
     this.reset();
-    },
+  }
 
-    cancelRendering: function PDFThumbnailView_cancelRendering() {
+  cancelRendering() {
     if (this.renderTask) {
       this.renderTask.cancel();
       this.renderTask = null;
     }
     this.renderingState = RenderingStates.INITIAL;
     this.resume = null;
-    },
+  }
 
   /**
    * @private
    */
-    _getPageDrawContext:
+  _getPageDrawContext(noCtxScale = false) {
-        function PDFThumbnailView_getPageDrawContext(noCtxScale) {
+    let canvas = document.createElement('canvas');
-      var canvas = document.createElement('canvas');
     // Keep the no-thumbnail outline visible, i.e. `data-loaded === false`,
     // until rendering/image conversion is complete, to avoid display issues.
     this.canvas = canvas;
@@ -233,8 +223,8 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
         PDFJSDev.test('MOZCENTRAL || FIREFOX || GENERIC')) {
       canvas.mozOpaque = true;
     }
-      var ctx = canvas.getContext('2d', { alpha: false, });
+    let ctx = canvas.getContext('2d', { alpha: false, });
-      var outputScale = getOutputScale(ctx);
+    let outputScale = getOutputScale(ctx);
 
     canvas.width = (this.canvasWidth * outputScale.sx) | 0;
     canvas.height = (this.canvasHeight * outputScale.sy) | 0;
@@ -245,20 +235,20 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
       ctx.scale(outputScale.sx, outputScale.sy);
     }
     return ctx;
-    },
+  }
 
   /**
    * @private
    */
-    _convertCanvasToImage: function PDFThumbnailView_convertCanvasToImage() {
+  _convertCanvasToImage() {
     if (!this.canvas) {
       return;
     }
     if (this.renderingState !== RenderingStates.FINISHED) {
       return;
     }
-      var id = this.renderingId;
+    let id = this.renderingId;
-      var className = 'thumbnailImage';
+    let className = 'thumbnailImage';
 
     if (this.disableCanvasToImageConversion) {
       this.canvas.id = id;
@@ -272,7 +262,7 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
       this.ring.appendChild(this.canvas);
       return;
     }
-      var image = document.createElement('img');
+    let image = document.createElement('img');
     image.id = id;
     image.className = className;
     this.l10n.get('thumb_page_canvas', { page: this.pageId, },
@@ -295,18 +285,16 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
     this.canvas.width = 0;
     this.canvas.height = 0;
     delete this.canvas;
-    },
+  }
 
   draw() {
     if (this.renderingState !== RenderingStates.INITIAL) {
       console.error('Must be in new state before drawing');
       return Promise.resolve(undefined);
     }
-
     this.renderingState = RenderingStates.RUNNING;
 
     let renderCapability = createPromiseCapability();
-
     let finishRenderTask = (error) => {
       // The renderTask may have been replaced by a new one, so only remove
       // the reference to the renderTask if it matches the one that is
@@ -359,13 +347,13 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
       finishRenderTask(error);
     });
     return renderCapability.promise;
-    },
+  }
 
-    setImage: function PDFThumbnailView_setImage(pageView) {
+  setImage(pageView) {
     if (this.renderingState !== RenderingStates.INITIAL) {
       return;
     }
-      var img = pageView.canvas;
+    let img = pageView.canvas;
     if (!img) {
       return;
     }
@@ -375,22 +363,21 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
 
     this.renderingState = RenderingStates.FINISHED;
 
-      var ctx = this._getPageDrawContext(true);
+    let ctx = this._getPageDrawContext(true);
-      var canvas = ctx.canvas;
+    let canvas = ctx.canvas;
-
     if (img.width <= 2 * canvas.width) {
       ctx.drawImage(img, 0, 0, img.width, img.height,
                     0, 0, canvas.width, canvas.height);
       this._convertCanvasToImage();
       return;
     }
+
     // drawImage does an awful job of rescaling the image, doing it gradually.
-      var MAX_NUM_SCALING_STEPS = 3;
+    let reducedWidth = canvas.width << MAX_NUM_SCALING_STEPS;
-      var reducedWidth = canvas.width << MAX_NUM_SCALING_STEPS;
+    let reducedHeight = canvas.height << MAX_NUM_SCALING_STEPS;
-      var reducedHeight = canvas.height << MAX_NUM_SCALING_STEPS;
+    let reducedImage = TempImageFactory.getCanvas(reducedWidth,
-      var reducedImage = TempImageFactory.getCanvas(reducedWidth,
                                                   reducedHeight);
-      var reducedImageCtx = reducedImage.getContext('2d');
+    let reducedImageCtx = reducedImage.getContext('2d');
 
     while (reducedWidth > img.width || reducedHeight > img.height) {
       reducedWidth >>= 1;
@@ -408,16 +395,16 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
     ctx.drawImage(reducedImage, 0, 0, reducedWidth, reducedHeight,
                   0, 0, canvas.width, canvas.height);
     this._convertCanvasToImage();
-    },
+  }
 
   get pageId() {
     return (this.pageLabel !== null ? this.pageLabel : this.id);
-    },
+  }
 
   /**
    * @param {string|null} label
    */
-    setPageLabel: function PDFThumbnailView_setPageLabel(label) {
+  setPageLabel(label) {
     this.pageLabel = (typeof label === 'string' ? label : null);
 
     this.l10n.get('thumb_page_title', { page: this.pageId, },
@@ -437,15 +424,12 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
         this.canvas.setAttribute('aria-label', ariaLabel);
       }
     });
-    },
+  }
-  };
 
-  PDFThumbnailView.cleanup = function() {
+  static cleanup() {
     TempImageFactory.destroyCanvas();
-  };
+  }
-
+}
-  return PDFThumbnailView;
-})();
 
 export {
   PDFThumbnailView,