diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts index fcd33ff5e4..e6e3055f85 100644 --- a/aio/src/app/app.component.spec.ts +++ b/aio/src/app/app.component.spec.ts @@ -3,10 +3,12 @@ import { APP_BASE_HREF } from '@angular/common'; import { Http } from '@angular/http'; import { By } from '@angular/platform-browser'; +import { BehaviorSubject} from 'rxjs/BehaviorSubject'; import { of } from 'rxjs/observable/of'; import { AppComponent } from './app.component'; import { AppModule } from './app.module'; +import { DeviceService } from 'app/shared/device.service'; import { GaService } from 'app/shared/ga.service'; import { SearchResultsComponent } from 'app/search/search-results/search-results.component'; import { SearchBoxComponent } from 'app/search/search-box/search-box.component'; @@ -36,6 +38,7 @@ describe('AppComponent', () => { imports: [ AppModule ], providers: [ { provide: APP_BASE_HREF, useValue: '/' }, + { provide: DeviceService, useClass: TestDeviceService }, { provide: GaService, useClass: TestGaService }, { provide: Http, useClass: TestHttp }, { provide: LocationService, useFactory: () => new MockLocationService(initialUrl) }, @@ -330,6 +333,14 @@ describe('AppComponent', () => { //// test helpers //// +class TestDeviceService { + // Show sidenav next to the main doc when display width on current device is greater than this. + readonly sideBySideWidth = 1032; + // Default to "wide", desktop browser. + displayWidth = new BehaviorSubject(this.sideBySideWidth + 1); + isMobile = false; +} + class TestGaService { locationChanged = jasmine.createSpy('locationChanged'); } diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts index 1891d46792..97eb970a54 100644 --- a/aio/src/app/app.component.ts +++ b/aio/src/app/app.component.ts @@ -4,6 +4,7 @@ import { MdSidenav } from '@angular/material'; import { AutoScrollService } from 'app/shared/auto-scroll.service'; import { CurrentNode, NavigationService, NavigationViews, NavigationNode, VersionInfo } from 'app/navigation/navigation.service'; +import { DeviceService } from 'app/shared/device.service'; import { DocumentService, DocumentContents } from 'app/documents/document.service'; import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component'; import { LocationService } from 'app/shared/location.service'; @@ -11,7 +12,6 @@ import { NavMenuComponent } from 'app/layout/nav-menu/nav-menu.component'; import { SearchResultsComponent } from 'app/search/search-results/search-results.component'; import { SwUpdateNotificationsService } from 'app/sw-updates/sw-update-notifications.service'; - const sideNavView = 'SideNav'; @Component({ @@ -28,8 +28,6 @@ export class AppComponent implements OnInit { isSideBySide = false; private isSideNavDoc = false; private previousNavView: string; - // Set to 1032 to account for computed html window size - private readonly sideBySideWidth = 1032; sideNavNodes: NavigationNode[]; topMenuNodes: NavigationNode[]; @@ -58,6 +56,7 @@ export class AppComponent implements OnInit { constructor( private autoScrollService: AutoScrollService, + private deviceService: DeviceService, private documentService: DocumentService, private locationService: LocationService, private navigationService: NavigationService, @@ -93,7 +92,7 @@ export class AppComponent implements OnInit { this.swUpdateNotifications.enable(); - this.onResize(window.innerWidth); + this.deviceService.displayWidth.subscribe(width => this.onResize(width)); } // Scroll to the anchor in the hash fragment. @@ -107,9 +106,8 @@ export class AppComponent implements OnInit { this.autoScroll(); } - @HostListener('window:resize', ['$event.target.innerWidth']) onResize(width) { - this.isSideBySide = width > this.sideBySideWidth; + this.isSideBySide = width > this.deviceService.sideBySideWidth; } @HostListener('click', ['$event.target', '$event.button', '$event.ctrlKey', '$event.metaKey', '$event.altKey']) diff --git a/aio/src/app/app.module.ts b/aio/src/app/app.module.ts index 2e57d85970..6c1168a3d7 100644 --- a/aio/src/app/app.module.ts +++ b/aio/src/app/app.module.ts @@ -15,6 +15,7 @@ import { SwUpdatesModule } from 'app/sw-updates/sw-updates.module'; import { AppComponent } from 'app/app.component'; import { ApiService } from 'app/embedded/api/api.service'; +import { DeviceService } from 'app/shared/device.service'; import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component'; import { DtComponent } from 'app/layout/doc-viewer/dt.component'; import { EmbeddedModule } from 'app/embedded/embedded.module'; @@ -59,6 +60,7 @@ import { AutoScrollService } from 'app/shared/auto-scroll.service'; ], providers: [ ApiService, + DeviceService, GaService, Logger, Location, diff --git a/aio/src/app/embedded/live-example/live-example.component.html b/aio/src/app/embedded/live-example/live-example.component.html index 33a53fabb4..dafc538393 100644 --- a/aio/src/app/embedded/live-example/live-example.component.html +++ b/aio/src/app/embedded/live-example/live-example.component.html @@ -1,15 +1,18 @@ - - {{title}} - - / download example + + {{title}} (not available on mobile devices) + +
+ +
+ {{title}} +

+ You can also download this example. +

+ + + {{title}} + + / download example + -
-
- -
- {{title}} -

- You can also download this example. -

-
diff --git a/aio/src/app/embedded/live-example/live-example.component.spec.ts b/aio/src/app/embedded/live-example/live-example.component.spec.ts index e966e231a6..e07fac9889 100644 --- a/aio/src/app/embedded/live-example/live-example.component.spec.ts +++ b/aio/src/app/embedded/live-example/live-example.component.spec.ts @@ -1,9 +1,9 @@ -/* tslint:disable:no-unused-variable */ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { Component, DebugElement, ElementRef } from '@angular/core'; import { Location } from '@angular/common'; +import { DeviceService } from 'app/shared/device.service'; import { LiveExampleComponent, EmbeddedPlunkerComponent } from './live-example.component'; const defaultTestPath = '/test'; @@ -17,6 +17,13 @@ describe('LiveExampleComponent', () => { let liveExampleContent: string; //////// test helpers //////// + class TestDeviceService { + isMobile = false; + } + + class TestMobileDeviceService { + isMobile = true; + } @Component({ selector: 'aio-host-comp', @@ -54,7 +61,10 @@ describe('LiveExampleComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ declarations: [ HostComponent, LiveExampleComponent, EmbeddedPlunkerComponent ], - providers: [ {provide: Location, useClass: TestLocation }] + providers: [ + { provide: DeviceService, useClass: TestDeviceService }, + { provide: Location, useClass: TestLocation } + ] }) // Disable the