From e20c1224d2f7ed3d056dd6f03e85d3ff118d29c9 Mon Sep 17 00:00:00 2001
From: Mo Bitar <me@bitar.io>
Date: Wed, 31 Jan 2018 10:40:26 -0600
Subject: [PATCH] Focus handlers

---
 .../javascripts/app/controllers/editor.js     | 18 +++++++++++----
 .../javascripts/app/controllers/footer.js     | 10 +++++++++
 .../app/services/componentManager.js          | 22 +++++++++++++++++++
 .../app/services/desktopManager.js            |  5 +++++
 4 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/editor.js b/app/assets/javascripts/app/controllers/editor.js
index 02b5143ca..55f54fbcb 100644
--- a/app/assets/javascripts/app/controllers/editor.js
+++ b/app/assets/javascripts/app/controllers/editor.js
@@ -110,6 +110,12 @@ angular.module('app')
       this.showExtensions = false;
     }
 
+    this.closeAllMenus = function() {
+      this.showEditorMenu = false;
+      this.showMenu = false;
+      this.showExtensions = false;
+    }
+
     this.editorMenuOnSelect = function(component) {
       if(!component || component.area == "editor-editor") {
         // if plain editor or other editor
@@ -419,7 +425,7 @@ angular.module('app')
     Components
     */
 
-    componentManager.registerHandler({identifier: "editor", areas: ["note-tags", "editor-stack", "editor-editor"], activationHandler: function(component){
+    componentManager.registerHandler({identifier: "editor", areas: ["note-tags", "editor-stack", "editor-editor"], activationHandler: (component) => {
       if(component.area === "note-tags") {
         // Autocomplete Tags
         this.tagsComponent = component.active ? component : null;
@@ -433,9 +439,13 @@ angular.module('app')
       } else if(component.area == "editor-stack") {
         this.reloadComponentContext();
       }
-    }.bind(this), contextRequestHandler: function(component){
+    }, contextRequestHandler: (component) => {
       return this.note;
-    }.bind(this), actionHandler: function(component, action, data){
+    }, focusHandler: (component, focused) => {
+      if(component.isEditor() && focused) {
+        this.closeAllMenus();
+      }
+    }, actionHandler: (component, action, data) => {
       if(action === "set-size") {
         var setSize = function(element, size) {
           var widthString = typeof size.width === 'string' ? size.width : `${data.width}px`;
@@ -481,7 +491,7 @@ angular.module('app')
           }
         }
       }
-    }.bind(this)});
+    }});
 
     this.reloadComponentContext = function() {
       // componentStack is used by the template to ng-repeat
diff --git a/app/assets/javascripts/app/controllers/footer.js b/app/assets/javascripts/app/controllers/footer.js
index 31165dc25..ed15118ce 100644
--- a/app/assets/javascripts/app/controllers/footer.js
+++ b/app/assets/javascripts/app/controllers/footer.js
@@ -126,8 +126,18 @@ angular.module('app')
       if(action == "set-size") {
         component.setLastSize(data);
       }
+    }, focusHandler: (component, focused) => {
+      if(component.isEditor() && focused) {
+        this.closeAllRooms();
+        this.closeAccountMenu();
+      }
     }});
 
+    $rootScope.$on("editorFocused", () => {
+      this.closeAllRooms();
+      this.closeAccountMenu();
+    })
+
     this.onRoomDismiss = function(room) {
       room.showRoom = false;
     }
diff --git a/app/assets/javascripts/app/services/componentManager.js b/app/assets/javascripts/app/services/componentManager.js
index f34a916c7..effc98f5b 100644
--- a/app/assets/javascripts/app/services/componentManager.js
+++ b/app/assets/javascripts/app/services/componentManager.js
@@ -15,6 +15,20 @@ class ComponentManager {
     this.contextStreamObservers = [];
     this.activeComponents = [];
 
+    const detectFocusChange = (event) => {
+      for(var component of this.activeComponents) {
+        if(document.activeElement == this.iframeForComponent(component)) {
+          this.timeout(() => {
+            this.focusChangedForComponent(component);
+          })
+          break;
+        }
+      }
+    }
+
+    window.addEventListener ? window.addEventListener('focus', detectFocusChange, true) : window.attachEvent('onfocusout', detectFocusChange);
+    window.addEventListener ? window.addEventListener('blur', detectFocusChange, true) : window.attachEvent('onblur', detectFocusChange);
+
     desktopManager.registerUpdateObserver((component) => {
       // Reload theme if active
       if(component.active && component.isTheme()) {
@@ -766,6 +780,14 @@ class ComponentManager {
     }
   }
 
+  focusChangedForComponent(component) {
+    let focused = document.activeElement == this.iframeForComponent(component);
+    for(var handler of this.handlers) {
+      // Notify all handlers, and not just ones that match this component type
+      handler.focusHandler && handler.focusHandler(component, focused);
+    }
+  }
+
   handleSetSizeEvent(component, data) {
     var setSize = function(element, size) {
       var widthString = typeof size.width === 'string' ? size.width : `${data.width}px`;
diff --git a/app/assets/javascripts/app/services/desktopManager.js b/app/assets/javascripts/app/services/desktopManager.js
index 145124fbd..3044e6da2 100644
--- a/app/assets/javascripts/app/services/desktopManager.js
+++ b/app/assets/javascripts/app/services/desktopManager.js
@@ -68,6 +68,11 @@ class DesktopManager {
     let permissableKeys = ["package_info", "local_url"];
     var component = this.modelManager.findItem(componentData.uuid);
 
+    if(!component) {
+      console.error("desktop_onComponentInstallationComplete component is null for uuid", componentData.uuid);
+      return;
+    }
+
     if(error) {
       component.setAppDataItem("installError", error);
     } else {