Skip to content

Commit 06aef2d

Browse files
wardbellwardbell
committed
fix(aio): revert resize to HostListener; delete device svc
Angular change detection bug -> no page update on resize. Reverting to `@HostListener('window:resize', ['$event.target.innerWidth'])` cures it. Delete DeviceService which no longer serves a purpose. Adjusted affected AppComponent and LiveExample tests.
1 parent ecd0348 commit 06aef2d

6 files changed

Lines changed: 18 additions & 75 deletions

File tree

‎aio/src/app/app.component.spec.ts‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { of } from 'rxjs/observable/of';
99

1010
import { AppComponent } from './app.component';
1111
import { AppModule } from './app.module';
12-
import { DeviceService } from 'app/shared/device.service';
1312
import { GaService } from 'app/shared/ga.service';
1413
import { SearchResultsComponent } from 'app/search/search-results/search-results.component';
1514
import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
@@ -39,7 +38,6 @@ describe('AppComponent', () => {
3938
imports: [ AppModule ],
4039
providers: [
4140
{ provide: APP_BASE_HREF, useValue: '/' },
42-
{ provide: DeviceService, useClass: TestDeviceService },
4341
{ provide: GaService, useClass: TestGaService },
4442
{ provide: Http, useClass: TestHttp },
4543
{ provide: LocationService, useFactory: () => new MockLocationService(initialUrl) },
@@ -56,6 +54,7 @@ describe('AppComponent', () => {
5654
component = fixture.componentInstance;
5755
fixture.detectChanges();
5856

57+
component.onResize(1033); // wide by default
5958
docViewer = fixture.debugElement.query(By.css('aio-doc-viewer')).nativeElement;
6059
hamburger = fixture.debugElement.query(By.css('.hamburger')).nativeElement;
6160
locationService = fixture.debugElement.injector.get(LocationService) as any;
@@ -341,13 +340,6 @@ describe('AppComponent', () => {
341340

342341
//// test helpers ////
343342

344-
class TestDeviceService {
345-
// Show sidenav next to the main doc when display width on current device is greater than this.
346-
readonly sideBySideWidth = 1032;
347-
// Default to "wide", desktop browser.
348-
displayWidth = new BehaviorSubject(this.sideBySideWidth + 1);
349-
}
350-
351343
class TestGaService {
352344
locationChanged = jasmine.createSpy('locationChanged');
353345
}

‎aio/src/app/app.component.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { Title } from '@angular/platform-browser';
55

66
import { AutoScrollService } from 'app/shared/auto-scroll.service';
77
import { CurrentNode, NavigationService, NavigationViews, NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
8-
import { DeviceService } from 'app/shared/device.service';
98
import { DocumentService, DocumentContents } from 'app/documents/document.service';
109
import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
1110
import { LocationService } from 'app/shared/location.service';
@@ -30,6 +29,7 @@ export class AppComponent implements OnInit {
3029
private isSideNavDoc = false;
3130
private previousNavView: string;
3231

32+
private sideBySideWidth = 1032;
3333
sideNavNodes: NavigationNode[];
3434
topMenuNodes: NavigationNode[];
3535
versionInfo: VersionInfo;
@@ -57,7 +57,6 @@ export class AppComponent implements OnInit {
5757

5858
constructor(
5959
private autoScrollService: AutoScrollService,
60-
private deviceService: DeviceService,
6160
private documentService: DocumentService,
6261
private locationService: LocationService,
6362
private navigationService: NavigationService,
@@ -66,6 +65,8 @@ export class AppComponent implements OnInit {
6665
) { }
6766

6867
ngOnInit() {
68+
this.onResize(window.innerWidth);
69+
6970
/* No need to unsubscribe because this root component never dies */
7071

7172
this.documentService.currentDocument.subscribe(doc => {
@@ -96,8 +97,6 @@ export class AppComponent implements OnInit {
9697
this.navigationService.versionInfo.subscribe( vi => this.versionInfo = vi );
9798

9899
this.swUpdateNotifications.enable();
99-
100-
this.deviceService.displayWidth.subscribe(width => this.onResize(width));
101100
}
102101

103102
// Scroll to the anchor in the hash fragment.
@@ -111,8 +110,9 @@ export class AppComponent implements OnInit {
111110
this.autoScroll();
112111
}
113112

113+
@HostListener('window:resize', ['$event.target.innerWidth'])
114114
onResize(width) {
115-
this.isSideBySide = width > this.deviceService.sideBySideWidth;
115+
this.isSideBySide = width > this.sideBySideWidth;
116116
}
117117

118118
@HostListener('click', ['$event.target', '$event.button', '$event.ctrlKey', '$event.metaKey', '$event.altKey'])

‎aio/src/app/app.module.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import { SwUpdatesModule } from 'app/sw-updates/sw-updates.module';
1515

1616
import { AppComponent } from 'app/app.component';
1717
import { ApiService } from 'app/embedded/api/api.service';
18-
import { DeviceService } from 'app/shared/device.service';
1918
import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
2019
import { DtComponent } from 'app/layout/doc-viewer/dt.component';
2120
import { EmbeddedModule } from 'app/embedded/embedded.module';
@@ -60,7 +59,6 @@ import { AutoScrollService } from 'app/shared/auto-scroll.service';
6059
],
6160
providers: [
6261
ApiService,
63-
DeviceService,
6462
GaService,
6563
Logger,
6664
Location,

‎aio/src/app/embedded/live-example/live-example.component.spec.ts‎

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,6 @@ import { By } from '@angular/platform-browser';
33
import { Component, DebugElement, ElementRef } from '@angular/core';
44
import { Location } from '@angular/common';
55

6-
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
7-
8-
import { DeviceService } from 'app/shared/device.service';
96
import { LiveExampleComponent, EmbeddedPlunkerComponent } from './live-example.component';
107

118
const defaultTestPath = '/test';
@@ -19,14 +16,6 @@ describe('LiveExampleComponent', () => {
1916
let liveExampleContent: string;
2017

2118
//////// test helpers ////////
22-
class TestDeviceService {
23-
displayWidth = new BehaviorSubject(1001);
24-
}
25-
26-
class TestMobileDeviceService {
27-
// 1000 is the trigger width for "narrow mobile device""
28-
displayWidth = new BehaviorSubject(999);
29-
}
3019

3120
@Component({
3221
selector: 'aio-host-comp',
@@ -62,6 +51,8 @@ describe('LiveExampleComponent', () => {
6251
liveExampleDe.nativeElement.liveExampleContent = liveExampleContent;
6352

6453
fixture.detectChanges();
54+
liveExampleComponent.onResize(1033); // wide by default
55+
fixture.detectChanges();
6556
})
6657
.then(testFn);
6758
}
@@ -71,7 +62,6 @@ describe('LiveExampleComponent', () => {
7162
TestBed.configureTestingModule({
7263
declarations: [ HostComponent, LiveExampleComponent, EmbeddedPlunkerComponent ],
7364
providers: [
74-
{ provide: DeviceService, useClass: TestDeviceService },
7565
{ provide: Location, useClass: TestLocation }
7666
]
7767
})
@@ -295,15 +285,11 @@ describe('LiveExampleComponent', () => {
295285

296286
describe('when narrow display (mobile)', () => {
297287

298-
beforeEach(() => {
299-
TestBed.configureTestingModule({
300-
providers: [{ provide: DeviceService, useClass: TestMobileDeviceService }]
301-
});
302-
});
303-
304288
it('should be embedded style when no style defined', async(() => {
305289
setHostTemplate('<live-example></live-example>');
306290
testComponent(() => {
291+
liveExampleComponent.onResize(600); // narrow
292+
fixture.detectChanges();
307293
const hrefs = getHrefs();
308294
expect(hrefs[0]).toContain(defaultTestPath + '/eplnkr.html');
309295
});
@@ -312,6 +298,8 @@ describe('LiveExampleComponent', () => {
312298
it('should be embedded style even when flat-style requested', async(() => {
313299
setHostTemplate('<live-example flat-style></live-example>');
314300
testComponent(() => {
301+
liveExampleComponent.onResize(600); // narrow
302+
fixture.detectChanges();
315303
const hrefs = getHrefs();
316304
expect(hrefs[0]).toContain(defaultTestPath + '/eplnkr.html');
317305
});

‎aio/src/app/embedded/live-example/live-example.component.ts‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
/* tslint:disable component-selector */
2-
import { Component, ElementRef, Input, OnInit, OnDestroy, AfterViewInit, ViewChild } from '@angular/core';
2+
import { Component, ElementRef, HostListener, Input, OnInit, AfterViewInit, ViewChild } from '@angular/core';
33
import { Location } from '@angular/common';
44

5-
import { Subject } from 'rxjs/Subject';
6-
import 'rxjs/add/operator/takeUntil';
7-
8-
import { DeviceService } from 'app/shared/device.service';
9-
105
const defaultPlnkrImg = 'plunker/placeholder.png';
116
const imageBase = 'assets/images/';
127
const liveExampleBase = 'content/live-examples/';
@@ -68,7 +63,7 @@ const zipBase = 'content/zips/';
6863
selector: 'live-example',
6964
templateUrl: 'live-example.component.html'
7065
})
71-
export class LiveExampleComponent implements OnInit, OnDestroy {
66+
export class LiveExampleComponent implements OnInit {
7267

7368
// Will force to embedded-style when viewport width is narrow
7469
// "narrow" value was picked based on phone dimensions from http://screensiz.es/phone
@@ -79,7 +74,6 @@ export class LiveExampleComponent implements OnInit, OnDestroy {
7974
exampleDir: string;
8075
isEmbedded = false;
8176
mode = 'disabled';
82-
onDestroy = new Subject();
8377
plnkr: string;
8478
plnkrName: string;
8579
plnkrImg: string;
@@ -88,7 +82,6 @@ export class LiveExampleComponent implements OnInit, OnDestroy {
8882
zip: string;
8983

9084
constructor(
91-
private deviceService: DeviceService,
9285
private elementRef: ElementRef,
9386
location: Location ) {
9487

@@ -154,12 +147,12 @@ export class LiveExampleComponent implements OnInit, OnDestroy {
154147
// Angular will sanitize this title when displayed so should be plain text.
155148
const title = this.elementRef.nativeElement.liveExampleContent;
156149
this.title = (title || this.attrs.title || 'live example').trim();
157-
158-
this.deviceService.displayWidth.takeUntil(this.onDestroy).subscribe(width => this.calcPlnkrLink(width));
150+
this.onResize(window.innerWidth);
159151
}
160152

161-
ngOnDestroy() {
162-
this.onDestroy.next();
153+
@HostListener('window:resize', ['$event.target.innerWidth'])
154+
onResize(width) {
155+
this.calcPlnkrLink(width);
163156
}
164157

165158
toggleEmbedded () { this.showEmbedded = !this.showEmbedded; }

‎aio/src/app/shared/device.service.ts‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

0 commit comments

Comments
 (0)