fix: bind modals to application lifetime

app/assets/javascripts/ui_models/application.ts

@@ -1,4 +1,6 @@
-import { AccountSwitcherScope } from './../types';
+import { PermissionDialog } from 'snjs/dist/@types/services/component_manager';
+import { ComponentModalScope } from './../directives/views/componentModal';
+import { AccountSwitcherScope, PermissionsModalScope } from './../types';
 import { ComponentGroup } from './component_group';
 import { EditorGroup } from '@/ui_models/editor_group';
 import { InputModalScope } from '@/directives/views/inputModal';
@@ -7,7 +9,7 @@ import {
   SNApplication,
   platformFromString,
   Challenge,
-  ProtectedAction
+  ProtectedAction, SNComponent
 } from 'snjs';
 import angular from 'angular';
 import { getPlatformString } from '@/utils';
@@ -74,6 +76,8 @@ export class WebApplication extends SNApplication {
     deviceInterface.setApplication(this);
     this.editorGroup = new EditorGroup(this);
     this.componentGroup = new ComponentGroup(this);
+    this.openModalComponent = this.openModalComponent.bind(this);
+    this.presentPermissionsDialog = this.presentPermissionsDialog.bind(this);
   }
 
   /** @override */
@@ -92,6 +96,8 @@ export class WebApplication extends SNApplication {
     (this.scope! as any).application = undefined;
     this.scope!.$destroy();
     this.scope = undefined;
+    (this.openModalComponent as any) = undefined;
+    (this.presentPermissionsDialog as any) = undefined;
     /** Allow our Angular directives to be destroyed and any pending digest cycles
      * to complete before destroying the global application instance and all its services */
     setTimeout(() => {
@@ -99,6 +105,12 @@ export class WebApplication extends SNApplication {
     }, 0)
   }
 
+  onStart() {
+    super.onStart();
+    this.componentManager!.openModalComponent = this.openModalComponent;
+    this.componentManager!.presentPermissionsDialog = this.presentPermissionsDialog;
+  }
+
   setWebServices(services: WebServices) {
     this.webServices = services;
   }
@@ -150,7 +162,7 @@ export class WebApplication extends SNApplication {
     const el = this.$compile!(
       "<password-wizard application='application' type='type'></password-wizard>"
     )(scope as any);
-    angular.element(document.body).append(el);
+    this.applicationElement.append(el);
   }
 
   promptForChallenge(challenge: Challenge) {
@@ -162,7 +174,7 @@ export class WebApplication extends SNApplication {
       "class='sk-modal' application='application' challenge='challenge'>" +
       "</challenge-modal>"
     )(scope);
-    angular.element(document.body).append(el);
+    this.applicationElement.append(el);
   }
 
   async presentPrivilegesModal(
@@ -193,7 +205,7 @@ export class WebApplication extends SNApplication {
       <privileges-auth-modal application='application' action='action' on-success='onSuccess'
       on-cancel='onCancel' class='sk-modal'></privileges-auth-modal>
     `)(scope);
-    angular.element(document.body).append(el);
+    this.applicationElement.append(el);
 
     this.currentAuthenticationElement = el;
   }
@@ -202,13 +214,17 @@ export class WebApplication extends SNApplication {
     const scope: any = this.scope!.$new(true);
     scope.application = this;
     const el = this.$compile!("<privileges-management-modal application='application' class='sk-modal'></privileges-management-modal>")(scope);
-    angular.element(document.body).append(el);
+    this.applicationElement.append(el);
   }
 
   authenticationInProgress() {
     return this.currentAuthenticationElement != null;
   }
 
+  get applicationElement() {
+    return angular.element(document.getElementById(this.identifier)!);
+  }
+
   presentPasswordModal(callback: () => void) {
     const scope = this.scope!.$new(true) as InputModalScope;
     scope.type = "password";
@@ -220,7 +236,7 @@ export class WebApplication extends SNApplication {
       `<input-modal type='type' message='message'
      title='title' callback='callback()'></input-modal>`
     )(scope as any);
-    angular.element(document.body).append(el);
+    this.applicationElement.append(el);
   }
 
   presentRevisionPreviewModal(uuid: string, content: any) {
@@ -232,7 +248,7 @@ export class WebApplication extends SNApplication {
       `<revision-preview-modal application='application' uuid='uuid' content='content'
       class='sk-modal'></revision-preview-modal>`
     )(scope);
-    angular.element(document.body).append(el);
+    this.applicationElement.append(el);
   }
 
   public openAccountSwitcher() {
@@ -242,7 +258,29 @@ export class WebApplication extends SNApplication {
       "<account-switcher application='application' "
       + "class='sk-modal'></account-switcher>"
     )(scope as any);
-    angular.element(document.body).append(el);
+    this.applicationElement.append(el);
   }
 
+  openModalComponent(component: SNComponent) {
+    const scope = this.scope!.$new(true) as Partial<ComponentModalScope>;
+    scope.componentUuid = component.uuid;
+    scope.application = this;
+    const el = this.$compile!(
+      "<component-modal application='application' component-uuid='componentUuid' "
+      + "class='sk-modal'></component-modal>"
+    )(scope as any);
+    this.applicationElement.append(el);
+  }
+
+  presentPermissionsDialog(dialog: PermissionDialog) {
+    const scope = this.scope!.$new(true) as PermissionsModalScope;
+    scope.permissionsString = dialog.permissionsString;
+    scope.component = dialog.component;
+    scope.callback = dialog.callback;
+    const el = this.$compile!(
+      "<permissions-modal component='component' permissions-string='permissionsString'"
+      + " callback='callback' class='sk-modal'></permissions-modal>"
+    )(scope as any);
+    this.applicationElement.append(el);
+  }
 }

app/assets/javascripts/views/application/application_view.ts

@@ -1,10 +1,8 @@
-import { ComponentModalScope } from './../../directives/views/componentModal';
+import { WebDirective } from '@/types';
-import { WebDirective, PermissionsModalScope } from '@/types';
 import { getPlatformString } from '@/utils';
 import template from './application-view.pug';
 import { AppStateEvent } from '@/ui_models/app_state';
-import { ApplicationEvent, SNComponent } from 'snjs';
+import { ApplicationEvent } from 'snjs';
-import angular from 'angular';
 import {
   PANEL_NAME_NOTES,
   PANEL_NAME_TAGS
@@ -13,10 +11,8 @@ import {
   STRING_DEFAULT_FILE_ERROR
 } from '@/strings';
 import { PureViewCtrl } from '@Views/abstract/pure_view_ctrl';
-import { PermissionDialog } from 'snjs/dist/@types/services/component_manager';
 
 class ApplicationViewCtrl extends PureViewCtrl {
-  private $compile?: ng.ICompileService
   private $location?: ng.ILocationService
   private $rootScope?: ng.IRootScopeService
   public platformString: string
@@ -26,11 +22,9 @@ class ApplicationViewCtrl extends PureViewCtrl {
   private tagsCollapsed = false
   private showingDownloadStatus = false
   private uploadSyncStatus: any
-  private lastAlertShownTimeStamp = 0;
 
   /* @ngInject */
   constructor(
-    $compile: ng.ICompileService,
     $location: ng.ILocationService,
     $rootScope: ng.IRootScopeService,
     $timeout: ng.ITimeoutService
@@ -38,27 +32,21 @@ class ApplicationViewCtrl extends PureViewCtrl {
     super($timeout);
     this.$location = $location;
     this.$rootScope = $rootScope;
-    this.$compile = $compile;
     this.platformString = getPlatformString();
     this.state = { appClass: '' };
     this.onDragDrop = this.onDragDrop.bind(this);
     this.onDragOver = this.onDragOver.bind(this);
-    this.openModalComponent = this.openModalComponent.bind(this);
-    this.presentPermissionsDialog = this.presentPermissionsDialog.bind(this);
     this.addDragDropHandlers();
   }
 
   deinit() {
     this.$location = undefined;
     this.$rootScope = undefined;
-    this.$compile = undefined;
     (this.application as any) = undefined;
     window.removeEventListener('dragover', this.onDragOver, true);
     window.removeEventListener('drop', this.onDragDrop, true);
     (this.onDragDrop as any) = undefined;
     (this.onDragOver as any) = undefined;
-    (this.openModalComponent as any) = undefined;
-    (this.presentPermissionsDialog as any) = undefined;
     super.deinit();
   }
 
@@ -74,12 +62,10 @@ class ApplicationViewCtrl extends PureViewCtrl {
       }
     });
     await this.application!.launch();
-
   }
 
   async onAppStart() {
     super.onAppStart();
-    this.overrideComponentManagerFunctions();
     this.application!.componentManager!.setDesktopManager(
       this.application!.getDesktopService()
     );
@@ -225,34 +211,6 @@ class ApplicationViewCtrl extends PureViewCtrl {
     }
   }
 
-  openModalComponent(component: SNComponent) {
-    const scope = this.$rootScope!.$new(true) as Partial<ComponentModalScope>;
-    scope.componentUuid = component.uuid;
-    scope.application = this.application;
-    const el = this.$compile!(
-      "<component-modal application='application' component-uuid='componentUuid' "
-      + "class='sk-modal'></component-modal>"
-    )(scope as any);
-    angular.element(document.body).append(el);
-  }
-
-  presentPermissionsDialog(dialog: PermissionDialog) {
-    const scope = this.$rootScope!.$new(true) as PermissionsModalScope;
-    scope.permissionsString = dialog.permissionsString;
-    scope.component = dialog.component;
-    scope.callback = dialog.callback;
-    const el = this.$compile!(
-      "<permissions-modal component='component' permissions-string='permissionsString'"
-      + " callback='callback' class='sk-modal'></permissions-modal>"
-    )(scope as any);
-    angular.element(document.body).append(el);
-  }
-
-  overrideComponentManagerFunctions() {
-    this.application!.componentManager!.openModalComponent = this.openModalComponent;
-    this.application!.componentManager!.presentPermissionsDialog = this.presentPermissionsDialog;
-  }
-
   addDragDropHandlers() {
     /**
      * Disable dragging and dropping of files (but allow text) into main SN interface.

app/assets/javascripts/views/application_group/application-group-view.pug

@@ -2,4 +2,5 @@ application-view(
   ng-repeat='application in self.applications',
   ng-if='application == self.activeApplication'
   application='application'
+  ng-attr-id='{{application.identifier}}'
 )

dist/@types/app/assets/javascripts/ui_models/application.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="angular" />
+import { PermissionDialog } from 'snjs/dist/@types/services/component_manager';
 import { ComponentGroup } from './component_group';
 import { EditorGroup } from '@/ui_models/editor_group';
 import { PasswordWizardType } from '@/types';
-import { SNApplication, Challenge, ProtectedAction } from 'snjs';
+import { SNApplication, Challenge, ProtectedAction, SNComponent } from 'snjs';
 import { WebDeviceInterface } from '@/web_device_interface';
 import { DesktopManager, AutolockService, ArchiveManager, NativeExtManager, StatusManager, ThemeManager, PreferencesManager, KeyboardManager } from '@/services';
 import { AppState } from '@/ui_models/app_state';
@@ -29,6 +30,7 @@ export declare class WebApplication extends SNApplication {
     constructor(deviceInterface: WebDeviceInterface, identifier: string, $compile: ng.ICompileService, scope: ng.IScope, defaultSyncServerHost: string, bridge: Bridge);
     /** @override */
     deinit(source: DeinitSource): void;
+    onStart(): void;
     setWebServices(services: WebServices): void;
     getAppState(): AppState;
     getDesktopService(): DesktopManager;
@@ -45,8 +47,11 @@ export declare class WebApplication extends SNApplication {
     presentPrivilegesModal(action: ProtectedAction, onSuccess?: any, onCancel?: any): Promise<void>;
     presentPrivilegesManagementModal(): void;
     authenticationInProgress(): boolean;
+    get applicationElement(): JQLite;
     presentPasswordModal(callback: () => void): void;
     presentRevisionPreviewModal(uuid: string, content: any): void;
     openAccountSwitcher(): void;
+    openModalComponent(component: SNComponent): void;
+    presentPermissionsDialog(dialog: PermissionDialog): void;
 }
 export {};

package-lock.json

@@ -10956,8 +10956,8 @@
       "from": "github:standardnotes/sncrypto#8794c88daa967eaae493cd5fdec7506d52b257ad"
     },
     "snjs": {
-      "version": "github:standardnotes/snjs#51715bcd284bfb3be9cf9e7aa7f85377d9880668",
+      "version": "github:standardnotes/snjs#7abfb3eb46db1409dbcb152b3d9d14ee0453c4a6",
-      "from": "github:standardnotes/snjs#51715bcd284bfb3be9cf9e7aa7f85377d9880668"
+      "from": "github:standardnotes/snjs#7abfb3eb46db1409dbcb152b3d9d14ee0453c4a6"
     },
     "sockjs": {
       "version": "0.3.20",

package.json

@@ -68,6 +68,6 @@
   },
   "dependencies": {
     "sncrypto": "github:standardnotes/sncrypto#8794c88daa967eaae493cd5fdec7506d52b257ad",
-    "snjs": "github:standardnotes/snjs#51715bcd284bfb3be9cf9e7aa7f85377d9880668"
+    "snjs": "github:standardnotes/snjs#7abfb3eb46db1409dbcb152b3d9d14ee0453c4a6"
   }
 }