Focus handlers

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`;