component.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. /**
  2. * @license
  3. * Copyright 2018 Google Inc.
  4. *
  5. * Permission is hereby granted, free of charge, to any person obtaining a copy
  6. * of this software and associated documentation files (the "Software"), to deal
  7. * in the Software without restriction, including without limitation the rights
  8. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  9. * copies of the Software, and to permit persons to whom the Software is
  10. * furnished to do so, subject to the following conditions:
  11. *
  12. * The above copyright notice and this permission notice shall be included in
  13. * all copies or substantial portions of the Software.
  14. *
  15. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  16. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  17. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  18. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  19. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  20. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  21. * THE SOFTWARE.
  22. */
  23. import { __extends } from "tslib";
  24. import { MDCComponent } from '@material/base/component';
  25. import { applyPassive } from '@material/dom/events';
  26. import { matches } from '@material/dom/ponyfill';
  27. import { MDCTabScrollerFoundation } from './foundation';
  28. import * as util from './util';
  29. /** MDC Tab Scroller */
  30. var MDCTabScroller = /** @class */ (function (_super) {
  31. __extends(MDCTabScroller, _super);
  32. function MDCTabScroller() {
  33. return _super !== null && _super.apply(this, arguments) || this;
  34. }
  35. MDCTabScroller.attachTo = function (root) {
  36. return new MDCTabScroller(root);
  37. };
  38. // initialSyncWithDOM()
  39. MDCTabScroller.prototype.initialize = function () {
  40. this.area = this.root.querySelector(MDCTabScrollerFoundation.strings.AREA_SELECTOR);
  41. this.content = this.root.querySelector(MDCTabScrollerFoundation.strings.CONTENT_SELECTOR);
  42. };
  43. MDCTabScroller.prototype.initialSyncWithDOM = function () {
  44. var _this = this;
  45. this.handleInteraction = function () {
  46. _this.foundation.handleInteraction();
  47. };
  48. this.handleTransitionEnd = function (evt) {
  49. _this.foundation.handleTransitionEnd(evt);
  50. };
  51. this.area.addEventListener('wheel', this.handleInteraction, applyPassive());
  52. this.area.addEventListener('touchstart', this.handleInteraction, applyPassive());
  53. this.area.addEventListener('pointerdown', this.handleInteraction, applyPassive());
  54. this.area.addEventListener('mousedown', this.handleInteraction, applyPassive());
  55. this.area.addEventListener('keydown', this.handleInteraction, applyPassive());
  56. this.content.addEventListener('transitionend', this.handleTransitionEnd);
  57. };
  58. MDCTabScroller.prototype.destroy = function () {
  59. _super.prototype.destroy.call(this);
  60. this.area.removeEventListener('wheel', this.handleInteraction, applyPassive());
  61. this.area.removeEventListener('touchstart', this.handleInteraction, applyPassive());
  62. this.area.removeEventListener('pointerdown', this.handleInteraction, applyPassive());
  63. this.area.removeEventListener('mousedown', this.handleInteraction, applyPassive());
  64. this.area.removeEventListener('keydown', this.handleInteraction, applyPassive());
  65. this.content.removeEventListener('transitionend', this.handleTransitionEnd);
  66. };
  67. MDCTabScroller.prototype.getDefaultFoundation = function () {
  68. var _this = this;
  69. // DO NOT INLINE this variable. For backward compatibility, foundations take
  70. // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
  71. // methods, we need a separate, strongly typed adapter variable.
  72. // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
  73. var adapter = {
  74. eventTargetMatchesSelector: function (evtTarget, selector) {
  75. return matches(evtTarget, selector);
  76. },
  77. addClass: function (className) {
  78. _this.root.classList.add(className);
  79. },
  80. removeClass: function (className) {
  81. _this.root.classList.remove(className);
  82. },
  83. addScrollAreaClass: function (className) {
  84. _this.area.classList.add(className);
  85. },
  86. setScrollAreaStyleProperty: function (prop, value) {
  87. _this.area.style.setProperty(prop, value);
  88. },
  89. setScrollContentStyleProperty: function (prop, value) {
  90. _this.content.style.setProperty(prop, value);
  91. },
  92. getScrollContentStyleValue: function (propName) {
  93. return window.getComputedStyle(_this.content).getPropertyValue(propName);
  94. },
  95. setScrollAreaScrollLeft: function (scrollX) { return _this.area.scrollLeft = scrollX; },
  96. getScrollAreaScrollLeft: function () { return _this.area.scrollLeft; },
  97. getScrollContentOffsetWidth: function () { return _this.content.offsetWidth; },
  98. getScrollAreaOffsetWidth: function () { return _this.area.offsetWidth; },
  99. computeScrollAreaClientRect: function () { return _this.area.getBoundingClientRect(); },
  100. computeScrollContentClientRect: function () {
  101. return _this.content.getBoundingClientRect();
  102. },
  103. computeHorizontalScrollbarHeight: function () {
  104. return util.computeHorizontalScrollbarHeight(document);
  105. },
  106. };
  107. // tslint:enable:object-literal-sort-keys
  108. return new MDCTabScrollerFoundation(adapter);
  109. };
  110. /**
  111. * Returns the current visual scroll position
  112. */
  113. MDCTabScroller.prototype.getScrollPosition = function () {
  114. return this.foundation.getScrollPosition();
  115. };
  116. /**
  117. * Returns the width of the scroll content
  118. */
  119. MDCTabScroller.prototype.getScrollContentWidth = function () {
  120. return this.content.offsetWidth;
  121. };
  122. /**
  123. * Increments the scroll value by the given amount
  124. * @param scrollXIncrement The pixel value by which to increment the scroll
  125. * value
  126. */
  127. MDCTabScroller.prototype.incrementScroll = function (scrollXIncrement) {
  128. this.foundation.incrementScroll(scrollXIncrement);
  129. };
  130. /**
  131. * Scrolls to the given pixel position
  132. * @param scrollX The pixel value to scroll to
  133. */
  134. MDCTabScroller.prototype.scrollTo = function (scrollX) {
  135. this.foundation.scrollTo(scrollX);
  136. };
  137. return MDCTabScroller;
  138. }(MDCComponent));
  139. export { MDCTabScroller };
  140. //# sourceMappingURL=component.js.map