Skip to content

Commit abe3493

Browse files
tomastrajantomastrajan
committed
feat(demo): add examples content, make it runnable
1 parent 40977e0 commit abe3493

File tree

10 files changed

+147
-53
lines changed

10 files changed

+147
-53
lines changed

‎projects/elements-demo/src/app/core/core.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
22
import { RouterModule } from '@angular/router';
33
import { HighlightModule } from 'ngx-highlightjs';
44
import typescript from 'highlight.js/lib/languages/typescript';
5+
import xml from 'highlight.js/lib/languages/xml';
56

67
import { SharedModule } from '../shared/shared.module';
78

@@ -10,7 +11,7 @@ import { NavigationComponent } from './layout/navigation/navigation.component';
1011
import { FooterComponent } from './layout/footer/footer.component';
1112

1213
export function hljsLanguages() {
13-
return [{ name: 'typescript', func: typescript }];
14+
return [{ name: 'typescript', func: typescript }, { name: 'xml', func: xml }];
1415
}
1516

1617
@NgModule({

‎projects/elements-demo/src/app/core/layout/navigation/navigation.component.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,6 @@ const NAVIGATION = [
3838
{
3939
label: 'Basic',
4040
url: 'examples/basic'
41-
},
42-
{
43-
label: 'Lazy Loading',
44-
url: 'examples/lazy'
4541
}
4642
]
4743
},

‎projects/elements-demo/src/app/features/examples/basic/basic.component.html‎

Lines changed: 66 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,70 @@
1-
<h1>Basic</h1>
1+
<div class="wrapper">
2+
<h1>Basic</h1>
23

3-
<div class="content">
4-
<div class="implementation">
5-
<ng-template #error>Loading failed...</ng-template>
6-
<ng-template #loading>Loading...</ng-template>
7-
<mwc-button
8-
*axLazyElement="
9-
'https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module';
10-
loadingTemplate: loading;
11-
errorTemplate: error;
12-
module: true
13-
"
14-
raised
15-
(click)="increment()"
16-
>
17-
Increment
18-
</mwc-button>
19-
20-
Counter: {{ counter }}
4+
<h2>Plain directive</h2>
5+
<div class="content">
6+
<div class="implementation" *ngIf="!example1">
7+
<button mat-flat-button color="accent" (click)="example1 = true">
8+
<mat-icon>play_arrow</mat-icon>
9+
Run
10+
</button>
11+
</div>
12+
<div class="implementation" *ngIf="example1">
13+
<mwc-icon
14+
*axLazyElement="
15+
'https://unpkg.com/@material/mwc-icon@0.6.0/mwc-icon.js?module';
16+
module: true
17+
"
18+
>
19+
favorite
20+
</mwc-icon>
21+
</div>
22+
<div class="description">
23+
<p>
24+
The most simple example, all we need is to use element tag, for example
25+
<code>&#60;mwc-icon></code> and add
26+
<code>*axLazyElement</code> directive with the url pointing to the
27+
element implementation.
28+
</p>
29+
<pre [highlight]="codeExample1"></pre>
30+
</div>
2131
</div>
22-
<div class="description">
23-
<p>
24-
The most simple example, all we need is to use element tag, for example
25-
<code>&#60;mwc-button></code> and add
26-
<code>*axLazyElement</code> directive with the url pointing to the element
27-
implementation.
28-
</p>
32+
33+
<h2>Use loading <code>&#60;ng-template></code></h2>
34+
<div class="content">
35+
<div class="implementation" *ngIf="!example2">
36+
<button mat-flat-button color="accent" (click)="example2 = true">
37+
<mat-icon>play_arrow</mat-icon>
38+
Run
39+
</button>
40+
</div>
41+
<div class="implementation" *ngIf="example2">
42+
<ng-template #error>Loading failed...</ng-template>
43+
<ng-template #loading>Loading...</ng-template>
44+
<mwc-button
45+
*axLazyElement="
46+
'https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module';
47+
loadingTemplate: loading;
48+
errorTemplate: error;
49+
module: true
50+
"
51+
raised
52+
(click)="increment()"
53+
>
54+
Increment
55+
</mwc-button>
56+
<p>Counter: {{ counter }}</p>
57+
</div>
58+
<div class="description">
59+
<p>
60+
In this example we're loading
61+
<code>&#60;mwc-button></code> using the
62+
<code>*axLazyElement</code> directive but we're also adding
63+
<code>&#60;ng-template #loading>Loading...&#60;ng-template></code> which
64+
will display before the element was loaded (depending on your connection
65+
speed)
66+
</p>
67+
<pre [highlight]="codeExample2"></pre>
68+
</div>
2969
</div>
3070
</div>

‎projects/elements-demo/src/app/features/examples/basic/basic.component.scss‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,35 @@
1-
:host {
1+
.wrapper {
22
display: flex;
33
flex-direction: column;
44

55
.content {
66
display: flex;
7-
flex-wrap: wrap;
7+
flex-direction: column;
8+
margin: 0 0 50px 0;
89

910
.implementation {
11+
display: flex;
12+
flex-direction: column;
13+
align-items: center;
14+
justify-content: center;
1015
flex: 1;
16+
margin: 0 20px 20px 0;
17+
border: 2px solid #eee;
18+
padding: 20px;
19+
20+
p {
21+
margin: 10px 0 0 0;
22+
}
1123
}
1224

1325
.description {
1426
flex: 1.5;
1527
}
1628
}
1729
}
30+
31+
:host-context(.responsive-large) {
32+
.wrapper {
33+
width: 60%;
34+
}
35+
}

‎projects/elements-demo/src/app/features/examples/basic/basic.component.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,17 @@ import { Component, OnInit } from '@angular/core';
66
styleUrls: ['./basic.component.scss']
77
})
88
export class BasicComponent implements OnInit {
9+
// example toggles
10+
example1 = false;
11+
example2 = false;
12+
13+
// example state
914
counter = 0;
1015

16+
// example code examples
17+
codeExample1 = CODE_EXAMPLE_1;
18+
codeExample2 = CODE_EXAMPLE_2;
19+
1120
constructor() {}
1221

1322
ngOnInit() {}
@@ -16,3 +25,15 @@ export class BasicComponent implements OnInit {
1625
this.counter++;
1726
}
1827
}
28+
29+
const CODE_EXAMPLE_1 = `<!-- url = 'https://unpkg.com/@material/mwc-icon@0.6.0/mwc-icon.js?module'; -->
30+
<mwc-icon *axLazyElement="url; module: true">
31+
favorite
32+
</mwc-icon>`;
33+
34+
const CODE_EXAMPLE_2 = `<!-- url = 'https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module' -->;
35+
<ng-template #loading>Loading...</ng-template>
36+
<mwc-button *axLazyElement="url; loadingTemplate: loading; module: true"
37+
(click)="increment()">
38+
Increment
39+
</mwc-button>`;

‎projects/elements-demo/src/app/features/examples/basic/basic.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
2+
import { HighlightModule } from 'ngx-highlightjs';
23

34
import { SharedModule } from '../../../shared/shared.module';
45

@@ -8,6 +9,6 @@ import { BasicComponent } from './basic.component';
89
@NgModule({
910
schemas: [CUSTOM_ELEMENTS_SCHEMA],
1011
declarations: [BasicComponent],
11-
imports: [SharedModule, BasicRoutingModule]
12+
imports: [HighlightModule, SharedModule, BasicRoutingModule]
1213
})
1314
export class BasicModule {}

‎projects/elements-demo/src/app/features/home/home.module.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
21
import { RouterModule } from '@angular/router';
2+
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
3+
import { HighlightModule } from 'ngx-highlightjs';
34

45
import { SharedModule } from '../../shared/shared.module';
56

@@ -8,7 +9,7 @@ import { HomeComponent } from './home/home.component';
89
@NgModule({
910
schemas: [CUSTOM_ELEMENTS_SCHEMA],
1011
declarations: [HomeComponent],
11-
imports: [SharedModule, RouterModule],
12+
imports: [RouterModule, HighlightModule, SharedModule],
1213
exports: [HomeComponent]
1314
})
1415
export class HomeModule {}

‎projects/elements-demo/src/app/features/home/home/home.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ <h2>Quickstart</h2>
4848
<li>
4949
Use <code>*axLazyElement</code> directive on an element you wish to load and
5050
pass in the url of the element bundle
51+
<pre [highlight]="codeExampleComponent"></pre>
5152
</li>
5253
</ol>
5354

‎projects/elements-demo/src/app/features/home/home/home.component.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,11 @@
5858
margin: 50px 0 15px 0;
5959
}
6060

61+
pre {
62+
margin: 20px 0 0 0;
63+
line-height: 1.3em;
64+
}
65+
6166
mat-grid-list {
6267
width: 100%;
6368

‎projects/elements-demo/src/app/features/home/home/home.component.ts‎

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,33 @@ import { Observable } from 'rxjs';
33

44
import { ResponsiveLayoutService } from '../../../core/layout/responsive-layout.service';
55

6+
@Component({
7+
selector: 'demo-home',
8+
templateUrl: './home.component.html',
9+
styleUrls: ['./home.component.scss']
10+
})
11+
export class HomeComponent implements OnInit {
12+
columnCount: Observable<number>;
13+
14+
features = FEATURES;
15+
codeExampleComponent = CODE_EXAMPLE_COMPONENT;
16+
17+
constructor(private responsiveLayoutService: ResponsiveLayoutService) {}
18+
19+
ngOnInit() {
20+
this.columnCount = this.responsiveLayoutService.columnCount;
21+
}
22+
}
23+
24+
const CODE_EXAMPLE_COMPONENT = `@Component({
25+
selector: 'your-org-feature',
26+
template: '<some-element *axLazyElement="elementUrl"></some-element>'
27+
})
28+
export class FeatureComponent {
29+
elementUrl = 'https://your-org.com/elements/some-element.js';
30+
}
31+
`;
32+
633
const FEATURES = [
734
{
835
title: 'Lightweight',
@@ -47,20 +74,3 @@ const FEATURES = [
4774
icon: 'category'
4875
}
4976
];
50-
51-
@Component({
52-
selector: 'demo-home',
53-
templateUrl: './home.component.html',
54-
styleUrls: ['./home.component.scss']
55-
})
56-
export class HomeComponent implements OnInit {
57-
columnCount: Observable<number>;
58-
59-
features = FEATURES;
60-
61-
constructor(private responsiveLayoutService: ResponsiveLayoutService) {}
62-
63-
ngOnInit() {
64-
this.columnCount = this.responsiveLayoutService.columnCount;
65-
}
66-
}

0 commit comments

Comments
 (0)