component.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  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, __values } from "tslib";
  24. import { MDCComponent } from '@material/base/component';
  25. import { MDCTabScroller } from '@material/tab-scroller/component';
  26. import { MDCTab } from '@material/tab/component';
  27. import { MDCTabFoundation } from '@material/tab/foundation';
  28. import { MDCTabBarFoundation } from './foundation';
  29. var strings = MDCTabBarFoundation.strings;
  30. var tabIdCounter = 0;
  31. /** MDC Tab Bar */
  32. var MDCTabBar = /** @class */ (function (_super) {
  33. __extends(MDCTabBar, _super);
  34. function MDCTabBar() {
  35. return _super !== null && _super.apply(this, arguments) || this;
  36. }
  37. MDCTabBar.attachTo = function (root) {
  38. return new MDCTabBar(root);
  39. };
  40. Object.defineProperty(MDCTabBar.prototype, "focusOnActivate", {
  41. set: function (focusOnActivate) {
  42. var e_1, _a;
  43. try {
  44. for (var _b = __values(this.tabList), _c = _b.next(); !_c.done; _c = _b.next()) {
  45. var tab = _c.value;
  46. tab.focusOnActivate = focusOnActivate;
  47. }
  48. }
  49. catch (e_1_1) { e_1 = { error: e_1_1 }; }
  50. finally {
  51. try {
  52. if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
  53. }
  54. finally { if (e_1) throw e_1.error; }
  55. }
  56. },
  57. enumerable: false,
  58. configurable: true
  59. });
  60. Object.defineProperty(MDCTabBar.prototype, "useAutomaticActivation", {
  61. set: function (useAutomaticActivation) {
  62. this.foundation.setUseAutomaticActivation(useAutomaticActivation);
  63. },
  64. enumerable: false,
  65. configurable: true
  66. });
  67. MDCTabBar.prototype.initialize = function (tabFactory, tabScrollerFactory) {
  68. if (tabFactory === void 0) { tabFactory = function (el) { return new MDCTab(el); }; }
  69. if (tabScrollerFactory === void 0) { tabScrollerFactory = function (el) { return new MDCTabScroller(el); }; }
  70. this.tabList = this.instantiateTabs(tabFactory);
  71. this.tabScroller = this.instantiatetabScroller(tabScrollerFactory);
  72. };
  73. MDCTabBar.prototype.initialSyncWithDOM = function () {
  74. var _this = this;
  75. this.handleTabInteraction = function (evt) {
  76. _this.foundation.handleTabInteraction(evt);
  77. };
  78. this.handleKeyDown = function (evt) {
  79. _this.foundation.handleKeyDown(evt);
  80. };
  81. this.listen(MDCTabFoundation.strings.INTERACTED_EVENT, this.handleTabInteraction);
  82. this.listen('keydown', this.handleKeyDown);
  83. for (var i = 0; i < this.tabList.length; i++) {
  84. if (this.tabList[i].active) {
  85. this.scrollIntoView(i);
  86. break;
  87. }
  88. }
  89. };
  90. MDCTabBar.prototype.destroy = function () {
  91. var e_2, _a;
  92. _super.prototype.destroy.call(this);
  93. this.unlisten(MDCTabFoundation.strings.INTERACTED_EVENT, this.handleTabInteraction);
  94. this.unlisten('keydown', this.handleKeyDown);
  95. try {
  96. for (var _b = __values(this.tabList), _c = _b.next(); !_c.done; _c = _b.next()) {
  97. var tab = _c.value;
  98. tab.destroy();
  99. }
  100. }
  101. catch (e_2_1) { e_2 = { error: e_2_1 }; }
  102. finally {
  103. try {
  104. if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
  105. }
  106. finally { if (e_2) throw e_2.error; }
  107. }
  108. if (this.tabScroller) {
  109. this.tabScroller.destroy();
  110. }
  111. };
  112. MDCTabBar.prototype.getDefaultFoundation = function () {
  113. var _this = this;
  114. // DO NOT INLINE this variable. For backward compatibility, foundations take
  115. // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
  116. // methods, we need a separate, strongly typed adapter variable.
  117. // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
  118. var adapter = {
  119. scrollTo: function (scrollX) {
  120. _this.tabScroller.scrollTo(scrollX);
  121. },
  122. incrementScroll: function (scrollXIncrement) {
  123. _this.tabScroller.incrementScroll(scrollXIncrement);
  124. },
  125. getScrollPosition: function () { return _this.tabScroller.getScrollPosition(); },
  126. getScrollContentWidth: function () { return _this.tabScroller.getScrollContentWidth(); },
  127. getOffsetWidth: function () { return _this.root.offsetWidth; },
  128. isRTL: function () { return window.getComputedStyle(_this.root).getPropertyValue('direction') === 'rtl'; },
  129. setActiveTab: function (index) {
  130. _this.foundation.activateTab(index);
  131. },
  132. activateTabAtIndex: function (index, clientRect) {
  133. _this.tabList[index].activate(clientRect);
  134. },
  135. deactivateTabAtIndex: function (index) {
  136. _this.tabList[index].deactivate();
  137. },
  138. focusTabAtIndex: function (index) {
  139. _this.tabList[index].focus();
  140. },
  141. getTabIndicatorClientRectAtIndex: function (index) {
  142. return _this.tabList[index].computeIndicatorClientRect();
  143. },
  144. getTabDimensionsAtIndex: function (index) {
  145. return _this.tabList[index].computeDimensions();
  146. },
  147. getPreviousActiveTabIndex: function () {
  148. for (var i = 0; i < _this.tabList.length; i++) {
  149. if (_this.tabList[i].active) {
  150. return i;
  151. }
  152. }
  153. return -1;
  154. },
  155. getFocusedTabIndex: function () {
  156. var tabElements = _this.getTabElements();
  157. var activeElement = document.activeElement;
  158. return tabElements.indexOf(activeElement);
  159. },
  160. getIndexOfTabById: function (id) {
  161. for (var i = 0; i < _this.tabList.length; i++) {
  162. if (_this.tabList[i].id === id) {
  163. return i;
  164. }
  165. }
  166. return -1;
  167. },
  168. getTabListLength: function () { return _this.tabList.length; },
  169. notifyTabActivated: function (index) {
  170. _this.emit(strings.TAB_ACTIVATED_EVENT, { index: index }, true);
  171. },
  172. };
  173. // tslint:enable:object-literal-sort-keys
  174. return new MDCTabBarFoundation(adapter);
  175. };
  176. /**
  177. * Activates the tab at the given index
  178. * @param index The index of the tab
  179. */
  180. MDCTabBar.prototype.activateTab = function (index) {
  181. this.foundation.activateTab(index);
  182. };
  183. /**
  184. * Scrolls the tab at the given index into view
  185. * @param index THe index of the tab
  186. */
  187. MDCTabBar.prototype.scrollIntoView = function (index) {
  188. this.foundation.scrollIntoView(index);
  189. };
  190. /**
  191. * Returns all the tab elements in a nice clean array
  192. */
  193. MDCTabBar.prototype.getTabElements = function () {
  194. return Array.from(this.root.querySelectorAll(strings.TAB_SELECTOR));
  195. };
  196. /**
  197. * Instantiates tab components on all child tab elements
  198. */
  199. MDCTabBar.prototype.instantiateTabs = function (tabFactory) {
  200. return this.getTabElements().map(function (el) {
  201. el.id = el.id || "mdc-tab-" + ++tabIdCounter;
  202. return tabFactory(el);
  203. });
  204. };
  205. /**
  206. * Instantiates tab scroller component on the child tab scroller element
  207. */
  208. MDCTabBar.prototype.instantiatetabScroller = function (tabScrollerFactory) {
  209. var tabScrollerElement = this.root.querySelector(strings.TAB_SCROLLER_SELECTOR);
  210. if (tabScrollerElement) {
  211. return tabScrollerFactory(tabScrollerElement);
  212. }
  213. return null;
  214. };
  215. return MDCTabBar;
  216. }(MDCComponent));
  217. export { MDCTabBar };
  218. //# sourceMappingURL=component.js.map