touchsupport

src/app/ui/main/main.component.ts

@@ -1,19 +1,19 @@
 import {Component, HostListener} from '@angular/core';
-
-import {AuthService} from '../../services/auth.service';
-import {I18nService} from '../../services/i18n.service';
-import {ProfileService} from '../../services/profile.service';
 import {Router} from '@angular/router';
 import {DomSanitizer} from '@angular/platform-browser';
 import {MatIconRegistry} from '@angular/material/icon';
 import {DateAdapter} from '@angular/material/core';
+import { fromEvent } from 'rxjs';
+
+import {AuthService} from '../../services/auth.service';
+import {I18nService} from '../../services/i18n.service';
+import {ProfileService} from '../../services/profile.service';
 
 @Component({
   selector: 'app-main',
   templateUrl: './main.component.html',
   styleUrls: ['./main.component.scss']
 })
-
 export class MainComponent {
   opened = true;
   darkTheme = "false";
@@ -23,6 +23,10 @@ export class MainComponent {
   locales;
   auth;
 
+  touchThresh: number = 150;
+  touchStartX: number;
+  touchX: number;
+
   constructor(
     private i18n: I18nService,
     private authService: AuthService,
@@ -55,6 +59,8 @@ export class MainComponent {
       this.darkTheme = "true";
       window.document.body.classList.add("dark-theme");
     }
+
+    this.touchEvents();
   }
 
   setLocale(locale) {
@@ -141,4 +147,29 @@ export class MainComponent {
       this.opened = true;
     }
   }
+
+  touchEvents(): void {
+    fromEvent(document, 'touchstart').subscribe((event: TouchEvent) => {
+      if (event.touches[ 0 ]) {
+        this.touchStartX = event.touches[ 0 ].screenX;
+
+      }
+    })
+
+    fromEvent(document, 'touchmove').subscribe((event: TouchEvent) => {
+      if (event.touches[ 0 ]) {
+        this.touchX = event.touches[ 0 ].screenX;
+      }
+    })
+
+    fromEvent(document, 'touchend').subscribe((event: TouchEvent) => {
+      const touchDiff = this.touchStartX - this.touchX;
+
+      if (touchDiff < 0 && touchDiff < (this.touchThresh * -1) && !this.opened) {
+        this.opened = true;
+      } else if (touchDiff > 0 && touchDiff > this.touchThresh && this.opened) {
+        this.opened = false;
+      }
+    })
+  }
 }