sliding-foundation.js 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  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 { MDCTabIndicatorFoundation } from './foundation';
  25. /* istanbul ignore next: subclass is not a branch statement */
  26. var MDCSlidingTabIndicatorFoundation = /** @class */ (function (_super) {
  27. __extends(MDCSlidingTabIndicatorFoundation, _super);
  28. function MDCSlidingTabIndicatorFoundation() {
  29. return _super !== null && _super.apply(this, arguments) || this;
  30. }
  31. MDCSlidingTabIndicatorFoundation.prototype.activate = function (previousIndicatorClientRect) {
  32. // Early exit if no indicator is present to handle cases where an indicator
  33. // may be activated without a prior indicator state
  34. if (!previousIndicatorClientRect) {
  35. this.adapter.addClass(MDCTabIndicatorFoundation.cssClasses.ACTIVE);
  36. return;
  37. }
  38. // This animation uses the FLIP approach. You can read more about it at the
  39. // link below: https://aerotwist.com/blog/flip-your-animations/
  40. // Calculate the dimensions based on the dimensions of the previous
  41. // indicator
  42. var currentClientRect = this.computeContentClientRect();
  43. var widthDelta = previousIndicatorClientRect.width / currentClientRect.width;
  44. var xPosition = previousIndicatorClientRect.left - currentClientRect.left;
  45. this.adapter.addClass(MDCTabIndicatorFoundation.cssClasses.NO_TRANSITION);
  46. this.adapter.setContentStyleProperty('transform', "translateX(" + xPosition + "px) scaleX(" + widthDelta + ")");
  47. // Force repaint before updating classes and transform to ensure the
  48. // transform properly takes effect
  49. this.computeContentClientRect();
  50. this.adapter.removeClass(MDCTabIndicatorFoundation.cssClasses.NO_TRANSITION);
  51. this.adapter.addClass(MDCTabIndicatorFoundation.cssClasses.ACTIVE);
  52. this.adapter.setContentStyleProperty('transform', '');
  53. };
  54. MDCSlidingTabIndicatorFoundation.prototype.deactivate = function () {
  55. this.adapter.removeClass(MDCTabIndicatorFoundation.cssClasses.ACTIVE);
  56. };
  57. return MDCSlidingTabIndicatorFoundation;
  58. }(MDCTabIndicatorFoundation));
  59. export { MDCSlidingTabIndicatorFoundation };
  60. // tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
  61. export default MDCSlidingTabIndicatorFoundation;
  62. //# sourceMappingURL=sliding-foundation.js.map