2
0

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