Rename ThumbnailView to PDFThumbnailView and refactor it to be more class-like

web/pdf_thumbnail_view.js

@@ -21,17 +21,50 @@
 var THUMBNAIL_CANVAS_BORDER_WIDTH = 1;
 
 /**
- * @constructor
+ * @typedef {Object} PDFThumbnailViewOptions
- * @param container
+ * @property {HTMLDivElement} container - The viewer element.
- * @param id
+ * @property {number} id - The thumbnail's unique ID (normally its number).
- * @param defaultViewport
+ * @property {PageViewport} defaultViewport - The page viewport.
- * @param linkService
+ * @property {IPDFLinkService} linkService - The navigation/linking service.
- * @param renderingQueue
+ * @property {PDFRenderingQueue} renderingQueue - The rendering queue object.
- *
+ */
+
+/**
+ * @class
  * @implements {IRenderableView}
  */
-var ThumbnailView = function thumbnailView(container, id, defaultViewport,
+var PDFThumbnailView = (function PDFThumbnailViewClosure() {
-                                           linkService, renderingQueue) {
+  function getTempCanvas(width, height) {
+    var tempCanvas = PDFThumbnailView.tempImageCache;
+    if (!tempCanvas) {
+      tempCanvas = document.createElement('canvas');
+      PDFThumbnailView.tempImageCache = tempCanvas;
+    }
+    tempCanvas.width = width;
+    tempCanvas.height = height;
+
+    // Since this is a temporary canvas, we need to fill
+    // the canvas with a white background ourselves.
+    // |getPageDrawContext| uses CSS rules for this.
+    var ctx = tempCanvas.getContext('2d');
+    ctx.save();
+    ctx.fillStyle = 'rgb(255, 255, 255)';
+    ctx.fillRect(0, 0, width, height);
+    ctx.restore();
+    return tempCanvas;
+  }
+
+  /**
+   * @constructs PDFThumbnailView
+   * @param {PDFThumbnailViewOptions} options
+   */
+  function PDFThumbnailView(options) {
+    var container = options.container;
+    var id = options.id;
+    var defaultViewport = options.defaultViewport;
+    var linkService = options.linkService;
+    var renderingQueue = options.renderingQueue;
+
     var anchor = document.createElement('a');
     anchor.href = linkService.getAnchorUrl('#page=' + id);
     anchor.title = mozL10n.get('thumb_page_title', {page: id}, 'Page {{page}}');
@@ -58,6 +91,7 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
     var div = this.el = document.createElement('div');
     div.id = 'thumbnailContainer' + id;
     div.className = 'thumbnail';
+    this.div = div;
 
     if (id === 1) {
       // Highlight the thumbnail of the first page when no page number is
@@ -67,10 +101,11 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
 
     var ring = document.createElement('div');
     ring.className = 'thumbnailSelectionRing';
-  ring.style.width = this.canvasWidth + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH +
+    ring.style.width =
-                     'px';
+      this.canvasWidth + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH + 'px';
-  ring.style.height = this.canvasHeight + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH +
+    ring.style.height =
-                      'px';
+      this.canvasHeight + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH + 'px';
+    this.ring = ring;
 
     div.appendChild(ring);
     anchor.appendChild(div);
@@ -79,16 +114,18 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
     this.hasImage = false;
     this.renderingState = RenderingStates.INITIAL;
     this.renderingQueue = renderingQueue;
+  }
 
-  this.setPdfPage = function thumbnailViewSetPdfPage(pdfPage) {
+  PDFThumbnailView.prototype = {
+    setPdfPage: function PDFThumbnailView_setPdfPage(pdfPage) {
       this.pdfPage = pdfPage;
       this.pdfPageRotate = pdfPage.rotate;
       var totalRotation = (this.rotation + this.pdfPageRotate) % 360;
       this.viewport = pdfPage.getViewport(1, totalRotation);
       this.update();
-  };
+    },
 
-  this.update = function thumbnailViewUpdate(rotation) {
+    update: function PDFThumbnailView_update(rotation) {
       if (rotation !== undefined) {
         this.rotation = rotation;
       }
@@ -104,40 +141,40 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
       this.canvasHeight = (this.canvasWidth / this.pageRatio) | 0;
       this.scale = (this.canvasWidth / this.pageWidth);
 
-    div.removeAttribute('data-loaded');
+      this.div.removeAttribute('data-loaded');
-    ring.textContent = '';
+      this.ring.textContent = '';
-    ring.style.width = this.canvasWidth + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH +
+      this.ring.style.width =
-                       'px';
+        this.canvasWidth + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH + 'px';
-    ring.style.height = this.canvasHeight + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH +
+      this.ring.style.height =
-                        'px';
+        this.canvasHeight + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH + 'px';
 
       this.hasImage = false;
       this.renderingState = RenderingStates.INITIAL;
       this.resume = null;
-  };
+    },
 
-  this.getPageDrawContext = function thumbnailViewGetPageDrawContext() {
+    getPageDrawContext: function PDFThumbnailView_getPageDrawContext() {
       var canvas = document.createElement('canvas');
-    canvas.id = 'thumbnail' + id;
+      canvas.id = 'thumbnail' + this.id;
 
       canvas.width = this.canvasWidth;
       canvas.height = this.canvasHeight;
       canvas.className = 'thumbnailImage';
       canvas.setAttribute('aria-label', mozL10n.get('thumb_page_canvas',
-      {page: id}, 'Thumbnail of Page {{page}}'));
+        {page: this.id}, 'Thumbnail of Page {{page}}'));
 
-    div.setAttribute('data-loaded', true);
+      this.div.setAttribute('data-loaded', true);
 
-    ring.appendChild(canvas);
+      this.ring.appendChild(canvas);
 
       return canvas.getContext('2d');
-  };
+    },
 
-  this.drawingRequired = function thumbnailViewDrawingRequired() {
+    drawingRequired: function PDFThumbnailView_drawingRequired() {
       return !this.hasImage;
-  };
+    },
 
-  this.draw = function thumbnailViewDraw() {
+    draw: function PDFThumbnailView_draw() {
       if (this.renderingState !== RenderingStates.INITIAL) {
         console.error('Must be in new state before drawing');
       }
@@ -183,29 +220,9 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
       );
       this.hasImage = true;
       return promise;
-  };
+    },
-
-  function getTempCanvas(width, height) {
-    var tempCanvas = ThumbnailView.tempImageCache;
-    if (!tempCanvas) {
-      tempCanvas = document.createElement('canvas');
-      ThumbnailView.tempImageCache = tempCanvas;
-    }
-    tempCanvas.width = width;
-    tempCanvas.height = height;
-
-    // Since this is a temporary canvas, we need to fill
-    // the canvas with a white background ourselves.
-    // |getPageDrawContext| uses CSS rules for this.
-    var ctx = tempCanvas.getContext('2d');
-    ctx.save();
-    ctx.fillStyle = 'rgb(255, 255, 255)';
-    ctx.fillRect(0, 0, width, height);
-    ctx.restore();
-    return tempCanvas;
-  }
 
-  this.setImage = function thumbnailViewSetImage(pageView) {
+    setImage: function PDFThumbnailView_setImage(pageView) {
       var img = pageView.canvas;
       if (this.hasImage || !img) {
         return;
@@ -221,7 +238,8 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
         ctx.drawImage(img, 0, 0, img.width, img.height,
                       0, 0, canvas.width, canvas.height);
       } else {
-      // drawImage does an awful job of rescaling the image, doing it gradually
+        // drawImage does an awful job of rescaling the image,
+        // doing it gradually.
         var MAX_NUM_SCALING_STEPS = 3;
         var reducedWidth = canvas.width << MAX_NUM_SCALING_STEPS;
         var reducedHeight = canvas.height << MAX_NUM_SCALING_STEPS;
@@ -237,7 +255,8 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
         while (reducedWidth > 2 * canvas.width) {
           reducedImageCtx.drawImage(reducedImage,
                                     0, 0, reducedWidth, reducedHeight,
-                                  0, 0, reducedWidth >> 1, reducedHeight >> 1);
+                                    0, 0,
+                                    reducedWidth >> 1, reducedHeight >> 1);
           reducedWidth >>= 1;
           reducedHeight >>= 1;
         }
@@ -246,7 +265,10 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
       }
 
       this.hasImage = true;
+    }
   };
-};
 
-ThumbnailView.tempImageCache = null;
+  return PDFThumbnailView;
+})();
+
+PDFThumbnailView.tempImageCache = null;

web/pdf_thumbnail_viewer.js

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* globals watchScroll, getVisibleElements, scrollIntoView, ThumbnailView,
+/* globals watchScroll, getVisibleElements, scrollIntoView, PDFThumbnailView,
            Promise */
 
 'use strict';
@@ -104,7 +104,7 @@ var PDFThumbnailViewer = (function PDFThumbnailViewerClosure() {
     },
 
     cleanup: function PDFThumbnailViewer_cleanup() {
-      ThumbnailView.tempImageCache = null;
+      PDFThumbnailView.tempImageCache = null;
     },
 
     /**
@@ -135,9 +135,13 @@ var PDFThumbnailViewer = (function PDFThumbnailViewerClosure() {
         var pagesCount = pdfDocument.numPages;
         var viewport = firstPage.getViewport(1.0);
         for (var pageNum = 1; pageNum <= pagesCount; ++pageNum) {
-          var thumbnail = new ThumbnailView(this.container, pageNum,
+          var thumbnail = new PDFThumbnailView({
-                                            viewport.clone(), this.linkService,
+            container: this.container,
-                                            this.renderingQueue);
+            id: pageNum,
+            defaultViewport: viewport.clone(),
+            linkService: this.linkService,
+            renderingQueue: this.renderingQueue
+          });
           this.thumbnails.push(thumbnail);
         }
       }.bind(this));