Notes slider

package-lock.json

@@ -7656,6 +7656,14 @@
       "resolved": "https://registry.npmjs.org/ngx-scroll-event/-/ngx-scroll-event-1.0.8.tgz",
       "integrity": "sha512-P7fHHgYsPFhDOwIhAtQVFJb+VtGuCDA/mZYgk3s6kyBccQjBaPe2qQ/EdNLXg1noppUbq68TOqACuzfiLZyh8w=="
     },
+    "ngx-siema": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ngx-siema/-/ngx-siema-2.0.1.tgz",
+      "integrity": "sha512-Iimg/Fu5Kp+t3fZG1z+4Wmo4TcOEuOudK3Y4Ov4PDsuQX5oDxwDjGkg68FJoYCCrMukjTnoC4SdraL+2SWf/0Q==",
+      "requires": {
+        "siema": "^1.4.6"
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -10339,6 +10347,11 @@
         "tslib": "^1.9.0"
       }
     },
+    "rxjs-compat": {
+      "version": "6.5.5",
+      "resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.5.5.tgz",
+      "integrity": "sha512-F42sssVbUyWH4vJswEo6m+Eh02xHv3q93n8S7nUJO58R7sbc3CvJIOts605zdaBhWa1xMB9aVSyqPqhQ5q3eXg=="
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -10738,6 +10751,11 @@
       "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
       "dev": true
     },
+    "siema": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/siema/-/siema-1.5.1.tgz",
+      "integrity": "sha1-7/MSt36DQPpNgdXQU+u+uRE/+Ig="
+    },
     "signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",

package.json

@@ -22,7 +22,9 @@
     "@angular/service-worker": "~9.1.1",
     "angular-svg-icon": "^9.2.0",
     "ngx-scroll-event": "^1.0.8",
+    "ngx-siema": "^2.0.1",
     "rxjs": "~6.5.4",
+    "rxjs-compat": "^6.5.5",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"
   },

src/app/app.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { AngularSvgIconModule } from 'angular-svg-icon';
 import { HttpClientModule } from '@angular/common/http';
 import { ScrollEventModule } from 'ngx-scroll-event';
+import { NgxSiemaModule } from 'ngx-siema';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -40,6 +41,7 @@ import { ProfileComponent } from './profile/profile.component';
 		AppRoutingModule,
         HttpClientModule,
         ScrollEventModule,
+        NgxSiemaModule.forRoot(),
 		AngularSvgIconModule.forRoot(),
 		ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
 	],

src/app/tabs/courses/notes-details/notes-details.component.html

@@ -1,24 +1,80 @@
 <div class="page">
-    <header class="nav-header">
-        <button class="close-button" (click)="back()">
-            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
-        </button>
-        <h5>
-            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/play-button.svg"></svg-icon>
-            <span> {{ heading }} </span>
-        </h5>
-    </header>
-
-    <h2> {{ heading }} </h2>
-
-    <div class="description">
-        <p>
-            <strong> Transcript (2:00) : </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis quam sint recusandae ullam culpa enim, atque et? Doloremque sapiente odio, reprehenderit consectetur, suscipit repudiandae quis illum saepe itaque quisquam, maxime!
-        </p>
-        <p>
-            <strong> Thoughts : </strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores ipsum dolorem quis omnis fuga, dolor expedita reprehenderit nemo maxime sequi voluptatum enim non, sint, repudiandae soluta cupiditate impedit odit rerum.
-        </p>
-    </div>
-
-    <button class="next-button" [routerLink]="['/notes-details/Notes-3']"> GO TO NEXT NOTES </button>
+    <ngx-siema [options]="options">
+        <ngx-siema-slide>
+            <header class="nav-header">
+                <button class="close-button" (click)="back()">
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+                </button>
+                <h5>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/play-button.svg"></svg-icon>
+                    <span> Notes 1 </span>
+                </h5>
+            </header>
+
+            <h2> Notes 1 </h2>
+
+            <div class="description">
+                <p>
+                    <strong> Transcript (2:00) : </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis quam sint recusandae ullam culpa enim, atque et? Doloremque sapiente odio, reprehenderit consectetur, suscipit repudiandae quis illum
+                    saepe itaque quisquam, maxime!
+                </p>
+                <p>
+                    <strong> Thoughts : </strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores ipsum dolorem quis omnis fuga, dolor expedita reprehenderit nemo maxime sequi voluptatum enim non, sint, repudiandae soluta cupiditate impedit
+                    odit rerum.
+                </p>
+            </div>
+        </ngx-siema-slide>
+
+        <ngx-siema-slide>
+            <header class="nav-header">
+                <button class="close-button" (click)="back()">
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+                </button>
+                <h5>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/play-button.svg"></svg-icon>
+                    <span> Notes 2 </span>
+                </h5>
+            </header>
+
+            <h2> Notes 2 </h2>
+
+            <div class="description">
+                <p>
+                    <strong> Transcript (2:00) : </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis quam sint recusandae ullam culpa enim, atque et? Doloremque sapiente odio, reprehenderit consectetur, suscipit repudiandae quis illum
+                    saepe itaque quisquam, maxime!
+                </p>
+                <p>
+                    <strong> Thoughts : </strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores ipsum dolorem quis omnis fuga, dolor expedita reprehenderit nemo maxime sequi voluptatum enim non, sint, repudiandae soluta cupiditate impedit
+                    odit rerum.
+                </p>
+            </div>
+        </ngx-siema-slide>
+
+        <ngx-siema-slide>
+            <header class="nav-header">
+                <button class="close-button" (click)="back()">
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+                </button>
+                <h5>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/play-button.svg"></svg-icon>
+                    <span> Notes 3 </span>
+                </h5>
+            </header>
+
+            <h2> Notes 3 </h2>
+
+            <div class="description">
+                <p>
+                    <strong> Transcript (2:00) : </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis quam sint recusandae ullam culpa enim, atque et? Doloremque sapiente odio, reprehenderit consectetur, suscipit repudiandae quis illum
+                    saepe itaque quisquam, maxime!
+                </p>
+                <p>
+                    <strong> Thoughts : </strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores ipsum dolorem quis omnis fuga, dolor expedita reprehenderit nemo maxime sequi voluptatum enim non, sint, repudiandae soluta cupiditate impedit
+                    odit rerum.
+                </p>
+            </div>
+        </ngx-siema-slide>
+    </ngx-siema>
+
+  <button class="next-button" (click)="next()"> GO TO NEXT NOTES </button>
 </div>

src/app/tabs/courses/notes-details/notes-details.component.scss

@@ -87,3 +87,8 @@ h2 {
         margin-right: 5px;
     }
 }
+
+
+ngx-siema-slide {
+    display: block;
+}

src/app/tabs/courses/notes-details/notes-details.component.ts

@@ -2,33 +2,57 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { Location } from '@angular/common';
+import { NgxSiemaOptions, NgxSiemaService } from 'ngx-siema';
+
 
 @Component({
-  selector: 'app-notes-details',
-  templateUrl: './notes-details.component.html',
-  styleUrls: ['./notes-details.component.scss']
+	selector: 'app-notes-details',
+	templateUrl: './notes-details.component.html',
+	styleUrls: ['./notes-details.component.scss']
 })
 export class NotesDetailsComponent implements OnInit {
-    heading: string;
-    routeSubscription: Subscription;
-
-    constructor(
-        private route: ActivatedRoute,
-        private location: Location
-    ) { }
-
-    ngOnInit(): void {
-        this.routeSubscription = this.route.params.subscribe((params) => {
-            this.heading = params['heading'];
-        });
-    }
+	heading: string;
+	routeSubscription: Subscription;
 
-    ngOnDestroy() {
-        this.routeSubscription.unsubscribe();
-    }
+	options: NgxSiemaOptions = {
+		selector: '.siema',
+		duration: 300,
+		easing: 'ease-out',
+		perPage: 1,
+		startIndex: 0,
+		draggable: true,
+		threshold: 20,
+		loop: false,
+		onInit: () => {
+			// runs immediately after first initialization
+		},
+		onChange: () => {
+			// runs after slide change
+		},
+	};
+
+	constructor(
+		private route: ActivatedRoute,
+		private location: Location,
+        private ngxSiemaService: NgxSiemaService
+	) { }
 
-    back() {
-        this.location.back();
+	ngOnInit(): void {
+		this.routeSubscription = this.route.params.subscribe((params) => {
+			this.heading = params['heading'];
+		});
+	}
+
+    next() {
+        this.ngxSiemaService.next(1).subscribe((data: any) => console.log(data));
     }
 
+	ngOnDestroy() {
+		this.routeSubscription.unsubscribe();
+	}
+
+	back() {
+		this.location.back();
+	}
+
 }