From b185eacd6cef8c4b2fd8ad7715f1742480e0b3c5 Mon Sep 17 00:00:00 2001 From: Austin McDaniel Date: Sun, 6 Aug 2017 10:03:07 -0500 Subject: [PATCH 1/4] bug(tabs): fix arrows not showing on reszize #6303 --- src/lib/tabs/tab-header.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/lib/tabs/tab-header.ts b/src/lib/tabs/tab-header.ts index 2246847ecc4e..f8e966f4757b 100644 --- a/src/lib/tabs/tab-header.ts +++ b/src/lib/tabs/tab-header.ts @@ -24,6 +24,7 @@ import { Renderer2, ChangeDetectionStrategy, ChangeDetectorRef, + HostListener } from '@angular/core'; import { RIGHT_ARROW, @@ -387,6 +388,7 @@ export class MdTabHeader extends _MdTabHeaderMixinBase * This is an expensive call that forces a layout reflow to compute box and scroll metrics and * should be called sparingly. */ + @HostListener('window:resize') _checkPaginationEnabled() { this._showPaginationControls = this._tabList.nativeElement.scrollWidth > this._elementRef.nativeElement.offsetWidth; From b84092c2533bc23ab0790f89033afd265c259e3c Mon Sep 17 00:00:00 2001 From: Austin McDaniel Date: Sun, 6 Aug 2017 15:59:10 -0500 Subject: [PATCH 2/4] chore(*): update to use host vs hostliener --- src/lib/tabs/tab-header.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/tabs/tab-header.ts b/src/lib/tabs/tab-header.ts index f8e966f4757b..c43f95b7c43b 100644 --- a/src/lib/tabs/tab-header.ts +++ b/src/lib/tabs/tab-header.ts @@ -80,6 +80,7 @@ export const _MdTabHeaderMixinBase = mixinDisableRipple(MdTabHeaderBase); 'class': 'mat-tab-header', '[class.mat-tab-header-pagination-controls-enabled]': '_showPaginationControls', '[class.mat-tab-header-rtl]': "_getLayoutDirection() == 'rtl'", + '(window:resize)': "_checkPaginationEnabled()" } }) export class MdTabHeader extends _MdTabHeaderMixinBase @@ -388,7 +389,6 @@ export class MdTabHeader extends _MdTabHeaderMixinBase * This is an expensive call that forces a layout reflow to compute box and scroll metrics and * should be called sparingly. */ - @HostListener('window:resize') _checkPaginationEnabled() { this._showPaginationControls = this._tabList.nativeElement.scrollWidth > this._elementRef.nativeElement.offsetWidth; From 68e6ddddc3a6e98158710c34205e5ca3af69d48f Mon Sep 17 00:00:00 2001 From: Austin McDaniel Date: Mon, 7 Aug 2017 16:53:51 -0500 Subject: [PATCH 3/4] bug(tabs): address feedback in pr --- src/lib/tabs/tab-header.spec.ts | 20 +++++++++++++++++++- src/lib/tabs/tab-header.ts | 21 ++++++++++++++++----- 2 files changed, 35 insertions(+), 6 deletions(-) diff --git a/src/lib/tabs/tab-header.spec.ts b/src/lib/tabs/tab-header.spec.ts index d459fab772a9..1a7df4c13806 100644 --- a/src/lib/tabs/tab-header.spec.ts +++ b/src/lib/tabs/tab-header.spec.ts @@ -1,4 +1,6 @@ -import {async, ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing'; +import { + async, ComponentFixture, TestBed, fakeAsync, tick, discardPeriodicTasks +} from '@angular/core/testing'; import {Component, ViewChild, ViewContainerRef} from '@angular/core'; import {Direction, Directionality} from '../core/bidi/index'; import {MdTabHeader} from './tab-header'; @@ -261,6 +263,22 @@ describe('MdTabHeader', () => { fixture.detectChanges(); expect(inkBar.alignToElement).toHaveBeenCalled(); + discardPeriodicTasks(); + })); + + it('should update arrows when the window is resized', fakeAsync(() => { + fixture = TestBed.createComponent(SimpleTabHeaderApp); + + const header = fixture.componentInstance.mdTabHeader; + + spyOn(header, '_checkPaginationEnabled'); + + dispatchFakeEvent(window, 'resize'); + tick(10); + fixture.detectChanges(); + + expect(header._checkPaginationEnabled).toHaveBeenCalled(); + discardPeriodicTasks(); })); }); diff --git a/src/lib/tabs/tab-header.ts b/src/lib/tabs/tab-header.ts index c43f95b7c43b..5144a51955de 100644 --- a/src/lib/tabs/tab-header.ts +++ b/src/lib/tabs/tab-header.ts @@ -23,8 +23,7 @@ import { NgZone, Renderer2, ChangeDetectionStrategy, - ChangeDetectorRef, - HostListener + ChangeDetectorRef } from '@angular/core'; import { RIGHT_ARROW, @@ -41,7 +40,7 @@ import {of as observableOf} from 'rxjs/observable/of'; import {merge} from 'rxjs/observable/merge'; import {fromEvent} from 'rxjs/observable/fromEvent'; import {CanDisableRipple, mixinDisableRipple} from '../core/common-behaviors/disable-ripple'; - +import {RxChain, debounceTime} from '@angular/cdk/rxjs'; /** * The directions that scrolling can go in when the header's tabs exceed the header width. 'After' @@ -79,8 +78,7 @@ export const _MdTabHeaderMixinBase = mixinDisableRipple(MdTabHeaderBase); host: { 'class': 'mat-tab-header', '[class.mat-tab-header-pagination-controls-enabled]': '_showPaginationControls', - '[class.mat-tab-header-rtl]': "_getLayoutDirection() == 'rtl'", - '(window:resize)': "_checkPaginationEnabled()" + '[class.mat-tab-header-rtl]': "_getLayoutDirection() == 'rtl'" } }) export class MdTabHeader extends _MdTabHeaderMixinBase @@ -123,6 +121,9 @@ export class MdTabHeader extends _MdTabHeaderMixinBase private _selectedIndex: number = 0; + /** subscription for the window resize handler */ + private _resizeSubscription: Subscription | null; + /** The index of the active tab. */ @Input() get selectedIndex(): number { return this._selectedIndex; } @@ -145,6 +146,11 @@ export class MdTabHeader extends _MdTabHeaderMixinBase private _changeDetectorRef: ChangeDetectorRef, @Optional() private _dir: Directionality) { super(); + + // TODO: Add library level window listener https://goo.gl/FJWhZM + this._resizeSubscription = RxChain.from(fromEvent(window, 'resize')) + .call(debounceTime, 150) + .subscribe(() => this._checkPaginationEnabled()); } ngAfterContentChecked(): void { @@ -210,6 +216,11 @@ export class MdTabHeader extends _MdTabHeaderMixinBase this._realignInkBar.unsubscribe(); this._realignInkBar = null; } + + if (this._resizeSubscription) { + this._resizeSubscription.unsubscribe(); + this._resizeSubscription = null; + } } /** From a792f6e8ab0a2ed75387713b71a24cafc0eb9171 Mon Sep 17 00:00:00 2001 From: Austin McDaniel Date: Tue, 8 Aug 2017 16:37:25 -0500 Subject: [PATCH 4/4] bug(tabs): address PR feedback --- src/lib/tabs/tab-header.ts | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/lib/tabs/tab-header.ts b/src/lib/tabs/tab-header.ts index 5144a51955de..711fa429f49c 100644 --- a/src/lib/tabs/tab-header.ts +++ b/src/lib/tabs/tab-header.ts @@ -41,6 +41,7 @@ import {merge} from 'rxjs/observable/merge'; import {fromEvent} from 'rxjs/observable/fromEvent'; import {CanDisableRipple, mixinDisableRipple} from '../core/common-behaviors/disable-ripple'; import {RxChain, debounceTime} from '@angular/cdk/rxjs'; +import {Platform} from '@angular/cdk/platform'; /** * The directions that scrolling can go in when the header's tabs exceed the header width. 'After' @@ -78,7 +79,7 @@ export const _MdTabHeaderMixinBase = mixinDisableRipple(MdTabHeaderBase); host: { 'class': 'mat-tab-header', '[class.mat-tab-header-pagination-controls-enabled]': '_showPaginationControls', - '[class.mat-tab-header-rtl]': "_getLayoutDirection() == 'rtl'" + '[class.mat-tab-header-rtl]': "_getLayoutDirection() == 'rtl'", } }) export class MdTabHeader extends _MdTabHeaderMixinBase @@ -144,13 +145,16 @@ export class MdTabHeader extends _MdTabHeaderMixinBase private _ngZone: NgZone, private _renderer: Renderer2, private _changeDetectorRef: ChangeDetectorRef, - @Optional() private _dir: Directionality) { + @Optional() private _dir: Directionality, + platform: Platform) { super(); - // TODO: Add library level window listener https://goo.gl/FJWhZM - this._resizeSubscription = RxChain.from(fromEvent(window, 'resize')) - .call(debounceTime, 150) - .subscribe(() => this._checkPaginationEnabled()); + if (platform.isBrowser) { + // TODO: Add library level window listener https://goo.gl/y25X5M + this._resizeSubscription = RxChain.from(fromEvent(window, 'resize')) + .call(debounceTime, 150) + .subscribe(() => this._checkPaginationEnabled()); + } } ngAfterContentChecked(): void {