diff --git a/package-lock.json b/package-lock.json index 88bf83c..546810d 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 507ac3c..68cf7c3 100644 --- a/package.json +++ b/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" }, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2fb0173..c4bc11e 100644 --- a/src/app/app.module.ts +++ b/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 }) ], diff --git a/src/app/tabs/courses/notes-details/notes-details.component.html b/src/app/tabs/courses/notes-details/notes-details.component.html index 4509f90..7bd5406 100644 --- a/src/app/tabs/courses/notes-details/notes-details.component.html +++ b/src/app/tabs/courses/notes-details/notes-details.component.html @@ -1,24 +1,80 @@
-
- -
- - {{ heading }} -
-
- -

{{ heading }}

- -
-

- Transcript (2:00) : 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! -

-

- Thoughts : 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. -

-
- - + + +
+ +
+ + Notes 1 +
+
+ +

Notes 1

+ +
+

+ Transcript (2:00) : 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! +

+

+ Thoughts : 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. +

+
+ + + +
+ +
+ + Notes 2 +
+
+ +

Notes 2

+ +
+

+ Transcript (2:00) : 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! +

+

+ Thoughts : 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. +

+
+ + + +
+ +
+ + Notes 3 +
+
+ +

Notes 3

+ +
+

+ Transcript (2:00) : 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! +

+

+ Thoughts : 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. +

+
+ + + +
diff --git a/src/app/tabs/courses/notes-details/notes-details.component.scss b/src/app/tabs/courses/notes-details/notes-details.component.scss index 783d0db..e96bebf 100644 --- a/src/app/tabs/courses/notes-details/notes-details.component.scss +++ b/src/app/tabs/courses/notes-details/notes-details.component.scss @@ -87,3 +87,8 @@ h2 { margin-right: 5px; } } + + +ngx-siema-slide { + display: block; +} diff --git a/src/app/tabs/courses/notes-details/notes-details.component.ts b/src/app/tabs/courses/notes-details/notes-details.component.ts index c238d7d..a7c6016 100644 --- a/src/app/tabs/courses/notes-details/notes-details.component.ts +++ b/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(); + } + }