toolbar.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  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. this.toolbar = options.container;
  27. this.mainContainer = mainContainer;
  28. this.eventBus = eventBus;
  29. this.items = options;
  30. this._wasLocalized = false;
  31. this.reset();
  32. this._bindListeners();
  33. }
  34. Toolbar.prototype = {
  35. setPageNumber: function setPageNumber(pageNumber, pageLabel) {
  36. this.pageNumber = pageNumber;
  37. this.pageLabel = pageLabel;
  38. this._updateUIState(false);
  39. },
  40. setPagesCount: function setPagesCount(pagesCount, hasPageLabels) {
  41. this.pagesCount = pagesCount;
  42. this.hasPageLabels = hasPageLabels;
  43. this._updateUIState(true);
  44. },
  45. setPageScale: function setPageScale(pageScaleValue, pageScale) {
  46. this.pageScaleValue = pageScaleValue;
  47. this.pageScale = pageScale;
  48. this._updateUIState(false);
  49. },
  50. reset: function reset() {
  51. this.pageNumber = 0;
  52. this.pageLabel = null;
  53. this.hasPageLabels = false;
  54. this.pagesCount = 0;
  55. this.pageScaleValue = _ui_utils.DEFAULT_SCALE_VALUE;
  56. this.pageScale = _ui_utils.DEFAULT_SCALE;
  57. this._updateUIState(true);
  58. },
  59. _bindListeners: function Toolbar_bindClickListeners() {
  60. var eventBus = this.eventBus;
  61. var self = this;
  62. var items = this.items;
  63. items.previous.addEventListener('click', function () {
  64. eventBus.dispatch('previouspage');
  65. });
  66. items.next.addEventListener('click', function () {
  67. eventBus.dispatch('nextpage');
  68. });
  69. items.zoomIn.addEventListener('click', function () {
  70. eventBus.dispatch('zoomin');
  71. });
  72. items.zoomOut.addEventListener('click', function () {
  73. eventBus.dispatch('zoomout');
  74. });
  75. items.pageNumber.addEventListener('click', function () {
  76. this.select();
  77. });
  78. items.pageNumber.addEventListener('change', function () {
  79. eventBus.dispatch('pagenumberchanged', {
  80. source: self,
  81. value: this.value
  82. });
  83. });
  84. items.scaleSelect.addEventListener('change', function () {
  85. if (this.value === 'custom') {
  86. return;
  87. }
  88. eventBus.dispatch('scalechanged', {
  89. source: self,
  90. value: this.value
  91. });
  92. });
  93. items.presentationModeButton.addEventListener('click', function (e) {
  94. eventBus.dispatch('presentationmode');
  95. });
  96. items.openFile.addEventListener('click', function (e) {
  97. eventBus.dispatch('openfile');
  98. });
  99. items.print.addEventListener('click', function (e) {
  100. eventBus.dispatch('print');
  101. });
  102. items.download.addEventListener('click', function (e) {
  103. eventBus.dispatch('download');
  104. });
  105. items.scaleSelect.oncontextmenu = _ui_utils.noContextMenuHandler;
  106. _ui_utils.localized.then(this._localized.bind(this));
  107. },
  108. _localized: function Toolbar_localized() {
  109. this._wasLocalized = true;
  110. this._adjustScaleWidth();
  111. this._updateUIState(true);
  112. },
  113. _updateUIState: function Toolbar_updateUIState(resetNumPages) {
  114. function selectScaleOption(value, scale) {
  115. var options = items.scaleSelect.options;
  116. var predefinedValueFound = false;
  117. for (var i = 0, ii = options.length; i < ii; i++) {
  118. var option = options[i];
  119. if (option.value !== value) {
  120. option.selected = false;
  121. continue;
  122. }
  123. option.selected = true;
  124. predefinedValueFound = true;
  125. }
  126. if (!predefinedValueFound) {
  127. var customScale = Math.round(scale * 10000) / 100;
  128. items.customScaleOption.textContent = _ui_utils.mozL10n.get('page_scale_percent', { scale: customScale }, '{{scale}}%');
  129. items.customScaleOption.selected = true;
  130. }
  131. }
  132. if (!this._wasLocalized) {
  133. return;
  134. }
  135. var pageNumber = this.pageNumber;
  136. var scaleValue = (this.pageScaleValue || this.pageScale).toString();
  137. var scale = this.pageScale;
  138. var items = this.items;
  139. var pagesCount = this.pagesCount;
  140. if (resetNumPages) {
  141. if (this.hasPageLabels) {
  142. items.pageNumber.type = 'text';
  143. } else {
  144. items.pageNumber.type = 'number';
  145. items.numPages.textContent = _ui_utils.mozL10n.get('of_pages', { pagesCount: pagesCount }, 'of {{pagesCount}}');
  146. }
  147. items.pageNumber.max = pagesCount;
  148. }
  149. if (this.hasPageLabels) {
  150. items.pageNumber.value = this.pageLabel;
  151. items.numPages.textContent = _ui_utils.mozL10n.get('page_of_pages', {
  152. pageNumber: pageNumber,
  153. pagesCount: pagesCount
  154. }, '({{pageNumber}} of {{pagesCount}})');
  155. } else {
  156. items.pageNumber.value = pageNumber;
  157. }
  158. items.previous.disabled = pageNumber <= 1;
  159. items.next.disabled = pageNumber >= pagesCount;
  160. items.zoomOut.disabled = scale <= _ui_utils.MIN_SCALE;
  161. items.zoomIn.disabled = scale >= _ui_utils.MAX_SCALE;
  162. selectScaleOption(scaleValue, scale);
  163. },
  164. updateLoadingIndicatorState: function Toolbar_updateLoadingIndicatorState(loading) {
  165. var pageNumberInput = this.items.pageNumber;
  166. if (loading) {
  167. pageNumberInput.classList.add(PAGE_NUMBER_LOADING_INDICATOR);
  168. } else {
  169. pageNumberInput.classList.remove(PAGE_NUMBER_LOADING_INDICATOR);
  170. }
  171. },
  172. _adjustScaleWidth: function Toolbar_adjustScaleWidth() {
  173. var container = this.items.scaleSelectContainer;
  174. var select = this.items.scaleSelect;
  175. _ui_utils.animationStarted.then(function () {
  176. if (container.clientWidth === 0) {
  177. container.setAttribute('style', 'display: inherit;');
  178. }
  179. if (container.clientWidth > 0) {
  180. select.setAttribute('style', 'min-width: inherit;');
  181. var width = select.clientWidth + SCALE_SELECT_CONTAINER_PADDING;
  182. select.setAttribute('style', 'min-width: ' + (width + SCALE_SELECT_PADDING) + 'px;');
  183. container.setAttribute('style', 'min-width: ' + width + 'px; ' + 'max-width: ' + width + 'px;');
  184. }
  185. });
  186. }
  187. };
  188. return Toolbar;
  189. }();
  190. exports.Toolbar = Toolbar;