Convert the secondary toolbar to ES6 syntax

web/secondary_toolbar.js

@@ -45,17 +45,13 @@ import { mozL10n, SCROLLBAR_PADDING } from './ui_utils';
  *   the document properties dialog.
  */
 
-/**
+class SecondaryToolbar {
- * @class
- */
-var SecondaryToolbar = (function SecondaryToolbarClosure() {
   /**
-   * @constructs SecondaryToolbar
    * @param {SecondaryToolbarOptions} options
    * @param {HTMLDivElement} mainContainer
    * @param {EventBus} eventBus
    */
-  function SecondaryToolbar(options, mainContainer, eventBus) {
+  constructor(options, mainContainer, eventBus) {
     this.toolbar = options.toolbar;
     this.toggleButton = options.toggleButton;
     this.toolbarButtonContainer = options.toolbarButtonContainer;
@@ -101,129 +97,124 @@ var SecondaryToolbar = (function SecondaryToolbarClosure() {
     this.eventBus.on('resize', this._setMaxHeight.bind(this));
   }
 
-  SecondaryToolbar.prototype = {
+  /**
-    /**
+   * @return {boolean}
-     * @return {boolean}
+   */
-     */
+  get isOpen() {
-    get isOpen() {
+    return this.opened;
-      return this.opened;
+  }
-    },
+
-
+  setPageNumber(pageNumber) {
-    setPageNumber: function SecondaryToolbar_setPageNumber(pageNumber) {
+    this.pageNumber = pageNumber;
-      this.pageNumber = pageNumber;
+    this._updateUIState();
-      this._updateUIState();
+  }
-    },
+
-
+  setPagesCount(pagesCount) {
-    setPagesCount: function SecondaryToolbar_setPagesCount(pagesCount) {
+    this.pagesCount = pagesCount;
-      this.pagesCount = pagesCount;
+    this._updateUIState();
-      this._updateUIState();
+  }
-    },
+
-
+  reset() {
-    reset: function SecondaryToolbar_reset() {
+    this.pageNumber = 0;
-      this.pageNumber = 0;
+    this.pagesCount = 0;
-      this.pagesCount = 0;
+    this._updateUIState();
-      this._updateUIState();
+  }
-    },
+
-
+  _updateUIState() {
-    _updateUIState: function SecondaryToolbar_updateUIState() {
+    this.items.firstPage.disabled = (this.pageNumber <= 1);
-      var items = this.items;
+    this.items.lastPage.disabled = (this.pageNumber >= this.pagesCount);
-
+    this.items.pageRotateCw.disabled = this.pagesCount === 0;
-      items.firstPage.disabled = (this.pageNumber <= 1);
+    this.items.pageRotateCcw.disabled = this.pagesCount === 0;
-      items.lastPage.disabled = (this.pageNumber >= this.pagesCount);
+  }
-      items.pageRotateCw.disabled = this.pagesCount === 0;
+
-      items.pageRotateCcw.disabled = this.pagesCount === 0;
+  _bindClickListeners() {
-    },
+    // Button to toggle the visibility of the secondary toolbar.
-
+    this.toggleButton.addEventListener('click', this.toggle.bind(this));
-    _bindClickListeners: function SecondaryToolbar_bindClickListeners() {
+
-      // Button to toggle the visibility of the secondary toolbar.
+    // All items within the secondary toolbar.
-      this.toggleButton.addEventListener('click', this.toggle.bind(this));
+    for (let button in this.buttons) {
-
+      let { element, eventName, close, } = this.buttons[button];
-      // All items within the secondary toolbar.
+
-      for (let button in this.buttons) {
+      element.addEventListener('click', (evt) => {
-        let { element, eventName, close, } = this.buttons[button];
+        if (eventName !== null) {
-
+          this.eventBus.dispatch(eventName, { source: this, });
-        element.addEventListener('click', (evt) => {
-          if (eventName !== null) {
-            this.eventBus.dispatch(eventName, { source: this, });
-          }
-          if (close) {
-            this.close();
-          }
-        });
-      }
-    },
-
-    _bindHandToolListener:
-        function SecondaryToolbar_bindHandToolListener(toggleHandToolButton) {
-      var isHandToolActive = false;
-      this.eventBus.on('handtoolchanged', function (e) {
-        if (isHandToolActive === e.isActive) {
-          return;
         }
-        isHandToolActive = e.isActive;
+        if (close) {
-        if (isHandToolActive) {
+          this.close();
-          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');
         }
       });
-    },
+    }
-
+  }
-    open: function SecondaryToolbar_open() {
-      if (this.opened) {
-        return;
-      }
-      this.opened = true;
-      this._setMaxHeight();
 
-      this.toggleButton.classList.add('toggled');
+  _bindHandToolListener(toggleHandToolButton) {
-      this.toolbar.classList.remove('hidden');
+    let isHandToolActive = false;
-    },
 
-    close: function SecondaryToolbar_close() {
+    this.eventBus.on('handtoolchanged', function(evt) {
-      if (!this.opened) {
+      if (isHandToolActive === evt.isActive) {
         return;
       }
-      this.opened = false;
+      isHandToolActive = evt.isActive;
-      this.toolbar.classList.add('hidden');
+
-      this.toggleButton.classList.remove('toggled');
+      if (isHandToolActive) {
-    },
+        toggleHandToolButton.title =
-
+          mozL10n.get('hand_tool_disable.title', null, 'Disable hand tool');
-    toggle: function SecondaryToolbar_toggle() {
+        toggleHandToolButton.firstElementChild.textContent =
-      if (this.opened) {
+          mozL10n.get('hand_tool_disable_label', null, 'Disable hand tool');
-        this.close();
       } else {
-        this.open();
+        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');
-    /**
-     * @private
-     */
-    _setMaxHeight: function SecondaryToolbar_setMaxHeight() {
-      if (!this.opened) {
-        return; // Only adjust the 'max-height' if the toolbar is visible.
       }
-      this.containerHeight = this.mainContainer.clientHeight;
+    });
+  }
 
-      if (this.containerHeight === this.previousContainerHeight) {
+  open() {
-        return;
+    if (this.opened) {
-      }
+      return;
-      this.toolbarButtonContainer.setAttribute('style',
+    }
-        'max-height: ' + (this.containerHeight - SCROLLBAR_PADDING) + 'px;');
+    this.opened = true;
+    this._setMaxHeight();
+
+    this.toggleButton.classList.add('toggled');
+    this.toolbar.classList.remove('hidden');
+  }
 
-      this.previousContainerHeight = this.containerHeight;
+  close() {
+    if (!this.opened) {
+      return;
     }
-  };
+    this.opened = false;
+    this.toolbar.classList.add('hidden');
+    this.toggleButton.classList.remove('toggled');
+  }
 
-  return SecondaryToolbar;
+  toggle() {
-})();
+    if (this.opened) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  /**
+   * @private
+   */
+  _setMaxHeight() {
+    if (!this.opened) {
+      return; // Only adjust the 'max-height' if the toolbar is visible.
+    }
+    this.containerHeight = this.mainContainer.clientHeight;
+
+    if (this.containerHeight === this.previousContainerHeight) {
+      return;
+    }
+    this.toolbarButtonContainer.setAttribute('style',
+      'max-height: ' + (this.containerHeight - SCROLLBAR_PADDING) + 'px;');
+
+    this.previousContainerHeight = this.containerHeight;
+  }
+}
 
 export {
   SecondaryToolbar,