pdfjs-dist 2.0.943 → 2.4.456

package/lib/web/toolbar.js

@@ -2,7 +2,7 @@
  * @licstart The following is the entire license notice for the
  * Javascript code in this page
  *
- * Copyright 2018 Mozilla Foundation
+ * Copyright 2020 Mozilla Foundation
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,220 +19,267 @@
  * @licend The above is the entire license notice for the
  * Javascript code in this page
  */
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Toolbar = undefined;
+exports.Toolbar = void 0;
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _ui_utils = require("./ui_utils.js");
 
-var _ui_utils = require('./ui_utils');
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var PAGE_NUMBER_LOADING_INDICATOR = 'visiblePageIsLoading';
-var SCALE_SELECT_CONTAINER_PADDING = 8;
-var SCALE_SELECT_PADDING = 22;
-
-var Toolbar = function () {
-  function Toolbar(options, eventBus) {
-    var l10n = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _ui_utils.NullL10n;
-
-    _classCallCheck(this, Toolbar);
+const PAGE_NUMBER_LOADING_INDICATOR = "visiblePageIsLoading";
+const SCALE_SELECT_CONTAINER_WIDTH = 140;
+const SCALE_SELECT_WIDTH = 162;
 
+class Toolbar {
+  constructor(options, eventBus, l10n = _ui_utils.NullL10n) {
     this.toolbar = options.container;
     this.eventBus = eventBus;
     this.l10n = l10n;
-    this.items = options;
+    this.buttons = [{
+      element: options.previous,
+      eventName: "previouspage"
+    }, {
+      element: options.next,
+      eventName: "nextpage"
+    }, {
+      element: options.zoomIn,
+      eventName: "zoomin"
+    }, {
+      element: options.zoomOut,
+      eventName: "zoomout"
+    }, {
+      element: options.openFile,
+      eventName: "openfile"
+    }, {
+      element: options.print,
+      eventName: "print"
+    }, {
+      element: options.presentationModeButton,
+      eventName: "presentationmode"
+    }, {
+      element: options.download,
+      eventName: "download"
+    }, {
+      element: options.viewBookmark,
+      eventName: null
+    }];
+    this.items = {
+      numPages: options.numPages,
+      pageNumber: options.pageNumber,
+      scaleSelectContainer: options.scaleSelectContainer,
+      scaleSelect: options.scaleSelect,
+      customScaleOption: options.customScaleOption,
+      previous: options.previous,
+      next: options.next,
+      zoomIn: options.zoomIn,
+      zoomOut: options.zoomOut
+    };
     this._wasLocalized = false;
     this.reset();
+
     this._bindListeners();
   }
 
-  _createClass(Toolbar, [{
-    key: 'setPageNumber',
-    value: function setPageNumber(pageNumber, pageLabel) {
-      this.pageNumber = pageNumber;
-      this.pageLabel = pageLabel;
-      this._updateUIState(false);
-    }
-  }, {
-    key: 'setPagesCount',
-    value: function setPagesCount(pagesCount, hasPageLabels) {
-      this.pagesCount = pagesCount;
-      this.hasPageLabels = hasPageLabels;
-      this._updateUIState(true);
-    }
-  }, {
-    key: 'setPageScale',
-    value: function setPageScale(pageScaleValue, pageScale) {
-      this.pageScaleValue = (pageScaleValue || pageScale).toString();
-      this.pageScale = pageScale;
-      this._updateUIState(false);
-    }
-  }, {
-    key: 'reset',
-    value: function reset() {
-      this.pageNumber = 0;
-      this.pageLabel = null;
-      this.hasPageLabels = false;
-      this.pagesCount = 0;
-      this.pageScaleValue = _ui_utils.DEFAULT_SCALE_VALUE;
-      this.pageScale = _ui_utils.DEFAULT_SCALE;
-      this._updateUIState(true);
-    }
-  }, {
-    key: '_bindListeners',
-    value: function _bindListeners() {
-      var _this = this;
+  setPageNumber(pageNumber, pageLabel) {
+    this.pageNumber = pageNumber;
+    this.pageLabel = pageLabel;
 
-      var eventBus = this.eventBus,
-          items = this.items;
+    this._updateUIState(false);
+  }
 
-      var self = this;
-      items.previous.addEventListener('click', function () {
-        eventBus.dispatch('previouspage', { source: self });
-      });
-      items.next.addEventListener('click', function () {
-        eventBus.dispatch('nextpage', { source: self });
-      });
-      items.zoomIn.addEventListener('click', function () {
-        eventBus.dispatch('zoomin', { source: self });
-      });
-      items.zoomOut.addEventListener('click', function () {
-        eventBus.dispatch('zoomout', { source: self });
-      });
-      items.pageNumber.addEventListener('click', function () {
-        this.select();
-      });
-      items.pageNumber.addEventListener('change', function () {
-        eventBus.dispatch('pagenumberchanged', {
-          source: self,
-          value: this.value
-        });
-      });
-      items.scaleSelect.addEventListener('change', function () {
-        if (this.value === 'custom') {
-          return;
+  setPagesCount(pagesCount, hasPageLabels) {
+    this.pagesCount = pagesCount;
+    this.hasPageLabels = hasPageLabels;
+
+    this._updateUIState(true);
+  }
+
+  setPageScale(pageScaleValue, pageScale) {
+    this.pageScaleValue = (pageScaleValue || pageScale).toString();
+    this.pageScale = pageScale;
+
+    this._updateUIState(false);
+  }
+
+  reset() {
+    this.pageNumber = 0;
+    this.pageLabel = null;
+    this.hasPageLabels = false;
+    this.pagesCount = 0;
+    this.pageScaleValue = _ui_utils.DEFAULT_SCALE_VALUE;
+    this.pageScale = _ui_utils.DEFAULT_SCALE;
+
+    this._updateUIState(true);
+
+    this.updateLoadingIndicatorState();
+  }
+
+  _bindListeners() {
+    const {
+      pageNumber,
+      scaleSelect
+    } = this.items;
+    const self = this;
+
+    for (const {
+      element,
+      eventName
+    } of this.buttons) {
+      element.addEventListener("click", evt => {
+        if (eventName !== null) {
+          this.eventBus.dispatch(eventName, {
+            source: this
+          });
         }
-        eventBus.dispatch('scalechanged', {
-          source: self,
-          value: this.value
-        });
-      });
-      items.presentationModeButton.addEventListener('click', function () {
-        eventBus.dispatch('presentationmode', { source: self });
-      });
-      items.openFile.addEventListener('click', function () {
-        eventBus.dispatch('openfile', { source: self });
-      });
-      items.print.addEventListener('click', function () {
-        eventBus.dispatch('print', { source: self });
       });
-      items.download.addEventListener('click', function () {
-        eventBus.dispatch('download', { source: self });
+    }
+
+    pageNumber.addEventListener("click", function () {
+      this.select();
+    });
+    pageNumber.addEventListener("change", function () {
+      self.eventBus.dispatch("pagenumberchanged", {
+        source: self,
+        value: this.value
       });
-      items.scaleSelect.oncontextmenu = _ui_utils.noContextMenuHandler;
-      eventBus.on('localized', function () {
-        _this._localized();
+    });
+    scaleSelect.addEventListener("change", function () {
+      if (this.value === "custom") {
+        return;
+      }
+
+      self.eventBus.dispatch("scalechanged", {
+        source: self,
+        value: this.value
       });
-    }
-  }, {
-    key: '_localized',
-    value: function _localized() {
+    });
+    scaleSelect.oncontextmenu = _ui_utils.noContextMenuHandler;
+
+    this.eventBus._on("localized", () => {
       this._wasLocalized = true;
+
       this._adjustScaleWidth();
+
       this._updateUIState(true);
+    });
+  }
+
+  _updateUIState(resetNumPages = false) {
+    if (!this._wasLocalized) {
+      return;
     }
-  }, {
-    key: '_updateUIState',
-    value: function _updateUIState() {
-      var resetNumPages = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
-      if (!this._wasLocalized) {
-        return;
-      }
-      var pageNumber = this.pageNumber,
-          pagesCount = this.pagesCount,
-          pageScaleValue = this.pageScaleValue,
-          pageScale = this.pageScale,
-          items = this.items;
-
-      if (resetNumPages) {
-        if (this.hasPageLabels) {
-          items.pageNumber.type = 'text';
-        } else {
-          items.pageNumber.type = 'number';
-          this.l10n.get('of_pages', { pagesCount: pagesCount }, 'of {{pagesCount}}').then(function (msg) {
-            items.numPages.textContent = msg;
-          });
-        }
-        items.pageNumber.max = pagesCount;
-      }
+    const {
+      pageNumber,
+      pagesCount,
+      pageScaleValue,
+      pageScale,
+      items
+    } = this;
+
+    if (resetNumPages) {
       if (this.hasPageLabels) {
-        items.pageNumber.value = this.pageLabel;
-        this.l10n.get('page_of_pages', {
-          pageNumber: pageNumber,
-          pagesCount: pagesCount
-        }, '({{pageNumber}} of {{pagesCount}})').then(function (msg) {
+        items.pageNumber.type = "text";
+      } else {
+        items.pageNumber.type = "number";
+        this.l10n.get("of_pages", {
+          pagesCount
+        }, "of {{pagesCount}}").then(msg => {
           items.numPages.textContent = msg;
         });
-      } else {
-        items.pageNumber.value = pageNumber;
       }
-      items.previous.disabled = pageNumber <= 1;
-      items.next.disabled = pageNumber >= pagesCount;
-      items.zoomOut.disabled = pageScale <= _ui_utils.MIN_SCALE;
-      items.zoomIn.disabled = pageScale >= _ui_utils.MAX_SCALE;
-      var customScale = Math.round(pageScale * 10000) / 100;
-      this.l10n.get('page_scale_percent', { scale: customScale }, '{{scale}}%').then(function (msg) {
-        var options = items.scaleSelect.options;
-        var predefinedValueFound = false;
-        for (var i = 0, ii = options.length; i < ii; i++) {
-          var option = options[i];
-          if (option.value !== pageScaleValue) {
-            option.selected = false;
-            continue;
-          }
-          option.selected = true;
-          predefinedValueFound = true;
-        }
-        if (!predefinedValueFound) {
-          items.customScaleOption.textContent = msg;
-          items.customScaleOption.selected = true;
-        }
-      });
+
+      items.pageNumber.max = pagesCount;
     }
-  }, {
-    key: 'updateLoadingIndicatorState',
-    value: function updateLoadingIndicatorState() {
-      var loading = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
-      var pageNumberInput = this.items.pageNumber;
-      pageNumberInput.classList.toggle(PAGE_NUMBER_LOADING_INDICATOR, loading);
+    if (this.hasPageLabels) {
+      items.pageNumber.value = this.pageLabel;
+      this.l10n.get("page_of_pages", {
+        pageNumber,
+        pagesCount
+      }, "({{pageNumber}} of {{pagesCount}})").then(msg => {
+        items.numPages.textContent = msg;
+      });
+    } else {
+      items.pageNumber.value = pageNumber;
     }
-  }, {
-    key: '_adjustScaleWidth',
-    value: function _adjustScaleWidth() {
-      var container = this.items.scaleSelectContainer;
-      var select = this.items.scaleSelect;
-      _ui_utils.animationStarted.then(function () {
-        if (container.clientWidth === 0) {
-          container.setAttribute('style', 'display: inherit;');
-        }
-        if (container.clientWidth > 0) {
-          select.setAttribute('style', 'min-width: inherit;');
-          var 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;');
+
+    items.previous.disabled = pageNumber <= 1;
+    items.next.disabled = pageNumber >= pagesCount;
+    items.zoomOut.disabled = pageScale <= _ui_utils.MIN_SCALE;
+    items.zoomIn.disabled = pageScale >= _ui_utils.MAX_SCALE;
+    const customScale = Math.round(pageScale * 10000) / 100;
+    this.l10n.get("page_scale_percent", {
+      scale: customScale
+    }, "{{scale}}%").then(msg => {
+      let predefinedValueFound = false;
+
+      for (const option of items.scaleSelect.options) {
+        if (option.value !== pageScaleValue) {
+          option.selected = false;
+          continue;
         }
-      });
+
+        option.selected = true;
+        predefinedValueFound = true;
+      }
+
+      if (!predefinedValueFound) {
+        items.customScaleOption.textContent = msg;
+        items.customScaleOption.selected = true;
+      }
+    });
+  }
+
+  updateLoadingIndicatorState(loading = false) {
+    const pageNumberInput = this.items.pageNumber;
+    pageNumberInput.classList.toggle(PAGE_NUMBER_LOADING_INDICATOR, loading);
+  }
+
+  async _adjustScaleWidth() {
+    const {
+      items,
+      l10n
+    } = this;
+    const predefinedValuesPromise = Promise.all([l10n.get("page_scale_auto", null, "Automatic Zoom"), l10n.get("page_scale_actual", null, "Actual Size"), l10n.get("page_scale_fit", null, "Page Fit"), l10n.get("page_scale_width", null, "Page Width")]);
+    let canvas = document.createElement("canvas");
+    canvas.mozOpaque = true;
+    let ctx = canvas.getContext("2d", {
+      alpha: false
+    });
+    await _ui_utils.animationStarted;
+    const {
+      fontSize,
+      fontFamily
+    } = getComputedStyle(items.scaleSelect);
+    ctx.font = `${fontSize} ${fontFamily}`;
+    let maxWidth = 0;
+
+    for (const predefinedValue of await predefinedValuesPromise) {
+      const {
+        width
+      } = ctx.measureText(predefinedValue);
+
+      if (width > maxWidth) {
+        maxWidth = width;
+      }
     }
-  }]);
 
-  return Toolbar;
-}();
+    const overflow = SCALE_SELECT_WIDTH - SCALE_SELECT_CONTAINER_WIDTH;
+    maxWidth += 1.5 * overflow;
+
+    if (maxWidth > SCALE_SELECT_CONTAINER_WIDTH) {
+      items.scaleSelect.style.width = `${maxWidth + overflow}px`;
+      items.scaleSelectContainer.style.width = `${maxWidth}px`;
+    }
+
+    canvas.width = 0;
+    canvas.height = 0;
+    canvas = ctx = null;
+  }
+
+}
 
 exports.Toolbar = Toolbar;