Merge pull request #8391 from timvandermeij/es6-web

Convert the hand tool, interfaces and secondary toolbar to ES6 syntax

web/hand_tool.js

@@ -20,20 +20,17 @@ import { localized } from './ui_utils';
  * @typedef {Object} HandToolOptions
  * @property {HTMLDivElement} container - The document container.
  * @property {EventBus} eventBus - The application event bus.
+ * @property {BasePreferences} preferences - Object for reading/writing
+ *                                           persistent settings.
  */
 
-/**
- * @class
- */
-var HandTool = (function HandToolClosure() {
+class HandTool {
   /**
-   * @constructs HandTool
    * @param {HandToolOptions} options
    */
-  function HandTool(options) {
-    this.container = options.container;
-    this.eventBus = options.eventBus;
-    var preferences = options.preferences;
+  constructor({ container, eventBus, preferences, }) {
+    this.container = container;
+    this.eventBus = eventBus;
 
     this.wasActive = false;
 
@@ -46,12 +43,12 @@ var HandTool = (function HandToolClosure() {
 
     this.eventBus.on('togglehandtool', this.toggle.bind(this));
 
-    Promise.all([localized,
-                 preferences.get('enableHandToolOnLoad')]).then((values) => {
+    let enableOnLoad = preferences.get('enableHandToolOnLoad');
+    Promise.all([localized, enableOnLoad]).then((values) => {
       if (values[1] === true) {
         this.handTool.activate();
       }
-    }).catch(function rejected(reason) { });
+    }).catch(function(reason) {});
 
     this.eventBus.on('presentationmodechanged', (evt) => {
       if (evt.switchInProgress) {
@@ -65,35 +62,31 @@ var HandTool = (function HandToolClosure() {
     });
   }
 
-  HandTool.prototype = {
-    /**
-     * @return {boolean}
-     */
-    get isActive() {
-      return !!this.handTool.active;
-    },
-
-    toggle: function HandTool_toggle() {
-      this.handTool.toggle();
-    },
+  /**
+   * @return {boolean}
+   */
+  get isActive() {
+    return !!this.handTool.active;
+  }
 
-    enterPresentationMode: function HandTool_enterPresentationMode() {
-      if (this.isActive) {
-        this.wasActive = true;
-        this.handTool.deactivate();
-      }
-    },
+  toggle() {
+    this.handTool.toggle();
+  }
 
-    exitPresentationMode: function HandTool_exitPresentationMode() {
-      if (this.wasActive) {
-        this.wasActive = false;
-        this.handTool.activate();
-      }
+  enterPresentationMode() {
+    if (this.isActive) {
+      this.wasActive = true;
+      this.handTool.deactivate();
     }
-  };
+  }
 
-  return HandTool;
-})();
+  exitPresentationMode() {
+    if (this.wasActive) {
+      this.wasActive = false;
+      this.handTool.activate();
+    }
+  }
+}
 
 export {
   HandTool,

web/interfaces.js

@@ -19,82 +19,87 @@
 /**
  * @interface
  */
-function IPDFLinkService() {}
-IPDFLinkService.prototype = {
+class IPDFLinkService {
   /**
    * @returns {number}
    */
-  get page() {},
+  get page() {}
+
   /**
    * @param {number} value
    */
-  set page(value) {},
+  set page(value) {}
+
   /**
    * @param dest - The PDF destination object.
    */
-  navigateTo(dest) {},
+  navigateTo(dest) {}
+
   /**
    * @param dest - The PDF destination object.
    * @returns {string} The hyperlink to the PDF object.
    */
-  getDestinationHash(dest) {},
+  getDestinationHash(dest) {}
+
   /**
    * @param hash - The PDF parameters/hash.
    * @returns {string} The hyperlink to the PDF object.
    */
-  getAnchorUrl(hash) {},
+  getAnchorUrl(hash) {}
+
   /**
    * @param {string} hash
    */
-  setHash(hash) {},
+  setHash(hash) {}
+
   /**
    * @param {string} action
    */
-  executeNamedAction(action) {},
+  executeNamedAction(action) {}
 
   /**
    * @param {number} pageNum - page number.
    * @param {Object} pageRef - reference to the page.
    */
-  cachePageRef(pageNum, pageRef) {},
-};
+  cachePageRef(pageNum, pageRef) {}
+}
 
 /**
  * @interface
  */
-function IPDFHistory() {}
-IPDFHistory.prototype = {
-  forward() {},
-  back() {},
-  push(params) {},
-  updateNextHashParam(hash) {},
-};
+class IPDFHistory {
+  forward() {}
+  back() {}
+  push(params) {}
+  updateNextHashParam(hash) {}
+}
 
 /**
  * @interface
  */
-function IRenderableView() {}
-IRenderableView.prototype = {
+class IRenderableView {
   /**
    * @returns {string} - Unique ID for rendering queue.
    */
-  get renderingId() {},
+  get renderingId() {}
+
   /**
    * @returns {RenderingStates}
    */
-  get renderingState() {},
+  get renderingState() {}
+
   /**
    * @returns {Promise} Resolved on draw completion.
    */
-  draw() {},
-  resume() {},
-};
+  draw() {}
+
+  resume() {}
+}
 
 /**
  * @interface
  */
-function IPDFTextLayerFactory() {}
-IPDFTextLayerFactory.prototype = {
+class IPDFTextLayerFactory {
   /**
    * @param {HTMLDivElement} textLayerDiv
    * @param {number} pageIndex
@@ -104,7 +109,7 @@ IPDFTextLayerFactory.prototype = {
    */
   createTextLayerBuilder(textLayerDiv, pageIndex, viewport,
                          enhanceTextSelection = false) {}
-};
+}
 
 /**
  * @interface

web/secondary_toolbar.js

@@ -45,17 +45,13 @@ import { mozL10n, SCROLLBAR_PADDING } from './ui_utils';
  *   the document properties dialog.
  */
 
-/**
- * @class
- */
-var SecondaryToolbar = (function SecondaryToolbarClosure() {
+class SecondaryToolbar {
   /**
-   * @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}
-     */
-    get isOpen() {
-      return this.opened;
-    },
-
-    setPageNumber: function SecondaryToolbar_setPageNumber(pageNumber) {
-      this.pageNumber = pageNumber;
-      this._updateUIState();
-    },
-
-    setPagesCount: function SecondaryToolbar_setPagesCount(pagesCount) {
-      this.pagesCount = pagesCount;
-      this._updateUIState();
-    },
-
-    reset: function SecondaryToolbar_reset() {
-      this.pageNumber = 0;
-      this.pagesCount = 0;
-      this._updateUIState();
-    },
-
-    _updateUIState: function SecondaryToolbar_updateUIState() {
-      var items = this.items;
-
-      items.firstPage.disabled = (this.pageNumber <= 1);
-      items.lastPage.disabled = (this.pageNumber >= this.pagesCount);
-      items.pageRotateCw.disabled = this.pagesCount === 0;
-      items.pageRotateCcw.disabled = this.pagesCount === 0;
-    },
-
-    _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 (let button in this.buttons) {
-        let { element, eventName, close, } = this.buttons[button];
-
-        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;
+  /**
+   * @return {boolean}
+   */
+  get isOpen() {
+    return this.opened;
+  }
+
+  setPageNumber(pageNumber) {
+    this.pageNumber = pageNumber;
+    this._updateUIState();
+  }
+
+  setPagesCount(pagesCount) {
+    this.pagesCount = pagesCount;
+    this._updateUIState();
+  }
+
+  reset() {
+    this.pageNumber = 0;
+    this.pagesCount = 0;
+    this._updateUIState();
+  }
+
+  _updateUIState() {
+    this.items.firstPage.disabled = (this.pageNumber <= 1);
+    this.items.lastPage.disabled = (this.pageNumber >= this.pagesCount);
+    this.items.pageRotateCw.disabled = this.pagesCount === 0;
+    this.items.pageRotateCcw.disabled = this.pagesCount === 0;
+  }
+
+  _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 (let button in this.buttons) {
+      let { element, eventName, close, } = this.buttons[button];
+
+      element.addEventListener('click', (evt) => {
+        if (eventName !== null) {
+          this.eventBus.dispatch(eventName, { source: this, });
         }
-        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');
+        if (close) {
+          this.close();
         }
       });
-    },
-
-    open: function SecondaryToolbar_open() {
-      if (this.opened) {
-        return;
-      }
-      this.opened = true;
-      this._setMaxHeight();
+    }
+  }
 
-      this.toggleButton.classList.add('toggled');
-      this.toolbar.classList.remove('hidden');
-    },
+  _bindHandToolListener(toggleHandToolButton) {
+    let isHandToolActive = false;
 
-    close: function SecondaryToolbar_close() {
-      if (!this.opened) {
+    this.eventBus.on('handtoolchanged', function(evt) {
+      if (isHandToolActive === evt.isActive) {
         return;
       }
-      this.opened = false;
-      this.toolbar.classList.add('hidden');
-      this.toggleButton.classList.remove('toggled');
-    },
-
-    toggle: function SecondaryToolbar_toggle() {
-      if (this.opened) {
-        this.close();
+      isHandToolActive = evt.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 {
-        this.open();
-      }
-    },
-
-    /**
-     * @private
-     */
-    _setMaxHeight: function SecondaryToolbar_setMaxHeight() {
-      if (!this.opened) {
-        return; // Only adjust the 'max-height' if the toolbar is visible.
+        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');
       }
-      this.containerHeight = this.mainContainer.clientHeight;
+    });
+  }
 
-      if (this.containerHeight === this.previousContainerHeight) {
-        return;
-      }
-      this.toolbarButtonContainer.setAttribute('style',
-        'max-height: ' + (this.containerHeight - SCROLLBAR_PADDING) + 'px;');
+  open() {
+    if (this.opened) {
+      return;
+    }
+    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,