[HIMA-58] - prototyping stack animations, added debug module

src/app/app-routing.module.ts

@@ -1,9 +1,33 @@
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { routes } from './shared/routes/routes';
+import { RouterModule, Routes } from '@angular/router';
+import { DashboardComponent } from './modules/dashboard/dashboard.component';
+import { ArticleSearchComponent } from './components/article-search/article-search.component';
+import {
+  CustomerSearchComponent,
+  SearchCustomerResultComponent,
+  EditCustomerCardComponent
+} from './modules/customer-search';
+import { SearchResultsComponent } from './components/search-results/search-results.component';
+import { ProductDetailsComponent } from './components/product-details/product-details.component';
+import { BarcodeSearchComponent } from './modules/barcode-search/barcode-search.component';
+import { NewsletterSignupComponent } from './modules/newsletter-signup/newsletter-signup.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
+  { path: 'dashboard', component: DashboardComponent },
+  { path: 'article-search', component: ArticleSearchComponent },
+  { path: 'customer-search', component: CustomerSearchComponent },
+  { path: 'customer-search-result', component: SearchCustomerResultComponent },
+  { path: 'customer-edit/:id', component: EditCustomerCardComponent },
+  { path: 'search-results#start', component: SearchResultsComponent },
+  { path: 'product-details/:id', component: ProductDetailsComponent },
+  { path: 'article-scan', component: BarcodeSearchComponent },
+  { path: 'newsletter', component: NewsletterSignupComponent },
+  { path: 'debug', loadChildren: './modules/debug/debug.module#DebugModule' }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/app.module.ts

@@ -1,4 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule, APP_INITIALIZER } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -73,6 +74,7 @@ export function _feedServiceEndpointProviderFactory(conf: ConfigService) {
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     AppRoutingModule,
     ComponentsModule,
     HttpClientModule,

src/app/modules/components.module.ts

@@ -1,3 +1,4 @@
+import { CardComponent } from './../shared/components/card/card.component';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { AppRoutingModule } from 'src/app/app-routing.module';
 import { ArticleSearchComponent } from 'src/app/components/article-search/article-search.component';

src/app/modules/debug/card-stack-animation/card-stack-animation.component.html

@@ -0,0 +1,14 @@
+<div class="spacer"></div>
+<div [@listAnimation]="active">
+  <app-card *ngFor="let item of navigation" (click)="switch(item)">
+    {{ item }}
+  </app-card>
+</div>
+
+<app-card class="content" [ngSwitch]="active" [@fadeIn]="active">
+  <ng-container *ngFor="let nav of navigationOptions">
+    <div *ngSwitchCase="nav.id">
+      {{ nav.text }}
+    </div>
+  </ng-container>
+</app-card>

src/app/modules/debug/card-stack-animation/card-stack-animation.component.scss

@@ -0,0 +1,18 @@
+app-card {
+  padding: 10px 30px;
+  margin-top: -10px;
+}
+
+.spacer {
+  height: 20px;
+}
+
+.content {
+  min-height: 400px;
+}
+
+.content > * {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}

src/app/modules/debug/card-stack-animation/card-stack-animation.component.ts

@@ -0,0 +1,58 @@
+import { Component, OnInit } from '@angular/core';
+import { navigationCancelingError } from '@angular/router/src/shared';
+import { fadeInAnimation } from './fade-in.animation';
+import { staggerAnimation } from './stagger.animation';
+
+@Component({
+  selector: 'app-card-stack-animation',
+  templateUrl: 'card-stack-animation.component.html',
+  styleUrls: ['card-stack-animation.component.scss'],
+  animations: [fadeInAnimation, staggerAnimation]
+})
+export class CardStackAnimationComponent implements OnInit {
+  navigationOptions = [
+    {
+      id: 'nav1',
+      state: 'open',
+      text: 'nav1 bla bla'
+    },
+    {
+      id: 'nav2',
+      state: 'open',
+      text: 'nav2 bla bla'
+    },
+    {
+      id: 'nav3',
+      state: 'open',
+      text: 'nav3 bla bla'
+    },
+    {
+      id: 'nav4',
+      state: 'open',
+      text: 'nav4 bla bla'
+    },
+    {
+      id: 'nav5',
+      state: 'open',
+      text: 'nav4 bla bla'
+    },
+    {
+      id: 'nav6',
+      state: 'open',
+      text: 'nav4 bla bla'
+    }
+  ];
+
+  navigation = ['nav1', 'nav2', 'nav3', 'nav6', 'nav5'];
+  active = 'nav4';
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  switch(newItem: string) {
+    const index = this.navigation.indexOf(newItem);
+    this.navigation[index] = this.active;
+    this.active = newItem;
+  }
+}

src/app/modules/debug/card-stack-animation/fade-in.animation.ts

@@ -0,0 +1,27 @@
+import {
+  trigger,
+  state,
+  style,
+  transition,
+  animate,
+  query
+} from '@angular/animations';
+import { isAbsolute } from 'path';
+
+export const fadeInAnimation = trigger('fadeIn', [
+  transition('* => *', [
+    query(':enter', [style({ opacity: 0 })], { optional: true }),
+
+    query(
+      ':leave',
+      [style({ opacity: 1 }), animate('0.5s', style({ opacity: 0 }))],
+      { optional: true }
+    ),
+
+    query(
+      ':enter',
+      [style({ opacity: 0 }), animate('0.3s', style({ opacity: 1 }))],
+      { optional: true }
+    )
+  ])
+]);

src/app/modules/debug/card-stack-animation/stagger.animation.ts

@@ -0,0 +1,20 @@
+import {
+  trigger,
+  transition,
+  stagger,
+  animate,
+  style,
+  query
+} from '@angular/animations';
+
+export const staggerAnimation = trigger('listAnimation', [
+  transition(':enter, * => 0, * => -1', []),
+  transition('* => *', [
+    // each time the binding value changes
+    query(':leave', [
+      style({ height: '0', marginTop: '-20px', visibility: 'hidden' })
+    ]),
+    query('*', [stagger(40, [animate('0.3s', style({ opacity: 0 }))])]),
+    query('*', [stagger(-20, [animate('0.3s', style({ opacity: 1 }))])])
+  ])
+]);

src/app/modules/debug/debug.module.ts

@@ -0,0 +1,21 @@
+import { ComponentsModule } from './../components.module';
+import { CardStackAnimationComponent } from './card-stack-animation/card-stack-animation.component';
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { SharedModule } from 'src/app/shared/shared.module';
+import { CommonModule } from '@angular/common';
+
+const routes: Routes = [
+  {
+    path: 'card-stack',
+    component: CardStackAnimationComponent
+  },
+  { path: '**', redirectTo: 'card-stack' }
+];
+
+@NgModule({
+  imports: [CommonModule, SharedModule, RouterModule.forChild(routes)],
+  exports: [],
+  declarations: [CardStackAnimationComponent]
+})
+export class DebugModule {}

src/app/shared/components/card/card.component.scss

@@ -1,4 +1,4 @@
-@import '/assets/scss/variables';
+@import '../../../../assets/scss/variables';
 
 :host {
   display: block;

src/app/shared/routes/routes.ts

@@ -1,25 +0,0 @@
-import {
-  CustomerSearchComponent,
-  SearchCustomerResultComponent,
-  EditCustomerCardComponent
-} from './../../modules/customer-search/';
-import { NewsletterSignupComponent } from './../../modules/newsletter-signup/newsletter-signup.component';
-import { BarcodeSearchComponent } from './../../modules/barcode-search/barcode-search.component';
-import { Routes } from '@angular/router';
-import { DashboardComponent } from '../../modules/dashboard/dashboard.component';
-import { ArticleSearchComponent } from '../../components/article-search/article-search.component';
-import { SearchResultsComponent } from '../../components/search-results/search-results.component';
-import { ProductDetailsComponent } from '../../components/product-details/product-details.component';
-
-export const routes: Routes = [
-  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
-  { path: 'dashboard', component: DashboardComponent },
-  { path: 'article-search', component: ArticleSearchComponent },
-  { path: 'customer-search', component: CustomerSearchComponent },
-  { path: 'customer-search-result', component: SearchCustomerResultComponent },
-  { path: 'customer-edit/:id', component: EditCustomerCardComponent },
-  { path: 'search-results#start', component: SearchResultsComponent },
-  { path: 'product-details/:id', component: ProductDetailsComponent },
-  { path: 'article-scan', component: BarcodeSearchComponent },
-  { path: 'newsletter', component: NewsletterSignupComponent }
-];

src/app/shared/shared.module.ts

@@ -0,0 +1,12 @@
+import { CardComponent } from './components/card/card.component';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+const components = [CardComponent];
+@NgModule({
+  imports: [CommonModule],
+  exports: [...components],
+  declarations: [...components],
+  providers: []
+})
+export class SharedModule {}