toolbar.js 7.3 KB

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