Optimized for Angular
diff --git a/src/app/pages/homepage/homepage.ts b/src/app/pages/homepage/homepage.ts
index 0a32f1c20..8f575885a 100644
--- a/src/app/pages/homepage/homepage.ts
+++ b/src/app/pages/homepage/homepage.ts
@@ -1,4 +1,8 @@
-import { Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
+import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
+import {MdButtonModule} from '@angular/material';
+import {FooterModule} from '../../shared/footer/footer';
+import {RouterModule} from '@angular/router';
@Component({
selector: 'app-homepage',
@@ -6,3 +10,10 @@ import { Component} from '@angular/core';
styleUrls: ['./homepage.scss']
})
export class Homepage {}
+
+@NgModule({
+ imports: [SvgViewerModule, MdButtonModule, FooterModule, RouterModule],
+ exports: [Homepage],
+ declarations: [Homepage],
+})
+export class HomepageModule { }
diff --git a/src/app/pages/page-title/page-title.spec.ts b/src/app/pages/page-title/page-title.spec.ts
index d82c03a64..a07a17ea4 100644
--- a/src/app/pages/page-title/page-title.spec.ts
+++ b/src/app/pages/page-title/page-title.spec.ts
@@ -1,4 +1,3 @@
-import {async, inject, TestBed, ComponentFixture} from '@angular/core/testing';
import {ComponentPageTitle} from './page-title';
diff --git a/src/app/pages/page-title/page-title.ts b/src/app/pages/page-title/page-title.ts
index 8c93fe27b..fd509fbaf 100644
--- a/src/app/pages/page-title/page-title.ts
+++ b/src/app/pages/page-title/page-title.ts
@@ -5,7 +5,7 @@ import {Injectable} from '@angular/core';
*/
@Injectable()
export class ComponentPageTitle {
- _title: string = '';
+ _title = '';
get title(): string { return this._title; }
set title(title: string) { this._title = title; }
diff --git a/src/app/routes.ts b/src/app/routes.ts
index 413245a67..28aeb63f5 100644
--- a/src/app/routes.ts
+++ b/src/app/routes.ts
@@ -1,26 +1,46 @@
-import {ModuleWithProviders} from '@angular/core';
import {Homepage} from './pages/homepage';
import {ComponentList} from './pages/component-list';
import {GuideList} from './pages/guide-list';
-import {Routes, RouterModule} from '@angular/router';
-import {ComponentViewer} from './pages/component-viewer/component-viewer';
+import {Routes} from '@angular/router';
+import {
+ ComponentApi,
+ ComponentExamples,
+ ComponentOverview,
+ ComponentViewer
+} from './pages/component-viewer/component-viewer';
import {ComponentCategoryList} from './pages/component-category-list/component-category-list';
import {ComponentSidenav} from './pages/component-sidenav/component-sidenav';
import {GuideViewer} from './pages/guide-viewer/guide-viewer';
-const MATERIAL_DOCS_ROUTES: Routes = [
+export const MATERIAL_DOCS_ROUTES: Routes = [
{path: '', component: Homepage, pathMatch: 'full'},
+ {
+ path: 'categories',
+ component: ComponentSidenav,
+ children: [
+ {path: '', component: ComponentCategoryList},
+ {path: ':id', component: ComponentList},
+ ],
+ },
{
path: 'components',
component: ComponentSidenav,
children: [
{path: '', component: ComponentCategoryList},
- {path: 'category/:id', component: ComponentList},
- {path: 'component/:id', component: ComponentViewer},
+ {path: 'component/:id', redirectTo: ':id', pathMatch: 'full'},
+ {path: 'category/:id', redirectTo: '/categories/:id', pathMatch: 'full'},
+ {
+ path: ':id',
+ component: ComponentViewer,
+ children: [
+ {path: '', redirectTo: 'overview', pathMatch: 'full'},
+ {path: 'overview', component: ComponentOverview, pathMatch: 'full'},
+ {path: 'api', component: ComponentApi, pathMatch: 'full'},
+ {path: 'examples', component: ComponentExamples, pathMatch: 'full'},
+ ],
+ },
],
},
{path: 'guides', component: GuideList},
{path: 'guide/:id', component: GuideViewer},
];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(MATERIAL_DOCS_ROUTES);
diff --git a/src/app/shared/doc-viewer/doc-viewer-module.ts b/src/app/shared/doc-viewer/doc-viewer-module.ts
new file mode 100644
index 000000000..aa82e253e
--- /dev/null
+++ b/src/app/shared/doc-viewer/doc-viewer-module.ts
@@ -0,0 +1,30 @@
+import {DocViewer} from './doc-viewer';
+import {ExampleViewer} from '../example-viewer/example-viewer';
+import {PlunkerButtonModule} from '../plunker/plunker-button';
+import {
+ MdButtonModule,
+ MdIconModule,
+ MdTabsModule,
+ MdTooltipModule,
+ PortalModule
+} from '@angular/material';
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+
+
+// ExampleViewer is included in the DocViewerModule because they have a circular dependency.
+@NgModule({
+ imports: [
+ MdButtonModule,
+ MdIconModule,
+ MdTooltipModule,
+ MdTabsModule,
+ CommonModule,
+ PortalModule,
+ PlunkerButtonModule
+ ],
+ declarations: [DocViewer, ExampleViewer],
+ entryComponents: [ExampleViewer],
+ exports: [DocViewer, ExampleViewer],
+})
+export class DocViewerModule { }
diff --git a/src/app/shared/doc-viewer/doc-viewer.spec.ts b/src/app/shared/doc-viewer/doc-viewer.spec.ts
index cac95fe4e..ec64defac 100644
--- a/src/app/shared/doc-viewer/doc-viewer.spec.ts
+++ b/src/app/shared/doc-viewer/doc-viewer.spec.ts
@@ -1,26 +1,19 @@
import {Component} from '@angular/core';
-import {TestBed, inject, async} from '@angular/core/testing';
+import {async, inject, TestBed} from '@angular/core/testing';
import {MockBackend} from '@angular/http/testing';
-import {Response, ResponseOptions, XHRBackend} from '@angular/http';
+import {Response, ResponseOptions} from '@angular/http';
import {By} from '@angular/platform-browser';
import {DocViewer} from './doc-viewer';
-import {SharedModule} from '../shared-module';
+import {DocsAppTestingModule} from '../../testing/testing-module';
+import {DocViewerModule} from './doc-viewer-module';
describe('DocViewer', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports: [SharedModule],
- declarations: [
- DocViewerTestComponent,
- ],
- providers: [
- MockBackend,
- {provide: XHRBackend, useExisting: MockBackend},
- ]
- });
-
- TestBed.compileComponents();
+ imports: [DocViewerModule, DocsAppTestingModule],
+ declarations: [DocViewerTestComponent],
+ }).compileComponents();
}));
beforeEach(inject([MockBackend], (mockBackend: MockBackend) => {
diff --git a/src/app/shared/doc-viewer/doc-viewer.ts b/src/app/shared/doc-viewer/doc-viewer.ts
index c854422fb..acca654e9 100644
--- a/src/app/shared/doc-viewer/doc-viewer.ts
+++ b/src/app/shared/doc-viewer/doc-viewer.ts
@@ -1,15 +1,15 @@
import {
+ ApplicationRef,
Component,
- Input,
- ElementRef,
ComponentFactoryResolver,
- ViewContainerRef,
- ApplicationRef,
+ ElementRef,
Injector,
+ Input,
OnDestroy,
+ ViewContainerRef
} from '@angular/core';
import {Http} from '@angular/http';
-import {DomPortalHost, ComponentPortal} from '@angular/material';
+import {ComponentPortal, DomPortalHost} from '@angular/material';
import {ExampleViewer} from '../example-viewer/example-viewer';
diff --git a/src/app/shared/doc-viewer/index.ts b/src/app/shared/doc-viewer/index.ts
deleted file mode 100644
index 67c142bb5..000000000
--- a/src/app/shared/doc-viewer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './doc-viewer';
diff --git a/src/app/shared/documentation-items/documentation-items.spec.ts b/src/app/shared/documentation-items/documentation-items.spec.ts
index c7f9e520d..c40d9b92d 100644
--- a/src/app/shared/documentation-items/documentation-items.spec.ts
+++ b/src/app/shared/documentation-items/documentation-items.spec.ts
@@ -7,12 +7,8 @@ describe('DocViewer', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports: [],
- declarations: [],
providers: [DocumentationItems]
- });
-
- TestBed.compileComponents();
+ }).compileComponents();
}));
beforeEach(inject([DocumentationItems], (di: DocumentationItems) => {
diff --git a/src/app/shared/example-viewer/example-viewer.html b/src/app/shared/example-viewer/example-viewer.html
index fd20b857e..3c771135a 100644
--- a/src/app/shared/example-viewer/example-viewer.html
+++ b/src/app/shared/example-viewer/example-viewer.html
@@ -19,7 +19,7 @@
-
diff --git a/src/app/shared/example-viewer/example-viewer.spec.ts b/src/app/shared/example-viewer/example-viewer.spec.ts
index fb359e737..267822d76 100644
--- a/src/app/shared/example-viewer/example-viewer.spec.ts
+++ b/src/app/shared/example-viewer/example-viewer.spec.ts
@@ -1,34 +1,16 @@
-import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {CommonModule} from '@angular/common';
import {ReactiveFormsModule} from '@angular/forms';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {Http} from '@angular/http';
-import {MaterialModule} from '@angular/material';
-import {EXAMPLE_COMPONENTS, ExampleModule, LiveExample} from '@angular/material-examples';
+import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
import {ExampleViewer} from './example-viewer';
+import {DocsAppTestingModule} from '../../testing/testing-module';
+import {DocViewerModule} from '../doc-viewer/doc-viewer-module';
+import {MdAutocompleteModule, MdInputModule} from '@angular/material';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-const exampleComponentString = 'autocomplete-overview';
-
-
-// Required for the set example function
-@NgModule({
- imports: [
- ExampleModule,
- BrowserAnimationsModule,
- CommonModule,
- MaterialModule,
- ReactiveFormsModule,
- ],
- schemas: [CUSTOM_ELEMENTS_SCHEMA],
-})
-class TestAutocompleteOverviewModule {
-}
-
-
-class MockHTTP {
-}
+const exampleKey = 'autocomplete-overview';
describe('ExampleViewer', () => {
@@ -36,16 +18,18 @@ describe('ExampleViewer', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports: [MaterialModule, ReactiveFormsModule, TestAutocompleteOverviewModule],
- declarations: [ExampleViewer],
- schemas: [CUSTOM_ELEMENTS_SCHEMA],
- providers: [
- {provide: Http, useClass: MockHTTP}
- ]
- });
+ imports: [
+ DocViewerModule,
+ DocsAppTestingModule,
+ ReactiveFormsModule,
+ TestExampleModule
+ ],
+ }).compileComponents();
+ }));
+ beforeEach(() => {
fixture = TestBed.createComponent(ExampleViewer);
- }));
+ });
it('should toggle showSource boolean', () => {
const component = fixture.componentInstance;
@@ -57,11 +41,11 @@ describe('ExampleViewer', () => {
it('should set and return example properly', () => {
const component = fixture.componentInstance;
- component.example = exampleComponentString;
+ component.example = exampleKey;
fixture.detectChanges();
const data = component.exampleData;
- // TODO(jelbourn): remove `as any` once LiveExample is updated to hve optional members.
- expect(data).toEqual(EXAMPLE_COMPONENTS[exampleComponentString] as any);
+ // TODO(jelbourn): remove `as any` once LiveExample is updated to have optional members.
+ expect(data).toEqual(EXAMPLE_COMPONENTS[exampleKey] as any);
});
it('should log message about missing example', () => {
@@ -76,16 +60,32 @@ describe('ExampleViewer', () => {
it('should return assets path for example based on extension', () => {
// set example
const component = fixture.componentInstance;
- component.example = exampleComponentString;
+ component.example = exampleKey;
fixture.detectChanges();
// get example file path for each extension
const extensions = ['ts', 'css', 'html'];
const basePath = '/assets/examples/';
extensions.forEach(ext => {
- const expected = `${basePath}${exampleComponentString}-example-${ext}.html`;
+ const expected = `${basePath}${exampleKey}-example-${ext}.html`;
const actual = component.exampleFileUrl(ext);
expect(actual).toEqual(expected);
});
});
});
+
+
+// Create a version of ExampleModule for testing with only one component so that we odn't have
+// to compile all of the examples for these tests.
+@NgModule({
+ imports: [
+ MdInputModule,
+ MdAutocompleteModule,
+ CommonModule,
+ ReactiveFormsModule,
+ NoopAnimationsModule
+ ],
+ declarations: [EXAMPLE_COMPONENTS[exampleKey].component],
+ entryComponents: [EXAMPLE_COMPONENTS[exampleKey].component],
+})
+class TestExampleModule { }
diff --git a/src/app/shared/example-viewer/example-viewer.ts b/src/app/shared/example-viewer/example-viewer.ts
index 0bf075fad..a49bbd9b8 100644
--- a/src/app/shared/example-viewer/example-viewer.ts
+++ b/src/app/shared/example-viewer/example-viewer.ts
@@ -1,5 +1,4 @@
import {Component, Input} from '@angular/core';
-import {Http} from '@angular/http';
import {ComponentPortal} from '@angular/material';
import 'rxjs/add/operator/first';
@@ -21,12 +20,7 @@ export class ExampleViewer {
exampleData: LiveExample;
/** Whether the source for the example is being displayed. */
- showSource: boolean = false;
-
- /** Map of file extension (html|ts|css) to source file content. */
- sourceFileContent: Map
= new Map();
-
- constructor(private _http: Http) { }
+ showSource = false;
get example() {
return this._example;
diff --git a/src/app/shared/footer/footer.html b/src/app/shared/footer/footer.html
index 2d18f8517..e1a0371d3 100644
--- a/src/app/shared/footer/footer.html
+++ b/src/app/shared/footer/footer.html
@@ -8,7 +8,7 @@
diff --git a/src/app/shared/footer/footer.spec.ts b/src/app/shared/footer/footer.spec.ts
index fbe875e1d..eea60a733 100644
--- a/src/app/shared/footer/footer.spec.ts
+++ b/src/app/shared/footer/footer.spec.ts
@@ -1,8 +1,7 @@
-import {async, TestBed, ComponentFixture} from '@angular/core/testing';
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-import {MaterialModule} from '@angular/material';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {Footer} from './footer';
+import {Footer, FooterModule} from './footer';
+import {DocsAppTestingModule} from '../../testing/testing-module';
describe('Footer', () => {
@@ -11,14 +10,15 @@ describe('Footer', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports: [MaterialModule],
- declarations: [Footer],
- });
+ imports: [FooterModule, DocsAppTestingModule],
+ }).compileComponents();
+ }));
+ beforeEach(() => {
fixture = TestBed.createComponent(Footer);
component = fixture.componentInstance;
fixture.detectChanges();
- }));
+ });
it('should have a link to angular.io', () => {
const link = fixture
diff --git a/src/app/shared/footer/footer.ts b/src/app/shared/footer/footer.ts
index b47f446c0..3884fec4b 100644
--- a/src/app/shared/footer/footer.ts
+++ b/src/app/shared/footer/footer.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
@Component({
selector: 'app-footer',
@@ -6,3 +6,10 @@ import {Component} from '@angular/core';
styleUrls: ['./footer.scss']
})
export class Footer { }
+
+
+@NgModule({
+ exports: [Footer],
+ declarations: [Footer],
+})
+export class FooterModule {}
diff --git a/src/app/shared/guide-items/guide-items.spec.ts b/src/app/shared/guide-items/guide-items.spec.ts
index 7a561114b..cb138fa25 100644
--- a/src/app/shared/guide-items/guide-items.spec.ts
+++ b/src/app/shared/guide-items/guide-items.spec.ts
@@ -7,12 +7,8 @@ describe('GuideItems', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports: [],
- declarations: [],
providers: [GuideItems]
- });
-
- TestBed.compileComponents();
+ }).compileComponents();
}));
beforeEach(inject([GuideItems], (gi: GuideItems) => {
diff --git a/src/app/shared/navbar/navbar.html b/src/app/shared/navbar/navbar.html
index c8458a7e3..53c5adf4f 100644
--- a/src/app/shared/navbar/navbar.html
+++ b/src/app/shared/navbar/navbar.html
@@ -9,7 +9,7 @@
Components
Guides
-
+
{
@@ -11,15 +10,15 @@ describe('NavBar', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports: [MaterialModule],
- schemas: [CUSTOM_ELEMENTS_SCHEMA],
- declarations: [NavBar],
- });
+ imports: [NavBarModule, DocsAppTestingModule],
+ }).compileComponents();
+ }));
+ beforeEach(() => {
fixture = TestBed.createComponent(NavBar);
component = fixture.componentInstance;
fixture.detectChanges();
- }));
+ });
it('should have a link to material github', () => {
const githublink = 'https://github.com/angular/material2';
diff --git a/src/app/shared/navbar/navbar.ts b/src/app/shared/navbar/navbar.ts
index f9abcd3e1..82d0dcab0 100644
--- a/src/app/shared/navbar/navbar.ts
+++ b/src/app/shared/navbar/navbar.ts
@@ -1,4 +1,7 @@
-import { Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
+import {MdButtonModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
+import {ThemePickerModule} from '../theme-picker/theme-picker';
@Component({
selector: 'app-navbar',
@@ -6,3 +9,10 @@ import { Component} from '@angular/core';
styleUrls: ['./navbar.scss']
})
export class NavBar {}
+
+@NgModule({
+ imports: [MdButtonModule, RouterModule, ThemePickerModule],
+ exports: [NavBar],
+ declarations: [NavBar],
+})
+export class NavBarModule {}
diff --git a/src/app/shared/plunker/plunker-button.ts b/src/app/shared/plunker/plunker-button.ts
index 8a3c10db7..cee33d7b1 100644
--- a/src/app/shared/plunker/plunker-button.ts
+++ b/src/app/shared/plunker/plunker-button.ts
@@ -1,6 +1,7 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, NgModule} from '@angular/core';
import {PlunkerWriter} from './plunker-writer';
import {ExampleData} from '@angular/material-examples';
+import {MdButtonModule, MdIconModule, MdTooltipModule} from '@angular/material';
@Component({
selector: 'plunker-button',
@@ -23,6 +24,12 @@ export class PlunkerButton {
@Input()
set example(example: string) {
const exampleData = new ExampleData(example);
+
+ // TODO(jelbourn): remove this when bad defaults are no longer included in the source
+ exampleData.exampleFiles = [];
+ exampleData.examplePath = '';
+ exampleData.indexFilename = '';
+
this.plunkerWriter.constructPlunkerForm(exampleData).then(plunkerForm => {
this.plunkerForm = plunkerForm;
this.isDisabled = false;
@@ -41,3 +48,11 @@ export class PlunkerButton {
document.body.removeChild(this.plunkerForm);
}
}
+
+@NgModule({
+ imports: [MdTooltipModule, MdButtonModule, MdIconModule],
+ exports: [PlunkerButton],
+ declarations: [PlunkerButton],
+ providers: [PlunkerWriter],
+})
+export class PlunkerButtonModule {}
diff --git a/src/app/shared/plunker/plunker-writer.spec.ts b/src/app/shared/plunker/plunker-writer.spec.ts
index 937c1405b..6e7ece07a 100644
--- a/src/app/shared/plunker/plunker-writer.spec.ts
+++ b/src/app/shared/plunker/plunker-writer.spec.ts
@@ -1,6 +1,9 @@
import {TestBed, inject, async, flushMicrotasks, fakeAsync} from '@angular/core/testing';
import {MockBackend} from '@angular/http/testing';
-import {BaseRequestOptions, Http, Response, ResponseOptions, XHRBackend} from '@angular/http';
+import {
+ BaseRequestOptions, Http, HttpModule, Response, ResponseOptions,
+ XHRBackend
+} from '@angular/http';
import {PlunkerWriter} from './plunker-writer';
import {ExampleData} from '@angular/material-examples';
@@ -10,24 +13,15 @@ describe('PlunkerWriter', () => {
let data: ExampleData;
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports: [],
+ imports: [HttpModule],
declarations: [],
providers: [
PlunkerWriter,
- MockBackend,
BaseRequestOptions,
+ MockBackend,
{provide: XHRBackend, useExisting: MockBackend},
- {
- provide: Http,
- useFactory: (backendInstance: MockBackend, defaultOptions: BaseRequestOptions) => {
- return new Http(backendInstance, defaultOptions);
- },
- deps: [MockBackend, BaseRequestOptions]
- },
]
- });
-
- TestBed.compileComponents();
+ }).compileComponents();
}));
beforeEach(inject([MockBackend], (mockBackend: MockBackend, http: Http) => {
diff --git a/src/app/shared/shared-module.ts b/src/app/shared/shared-module.ts
deleted file mode 100644
index 7298839ca..000000000
--- a/src/app/shared/shared-module.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import {NgModule} from '@angular/core';
-import {HttpModule} from '@angular/http';
-import {MaterialModule} from '@angular/material';
-import {BrowserModule} from '@angular/platform-browser';
-import {RouterModule} from '@angular/router';
-
-import {ExampleViewer} from './example-viewer/example-viewer';
-import {DocViewer} from './doc-viewer/doc-viewer';
-import {DocumentationItems} from './documentation-items/documentation-items';
-import {PlunkerButton} from './plunker';
-import {GuideItems} from './guide-items/guide-items';
-import {ThemeStorage} from './theme-chooser/theme-storage/theme-storage';
-import {ThemeChooser} from './theme-chooser/theme-chooser';
-import {NavBar} from './navbar/navbar';
-import {SvgBuilder} from './svg-viewer/svg-builder';
-import {SvgViewer} from './svg-viewer/svg-viewer';
-
-
-@NgModule({
- imports: [
- HttpModule,
- RouterModule,
- BrowserModule,
- MaterialModule,
- ],
- declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemeChooser, SvgViewer],
- exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemeChooser, SvgViewer],
- providers: [DocumentationItems, GuideItems, ThemeStorage, SvgBuilder],
- entryComponents: [
- ExampleViewer,
- ],
-})
-export class SharedModule {}
diff --git a/src/app/shared/style-manager/style-manager.spec.ts b/src/app/shared/style-manager/style-manager.spec.ts
index df2cc14b1..fecbb1f10 100644
--- a/src/app/shared/style-manager/style-manager.spec.ts
+++ b/src/app/shared/style-manager/style-manager.spec.ts
@@ -1,4 +1,5 @@
-import {TestBed, inject} from '@angular/core/testing';
+import {inject, TestBed} from '@angular/core/testing';
+import {HttpModule} from '@angular/http';
import {StyleManager} from './style-manager';
@@ -6,6 +7,7 @@ describe('StyleManager', () => {
let styleManager: StyleManager;
beforeEach(() => TestBed.configureTestingModule({
+ imports: [HttpModule],
providers: [StyleManager]
}));
diff --git a/src/app/shared/svg-viewer/svg-builder.spec.ts b/src/app/shared/svg-viewer/svg-builder.spec.ts
deleted file mode 100644
index cf3a09aa3..000000000
--- a/src/app/shared/svg-viewer/svg-builder.spec.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-import {async, inject, TestBed} from '@angular/core/testing';
-import {HttpModule} from '@angular/http';
-import {MaterialModule} from '@angular/material';
-
-import {DocsSiteTheme} from '../theme-chooser/theme-storage/theme-storage';
-import {SvgBuilder} from './svg-builder';
-
-
-describe('SVG Builder', () => {
- const defaultData = SvgBuilder.DEFAULT_THEME;
- const black = '#000000';
- const white = '#ffffff';
- const primary = '#FFA669';
- const accent = '#F0F8FF';
- let testTheme: DocsSiteTheme;
- let template;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- imports: [MaterialModule, HttpModule],
- schemas: [CUSTOM_ELEMENTS_SCHEMA],
- providers: [SvgBuilder],
- });
- }));
-
- beforeEach(() => {
- testTheme = {
- isDark: false,
- href: 'coolland.py',
- primary: '#FFA669',
- accent,
- };
-
- template = '';
- Object.keys(defaultData).forEach(key => {
- if (defaultData[key]) {
- template += `someRandomData fill="${defaultData[key]}"`;
- }
- });
- });
-
- it('replaceColor should return a string with all instances of a hex code replaced',
- inject([SvgBuilder], (service: SvgBuilder) => {
- const oneHexCode = ``;
- const twoHexCodes = ``;
- const checkStringMissingIn = (template, search) => !~template.indexOf(search);
- const result1 = service._replaceColor(oneHexCode, black, white);
- const result2 = service._replaceColor(twoHexCodes, black, white);
- [result1, result2].forEach(result => {
- expect(checkStringMissingIn(result, black)).toBeTruthy();
- expect(checkStringMissingIn(result, white)).toBeFalsy();
- });
- }));
-
- it('should build a ThemeColors object based off a primary and secondary hex code',
- inject([SvgBuilder], (service: SvgBuilder) => {
- const result = service.createThemeColors(testTheme);
- const expectedKeys = Object.keys(defaultData);
- Object.keys(result).forEach(key => {
- expect(result[key]).toBeTruthy();
- expect(expectedKeys.find(ek => ek === key)).toBeTruthy();
- });
- }));
-
- it('replaceColorCodes will replace all instances of a previous theme\'s colors, with new ones',
- inject([SvgBuilder], (service: SvgBuilder) => {
- const colors = service.createThemeColors(testTheme);
- const newTemplate = service.replaceColorCodes(template, colors, defaultData);
- Object.keys(colors).forEach(key => {
- expect(~newTemplate.indexOf(colors[key])).toBeTruthy();
- if (defaultData[key]) {
- expect(~newTemplate.indexOf(defaultData[key])).toBeFalsy();
- }
- });
- }));
-
- it('should return a new template and theme colors when calling buildSvg',
- inject([SvgBuilder], (service: SvgBuilder) => {
- const result = service.buildSvg(testTheme, template, defaultData);
- expect(result.colors).toEqual(service.createThemeColors(testTheme));
- expect(result.newTemplate).toEqual(service.replaceColorCodes(
- template, result.colors, defaultData));
- }));
-});
diff --git a/src/app/shared/svg-viewer/svg-builder.ts b/src/app/shared/svg-viewer/svg-builder.ts
deleted file mode 100644
index 8246f8356..000000000
--- a/src/app/shared/svg-viewer/svg-builder.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import {Injectable} from '@angular/core';
-import {Http} from '@angular/http';
-
-import {DocsSiteTheme} from '../theme-chooser/theme-storage/theme-storage';
-
-import * as Color from 'color';
-
-
-// Accent isn't currently used in SVGs.. uncomment to use it again in colour schemes
-export interface ThemeColors {
- gradientPrimaryDark: string;
- gradientPrimary: string;
- washedOutPrimary: string;
- offWhitePrimary: string;
- lighterPrimary: string;
- lightPrimary: string;
- deepPrimary: string;
- primary: string;
- darkerPrimary: string;
- // accent: string;
-};
-
-
-@Injectable()
-export class SvgBuilder {
- static DEFAULT_THEME: ThemeColors = {
- gradientPrimary: '#0CBFD6',
- gradientPrimaryDark: '#05BED5',
- washedOutPrimary: '#E1F7FA',
- offWhitePrimary: '#B9EDF3',
- lighterPrimary: '#CCF2F6',
- lightPrimary: '#00BCD4',
- primary: '#89E0EB',
- deepPrimary: '#00BDD5',
- darkerPrimary: '#5CD8E7',
- // accent: '#274C51',
- };
-
- constructor(private http: Http) {
- }
-
- public buildSvg(theme: DocsSiteTheme, template: string, previousThemeColors) {
- const colors = theme ? this.createThemeColors(theme) : SvgBuilder.DEFAULT_THEME;
- const newTemplate = this.replaceColorCodes(template, colors, previousThemeColors);
- return {newTemplate, colors};
- }
-
- public createThemeColors(theme: DocsSiteTheme): ThemeColors {
- const {primary} = theme;
- return {
- primary,
- gradientPrimaryDark: Color(primary).lighten(0.3).hex(),
- gradientPrimary: Color(primary).lighten(0.4).hex(),
- washedOutPrimary: Color(primary).lighten(0.85).hex(),
- offWhitePrimary: Color(primary).lighten(0.8).hex(),
- lighterPrimary: Color(primary).lighten(0.6).hex(),
- lightPrimary: Color(primary).lighten(0.2).hex(),
- deepPrimary: Color(primary).darken(0.3).hex(),
- darkerPrimary: Color(primary).darken(0.4).hex(),
- };
- }
-
- // Used by svg-viewer class
- public getSvgAsString(path: string): Promise {
- const svgAbsPath = this._getAbsPath(path);
- return this.http.get(svgAbsPath).toPromise()
- .then((data: any) => data._body);
- }
-
- private _getAbsPath(path: string): string {
- // SVG assets all come from the /assets/ path
- const svgBasePath = 'assets/';
- return path.slice((path.indexOf(svgBasePath)-1));
- }
-
- public replaceColorCodes(template: string, colors: ThemeColors, previousThemeColors: ThemeColors): string {
- let finalTemplate = template;
- Object.keys(colors).forEach(key => {
- const prevColor = previousThemeColors[key];
- const newColor = colors[key];
- if (prevColor && newColor) {
- finalTemplate = this._replaceColor(finalTemplate, prevColor, newColor);
- }
- });
- return finalTemplate;
- }
-
- public _replaceColor(template: string, color: string, replacement: string): string {
- return template.replace(new RegExp(color, 'gi'), replacement);
- }
-}
diff --git a/src/app/shared/svg-viewer/svg-viewer.ts b/src/app/shared/svg-viewer/svg-viewer.ts
index c3c09c41e..c3c0498e5 100644
--- a/src/app/shared/svg-viewer/svg-viewer.ts
+++ b/src/app/shared/svg-viewer/svg-viewer.ts
@@ -1,80 +1,46 @@
-import {ElementRef, Component, Input} from '@angular/core';
+import {Component, ElementRef, Input, NgModule, OnInit} from '@angular/core';
import {Http} from '@angular/http';
-import {Observable} from 'rxjs/Observable';
-import {Subscription} from 'rxjs/Subscription';
-
-import {ThemeColors, SvgBuilder} from './svg-builder';
-import {ThemeStorage, DocsSiteTheme} from '../theme-chooser/theme-storage/theme-storage';
@Component({
selector: 'docs-svg-viewer',
- template: '',
+ template: '',
})
-
-export class SvgViewer {
- @Input() svgHref: string;
+export class SvgViewer implements OnInit {
+ @Input() src: string;
@Input() scaleToContainer: boolean;
- private _subscription: Subscription;
- private currTheme: DocsSiteTheme;
- private _previousThemeColors: ThemeColors = SvgBuilder.DEFAULT_THEME;
+ constructor(private elementRef: ElementRef, private http: Http) { }
- constructor(
- public themeStorage: ThemeStorage,
- public svgBuilder: SvgBuilder,
- public el: ElementRef,
- public http: Http
- ) {
- this.currTheme = this.themeStorage.getStoredTheme();
- this._subscription = this.themeStorage.onThemeUpdate
- .subscribe(theme => this.swapTheme(theme));
- }
-
- public ngAfterViewInit() {
- if (this.currTheme) {
- setTimeout(() => this.swapTheme(this.currTheme));
- } else {
- setTimeout(() => this.svgBuilder.getSvgAsString(this.svgHref)
- .then(svgString => this.injectSvg(svgString)));
- }
+ ngOnInit() {
+ this.fetchAndInlineSvgContent(this.src);
}
- public swapTheme(theme) {
- if (this._getSvgFromDom()) {
- this._convertToTheme(theme, this._getSvgFromDom());
- } else {
- this.svgBuilder.getSvgAsString(this.svgHref)
- .then(svgString => this._convertToTheme(theme, svgString));
- }
- }
-
- private _convertToTheme(theme, template) {
- const {newTemplate, colors} = this.svgBuilder.buildSvg(
- theme, template, this._previousThemeColors);
- this.injectSvg(newTemplate);
- this._previousThemeColors = colors;
- }
-
- public ngOnDestroy() {
- if (this._subscription) {
- this._subscription.unsubscribe();
- }
- }
-
- public injectSvg(template) {
- this.el.nativeElement.innerHTML = template;
+ private inlineSvgContent(template) {
+ this.elementRef.nativeElement.innerHTML = template;
if (this.scaleToContainer) {
- let svg = this.el.nativeElement.querySelector('svg');
+ let svg = this.elementRef.nativeElement.querySelector('svg');
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
}
}
- private _getSvgFromDom() {
- const svg = this.el.nativeElement.querySelector('svg');
- return svg ? this.el.nativeElement.innerHTML : null;
+ private fetchAndInlineSvgContent(path: string): void {
+ const svgAbsPath = getAbsolutePathFromSrc(path);
+ this.http.get(svgAbsPath).subscribe(svgResponse => {
+ this.inlineSvgContent(svgResponse.text());
+ });
}
}
+
+function getAbsolutePathFromSrc(src: string) {
+ return src.slice(src.indexOf('assets/') - 1);
+}
+
+@NgModule({
+ exports: [SvgViewer],
+ declarations: [SvgViewer],
+})
+export class SvgViewerModule { }
diff --git a/src/app/shared/theme-chooser/index.ts b/src/app/shared/theme-chooser/index.ts
deleted file mode 100644
index 7e7db51a4..000000000
--- a/src/app/shared/theme-chooser/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './theme-chooser';
diff --git a/src/app/shared/theme-picker/index.ts b/src/app/shared/theme-picker/index.ts
new file mode 100644
index 000000000..14aab88b0
--- /dev/null
+++ b/src/app/shared/theme-picker/index.ts
@@ -0,0 +1 @@
+export * from './theme-picker';
diff --git a/src/app/shared/theme-chooser/theme-chooser.html b/src/app/shared/theme-picker/theme-picker.html
similarity index 50%
rename from src/app/shared/theme-chooser/theme-chooser.html
rename to src/app/shared/theme-picker/theme-picker.html
index a36e27a94..13832682e 100644
--- a/src/app/shared/theme-chooser/theme-chooser.html
+++ b/src/app/shared/theme-picker/theme-picker.html
@@ -1,15 +1,15 @@
-