Refactor how PDFOutlineView/PDFAttachmentView is initialized in viewer.js, rename the classes, and refactor their render methods

Changes `PDFOutlineView`/`PDFAttachmentView` to be initialized once, since we're always creating them, and refactor their `render` methods to instead pass in the `outline`/`attachments`.

For consistency with other "classes", the `PDFOutlineView`/`PDFAttachmentView` are renamed to `PDFOutlineViewer`/`PDFAttachmentViewer`.

Also, make sure that the outline/attachments are reset when the document is closed. Currently we keep the old ones around until the `getOutline`/`getAttachments` API calls are resolved for a new document.

web/pdf_attachment_viewer.js

@@ -17,28 +17,34 @@
 'use strict';
 
 /**
- * @typedef {Object} PDFAttachmentViewOptions
+ * @typedef {Object} PDFAttachmentViewerOptions
  * @property {HTMLDivElement} container - The viewer element.
- * @property {Array} attachments - An array of attachment objects.
  * @property {DownloadManager} downloadManager - The download manager.
  */
 
+/**
+ * @typedef {Object} PDFAttachmentViewerRenderParameters
+ * @property {Array|null} attachments - An array of attachment objects.
+ */
+
 /**
  * @class
  */
-var PDFAttachmentView = (function PDFAttachmentViewClosure() {
+var PDFAttachmentViewer = (function PDFAttachmentViewerClosure() {
   /**
-   * @constructs PDFAttachmentView
+   * @constructs PDFAttachmentViewer
-   * @param {PDFAttachmentViewOptions} options
+   * @param {PDFAttachmentViewerOptions} options
    */
-  function PDFAttachmentView(options) {
+  function PDFAttachmentViewer(options) {
+    this.attachments = null;
     this.container = options.container;
-    this.attachments = options.attachments;
     this.downloadManager = options.downloadManager;
   }
 
-  PDFAttachmentView.prototype = {
+  PDFAttachmentViewer.prototype = {
-    reset: function PDFAttachmentView_reset() {
+    reset: function PDFAttachmentViewer_reset() {
+      this.attachments = null;
+
       var container = this.container;
       while (container.firstChild) {
         container.removeChild(container.firstChild);
@@ -48,7 +54,8 @@ var PDFAttachmentView = (function PDFAttachmentViewClosure() {
     /**
      * @private
      */
-    _dispatchEvent: function PDFAttachmentView_dispatchEvent(attachmentsCount) {
+    _dispatchEvent:
+        function PDFAttachmentViewer_dispatchEvent(attachmentsCount) {
       var event = document.createEvent('CustomEvent');
       event.initCustomEvent('attachmentsloaded', true, true, {
         attachmentsCount: attachmentsCount
@@ -59,18 +66,25 @@ var PDFAttachmentView = (function PDFAttachmentViewClosure() {
     /**
      * @private
      */
-    _bindLink: function PDFAttachmentView_bindLink(button, content, filename) {
+    _bindLink:
+        function PDFAttachmentViewer_bindLink(button, content, filename) {
       button.onclick = function downloadFile(e) {
         this.downloadManager.downloadData(content, filename, '');
         return false;
       }.bind(this);
     },
 
-    render: function PDFAttachmentView_render() {
+    /**
-      var attachments = this.attachments;
+     * @param {PDFAttachmentViewerRenderParameters} params
+     */
+    render: function PDFAttachmentViewer_render(params) {
+      var attachments = (params && params.attachments) || null;
       var attachmentsCount = 0;
 
+      if (this.attachments) {
         this.reset();
+      }
+      this.attachments = attachments;
 
       if (!attachments) {
         this._dispatchEvent(attachmentsCount);
@@ -98,5 +112,5 @@ var PDFAttachmentView = (function PDFAttachmentViewClosure() {
     }
   };
 
-  return PDFAttachmentView;
+  return PDFAttachmentViewer;
 })();

web/pdf_outline_viewer.js

@@ -19,40 +19,46 @@
 var DEFAULT_TITLE = '\u2013';
 
 /**
- * @typedef {Object} PDFOutlineViewOptions
+ * @typedef {Object} PDFOutlineViewerOptions
  * @property {HTMLDivElement} container - The viewer element.
- * @property {Array} outline - An array of outline objects.
  * @property {IPDFLinkService} linkService - The navigation/linking service.
  */
 
+/**
+ * @typedef {Object} PDFOutlineViewerRenderParameters
+ * @property {Array|null} outline - An array of outline objects.
+ */
+
 /**
  * @class
  */
-var PDFOutlineView = (function PDFOutlineViewClosure() {
+var PDFOutlineViewer = (function PDFOutlineViewerClosure() {
   /**
-   * @constructs PDFOutlineView
+   * @constructs PDFOutlineViewer
-   * @param {PDFOutlineViewOptions} options
+   * @param {PDFOutlineViewerOptions} options
    */
-  function PDFOutlineView(options) {
+  function PDFOutlineViewer(options) {
-    this.container = options.container;
+    this.outline = null;
-    this.outline = options.outline;
-    this.linkService = options.linkService;
     this.lastToggleIsShow = true;
+    this.container = options.container;
+    this.linkService = options.linkService;
   }
 
-  PDFOutlineView.prototype = {
+  PDFOutlineViewer.prototype = {
-    reset: function PDFOutlineView_reset() {
+    reset: function PDFOutlineViewer_reset() {
+      this.outline = null;
+      this.lastToggleIsShow = true;
+
       var container = this.container;
       while (container.firstChild) {
         container.removeChild(container.firstChild);
       }
-      this.lastToggleIsShow = true;
     },
 
     /**
      * @private
      */
-    _dispatchEvent: function PDFOutlineView_dispatchEvent(outlineCount) {
+    _dispatchEvent: function PDFOutlineViewer_dispatchEvent(outlineCount) {
       var event = document.createEvent('CustomEvent');
       event.initCustomEvent('outlineloaded', true, true, {
         outlineCount: outlineCount
@@ -63,7 +69,7 @@ var PDFOutlineView = (function PDFOutlineViewClosure() {
     /**
      * @private
      */
-    _bindLink: function PDFOutlineView_bindLink(element, item) {
+    _bindLink: function PDFOutlineViewer_bindLink(element, item) {
       if (item.url) {
         PDFJS.addLinkAttributes(element, { url: item.url });
         return;
@@ -82,7 +88,7 @@ var PDFOutlineView = (function PDFOutlineViewClosure() {
      *
      * @private
      */
-    _addToggleButton: function PDFOutlineView_addToggleButton(div) {
+    _addToggleButton: function PDFOutlineViewer_addToggleButton(div) {
       var toggler = document.createElement('div');
       toggler.className = 'outlineItemToggler';
       toggler.onclick = function(event) {
@@ -106,7 +112,8 @@ var PDFOutlineView = (function PDFOutlineViewClosure() {
      *
      * @private
      */
-    _toggleOutlineItem: function PDFOutlineView_toggleOutlineItem(root, show) {
+    _toggleOutlineItem:
+        function PDFOutlineViewer_toggleOutlineItem(root, show) {
       this.lastToggleIsShow = show;
       var togglers = root.querySelectorAll('.outlineItemToggler');
       for (var i = 0, ii = togglers.length; i < ii; ++i) {
@@ -117,15 +124,24 @@ var PDFOutlineView = (function PDFOutlineViewClosure() {
     /**
      * Collapse or expand all subtrees of the outline.
      */
-    toggleOutlineTree: function PDFOutlineView_toggleOutlineTree() {
+    toggleOutlineTree: function PDFOutlineViewer_toggleOutlineTree() {
+      if (!this.outline) {
+        return;
+      }
       this._toggleOutlineItem(this.container, !this.lastToggleIsShow);
     },
 
-    render: function PDFOutlineView_render() {
+    /**
-      var outline = this.outline;
+     * @param {PDFOutlineViewerRenderParameters} params
+     */
+    render: function PDFOutlineViewer_render(params) {
+      var outline = (params && params.outline) || null;
       var outlineCount = 0;
 
+      if (this.outline) {
         this.reset();
+      }
+      this.outline = outline;
 
       if (!outline) {
         this._dispatchEvent(outlineCount);
@@ -174,5 +190,5 @@ var PDFOutlineView = (function PDFOutlineViewClosure() {
     }
   };
 
-  return PDFOutlineView;
+  return PDFOutlineViewer;
 })();

web/viewer.html

@@ -74,8 +74,8 @@ See https://github.com/adobe-type-tools/cmap-resources
     <script src="pdf_viewer.js"></script>
     <script src="pdf_thumbnail_view.js"></script>
     <script src="pdf_thumbnail_viewer.js"></script>
-    <script src="pdf_outline_view.js"></script>
+    <script src="pdf_outline_viewer.js"></script>
-    <script src="pdf_attachment_view.js"></script>
+    <script src="pdf_attachment_viewer.js"></script>
     <script src="pdf_find_bar.js"></script>
     <script src="pdf_find_controller.js"></script>
     <script src="pdf_history.js"></script>

web/viewer.js

@@ -17,7 +17,7 @@
            ViewHistory, Stats, PDFThumbnailViewer, URL, noContextMenuHandler,
            SecondaryToolbar, PasswordPrompt, PDFPresentationMode,
            PDFDocumentProperties, HandTool, Promise, PDFLinkService,
-           PDFOutlineView, PDFAttachmentView, OverlayManager,
+           PDFOutlineViewer, PDFAttachmentViewer, OverlayManager,
            PDFFindController, PDFFindBar, PDFViewer, PDFRenderingQueue,
            PresentationModeState, parseQueryString, RenderingStates,
            UNKNOWN_SCALE, DEFAULT_SCALE_VALUE,
@@ -83,8 +83,8 @@ var mozL10n = document.mozL10n || document.webL10n;
 //#include pdf_document_properties.js
 //#include pdf_viewer.js
 //#include pdf_thumbnail_viewer.js
-//#include pdf_outline_view.js
+//#include pdf_outline_viewer.js
-//#include pdf_attachment_view.js
+//#include pdf_attachment_viewer.js
 
 var PDFViewerApplication = {
   initialBookmark: document.location.hash.substring(1),
@@ -109,6 +109,10 @@ var PDFViewerApplication = {
   pdfLinkService: null,
   /** @type {PDFHistory} */
   pdfHistory: null,
+  /** @type {PDFOutlineViewer} */
+  pdfOutlineViewer: null,
+  /** @type {PDFAttachmentViewer} */
+  pdfAttachmentViewer: null,
   pageRotation: 0,
   isInitialViewSet: false,
   animationStartedPromise: null,
@@ -245,6 +249,16 @@ var PDFViewerApplication = {
       passwordCancel: document.getElementById('passwordCancel')
     });
 
+    this.pdfOutlineViewer = new PDFOutlineViewer({
+      container: document.getElementById('outlineView'),
+      linkService: pdfLinkService,
+    });
+
+    this.pdfAttachmentViewer = new PDFAttachmentViewer({
+      container: document.getElementById('attachmentsView'),
+      downloadManager: new DownloadManager(),
+    });
+
     var self = this;
     var initializedPromise = Promise.all([
       Preferences.get('enableWebGL').then(function resolved(value) {
@@ -526,6 +540,9 @@ var PDFViewerApplication = {
       this.pdfLinkService.setDocument(null, null);
     }
 
+    this.pdfOutlineViewer.reset();
+    this.pdfAttachmentViewer.reset();
+
     this.findController.reset();
     this.findBar.reset();
 
@@ -950,13 +967,9 @@ var PDFViewerApplication = {
     var promises = [pagesPromise, this.animationStartedPromise];
     Promise.all(promises).then(function() {
       pdfDocument.getOutline().then(function(outline) {
+        self.pdfOutlineViewer.render({ outline: outline });
+
         var container = document.getElementById('outlineView');
-        self.outline = new PDFOutlineView({
-          container: container,
-          outline: outline,
-          linkService: self.pdfLinkService
-        });
-        self.outline.render();
         document.getElementById('viewOutline').disabled = !outline;
 
         if (!outline && !container.classList.contains('hidden')) {
@@ -968,13 +981,9 @@ var PDFViewerApplication = {
         }
       });
       pdfDocument.getAttachments().then(function(attachments) {
+        self.pdfAttachmentViewer.render({ attachments: attachments });
+
         var container = document.getElementById('attachmentsView');
-        self.attachments = new PDFAttachmentView({
-          container: container,
-          attachments: attachments,
-          downloadManager: new DownloadManager()
-        });
-        self.attachments.render();
         document.getElementById('viewAttachments').disabled = !attachments;
 
         if (!attachments && !container.classList.contains('hidden')) {
@@ -1554,7 +1563,7 @@ function webViewerInitialized() {
 
   document.getElementById('viewOutline').addEventListener('dblclick',
     function() {
-      PDFViewerApplication.outline.toggleOutlineTree();
+      PDFViewerApplication.pdfOutlineViewer.toggleOutlineTree();
     });
 
   document.getElementById('viewAttachments').addEventListener('click',