foundation.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  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 { __assign, __extends } from "tslib";
  24. import { MDCFoundation } from '@material/base/foundation';
  25. import { cssClasses, strings } from './constants';
  26. /** MDC Tab Foundation */
  27. var MDCTabFoundation = /** @class */ (function (_super) {
  28. __extends(MDCTabFoundation, _super);
  29. function MDCTabFoundation(adapter) {
  30. var _this = _super.call(this, __assign(__assign({}, MDCTabFoundation.defaultAdapter), adapter)) || this;
  31. _this.focusOnActivate = true;
  32. return _this;
  33. }
  34. Object.defineProperty(MDCTabFoundation, "cssClasses", {
  35. get: function () {
  36. return cssClasses;
  37. },
  38. enumerable: false,
  39. configurable: true
  40. });
  41. Object.defineProperty(MDCTabFoundation, "strings", {
  42. get: function () {
  43. return strings;
  44. },
  45. enumerable: false,
  46. configurable: true
  47. });
  48. Object.defineProperty(MDCTabFoundation, "defaultAdapter", {
  49. get: function () {
  50. // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
  51. return {
  52. addClass: function () { return undefined; },
  53. removeClass: function () { return undefined; },
  54. hasClass: function () { return false; },
  55. setAttr: function () { return undefined; },
  56. activateIndicator: function () { return undefined; },
  57. deactivateIndicator: function () { return undefined; },
  58. notifyInteracted: function () { return undefined; },
  59. getOffsetLeft: function () { return 0; },
  60. getOffsetWidth: function () { return 0; },
  61. getContentOffsetLeft: function () { return 0; },
  62. getContentOffsetWidth: function () { return 0; },
  63. focus: function () { return undefined; },
  64. isFocused: function () { return false; },
  65. };
  66. // tslint:enable:object-literal-sort-keys
  67. },
  68. enumerable: false,
  69. configurable: true
  70. });
  71. MDCTabFoundation.prototype.handleClick = function () {
  72. // It's up to the parent component to keep track of the active Tab and
  73. // ensure we don't activate a Tab that's already active.
  74. this.adapter.notifyInteracted();
  75. };
  76. MDCTabFoundation.prototype.isActive = function () {
  77. return this.adapter.hasClass(cssClasses.ACTIVE);
  78. };
  79. /**
  80. * Sets whether the tab should focus itself when activated
  81. */
  82. MDCTabFoundation.prototype.setFocusOnActivate = function (focusOnActivate) {
  83. this.focusOnActivate = focusOnActivate;
  84. };
  85. /**
  86. * Activates the Tab
  87. */
  88. MDCTabFoundation.prototype.activate = function (previousIndicatorClientRect) {
  89. this.adapter.addClass(cssClasses.ACTIVE);
  90. this.adapter.setAttr(strings.ARIA_SELECTED, 'true');
  91. this.adapter.setAttr(strings.TABINDEX, '0');
  92. this.adapter.activateIndicator(previousIndicatorClientRect);
  93. if (this.focusOnActivate && !this.adapter.isFocused()) {
  94. this.adapter.focus();
  95. }
  96. };
  97. /**
  98. * Deactivates the Tab
  99. */
  100. MDCTabFoundation.prototype.deactivate = function () {
  101. // Early exit
  102. if (!this.isActive()) {
  103. return;
  104. }
  105. this.adapter.removeClass(cssClasses.ACTIVE);
  106. this.adapter.setAttr(strings.ARIA_SELECTED, 'false');
  107. this.adapter.setAttr(strings.TABINDEX, '-1');
  108. this.adapter.deactivateIndicator();
  109. };
  110. /**
  111. * Returns the dimensions of the Tab
  112. */
  113. MDCTabFoundation.prototype.computeDimensions = function () {
  114. var rootWidth = this.adapter.getOffsetWidth();
  115. var rootLeft = this.adapter.getOffsetLeft();
  116. var contentWidth = this.adapter.getContentOffsetWidth();
  117. var contentLeft = this.adapter.getContentOffsetLeft();
  118. return {
  119. contentLeft: rootLeft + contentLeft,
  120. contentRight: rootLeft + contentLeft + contentWidth,
  121. rootLeft: rootLeft,
  122. rootRight: rootLeft + rootWidth,
  123. };
  124. };
  125. return MDCTabFoundation;
  126. }(MDCFoundation));
  127. export { MDCTabFoundation };
  128. // tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
  129. export default MDCTabFoundation;
  130. //# sourceMappingURL=foundation.js.map