Make back button dismiss open modal

src/app/app.component.ts

@@ -6,14 +6,14 @@ import {
   Platform,
   PopoverController,
   LoadingController,
-  ToastController
+  ToastController, NavController
 } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { ApiService } from './service/api.service';
 import { Router } from '@angular/router';
 import {TREE_ACTIONS, TreeComponent} from '@circlon/angular-tree-component';
-import {BehaviorSubject, Observable} from 'rxjs';
+import {BehaviorSubject, fromEvent, Observable} from 'rxjs';
 import {OptionPickerComponent} from './components/option-picker/option-picker.component';
 import {OptionMenuComponent} from './components/option-menu/option-menu.component';
 import {SelectorComponent} from './components/sharing/selector/selector.component';
@@ -83,6 +83,7 @@ export class AppComponent implements OnInit {
   protected versionInterval?: any;
   protected showedNewVersionAlert = false;
   protected showedOfflineAlert = false;
+  protected backbuttonSubscription: any;
   protected initialized$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
   constructor(
@@ -90,6 +91,7 @@ export class AppComponent implements OnInit {
     private splashScreen: SplashScreen,
     private statusBar: StatusBar,
     public readonly api: ApiService,
+    protected navCtrl: NavController,
     protected router: Router,
     protected alerts: AlertController,
     protected popover: PopoverController,
@@ -129,6 +131,17 @@ export class AppComponent implements OnInit {
     this.initializeApp();
   }
 
+  @HostListener('window:popstate', ['$event'])
+  dismissModal(event) {
+    const modal = this.modal.getTop();
+
+    if ( modal ) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.modal.dismiss();
+    }
+  }
+
   showOptions($event) {
     this.popover.create({
       event: $event,
@@ -152,8 +165,16 @@ export class AppComponent implements OnInit {
 
     const modal = await this.modal.create({
       component: SearchComponent,
+      cssClass: 'modal-med',
     });
 
+    const modalState = {
+      modal : true,
+      desc : 'Search everything'
+    };
+
+    history.pushState(modalState, null);
+
     this.hasSearchOpen = true;
     await modal.present();
 
@@ -208,10 +229,18 @@ export class AppComponent implements OnInit {
       if ( result.data === 'share' ) {
         this.modal.create({
           component: SelectorComponent,
+          cssClass: 'modal-med',
           componentProps: {
             node: this.menuTarget.data,
           }
         }).then(modal => {
+          const modalState = {
+            modal : true,
+            desc : 'Share page'
+          };
+
+          history.pushState(modalState, null);
+
           modal.present();
         });
       } else if ( result.data === 'export_html' ) {

src/app/components/editor/database/columns/columns.component.html

@@ -122,7 +122,7 @@
 </ion-content>
 
 <ion-footer>
-  <ion-buttons>
+  <ion-buttons style="padding: 10px;">
     <ion-button (click)="onAddColumnClick()" fill="outline">Add Column</ion-button>
     <ion-button (click)="dismissModal(true)" color="success" fill="outline">Save</ion-button>
   </ion-buttons>

src/app/components/editor/database/database.component.ts

@@ -146,12 +146,22 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
     const modal = await this.modals.create({
       component: ColumnsComponent,
       componentProps: {columnSets: this.columnDefs},
+      cssClass: 'modal-med',
     });
 
     modal.onDidDismiss().then(result => {
+      if ( result?.data ) {
         this.setColumns(result.data);
+      }
     });
 
+    const modalState = {
+      modal : true,
+      desc : 'Manage Columns'
+    };
+
+    history.pushState(modalState, null);
+
     await modal.present();
   }
 

src/app/components/editor/database/editors/paragraph/paragraph-editor.component.ts

@@ -50,6 +50,14 @@ export class ParagraphEditorComponent implements ICellEditorAngularComp, AfterVi
                     this.value = String(value.data);
                     this.finishEdit();
                 });
+
+                const modalState = {
+                    modal : true,
+                    desc : 'Paragraph editor'
+                };
+
+                history.pushState(modalState, null);
+
                 modal.present();
             });
         });

src/app/components/editor/database/editors/paragraph/paragraph-modal.component.ts

@@ -15,7 +15,6 @@ export class ParagraphModalComponent {
   ) {}
 
   dismissModal() {
-    console.log(this.value);
     this.modals.dismiss(this.value);
   }
 }

src/app/components/editor/database/editors/wysiwyg/wysiwyg-editor.component.ts

@@ -50,6 +50,14 @@ export class WysiwygEditorComponent implements ICellEditorAngularComp, AfterView
                     this.value = String(value.data);
                     this.finishEdit();
                 });
+
+                const modalState = {
+                    modal : true,
+                    desc : 'WYSIWYG editor'
+                };
+
+                history.pushState(modalState, null);
+
                 modal.present();
             });
         });

src/app/components/nodes/form-input/form-input.component.ts

@@ -125,6 +125,13 @@ export class FormInputComponent extends EditorNodeContract implements OnInit {
             }
         });
 
+        const modalState = {
+            modal : true,
+            desc : 'Form input editor'
+        };
+
+        history.pushState(modalState, null);
+
         await modal.present();
     }
 }

src/app/pages/editor/editor.page.ts

@@ -179,6 +179,13 @@ export class EditorPage implements OnInit {
       }
     });
 
+    const modalState = {
+      modal : true,
+      desc : 'Page versions'
+    };
+
+    history.pushState(modalState, null);
+
     await modal.present();
   }
 }

src/global.scss

@@ -159,8 +159,15 @@ hr {
 
 .modal-big {
   .modal-wrapper {
-    height: calc(100vh - 30px);
+    min-height: calc(100vh - 30px);
-    width: calc(100vw - 30px);
+    min-width: calc(100vw - 30px);
+  }
+}
+
+.modal-med {
+  .modal-wrapper {
+    min-height: calc(100vh - 100px);
+    min-width: calc(100vw - 200px);
   }
 }