Merge pull request #7313 from timvandermeij/secondary-toolbar-class

Convert the secondary toolbar to a class

web/app.js

@@ -267,8 +267,8 @@ var PDFViewerApplication = {
     this.pdfDocumentProperties =
       new PDFDocumentProperties(appConfig.documentProperties);
 
-    SecondaryToolbar.initialize(appConfig.secondaryToolbar, eventBus);
+    this.secondaryToolbar =
-    this.secondaryToolbar = SecondaryToolbar;
+      new SecondaryToolbar(appConfig.secondaryToolbar, eventBus);
 
     if (this.supportsFullscreen) {
       this.pdfPresentationMode = new PDFPresentationMode({
@@ -1332,14 +1332,14 @@ function webViewerInitialized() {
 
   if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
     appConfig.toolbar.openFile.setAttribute('hidden', 'true');
-    appConfig.secondaryToolbar.openFile.setAttribute('hidden', 'true');
+    appConfig.secondaryToolbar.openFileButton.setAttribute('hidden', 'true');
   } else {
     fileInput.value = null;
   }
 
 //#else
 //appConfig.toolbar.openFile.setAttribute('hidden', 'true');
-//appConfig.secondaryToolbar.openFile.setAttribute('hidden', 'true');
+//appConfig.secondaryToolbar.openFileButton.setAttribute('hidden', 'true');
 //#endif
 
   var PDFJS = pdfjsLib.PDFJS;
@@ -1429,7 +1429,7 @@ function webViewerInitialized() {
 
   if (!PDFViewerApplication.supportsPrinting) {
     appConfig.toolbar.print.classList.add('hidden');
-    appConfig.secondaryToolbar.print.classList.add('hidden');
+    appConfig.secondaryToolbar.printButton.classList.add('hidden');
   }
 
   if (!PDFViewerApplication.supportsFullscreen) {
@@ -1722,7 +1722,8 @@ function webViewerUpdateViewarea(e) {
   var href =
     PDFViewerApplication.pdfLinkService.getAnchorUrl(location.pdfOpenParams);
   PDFViewerApplication.appConfig.toolbar.viewBookmark.href = href;
-  PDFViewerApplication.appConfig.secondaryToolbar.viewBookmark.href = href;
+  PDFViewerApplication.appConfig.secondaryToolbar.viewBookmarkButton.href =
+    href;
 
   // Update the current bookmark in the browsing history.
   PDFViewerApplication.pdfHistory.updateCurrentBookmark(location.pdfOpenParams,
@@ -1762,7 +1763,8 @@ function webViewerResize() {
   }
 
   // Set the 'max-height' CSS property of the secondary toolbar.
-  SecondaryToolbar.setMaxHeight(PDFViewerApplication.appConfig.mainContainer);
+  var mainContainer = PDFViewerApplication.appConfig.mainContainer;
+  PDFViewerApplication.secondaryToolbar.setMaxHeight(mainContainer);
 }
 
 window.addEventListener('hashchange', function webViewerHashchange(evt) {
@@ -1816,9 +1818,9 @@ function webViewerFileInputChange(e) {
   // URL does not reflect proper document location - hiding some icons.
   var appConfig = PDFViewerApplication.appConfig;
   appConfig.toolbar.viewBookmark.setAttribute('hidden', 'true');
-  appConfig.secondaryToolbar.viewBookmark.setAttribute('hidden', 'true');
+  appConfig.secondaryToolbar.viewBookmarkButton.setAttribute('hidden', 'true');
   appConfig.toolbar.download.setAttribute('hidden', 'true');
-  appConfig.secondaryToolbar.download.setAttribute('hidden', 'true');
+  appConfig.secondaryToolbar.downloadButton.setAttribute('hidden', 'true');
 }
 //#endif
 
@@ -1863,7 +1865,8 @@ function webViewerLocalized() {
     }
 
     // Set the 'max-height' CSS property of the secondary toolbar.
-    SecondaryToolbar.setMaxHeight(PDFViewerApplication.appConfig.mainContainer);
+    var mainContainer = PDFViewerApplication.appConfig.mainContainer;
+    PDFViewerApplication.secondaryToolbar.setMaxHeight(mainContainer);
   });
 }
 
@@ -2010,14 +2013,14 @@ window.addEventListener('DOMMouseScroll', handleMouseWheel);
 window.addEventListener('mousewheel', handleMouseWheel);
 
 window.addEventListener('click', function click(evt) {
-  if (!SecondaryToolbar.opened) {
+  if (!PDFViewerApplication.secondaryToolbar.isOpen) {
     return;
   }
   var appConfig = PDFViewerApplication.appConfig;
   if (PDFViewerApplication.pdfViewer.containsElement(evt.target) ||
       (appConfig.toolbar.container.contains(evt.target) &&
        evt.target !== appConfig.secondaryToolbar.toggleButton)) {
-    SecondaryToolbar.close();
+    PDFViewerApplication.secondaryToolbar.close();
   }
 }, true);
 
@@ -2160,8 +2163,8 @@ window.addEventListener('keydown', function keydown(evt) {
         handled = true;
         break;
       case 27: // esc key
-        if (SecondaryToolbar.opened) {
+        if (PDFViewerApplication.secondaryToolbar.isOpen) {
-          SecondaryToolbar.close();
+          PDFViewerApplication.secondaryToolbar.close();
           handled = true;
         }
         if (!PDFViewerApplication.supportsIntegratedFind &&

web/secondary_toolbar.js

@@ -29,173 +29,170 @@
 var SCROLLBAR_PADDING = uiUtils.SCROLLBAR_PADDING;
 var mozL10n = uiUtils.mozL10n;
 
-var SecondaryToolbar = {
+/**
-  opened: false,
+ * @typedef {Object} SecondaryToolbarOptions
-  previousContainerHeight: null,
+ * @property {HTMLDivElement} toolbar - Container for the secondary toolbar.
-  newContainerHeight: null,
+ * @property {HTMLButtonElement} toggleButton - Button to toggle the visibility
+ *   of the secondary toolbar.
+ * @property {HTMLButtonElement} presentationModeButton - Button for entering
+ *   presentation mode.
+ * @property {HTMLButtonElement} openFileButton - Button to open a file.
+ * @property {HTMLButtonElement} printButton - Button to print the document.
+ * @property {HTMLButtonElement} downloadButton - Button to download the
+ *   document.
+ * @property {HTMLLinkElement} viewBookmarkButton - Button to obtain a bookmark
+ *   link to the current location in the document.
+ * @property {HTMLButtonElement} firstPageButton - Button to go to the first
+ *   page in the document.
+ * @property {HTMLButtonElement} lastPageButton - Button to go to the last page
+ *   in the document.
+ * @property {HTMLButtonElement} pageRotateCwButton - Button to rotate the pages
+ *   clockwise.
+ * @property {HTMLButtonElement} pageRotateCcwButton - Button to rotate the
+ *   pages counterclockwise.
+ * @property {HTMLButtonElement} toggleHandToolButton - Button to toggle the
+ *   hand tool.
+ * @property {HTMLButtonElement} documentPropertiesButton - Button for opening
+ *   the document properties dialog.
+ */
 
-  initialize: function secondaryToolbarInitialize(options, eventBus) {
+/**
-    this.eventBus = eventBus;
+ * @class
+ */
+var SecondaryToolbar = (function SecondaryToolbarClosure() {
+  /**
+   * @constructs SecondaryToolbar
+   * @param {SecondaryToolbarOptions} options
+   * @param {EventBus} eventBus
+   */
+  function SecondaryToolbar(options, eventBus) {
     this.toolbar = options.toolbar;
-    this.buttonContainer = this.toolbar.firstElementChild;
-
-    // Define the toolbar buttons.
     this.toggleButton = options.toggleButton;
-    this.presentationModeButton = options.presentationModeButton;
+    this.buttons = [
-    this.openFile = options.openFile;
+      { element: options.presentationModeButton, eventName: 'presentationmode',
-    this.print = options.print;
+        close: true },
-    this.download = options.download;
+      { element: options.openFileButton, eventName: 'openfile', close: true },
-    this.viewBookmark = options.viewBookmark;
+      { element: options.printButton, eventName: 'print', close: true },
-    this.firstPage = options.firstPage;
+      { element: options.downloadButton, eventName: 'download', close: true },
-    this.lastPage = options.lastPage;
+      { element: options.viewBookmarkButton, eventName: null, close: true },
-    this.pageRotateCw = options.pageRotateCw;
+      { element: options.firstPageButton, eventName: 'firstpage', close: true },
-    this.pageRotateCcw = options.pageRotateCcw;
+      { element: options.lastPageButton, eventName: 'lastpage', close: true },
-    this.toggleHandTool = options.toggleHandTool;
+      { element: options.pageRotateCwButton, eventName: 'rotatecw',
-    this.documentPropertiesButton = options.documentPropertiesButton;
+        close: false },
-
+      { element: options.pageRotateCcwButton, eventName: 'rotateccw',
-    // Attach the event listeners.
+        close: false },
-    var elements = [
+      { element: options.toggleHandToolButton, eventName: 'togglehandtool',
-      // Button to toggle the visibility of the secondary toolbar:
+        close: true },
-      { element: this.toggleButton, handler: this.toggle },
+      { element: options.documentPropertiesButton,
-      // All items within the secondary toolbar
+        eventName: 'documentproperties', close: true }
-      { element: this.presentationModeButton,
-        handler: this.presentationModeClick },
-      { element: this.openFile, handler: this.openFileClick },
-      { element: this.print, handler: this.printClick },
-      { element: this.download, handler: this.downloadClick },
-      { element: this.viewBookmark, handler: this.viewBookmarkClick },
-      { element: this.firstPage, handler: this.firstPageClick },
-      { element: this.lastPage, handler: this.lastPageClick },
-      { element: this.pageRotateCw, handler: this.pageRotateCwClick },
-      { element: this.pageRotateCcw, handler: this.pageRotateCcwClick },
-      { element: this.toggleHandTool, handler: this.toggleHandToolClick },
-      { element: this.documentPropertiesButton,
-        handler: this.documentPropertiesClick }
     ];
 
-    for (var item in elements) {
+    this.eventBus = eventBus;
-      var element = elements[item].element;
-      if (element) {
-        element.addEventListener('click', elements[item].handler.bind(this));
-      }
-    }
 
-    // Tracking hand tool menu item changes.
+    this.opened = false;
-    var isHandToolActive = false;
+    this.previousContainerHeight = null;
-    this.eventBus.on('handtoolchanged', function (e) {
+    this.newContainerHeight = null;
-      if (isHandToolActive === e.isActive) {
+    this.buttonContainer = this.toolbar.firstElementChild;
+
+    // Bind the event listeners for click and hand tool actions.
+    this._bindClickListeners();
+    this._bindHandToolListener(options.toggleHandToolButton);
+  }
+
+  SecondaryToolbar.prototype = {
+    /**
+     * @return {boolean}
+     */
+    get isOpen() {
+      return this.opened;
+    },
+
+    _bindClickListeners: function SecondaryToolbar_bindClickListeners() {
+      // Button to toggle the visibility of the secondary toolbar.
+      this.toggleButton.addEventListener('click', this.toggle.bind(this));
+
+      // All items within the secondary toolbar.
+      for (var button in this.buttons) {
+        var element = this.buttons[button].element;
+        var eventName = this.buttons[button].eventName;
+        var close = this.buttons[button].close;
+
+        element.addEventListener('click', function (eventName, close) {
+          if (eventName !== null) {
+            this.eventBus.dispatch(eventName);
+          }
+          if (close) {
+            this.close();
+          }
+        }.bind(this, eventName, close));
+      }
+    },
+
+    _bindHandToolListener:
+        function SecondaryToolbar_bindHandToolListener(toggleHandToolButton) {
+      var isHandToolActive = false;
+      this.eventBus.on('handtoolchanged', function (e) {
+        if (isHandToolActive === e.isActive) {
+          return;
+        }
+        isHandToolActive = e.isActive;
+        if (isHandToolActive) {
+          toggleHandToolButton.title =
+            mozL10n.get('hand_tool_disable.title', null, 'Disable hand tool');
+          toggleHandToolButton.firstElementChild.textContent =
+            mozL10n.get('hand_tool_disable_label', null, 'Disable hand tool');
+        } else {
+          toggleHandToolButton.title =
+            mozL10n.get('hand_tool_enable.title', null, 'Enable hand tool');
+          toggleHandToolButton.firstElementChild.textContent =
+            mozL10n.get('hand_tool_enable_label', null, 'Enable hand tool');
+        }
+      }.bind(this));
+    },
+
+    open: function SecondaryToolbar_open() {
+      if (this.opened) {
         return;
       }
-      isHandToolActive = e.isActive;
+      this.opened = true;
-      if (isHandToolActive) {
+      this.toggleButton.classList.add('toggled');
-        this.toggleHandTool.title =
+      this.toolbar.classList.remove('hidden');
-          mozL10n.get('hand_tool_disable.title', null, 'Disable hand tool');
+    },
-        this.toggleHandTool.firstElementChild.textContent =
+
-          mozL10n.get('hand_tool_disable_label', null, 'Disable hand tool');
+    close: function SecondaryToolbar_close() {
-      } else {
+      if (!this.opened) {
-        this.toggleHandTool.title =
+        return;
-          mozL10n.get('hand_tool_enable.title', null, 'Enable hand tool');
-        this.toggleHandTool.firstElementChild.textContent =
-          mozL10n.get('hand_tool_enable_label', null, 'Enable hand tool');
       }
-    }.bind(this));
+      this.opened = false;
-  },
+      this.toolbar.classList.add('hidden');
+      this.toggleButton.classList.remove('toggled');
+    },
 
-  // Event handling functions.
+    toggle: function SecondaryToolbar_toggle() {
-  presentationModeClick: function secondaryToolbarPresentationModeClick(evt) {
+      if (this.opened) {
-    this.eventBus.dispatch('presentationmode');
+        this.close();
-    this.close();
+      } else {
-  },
+        this.open();
+      }
+    },
 
-  openFileClick: function secondaryToolbarOpenFileClick(evt) {
+    setMaxHeight: function SecondaryToolbar_setMaxHeight(container) {
-    this.eventBus.dispatch('openfile');
+      if (!container || !this.buttonContainer) {
-    this.close();
+        return;
-  },
+      }
-
+      this.newContainerHeight = container.clientHeight;
-  printClick: function secondaryToolbarPrintClick(evt) {
+      if (this.previousContainerHeight === this.newContainerHeight) {
-    this.eventBus.dispatch('print');
+        return;
-    this.close();
+      }
-  },
+      var maxHeight = this.newContainerHeight - SCROLLBAR_PADDING;
-
+      this.buttonContainer.setAttribute('style',
-  downloadClick: function secondaryToolbarDownloadClick(evt) {
+        'max-height: ' + maxHeight + 'px;');
-    this.eventBus.dispatch('download');
+      this.previousContainerHeight = this.newContainerHeight;
-    this.close();
-  },
-
-  viewBookmarkClick: function secondaryToolbarViewBookmarkClick(evt) {
-    this.close();
-  },
-
-  firstPageClick: function secondaryToolbarFirstPageClick(evt) {
-    this.eventBus.dispatch('firstpage');
-    this.close();
-  },
-
-  lastPageClick: function secondaryToolbarLastPageClick(evt) {
-    this.eventBus.dispatch('lastpage');
-    this.close();
-  },
-
-  pageRotateCwClick: function secondaryToolbarPageRotateCwClick(evt) {
-    this.eventBus.dispatch('rotatecw');
-  },
-
-  pageRotateCcwClick: function secondaryToolbarPageRotateCcwClick(evt) {
-    this.eventBus.dispatch('rotateccw');
-  },
-
-  toggleHandToolClick: function secondaryToolbarToggleHandToolClick(evt) {
-    this.eventBus.dispatch('togglehandtool');
-    this.close();
-  },
-
-  documentPropertiesClick: function secondaryToolbarDocumentPropsClick(evt) {
-    this.eventBus.dispatch('documentproperties');
-    this.close();
-  },
-
-  // Misc. functions for interacting with the toolbar.
-  setMaxHeight: function secondaryToolbarSetMaxHeight(container) {
-    if (!container || !this.buttonContainer) {
-      return;
     }
-    this.newContainerHeight = container.clientHeight;
+  };
-    if (this.previousContainerHeight === this.newContainerHeight) {
-      return;
-    }
-    this.buttonContainer.setAttribute('style',
-      'max-height: ' + (this.newContainerHeight - SCROLLBAR_PADDING) + 'px;');
-    this.previousContainerHeight = this.newContainerHeight;
-  },
 
-  open: function secondaryToolbarOpen() {
+  return SecondaryToolbar;
-    if (this.opened) {
+})();
-      return;
-    }
-    this.opened = true;
-    this.toggleButton.classList.add('toggled');
-    this.toolbar.classList.remove('hidden');
-  },
-
-  close: function secondaryToolbarClose(target) {
-    if (!this.opened) {
-      return;
-    } else if (target && !this.toolbar.contains(target)) {
-      return;
-    }
-    this.opened = false;
-    this.toolbar.classList.add('hidden');
-    this.toggleButton.classList.remove('toggled');
-  },
-
-  toggle: function secondaryToolbarToggle() {
-    if (this.opened) {
-      this.close();
-    } else {
-      this.open();
-    }
-  }
-};
 
 exports.SecondaryToolbar = SecondaryToolbar;
 }));

web/viewer.js

@@ -81,16 +81,16 @@ function getViewerConfiguration() {
       toggleButton: document.getElementById('secondaryToolbarToggle'),
       presentationModeButton:
         document.getElementById('secondaryPresentationMode'),
-      openFile: document.getElementById('secondaryOpenFile'),
+      openFileButton: document.getElementById('secondaryOpenFile'),
-      print: document.getElementById('secondaryPrint'),
+      printButton: document.getElementById('secondaryPrint'),
-      download: document.getElementById('secondaryDownload'),
+      downloadButton: document.getElementById('secondaryDownload'),
-      viewBookmark: document.getElementById('secondaryViewBookmark'),
+      viewBookmarkButton: document.getElementById('secondaryViewBookmark'),
-      firstPage: document.getElementById('firstPage'),
+      firstPageButton: document.getElementById('firstPage'),
-      lastPage: document.getElementById('lastPage'),
+      lastPageButton: document.getElementById('lastPage'),
-      pageRotateCw: document.getElementById('pageRotateCw'),
+      pageRotateCwButton: document.getElementById('pageRotateCw'),
-      pageRotateCcw: document.getElementById('pageRotateCcw'),
+      pageRotateCcwButton: document.getElementById('pageRotateCcw'),
+      toggleHandToolButton: document.getElementById('toggleHandTool'),
       documentPropertiesButton: document.getElementById('documentProperties'),
-      toggleHandTool: document.getElementById('toggleHandTool'),
     },
     fullscreen: {
       contextFirstPage: document.getElementById('contextFirstPage'),