feat: adds swipe gestures (#264)

Sirimangalo · Sep 7, 2016 · 23e6ee4 · 23e6ee4
1 parent 5ed227b
commit 23e6ee4
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 14 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,4 +1,4 @@
-<div class="flexbox-parent">
+<div class="flexbox-parent" (swipeRight)="swipeOpen()" (swipeLeft)="sidenavClose()">
   <md-sidenav-layout class="flexbox-parent">
     <md-sidenav #start>
 

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -53,11 +53,13 @@ export class AppComponent {
       .stateChange
       .filter(res => res.hasOwnProperty('openSidenav'))
       .subscribe(res => {
-        if (res.openSidenav && this.sidenav._isClosed) {
-          this.sidenav.open();
+        if (res.openSidenav === true) {
+          this.sidenavOpen();
         }
       });
 
+    appState.set('openSidenav', false);
+
     userService.registerRefresh();
   }
 
@@ -78,24 +80,26 @@ export class AppComponent {
     this.router.navigate(['/login']);
   }
 
-  // methods for swipe gestures
-  swipeOpen() {
-    // skip if gesture conflicts with tab layout
-    if (this.router.url === '/home;tab=meditation'
-      || this.router.url === '/home;tab=chat'
-      || this.router.url === '/home;tab=ask') {
-      return;
-    }
-
+  sidenavOpen() {
     if (this.sidenav._isClosed){
       this.sidenav.open();
     }
+    this.appState.set('openSidenav', false);
   }
-  swipeClose() {
+
+  sidenavClose() {
     if (this.sidenav._isOpened){
       this.sidenav.close();
     }
   }
+
+  swipeOpen() {
+    // skip if gesture conflicts with tab layout
+    if (this.router.url === '/' || this.router.url.indexOf('home') > -1) {
+      return;
+    }
+    this.sidenavOpen();
+  }
 }
 
 /*

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -26,18 +26,23 @@
   class="flexbox-parent"
   [class.hidden]="!isCurrentTab('meditation')"
   *ngIf="activated.indexOf('meditation') > -1"
+  (swipeRight)="openSidenav()"
+  (swipeLeft)="router.navigate(['/home', { tab: 'chat' }])"
 ></meditation>
 
 <message
   [class.hidden]="!isCurrentTab('chat') || ownSession"
   class="flexbox-parent"
   *ngIf="activated.indexOf('chat') > -1"
+  (swipeRight)="router.navigate(['/home', { tab: 'meditation' }])"
+  (swipeLeft)="router.navigate(['/home', { tab: 'ask' }])"
 ></message>
 
 <question
   [class.hidden]="!isCurrentTab('ask') || ownSession"
   *ngIf="activated.indexOf('ask') > -1"
   class="flexbox-parent"
+  (swipeRight)="router.navigate(['/home', { tab: 'chat' }])"
 ></question>
 
 <div *ngIf="ownSession && !isCurrentTab('meditation')" class="disabled-message">

diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
@@ -23,7 +23,6 @@ export class Home {
     public router: Router
   ) {
     this.appState.set('title', '');
-    this.appState.set('openSidenav', false);
     this.route.params
       .filter(res => res.hasOwnProperty('tab'))
       .subscribe(res => this.tab((<any>res).tab));