Convert the toolbar to ES6 syntax

web/toolbar.js

@@ -18,9 +18,9 @@ import {
   MIN_SCALE, noContextMenuHandler, NullL10n
 } from './ui_utils';
 
-var PAGE_NUMBER_LOADING_INDICATOR = 'visiblePageIsLoading';
+const PAGE_NUMBER_LOADING_INDICATOR = 'visiblePageIsLoading';
-var SCALE_SELECT_CONTAINER_PADDING = 8;
+const SCALE_SELECT_CONTAINER_PADDING = 8;
-var SCALE_SELECT_PADDING = 22;
+const SCALE_SELECT_PADDING = 22;
 
 /**
  * @typedef {Object} ToolbarOptions
@@ -46,18 +46,14 @@ var SCALE_SELECT_PADDING = 22;
  *   the page view.
  */
 
-/**
+class Toolbar {
- * @class
- */
-var Toolbar = (function ToolbarClosure() {
   /**
-   * @constructs Toolbar
    * @param {ToolbarOptions} options
    * @param {HTMLDivElement} mainContainer
    * @param {EventBus} eventBus
    * @param {IL10n} l10n - Localization service.
    */
-  function Toolbar(options, mainContainer, eventBus, l10n = NullL10n) {
+  constructor(options, mainContainer, eventBus, l10n = NullL10n) {
     this.toolbar = options.container;
     this.mainContainer = mainContainer;
     this.eventBus = eventBus;
@@ -71,24 +67,23 @@ var Toolbar = (function ToolbarClosure() {
     this._bindListeners();
   }
 
-  Toolbar.prototype = {
   setPageNumber(pageNumber, pageLabel) {
     this.pageNumber = pageNumber;
     this.pageLabel = pageLabel;
     this._updateUIState(false);
-    },
+  }
 
   setPagesCount(pagesCount, hasPageLabels) {
     this.pagesCount = pagesCount;
     this.hasPageLabels = hasPageLabels;
     this._updateUIState(true);
-    },
+  }
 
   setPageScale(pageScaleValue, pageScale) {
     this.pageScaleValue = pageScaleValue;
     this.pageScale = pageScale;
     this._updateUIState(false);
-    },
+  }
 
   reset() {
     this.pageNumber = 0;
@@ -98,12 +93,12 @@ var Toolbar = (function ToolbarClosure() {
     this.pageScaleValue = DEFAULT_SCALE_VALUE;
     this.pageScale = DEFAULT_SCALE;
     this._updateUIState(true);
-    },
+  }
 
-    _bindListeners: function Toolbar_bindClickListeners() {
+  _bindListeners() {
-      var eventBus = this.eventBus;
+    let eventBus = this.eventBus;
-      var self = this;
+    let self = this;
-      var items = this.items;
+    let items = this.items;
 
     items.previous.addEventListener('click', function() {
       eventBus.dispatch('previouspage');
@@ -142,40 +137,39 @@ var Toolbar = (function ToolbarClosure() {
       });
     });
 
-      items.presentationModeButton.addEventListener('click',
+    items.presentationModeButton.addEventListener('click', function() {
-          function (e) {
       eventBus.dispatch('presentationmode');
     });
 
-      items.openFile.addEventListener('click', function (e) {
+    items.openFile.addEventListener('click', function() {
       eventBus.dispatch('openfile');
     });
 
-      items.print.addEventListener('click', function (e) {
+    items.print.addEventListener('click', function() {
       eventBus.dispatch('print');
     });
 
-      items.download.addEventListener('click', function (e) {
+    items.download.addEventListener('click', function() {
       eventBus.dispatch('download');
     });
 
-      // Suppress context menus for some controls
+    // Suppress context menus for some controls.
     items.scaleSelect.oncontextmenu = noContextMenuHandler;
 
-      eventBus.on('localized', (evt) => {
+    eventBus.on('localized', () => {
       this._localized();
     });
-    },
+  }
 
-    _localized: function Toolbar_localized() {
+  _localized() {
     this._wasLocalized = true;
     this._adjustScaleWidth();
     this._updateUIState(true);
-    },
+  }
 
-    _updateUIState: function Toolbar_updateUIState(resetNumPages) {
+  _updateUIState(resetNumPages = false) {
     if (!this._wasLocalized) {
-        // Don't update UI state until we will localize the toolbar.
+      // Don't update the UI state until we localize the toolbar.
       return;
     }
 
@@ -201,12 +195,12 @@ var Toolbar = (function ToolbarClosure() {
       });
     };
 
-      var pageNumber = this.pageNumber;
+    let pageNumber = this.pageNumber;
-      var scaleValue = (this.pageScaleValue || this.pageScale).toString();
+    let scaleValue = (this.pageScaleValue || this.pageScale).toString();
-      var scale = this.pageScale;
+    let scale = this.pageScale;
 
-      var items = this.items;
+    let items = this.items;
-      var pagesCount = this.pagesCount;
+    let pagesCount = this.pagesCount;
 
     if (resetNumPages) {
       if (this.hasPageLabels) {
@@ -239,22 +233,22 @@ var Toolbar = (function ToolbarClosure() {
     items.zoomIn.disabled = (scale >= MAX_SCALE);
 
     selectScaleOption(scaleValue, scale);
-    },
+  }
 
-    updateLoadingIndicatorState:
+  updateLoadingIndicatorState(loading = false) {
-        function Toolbar_updateLoadingIndicatorState(loading) {
+    let pageNumberInput = this.items.pageNumber;
-      var pageNumberInput = this.items.pageNumber;
 
     if (loading) {
       pageNumberInput.classList.add(PAGE_NUMBER_LOADING_INDICATOR);
     } else {
       pageNumberInput.classList.remove(PAGE_NUMBER_LOADING_INDICATOR);
     }
-    },
+  }
+
+  _adjustScaleWidth() {
+    let container = this.items.scaleSelectContainer;
+    let select = this.items.scaleSelect;
 
-    _adjustScaleWidth: function Toolbar_adjustScaleWidth() {
-      var container = this.items.scaleSelectContainer;
-      var select = this.items.scaleSelect;
     animationStarted.then(function() {
       // Adjust the width of the zoom box to fit the content.
       // Note: If the window is narrow enough that the zoom box is not
@@ -264,18 +258,15 @@ var Toolbar = (function ToolbarClosure() {
       }
       if (container.clientWidth > 0) {
         select.setAttribute('style', 'min-width: inherit;');
-          var width = select.clientWidth + SCALE_SELECT_CONTAINER_PADDING;
+        let width = select.clientWidth + SCALE_SELECT_CONTAINER_PADDING;
         select.setAttribute('style', 'min-width: ' +
                                      (width + SCALE_SELECT_PADDING) + 'px;');
         container.setAttribute('style', 'min-width: ' + width + 'px; ' +
                                         'max-width: ' + width + 'px;');
       }
     });
-    },
+  }
-  };
+}
-
-  return Toolbar;
-})();
 
 export {
   Toolbar,