Add github code links to the examples

Author: cormacrelf

packages/examples/src/app/app.component.html

@@ -1,9 +1,12 @@
 <div *ngIf="true">
   <ul>
-    <li class="root"></li>
-    <li><a [routerLink]="['sortable']">Sortable</a></li>
-    <li><a [routerLink]="['chessboard']">Chessboard (tutorial)</a></li>
-    <li><a [routerLink]="['drilldown']">Drilldown</a></li>
+    <li><b>Applications</b>
+    <ul>
+      <li><a [routerLink]="['chessboard']">Chessboard (tutorial)</a></li>
+      <li><a [routerLink]="['sortable']">Basic Sortable</a></li>
+      <li><a [routerLink]="['drilldown']">Drilldown</a></li>
+      <li><a [routerLink]="['bins']">Mail sorting</a></li>
+    </ul>
     <li><b>Nesting</b>
     <ul>
       <li><a [routerLink]="['nested', 'sources']">Nested sources</a></li>
@@ -15,8 +18,10 @@
       <li><a [routerLink]="['drag-layer', 'xy-pad']">XY Pad</a></li>
     </ul></li>
     <!-- <li><a [routerLink]="['touch']">Touch backend</a></li> -->
-    <li><a [routerLink]="['customize', 'handles-previews']">Customize handles and previews with HTML5</a></li>
-    <li><a [routerLink]="['bins']">Mail sorting with touch support</a></li>
+    <li><b>Customize</b></li>
+    <ul>
+      <li><a [routerLink]="['customize', 'handles-previews']">handles and previews</a></li>
+    </ul>
   </ul>
 </div>
 

packages/examples/src/app/app.module.ts

@@ -25,6 +25,8 @@ import { DragDropManager } from 'dnd-core';
 import { PreloadAllModules } from '@angular/router';
 // this is our own adaptation of dnd-multi-backend. will be published eventually
 import { createDefaultMultiBackend } from './angular-skyhook-multi-backend';
+import { ExampleLink } from './example-link.component';
+import { UtilityModule } from './utility.module';
 
 let routes: Routes = [
   { path: '', pathMatch: 'full', redirectTo: 'bins' },
@@ -47,6 +49,7 @@ let routes: Routes = [
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
+    UtilityModule,
     RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, useHash: true }),
     SkyhookDndModule.forRoot({ backendFactory: createDefaultMultiBackend }),
     // SkyhookDndModule.forRoot({ backend: TouchBackend }),

packages/examples/src/app/bins/container.component.ts

@@ -2,6 +2,8 @@ import { Component } from "@angular/core";
 
 @Component({
     template: `
+    <app-example-link path="bins"></app-example-link>
+
     <skyhook-preview>
         <ng-template let-type let-item="item">
             <app-trash [type]="type" [inFlight]="true">

packages/examples/src/app/bins/index.ts

@@ -8,6 +8,7 @@ import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { SkyhookDndModule } from 'angular-skyhook';
 import { MultiBackendPreviewModule } from '../angular-skyhook-multi-backend';
+import { UtilityModule } from '../utility.module';
 
 @NgModule({
   declarations: [
@@ -18,6 +19,7 @@ import { MultiBackendPreviewModule } from '../angular-skyhook-multi-backend';
     SkyhookDndModule,
     RouterModule.forChild([{ path: '', component: Container }]),
     MultiBackendPreviewModule,
+    UtilityModule
   ],
 })
 export class Module { }

packages/examples/src/app/chessboard/container.component.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 @Component({
     selector: 'app-chess-container',
     template: `
+    <app-example-link path="chessboard"></app-example-link>
     <div class="container">
         <app-board></app-board>
     </div>

packages/examples/src/app/chessboard/index.ts

@@ -9,6 +9,7 @@ import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { SkyhookDndModule } from 'angular-skyhook';
 import { GameService } from './game.service';
+import { UtilityModule } from 'app/utility.module';
 
 @NgModule({
   declarations: [
@@ -17,7 +18,8 @@ import { GameService } from './game.service';
   imports: [
     CommonModule,
     SkyhookDndModule,
-    RouterModule.forChild([{ path: '', component: ContainerComponent }])
+    RouterModule.forChild([{ path: '', component: ContainerComponent }]),
+    UtilityModule,
   ],
   providers: [
     GameService

packages/examples/src/app/customize/handles-previews/index.ts

@@ -6,14 +6,16 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { SkyhookDndModule } from 'angular-skyhook';
+import { UtilityModule } from '../../utility.module';
 @NgModule({
   declarations: [
     CustomPreview, Handle, Container
   ],
   imports: [
     CommonModule,
     SkyhookDndModule,
-    RouterModule.forChild([{ path: '', component: Container }])
+    RouterModule.forChild([{ path: '', component: Container }]),
+    UtilityModule
   ],
 })
 export class HandlesPreviewsModule { }

packages/examples/src/app/drag-layer/container.component.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 @Component({
     selector: 'app-drag-layer-container',
     template: `
+    <app-example-link path="customize/handles-previews"></app-example-link>
     <app-custom-drag-layer></app-custom-drag-layer>
     <app-drag-container></app-drag-container>
     `

packages/examples/src/app/drag-layer/index.ts

@@ -8,6 +8,7 @@ import { DragContainerComponent } from './drag-container/drag-container.componen
 import { BoxDragPreviewComponent } from './box-drag-preview/box-drag-preview.component';
 import { ContainerComponent } from './container.component';
 import { BoxComponent } from './box.component';
+import { UtilityModule } from '../utility.module';
 
 @NgModule({
     declarations: [
@@ -21,7 +22,8 @@ import { BoxComponent } from './box.component';
     imports: [
         CommonModule,
         SkyhookDndModule,
-        RouterModule.forChild([{ path: '', component: ContainerComponent }])
+        RouterModule.forChild([{ path: '', component: ContainerComponent }]),
+        UtilityModule
     ],
 })
 export class Module { }

packages/examples/src/app/drilldown/container.component.ts

@@ -4,15 +4,11 @@ import { TreeService } from './tree.service';
 @Component({
   selector: 'drilldown-container',
   template: `
-    <div>
-      <drilldown-folder [keys]="[]"></drilldown-folder>
-    </div>
-
+    <app-example-link path="drilldown"></app-example-link>
+    <p>Hover over a folder to temporarily drill down. Click normally on a folder to open or close it.</p>
+    <p *ngIf="lastDrop$|async as keys">Last dropped on <code> {{keys.join(' > ')}} </code></p>
     <drilldown-source (beginDrag)="beginDrag()" (endDrag)="endDrag()"></drilldown-source>
-
-    <div *ngIf="lastDrop$|async as keys">
-      <p>Last dropped on <code> {{keys.join(' > ')}} </code></p>
-    </div>
+    <drilldown-folder [keys]="[]"></drilldown-folder>
   `,
   styles: [`
   `]