Front end of the Slack clone application.

tab-highlight.js 1.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. import { Directive, ElementRef } from '@angular/core';
  2. import { DomController } from '../../platform/dom-controller';
  3. /**
  4. * @hidden
  5. */
  6. export class TabHighlight {
  7. constructor(_elementRef, _dom) {
  8. this._elementRef = _elementRef;
  9. this._dom = _dom;
  10. }
  11. select(tab) {
  12. if (!tab) {
  13. return;
  14. }
  15. const dom = this._dom;
  16. dom.read(() => {
  17. const btnEle = tab.btn.getNativeElement();
  18. const transform = `translate3d(${btnEle.offsetLeft}px,0,0) scaleX(${btnEle.offsetWidth})`;
  19. dom.write(() => {
  20. const ele = this._elementRef.nativeElement;
  21. ele.style[dom.plt.Css.transform] = transform;
  22. if (!this._init) {
  23. this._init = true;
  24. dom.write(() => {
  25. ele.classList.add('animate');
  26. }, 80);
  27. }
  28. });
  29. }, 32);
  30. }
  31. }
  32. TabHighlight.decorators = [
  33. { type: Directive, args: [{
  34. selector: '.tab-highlight'
  35. },] },
  36. ];
  37. /** @nocollapse */
  38. TabHighlight.ctorParameters = () => [
  39. { type: ElementRef, },
  40. { type: DomController, },
  41. ];
  42. //# sourceMappingURL=tab-highlight.js.map