Component improvements

app/assets/javascripts/application.js

@@ -17,7 +17,6 @@ export class WebApplication extends SNApplication {
       environment: Environments.Web,
       platform: platformFromString(getPlatformString()),
       namespace: '',
-      host: window._default_sync_server,
       deviceInterface: deviceInterface,
       swapClasses: [
         {

app/assets/javascripts/controllers/applicationView.js

@@ -69,7 +69,9 @@ class ApplicationViewCtrl extends PureCtrl {
   onAppStart() {
     super.onAppStart();
     this.overrideComponentManagerFunctions();
-    this.application.componentManager.setDesktopManager(this.application.getDesktopService());
+    this.application.componentManager.setDesktopManager(
+      this.application.getDesktopService()
+    );
     this.setState({
       ready: true,
       needsUnlock: this.application.hasPasscode()
@@ -112,7 +114,7 @@ class ApplicationViewCtrl extends PureCtrl {
       }
     } else if (eventName === ApplicationEvents.InvalidSyncSession) {
       this.showInvalidSessionAlert();
-    } else if(eventName === ApplicationEvents.LocalDatabaseReadError) {
+    } else if (eventName === ApplicationEvents.LocalDatabaseReadError) {
       this.application.alertService.alert({
         text: 'Unable to load local database. Please restart the app and try again.'
       });

app/assets/javascripts/controllers/tags.js

@@ -1,4 +1,10 @@
-import { SNNote, SNSmartTag, ContentTypes, ApplicationEvents } from 'snjs';
+import {
+  SNNote,
+  SNSmartTag,
+  ContentTypes,
+  ApplicationEvents,
+  ComponentActions
+} from 'snjs';
 import template from '%/tags.pug';
 import { AppStateEvents } from '@/services/state';
 import { PANEL_NAME_TAGS } from '@/controllers/constants';
@@ -47,6 +53,7 @@ class TagsPanelCtrl extends PureCtrl {
     this.selectTag(smartTags[0]);
   }
 
+  /** @override */
   onAppSync() {
     super.onAppSync();
     this.reloadNoteCounts();
@@ -169,18 +176,22 @@ class TagsPanelCtrl extends PureCtrl {
       contextRequestHandler: (component) => {
         return null;
       },
-      actionHandler: (component, action, data) => {
-        if (action === 'select-item') {
-          if (data.item.content_type === 'Tag') {
+      actionHandler: (_, action, data) => {
+        if (action === ComponentActions.SelectItem) {
+          if (data.item.content_type === ContentTypes.Tag) {
             const tag = this.application.findItem({ uuid: data.item.uuid });
             if (tag) {
               this.selectTag(tag);
             }
-          } else if (data.item.content_type === 'SN|SmartTag') {
-            const smartTag = new SNSmartTag(data.item);
-            this.selectTag(smartTag);
+          } else if (data.item.content_type === ContentTypes.SmartTag) {
+            this.application.createTemplateItem({
+              contentType: ContentTypes.SmartTag,
+              content: data.item.content
+            }).then(smartTag => {
+              this.selectTag(smartTag);
+            });
           }
-        } else if (action === 'clear-selection') {
+        } else if (action === ComponentActions.ClearSelection) {
           this.selectTag(this.state.smartTags[0]);
         }
       }

app/assets/javascripts/directives/views/accountMenu.js

@@ -96,6 +96,11 @@ class AccountMenuCtrl extends PureCtrl {
     });
   }
 
+  onHostInputChange() {
+    const url = this.state.formData.url;
+    this.application.setHost(url);
+  }
+
   async loadBackupsAvailability() {
     const hasUser = !isNullOrUndefined(this.application.getUser());
     const hasPasscode = this.application.hasPasscode();

app/assets/javascripts/directives/views/componentModal.js

@@ -6,7 +6,7 @@ export class ComponentModalCtrl {
     this.$element = $element;
   }
 
-  dismiss(callback) {
+  dismiss() {
     if(this.onDismiss) {
       this.onDismiss(this.component);
     }
@@ -29,7 +29,8 @@ export class ComponentModal {
       show: '=',
       component: '=',
       callback: '=',
-      onDismiss: '&'
+      onDismiss: '&',
+      application: '='
     };
   }
 }

app/assets/javascripts/directives/views/componentView.js

@@ -18,9 +18,6 @@ class ComponentViewCtrl {
     this.$rootScope = $rootScope;
     this.$timeout = $timeout;
     this.componentValid = true;
-    this.cleanUpWatch = $scope.$watch('ctrl.component', (component, prevComponent) => {
-      this.componentValueDidSet(component, prevComponent);
-    });
     this.cleanUpOn = $scope.$on('ext-reload-complete', () => {
       this.reloadStatus(false);
     });
@@ -30,17 +27,19 @@ class ComponentViewCtrl {
   }
 
   $onDestroy() {
-    this.cleanUpWatch();
     this.cleanUpOn();
-    this.cleanUpWatch = null;
     this.cleanUpOn = null;
-    this.unregisterThemeHandler();
     this.unregisterComponentHandler();
-    this.unregisterThemeHandler = null;
     this.unregisterComponentHandler = null;
     if (this.component && !this.manualDealloc) {
       const dontSync = true;
-      this.application.componentManager.deactivateComponent(this.component, dontSync);
+      /* application and componentManager may be destroyed if this onDestroy is part of 
+      the entire application being destroyed rather than part of just a single component
+      view being removed */
+      if (this.application && this.application.componentManager) {
+        this.application.componentManager
+          .deactivateComponent(this.component, dontSync);
+      }
     }
     this.unregisterDesktopObserver();
     this.unregisterDesktopObserver = null;
@@ -53,11 +52,32 @@ class ComponentViewCtrl {
     this.application = null;
     this.onVisibilityChange = null;
   }
-
-  $onInit() {
-    this.registerComponentHandlers();
-    this.registerPackageUpdateObserver();
-  };
+  
+  $onChanges() {
+    if(!this.didRegisterObservers) {
+      this.didRegisterObservers = true;
+      this.registerComponentHandlers();
+      this.registerPackageUpdateObserver();
+    }
+    const newComponent = this.component;
+    const oldComponent = this.lastComponentValue;
+    this.lastComponentValue = newComponent;
+    const dontSync = true;
+    if (oldComponent && oldComponent !== newComponent) {
+      this.application.componentManager.deactivateComponent(
+        oldComponent,
+        dontSync
+      );
+    }
+    if (newComponent && newComponent !== oldComponent) {
+      this.application.componentManager.activateComponent(
+        newComponent,
+        dontSync
+      ).then(() => {
+        this.reloadStatus();
+      });
+    }
+  }
 
   registerPackageUpdateObserver() {
     this.unregisterDesktopObserver = this.application.getDesktopService()
@@ -69,14 +89,6 @@ class ComponentViewCtrl {
   }
 
   registerComponentHandlers() {
-    this.unregisterThemeHandler = this.application.componentManager.registerHandler({
-      identifier: 'component-view-' + Math.random(),
-      areas: ['themes'],
-      activationHandler: (component) => {
-
-      }
-    });
-
     this.unregisterComponentHandler = this.application.componentManager.registerHandler({
       identifier: 'component-view-' + Math.random(),
       areas: [this.component.area],
@@ -153,7 +165,7 @@ class ComponentViewCtrl {
   }
 
   handleActivation() {
-    if (!this.component.active) {
+    if (!this.component || !this.component.active) {
       return;
     }
     const iframe = this.application.componentManager.iframeForComponent(
@@ -215,23 +227,6 @@ class ComponentViewCtrl {
     }, avoidFlickerTimeout);
   }
 
-  componentValueDidSet(component, prevComponent) {
-    const dontSync = true;
-    if (prevComponent && component !== prevComponent) {
-      this.application.componentManager.deactivateComponent(
-        prevComponent,
-        dontSync
-      );
-    }
-    if (component) {
-      this.application.componentManager.activateComponent(
-        component,
-        dontSync
-      );
-      this.reloadStatus();
-    }
-  }
-
   disableActiveTheme() {
     this.application.getThemeService().deactivateAllThemes();
   }

app/assets/templates/directives/account-menu.pug

@@ -75,6 +75,7 @@
                 input.sk-input.mt-5.sk-base(
                   name='server', 
                   ng-model='self.state.formData.url', 
+                  ng-change='self.onHostInputChange()'
                   placeholder='Server URL', 
                   required='', 
                   type='text'

app/assets/templates/directives/component-modal.pug

@@ -12,5 +12,5 @@
         a.sk-a.info.close-button(ng-click="ctrl.dismiss()") Close
       component-view.component-view(
         component="ctrl.component",
-        application='self.application'
+        application='ctrl.application'
         )

app/assets/templates/directives/editor-menu.pug

@@ -21,7 +21,7 @@
         .sk-menu-panel-column(
           ng-if='editor.content.conflict_of || self.shouldDisplayRunningLocallyLabel(editor)'
           )
-          strong.danger.medium-text(
+          .info(
             ng-if='editor.content.conflict_of'
             ) Conflicted copy
           .sk-sublabel(

app/assets/templates/directives/revision-preview-modal.pug

@@ -24,5 +24,5 @@
           component-view.component-view(
             component="ctrl.editor" 
             ng-if="ctrl.editor",
-            application='self.application'
+            application='ctrl.application'
             )

app/assets/templates/editor.pug

@@ -35,7 +35,8 @@
         component-view.component-view(
           component='self.state.tagsComponent', 
           ng-class="{'locked' : self.state.note.locked}", 
-          ng-style="self.state.note.locked && {'pointer-events' : 'none'}"
+          ng-style="self.state.note.locked && {'pointer-events' : 'none'}",
+          application='self.application'
           )
       input.tags-input(
         ng-blur='self.saveTags()', 

app/assets/templates/footer.pug

@@ -33,7 +33,7 @@
           component='room', 
           ng-if='room.showRoom', 
           on-dismiss='ctrl.onRoomDismiss()',
-          application='self.application'
+          application='ctrl.application'
           )
     .center
       .sk-app-bar-item(ng-if='ctrl.arbitraryStatusMessage')
@@ -64,7 +64,7 @@
           close-function='ctrl.toggleSyncResolutionMenu()', 
           ng-click='$event.stopPropagation();', 
           ng-if='ctrl.showSyncResolution',
-          application='self.application'
+          application='ctrl.application'
           )
       .sk-app-bar-item(ng-if='ctrl.lastSyncDate && ctrl.isRefreshing')
         .sk-spinner.small