Update Experience Section to handle mobile gesture

Boystar225 · Mar 13, 2021 · cd54bb4 · cd54bb4
1 parent cfb905d
commit cd54bb4
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 10 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -18,10 +18,19 @@ import { AngularFireDatabaseModule } from "@angular/fire/database";
 import { AngularFireAnalyticsModule } from "@angular/fire/analytics";
 import { environment } from "../environments/environment";
 
+import { HammerModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from "@angular/platform-browser";
+import * as Hammer from "hammerjs";
+
+export class MyHammerConfig extends HammerGestureConfig {
+    overrides = <any> {
+        swipe: { direction: Hammer.DIRECTION_ALL },
+    };
+}
+
 registerLocaleData(localeEn, "en");
 registerLocaleData(localePt, "pt-BR", localePtExtra);
 @NgModule({
-  imports: [ 
+  imports: [
     BrowserModule,
     AppRoutingModule,
     CoreModule,
@@ -30,10 +39,17 @@ registerLocaleData(localePt, "pt-BR", localePtExtra);
     PageNotFoundRoutingModule,
     AngularFireModule.initializeApp(environment.firebaseConfig),
     AngularFireDatabaseModule,
-    AngularFireAnalyticsModule
+    AngularFireAnalyticsModule,
+    HammerModule
   ],
   declarations: [ AppComponent ],
-  bootstrap: [ AppComponent ]
+  bootstrap: [ AppComponent ],
+  providers: [
+    {
+      provide: HAMMER_GESTURE_CONFIG,
+      useClass: MyHammerConfig,
+    },
+  ]
 })
 
 export class AppModule {}
diff --git a/src/app/experience/experience.component.html b/src/app/experience/experience.component.html
@@ -6,27 +6,27 @@
                     <h1 i18n="nav@@experiences">Experiences</h1>
                 </div>
                 <div class="navigation">
-                    <a href="javascript:void(0)" class="previous" (click)="onClickPrevious()" [ngClass]="{'disabled': currentPosition == 1}">
+                    <a href="javascript:void(0)" class="previous" (click)="onClickPrevious()" [ngClass]="{'disabled': disablePreviousNavigation()}">
                         <fa-icon [icon]="['fas', 'chevron-left']" class="icon" i18n-title="exp.nav@@previous" title="Previous"></fa-icon>
                         <span i18n="exp.nav@@previous">Previous</span>
                     </a>
                     <div class="devider">|</div>
-                    <a href="javascript:void(0)" class="next" (click)="onClickNext()" [ngClass]="{'disabled': currentPosition == experiencesOrdered?.length}">
+                    <a href="javascript:void(0)" class="next" (click)="onClickNext()" [ngClass]="{'disabled': disableNextNavigation()}">
                         <span i18n="exp.nav@@next">Next</span>
                         <fa-icon [icon]="['fas', 'chevron-right']" class="icon" i18n-title="exp.nav@@next" title="Next"></fa-icon>
                     </a>
                 </div>
 
                 <!-- Custom mobile menu active under 600px wide resolution -->
                 <div class="navigation-mobile">
-                    <a href="javascript:void(0)" class="previous" (click)="onClickPrevious()" [ngClass]="{'disabled': currentPosition == 1}">
+                    <a href="javascript:void(0)" class="previous" (click)="onClickPrevious()" [ngClass]="{'disabled': disablePreviousNavigation()}">
                        <div class="molding">
                            <span [innerHtml]="previousYear | safariDateFormatter | localizedDate:'yyyy'"></span>
                            <fa-icon [icon]="['fas', 'chevron-left']" class="icon" i18n-title="exp.nav@@previous" title="Previous"></fa-icon>
                         </div>
                     </a>
                     <div class="current"><span [innerHtml]="currentYear | safariDateFormatter | localizedDate:'yyyy'"></span></div>
-                    <a href="javascript:void(0)" class="next" (click)="onClickNext()" [ngClass]="{'disabled': currentPosition == experiencesOrdered?.length}">
+                    <a href="javascript:void(0)" class="next" (click)="onClickNext()" [ngClass]="{'disabled': disableNextNavigation()}">
                         <div class="molding">
                             <fa-icon [icon]="['fas', 'chevron-right']" class="icon" i18n-title="exp.nav@@next" title="Next"></fa-icon>
                             <span [innerHtml]="nextYear | safariDateFormatter | localizedDate:'yyyy'"></span>
@@ -35,7 +35,7 @@ <h1 i18n="nav@@experiences">Experiences</h1>
                 </div>
             </div>
 
-            <div class="middle-container">
+            <div class="middle-container" (swipe)="onSwipe($event)">
                 <div class="events-content">
                     <ol #orderedList>
                         <li *ngFor="let exp of experiencesOrdered; let i = index" [ngClass]="{'selected': i == 0}" data-id="{{ exp.id }}">

diff --git a/src/app/experience/experience.component.ts b/src/app/experience/experience.component.ts
@@ -6,6 +6,11 @@ import { DataService } from "../core/data.service";
 import { SorterService } from "../core/sorter.service";
 import { FaIconLibrary } from "@fortawesome/angular-fontawesome";
 
+enum Direction {
+  Left,
+  Right,
+}
+
 @Component({
   selector: "app-experience",
   templateUrl: "./experience.component.html",
@@ -56,6 +61,23 @@ export class ExperienceComponent implements OnInit {
         });
   }
 
+  public onSwipe(event) {
+    const direction: Direction = Math.abs(event.deltaX) > 40 ? (event.deltaX > 0 ? Direction.Right : Direction.Left) : undefined;
+    if(!this.disablePreviousNavigation() && direction === Direction.Right) {
+      this.onClickPrevious();
+    } else if(!this.disableNextNavigation() && direction === Direction.Left) {
+      this.onClickNext();
+    } 
+  }
+
+  public disablePreviousNavigation(): boolean {
+    return this.currentPosition === 1;
+  }
+
+  public disableNextNavigation(): boolean {
+    return this.currentPosition === this.experiencesOrdered?.length;
+  } 
+
   // Preloads the boundaries images related to the current position in order to avoid the "blinking" of the background while navigating.
   private preloadBounderyImages(images: string[]) {
     images.forEach(function (image, i) {

diff --git a/src/main.ts b/src/main.ts
@@ -9,7 +9,5 @@ if (environment.production) {
   enableProdMode();
 }
 
-
-
 platformBrowserDynamic().bootstrapModule(AppModule)
   .catch((err) => console.error(err));