tutorial navigation functionnal

src/app/components/tutorial-enhanced/tutorial-enhanced.component.html

@@ -1,10 +1,18 @@
 <div class="tutorial">
-    <div class="tutorial__content"></div>
-    <div class="tutorial__footer">        
-        <a href (click)="close()">close</a>
-        <a href (click)="close()">prev.</a>
-        <a href (click)="close()">next</a>
-    </div>
+    <div class="tutorial__content">
 
-    
+    </div>
+    <div class="tutorial__footer">        
+        <a href (click)="close()" 
+            title="close tutorial"
+            class="tutorial__footer--button tutorial__footer--button--close">close</a>
+        <a href (click)="previous()" 
+            title="previous"
+            class="tutorial__footer--button tutorial__footer--button--navigate"
+            [class.tutorial__footer--button--disabled]="!previousAvailable">prev.</a>
+        <a href (click)="next()" 
+            title="next"
+            class="tutorial__footer--button tutorial__footer--button--navigate"
+            [class.tutorial__footer--button--disabled]="!nextAvailable">next</a>
+    </div>    
 </div>

src/app/components/tutorial-enhanced/tutorial-enhanced.component.scss

@@ -1,8 +1,62 @@
 @import"variables";
 
+$border-color: #1d2335;
+$footer-height: 30px;
+
 .tutorial {
-    border: 1px solid #1d2335;
+    border: 1px solid $border-color;
     background-color: $color-primary;
     height: calc(100%);
     border-radius: 2px;
+
+    &__content {
+        // outline: 1px dotted greenyellow;
+        overflow-y: auto;
+
+        height: calc(100% - #{$footer-height});
+    }
+
+    &__footer {
+        border-top: 1px solid $border-color;
+        height: $footer-height;
+
+        &--button {
+            text-transform: uppercase;
+            font-size: 1em;
+            text-align: center;
+            display: inline-block;
+            height: $footer-height;
+            width: calc(33.33333% - 1px);
+            color: white;
+            padding-top: 3px;
+            transition: all .2s;
+        
+            &:not(:last-child){
+                border-right: 1px solid $border-color;
+            }
+
+            &--close {
+                &:hover {
+                    text-decoration: none;
+                    background-color: rgb(95, 0, 0);
+                }
+            }
+
+            &--navigate {
+                &:hover {
+                    text-decoration: none;
+                    background-color: rgb(0, 74, 109);
+                }
+            }
+
+            &--disabled {
+                color: #4e5672;
+                &:hover {
+                    cursor: default;
+                    text-decoration: none;     
+                    background-color: rgba(0, 0, 0, 0); 
+                }
+            }
+        }
+    }
 }

src/app/components/tutorial-enhanced/tutorial-enhanced.component.ts

@@ -6,9 +6,13 @@ import { Component, OnInit, Output, EventEmitter } from '@angular/core';
     styleUrls: ['./tutorial-enhanced.component.scss']
 })
 export class TutorialEnhancedComponent implements OnInit {
-
     @Output() closeEvent = new EventEmitter();
 
+    previousAvailable = false;
+    nextAvailable = true;
+    index = 0;
+    private maxIndex = 5;
+
     constructor() { }
 
     ngOnInit() {
@@ -19,4 +23,29 @@ export class TutorialEnhancedComponent implements OnInit {
         return false;
     }
 
+    previous(): boolean {
+        if (this.index > 0) {
+            this.index--;
+            this.checkState();
+        }
+        return false;
+    }
+
+    next(): boolean {
+        this.index++;
+        this.checkState();
+        return false;
+    }
+
+    private checkState() {
+        if (this.index === 0) {
+            this.previousAvailable = false;
+        } else {
+            this.previousAvailable = true;
+        }
+
+        if (this.index === this.maxIndex){
+            this.close();
+        }
+    }
 }