pdf_sidebar_resizer.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. /**
  2. * @licstart The following is the entire license notice for the
  3. * Javascript code in this page
  4. *
  5. * Copyright 2019 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.PDFSidebarResizer = void 0;
  27. var _ui_utils = require("./ui_utils");
  28. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  29. 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); } }
  30. function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
  31. var SIDEBAR_WIDTH_VAR = '--sidebar-width';
  32. var SIDEBAR_MIN_WIDTH = 200;
  33. var SIDEBAR_RESIZING_CLASS = 'sidebarResizing';
  34. var PDFSidebarResizer =
  35. /*#__PURE__*/
  36. function () {
  37. function PDFSidebarResizer(options, eventBus) {
  38. var _this = this;
  39. var l10n = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _ui_utils.NullL10n;
  40. _classCallCheck(this, PDFSidebarResizer);
  41. this.enabled = false;
  42. this.isRTL = false;
  43. this.sidebarOpen = false;
  44. this.doc = document.documentElement;
  45. this._width = null;
  46. this._outerContainerWidth = null;
  47. this._boundEvents = Object.create(null);
  48. this.outerContainer = options.outerContainer;
  49. this.resizer = options.resizer;
  50. this.eventBus = eventBus;
  51. this.l10n = l10n;
  52. if (typeof CSS === 'undefined' || typeof CSS.supports !== 'function' || !CSS.supports(SIDEBAR_WIDTH_VAR, "calc(-1 * ".concat(SIDEBAR_MIN_WIDTH, "px)"))) {
  53. console.warn('PDFSidebarResizer: ' + 'The browser does not support resizing of the sidebar.');
  54. return;
  55. }
  56. this.enabled = true;
  57. this.resizer.classList.remove('hidden');
  58. this.l10n.getDirection().then(function (dir) {
  59. _this.isRTL = dir === 'rtl';
  60. });
  61. this._addEventListeners();
  62. }
  63. _createClass(PDFSidebarResizer, [{
  64. key: "_updateWidth",
  65. value: function _updateWidth() {
  66. var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
  67. if (!this.enabled) {
  68. return false;
  69. }
  70. var maxWidth = Math.floor(this.outerContainerWidth / 2);
  71. if (width > maxWidth) {
  72. width = maxWidth;
  73. }
  74. if (width < SIDEBAR_MIN_WIDTH) {
  75. width = SIDEBAR_MIN_WIDTH;
  76. }
  77. if (width === this._width) {
  78. return false;
  79. }
  80. this._width = width;
  81. this.doc.style.setProperty(SIDEBAR_WIDTH_VAR, "".concat(width, "px"));
  82. return true;
  83. }
  84. }, {
  85. key: "_mouseMove",
  86. value: function _mouseMove(evt) {
  87. var width = evt.clientX;
  88. if (this.isRTL) {
  89. width = this.outerContainerWidth - width;
  90. }
  91. this._updateWidth(width);
  92. }
  93. }, {
  94. key: "_mouseUp",
  95. value: function _mouseUp(evt) {
  96. this.outerContainer.classList.remove(SIDEBAR_RESIZING_CLASS);
  97. this.eventBus.dispatch('resize', {
  98. source: this
  99. });
  100. var _boundEvents = this._boundEvents;
  101. window.removeEventListener('mousemove', _boundEvents.mouseMove);
  102. window.removeEventListener('mouseup', _boundEvents.mouseUp);
  103. }
  104. }, {
  105. key: "_addEventListeners",
  106. value: function _addEventListeners() {
  107. var _this2 = this;
  108. if (!this.enabled) {
  109. return;
  110. }
  111. var _boundEvents = this._boundEvents;
  112. _boundEvents.mouseMove = this._mouseMove.bind(this);
  113. _boundEvents.mouseUp = this._mouseUp.bind(this);
  114. this.resizer.addEventListener('mousedown', function (evt) {
  115. if (evt.button !== 0) {
  116. return;
  117. }
  118. _this2.outerContainer.classList.add(SIDEBAR_RESIZING_CLASS);
  119. window.addEventListener('mousemove', _boundEvents.mouseMove);
  120. window.addEventListener('mouseup', _boundEvents.mouseUp);
  121. });
  122. this.eventBus.on('sidebarviewchanged', function (evt) {
  123. _this2.sidebarOpen = !!(evt && evt.view);
  124. });
  125. this.eventBus.on('resize', function (evt) {
  126. if (evt && evt.source === window) {
  127. _this2._outerContainerWidth = null;
  128. if (_this2._width) {
  129. if (_this2.sidebarOpen) {
  130. _this2.outerContainer.classList.add(SIDEBAR_RESIZING_CLASS);
  131. var updated = _this2._updateWidth(_this2._width);
  132. Promise.resolve().then(function () {
  133. _this2.outerContainer.classList.remove(SIDEBAR_RESIZING_CLASS);
  134. if (updated) {
  135. _this2.eventBus.dispatch('resize', {
  136. source: _this2
  137. });
  138. }
  139. });
  140. } else {
  141. _this2._updateWidth(_this2._width);
  142. }
  143. }
  144. }
  145. });
  146. }
  147. }, {
  148. key: "outerContainerWidth",
  149. get: function get() {
  150. if (!this._outerContainerWidth) {
  151. this._outerContainerWidth = this.outerContainer.clientWidth;
  152. }
  153. return this._outerContainerWidth;
  154. }
  155. }]);
  156. return PDFSidebarResizer;
  157. }();
  158. exports.PDFSidebarResizer = PDFSidebarResizer;