toolbar.js 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. /**
  2. * @licstart The following is the entire license notice for the
  3. * Javascript code in this page
  4. *
  5. * Copyright 2017 Mozilla Foundation
  6. *
  7. * Licensed under the Apache License, Version 2.0 (the "License");
  8. * you may not use this file except in compliance with the License.
  9. * You may obtain a copy of the License at
  10. *
  11. * http://www.apache.org/licenses/LICENSE-2.0
  12. *
  13. * Unless required by applicable law or agreed to in writing, software
  14. * distributed under the License is distributed on an "AS IS" BASIS,
  15. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16. * See the License for the specific language governing permissions and
  17. * limitations under the License.
  18. *
  19. * @licend The above is the entire license notice for the
  20. * Javascript code in this page
  21. */
  22. 'use strict';
  23. Object.defineProperty(exports, "__esModule", {
  24. value: true
  25. });
  26. exports.Toolbar = undefined;
  27. 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; }; }();
  28. var _ui_utils = require('./ui_utils');
  29. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  30. var PAGE_NUMBER_LOADING_INDICATOR = 'visiblePageIsLoading';
  31. var SCALE_SELECT_CONTAINER_PADDING = 8;
  32. var SCALE_SELECT_PADDING = 22;
  33. var Toolbar = function () {
  34. function Toolbar(options, mainContainer, eventBus) {
  35. var l10n = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _ui_utils.NullL10n;
  36. _classCallCheck(this, Toolbar);
  37. this.toolbar = options.container;
  38. this.mainContainer = mainContainer;
  39. this.eventBus = eventBus;
  40. this.l10n = l10n;
  41. this.items = options;
  42. this._wasLocalized = false;
  43. this.reset();
  44. this._bindListeners();
  45. }
  46. _createClass(Toolbar, [{
  47. key: 'setPageNumber',
  48. value: function setPageNumber(pageNumber, pageLabel) {
  49. this.pageNumber = pageNumber;
  50. this.pageLabel = pageLabel;
  51. this._updateUIState(false);
  52. }
  53. }, {
  54. key: 'setPagesCount',
  55. value: function setPagesCount(pagesCount, hasPageLabels) {
  56. this.pagesCount = pagesCount;
  57. this.hasPageLabels = hasPageLabels;
  58. this._updateUIState(true);
  59. }
  60. }, {
  61. key: 'setPageScale',
  62. value: function setPageScale(pageScaleValue, pageScale) {
  63. this.pageScaleValue = pageScaleValue;
  64. this.pageScale = pageScale;
  65. this._updateUIState(false);
  66. }
  67. }, {
  68. key: 'reset',
  69. value: function reset() {
  70. this.pageNumber = 0;
  71. this.pageLabel = null;
  72. this.hasPageLabels = false;
  73. this.pagesCount = 0;
  74. this.pageScaleValue = _ui_utils.DEFAULT_SCALE_VALUE;
  75. this.pageScale = _ui_utils.DEFAULT_SCALE;
  76. this._updateUIState(true);
  77. }
  78. }, {
  79. key: '_bindListeners',
  80. value: function _bindListeners() {
  81. var _this = this;
  82. var eventBus = this.eventBus,
  83. items = this.items;
  84. var self = this;
  85. items.previous.addEventListener('click', function () {
  86. eventBus.dispatch('previouspage');
  87. });
  88. items.next.addEventListener('click', function () {
  89. eventBus.dispatch('nextpage');
  90. });
  91. items.zoomIn.addEventListener('click', function () {
  92. eventBus.dispatch('zoomin');
  93. });
  94. items.zoomOut.addEventListener('click', function () {
  95. eventBus.dispatch('zoomout');
  96. });
  97. items.pageNumber.addEventListener('click', function () {
  98. this.select();
  99. });
  100. items.pageNumber.addEventListener('change', function () {
  101. eventBus.dispatch('pagenumberchanged', {
  102. source: self,
  103. value: this.value
  104. });
  105. });
  106. items.scaleSelect.addEventListener('change', function () {
  107. if (this.value === 'custom') {
  108. return;
  109. }
  110. eventBus.dispatch('scalechanged', {
  111. source: self,
  112. value: this.value
  113. });
  114. });
  115. items.presentationModeButton.addEventListener('click', function () {
  116. eventBus.dispatch('presentationmode');
  117. });
  118. items.openFile.addEventListener('click', function () {
  119. eventBus.dispatch('openfile');
  120. });
  121. items.print.addEventListener('click', function () {
  122. eventBus.dispatch('print');
  123. });
  124. items.download.addEventListener('click', function () {
  125. eventBus.dispatch('download');
  126. });
  127. items.scaleSelect.oncontextmenu = _ui_utils.noContextMenuHandler;
  128. eventBus.on('localized', function () {
  129. _this._localized();
  130. });
  131. }
  132. }, {
  133. key: '_localized',
  134. value: function _localized() {
  135. this._wasLocalized = true;
  136. this._adjustScaleWidth();
  137. this._updateUIState(true);
  138. }
  139. }, {
  140. key: '_updateUIState',
  141. value: function _updateUIState() {
  142. var resetNumPages = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  143. if (!this._wasLocalized) {
  144. return;
  145. }
  146. var pageNumber = this.pageNumber,
  147. pagesCount = this.pagesCount,
  148. items = this.items;
  149. var scaleValue = (this.pageScaleValue || this.pageScale).toString();
  150. var scale = this.pageScale;
  151. if (resetNumPages) {
  152. if (this.hasPageLabels) {
  153. items.pageNumber.type = 'text';
  154. } else {
  155. items.pageNumber.type = 'number';
  156. this.l10n.get('of_pages', { pagesCount: pagesCount }, 'of {{pagesCount}}').then(function (msg) {
  157. items.numPages.textContent = msg;
  158. });
  159. }
  160. items.pageNumber.max = pagesCount;
  161. }
  162. if (this.hasPageLabels) {
  163. items.pageNumber.value = this.pageLabel;
  164. this.l10n.get('page_of_pages', {
  165. pageNumber: pageNumber,
  166. pagesCount: pagesCount
  167. }, '({{pageNumber}} of {{pagesCount}})').then(function (msg) {
  168. items.numPages.textContent = msg;
  169. });
  170. } else {
  171. items.pageNumber.value = pageNumber;
  172. }
  173. items.previous.disabled = pageNumber <= 1;
  174. items.next.disabled = pageNumber >= pagesCount;
  175. items.zoomOut.disabled = scale <= _ui_utils.MIN_SCALE;
  176. items.zoomIn.disabled = scale >= _ui_utils.MAX_SCALE;
  177. var customScale = Math.round(scale * 10000) / 100;
  178. this.l10n.get('page_scale_percent', { scale: customScale }, '{{scale}}%').then(function (msg) {
  179. var options = items.scaleSelect.options;
  180. var predefinedValueFound = false;
  181. for (var i = 0, ii = options.length; i < ii; i++) {
  182. var option = options[i];
  183. if (option.value !== scaleValue) {
  184. option.selected = false;
  185. continue;
  186. }
  187. option.selected = true;
  188. predefinedValueFound = true;
  189. }
  190. if (!predefinedValueFound) {
  191. items.customScaleOption.textContent = msg;
  192. items.customScaleOption.selected = true;
  193. }
  194. });
  195. }
  196. }, {
  197. key: 'updateLoadingIndicatorState',
  198. value: function updateLoadingIndicatorState() {
  199. var loading = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  200. var pageNumberInput = this.items.pageNumber;
  201. if (loading) {
  202. pageNumberInput.classList.add(PAGE_NUMBER_LOADING_INDICATOR);
  203. } else {
  204. pageNumberInput.classList.remove(PAGE_NUMBER_LOADING_INDICATOR);
  205. }
  206. }
  207. }, {
  208. key: '_adjustScaleWidth',
  209. value: function _adjustScaleWidth() {
  210. var container = this.items.scaleSelectContainer;
  211. var select = this.items.scaleSelect;
  212. _ui_utils.animationStarted.then(function () {
  213. if (container.clientWidth === 0) {
  214. container.setAttribute('style', 'display: inherit;');
  215. }
  216. if (container.clientWidth > 0) {
  217. select.setAttribute('style', 'min-width: inherit;');
  218. var width = select.clientWidth + SCALE_SELECT_CONTAINER_PADDING;
  219. select.setAttribute('style', 'min-width: ' + (width + SCALE_SELECT_PADDING) + 'px;');
  220. container.setAttribute('style', 'min-width: ' + width + 'px; ' + 'max-width: ' + width + 'px;');
  221. }
  222. });
  223. }
  224. }]);
  225. return Toolbar;
  226. }();
  227. exports.Toolbar = Toolbar;