Skip to content

Commit 97686ca

Browse files
l-linl-lin
committed
Improve demo perf...by removing materialize js file
1 parent 354b738 commit 97686ca

23 files changed

+57
-63
lines changed

‎demo/angular-cli.json

-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
"scripts": [
2828
"../node_modules/jquery/dist/jquery.js",
2929
"../node_modules/tether/dist/js/tether.js",
30-
"../node_modules/materialize-css/dist/js/materialize.js",
3130
"../node_modules/datatables.net/js/jquery.dataTables.js"
3231
],
3332
"environments": {

‎demo/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"highlight.js": "9.8.0",
3333
"jquery": "3.1.0",
3434
"materialize-css": "0.97.8",
35+
"ng2-simple-page-scroll": "2.0.0",
3536
"rxjs": "5.0.0-beta.12",
3637
"tether": "1.3.8",
3738
"ts-helpers": "1.1.1",

‎demo/src/app/advanced/dt-instance-snippet.component.ts

+2
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ import { Component } from '@angular/core';
44
selector: 'dt-instance-snippet',
55
template: `
66
<div id="html" class="col s12 m9 l12">
7+
<h4 class="header">HTML</h4>
78
<section [innerHTML]="htmlSnippet" highlight-js-content=".xml"></section>
89
</div>
910
<div id="ts" class="col s12 m9 l12">
11+
<h4 class="header">Typescript</h4>
1012
<section [innerHTML]="tsSnippet" highlight-js-content=".typescript"></section>
1113
</div>
1214
`

‎demo/src/app/advanced/dt-instance.component.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,14 @@ <h1 class="header center-on-small-only">Getting the DataTable instance</h1>
1515
The html element provides a promise that returns the instance of the DataTable.
1616
</p>
1717
<div class="col s12 m9 l12 showcase-tabs">
18-
<ul class="tabs">
19-
<li class="tab col s4"><a (click)="$event.preventDefault()" href="#preview">Preview</a></li>
20-
<li class="tab col s4"><a (click)="$event.preventDefault()" href="#html">HTML</a></li>
21-
<li class="tab col s3"><a (click)="$event.preventDefault()" href="#ts">Typescript</a></li>
18+
<ul class="anchor-links">
19+
<li class="col s4"><a class="waves-effect btn" simplePageScroll href="#preview">Preview</a></li>
20+
<li class="col s4"><a class="waves-effect btn" simplePageScroll href="#html">HTML</a></li>
21+
<li class="col s3"><a class="waves-effect btn" simplePageScroll href="#ts">Typescript</a></li>
2222
</ul>
2323
</div>
2424
<div id="preview" class="col s12 m9 l12">
25+
<h4 class="header">Preview</h4>
2526
<p>
2627
<button type="button" class="btn waves-effect waves-light blue" (click)="displayToConsole(datatableElement)">
2728
Display the DataTable instance in the console

‎demo/src/app/advanced/dt-instance.component.ts

-6
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import { Component, OnInit, ViewChild } from '@angular/core';
22

33
import { DataTableDirective } from 'angular-datatables';
44

5-
declare var $: any;
6-
75
@Component({
86
selector: 'dt-instance',
97
templateUrl: 'dt-instance.component.html'
@@ -33,8 +31,4 @@ export class DtInstanceComponent implements OnInit {
3331
}]
3432
};
3533
}
36-
37-
ngAfterViewInit(): void {
38-
$('ul.tabs').tabs();
39-
}
4034
}

‎demo/src/app/advanced/row-click-event-snippet.component.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ import { Component } from '@angular/core';
44
selector: 'row-click-event-snippet',
55
template: `
66
<div id="html" class="col s12 m9 l12">
7+
<h4 class="header">HTML</h4>
78
<section [innerHTML]="htmlSnippet" highlight-js-content=".xml"></section>
89
</div>
910
<div id="ts" class="col s12 m9 l12">
11+
<h4 class="header">Typescript</h4>
1012
<section [innerHTML]="tsSnippet" highlight-js-content=".typescript"></section>
1113
</div>
1214
`
@@ -17,7 +19,7 @@ export class RowClickEventSnippetComponent {
1719
<code class="xml highlight">&lt;blockquote&gt;Please click on a row&lt;/blockquote&gt;
1820
&lt;p class="text-danger"&gt;You clicked on: &lt;strong&gt;{{ message }}&lt;/strong&gt;&lt;/p&gt;
1921
&lt;br /&gt;
20-
&lt;table datatable [dtOptions]="dtOptions" class="row-border hover"&gt;&lt;/table&gt;
22+
&lt;table datatable [dtOptions]="dtOptions" class="row-border hover"&gt;&lt;/table&gt;</code>
2123
</pre>
2224
`;
2325

‎demo/src/app/advanced/row-click-event.component.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,14 @@ <h1 class="header center-on-small-only">Row click event</h1>
1515
Simple example to bind a click event on each row of the DataTable with the help of <a href="http://datatables.net/reference/option/rowCallback">rowCallback</a>.
1616
</p>
1717
<div class="col s12 m9 l12 showcase-tabs">
18-
<ul class="tabs">
19-
<li class="tab col s4"><a (click)="$event.preventDefault()" href="#preview">Preview</a></li>
20-
<li class="tab col s4"><a (click)="$event.preventDefault()" href="#html">HTML</a></li>
21-
<li class="tab col s3"><a (click)="$event.preventDefault()" href="#ts">Typescript</a></li>
18+
<ul class="anchor-links">
19+
<li class="col s4"><a class="waves-effect btn" simplePageScroll href="#preview">Preview</a></li>
20+
<li class="col s4"><a class="waves-effect btn" simplePageScroll href="#html">HTML</a></li>
21+
<li class="col s3"><a class="waves-effect btn" simplePageScroll href="#ts">Typescript</a></li>
2222
</ul>
2323
</div>
2424
<div id="preview" class="col s12 m9 l12">
25+
<h4 class="header">Preview</h4>
2526
<blockquote>Please click on a row</blockquote>
2627
<p class="text-danger">You clicked on: <strong>{{ message }}</strong></p>
2728
<br />

‎demo/src/app/advanced/row-click-event.component.ts

-4
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,4 @@ export class RowClickEventComponent implements OnInit {
4141
}
4242
};
4343
}
44-
45-
ngAfterViewInit(): void {
46-
$('ul.tabs').tabs();
47-
}
4844
}

‎demo/src/app/app.component.css

+4
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ ul.side-nav.fixed ul.collapsible-accordion .collapsible-body li a {
2222
padding: 0 37.5px 0 45px;
2323
}
2424

25+
.collapsible-body {
26+
display: block;
27+
}
28+
2529
.logo h3 {
2630
font-size: 20px;
2731
text-align: center;

‎demo/src/app/app.component.ts

-6
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,11 @@ import { Component, ElementRef } from '@angular/core';
22

33
import { HighlightJsService } from 'angular2-highlight-js';
44

5-
declare var $: any;
6-
75
@Component({
86
selector: 'app-root',
97
templateUrl: './app.component.html',
108
styleUrls: ['./app.component.css']
119
})
1210
export class AppComponent {
1311
title = 'Angular DataTables examples';
14-
15-
ngAfterViewInit(): void {
16-
$('.button-collapse').sideNav();
17-
}
1812
}

‎demo/src/app/app.module.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { HttpModule } from '@angular/http';
55

66
import { HighlightJsModule, HighlightJsService } from 'angular2-highlight-js';
77

8+
import { Ng2SimplePageScrollModule } from 'ng2-simple-page-scroll';
9+
810
import { DataTablesModule } from 'angular-datatables';
911

1012
import { AppRoutingModule } from './app.routing';
@@ -51,7 +53,8 @@ import { RowClickEventSnippetComponent } from './advanced/row-click-event-snippe
5153
HighlightJsModule,
5254
HttpModule,
5355
DataTablesModule,
54-
AppRoutingModule
56+
AppRoutingModule,
57+
Ng2SimplePageScrollModule.forRoot()
5558
],
5659
providers: [
5760
HighlightJsService

‎demo/src/app/basic/with-ajax-snippet.component.ts

+3
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,15 @@ import { Component } from '@angular/core';
44
selector: 'with-ajax-snippet',
55
template: `
66
<div id="html" class="col s12 m9 l12">
7+
<h4 class="header">HTML</h4>
78
<section [innerHTML]="htmlSnippet" highlight-js-content=".xml"></section>
89
</div>
910
<div id="ts" class="col s12 m9 l12">
11+
<h4 class="header">Typescript</h4>
1012
<section [innerHTML]="tsSnippet" highlight-js-content=".typescript"></section>
1113
</div>
1214
<div id="data" class="col s12 m9 l12">
15+
<h4 class="header">Example data</h4>
1316
<section [innerHTML]="dataSnippet" highlight-js-content=".json"></section>
1417
</div>
1518
`

‎demo/src/app/basic/with-ajax.component.html

+6-5
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,15 @@ <h1 class="header center-on-small-only">With ajax</h1>
1515
You can also fetch the data from a server using an Ajax call.
1616
</p>
1717
<div class="col s12 m9 l12 showcase-tabs">
18-
<ul class="tabs">
19-
<li class="tab col s3"><a (click)="$event.preventDefault()" href="#preview">Preview</a></li>
20-
<li class="tab col s3"><a (click)="$event.preventDefault()" href="#html">HTML</a></li>
21-
<li class="tab col s3"><a (click)="$event.preventDefault()" href="#ts">Typescript</a></li>
22-
<li class="tab col s2"><a (click)="$event.preventDefault()" href="#data">Example data</a></li>
18+
<ul class="anchor-links">
19+
<li class="col s3"><a class="waves-effect btn" simplePageScroll href="#preview">Preview</a></li>
20+
<li class="col s3"><a class="waves-effect btn" simplePageScroll href="#html">HTML</a></li>
21+
<li class="col s3"><a class="waves-effect btn" simplePageScroll href="#ts">Typescript</a></li>
22+
<li class="col s2"><a class="waves-effect btn" simplePageScroll href="#data">Example data</a></li>
2323
</ul>
2424
</div>
2525
<div id="preview" class="col s12 m9 l12">
26+
<h4 class="header">Preview</h4>
2627
<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
2728
</div>
2829
<with-ajax-snippet></with-ajax-snippet>

‎demo/src/app/basic/with-ajax.component.ts

-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { Component, OnInit } from '@angular/core';
22

3-
declare var $: any;
4-
53
@Component({
64
selector: 'with-ajax',
75
templateUrl: 'with-ajax.component.html'
@@ -24,8 +22,4 @@ export class WithAjaxComponent implements OnInit {
2422
}]
2523
};
2624
}
27-
28-
ngAfterViewInit(): void {
29-
$('ul.tabs').tabs();
30-
}
3125
}

‎demo/src/app/basic/with-options-snippet.component.ts

+2
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ import { Component } from '@angular/core';
44
selector: 'with-options-snippet',
55
template: `
66
<div id="html" class="col s12 m9 l12">
7+
<h4 class="header">HTML</h4>
78
<section [innerHTML]="htmlSnippet" highlight-js-content=".xml"></section>
89
</div>
910
<div id="ts" class="col s12 m9 l12">
11+
<h4 class="header">Typescript</h4>
1012
<section [innerHTML]="tsSnippet" highlight-js-content=".typescript"></section>
1113
</div>
1214
`

‎demo/src/app/basic/with-options.component.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,14 @@ <h1 class="header center-on-small-only">With options</h1>
1515
You need to provide the <code>dtOptions</code> in the input.
1616
</p>
1717
<div class="col s12 m9 l12 showcase-tabs">
18-
<ul class="tabs">
19-
<li class="tab col s4"><a (click)="$event.preventDefault()" href="#preview">Preview</a></li>
20-
<li class="tab col s4"><a (click)="$event.preventDefault()" href="#html">HTML</a></li>
21-
<li class="tab col s3"><a (click)="$event.preventDefault()" href="#ts">Typescript</a></li>
18+
<ul class="anchor-links">
19+
<li class="col s4"><a class="waves-effect btn" simplePageScroll href="#preview">Preview</a></li>
20+
<li class="col s4"><a class="waves-effect btn" simplePageScroll href="#html">HTML</a></li>
21+
<li class="col s3"><a class="waves-effect btn" simplePageScroll href="#ts">Typescript</a></li>
2222
</ul>
2323
</div>
2424
<div id="preview" class="col s12 m9 l12">
25+
<h4 class="header">Preview</h4>
2526
<table datatable [dtOptions]="dtOptions" class="row-border hover">
2627
<thead>
2728
<tr>

‎demo/src/app/basic/with-options.component.ts

-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { Component, OnInit } from '@angular/core';
22

3-
declare var $: any;
4-
53
@Component({
64
selector: 'with-options',
75
templateUrl: 'with-options.component.html'
@@ -15,8 +13,4 @@ export class WithOptionsComponent implements OnInit {
1513
paginationType: 'full_numbers'
1614
};
1715
}
18-
19-
ngAfterViewInit(): void {
20-
$('ul.tabs').tabs();
21-
}
2216
}

‎demo/src/app/basic/zero-config-snippet.component.ts

+2
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ import { Component } from '@angular/core';
44
selector: 'zero-config-snippet',
55
template: `
66
<div id="html" class="col s12 m9 l12">
7+
<h4 class="header">HTML</h4>
78
<section [innerHTML]="htmlSnippet" highlight-js-content=".xml"></section>
89
</div>
910
<div id="ts" class="col s12 m9 l12">
11+
<h4 class="header">Typescript</h4>
1012
<section [innerHTML]="tsSnippet" highlight-js-content=".typescript"></section>
1113
</div>
1214
`

‎demo/src/app/basic/zero-config.component.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,14 @@ <h1 class="header center-on-small-only">Zero configuration</h1>
1515
The <code>angular-datatables</code> provides a <code>datatables</code> directive you can add to your <code>&lt;table&gt;</code>.
1616
</p>
1717
<div class="col s12 m9 l12 showcase-tabs">
18-
<ul class="tabs">
19-
<li class="tab col s4"><a (click)="$event.preventDefault()" href="#preview">Preview</a></li>
20-
<li class="tab col s4"><a (click)="$event.preventDefault()" href="#html">HTML</a></li>
21-
<li class="tab col s3"><a (click)="$event.preventDefault()" href="#ts">Typescript</a></li>
18+
<ul class="anchor-links">
19+
<li class="col s4"><a class="waves-effect btn" simplePageScroll href="#preview">Preview</a></li>
20+
<li class="col s4"><a class="waves-effect btn" simplePageScroll href="#html">HTML</a></li>
21+
<li class="col s3"><a class="waves-effect btn" simplePageScroll href="#ts">Typescript</a></li>
2222
</ul>
2323
</div>
2424
<div id="preview" class="col s12 m9 l12">
25+
<h4 class="header">Preview</h4>
2526
<table datatable class="row-border hover">
2627
<thead>
2728
<tr>

‎demo/src/app/basic/zero-config.component.ts

-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
import { Component } from '@angular/core';
22

3-
declare var $:any;
4-
53
@Component({
64
selector: 'zero-config',
75
templateUrl: 'zero-config.component.html'
86
})
97
export class ZeroConfigComponent {
10-
ngAfterViewInit(): void {
11-
$('ul.tabs').tabs();
12-
}
138
}

‎demo/src/app/getting-started.component.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ <h2 class="header">Installation</h2>
2020
</p>
2121
<div class="col s12">
2222
<h4>Angular-CLI version 1.0.0-beta.21</h4>
23-
<p>I recommend using <a href="">angular-cli</a> to create and manage your angular2 project</p>
23+
<p>I recommend using <a href="https://github.com/angular/angular-cli">angular-cli</a> to create and manage your angular2 project</p>
2424
<p>
2525
Since Angular-CLI is still in beta, I prefer to warn you the demo was developpped in version <b>1.0.0-beta.21</b> and newer version of Angular-CLI may need to have different configuration.
2626
</p>
@@ -33,14 +33,14 @@ <h4>NPM</h4>
3333
</div>
3434

3535
<div class="section">
36-
<h2 class="header">Setup</h2>
36+
<h2 class="header" id="setup">Setup</h2>
3737
<div class="col s12">
38-
<h4>angular-cli.json</h4>
38+
<h4 id="angular-cli">angular-cli.json</h4>
3939
<p>Add the dependencies in the scripts and styles attributes:</p>
4040
<section [innerHTML]="angularCliJsonSnippet" highlight-js-content=".json"></section>
4141
</div>
4242
<div class="col s12">
43-
<h4>NgModule</h4>
43+
<h4 id="ng-module">NgModule</h4>
4444
<p>
4545
Import the <code>DataTablesModule</code> at the appropriate level of your app.
4646
See the <a href="https://github.com/angular/angular-cli#3rd-party-library-installation">angular-cli documentation</a> for more information about installing 3rd party libraries.

‎demo/src/app/getting-started.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ import { BrowserModule } from '@angular/platform-browser';
3838
3939
import { DataTablesModule } from 'angular-datatables';
4040
41-
import { AppComponent } from './app.component';
41+
import { AppComponent } from './app.component';
4242
4343
@NgModule({
4444
declarations: [
@@ -47,7 +47,7 @@ import { AppComponent } from './app.component';
4747
imports: [
4848
BrowserModule,
4949
50-
DataTablesModule,
50+
DataTablesModule
5151
],
5252
providers: [],
5353
bootstrap: [ AppComponent ]

‎demo/src/styles.css

+4
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@ footer.page-footer {
6363
background-color: #66ceff;
6464
}
6565

66+
.anchor-links {
67+
text-align: center;
68+
}
69+
6670
.showcase-tabs {
6771
margin-bottom: 20px;
6872
}

0 commit comments

Comments
 (0)