From f742d4acc7360489f1601764cf9fbf7f157b34db Mon Sep 17 00:00:00 2001
From: Peter Skrlj <peter.skrlj@umwerk.com>
Date: Wed, 13 Feb 2019 20:53:09 +0100
Subject: [PATCH] [HIMA-75] created breadcrumb animation

---
 .../breadcrumbs/breadcrumbs.component.html    | 62 +++++++++--------
 .../breadcrumbs/breadcrumbs.component.scss    | 69 ++++++++++++++-----
 .../breadcrumbs/breadcrumbs.component.ts      | 21 +++---
 3 files changed, 96 insertions(+), 56 deletions(-)

diff --git a/src/app/components/breadcrumbs/breadcrumbs.component.html b/src/app/components/breadcrumbs/breadcrumbs.component.html
index be4dc8c3e..176845f30 100644
--- a/src/app/components/breadcrumbs/breadcrumbs.component.html
+++ b/src/app/components/breadcrumbs/breadcrumbs.component.html
@@ -1,29 +1,33 @@
-<div class="breadacrumb-grid" [ngClass]="{'grid-with-arrow': !backArrow}">
-    <app-back-arrow *ngIf="backArrow" (back)="goBack(breadcrumbs[breadcrumbs.length - 2])" class="align-right back-arrow"></app-back-arrow>
-    <div class="align-center breadcrumb-container" [ngClass]="{'with-arrow': backArrow}">
-        <ng-container *ngIf="bredcrumbDots">
-            <span class="breadcrumb" (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 4])">...
-                <img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next">
-            </span>
-            <span class="breadcrumb"
-                (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 3])">{{ breadcrumbs[breadcrumbs.length - 3].name }}
-                <img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next">
-            </span>
-            <span class="breadcrumb"
-                (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 2])">{{ breadcrumbs[breadcrumbs.length - 2].name }}
-                <img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next">
-            </span>
-            <span class="breadcrumb selected"
-                (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 1])">{{ breadcrumbs[breadcrumbs.length - 1].name }}</span>
-        </ng-container>
-
-        <ng-container *ngIf="!bredcrumbDots">
-            <span *ngFor="let breadcrumb of breadcrumbs; let i = index" class="breadcrumb"
-                (click)="selectBreadcrumb(breadcrumb)"
-                [ngClass]="{ 'selected': breadcrumb.path.indexOf(currentRoute) >= 0 }">{{ breadcrumb.name }}
-                <img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next"
-                    *ngIf="breadcrumbs.length > 1 && breadcrumbs.length !== (i + 1)">
-            </span>
-        </ng-container>
-    </div>
-</div>
\ No newline at end of file
+<div class="breadacrumb-grid" [ngClass]="{ 'grid-with-arrow': !backArrow }">
+  <!-- <app-back-arrow (back)="addOne()"></app-back-arrow>  TESTING ANIMATION PURPOSES-->
+  <app-back-arrow
+    *ngIf="backArrow"
+    (back)="goBack(breadcrumbs[breadcrumbs.length - 2])"
+    class="align-right back-arrow"
+  ></app-back-arrow>
+  <div
+    class="align-center breadcrumb-container"
+    [ngClass]="{ 'with-arrow': backArrow }"
+  >
+    <span
+      *ngFor="let breadcrumb of breadcrumbs; let i = index"
+      class="breadcrumb hide"
+      (click)="selectBreadcrumb(breadcrumb)"
+      [ngClass]="{ selected: breadcrumb.path.indexOf(currentRoute) >= 0 }"
+    >
+      <span
+        class="breadcrumb more"
+        *ngIf="i == breadcrumbs.length - 3 && breadcrumbs.length > 3"
+        (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 4])"
+        >...
+      </span>
+      <img
+        class="next"
+        src="../../../assets/images/Arrow_Next.svg"
+        alt="next"
+        *ngIf="breadcrumbs.length > 1 && i != 0 && i !== breadcrumbs.length - 4"
+      />
+      <span>{{ breadcrumb.name }}</span>
+    </span>
+  </div>
+</div>
diff --git a/src/app/components/breadcrumbs/breadcrumbs.component.scss b/src/app/components/breadcrumbs/breadcrumbs.component.scss
index 9012574ee..907db97b2 100644
--- a/src/app/components/breadcrumbs/breadcrumbs.component.scss
+++ b/src/app/components/breadcrumbs/breadcrumbs.component.scss
@@ -1,41 +1,76 @@
-@import "../../../assets/scss/variables";
+@import '../../../assets/scss/variables';
 
 .breadacrumb-grid {
-    display: grid;
-    grid-template-columns: min-content auto;
+  display: grid;
+  grid-template-columns: min-content auto;
 }
 
 .grid-with-arrow {
-    grid-template-columns: auto;
+  grid-template-columns: auto;
 }
 
 .breadcrumb-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
 }
 
 .with-arrow {
-    width: 86.5%;
+  width: 86.5%;
 }
 
 .breadcrumb {
-    outline: none;
-    font-size: 16px;
-    color: #5a728a;
-    line-height: 21px;
-    padding: 10px 0;
+  outline: none;
+  font-size: 16px;
+  color: #5a728a;
+  line-height: 21px;
+  padding: 10px 0;
+}
+
+.hide {
+  display: none;
+  opacity: 0;
+
+  &:nth-last-child(4) {
+    /*declarations*/
     display: block;
+    overflow: hidden;
+    opacity: 0;
+    flex: 0.0001;
+    animation: fadeSlide 400ms;
+  }
+  &:nth-last-child(-n + 3) {
+    /*declarations*/
+    opacity: 1;
+    display: block;
+  }
+}
+
+@keyframes fadeSlide {
+  0% {
+    opacity: 1;
+    transform: translateX(80px);
+    flex: 0.5;
+    overflow: hidden;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    flex: 0.0001;
+  }
 }
 
 .back-arrow {
-    padding: 10px 0;
+  padding: 10px 0;
 }
 
 .next {
-    padding: 0 7px;
+  padding: 0 7px;
 }
 
 .selected {
-    font-weight: bold;
-}
\ No newline at end of file
+  font-weight: bold;
+}
diff --git a/src/app/components/breadcrumbs/breadcrumbs.component.ts b/src/app/components/breadcrumbs/breadcrumbs.component.ts
index 678573f04..7a761a769 100644
--- a/src/app/components/breadcrumbs/breadcrumbs.component.ts
+++ b/src/app/components/breadcrumbs/breadcrumbs.component.ts
@@ -13,22 +13,18 @@ import { Router } from '@angular/router';
   styleUrls: ['./breadcrumbs.component.scss']
 })
 export class BreadcrumbsComponent implements OnInit {
-
   @Select(ProcessState.getProcesses) processes$: Observable<Process[]>;
   breadcrumbs: Breadcrumb[] = [];
-  bredcrumbDots = false;
+  // breadcrumbs: Breadcrumb[] = ['one'].map(i => ({ name: i, path: './i' }));
   currentRoute = '';
 
   get backArrow() {
     return this.router.url.substring(0, 16) === '/product-details';
   }
 
-  constructor(
-    private store: Store,
-    private router: Router
-    ) {
-    this.processes$.subscribe(
-      (data: Process[]) => this.getBreadcrumbsFromCurentProcess(data)
+  constructor(private store: Store, private router: Router) {
+    this.processes$.subscribe((data: Process[]) =>
+      this.getBreadcrumbsFromCurentProcess(data)
     );
   }
 
@@ -37,7 +33,6 @@ export class BreadcrumbsComponent implements OnInit {
     if (currentProcess) {
       this.currentRoute = `${currentProcess.currentRoute}`;
       this.breadcrumbs = currentProcess.breadcrumbs;
-      this.bredcrumbDots = currentProcess.breadcrumbs.length > 3;
     }
   }
 
@@ -51,6 +46,12 @@ export class BreadcrumbsComponent implements OnInit {
     this.router.navigate(['/search-results#start']);
   }
 
-  ngOnInit() {
+  ngOnInit() {}
+
+  addOne() {
+    this.breadcrumbs.push({
+      name: 'test' + this.breadcrumbs.length,
+      path: './i'
+    });
   }
 }