Improve demo perf...by removing materialize js file

l-lin · l-lin · commit 97686ca13fea · 2017-01-13T10:41:26.000+01:00
diff --git a/demo/angular-cli.json b/demo/angular-cli.json
@@ -27,7 +27,6 @@
       "scripts": [
         "../node_modules/jquery/dist/jquery.js",
         "../node_modules/tether/dist/js/tether.js",
-        "../node_modules/materialize-css/dist/js/materialize.js",
         "../node_modules/datatables.net/js/jquery.dataTables.js"
       ],
       "environments": {
diff --git a/demo/package.json b/demo/package.json
@@ -32,6 +32,7 @@
     "highlight.js": "9.8.0",
     "jquery": "3.1.0",
     "materialize-css": "0.97.8",
+    "ng2-simple-page-scroll": "2.0.0",
     "rxjs": "5.0.0-beta.12",
     "tether": "1.3.8",
     "ts-helpers": "1.1.1",
diff --git a/demo/src/app/advanced/dt-instance-snippet.component.ts b/demo/src/app/advanced/dt-instance-snippet.component.ts
@@ -4,9 +4,11 @@ import { Component } from '@angular/core';
   selector: 'dt-instance-snippet',
   template: `
   <div id="html" class="col s12 m9 l12">
+    <h4 class="header">HTML</h4>
     <section [innerHTML]="htmlSnippet" highlight-js-content=".xml"></section>
   </div>
   <div id="ts" class="col s12 m9 l12">
+    <h4 class="header">Typescript</h4>
     <section [innerHTML]="tsSnippet" highlight-js-content=".typescript"></section>
   </div>
   `
diff --git a/demo/src/app/advanced/dt-instance.component.html b/demo/src/app/advanced/dt-instance.component.html
@@ -15,13 +15,14 @@ <h1 class="header center-on-small-only">Getting the DataTable instance</h1>
           The html element provides a promise that returns the instance of the DataTable.
         </p>
         <div class="col s12 m9 l12 showcase-tabs">
-          <ul class="tabs">
-            <li class="tab col s4"><a (click)="$event.preventDefault()" href="#preview">Preview</a></li>
-            <li class="tab col s4"><a (click)="$event.preventDefault()" href="#html">HTML</a></li>
-            <li class="tab col s3"><a (click)="$event.preventDefault()" href="#ts">Typescript</a></li>
+          <ul class="anchor-links">
+            <li class="col s4"><a class="waves-effect btn" simplePageScroll href="#preview">Preview</a></li>
+            <li class="col s4"><a class="waves-effect btn" simplePageScroll href="#html">HTML</a></li>
+            <li class="col s3"><a class="waves-effect btn" simplePageScroll href="#ts">Typescript</a></li>
           </ul>
         </div>
         <div id="preview" class="col s12 m9 l12">
+          <h4 class="header">Preview</h4>
           <p>
             <button type="button" class="btn waves-effect waves-light blue" (click)="displayToConsole(datatableElement)">
               Display the DataTable instance in the console
diff --git a/demo/src/app/advanced/dt-instance.component.ts b/demo/src/app/advanced/dt-instance.component.ts
@@ -2,8 +2,6 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 
 import { DataTableDirective } from 'angular-datatables';
 
-declare var $: any;
-
 @Component({
   selector: 'dt-instance',
   templateUrl: 'dt-instance.component.html'
@@ -33,8 +31,4 @@ export class DtInstanceComponent implements OnInit {
       }]
     };
   }
-
-  ngAfterViewInit(): void {
-    $('ul.tabs').tabs();
-  }
 }
diff --git a/demo/src/app/advanced/row-click-event-snippet.component.ts b/demo/src/app/advanced/row-click-event-snippet.component.ts
@@ -4,9 +4,11 @@ import { Component } from '@angular/core';
   selector: 'row-click-event-snippet',
   template: `
   <div id="html" class="col s12 m9 l12">
+    <h4 class="header">HTML</h4>
     <section [innerHTML]="htmlSnippet" highlight-js-content=".xml"></section>
   </div>
   <div id="ts" class="col s12 m9 l12">
+    <h4 class="header">Typescript</h4>
     <section [innerHTML]="tsSnippet" highlight-js-content=".typescript"></section>
   </div>
   `
@@ -17,7 +19,7 @@ export class RowClickEventSnippetComponent {
 <code class="xml highlight">&lt;blockquote&gt;Please click on a row&lt;/blockquote&gt;
 &lt;p class="text-danger"&gt;You clicked on: &lt;strong&gt;{{ message }}&lt;/strong&gt;&lt;/p&gt;
 &lt;br /&gt;
-&lt;table datatable [dtOptions]="dtOptions" class="row-border hover"&gt;&lt;/table&gt;
+&lt;table datatable [dtOptions]="dtOptions" class="row-border hover"&gt;&lt;/table&gt;</code>
 </pre>
   `;
 
diff --git a/demo/src/app/advanced/row-click-event.component.html b/demo/src/app/advanced/row-click-event.component.html
@@ -15,13 +15,14 @@ <h1 class="header center-on-small-only">Row click event</h1>
           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>.
         </p>
         <div class="col s12 m9 l12 showcase-tabs">
-          <ul class="tabs">
-            <li class="tab col s4"><a (click)="$event.preventDefault()" href="#preview">Preview</a></li>
-            <li class="tab col s4"><a (click)="$event.preventDefault()" href="#html">HTML</a></li>
-            <li class="tab col s3"><a (click)="$event.preventDefault()" href="#ts">Typescript</a></li>
+          <ul class="anchor-links">
+            <li class="col s4"><a class="waves-effect btn" simplePageScroll href="#preview">Preview</a></li>
+            <li class="col s4"><a class="waves-effect btn" simplePageScroll href="#html">HTML</a></li>
+            <li class="col s3"><a class="waves-effect btn" simplePageScroll href="#ts">Typescript</a></li>
           </ul>
         </div>
         <div id="preview" class="col s12 m9 l12">
+          <h4 class="header">Preview</h4>
           <blockquote>Please click on a row</blockquote>
           <p class="text-danger">You clicked on: <strong>{{ message }}</strong></p>
           <br />
diff --git a/demo/src/app/advanced/row-click-event.component.ts b/demo/src/app/advanced/row-click-event.component.ts
@@ -41,8 +41,4 @@ export class RowClickEventComponent implements OnInit {
       }
     };
   }
-
-  ngAfterViewInit(): void {
-    $('ul.tabs').tabs();
-  }
 }
diff --git a/demo/src/app/app.component.css b/demo/src/app/app.component.css
@@ -22,6 +22,10 @@ ul.side-nav.fixed ul.collapsible-accordion .collapsible-body li a {
   padding: 0 37.5px 0 45px;
 }
 
+.collapsible-body {
+  display: block;
+}
+
 .logo h3 {
   font-size: 20px;
   text-align: center;
diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
@@ -2,17 +2,11 @@ import { Component, ElementRef } from '@angular/core';
 
 import { HighlightJsService } from 'angular2-highlight-js';
 
-declare var $: any;
-
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
   title = 'Angular DataTables examples';
-
-  ngAfterViewInit(): void {
-    $('.button-collapse').sideNav();
-  }
 }
diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
@@ -5,6 +5,8 @@ import { HttpModule } from '@angular/http';
 
 import { HighlightJsModule, HighlightJsService } from 'angular2-highlight-js';
 
+import { Ng2SimplePageScrollModule } from 'ng2-simple-page-scroll';
+
 import { DataTablesModule } from 'angular-datatables';
 
 import { AppRoutingModule } from './app.routing';
@@ -51,7 +53,8 @@ import { RowClickEventSnippetComponent } from './advanced/row-click-event-snippe
     HighlightJsModule,
     HttpModule,
     DataTablesModule,
-    AppRoutingModule
+    AppRoutingModule,
+    Ng2SimplePageScrollModule.forRoot()
   ],
   providers: [
     HighlightJsService
diff --git a/demo/src/app/basic/with-ajax-snippet.component.ts b/demo/src/app/basic/with-ajax-snippet.component.ts
@@ -4,12 +4,15 @@ import { Component } from '@angular/core';
   selector: 'with-ajax-snippet',
   template: `
   <div id="html" class="col s12 m9 l12">
+    <h4 class="header">HTML</h4>
     <section [innerHTML]="htmlSnippet" highlight-js-content=".xml"></section>
   </div>
   <div id="ts" class="col s12 m9 l12">
+    <h4 class="header">Typescript</h4>
     <section [innerHTML]="tsSnippet" highlight-js-content=".typescript"></section>
   </div>
   <div id="data" class="col s12 m9 l12">
+    <h4 class="header">Example data</h4>
     <section [innerHTML]="dataSnippet" highlight-js-content=".json"></section>
   </div>
   `
diff --git a/demo/src/app/basic/with-ajax.component.html b/demo/src/app/basic/with-ajax.component.html
@@ -15,14 +15,15 @@ <h1 class="header center-on-small-only">With ajax</h1>
           You can also fetch the data from a server using an Ajax call.
         </p>
         <div class="col s12 m9 l12 showcase-tabs">
-          <ul class="tabs">
-            <li class="tab col s3"><a (click)="$event.preventDefault()" href="#preview">Preview</a></li>
-            <li class="tab col s3"><a (click)="$event.preventDefault()" href="#html">HTML</a></li>
-            <li class="tab col s3"><a (click)="$event.preventDefault()" href="#ts">Typescript</a></li>
-            <li class="tab col s2"><a (click)="$event.preventDefault()" href="#data">Example data</a></li>
+          <ul class="anchor-links">
+            <li class="col s3"><a class="waves-effect btn" simplePageScroll href="#preview">Preview</a></li>
+            <li class="col s3"><a class="waves-effect btn" simplePageScroll href="#html">HTML</a></li>
+            <li class="col s3"><a class="waves-effect btn" simplePageScroll href="#ts">Typescript</a></li>
+            <li class="col s2"><a class="waves-effect btn" simplePageScroll href="#data">Example data</a></li>
           </ul>
         </div>
         <div id="preview" class="col s12 m9 l12">
+          <h4 class="header">Preview</h4>
           <table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
         </div>
         <with-ajax-snippet></with-ajax-snippet>
diff --git a/demo/src/app/basic/with-ajax.component.ts b/demo/src/app/basic/with-ajax.component.ts
@@ -1,7 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 
-declare var $: any;
-
 @Component({
   selector: 'with-ajax',
   templateUrl: 'with-ajax.component.html'
@@ -24,8 +22,4 @@ export class WithAjaxComponent implements OnInit {
       }]
     };
   }
-
-  ngAfterViewInit(): void {
-    $('ul.tabs').tabs();
-  }
 }
diff --git a/demo/src/app/basic/with-options-snippet.component.ts b/demo/src/app/basic/with-options-snippet.component.ts
@@ -4,9 +4,11 @@ import { Component } from '@angular/core';
   selector: 'with-options-snippet',
   template: `
   <div id="html" class="col s12 m9 l12">
+    <h4 class="header">HTML</h4>
     <section [innerHTML]="htmlSnippet" highlight-js-content=".xml"></section>
   </div>
   <div id="ts" class="col s12 m9 l12">
+    <h4 class="header">Typescript</h4>
     <section [innerHTML]="tsSnippet" highlight-js-content=".typescript"></section>
   </div>
   `
diff --git a/demo/src/app/basic/with-options.component.html b/demo/src/app/basic/with-options.component.html
@@ -15,13 +15,14 @@ <h1 class="header center-on-small-only">With options</h1>
           You need to provide the <code>dtOptions</code> in the input.
         </p>
         <div class="col s12 m9 l12 showcase-tabs">
-          <ul class="tabs">
-            <li class="tab col s4"><a (click)="$event.preventDefault()" href="#preview">Preview</a></li>
-            <li class="tab col s4"><a (click)="$event.preventDefault()" href="#html">HTML</a></li>
-            <li class="tab col s3"><a (click)="$event.preventDefault()" href="#ts">Typescript</a></li>
+          <ul class="anchor-links">
+            <li class="col s4"><a class="waves-effect btn" simplePageScroll href="#preview">Preview</a></li>
+            <li class="col s4"><a class="waves-effect btn" simplePageScroll href="#html">HTML</a></li>
+            <li class="col s3"><a class="waves-effect btn" simplePageScroll href="#ts">Typescript</a></li>
           </ul>
         </div>
         <div id="preview" class="col s12 m9 l12">
+          <h4 class="header">Preview</h4>
           <table datatable [dtOptions]="dtOptions" class="row-border hover">
             <thead>
               <tr>
diff --git a/demo/src/app/basic/with-options.component.ts b/demo/src/app/basic/with-options.component.ts
@@ -1,7 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 
-declare var $: any;
-
 @Component({
   selector: 'with-options',
   templateUrl: 'with-options.component.html'
@@ -15,8 +13,4 @@ export class WithOptionsComponent implements OnInit {
       paginationType: 'full_numbers'
     };
   }
-
-  ngAfterViewInit(): void {
-    $('ul.tabs').tabs();
-  }
 }
diff --git a/demo/src/app/basic/zero-config-snippet.component.ts b/demo/src/app/basic/zero-config-snippet.component.ts
@@ -4,9 +4,11 @@ import { Component } from '@angular/core';
   selector: 'zero-config-snippet',
   template: `
   <div id="html" class="col s12 m9 l12">
+    <h4 class="header">HTML</h4>
     <section [innerHTML]="htmlSnippet" highlight-js-content=".xml"></section>
   </div>
   <div id="ts" class="col s12 m9 l12">
+    <h4 class="header">Typescript</h4>
     <section [innerHTML]="tsSnippet" highlight-js-content=".typescript"></section>
   </div>
   `
diff --git a/demo/src/app/basic/zero-config.component.html b/demo/src/app/basic/zero-config.component.html
@@ -15,13 +15,14 @@ <h1 class="header center-on-small-only">Zero configuration</h1>
           The <code>angular-datatables</code> provides a <code>datatables</code> directive you can add to your <code>&lt;table&gt;</code>.
         </p>
         <div class="col s12 m9 l12 showcase-tabs">
-          <ul class="tabs">
-            <li class="tab col s4"><a (click)="$event.preventDefault()" href="#preview">Preview</a></li>
-            <li class="tab col s4"><a (click)="$event.preventDefault()" href="#html">HTML</a></li>
-            <li class="tab col s3"><a (click)="$event.preventDefault()" href="#ts">Typescript</a></li>
+          <ul class="anchor-links">
+            <li class="col s4"><a class="waves-effect btn" simplePageScroll href="#preview">Preview</a></li>
+            <li class="col s4"><a class="waves-effect btn" simplePageScroll href="#html">HTML</a></li>
+            <li class="col s3"><a class="waves-effect btn" simplePageScroll href="#ts">Typescript</a></li>
           </ul>
         </div>
         <div id="preview" class="col s12 m9 l12">
+          <h4 class="header">Preview</h4>
           <table datatable class="row-border hover">
             <thead>
               <tr>
diff --git a/demo/src/app/basic/zero-config.component.ts b/demo/src/app/basic/zero-config.component.ts
@@ -1,13 +1,8 @@
 import { Component } from '@angular/core';
 
-declare var $:any;
-
 @Component({
   selector: 'zero-config',
   templateUrl: 'zero-config.component.html'
 })
 export class ZeroConfigComponent {
-  ngAfterViewInit(): void {
-    $('ul.tabs').tabs();
-  }
 }
diff --git a/demo/src/app/getting-started.component.html b/demo/src/app/getting-started.component.html
@@ -20,7 +20,7 @@ <h2 class="header">Installation</h2>
         </p>
         <div class="col s12">
           <h4>Angular-CLI version 1.0.0-beta.21</h4>
-          <p>I recommend using <a href="">angular-cli</a> to create and manage your angular2 project</p>
+          <p>I recommend using <a href="https://github.com/angular/angular-cli">angular-cli</a> to create and manage your angular2 project</p>
           <p>
             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.
           </p>
@@ -33,14 +33,14 @@ <h4>NPM</h4>
       </div>
 
       <div class="section">
-        <h2 class="header">Setup</h2>
+        <h2 class="header" id="setup">Setup</h2>
         <div class="col s12">
-          <h4>angular-cli.json</h4>
+          <h4 id="angular-cli">angular-cli.json</h4>
           <p>Add the dependencies in the scripts and styles attributes:</p>
           <section [innerHTML]="angularCliJsonSnippet" highlight-js-content=".json"></section>
         </div>
         <div class="col s12">
-          <h4>NgModule</h4>
+          <h4 id="ng-module">NgModule</h4>
           <p>
             Import the <code>DataTablesModule</code> at the appropriate level of your app.
             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.
diff --git a/demo/src/app/getting-started.component.ts b/demo/src/app/getting-started.component.ts
@@ -38,7 +38,7 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { DataTablesModule } from 'angular-datatables';
 
-import { AppComponent }   from './app.component';
+import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [
@@ -47,7 +47,7 @@ import { AppComponent }   from './app.component';
   imports: [
     BrowserModule,
 
-    DataTablesModule,
+    DataTablesModule
   ],
   providers: [],
   bootstrap: [ AppComponent ]
diff --git a/demo/src/styles.css b/demo/src/styles.css
@@ -63,6 +63,10 @@ footer.page-footer {
   background-color: #66ceff;
 }
 
+.anchor-links {
+  text-align: center;
+}
+
 .showcase-tabs {
   margin-bottom: 20px;
 }

Original file line number	Diff line number	Diff line change
`@@ -41,8 +41,4 @@ export class RowClickEventComponent implements OnInit {`
`41`	`41`	`}`
`42`	`42`	`};`
`43`	`43`	`}`
`44`		`-`
`45`		`- ngAfterViewInit(): void {`
`46`		`- $('ul.tabs').tabs();`
`47`		`- }`
`48`	`44`	`}`