diff --git a/app/assets/javascripts/discourse-common/mixins/focus-event.js.es6 b/app/assets/javascripts/discourse-common/mixins/focus-event.js.es6 new file mode 100644 index 00000000000..e9e5690c5bb --- /dev/null +++ b/app/assets/javascripts/discourse-common/mixins/focus-event.js.es6 @@ -0,0 +1,36 @@ +function gotFocus() { + if (!Discourse.get("hasFocus")) { + Discourse.setProperties({ hasFocus: true, notify: false }); + } +} + +function lostFocus() { + if (Discourse.get("hasFocus")) { + Discourse.set("hasFocus", false); + } +} + +let onchange; + +export default Ember.Mixin.create({ + ready() { + this._super(...arguments); + + onchange = () => { + document.visibilityState === "hidden" ? lostFocus() : gotFocus(); + }; + + // Default to true + Discourse.set("hasFocus", true); + + document.addEventListener("visibilitychange", onchange); + }, + + reset() { + this._super(...arguments); + + document.removeEventListener("visibilitychange", onchange); + + onchange = undefined; + } +}); diff --git a/app/assets/javascripts/discourse.js.es6 b/app/assets/javascripts/discourse.js.es6 index 3ad77043a0b..5bce67cd0d4 100644 --- a/app/assets/javascripts/discourse.js.es6 +++ b/app/assets/javascripts/discourse.js.es6 @@ -4,10 +4,11 @@ import { default as computed, observes } from "ember-addons/ember-computed-decorators"; +import FocusEvent from "discourse-common/mixins/focus-event"; const _pluginCallbacks = []; -const Discourse = Ember.Application.extend({ +const Discourse = Ember.Application.extend(FocusEvent, { rootElement: "#main", _docTitle: document.title, RAW_TEMPLATES: {}, diff --git a/app/assets/javascripts/discourse/initializers/focus-event.js.es6 b/app/assets/javascripts/discourse/initializers/focus-event.js.es6 deleted file mode 100644 index cb1432ee3df..00000000000 --- a/app/assets/javascripts/discourse/initializers/focus-event.js.es6 +++ /dev/null @@ -1,68 +0,0 @@ -/** - Keep track of when the browser is in focus. -**/ -export default { - name: "focus-event", - - initialize: function() { - var hidden = "hidden"; - - // Default to true - Discourse.set("hasFocus", true); - - var gotFocus = function() { - if (!Discourse.get("hasFocus")) { - Discourse.setProperties({ hasFocus: true, notify: false }); - } - }; - - var lostFocus = function() { - if (Discourse.get("hasFocus")) { - Discourse.set("hasFocus", false); - } - }; - - var onchange = function(evt) { - var v = "visible", - h = "hidden", - evtMap = { - focus: v, - focusin: v, - pageshow: v, - blur: h, - focusout: h, - pagehide: h - }; - - evt = evt || window.event; - if (evt.type in evtMap) { - if (evtMap[evt.type] === "hidden") { - lostFocus(); - } else { - gotFocus(); - } - } else { - if (this[hidden]) { - lostFocus(); - } else { - gotFocus(); - } - } - }; - - // from StackOverflow http://stackoverflow.com/a/1060034/17174 - if (hidden in document) { - document.addEventListener("visibilitychange", onchange); - } else if ((hidden = "mozHidden") in document) { - document.addEventListener("mozvisibilitychange", onchange); - } else if ((hidden = "webkitHidden") in document) { - document.addEventListener("webkitvisibilitychange", onchange); - } else if ((hidden = "msHidden") in document) { - document.addEventListener("msvisibilitychange", onchange); - } - // All others (including iPad which is a bit weird and gives onpageshow / hide - else { - window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange; - } - } -};