DEV: adds discourse:focus-changed app event (#8123)

DEV: adds discourse:focus-changed app event (#8123)

diff --git a/app/assets/javascripts/discourse-common/mixins/focus-event.js.es6 b/app/assets/javascripts/discourse-common/mixins/focus-event.js.es6
index 7aafebd..b5081fa 100644
--- a/app/assets/javascripts/discourse-common/mixins/focus-event.js.es6
+++ b/app/assets/javascripts/discourse-common/mixins/focus-event.js.es6
@@ -1,40 +1,43 @@
-function gotFocus() {
-  if (!Discourse.get("hasFocus")) {
-    Discourse.setProperties({ hasFocus: true, notify: false });
-  }
-}
-
-function lostFocus() {
-  if (Discourse.get("hasFocus")) {
-    Discourse.set("hasFocus", false);
-  }
-}
-
-let onchange;
+import { getOwner } from "discourse-common/lib/get-owner";
 
 export default Ember.Mixin.create({
   ready() {
     this._super(...arguments);
 
-    onchange = () => {
-      document.visibilityState === "hidden" ? lostFocus() : gotFocus();
-    };
+    this._onChangeHandler = Ember.run.bind(this, this._onChange);
 
     // Default to true
     Discourse.set("hasFocus", true);
 
-    document.addEventListener("visibilitychange", onchange);
-    document.addEventListener("resume", onchange);
-    document.addEventListener("freeze", onchange);
+    document.addEventListener("visibilitychange", this._onChangeHandler);
+    document.addEventListener("resume", this._onChangeHandler);
+    document.addEventListener("freeze", this._onChangeHandler);
   },
 
   reset() {
     this._super(...arguments);
 
-    document.removeEventListener("visibilitychange", onchange);
-    document.removeEventListener("resume", onchange);
-    document.removeEventListener("freeze", onchange);
+    document.removeEventListener("visibilitychange", this._onChangeHandler);
+    document.removeEventListener("resume", this._onChangeHandler);
+    document.removeEventListener("freeze", this._onChangeHandler);
+
+    this._onChangeHandler = null;
+  },
 
-    onchange = undefined;
+  _onChange() {
+    const container = getOwner(this);
+    const appEvents = container.lookup("app-events:main");
+
+    if (document.visibilityState === "hidden") {
+      if (Discourse.hasFocus) {
+        Discourse.set("hasFocus", false);
+        appEvents.trigger("discourse:focus-changed", false);
+      }
+    } else {
+      if (!Discourse.hasFocus) {
+        Discourse.setProperties({ hasFocus: true, notify: false });
+        appEvents.trigger("discourse:focus-changed", true);
+      }
+    }
   }
 });
diff --git a/app/assets/javascripts/discourse/components/discourse-topic.js.es6 b/app/assets/javascripts/discourse/components/discourse-topic.js.es6
index f94788b..7e3011f 100644
--- a/app/assets/javascripts/discourse/components/discourse-topic.js.es6
+++ b/app/assets/javascripts/discourse/components/discourse-topic.js.es6
@@ -110,6 +110,7 @@ export default Ember.Component.extend(
         }
       );
 
+      this.appEvents.on("discourse:focus-changed", this, "gotFocus");
       this.appEvents.on("post:highlight", this, "_highlightPost");
       this.appEvents.on("header:update-topic", this, "_updateTopic");
     },
@@ -129,13 +130,13 @@ export default Ember.Component.extend(
 
       // this happens after route exit, stuff could have trickled in
       this._hideTopicInHeader();
+      this.appEvents.off("discourse:focus-changed", this, "gotFocus");
       this.appEvents.off("post:highlight", this, "_highlightPost");
       this.appEvents.off("header:update-topic", this, "_updateTopic");
     },
 
-    @observes("Discourse.hasFocus")
-    gotFocus() {
-      if (Discourse.get("hasFocus")) {
+    gotFocus(hasFocus) {
+      if (hasFocus) {
         this.scrolled();
       }
     },

GitHub sha: 6e815ba0

1 Like